@adaptabletools/adaptable 10.0.3 → 10.0.4-canary.3

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

@@ -50,24 +50,23 @@ class FilterFormComponent extends React.Component {
         };
     }
     static createColumnFilterFromProps(props) {
-        let existingColumnFilter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.ColumnId);
+        let existingColumnFilter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.columnId);
         if (!existingColumnFilter) {
-            const filterOptions = props.api.internalApi.getAdaptableOptions()
-                .filterOptions;
+            const filterOptions = props.api.internalApi.getAdaptableOptions().filterOptions;
             if (filterOptions.defaultFilterFormTab == 'Values') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, 'Values', []);
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'Values', []);
             }
-            if (props.currentColumn.DataType === 'Number') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultNumericColumnFilter), ['']);
+            if (props.currentColumn.dataType === 'Number') {
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultNumericColumnFilter), ['']);
             }
-            if (props.currentColumn.DataType === 'String') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultStringColumnFilter), ['']);
+            if (props.currentColumn.dataType === 'String') {
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultStringColumnFilter), ['']);
             }
-            if (props.currentColumn.DataType === 'Date') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultDateColumnFilter), ['']);
+            if (props.currentColumn.dataType === 'Date') {
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultDateColumnFilter), ['']);
             }
-            if (props.currentColumn.DataType === 'Boolean') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, 'BooleanToggle', [
+            if (props.currentColumn.dataType === 'Boolean') {
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'BooleanToggle', [
                     'all',
                 ]);
             }
