@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.0

package/src/View/Components/FilterForm/FilterForm.js

@@ -1,29 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterFormReact = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
-const LayoutRedux_1 = require("../../../Redux/ActionsReducers/LayoutRedux");
-const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
-const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
-const ListBoxFilterForm_1 = require("./ListBoxFilterForm");
-const ButtonClose_1 = require("../Buttons/ButtonClose");
-const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
-const ButtonClear_1 = require("../Buttons/ButtonClear");
-const ListBoxMenu_1 = require("./ListBoxMenu");
-const FilterFormPanel_1 = require("../Panels/FilterFormPanel");
-const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const rebass_1 = require("rebass");
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const Helper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/Helper"));
-const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
-const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext");
-const CheckBox_1 = require("../../../components/CheckBox");
-const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
-const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
+import * as React from 'react';
+import { connect } from 'react-redux';
+import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
+import { getColumnFilterSelector } from '../../../Redux/ActionsReducers/LayoutRedux';
+import * as SystemRedux from '../../../Redux/ActionsReducers/SystemRedux';
+import { ColumnMenuTab } from '../../../PredefinedConfig/Common/Enums';
+import { ListBoxFilterForm } from './ListBoxFilterForm';
+import { ButtonClose } from '../Buttons/ButtonClose';
+import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
+import { ButtonClear } from '../Buttons/ButtonClear';
+import { ListBoxMenu } from './ListBoxMenu';
+import { FilterFormPanel } from '../Panels/FilterFormPanel';
+import { ObjectFactory } from '../../../Utilities/ObjectFactory';
+import HelpBlock from '../../../components/HelpBlock';
+import { Flex } from 'rebass';
+import Radio from '../../../components/Radio';
+import Helper from '../../../Utilities/Helpers/Helper';
+import AdaptableInput from '../AdaptableInput';
+import { renderWithAdaptableContext } from '../../renderWithAdaptableContext';
+import { CheckBox } from '../../../components/CheckBox';
+import { runIfNotResolvedIn } from '../../../Utilities/runIfNotResolvedIn';
+import { getDefaultColumnFilterPredicate } from './getDefaultColumnFilterPredicate';
 const panelStyle = {
     width: '100%',
     minWidth: 150,
@@ -44,7 +40,7 @@ class FilterFormComponent extends React.Component {
             distinctColumnValues: [],
             isDistinctColumnValuesLoading: false,
             showTab: true,
-            selectedTab: Enums_1.ColumnMenuTab.Filter,
+            selectedTab: ColumnMenuTab.Filter,
             editedColumnFilter: existingColumnFilter,
             currentTab: FilterFormComponent.getCurrentTab(existingColumnFilter),
             suppressClientSideFilter: false,
@@ -53,21 +49,21 @@ class FilterFormComponent extends React.Component {
     static createColumnFilterFromProps(props) {
         let existingColumnFilter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.columnId);
         if (!existingColumnFilter) {
-            const filterOptions = props.api.optionsApi.getFilterOptions();
-            if (filterOptions.defaultFilterFormTab == 'Values') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'Values', []);
+            const columnFilterOptions = props.api.optionsApi.getColumnFilterOptions();
+            if (columnFilterOptions.defaultFilterFormTab == 'Values') {
+                return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'Values', []);
             }
             if (props.currentColumn.dataType === 'Number') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, filterOptions.defaultNumericColumnFilter), ['']);
+                return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate(props.currentColumn, columnFilterOptions.defaultNumericColumnFilter), ['']);
             }
             if (props.currentColumn.dataType === 'String') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, filterOptions.defaultStringColumnFilter), ['']);
+                return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate(props.currentColumn, columnFilterOptions.defaultStringColumnFilter), ['']);
             }
             if (props.currentColumn.dataType === 'Date') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, filterOptions.defaultDateColumnFilter), ['']);
