@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
31 lines (30 loc) • 2.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { ColumnSelector } from '../Selectors/ColumnSelector';
import { AdaptableColumnFilter } from './AdaptableColumnFilter';
import { useAdaptable } from '../../AdaptableContext';
import { AdaptableIconComponent } from '../AdaptableIconComponent';
import { Box, Flex } from '../../../components/Flex';
export const ColumnFilterWindow = (props) => {
const { api } = useAdaptable();
const { value: initialColumnId } = props?.popupProps;
const [columnId, setColumnId] = React.useState(initialColumnId);
const columnSelectorWrapperRef = React.useRef(null);
React.useEffect(() => {
setColumnId(initialColumnId);
}, [props.popupProps.value]);
React.useEffect(() => {
const focusable = columnSelectorWrapperRef.current?.querySelector('[data-name="column-selector"]');
focusable?.focus();
}, []);
return (_jsxs(Flex, { flexDirection: "column", className: "ab-ColumnFilterWindow twa:flex-1 twa:min-h-0 twa:p-2 twa:h-full", children: [_jsx(Box, { className: "twa:mb-2", ref: columnSelectorWrapperRef, children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Column", children: _jsx(ColumnSelector, { renderOption: (column) => {
const columnFilter = api.filterApi.columnFilterApi.getColumnFilterForColumn(column.columnId);
const label = column.friendlyName ?? column.columnId;
if (columnFilter &&
api.filterApi.columnFilterApi.isColumnFilterActive(columnFilter)) {
return (_jsxs(Flex, { children: [label, _jsx(Box, { className: "twa:flex-1" }), _jsx(AdaptableIconComponent, { icon: { name: 'filter' } })] }));
}
return label;
}, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, value: columnId }) }) }) }), _jsx(AdaptableColumnFilter, { columnId: columnId, location: 'filterForm' })] }));
};