99 lines
2.8 KiB
TypeScript
Executable file
99 lines
2.8 KiB
TypeScript
Executable file
import { useState } from 'react';
|
|
|
|
import { VirtualizedCheckboxList } from './VirtualizedCheckboxList';
|
|
|
|
import type { CheckboxOption } from './VirtualizedCheckboxList';
|
|
|
|
/**
|
|
* Example usage of VirtualizedCheckboxList
|
|
* This demonstrates how to use the component with large datasets
|
|
*/
|
|
|
|
// Generate large dataset (200+ items)
|
|
const generateLargeDataset = (count: number): CheckboxOption[] => Array.from({ length: count }, (_, i) => ({
|
|
label: `Option ${i + 1}`,
|
|
value: `option-${i + 1}`,
|
|
}));
|
|
|
|
export const BasicExample = () => {
|
|
const [selectedValues, setSelectedValues] = useState<string[]>([]);
|
|
const options = generateLargeDataset(250);
|
|
|
|
return (
|
|
<div className="p-4">
|
|
<h2 className="text-xl font-bold mb-4">Basic Usage</h2>
|
|
<VirtualizedCheckboxList
|
|
options={options}
|
|
selectedValues={selectedValues}
|
|
onSelectionChange={setSelectedValues}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const CustomizedExample = () => {
|
|
const [selectedValues, setSelectedValues] = useState<string[]>([]);
|
|
const options: CheckboxOption[] = [
|
|
{ label: 'Brunette', value: 'brunette' },
|
|
{ label: 'Blonde', value: 'blonde' },
|
|
{ label: 'Red Hair', value: 'red' },
|
|
{ label: 'Black Hair', value: 'black' },
|
|
{ label: 'Auburn', value: 'auburn' },
|
|
// ... add 195+ more options for realistic scenario
|
|
];
|
|
|
|
return (
|
|
<div className="p-4 max-w-md">
|
|
<h2 className="text-xl font-bold mb-4">Hair Color Selector</h2>
|
|
<VirtualizedCheckboxList
|
|
options={options}
|
|
selectedValues={selectedValues}
|
|
onSelectionChange={setSelectedValues}
|
|
containerHeight={500}
|
|
itemHeight={44}
|
|
searchPlaceholder="Search hair colors..."
|
|
selectAllLabel="Select All Colors"
|
|
clearAllLabel="Clear Selection"
|
|
className="shadow-lg rounded-lg"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const WithPreselectedValues = () => {
|
|
const [selectedValues, setSelectedValues] = useState<string[]>([
|
|
'option-1',
|
|
'option-5',
|
|
'option-10',
|
|
]);
|
|
const options = generateLargeDataset(300);
|
|
|
|
return (
|
|
<div className="p-4">
|
|
<h2 className="text-xl font-bold mb-4">With Preselected Values</h2>
|
|
<VirtualizedCheckboxList
|
|
options={options}
|
|
selectedValues={selectedValues}
|
|
onSelectionChange={setSelectedValues}
|
|
containerHeight={600}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const WithoutSelectedCount = () => {
|
|
const [selectedValues, setSelectedValues] = useState<string[]>([]);
|
|
const options = generateLargeDataset(200);
|
|
|
|
return (
|
|
<div className="p-4">
|
|
<h2 className="text-xl font-bold mb-4">Without Selected Count</h2>
|
|
<VirtualizedCheckboxList
|
|
options={options}
|
|
selectedValues={selectedValues}
|
|
onSelectionChange={setSelectedValues}
|
|
showSelectedCount={false}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|