+                return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate(props.currentColumn, columnFilterOptions.defaultDateColumnFilter), ['']);
             }
             if (props.currentColumn.dataType === 'Boolean') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'BooleanToggle', [
+                return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'BooleanToggle', [
                     'all',
                 ]);
             }
@@ -83,8 +79,8 @@ class FilterFormComponent extends React.Component {
             : 'values';
     }
     static getDerivedStateFromProps(props, state) {
-        const filterOptions = props.api.optionsApi.getFilterOptions();
-        const editedColumnFilter = filterOptions.autoApplyFilter
+        const columnFilterOptions = props.api.optionsApi.getColumnFilterOptions();
+        const editedColumnFilter = columnFilterOptions.autoApplyFilter
             ? FilterFormComponent.createColumnFilterFromProps(props)
             : state.editedColumnFilter;
         let columnFilters = state.columnFilters;
@@ -110,7 +106,7 @@ class FilterFormComponent extends React.Component {
         }
     }
     async loadPermittedValues(filter = '') {
-        const { values: distinctColumnValues, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.optionsApi.getFilterOptions().showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+        const { values: distinctColumnValues, suppressClientSideFilter } = await runIfNotResolvedIn(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.optionsApi.getColumnFilterOptions().showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
         if (this._isMounted) {
             this.setState({
                 distinctColumnValues,
@@ -122,47 +118,47 @@ class FilterFormComponent extends React.Component {
     render() {
         var _a, _b;
         let isFilterable = this.isFilterable();
-        const filterOptions = this.props.api.optionsApi.getFilterOptions();
-        const predicateDefs = this.props.api.filterApi
+        const columnFilterOptions = this.props.api.optionsApi.getColumnFilterOptions();
+        const predicateDefs = this.props.api.columnFilterApi
             .getFilterPredicateDefsForColumn(this.props.currentColumn)
             .filter((predicate) => predicate.id !== 'BooleanToggle');
         let uiSelectedColumnValues = ((_b = (_a = this.state.editedColumnFilter) === null || _a === void 0 ? void 0 : _a.Predicate) === null || _b === void 0 ? void 0 : _b.PredicateId) === 'Values'
             ? this.state.editedColumnFilter.Predicate.Inputs
             : [];
-        let isEmptyFilter = Helper_1.default.objectNotExists(this.state.editedColumnFilter) ||
-            Helper_1.default.objectNotExists(this.state.editedColumnFilter.Predicate) ||
-            Helper_1.default.objectNotExists(this.state.editedColumnFilter.Predicate.PredicateId);
-        let closeButton = (React.createElement(ButtonClose_1.ButtonClose, { onClick: () => this.onCloseForm(), tooltip: null, accessLevel: 'Full' }));
-        let clearFilterButton = (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => this.onClearFilter(), disabled: isEmptyFilter, tooltip: null, accessLevel: 'Full', showText: true, showIcon: false }));
-        const useAgGridStyle = !!filterOptions.useAgGridFilterFormStyle;
-        return (React.createElement("div", { className: "ab-FilterForm", "data-name": "filter-form" }, StringExtensions_1.StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(FilterFormPanel_1.FilterFormPanel, { style: panelStyle, ColumnMenuTab: this.state.selectedTab, ColumnMenuTabChanged: (e) => this.onSelectTab(e), IsAlwaysFilter: this.props.embedColumnMenu, clearFilterButton: clearFilterButton, closeButton: closeButton, showCloseButton: this.props.showCloseButton, autoApplyFilter: filterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onFilterApplied: () => this.onFilterApplied() }, this.state.selectedTab == Enums_1.ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu_1.ListBoxMenu, { MenuItems: this.props.api.gridApi.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement(React.Fragment, null,
+        let isEmptyFilter = Helper.objectNotExists(this.state.editedColumnFilter) ||
+            Helper.objectNotExists(this.state.editedColumnFilter.Predicate) ||
+            Helper.objectNotExists(this.state.editedColumnFilter.Predicate.PredicateId);
+        let closeButton = (React.createElement(ButtonClose, { onClick: () => this.onCloseForm(), tooltip: null, accessLevel: 'Full' }));
+        let clearFilterButton = (React.createElement(ButtonClear, { onClick: () => this.onClearFilter(), disabled: isEmptyFilter, tooltip: null, accessLevel: 'Full', showText: true, showIcon: false }));
+        const useAgGridStyle = !!columnFilterOptions.useAgGridFilterFormStyle;
+        return (React.createElement("div", { className: "ab-FilterForm", "data-name": "filter-form" }, StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(FilterFormPanel, { style: panelStyle, ColumnMenuTab: this.state.selectedTab, ColumnMenuTabChanged: (e) => this.onSelectTab(e), IsAlwaysFilter: this.props.embedColumnMenu, clearFilterButton: clearFilterButton, closeButton: closeButton, showCloseButton: this.props.showCloseButton, autoApplyFilter: columnFilterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onColumnFilterApplied: () => this.onColumnFilterApplied() }, this.state.selectedTab == ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu, { MenuItems: this.props.api.gridApi.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement(React.Fragment, null,
             this.state.showTab && (React.createElement(React.Fragment, null,
-                React.createElement(Radio_1.default, { "data-name": "values", flex: 1, marginLeft: 1, checked: this.state.currentTab == 'values', onChange: () => this.setState({ currentTab: 'values' }) },
-                    React.createElement(rebass_1.Flex, { fontSize: 'var( --ab-font-size-2)' }, "Column Values")),
-                React.createElement(Radio_1.default, { "data-name": "predicates", marginLeft: 2, flex: 1, checked: this.state.currentTab == 'predicates', onChange: () => this.setState({ currentTab: 'predicates' }) },
-                    React.createElement(rebass_1.Flex, { fontSize: 'var( --ab-font-size-2)' }, "Filters")))),
-            this.state.currentTab === 'values' && (React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: this.isFilterDisabled(), suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: uiSelectedColumnValues, useAgGridStyle: useAgGridStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })),
+                React.createElement(Radio, { "data-name": "values", flex: 1, marginLeft: 1, checked: this.state.currentTab == 'values', onChange: () => this.setState({ currentTab: 'values' }) },
+                    React.createElement(Flex, { fontSize: 'var( --ab-font-size-2)' }, "Column Values")),
+                React.createElement(Radio, { "data-name": "predicates", marginLeft: 2, flex: 1, checked: this.state.currentTab == 'predicates', onChange: () => this.setState({ currentTab: 'predicates' }) },
+                    React.createElement(Flex, { fontSize: 'var( --ab-font-size-2)' }, "Filters")))),
+            this.state.currentTab === 'values' && (React.createElement(ListBoxFilterForm, { disabled: this.isFilterDisabled(), suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: uiSelectedColumnValues, useAgGridStyle: useAgGridStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })),
             this.state.currentTab === 'predicates' && (React.createElement(React.Fragment, null,
                 ' ',
                 this.state.showTab && React.createElement("hr", null),
                 predicateDefs
                     .filter((p) => p.id !== 'Values' && p.id !== 'ExcludeValues')
-                    .map((predicateDef, index) => this.renderColumnPredicate(predicateDef, index)))))))) : (React.createElement(HelpBlock_1.default, null, isFilterable))));
+                    .map((predicateDef, index) => this.renderColumnPredicate(predicateDef, index)))))))) : (React.createElement(HelpBlock, null, isFilterable))));
     }
     renderColumnPredicate(predicateDef, index) {
         var _a;
         const { editedColumnFilter } = this.state;
         const checked = ((_a = editedColumnFilter === null || editedColumnFilter === void 0 ? void 0 : editedColumnFilter.Predicate) === null || _a === void 0 ? void 0 : _a.PredicateId) === predicateDef.id;
-        return (React.createElement(rebass_1.Flex, { className: "ab-FilterForm__predicate", key: index, flexDirection: "column" },
-            React.createElement(Radio_1.default, { "data-name": predicateDef.id, disabled: this.isFilterDisabled(), fontSize: 'var(--ab-font-size-2)', margin: 1, flex: 1, checked: checked, onChange: () => this.selectColumnPredicate(predicateDef) }, predicateDef.label),
-            React.createElement(rebass_1.Flex, { className: "ab-FilterForm__predicate_inputs", flexDirection: "column", flex: 0, marginLeft: 3, marginRight: 2 }, checked && this.renderPredicateInput(predicateDef, editedColumnFilter))));
+        return (React.createElement(Flex, { className: "ab-FilterForm__predicate", key: index, flexDirection: "column" },
+            React.createElement(Radio, { "data-name": predicateDef.id, disabled: this.isFilterDisabled(), fontSize: 'var(--ab-font-size-2)', margin: 1, flex: 1, checked: checked, onChange: () => this.selectColumnPredicate(predicateDef) }, predicateDef.label),
+            React.createElement(Flex, { className: "ab-FilterForm__predicate_inputs", flexDirection: "column", flex: 0, marginLeft: 3, marginRight: 2 }, checked && this.renderPredicateInput(predicateDef, editedColumnFilter))));
     }
     renderPredicateInput(predicateDef, filter) {
         var _a;
         if ((predicateDef === null || predicateDef === void 0 ? void 0 : predicateDef.id) === 'BooleanToggle') {
             // custom tri-state checkbox: true, false, all(indeterminate)
-            return (React.createElement(rebass_1.Flex, { className: "ab-FilterForm__predicate-input", flexDirection: "row", flex: 1, justifyContent: "center", alignItems: "center" },
-                React.createElement(CheckBox_1.CheckBox, { disabled: this.isFilterDisabled(), checked: filter.Predicate.Inputs[0] === 'true'
+            return (React.createElement(Flex, { className: "ab-FilterForm__predicate-input", flexDirection: "row", flex: 1, justifyContent: "center", alignItems: "center" },
+                React.createElement(CheckBox, { disabled: this.isFilterDisabled(), checked: filter.Predicate.Inputs[0] === 'true'
                         ? true
                         : filter.Predicate.Inputs[0] === 'false'
                             ? false
@@ -177,8 +173,8 @@ class FilterFormComponent extends React.Component {
                         this.changeColumnPredicateInput(newCheckedValue, 0);
                     } })));
         }
-        return (_a = predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => (React.createElement(rebass_1.Flex, { key: index, flexDirection: "row" },
-            React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), mb: 1, flex: 1, fontSize: 2 }))));
+        return (_a = predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => (React.createElement(Flex, { key: index, flexDirection: "row" },
+            React.createElement(AdaptableInput, { disabled: this.isFilterDisabled(), type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), mb: 1, flex: 1, fontSize: 2 }))));
     }
     isFilterDisabled() {
         var _a;
@@ -208,11 +204,11 @@ class FilterFormComponent extends React.Component {
         if (editedColumnFilter.Predicate === undefined ||
             (editedColumnFilter.Predicate.PredicateId === 'Values' &&
                 editedColumnFilter.Predicate.Inputs.length === 0)) {
-            this.props.api.filterApi.clearColumnFilterForColumn(editedColumnFilter.ColumnId);
+            this.props.api.columnFilterApi.clearColumnFilterForColumn(editedColumnFilter.ColumnId);
             this.onCloseForm();
         }
         else {
-            if (this.props.api.optionsApi.getFilterOptions().autoApplyFilter) {
+            if (this.props.api.optionsApi.getColumnFilterOptions().autoApplyFilter) {
                 this.props.onSetColumnFilter(editedColumnFilter);
             }
         }
@@ -223,7 +219,7 @@ class FilterFormComponent extends React.Component {
         this.setState({ editedColumnFilter });
         this.persistFilter();
     }
-    onFilterApplied() {
+    onColumnFilterApplied() {
         // do some existing or real
         this.props.onAddColumnFilter(this.state.editedColumnFilter);
         this.props.onHideFilterForm();
@@ -255,7 +251,7 @@ class FilterFormComponent extends React.Component {
         const { editedColumnFilter } = this.state;
         editedColumnFilter.Predicate.Inputs[index] = value;
         this.setState({ editedColumnFilter });
-        if (this.props.api.optionsApi.getFilterOptions().autoApplyFilter) {
+        if (this.props.api.optionsApi.getColumnFilterOptions().autoApplyFilter) {
             this.props.onSetColumnFilter(editedColumnFilter);
         }
         // this.props.onSetColumnFilter(editedColumnFilter);
@@ -265,7 +261,7 @@ function mapStateToProps(state, ownProps) {
     return {
         currentColumn: ownProps.currentColumn,
         columns: state.Grid.Columns,
-        columnFilters: (0, LayoutRedux_1.getColumnFilterSelector)(state),
+        columnFilters: getColumnFilterSelector(state),
         showCloseButton: ownProps.showCloseButton,
     };
 }
@@ -279,6 +275,5 @@ function mapDispatchToProps(dispatch) {
         onHideFilterForm: () => dispatch(SystemRedux.SystemFilterFormHide()),
     };
 }
-const FilterForm = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(FilterFormComponent);
-const FilterFormReact = (FilterContext) => (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(FilterForm, { api: FilterContext.Adaptable.api, currentColumn: FilterContext.Column, teamSharingActivated: false, embedColumnMenu: FilterContext.Adaptable.embedColumnMenu, showCloseButton: FilterContext.ShowCloseButton }), FilterContext.Adaptable);
-exports.FilterFormReact = FilterFormReact;
+const FilterForm = connect(mapStateToProps, mapDispatchToProps)(FilterFormComponent);
+export const FilterFormReact = (columnFilterProps) => renderWithAdaptableContext(React.createElement(FilterForm, { api: columnFilterProps.Adaptable.api, currentColumn: columnFilterProps.Column, teamSharingActivated: false, embedColumnMenu: columnFilterProps.Adaptable.embedColumnMenu, showCloseButton: columnFilterProps.ShowCloseButton }), columnFilterProps.Adaptable);

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -1,40 +1,36 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListBoxFilterForm = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
-const ListGroupItem_1 = tslib_1.__importDefault(require("../../../components/List/ListGroupItem"));
-const rebass_1 = require("rebass");
-const CheckBox_1 = require("../../../components/CheckBox");
-const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
-const AdaptableFormControlTextClear_1 = require("../Forms/AdaptableFormControlTextClear");
-const GridList_1 = tslib_1.__importDefault(require("../../../components/List/GridList"));
-const react_1 = require("react");
-const Loader_1 = require("../../../components/Loader");
-const isEqual_1 = tslib_1.__importDefault(require("date-fns/isEqual"));
-const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
-const ListBoxFilterForm = (props) => {
-    const [FilterValue, setFilterValue] = (0, react_1.useState)('');
+import * as React from 'react';
+import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
+import ListGroupItem from '../../../components/List/ListGroupItem';
+import { Box } from 'rebass';
+import { CheckBox } from '../../../components/CheckBox';
+import join from '../../../components/utils/join';
+import { AdaptableFormControlTextClear } from '../Forms/AdaptableFormControlTextClear';
+import GridList from '../../../components/List/GridList';
+import { useState, useEffect } from 'react';
+import { Loader } from '../../../components/Loader';
+import isDatesEqual from 'date-fns/isEqual';
+import { parseDateValue } from '../../../Utilities/Helpers/DateHelper';
+export const ListBoxFilterForm = (props) => {
+    const [FilterValue, setFilterValue] = useState('');
     const handleFilterValueChange = React.useCallback((newValue) => {
         setFilterValue(newValue);
         props === null || props === void 0 ? void 0 : props.onFilterChange(newValue);
     }, [props.onFilterChange]);
-    const [UiSelectedColumnValues, internalUpdateUISelectedColumnValues] = (0, react_1.useState)(props.uiSelectedColumnValues);
+    const [UiSelectedColumnValues, internalUpdateUISelectedColumnValues] = useState(props.uiSelectedColumnValues);
     const setUiSelectedColumnValues = (values) => {
         internalUpdateUISelectedColumnValues(values);
         props.onColumnValueSelectedChange(values);
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         internalUpdateUISelectedColumnValues(props.uiSelectedColumnValues);
     }, [props.uiSelectedColumnValues]);
     const renderItemForAgGridStyle = (props) => {
-        return (React.createElement(CheckBox_1.CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1, title: typeof props.children === 'string' ? props.children : null })));
+        return (React.createElement(CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1, title: typeof props.children === 'string' ? props.children : null })));
     };
     const onClickItemColumnValue = (item) => {
         let index = UiSelectedColumnValues.indexOf(item);
         if (item instanceof Date) {
-            index = UiSelectedColumnValues.findIndex((selectedValue) => (0, isEqual_1.default)((0, DateHelper_1.parseDateValue)(selectedValue), (0, DateHelper_1.parseDateValue)(item)));
+            index = UiSelectedColumnValues.findIndex((selectedValue) => isDatesEqual(parseDateValue(selectedValue), parseDateValue(item)));
         }
         if (index >= 0) {
             const newArray = [...UiSelectedColumnValues];
@@ -49,17 +45,17 @@ const ListBoxFilterForm = (props) => {
         let isActive = UiSelectedColumnValues.indexOf(distinctValue.value) >= 0;
         // special case for date objects, need to check against string values
         if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {
-            isActive = UiSelectedColumnValues.some((dateStr) => (0, isEqual_1.default)((0, DateHelper_1.parseDateValue)(dateStr), (0, DateHelper_1.parseDateValue)(distinctValue.value)));
+            isActive = UiSelectedColumnValues.some((dateStr) => isDatesEqual(parseDateValue(dateStr), parseDateValue(distinctValue.value)));
         }
         const columnLabel = distinctValue.label;
-        if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnLabel)) {
+        if (StringExtensions.IsNullOrEmpty(columnLabel)) {
             return null;
         }
-        const noMatch = StringExtensions_1.StringExtensions.IsNullOrEmpty(FilterValue.toLocaleLowerCase()) ||
-            StringExtensions_1.StringExtensions.IsNullOrEmpty(columnLabel === null || columnLabel === void 0 ? void 0 : columnLabel.toLocaleLowerCase()) ||
+        const noMatch = StringExtensions.IsNullOrEmpty(FilterValue.toLocaleLowerCase()) ||
+            StringExtensions.IsNullOrEmpty(columnLabel === null || columnLabel === void 0 ? void 0 : columnLabel.toLocaleLowerCase()) ||
             columnLabel.toLocaleLowerCase().indexOf(FilterValue.toLocaleLowerCase()) < 0;
         if (!props.suppressClientSideFilter &&
-            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(FilterValue) &&
+            StringExtensions.IsNotNullOrEmpty(FilterValue) &&
             noMatch) {
             return null;
         }
@@ -73,20 +69,19 @@ const ListBoxFilterForm = (props) => {
                 style: { width: '100%' },
             });
         }
-        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: distinctValue.value }, distinctValue.label));
+        return (React.createElement(ListGroupItem, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: distinctValue.value }, distinctValue.label));
     });
