48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { Settings2 } from 'lucide-react';
|
||
import { Button, Checkbox, Dropdown } from 'antd';
|
||
import type { MenuProps } from 'antd';
|
||
import { type ColumnDef, isGroup } from './tableTypes';
|
||
|
||
interface Props<T> {
|
||
defs: ColumnDef<T>[];
|
||
visibleKeys: Extract<keyof T, string>[];
|
||
onChange: (keys: Extract<keyof T, string>[]) => void;
|
||
}
|
||
export function ColumnSettings<T>({ defs, visibleKeys, onChange }: Props<T>) {
|
||
const toggle = (key: Extract<keyof T, string>, checked: boolean) => {
|
||
onChange(checked ? [...visibleKeys, key] : visibleKeys.filter((k) => k !== key));
|
||
};
|
||
const items: MenuProps['items'] = defs.flatMap((def) => {
|
||
if (isGroup(def))
|
||
return def.children.map((child) => ({
|
||
key: child.key,
|
||
label: (
|
||
<Checkbox
|
||
checked={visibleKeys.includes(child.key)}
|
||
onChange={(e) => toggle(child.key, e.target.checked)}
|
||
onClick={(e) => e.stopPropagation()}>
|
||
{def.title} - {child.title}
|
||
</Checkbox>
|
||
),
|
||
}));
|
||
return [
|
||
{
|
||
key: def.key,
|
||
label: (
|
||
<Checkbox
|
||
checked={visibleKeys.includes(def.key)}
|
||
onChange={(e) => toggle(def.key, e.target.checked)}
|
||
onClick={(e) => e.stopPropagation()}>
|
||
{def.title}
|
||
</Checkbox>
|
||
),
|
||
},
|
||
];
|
||
});
|
||
return (
|
||
<Dropdown menu={{ items }} trigger={['click']} placement='bottomRight'>
|
||
<Button icon={<Settings2 size={14} />}>Настройка таблицы</Button>
|
||
</Dropdown>
|
||
);
|
||
}
|