@adaptabletools/adaptable/src/agGrid/AgGridFilterAdapter.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';
export const AgGridFilterAdapterFactory = (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 getContainerId(colId) {
        return 'filter_' + colId + '_' + adaptable.adaptableOptions.adaptableId;
    }
    return class AgGridFilterAdapter {
        init(params) {
            this.params = params;
            this.column = params.column;
            this.filterContainer = document.createElement('div');
            this.filterContainer.id = getContainerId(this.params.column.getColId());
        }
        getGui() {
            return this.filterContainer;
        }
        refresh(newParams) {
            // always reuse the current instance
            // the filter is refreshed in the underlying React component
            return true;
        }
        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);
            if (column) {
                this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableColumnFilter, {
                    columnId,
                    wrapperProps: { p: 2 },
                    location: 'columnMenu',
                }), adaptable), this.filterContainer);
            }
        }
        destroy() {
            this.unmountReactRoot?.();
            this.filterContainer = null;
        }
    };
};