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 ? (