@@ -102,12 +101,12 @@ class FilterFormComponent extends React.Component {
         this._isMounted = false;
     }
     componentDidMount() {
-        if (this.props.currentColumn.DataType != Enums_1.DataType.Boolean) {
+        if (this.props.currentColumn.dataType != Enums_1.DataType.Boolean) {
             this.loadPermittedValues();
         }
     }
     async loadPermittedValues(filter = '') {
-        const { values: distinctColumnValues, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.ColumnId, filter), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+        const { values: distinctColumnValues, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
         if (!this._isMounted) {
             return;
         }
@@ -120,8 +119,7 @@ class FilterFormComponent extends React.Component {
     render() {
         var _a, _b;
         let isFilterable = this.isFilterable();
-        const filterOptions = this.props.api.internalApi.getAdaptableOptions()
-            .filterOptions;
+        const filterOptions = this.props.api.internalApi.getAdaptableOptions().filterOptions;
         const predicateDefs = this.props.api.filterApi
             .getFilterPredicateDefsForColumn(this.props.currentColumn)
             .filter((predicate) => !predicate.onlyQuickFilter);
@@ -133,15 +131,15 @@ class FilterFormComponent extends React.Component {
             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 useVendorStyle = !!filterOptions.useVendorFilterFormStyle;
-        return (React.createElement("div", { "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, useVendorStyle: useVendorStyle, applyFilterButtonDisabled: isEmptyFilter, onFilterApplied: () => this.onFilterApplied() }, this.state.selectedTab == Enums_1.ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu_1.ListBoxMenu, { MenuItems: this.props.api.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement("div", null,
+        const useAgGridStyle = !!filterOptions.useAgGridFilterFormStyle;
+        return (React.createElement("div", { "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.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement("div", null,
             this.state.showTab && (React.createElement("div", null,
                 React.createElement(Radio_1.default, { marginLeft: 1, flex: 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, { 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("div", null,
-                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { 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, useVendorStyle: useVendorStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) }))),
+                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { 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("div", null,
                 ' ',
                 this.state.showTab && React.createElement("hr", null),
@@ -185,7 +183,7 @@ class FilterFormComponent extends React.Component {
                 } }))));
     }
     isFilterable() {
-        if (!this.props.currentColumn.Filterable) {
+        if (!this.props.currentColumn.filterable) {
             return 'Column is not filterable';
         }
         return '';

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

@@ -4,7 +4,7 @@ import { ListGroupProps } from '../../../components/List/ListGroup';
 export interface ListBoxFilterFormProps extends ListGroupProps {
     currentColumn: AdaptableColumn;
     columns: AdaptableColumn[];
-    useVendorStyle?: boolean;
+    useAgGridStyle?: boolean;
     columnDistinctValues: any[];
     uiSelectedColumnValues: Array<string>;
     onColumnValueSelectedChange: (SelectedValues: Array<any>) => void;

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

@@ -26,7 +26,7 @@ exports.ListBoxFilterForm = (props) => {
     react_1.useEffect(() => {
         internalUpdateUISelectedColumnValues(props.uiSelectedColumnValues);
     }, [props.uiSelectedColumnValues]);
-    const renderItemForVendorStyle = (props) => {
+    const renderItemForAgGridStyle = (props) => {
         return (React.createElement(CheckBox_1.CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1 })));
     };
     const onClickItemColumnValue = (item) => {
@@ -51,15 +51,15 @@ exports.ListBoxFilterForm = (props) => {
             columnValue.toLocaleLowerCase().indexOf(FilterValue.toLocaleLowerCase()) < 0) {
             return null;
         }
-        if (props.useVendorStyle) {
-            return renderItemForVendorStyle({
+        if (props.useAgGridStyle) {
+            return renderItemForAgGridStyle({
                 key: 'columnValue' + y,
                 children: columnValue,
                 checked: isActive,
                 onChange: () => onClickItemColumnValue(x),
             });
         }
-        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useVendorStyle, key: 'columnValue' + y, onClick: () => onClickItemColumnValue(x), active: isActive, value: columnValue }, columnValue));
+        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + y, onClick: () => onClickItemColumnValue(x), active: isActive, value: columnValue }, columnValue));
     });
     const textClear = (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { autoFocus: true, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
             paddingTop: 'var(--ab-space-1)',
@@ -68,10 +68,10 @@ exports.ListBoxFilterForm = (props) => {
             borderRadius: 'var(--ab__border-radius)',
         }, OnTextChange: handleFilterValueChange }));
     const baseClassName = 'ab-ListBoxFilterForm';
-    return (React.createElement("div", { className: join_1.default(baseClassName, props.useVendorStyle ? `${baseClassName}--vendor-style` : null, props.isLoading && `${baseClassName}--loading`) },
+    return (React.createElement("div", { className: 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.useVendorStyle ? 0 : '2px', marginBottom: 2 },
+            React.createElement(rebass_1.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.useVendorStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements))));
+        !props.isLoading && (React.createElement(GridList_1.default, { showZebraRows: false, className: !props.useAgGridStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements))));
 };

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

@@ -29,7 +29,7 @@ class QuickFilterFormComponent extends React.Component {
             }
         };
         this.loadPermittedValues = async (filter = '') => {
-            const { values, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.ColumnId, filter), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+            const { values, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
             if (!this._isMounted) {
                 return;
             }
@@ -71,32 +71,32 @@ class QuickFilterFormComponent extends React.Component {
         }
     }
     getFilterFromProps(props = this.props) {
-        const filter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.ColumnId);
+        const filter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.columnId);
         const filterOptions = props.api.internalApi.getAdaptableOptions().filterOptions;
         if (filter) {
             return filter;
         }
-        if (!filter && props.currentColumn.DataType === 'Number') {
-            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultNumericColumnFilter), ['']);
+        if (!filter && props.currentColumn.dataType === 'Number') {
+            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultNumericColumnFilter), ['']);
         }
-        if (!filter && props.currentColumn.DataType === 'String') {
-            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultStringColumnFilter), ['']);
+        if (!filter && props.currentColumn.dataType === 'String') {
+            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultStringColumnFilter), ['']);
         }
-        if (!filter && props.currentColumn.DataType === 'Date') {
-            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultDateColumnFilter), ['']);
+        if (!filter && props.currentColumn.dataType === 'Date') {
+            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultDateColumnFilter), ['']);
         }
