forked from cerc-io/snowballtools-base
c731dd308c
* 🎨 style: adjust z index of the date picker popover * 🎨 style: add new spacing and rename box shadow from calendar to dropdown * 🐛 fix: console error becasue button inside button * ♻️ refactor: rename shadow calendar to shador dropdown on calendar component * 🚀 perf: remove vscode settings inside `packages/frontend` * ⚡️ feat: create check radio icon and chevron down icon component * 🔧 chore: install `downshift` * ⚡️ feat: create select component * 🎨 style: adjust the popover position based on the user screen * ⚡️ feat: separate select item to be a component * ⚡️ feat: separate select value to be a component * ♻️ refactor: adjust style and refactor to a new component * ⚡️ feat: create a type for merge two interface but keep the last value * 🐛 fix: forward ref the component to fix console error * ⚡️ feat: add `hideValues` prop to hide the values when on multiple * 🐛 fix: no result not showing * ⚡️ feat: make the select to be controller component * ♻️ refactor: remove console log * ♻️ refactor: update pr review
332 lines
9.7 KiB
TypeScript
332 lines
9.7 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { PencilIcon } from 'components/shared/CustomIcon';
|
||
import { SelectOption, Select } from 'components/shared/Select';
|
||
|
||
export const DROPDOWN_ITEMS: SelectOption[] = [
|
||
{
|
||
value: 'apple',
|
||
label: 'Apple',
|
||
description: 'Apple is fruit',
|
||
leftIcon: <PencilIcon />,
|
||
},
|
||
{
|
||
value: 'banana',
|
||
label: 'Banana',
|
||
description: 'Banana is fruit',
|
||
leftIcon: <PencilIcon />,
|
||
},
|
||
{
|
||
value: 'orange',
|
||
label: 'Orange',
|
||
description: 'Orange is fruit',
|
||
leftIcon: <PencilIcon />,
|
||
},
|
||
{
|
||
value: 'watermelon',
|
||
label: 'Watermelon',
|
||
description: 'Watermelon is fruit',
|
||
disabled: true,
|
||
leftIcon: <PencilIcon />,
|
||
},
|
||
];
|
||
|
||
export const DropdownExample = () => {
|
||
const [singleValue, setSingleValue] = useState<SelectOption>();
|
||
const [multipleValue, setMultipleValue] = useState<SelectOption[]>([]);
|
||
|
||
const handleSelect = (
|
||
type: 'single' | 'multiple',
|
||
value: SelectOption | SelectOption[],
|
||
) => {
|
||
if (type === 'single') {
|
||
setSingleValue(value as SelectOption);
|
||
} else {
|
||
setMultipleValue(value as SelectOption[]);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<p className="text-sm text-center text-gray-500 -mb-8">Single – Small</p>
|
||
<div className="flex gap-4 flex-wrap justify-center">
|
||
<Select
|
||
size="sm"
|
||
placeholder="Default"
|
||
options={DROPDOWN_ITEMS}
|
||
value={singleValue}
|
||
onChange={(value) => handleSelect('single', value)}
|
||
/>
|
||
<Select
|
||
size="sm"
|
||
placeholder="Clearable"
|
||
clearable
|
||
options={DROPDOWN_ITEMS}
|
||
value={singleValue}
|
||
onChange={(value) => handleSelect('single', value)}
|
||
/>
|
||
<Select
|
||
size="sm"
|
||
searchable
|
||
placeholder="Searchable"
|
||
options={DROPDOWN_ITEMS}
|
||
value={singleValue}
|
||
onChange={(value) => handleSelect('single', value)}
|
||
/>
|
||
<Select
|
||
size="sm"
|
||
placeholder="Vertical"
|
||
orientation="vertical"
|
||
options={DROPDOWN_ITEMS}
|
||
value={singleValue}
|
||
onChange={(value) => handleSelect('single', value)}
|
||
/>
|
||
</div>
|
||
<p className="text-sm text-center text-gray-500 -mb-8">Single – Medium</p>
|
||
<div className="flex gap-4 flex-wrap justify-center">
|
||
<Select
|
||
placeholder="Default"
|
||
options={DROPDOWN_ITEMS}
|
||
value={singleValue}
|
||
onChange={(value) => handleSelect('single', value)}
|
||
/>
|
||
<Select
|
||
placeholder="Clearable"
|
||
clearable
|
||
options={DROPDOWN_ITEMS}
|
||
value={singleValue}
|
||
onChange={(value) => handleSelect('single', value)}
|
||
/>
|
||
<Select
|
||
searchable
|
||
placeholder="Searchable"
|
||
options={DROPDOWN_ITEMS}
|
||
value={singleValue}
|
||
onChange={(value) => handleSelect('single', value)}
|
||
/>
|
||
<Select
|
||
placeholder="Vertical"
|
||
orientation="vertical"
|
||
options={DROPDOWN_ITEMS}
|
||
value={singleValue}
|
||
onChange={(value) => handleSelect('single', value)}
|
||
/>
|
||
</div>
|
||
<p className="text-sm text-center text-gray-500 -mb-8">
|
||
Multiple – Small
|
||
</p>
|
||
<div className="flex gap-4 flex-wrap justify-center">
|
||
<Select
|
||
multiple
|
||
size="sm"
|
||
placeholder="Default"
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
<Select
|
||
multiple
|
||
size="sm"
|
||
placeholder="Clearable"
|
||
clearable
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
<Select
|
||
searchable
|
||
multiple
|
||
size="sm"
|
||
placeholder="Searchable"
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
<Select
|
||
multiple
|
||
size="sm"
|
||
placeholder="Vertical"
|
||
orientation="vertical"
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
<Select
|
||
multiple
|
||
hideValues
|
||
size="sm"
|
||
orientation="vertical"
|
||
placeholder="Hide values"
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
</div>
|
||
<p className="text-sm text-center text-gray-500 -mb-8">
|
||
Multiple – Medium
|
||
</p>
|
||
<div className="flex gap-4 flex-wrap justify-center">
|
||
<Select
|
||
multiple
|
||
placeholder="Default"
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
<Select
|
||
multiple
|
||
placeholder="Clearable"
|
||
clearable
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
<Select
|
||
searchable
|
||
multiple
|
||
placeholder="Searchable"
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
<Select
|
||
multiple
|
||
placeholder="Vertical"
|
||
orientation="vertical"
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
<Select
|
||
multiple
|
||
hideValues
|
||
orientation="vertical"
|
||
placeholder="Hide values"
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
</div>
|
||
<p className="text-sm text-center text-gray-500 -mb-4">
|
||
Single – With label, description, and helper text
|
||
</p>
|
||
<div className="flex gap-4 flex-wrap justify-center">
|
||
<Select
|
||
label="Default"
|
||
description="Single select component"
|
||
helperText="This is a helper text"
|
||
options={DROPDOWN_ITEMS}
|
||
value={singleValue}
|
||
onChange={(value) => handleSelect('single', value)}
|
||
/>
|
||
<Select
|
||
label="Clearable"
|
||
description="Single select component"
|
||
helperText="This is a helper text"
|
||
clearable
|
||
options={DROPDOWN_ITEMS}
|
||
value={singleValue}
|
||
onChange={(value) => handleSelect('single', value)}
|
||
/>
|
||
<Select
|
||
searchable
|
||
label="Searchable"
|
||
description="Single select component"
|
||
helperText="This is a helper text"
|
||
options={DROPDOWN_ITEMS}
|
||
value={singleValue}
|
||
onChange={(value) => handleSelect('single', value)}
|
||
/>
|
||
<Select
|
||
label="Vertical"
|
||
description="Single select component"
|
||
helperText="This is a helper text"
|
||
orientation="vertical"
|
||
options={DROPDOWN_ITEMS}
|
||
value={singleValue}
|
||
onChange={(value) => handleSelect('single', value)}
|
||
/>
|
||
</div>
|
||
<p className="text-sm text-center text-gray-500 -mb-4">
|
||
Multiple – With label, description, and helper text
|
||
</p>
|
||
<div className="flex gap-4 flex-wrap justify-center">
|
||
<Select
|
||
label="Default"
|
||
description="Multiple select component"
|
||
helperText="This is a helper text"
|
||
multiple
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
<Select
|
||
label="Clearable"
|
||
description="Multiple select component"
|
||
helperText="This is a helper text"
|
||
multiple
|
||
clearable
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
<Select
|
||
searchable
|
||
label="Searchable"
|
||
description="Multiple select component"
|
||
helperText="This is a helper text"
|
||
multiple
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
<Select
|
||
label="Vertical"
|
||
description="Multiple select component"
|
||
helperText="This is a helper text"
|
||
multiple
|
||
orientation="vertical"
|
||
options={DROPDOWN_ITEMS}
|
||
value={multipleValue}
|
||
onChange={(value) => handleSelect('multiple', value)}
|
||
/>
|
||
</div>
|
||
<p className="text-sm text-center text-gray-500 -mb-4">
|
||
Error – With label, description, and helper text
|
||
</p>
|
||
<div className="flex gap-4 flex-wrap justify-center">
|
||
<Select
|
||
error
|
||
label="Default"
|
||
description="Multiple select component"
|
||
helperText="This is a helper text"
|
||
options={DROPDOWN_ITEMS}
|
||
/>
|
||
<Select
|
||
error
|
||
label="Clearable"
|
||
description="Multiple select component"
|
||
helperText="This is a helper text"
|
||
clearable
|
||
options={DROPDOWN_ITEMS}
|
||
/>
|
||
<Select
|
||
error
|
||
searchable
|
||
label="Searchable"
|
||
description="Multiple select component"
|
||
helperText="This is a helper text"
|
||
options={DROPDOWN_ITEMS}
|
||
/>
|
||
<Select
|
||
error
|
||
label="Vertical"
|
||
description="Multiple select component"
|
||
helperText="This is a helper text"
|
||
orientation="vertical"
|
||
options={DROPDOWN_ITEMS}
|
||
/>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|