⚡️ feat: create select component
This commit is contained in:
Wahyu Kurniawan
parent
3cf8769259
commit
b7fe301c81
196
packages/frontend/src/components/shared/Select/Select.theme.ts
Normal file
196
packages/frontend/src/components/shared/Select/Select.theme.ts
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
import { VariantProps, tv } from 'tailwind-variants';
|
||||||
|
|
||||||
|
export const selectTheme = tv({
|
||||||
|
slots: {
|
||||||
|
container: ['flex', 'flex-col', 'relative', 'gap-2'],
|
||||||
|
label: ['text-sm', 'text-elements-high-em'],
|
||||||
|
description: ['text-xs', 'text-elements-low-em'],
|
||||||
|
inputWrapper: [
|
||||||
|
'relative',
|
||||||
|
'flex',
|
||||||
|
'flex-wrap',
|
||||||
|
'gap-1',
|
||||||
|
'min-w-[200px]',
|
||||||
|
'w-full',
|
||||||
|
'rounded-lg',
|
||||||
|
'bg-transparent',
|
||||||
|
'text-elements-mid-em',
|
||||||
|
'shadow-sm',
|
||||||
|
'border',
|
||||||
|
'border-border-interactive',
|
||||||
|
'focus-ring',
|
||||||
|
'disabled:shadow-none',
|
||||||
|
'disabled:border-none',
|
||||||
|
],
|
||||||
|
input: ['outline-none'],
|
||||||
|
inputValue: [
|
||||||
|
'flex',
|
||||||
|
'items-center',
|
||||||
|
'gap-1',
|
||||||
|
'pl-2',
|
||||||
|
'pr-2',
|
||||||
|
'rounded-md',
|
||||||
|
'text-elements-mid-em',
|
||||||
|
'bg-base-bg-emphasized',
|
||||||
|
'hover:bg-base-bg-emphasized/80',
|
||||||
|
],
|
||||||
|
iconContainer: [
|
||||||
|
'absolute',
|
||||||
|
'inset-y-0',
|
||||||
|
'flex',
|
||||||
|
'items-center',
|
||||||
|
'gap-2',
|
||||||
|
'z-10',
|
||||||
|
'cursor-pointer',
|
||||||
|
],
|
||||||
|
icon: ['text-elements-mid-em'],
|
||||||
|
helperIcon: [],
|
||||||
|
helperText: ['flex', 'gap-2', 'items-center', 'text-elements-danger'],
|
||||||
|
popover: [
|
||||||
|
'z-20',
|
||||||
|
'absolute',
|
||||||
|
'px-1',
|
||||||
|
'py-1',
|
||||||
|
'flex-col',
|
||||||
|
'gap-0.5',
|
||||||
|
'w-full',
|
||||||
|
'bg-surface-floating',
|
||||||
|
'shadow-dropdown',
|
||||||
|
'w-auto',
|
||||||
|
'max-h-60',
|
||||||
|
'overflow-auto',
|
||||||
|
'border',
|
||||||
|
'border-gray-200',
|
||||||
|
'rounded-xl',
|
||||||
|
],
|
||||||
|
item: [
|
||||||
|
'p-2',
|
||||||
|
'gap-3',
|
||||||
|
'flex',
|
||||||
|
'items-start',
|
||||||
|
'justify-between',
|
||||||
|
'rounded-lg',
|
||||||
|
'group',
|
||||||
|
'data-[disabled]:cursor-not-allowed',
|
||||||
|
],
|
||||||
|
itemContent: ['flex', 'flex-1', 'whitespace-nowrap'],
|
||||||
|
itemLabel: [
|
||||||
|
'text-sm',
|
||||||
|
'text-elements-high-em',
|
||||||
|
'tracking-[-0.006em]',
|
||||||
|
'data-[disabled]:text-elements-disabled',
|
||||||
|
],
|
||||||
|
itemDescription: [
|
||||||
|
'text-xs',
|
||||||
|
'text-elements-low-em',
|
||||||
|
'data-[disabled]:text-elements-disabled',
|
||||||
|
],
|
||||||
|
itemIcon: ['h-4.5', 'w-4.5', 'text-elements-high-em'],
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
orientation: {
|
||||||
|
horizontal: {
|
||||||
|
item: ['items-center'],
|
||||||
|
itemContent: ['flex-row', 'items-center', 'gap-2'],
|
||||||
|
},
|
||||||
|
vertical: {
|
||||||
|
itemContent: ['flex-col', 'gap-0.5'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
variant: {
|
||||||
|
default: {
|
||||||
|
item: [],
|
||||||
|
},
|
||||||
|
danger: {
|
||||||
|
item: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
default: {
|
||||||
|
inputWrapper: '',
|
||||||
|
helperText: ['text-elements-low-em'],
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
inputWrapper: [
|
||||||
|
'outline',
|
||||||
|
'outline-offset-0',
|
||||||
|
'outline-border-danger',
|
||||||
|
'shadow-none',
|
||||||
|
'focus:outline-border-danger',
|
||||||
|
],
|
||||||
|
helperText: ['text-elements-danger'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
md: {
|
||||||
|
container: ['min-h-11'],
|
||||||
|
inputWrapper: ['min-h-11', 'text-sm', 'pl-4', 'pr-4', 'py-1'],
|
||||||
|
icon: ['h-[18px]', 'w-[18px]'],
|
||||||
|
helperText: 'text-sm',
|
||||||
|
helperIcon: ['h-5', 'w-5'],
|
||||||
|
popover: ['mt-12'],
|
||||||
|
},
|
||||||
|
sm: {
|
||||||
|
container: ['min-h-8'],
|
||||||
|
inputWrapper: ['min-h-8', 'text-xs', 'pl-3', 'pr-3', 'py-0.5'],
|
||||||
|
icon: ['h-4', 'w-4'],
|
||||||
|
helperText: 'text-xs',
|
||||||
|
helperIcon: ['h-4', 'w-4'],
|
||||||
|
popover: ['mt-9'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
isOpen: {
|
||||||
|
true: {
|
||||||
|
popover: ['flex'],
|
||||||
|
},
|
||||||
|
false: {
|
||||||
|
popover: ['hidden'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
true: {
|
||||||
|
item: ['bg-base-bg-emphasized', 'data-[disabled]:bg-transparent'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
hasValue: {
|
||||||
|
true: '',
|
||||||
|
},
|
||||||
|
multiple: {
|
||||||
|
true: {
|
||||||
|
inputValue: ['pr-1'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
searchable: {
|
||||||
|
true: '',
|
||||||
|
false: {
|
||||||
|
input: ['cursor-pointer'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
compoundVariants: [
|
||||||
|
{
|
||||||
|
size: 'md',
|
||||||
|
hasValue: true,
|
||||||
|
class: {
|
||||||
|
inputWrapper: ['pl-1'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
size: 'sm',
|
||||||
|
hasValue: true,
|
||||||
|
class: {
|
||||||
|
inputWrapper: ['pl-0.5'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
defaultVariants: {
|
||||||
|
orientation: 'horizontal',
|
||||||
|
variant: 'default',
|
||||||
|
size: 'md',
|
||||||
|
state: 'default',
|
||||||
|
isOpen: false,
|
||||||
|
hasValue: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export type SelectTheme = VariantProps<typeof selectTheme>;
|
||||||
297
packages/frontend/src/components/shared/Select/Select.tsx
Normal file
297
packages/frontend/src/components/shared/Select/Select.tsx
Normal file
@ -0,0 +1,297 @@
|
|||||||
|
import React, {
|
||||||
|
ReactNode,
|
||||||
|
useState,
|
||||||
|
ComponentPropsWithoutRef,
|
||||||
|
useMemo,
|
||||||
|
useCallback,
|
||||||
|
MouseEvent,
|
||||||
|
} from 'react';
|
||||||
|
import { useMultipleSelection, useCombobox } from 'downshift';
|
||||||
|
import { SelectTheme, selectTheme } from './Select.theme';
|
||||||
|
import { Button } from '../Button';
|
||||||
|
import {
|
||||||
|
CheckRadioIcon,
|
||||||
|
ChevronDownIcon,
|
||||||
|
CrossIcon,
|
||||||
|
WarningIcon,
|
||||||
|
} from '../CustomIcon';
|
||||||
|
import { cloneIcon } from 'utils/cloneIcon';
|
||||||
|
import { cn } from 'utils/classnames';
|
||||||
|
|
||||||
|
export type DropdownItem = {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
description?: string;
|
||||||
|
leftIcon?: ReactNode;
|
||||||
|
rightIcon?: ReactNode;
|
||||||
|
disabled?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
interface MultiSelectProps
|
||||||
|
extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>,
|
||||||
|
SelectTheme {
|
||||||
|
items: DropdownItem[];
|
||||||
|
label?: string;
|
||||||
|
description?: string;
|
||||||
|
multiple?: boolean;
|
||||||
|
searchable?: boolean;
|
||||||
|
clearable?: boolean;
|
||||||
|
leftIcon?: ReactNode;
|
||||||
|
rightIcon?: ReactNode;
|
||||||
|
helperText?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MultiSelect: React.FC<MultiSelectProps> = ({
|
||||||
|
items,
|
||||||
|
multiple = false,
|
||||||
|
searchable = false,
|
||||||
|
clearable,
|
||||||
|
size,
|
||||||
|
state,
|
||||||
|
orientation = 'horizontal',
|
||||||
|
variant,
|
||||||
|
label,
|
||||||
|
description,
|
||||||
|
leftIcon,
|
||||||
|
rightIcon,
|
||||||
|
helperText,
|
||||||
|
placeholder: placeholderProp = 'Select an option',
|
||||||
|
}) => {
|
||||||
|
const theme = selectTheme({ size, state, variant, orientation });
|
||||||
|
|
||||||
|
const [inputValue, setInputValue] = useState('');
|
||||||
|
const [selectedItem, setSelectedItem] = useState<DropdownItem | null>(null);
|
||||||
|
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||||
|
|
||||||
|
const handleSelectedItemChange = (selectedItem: DropdownItem | null) => {
|
||||||
|
setSelectedItem(selectedItem);
|
||||||
|
setInputValue(selectedItem ? selectedItem.label : '');
|
||||||
|
};
|
||||||
|
|
||||||
|
const {
|
||||||
|
getSelectedItemProps,
|
||||||
|
getDropdownProps,
|
||||||
|
addSelectedItem,
|
||||||
|
removeSelectedItem,
|
||||||
|
selectedItems,
|
||||||
|
reset,
|
||||||
|
} = useMultipleSelection<DropdownItem>({
|
||||||
|
onSelectedItemsChange: multiple
|
||||||
|
? undefined
|
||||||
|
: ({ selectedItems }) => {
|
||||||
|
handleSelectedItemChange(selectedItems?.[0] || null);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const filteredItems = useMemo(() => {
|
||||||
|
// Show all items if the dropdown is not multiple and not searchable
|
||||||
|
if (!multiple && !searchable) return items;
|
||||||
|
// Show only the items that match the input value
|
||||||
|
if (!multiple && searchable) {
|
||||||
|
return items.filter((item) =>
|
||||||
|
item.label.toLowerCase().includes(inputValue.toLowerCase()),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// Show only the items that match the input value and are not already selected
|
||||||
|
return items.filter(
|
||||||
|
(item) =>
|
||||||
|
item.label.toLowerCase().includes(inputValue.toLowerCase()) &&
|
||||||
|
!(
|
||||||
|
multiple && searchable // If the dropdown is multiple and searchable, show filtered items
|
||||||
|
? selectedItems
|
||||||
|
: []
|
||||||
|
).includes(item),
|
||||||
|
);
|
||||||
|
}, [items, inputValue, selectedItem, selectedItems, multiple, searchable]);
|
||||||
|
|
||||||
|
const {
|
||||||
|
isOpen,
|
||||||
|
getMenuProps,
|
||||||
|
getInputProps,
|
||||||
|
highlightedIndex,
|
||||||
|
getItemProps,
|
||||||
|
openMenu,
|
||||||
|
} = useCombobox({
|
||||||
|
items: filteredItems,
|
||||||
|
// @ts-expect-error – there are two params but we don't need the second one
|
||||||
|
isItemDisabled: (item) => item.disabled,
|
||||||
|
onInputValueChange: ({ inputValue = '' }) => setInputValue(inputValue),
|
||||||
|
onSelectedItemChange: ({ selectedItem }) => {
|
||||||
|
if (!multiple && selectedItem) {
|
||||||
|
handleSelectedItemChange(selectedItem);
|
||||||
|
} else if (multiple && selectedItem) {
|
||||||
|
// If the item is not already selected, add it to the selected items
|
||||||
|
if (!selectedItems.includes(selectedItem)) {
|
||||||
|
addSelectedItem(selectedItem);
|
||||||
|
} else {
|
||||||
|
// If the item is already selected, remove it from the selected items
|
||||||
|
removeSelectedItem(selectedItem);
|
||||||
|
}
|
||||||
|
setInputValue('');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onIsOpenChange: ({ isOpen }) => {
|
||||||
|
setDropdownOpen(isOpen ?? false);
|
||||||
|
if (isOpen && !multiple && selectedItem && searchable) {
|
||||||
|
setInputValue('');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectedItem: multiple ? null : selectedItem,
|
||||||
|
// TODO: Make the input value empty when the dropdown is open, has a value, it is not multiple, and searchable
|
||||||
|
itemToString: (item) => (item && !multiple ? item.label : ''),
|
||||||
|
});
|
||||||
|
|
||||||
|
const isSelected = useCallback(
|
||||||
|
(item: DropdownItem) =>
|
||||||
|
multiple ? selectedItems.includes(item) : selectedItem === item,
|
||||||
|
[selectedItems, selectedItem, multiple],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleClear = (e: MouseEvent<SVGSVGElement, globalThis.MouseEvent>) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
reset();
|
||||||
|
setSelectedItem(null);
|
||||||
|
setInputValue('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderLabels = useMemo(
|
||||||
|
() => (
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className={theme.label()}>{label}</p>
|
||||||
|
<p className={theme.description()}>{description}</p>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
[theme, label, description],
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderLeftIcon = useMemo(() => {
|
||||||
|
return (
|
||||||
|
<div className={theme.iconContainer({ class: 'left-0 pl-4' })}>
|
||||||
|
{cloneIcon(leftIcon, { className: theme.icon(), 'aria-hidden': true })}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}, [cloneIcon, theme, leftIcon]);
|
||||||
|
|
||||||
|
const renderRightIcon = useMemo(() => {
|
||||||
|
return (
|
||||||
|
<div className={theme.iconContainer({ class: 'pr-4 right-0' })}>
|
||||||
|
{clearable && (selectedItems.length > 0 || selectedItem) && (
|
||||||
|
<CrossIcon
|
||||||
|
className={theme.icon({ class: 'h-4 w-4' })}
|
||||||
|
onClick={handleClear}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{rightIcon ? (
|
||||||
|
cloneIcon(rightIcon, { className: theme.icon(), 'aria-hidden': true })
|
||||||
|
) : (
|
||||||
|
<ChevronDownIcon className={theme.icon()} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}, [cloneIcon, theme, rightIcon]);
|
||||||
|
|
||||||
|
const renderHelperText = useMemo(
|
||||||
|
() => (
|
||||||
|
<div className={theme.helperText()}>
|
||||||
|
{state === 'error' &&
|
||||||
|
cloneIcon(<WarningIcon className={theme.helperIcon()} />, {
|
||||||
|
'aria-hidden': true,
|
||||||
|
})}
|
||||||
|
<p>{helperText}</p>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
[cloneIcon, state, theme, helperText],
|
||||||
|
);
|
||||||
|
|
||||||
|
const isMultipleHasValueButNotSearchable =
|
||||||
|
multiple && !searchable && selectedItems.length > 0;
|
||||||
|
const placeholder = isMultipleHasValueButNotSearchable ? '' : placeholderProp;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={theme.container()}>
|
||||||
|
{renderLabels}
|
||||||
|
<div
|
||||||
|
className={theme.inputWrapper({
|
||||||
|
hasValue: multiple && selectedItems.length > 0,
|
||||||
|
})}
|
||||||
|
onClick={() => !dropdownOpen && openMenu()}
|
||||||
|
>
|
||||||
|
{leftIcon && renderLeftIcon}
|
||||||
|
{multiple &&
|
||||||
|
selectedItems.length > 0 &&
|
||||||
|
selectedItems.map((item, index) => (
|
||||||
|
<span
|
||||||
|
key={`selected-item-${index}`}
|
||||||
|
{...getSelectedItemProps({ selectedItem: item, index })}
|
||||||
|
className={theme.inputValue({ multiple })}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
<Button
|
||||||
|
onClick={() => removeSelectedItem(item)}
|
||||||
|
iconOnly
|
||||||
|
variant="unstyled"
|
||||||
|
size="xs"
|
||||||
|
>
|
||||||
|
<CrossIcon size={14} />
|
||||||
|
</Button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
<input
|
||||||
|
{...getInputProps(getDropdownProps())}
|
||||||
|
placeholder={placeholder}
|
||||||
|
readOnly={!searchable} // Control readOnly based on searchable
|
||||||
|
className={cn(theme.input({ searchable }), {
|
||||||
|
// Make the input width smaller because we don't need it (not searchable)
|
||||||
|
'w-6': isMultipleHasValueButNotSearchable,
|
||||||
|
// Add margin to the X icon
|
||||||
|
'ml-6': isMultipleHasValueButNotSearchable && clearable,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
{renderRightIcon}
|
||||||
|
</div>
|
||||||
|
{renderHelperText}
|
||||||
|
<ul {...getMenuProps()} className={theme.popover({ isOpen })}>
|
||||||
|
{isOpen && filteredItems.length !== 0 ? (
|
||||||
|
filteredItems.map((item, index) => (
|
||||||
|
<li
|
||||||
|
{...getItemProps({ item, index })}
|
||||||
|
key={item.value}
|
||||||
|
className={theme.item({
|
||||||
|
selected: highlightedIndex === index,
|
||||||
|
})}
|
||||||
|
data-disabled={item.disabled}
|
||||||
|
>
|
||||||
|
{item.leftIcon &&
|
||||||
|
cloneIcon(item.leftIcon, { className: theme.itemIcon() })}
|
||||||
|
<div className={theme.itemContent()}>
|
||||||
|
<p className={theme.itemLabel()} data-disabled={item.disabled}>
|
||||||
|
{item.label}
|
||||||
|
</p>
|
||||||
|
{orientation === 'horizontal' && (
|
||||||
|
<span className="h-1 w-1 rounded-full bg-border-interactive-hovered/[0.14]" />
|
||||||
|
)}
|
||||||
|
{item.description && (
|
||||||
|
<p
|
||||||
|
className={theme.itemDescription()}
|
||||||
|
data-disabled={item.disabled}
|
||||||
|
>
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{item.rightIcon
|
||||||
|
? cloneIcon(item.rightIcon, { className: theme.itemIcon() })
|
||||||
|
: isSelected(item) && (
|
||||||
|
<CheckRadioIcon
|
||||||
|
className={cn(theme.itemIcon(), 'text-controls-primary')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<li className={theme.item()}>{'No results found'}</li>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
157
packages/frontend/src/components/shared/Select/SelectBackup.tsx
Normal file
157
packages/frontend/src/components/shared/Select/SelectBackup.tsx
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useMultipleSelection, useCombobox } from 'downshift';
|
||||||
|
import { SelectTheme, selectTheme } from './Select.theme';
|
||||||
|
import { Button } from '../Button';
|
||||||
|
import { CrossIcon } from '../CustomIcon';
|
||||||
|
|
||||||
|
type Item = {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
interface MultiSelectProps extends SelectTheme {
|
||||||
|
items: Item[];
|
||||||
|
multiple?: boolean;
|
||||||
|
searchable?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MultiSelect: React.FC<MultiSelectProps> = ({
|
||||||
|
items,
|
||||||
|
multiple = false,
|
||||||
|
searchable: searchableProp,
|
||||||
|
size,
|
||||||
|
state,
|
||||||
|
}) => {
|
||||||
|
const searchable = multiple ? true : searchableProp || false;
|
||||||
|
const [inputValue, setInputValue] = useState('');
|
||||||
|
const [selectedItem, setSelectedItem] = useState<Item | null>(null);
|
||||||
|
const [dropdownOpen, setDropdownOpen] = useState(false); // Track dropdown open state
|
||||||
|
|
||||||
|
const {
|
||||||
|
container,
|
||||||
|
inputWrapper,
|
||||||
|
input: inputClass,
|
||||||
|
inputValue: inputValueClass,
|
||||||
|
popover,
|
||||||
|
item: itemClass,
|
||||||
|
} = selectTheme({ size, state });
|
||||||
|
|
||||||
|
const getFilteredItems = () => {
|
||||||
|
if (!multiple && !searchable) {
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
return items.filter(
|
||||||
|
(item) =>
|
||||||
|
item.label.toLowerCase().includes(inputValue.toLowerCase()) &&
|
||||||
|
!(
|
||||||
|
multiple ? selectedItems : selectedItem ? [selectedItem] : []
|
||||||
|
).includes(item),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const {
|
||||||
|
getSelectedItemProps,
|
||||||
|
getDropdownProps,
|
||||||
|
addSelectedItem,
|
||||||
|
removeSelectedItem,
|
||||||
|
selectedItems,
|
||||||
|
} = useMultipleSelection<Item>({
|
||||||
|
onSelectedItemsChange: multiple
|
||||||
|
? undefined
|
||||||
|
: ({ selectedItems }) => {
|
||||||
|
setSelectedItem(selectedItems?.[0] || null);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const {
|
||||||
|
isOpen,
|
||||||
|
getMenuProps,
|
||||||
|
getInputProps,
|
||||||
|
highlightedIndex,
|
||||||
|
getItemProps,
|
||||||
|
openMenu,
|
||||||
|
} = useCombobox({
|
||||||
|
items: getFilteredItems(),
|
||||||
|
onInputValueChange: ({ inputValue = '' }) => setInputValue(inputValue),
|
||||||
|
onSelectedItemChange: ({ selectedItem }) => {
|
||||||
|
if (!multiple && selectedItem) {
|
||||||
|
setSelectedItem(selectedItem);
|
||||||
|
if (searchable) {
|
||||||
|
setInputValue(''); // Clear input value for searchable when an item is selected
|
||||||
|
} else {
|
||||||
|
setInputValue(selectedItem.label); // Set input value to selectedItem's label if searchable is off
|
||||||
|
}
|
||||||
|
} else if (multiple && selectedItem) {
|
||||||
|
addSelectedItem(selectedItem);
|
||||||
|
setInputValue('');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onIsOpenChange: ({ isOpen }) => {
|
||||||
|
// @ts-expect-error - isOpen is not defined in Downshift's types
|
||||||
|
setDropdownOpen(isOpen);
|
||||||
|
if (!isOpen) {
|
||||||
|
// Reset input value to selected item's label when dropdown is closed and it's not multiple
|
||||||
|
if (!multiple && selectedItem && searchable) {
|
||||||
|
setInputValue('');
|
||||||
|
}
|
||||||
|
} else if (isOpen && !multiple && selectedItem && searchable) {
|
||||||
|
// Clear input value and show selectedItem's label as placeholder when dropdown opens
|
||||||
|
setInputValue('');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectedItem: multiple ? null : selectedItem,
|
||||||
|
itemToString: (item) => (item && !multiple ? item.label : ''),
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={container()}>
|
||||||
|
<div
|
||||||
|
className={inputWrapper({
|
||||||
|
hasValue: multiple && selectedItems.length > 0,
|
||||||
|
})}
|
||||||
|
onClick={() => !dropdownOpen && openMenu()}
|
||||||
|
>
|
||||||
|
{multiple &&
|
||||||
|
selectedItems.length > 0 &&
|
||||||
|
selectedItems.map((item, index) => (
|
||||||
|
<span
|
||||||
|
key={`selected-item-${index}`}
|
||||||
|
{...getSelectedItemProps({ selectedItem: item, index })}
|
||||||
|
className={inputValueClass({ multiple })}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
<Button
|
||||||
|
onClick={() => removeSelectedItem(item)}
|
||||||
|
iconOnly
|
||||||
|
variant="unstyled"
|
||||||
|
size="xs"
|
||||||
|
>
|
||||||
|
<CrossIcon size={14} />
|
||||||
|
</Button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
<input
|
||||||
|
{...getInputProps(getDropdownProps())}
|
||||||
|
placeholder="Select an option..."
|
||||||
|
readOnly={!searchable} // Control readOnly based on searchable
|
||||||
|
className={inputClass({ searchable })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ul {...getMenuProps()} className={popover({ isOpen })}>
|
||||||
|
{isOpen && (getFilteredItems().length !== 0 || !searchable) ? (
|
||||||
|
getFilteredItems().map((item, index) => (
|
||||||
|
<li
|
||||||
|
{...getItemProps({ item, index })}
|
||||||
|
key={item.value}
|
||||||
|
className={itemClass({ selected: highlightedIndex === index })}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<li className={itemClass()}>{'No results found'}</li>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
packages/frontend/src/components/shared/Select/index.ts
Normal file
1
packages/frontend/src/components/shared/Select/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './Select';
|
||||||
Loading…
Reference in New Issue
Block a user