-        if (!filter && props.currentColumn.DataType === 'Boolean') {
-            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(this.props.currentColumn.ColumnId, 'BooleanToggle', [
+        if (!filter && props.currentColumn.dataType === 'Boolean') {
+            return ObjectFactory_1.ObjectFactory.CreateColumnFilter(this.props.currentColumn.columnId, 'BooleanToggle', [
                 'all',
             ]);
         }
-        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(this.props.currentColumn.ColumnId, null, null);
+        return ObjectFactory_1.ObjectFactory.CreateColumnFilter(this.props.currentColumn.columnId, null, null);
     }
     render() {
         const { filter } = this.state;
         const predicateDefs = this.props.api.filterApi.getFilterPredicateDefsForColumn(this.props.currentColumn);
         const activePredicateDef = this.props.api.predicateApi.getPredicateDefById(filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId);
-        if (!this.props.currentColumn || !this.props.currentColumn.Filterable) {
+        if (!this.props.currentColumn || !this.props.currentColumn.filterable) {
             return null;
         }
         let showEvent = 'mouseenter';
@@ -106,14 +106,12 @@ class QuickFilterFormComponent extends React.Component {
             hideEvent = 'blur';
         }
         let showQuickFilterDropdown = true;
-        let hideQuickFilterDropdownFunction = this.props.api.internalApi.getAdaptableOptions()
-            .filterOptions.hideQuickFilterDropdown;
+        let hideQuickFilterDropdownFunction = this.props.api.internalApi.getAdaptableOptions().filterOptions.hideQuickFilterDropdown;
         if (hideQuickFilterDropdownFunction) {
             showQuickFilterDropdown = !hideQuickFilterDropdownFunction(this.props.currentColumn);
         }
         let showQuickFilterInput = true;
-        let hideQuickFilterInputFunction = this.props.api.internalApi.getAdaptableOptions()
-            .filterOptions.hideQuickFilterInput;
+        let hideQuickFilterInputFunction = this.props.api.internalApi.getAdaptableOptions().filterOptions.hideQuickFilterInput;
         if (hideQuickFilterInputFunction) {
             showQuickFilterInput = !hideQuickFilterInputFunction(this.props.currentColumn);
         }
@@ -234,7 +232,7 @@ class QuickFilterFormComponent extends React.Component {
                         React.createElement(SimpleButton_1.default, { onClick: () => this.clearFilter() }, "Clear Filter"),
                         ((_a = this.props.api.internalApi.getAdaptableOptions().filterOptions) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) ==
                             false && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => this.updateFilter(this.state.filter) }, "Apply Filter"))),
-                    React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: [], columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.DataType, uiSelectedColumnValues: this.state.filter.Predicate.Inputs, useVendorStyle: true, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })));
+                    React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: [], columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: this.state.filter.Predicate.Inputs, useAgGridStyle: true, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })));
             } },
             React.createElement(SimpleButton_1.default, { style: {
                     flex: 1,

package/src/View/Components/NewScopeComponent.js

@@ -54,7 +54,7 @@ exports.renderScopeSummary = (scope, labels) => {
             React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: 0 }, scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null)),
         React.createElement(rebass_1.Box, { style: { overflow: 'hidden' } }, 'ColumnIds' in scope ? (React.createElement(React.Fragment, null,
             React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: columnsInScope.length ? 2 : 0 }, labels.scopeColumns),
-            columnsInScope.length ? (React.createElement(ValueSelector_1.ValueOptionsTags, { options: columnsInScope, value: columnsInScope.map((c) => c.ColumnId), toLabel: (c) => c.FriendlyName, allowWrap: true, readOnly: true, renderLabel: (c) => React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: 0 }, c), toIdentifier: (c) => c.ColumnId })) : null)) : null),
+            columnsInScope.length ? (React.createElement(ValueSelector_1.ValueOptionsTags, { options: columnsInScope, value: columnsInScope.map((c) => c.columnId), toLabel: (c) => c.friendlyName, allowWrap: true, readOnly: true, renderLabel: (c) => React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: 0 }, c), toIdentifier: (c) => c.columnId })) : null)) : null),
         React.createElement(rebass_1.Box, null, 'DataTypes' in scope ? (React.createElement(React.Fragment, null,
             React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, labels.scopeDataTypes),
             React.createElement(ValueSelector_1.ValueOptionsTags, { readOnly: true, options: scope.DataTypes, value: scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(rebass_1.Text, { fontSize: 2 }, `DataType: ${c}`), toIdentifier: (c) => c }))) : null)));

package/src/View/Components/Panels/FilterFormPanel.d.ts

@@ -10,7 +10,7 @@ export interface FilterFormPanelProps extends PanelProps {
     onFilterApplied: () => void;
     IsAlwaysFilter: boolean;
     showCloseButton: boolean;
-    useVendorStyle: boolean;
+    useAgGridStyle: boolean;
     applyFilterButtonDisabled: boolean;
     autoApplyFilter: boolean;
 }