flowstudio
Version:
Enterprise Flow Designer
65 lines • 5.39 kB
JavaScript
'use client';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { Flex, TextField, Text, ScrollArea, Popover, Button, Badge } from '@radix-ui/themes';
import { ChevronsUpDown, Search } from 'lucide-react';
// import '../../../styles/combo_box.css'
import { IoMdClose } from 'react-icons/io';
export default function ComboBox({ type = 'text', value, onValueChange, placeholder, items, noItemsText = 'No', isMulti = false, width = '100%', ...rest }) {
var _a;
const [getSearchText, setSearchText] = useState('');
const [open, setOpen] = useState(false);
const [getSortedItems, setSortedItems] = useState([]);
const [getValue, setValue] = useState(isMulti ? [] : value);
// useEffect(()=>{
// if(value){
// setValue(value);
// }else{
// setValue(null)
// }
// },[value])
useEffect(() => {
if ((getValue === null || getValue === void 0 ? void 0 : getValue.length) > 0) {
onValueChange(getValue);
}
else {
onValueChange(null);
}
}, [getValue]);
useEffect(() => {
if (items && getSearchText) {
setSortedItems(items === null || items === void 0 ? void 0 : items.filter((item) => item.text.toLowerCase().includes(getSearchText.toLowerCase())));
}
else {
setSortedItems(items);
}
}, [items, getSearchText]);
const handleSelectItem = (item) => {
if (!isMulti) {
setValue(item === null || item === void 0 ? void 0 : item.value);
setOpen(false);
}
else {
if (!(getValue === null || getValue === void 0 ? void 0 : getValue.includes(item === null || item === void 0 ? void 0 : item.value))) {
setValue([...getValue, item === null || item === void 0 ? void 0 : item.value]);
}
setOpen(false);
}
};
const handleRemoveItem = (val) => {
setValue(getValue.filter((item) => item !== val));
};
return (_jsx(_Fragment, { children: _jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsx(Popover.Trigger, { children: _jsxs(Button, { variant: 'outline', style: { width: width, height: 'auto', minHeight: 30, paddingTop: 5, paddingBottom: 5, justifyContent: 'space-between' }, ...rest, children: [_jsxs(Flex, { wrap: 'wrap', gap: '2', children: [!isMulti && (_jsx(Text, { style: {
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'normal'
}, children: ((_a = items === null || items === void 0 ? void 0 : items.find((item) => item.value === getValue)) === null || _a === void 0 ? void 0 : _a.text) || placeholder })), isMulti && (_jsx(_Fragment, { children: (getValue === null || getValue === void 0 ? void 0 : getValue.length) > 0 ? _jsx(_Fragment, { children: getValue === null || getValue === void 0 ? void 0 : getValue.map((val, ind) => {
var _a;
return (_jsx(Badge, { variant: "soft", highContrast: true, children: ((_a = items === null || items === void 0 ? void 0 : items.find((item) => item.value === val)) === null || _a === void 0 ? void 0 : _a.text) || placeholder }, ind));
}) }) :
_jsx(Text, { style: { display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'normal' }, children: placeholder }) }))] }), _jsx(ChevronsUpDown, { size: '12' })] }) }), _jsx(Popover.Content, { maxWidth: '250px', style: { padding: 5, marginTop: 3 }, children: _jsxs(Flex, { direction: 'column', p: '1', gap: '2', children: [_jsxs(TextField.Root, { placeholder: 'Search', value: getSearchText, onChange: (e) => { setSearchText(e.target.value); }, children: [_jsx(TextField.Slot, { side: 'left', children: _jsx(Search, { size: 16 }) }), _jsx(TextField.Slot, { side: 'right', pr: '1', children: _jsx(Button, { size: '1', variant: 'soft', color: 'red', highContrast: true, onClick: () => { setSearchText(''); setOpen(false); }, children: _jsx(IoMdClose, {}) }) })] }), _jsxs(ScrollArea, { type: 'auto', scrollbars: 'vertical', style: { height: '200px' }, children: [_jsx(Flex, { align: 'center', gap: '2', className: 'widget_item', p: '2', onClick: () => { setValue(isMulti ? [] : ''); setOpen(false); }, children: _jsx(Text, { size: '2', color: 'gray', style: { userSelect: 'none' }, children: noItemsText }) }), getSortedItems === null || getSortedItems === void 0 ? void 0 : getSortedItems.map((item, ind) => (_jsxs(Flex, { align: 'center', gap: '2', className: 'widget_item', p: '2', onClick: () => handleSelectItem(item), children: [item === null || item === void 0 ? void 0 : item.icon, _jsx(Text, { size: '2', color: 'gray', style: { userSelect: 'none' }, children: item.text })] }, ind)))] })] }) })] }) }));
}
//# sourceMappingURL=index.js.map