1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| import { observer } from "mobx-react";
| import { Select } from "../Common/Form";
| import { useCallback, useMemo } from "react";
|
| export const FilterDropdown = observer(
| ({
| placeholder,
| defaultValue,
| items,
| style,
| disabled,
| onChange,
| multiple,
| value,
| optionRender,
| dropdownClassName,
| outputFormat,
| searchFilter,
| }) => {
| const parseItems = useCallback(
| (item) => {
| const OptionVisuals =
| optionRender ??
| (() => {
| return <>{item?.label ?? item?.title ?? item?.value ?? item}</>;
| });
| const option =
| typeof item === "string" || typeof item === "number"
| ? { label: <OptionVisuals item={item} />, value: item, original: item }
| : {
| ...item,
| label: item?.original?.field?.parent ? (
| <OptionVisuals item={item} />
| ) : (
| (item?.title ?? item?.label ?? item?.name)
| ),
| value: item?.value ?? item,
| children: item?.options?.map(parseItems),
| };
| return option;
| },
| [optionRender],
| );
| const options = useMemo(() => items.map(parseItems), [items, parseItems]);
|
| return (
| <Select
| multiple={multiple}
| placeholder={placeholder}
| defaultValue={defaultValue}
| value={value}
| onChange={(value) => onChange(outputFormat?.(value) ?? value)}
| disabled={disabled}
| size="small"
| options={options}
| searchable={true}
| triggerClassName="whitespace-nowrap"
| searchFilter={searchFilter}
| isVirtualList={true}
| />
| );
| },
| );
|
|
