import React, { useState, useEffect } from 'react';
import {
View, Text, TouchableWithoutFeedback, Modal, KeyboardAvoidingView, Animated, Easing
} from 'react-native';
import PropTypes from 'prop-types';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
import Button from '../../Button';
import TextInput from '../../TextInput';
import { textParser } from '../utils';
import { themes } from '../../../constants/colors';
import I18n from '../../../i18n';
import { isIOS } from '../../../utils/deviceInfo';
import Chips from './Chips';
import Items from './Items';
import Input from './Input';
import styles from './styles';
const ANIMATION_DURATION = 200;
const ANIMATION_PROPS = {
duration: ANIMATION_DURATION,
easing: Easing.inOut(Easing.quad),
useNativeDriver: true
};
const animatedValue = new Animated.Value(0);
const behavior = isIOS ? 'padding' : null;
export const MultiSelect = React.memo(({
options = [],
onChange,
placeholder = { text: 'Search' },
context,
loading,
value: values,
multiselect = false,
onSearch,
onClose,
disabled,
inputStyle,
theme
}) => {
const [selected, select] = useState(values || []);
const [open, setOpen] = useState(false);
const [search, onSearchChange] = useState('');
const [currentValue, setCurrentValue] = useState('');
const [showContent, setShowContent] = useState(false);
useEffect(() => {
if (values) {
select(values);
}
}, [values]);
useEffect(() => {
setOpen(showContent);
}, [showContent]);
useEffect(() => {
if (values && values.length && !multiselect) {
setCurrentValue(values[0].text);
}
}, []);
const onShow = () => {
Animated.timing(
animatedValue,
{
toValue: 1,
...ANIMATION_PROPS
}
).start();
setShowContent(true);
};
const onHide = () => {
onClose();
Animated.timing(
animatedValue,
{
toValue: 0,
...ANIMATION_PROPS
}
).start(() => setShowContent(false));
};
const onSelect = (item) => {
const { value, text: { text } } = item;
if (multiselect) {
let newSelect = [];
if (!selected.includes(value)) {
newSelect = [...selected, value];
} else {
newSelect = selected.filter(s => s !== value);
}
select(newSelect);
onChange({ value: newSelect });
} else {
onChange({ value });
setCurrentValue(text);
onHide();
}
};
const renderContent = () => {
const items = onSearch ? options : options.filter(option => textParser([option.text]).toLowerCase().includes(search.toLowerCase()));
return (
);
};
const translateY = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [600, 0]
});
let button = multiselect ? (
) : (
{currentValue || placeholder.text}
);
if (context === BLOCK_CONTEXT.FORM) {
const items = options.filter(option => selected.includes(option.value));
button = (
{items.length ? : {placeholder.text}}
);
}
return (
<>
{showContent ? renderContent() : null}
{button}
>
);
});
MultiSelect.propTypes = {
options: PropTypes.array,
onChange: PropTypes.func,
placeholder: PropTypes.object,
context: PropTypes.number,
loading: PropTypes.bool,
multiselect: PropTypes.bool,
onSearch: PropTypes.func,
onClose: PropTypes.func,
inputStyle: PropTypes.object,
value: PropTypes.array,
disabled: PropTypes.bool,
theme: PropTypes.string
};
MultiSelect.defaultProps = {
onClose: () => {}
};