@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
74 lines • 3.59 kB
JavaScript
import { createComponent, Shade } from '@furystack/shades';
import { SegmentedControl } from '../../button-group.js';
import { Button } from '../../button.js';
import { close as closeIcon, search as searchIcon } from '../../icons/icon-definitions.js';
import { Icon } from '../../icons/icon.js';
import { Checkbox } from '../../inputs/checkbox.js';
import { cssVariableTheme } from '../../../services/css-variable-theme.js';
import { filterBaseCss } from './filter-styles.js';
export const EnumFilter = Shade({
customElementName: 'data-grid-enum-filter',
css: {
...filterBaseCss,
fontFamily: cssVariableTheme.typography.fontFamily,
'& .filter-mode': {
marginBottom: '8px',
},
'& .filter-checkboxes': {
maxHeight: '200px',
overflowY: 'auto',
display: 'flex',
flexDirection: 'column',
gap: '2px',
marginBottom: '8px',
},
'& shade-checkbox': {
marginBottom: '0',
},
},
render: ({ props, useState }) => {
const { findOptions } = props;
const currentFilter = findOptions.filter?.[props.field];
const isExcludeMode = !!currentFilter?.$nin;
const currentSelected = currentFilter?.$in ?? currentFilter?.$nin ?? [];
const [mode, setMode] = useState('mode', isExcludeMode ? 'exclude' : 'include');
const selected = new Set(currentSelected);
const applyFilter = () => {
const filter = { ...findOptions.filter };
if (selected.size === 0) {
delete filter[props.field];
}
else {
const operator = mode === 'include' ? '$in' : '$nin';
filter[props.field] = { [operator]: Array.from(selected) };
}
props.onFindOptionsChange({ ...findOptions, filter, skip: 0 });
props.onClose();
};
const clearFilter = () => {
const filter = { ...findOptions.filter };
delete filter[props.field];
props.onFindOptionsChange({ ...findOptions, filter, skip: 0 });
props.onClose();
};
return (createComponent("div", null,
createComponent("div", { className: "filter-mode" },
createComponent(SegmentedControl, { size: "small", value: mode, onValueChange: (v) => setMode(v), options: [
{ value: 'include', label: 'Include' },
{ value: 'exclude', label: 'Exclude' },
] })),
createComponent("div", { className: "filter-checkboxes" }, props.values.map(({ label, value }) => (createComponent(Checkbox, { checked: selected.has(value), labelTitle: label, onchange: (ev) => {
const isChecked = ev.target.checked;
if (isChecked) {
selected.add(value);
}
else {
selected.delete(value);
}
} })))),
createComponent("div", { className: "filter-actions" },
createComponent(Button, { type: "button", variant: "outlined", size: "small", onclick: clearFilter, startIcon: createComponent(Icon, { icon: closeIcon, size: 14 }) }, "Clear"),
createComponent(Button, { type: "button", variant: "outlined", size: "small", color: "primary", onclick: applyFilter, startIcon: createComponent(Icon, { icon: searchIcon, size: 14 }) }, "Apply"))));
},
});
//# sourceMappingURL=enum-filter.js.map