-    const textClear = (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { autoFocus: true, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
+    const textClear = (React.createElement(AdaptableFormControlTextClear, { autoFocus: true, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
             paddingTop: 'var(--ab-space-1)',
             paddingBottom: 'var(--ab-space-1)',
             paddingLeft: 'var(--ab-space-1)',
             borderRadius: 'var(--ab__border-radius)',
         }, OnTextChange: handleFilterValueChange }));
     const baseClassName = 'ab-ListBoxFilterForm';
-    return (React.createElement("div", { className: (0, join_1.default)(baseClassName, props.useAgGridStyle ? `${baseClassName}--aggrid-style` : null, props.isLoading && `${baseClassName}--loading`) },
-        React.createElement(rebass_1.Box, { px: 2 },
-            React.createElement(rebass_1.Box, { mx: props.useAgGridStyle ? 0 : '2px', marginBottom: 2 },
+    return (React.createElement("div", { className: join(baseClassName, props.useAgGridStyle ? `${baseClassName}--aggrid-style` : null, props.isLoading && `${baseClassName}--loading`) },
+        React.createElement(Box, { px: 2 },
+            React.createElement(Box, { mx: props.useAgGridStyle ? 0 : '2px', marginBottom: 2 },
                 textClear,
-                props.isLoading && React.createElement(Loader_1.Loader, null, "Loading"))),
-        !props.isLoading && (React.createElement(GridList_1.default, { showZebraRows: false, className: !props.useAgGridStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements))));
+                props.isLoading && React.createElement(Loader, null, "Loading"))),
+        !props.isLoading && (React.createElement(GridList, { showZebraRows: false, className: !props.useAgGridStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements))));
 };
-exports.ListBoxFilterForm = ListBoxFilterForm;

package/src/View/Components/FilterForm/ListBoxMenu.js

@@ -1,30 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListBoxMenu = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const ListGroupItem_1 = tslib_1.__importDefault(require("../../../components/List/ListGroupItem"));
-const ListGroup_1 = tslib_1.__importDefault(require("../../../components/List/ListGroup"));
-const Icon_1 = require("../../../components/Icon");
-class ListBoxMenu extends React.Component {
+import * as React from 'react';
+import ListGroupItem from '../../../components/List/ListGroupItem';
+import ListGroup from '../../../components/List/ListGroup';
+import { IconComponent } from '../../../components/Icon';
+export class ListBoxMenu extends React.Component {
     constructor(props) {
         super(props);
         this.state = {};
     }
     render() {
         let menuItems = this.props.MenuItems.map((menuItem, index) => {
-            return (React.createElement(ListGroupItem_1.default, { key: index, onClick: () => this.onClick(menuItem) },
-                menuItem.icon && React.createElement(Icon_1.IconComponent, { icon: menuItem.icon }),
+            return (React.createElement(ListGroupItem, { key: index, onClick: () => this.onClick(menuItem) },
+                menuItem.icon && React.createElement(IconComponent, { icon: menuItem.icon }),
                 menuItem.label));
         });
         return (React.createElement("div", { style: divStyle },
-            React.createElement(ListGroup_1.default, null, menuItems)));
+            React.createElement(ListGroup, null, menuItems)));
     }
     onClick(menuItem) {
         this.props.onMenuItemClick(menuItem);
     }
 }
-exports.ListBoxMenu = ListBoxMenu;
 let divStyle = {
     overflowY: 'auto',
     overflowX: 'hidden',

package/src/View/Components/FilterForm/QuickFilterForm.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ColumnFilterContext } from '../../../Utilities/Interface/ColumnFilterContext';
+import { ColumnFilterProps } from '../../../Utilities/Interface/ColumnFilterProps';
 import { ColumnFilter } from '../../../types';
 export interface QuickFilterFormState {
     transientColumnFilter: ColumnFilter;
 }
-export declare const QuickFilterFormReact: (FilterContext: ColumnFilterContext) => JSX.Element;
+export declare const QuickFilterFormReact: (columnFilterProps: ColumnFilterProps) => JSX.Element;