@adaptabletools/adaptable/src/agGrid/FilterWrapper.js

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import * as React from 'react';
import { AdaptableColumnFilter } from '../View/Components/ColumnFilter/AdaptableColumnFilter';
import { renderWithAdaptableContext } from '../View/renderWithAdaptableContext';
import { getAgGridFilterNotifyModelFn } from './getAgGridFilterNotifyModelFn';
export const FilterWrapperFactory = (adaptable) => {
    function isFilterActive(colId) {
        // we need this here
        if (adaptable.isDestroyed) {
            return false;
        }
        //make the small filter icon to appear when there is a filter
        return adaptable.api.filterApi.columnFilterApi.isColumnFilterActiveForColumn(colId);
    }
    function getFilterProps(colId, hidePopup) {
        let column = adaptable.api.columnApi.getColumnWithColumnId(colId);
        let columnFilterProps = {
            Column: column,
            Adaptable: adaptable,
            ShowCloseButton: hidePopup,
        };
        return columnFilterProps;
    }
    function getContainerId(colId) {
        return 'filter_' + colId + '_' + adaptable.adaptableOptions.adaptableId;
    }
    if (adaptable.variant === 'react') {
        // We used to have the implementation below. However, for updating the filtered/not filtered state of the column
        // we have to call the onModelChange function, and also provide the doesFilterPass function.
        // starting with version 33 of AG Grid, the doesFilterPass has to be passed to the `useGridFilter` hook
        // which needs to be imported from 'ag-grid-react' - see https://www.ag-grid.com/react-data-grid/component-filter/#implementing-a-filter-component
        // but since Adaptable cannot depend on 'ag-grid-react' directly, we can't use a React component anymore
        // so we simply return the same implementation as the vanilla version
        // and comment out the implementation below
        //
        // return forwardRef(function ReactFilterWrapper(
        //   props: {
        //     column: Column;
        //     onModelChange: (model: any) => void;
        //   },
        //   ref
        // ) {
        //   const [filterProps, setFilterProps] = useState<ColumnFilterProps | null>(null);
        //   const colId = props.column.getId();
        //   const column: AdaptableColumn | undefined =
        //     adaptable.api.columnApi.getColumnWithColumnId(colId);
        //   const afterGuidAttached = React.useCallback(
        //     (params?: { hidePopup?: Function }) => {
        //       const hidePopup = params?.hidePopup ?? null;
        //       const filterProps = getFilterProps(colId, !!hidePopup);
        //       setFilterProps(filterProps);
        //     },
        //     [colId]
        //   );
        //   const notifyModel = getNotifyModel(colId, props.onModelChange);
        //   React.useEffect(() => {
        //     afterGuidAttached();
        //   }, []);
        //   useImperativeHandle(ref, () => {
        //     return {
        //       isFilterActive: () => isFilterActive(colId),
        //       // left here for backward compatibility
        //       afterGuidAttached,
        //       // getModel: () => {},
        //       // setModel: () => {},
        //       //we do not filter here.... we filter using the doesExternalFilterPass. Not sure there is a difference....
        //       doesFilterPass: () => true,
        //     };
        //   });
        //   if (!column || !filterProps) {
        //     return null;
        //   }
        //   return renderWithAdaptableContext(
        //     <div id={getContainerId(colId)}>
        //       <AdaptableColumnFilter
        //         wrapperProps={{ p: 2 }}
        //         columnId={filterProps.Column.columnId}
        //         onChange={notifyModel}
        //       />
        //     </div>,
        //     adaptable
        //   );
        // });
    }
    return class FilterWrapper {
        init(params) {
            this.params = params;
            this.column = params.column;
            this.filterContainer = document.createElement('div');
            this.filterContainer.id = getContainerId(this.params.column.getColId());
        }
        doesFilterPass(params) {
            //we do not filter here.... we filter using the doesExternalFilterPass. Not sure there is a difference....
            return true;
        }
        isFilterActive() {
            return isFilterActive(this.params.column.getColId());
        }
        getModel() {
            //
        }
        setModel(model) {
            //
        }
        getGui() {
            return this.filterContainer;
        }
        afterGuiAttached(params) {
            //we always unmount first so the autofocus from the form works... in other grids we unmount when hidden
            this.unmountReactRoot?.();
            const columnId = this.column.getColId();
            let column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
            function getNotifyModel(colId, onModelChange) {
                return getAgGridFilterNotifyModelFn(adaptable.api, colId, onModelChange);
            }
            const notifyModel = getNotifyModel(columnId, this.params.filterChangedCallback);
            if (column) {
                this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableColumnFilter, {
                    columnId,
                    wrapperProps: { p: 2 },
                    onChange: notifyModel,
                }), adaptable), 
                // AdaptableColumnFilter(filterProps),
                this.filterContainer);
            }
        }
        destroy() {
            this.unmountReactRoot?.();
            this.filterContainer = null;
        }
    };
};