@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.1

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -1,49 +1,44 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FreeTextColumnSettingsWizardSection = exports.isValidFreeTextColumn = exports.renderFreeTextColumnSummary = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const rebass_1 = require("rebass");
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
-const CheckBox_1 = require("../../../components/CheckBox");
-const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
-const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
-const Tag_1 = require("../../../components/Tag");
-const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
-const Select_1 = require("../../../components/Select");
+import * as React from 'react';
+import { useState } from 'react';
+import { Box } from 'rebass';
+import Input from '../../../components/Input';
+import ErrorBox from '../../../components/ErrorBox';
+import Radio from '../../../components/Radio';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import AdaptableInput from '../../Components/AdaptableInput';
+import { CheckBox } from '../../../components/CheckBox';
+import { DateFormatter } from '../../../Utilities/Helpers/FormatHelper';
+import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
+import { Tag } from '../../../components/Tag';
+import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
+import { Select } from '../../../components/Select';
 const options = [
     { value: 'Number', label: 'Number' },
     { value: 'String', label: 'String' },
     { value: 'Date', label: 'Date' },
     { value: 'Boolean', label: 'Boolean' },
 ];
-const renderFreeTextColumnSummary = (data) => {
+export const renderFreeTextColumnSummary = (data) => {
     var _a;
-    return (React.createElement(rebass_1.Box, { fontSize: 2 },
-        React.createElement(rebass_1.Box, null,
+    return (React.createElement(Box, { fontSize: 2 },
+        React.createElement(Box, null,
             "Column Identifier: ",
-            React.createElement(Tag_1.Tag, null, data.ColumnId)),
-        data.FriendlyName ? (React.createElement(rebass_1.Box, { mt: 3 },
+            React.createElement(Tag, null, data.ColumnId)),
+        data.FriendlyName ? (React.createElement(Box, { mt: 3 },
             "Column Name: ",
-            React.createElement(Tag_1.Tag, null, (_a = data.FriendlyName) !== null && _a !== void 0 ? _a : data.ColumnId))) : null,
-        React.createElement(rebass_1.Box, { mt: 3 },
+            React.createElement(Tag, null, (_a = data.FriendlyName) !== null && _a !== void 0 ? _a : data.ColumnId))) : null,
+        React.createElement(Box, { mt: 3 },
             "Data Type: ",
-            React.createElement(Tag_1.Tag, null, data.FreeTextColumnSettings.DataType)),
-        data.DefaultValue !== undefined ? (React.createElement(rebass_1.Box, { mt: 3 },
+            React.createElement(Tag, null, data.FreeTextColumnSettings.DataType)),
+        data.DefaultValue !== undefined ? (React.createElement(Box, { mt: 3 },
             "Default Value: ",
-            React.createElement(Tag_1.Tag, null, data.DefaultValue))) : null,
-        data.TextEditor !== undefined ? (React.createElement(rebass_1.Box, { mt: 3 },
+            React.createElement(Tag, null, data.DefaultValue))) : null,
+        data.TextEditor !== undefined ? (React.createElement(Box, { mt: 3 },
             "Editor Type: ",
-            React.createElement(Tag_1.Tag, null, data.TextEditor))) : null));
+            React.createElement(Tag, null, data.TextEditor))) : null));
 };
-exports.renderFreeTextColumnSummary = renderFreeTextColumnSummary;
-const isValidFreeTextColumn = (data, api) => {
+export const isValidFreeTextColumn = (data, api) => {
     const columns = api.columnApi.getColumns();
     if (!data.ColumnId) {
         return 'Column Id cannot be empty';
@@ -58,14 +53,13 @@ const isValidFreeTextColumn = (data, api) => {
     }
     return true;
 };
-exports.isValidFreeTextColumn = isValidFreeTextColumn;
-const FreeTextColumnSettingsWizardSection = (props) => {
+export const FreeTextColumnSettingsWizardSection = (props) => {
     var _a;
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data, api } = useOnePageAdaptableWizardContext();
     const Pattern = api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat;
-    const [ColumnNameFocused, setColumnNameFocused] = (0, react_1.useState)(false);
+    const [ColumnNameFocused, setColumnNameFocused] = useState(false);
     const inEdit = props.isEdit;
-    const validCheck = (0, exports.isValidFreeTextColumn)(data, api);
+    const validCheck = isValidFreeTextColumn(data, api);
     const ErrorMessage = validCheck === true ? null : validCheck;
     const handleColumnIdChange = (event) => {
         let e = event.target;
@@ -95,7 +89,7 @@ const FreeTextColumnSettingsWizardSection = (props) => {
         let e = event.target;
         let DefaultValue = e.value;
         if (data.FreeTextColumnSettings.DataType === 'Date') {
-            DefaultValue = (0, FormatHelper_1.DateFormatter)(DefaultValue, {
+            DefaultValue = DateFormatter(DefaultValue, {
                 Pattern,
             });
         }
@@ -107,37 +101,36 @@ const FreeTextColumnSettingsWizardSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { FreeTextColumnSettings: Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.FreeTextColumnSettings), settings) }));
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(FormLayout_1.default, null,
-            React.createElement(FormLayout_1.FormRow, { label: "Column Id" },
-                React.createElement(Input_1.default, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter an id", onChange: (e) => handleColumnIdChange(e) })),
-            React.createElement(FormLayout_1.FormRow, { label: "Column Name" },
-                React.createElement(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
+        React.createElement(FormLayout, null,
+            React.createElement(FormRow, { label: "Column Id" },
+                React.createElement(Input, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter an id", onChange: (e) => handleColumnIdChange(e) })),
+            React.createElement(FormRow, { label: "Column Name" },
+                React.createElement(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
                         setColumnNameFocused(true);
                     }, onBlur: () => {
                         setColumnNameFocused(false);
                     }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a name", onChange: (e) => handleColumnNameChange(e) })),
-            React.createElement(FormLayout_1.FormRow, { label: "Data Type" },
-                React.createElement(rebass_1.Box, { style: { maxWidth: 500 } },
-                    React.createElement(Select_1.Select, { "data-name": "column-type-dropdown", options: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onChange: (value) => handleDataTypeChange(value) }))),
-            React.createElement(FormLayout_1.FormRow, { label: "Default Value" }, data.FreeTextColumnSettings.DataType === 'Boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
+            React.createElement(FormRow, { label: "Data Type" },
+                React.createElement(Box, { style: { maxWidth: 500 } },
+                    React.createElement(Select, { "data-name": "column-type-dropdown", options: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onChange: (value) => handleDataTypeChange(value) }))),
+            React.createElement(FormRow, { label: "Default Value" }, data.FreeTextColumnSettings.DataType === 'Boolean' ? (React.createElement(CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
                     props.onChange(Object.assign(Object.assign({}, data), { DefaultValue }));
-                } })) : (React.createElement(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'Date' && data.DefaultValue
-                    ? (0, DateHelper_1.parseToISO)(data.DefaultValue, Pattern) || ''
+                } })) : (React.createElement(AdaptableInput, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'Date' && data.DefaultValue
+                    ? parseToISO(data.DefaultValue, Pattern) || ''
                     : data.DefaultValue || '', style: { width: '100%', maxWidth: 500 }, type: data.FreeTextColumnSettings.DataType === 'Number'
                     ? 'number'
                     : data.FreeTextColumnSettings.DataType === 'Date'
                         ? 'date'
                         : 'text', placeholder: "Default Column Value (optional)", onChange: (e) => handleDefaultValueChange(e) }))),
-            React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
-                React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: ((_a = data.FreeTextColumnSettings) === null || _a === void 0 ? void 0 : _a.HeaderToolTip) || '', onChange: (e) => handleSpecialColumnSettingsChange({
+            React.createElement(FormRow, { label: "Header Tooltip" },
+                React.createElement(Input, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: ((_a = data.FreeTextColumnSettings) === null || _a === void 0 ? void 0 : _a.HeaderToolTip) || '', onChange: (e) => handleSpecialColumnSettingsChange({
                         HeaderToolTip: e.target.value,
                     }) })),
             ' ',
-            data.FreeTextColumnSettings.DataType == 'String' && (React.createElement(FormLayout_1.FormRow, { label: "Cell Editor" },
-                React.createElement(Radio_1.default, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
-                React.createElement(Radio_1.default, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
-        ErrorMessage ? (React.createElement(ErrorBox_1.default, { mt: 2, mb: 2 }, ErrorMessage)) : null,
-        React.createElement(rebass_1.Box, { mt: 2 },
-            React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }))));
+            data.FreeTextColumnSettings.DataType == 'String' && (React.createElement(FormRow, { label: "Cell Editor" },
+                React.createElement(Radio, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
+                React.createElement(Radio, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
+        ErrorMessage ? (React.createElement(ErrorBox, { mt: 2, mb: 2 }, ErrorMessage)) : null,
+        React.createElement(Box, { mt: 2 },
+            React.createElement(SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }))));
 };
-exports.FreeTextColumnSettingsWizardSection = FreeTextColumnSettingsWizardSection;

package/src/View/FreeTextColumn/Wizard/FreeTextColumnWizard.js

@@ -1,31 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FreeTextColumnWizard = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const rebass_1 = require("rebass");
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Helper_1 = require("../../../Utilities/Helpers/Helper");
-const FreeTextColumnSettingsWizardSection_1 = require("./FreeTextColumnSettingsWizardSection");
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
-const FreeTextColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FreeTextColumnRedux"));
-const react_redux_1 = require("react-redux");
-const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
-const FreeTextColumnWizard = (props) => {
+import * as React from 'react';
+import { useState } from 'react';
+import { Box } from 'rebass';
+import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
+import { cloneObject } from '../../../Utilities/Helpers/Helper';
+import { FreeTextColumnSettingsWizardSection, isValidFreeTextColumn, renderFreeTextColumnSummary, } from './FreeTextColumnSettingsWizardSection';
+import ObjectFactory from '../../../Utilities/ObjectFactory';
+import * as FreeTextColumnRedux from '../../../Redux/ActionsReducers/FreeTextColumnRedux';
+import { useDispatch, useSelector } from 'react-redux';
+import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+export const FreeTextColumnWizard = (props) => {
     var _a;
-    const allFreeTextColumns = (0, react_redux_1.useSelector)((state) => state.FreeTextColumn.FreeTextColumns);
-    const [freeTextColumn, setFreeTextColumn] = (0, react_1.useState)(() => {
+    const allFreeTextColumns = useSelector((state) => state.FreeTextColumn.FreeTextColumns);
+    const [freeTextColumn, setFreeTextColumn] = useState(() => {
         var _a, _b;
         if (props.data) {
-            return (0, Helper_1.cloneObject)(props.data);
+            return cloneObject(props.data);
         }
         if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit' && ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.column)) {
             return allFreeTextColumns.find((column) => column.ColumnId === props.popupParams.column.columnId);
         }
-        return ObjectFactory_1.default.CreateEmptyFreeTextColumn();
+        return ObjectFactory.CreateEmptyFreeTextColumn();
     });
-    const dispatch = (0, react_redux_1.useDispatch)();
+    const dispatch = useDispatch();
     const isEdit = props.data || ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit';
     const handleFinish = () => {
         if (isEdit) {
@@ -36,34 +32,33 @@ const FreeTextColumnWizard = (props) => {
         }
         props.onFinishWizard(freeTextColumn);
     };
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure the Free Text Column',
-                isValid: FreeTextColumnSettingsWizardSection_1.isValidFreeTextColumn,
+                isValid: isValidFreeTextColumn,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
-                        React.createElement(FreeTextColumnSettingsWizardSection_1.FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn })));
+                    return (React.createElement(Box, { padding: 2 },
+                        React.createElement(FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn })));
                 },
             },
             {
                 details: 'Select Free Text Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
-                    React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setFreeTextColumn }))),
-                renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
+                render: () => (React.createElement(Box, { padding: 2 },
+                    React.createElement(ObjectTagsWizardSection, { onChange: setFreeTextColumn }))),
+                renderSummary: renderObjectTagsSummary,
             },
             '-',
             {
                 details: 'Review the Free Text Column',
-                renderSummary: FreeTextColumnSettingsWizardSection_1.renderFreeTextColumnSummary,
+                renderSummary: renderFreeTextColumnSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
-                        React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
+                    return (React.createElement(Box, { padding: 2 },
+                        React.createElement(OnePageWizardSummary, null)));
                 },
                 title: 'Summary',
             },
         ] }));
 };
-exports.FreeTextColumnWizard = FreeTextColumnWizard;

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -1,40 +1,36 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridFilterExpressionEditor = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
-const ExpressionEditor_1 = require("../../components/ExpressionEditor");
-const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const QueryRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/NamedQueryRedux"));
-const PopupRedux_1 = require("../../Redux/ActionsReducers/PopupRedux");
-const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
-const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
-const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const useGridFilterOptionsForExpressionEditor_1 = require("./useGridFilterOptionsForExpressionEditor");
-const GridFilterExpressionEditor = (props) => {
-    const dispatch = (0, react_redux_1.useDispatch)();
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { useDispatch } from 'react-redux';
+import { Box, Flex } from 'rebass';
+import { ExpressionEditor } from '../../components/ExpressionEditor';
+import { NamedQueryContext, } from '../../components/ExpressionEditor/NamedQueryContext';
+import SimpleButton from '../../components/SimpleButton';
+import * as QueryRedux from '../../Redux/ActionsReducers/NamedQueryRedux';
+import { PopupShowForm } from '../../Redux/ActionsReducers/PopupRedux';
+import { GridFilterModuleId } from '../../Utilities/Constants/ModuleConstants';
+import { IsNotNullOrEmpty, IsNullOrEmpty } from '../../Utilities/Extensions/StringExtensions';
+import Helper from '../../Utilities/Helpers/Helper';
+import { useAdaptable } from '../AdaptableContext';
+import { useGridFilterOptionsForExpressionEditorProps } from './useGridFilterOptionsForExpressionEditor';
+export const GridFilterExpressionEditor = (props) => {
+    const dispatch = useDispatch();
+    const { api } = useAdaptable();
     const [namedQuery, setNamedQuery] = React.useState(null);
     const [expression, setExpression] = React.useState(props.expression);
     const isExpressionValid = api.internalApi
         .getQueryLanguageService()
-        .validateBoolean(expression, ModuleConstants_1.GridFilterModuleId).isValid;
-    const isExistingNamedQuery = Helper_1.default.objectExists(api.namedQueryApi.getNamedQueries().find((q) => q.BooleanExpression == expression));
+        .validateBoolean(expression, GridFilterModuleId).isValid;
+    const isExistingNamedQuery = Helper.objectExists(api.namedQueryApi.getNamedQueries().find((q) => q.BooleanExpression == expression));
     const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
     const namedQueryValidationError = namedQuery
         ? api.namedQueryApi.isValidNamedQuery(namedQuery).message
         : '';
-    const hasNamedQueryError = (0, StringExtensions_1.IsNotNullOrEmpty)(namedQueryValidationError);
+    const hasNamedQueryError = IsNotNullOrEmpty(namedQueryValidationError);
     const onRunQuery = (expression) => {
         api.gridFilterApi.setGridFilterExpression(expression);
     };
     const onAddNamedQuery = (namedQuery) => dispatch(QueryRedux.NamedQueryAdd(namedQuery));
     const handleSaveQuery = () => {
-        dispatch((0, PopupRedux_1.PopupShowForm)({
+        dispatch(PopupShowForm({
             Id: 'save_query_form',
             Form: {
                 title: 'Save as Named Query',
@@ -83,23 +79,23 @@ const GridFilterExpressionEditor = (props) => {
             },
         }));
     };
-    const expressionEditorProps = (0, useGridFilterOptionsForExpressionEditor_1.useGridFilterOptionsForExpressionEditorProps)();
-    const actionsDisabled = !isExpressionValid || (0, StringExtensions_1.IsNullOrEmpty)(expression) || hasNamedQueryError || isExistingNamedQuery;
-    return (React.createElement(NamedQueryContext_1.NamedQueryContext.Provider, { value: {
+    const expressionEditorProps = useGridFilterOptionsForExpressionEditorProps();
+    const actionsDisabled = !isExpressionValid || IsNullOrEmpty(expression) || hasNamedQueryError || isExistingNamedQuery;
+    return (React.createElement(NamedQueryContext.Provider, { value: {
             namedQuery: namedQuery,
             setNamedQuery: (newQuery) => {
                 setNamedQuery(newQuery);
             },
         } },
-        React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column" },
-            React.createElement(ExpressionEditor_1.ExpressionEditor, Object.assign({}, expressionEditorProps, { type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, alignItems: "center" },
-                props.onDismiss && (React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-close", onClick: () => {
+        React.createElement(Flex, { height: "100%", flexDirection: "column" },
+            React.createElement(ExpressionEditor, Object.assign({}, expressionEditorProps, { type: 'boolean', module: GridFilterModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })),
+            React.createElement(Flex, { flexDirection: "row", padding: 1, alignItems: "center" },
+                props.onDismiss && (React.createElement(SimpleButton, { margin: 1, variant: "text", "data-name": "action-close", onClick: () => {
                         props.onDismiss();
                     } }, "CLOSE")),
-                React.createElement(rebass_1.Box, { flex: 1 }),
-                React.createElement(SimpleButton_1.default, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save" }, "Save Query"),
-                React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, icon: "play", onClick: () => {
+                React.createElement(Box, { flex: 1 }),
+                React.createElement(SimpleButton, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save" }, "Save Query"),
+                React.createElement(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, icon: "play", onClick: () => {
                         var _a;
                         if (namedQuery) {
                             onAddNamedQuery({
@@ -111,4 +107,3 @@ const GridFilterExpressionEditor = (props) => {
                         (_a = props === null || props === void 0 ? void 0 : props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props);
                     }, disabled: actionsDisabled }, "Apply Grid Filter")))));
 };
-exports.GridFilterExpressionEditor = GridFilterExpressionEditor;

package/src/View/GridFilter/GridFilterPopup.js

@@ -1,49 +1,44 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridFilterPopup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
-const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
-const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
-const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
-const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
-const ButtonExpand_1 = require("../Components/Buttons/ButtonExpand");
-const ButtonInvalid_1 = require("../Components/Buttons/ButtonInvalid");
-const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
-const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
-const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
-const ButtonUnsuspend_1 = require("../Components/Buttons/ButtonUnsuspend");
-const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const NamedQuerySelector_1 = require("./NamedQuerySelector");
-const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor");
-const GridFilterPopup = () => {
-    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, gridFilterHelpPage, gridFilterLinkDisabled, isReadOnly, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
+import * as React from 'react';
+import { Flex } from 'rebass';
+import DropdownButton from '../../components/DropdownButton';
+import FieldWrap from '../../components/FieldWrap';
+import FormLayout, { FormRow } from '../../components/FormLayout';
+import Input from '../../components/Input';
+import Panel from '../../components/Panel';
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+import { ButtonClear } from '../Components/Buttons/ButtonClear';
+import { ButtonExpand } from '../Components/Buttons/ButtonExpand';
+import { ButtonInvalid } from '../Components/Buttons/ButtonInvalid';
+import { ButtonPause } from '../Components/Buttons/ButtonPause';
+import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
+import { ButtonSave } from '../Components/Buttons/ButtonSave';
+import { ButtonUnsuspend } from '../Components/Buttons/ButtonUnsuspend';
+import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
+import { NamedQuerySelector } from './NamedQuerySelector';
+import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
+export const GridFilterPopup = () => {
+    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, gridFilterHelpPage, gridFilterLinkDisabled, isReadOnly, } = useGridFilterExpressionEditor();
     const handleEnter = (e) => {
         if (e.key === 'Enter') {
             runQuery();
         }
     };
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
-    return (React.createElement(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: gridFilterHelpPage, infoLinkDisabled: gridFilterLinkDisabled },
-        React.createElement(Panel_1.default, { bodyProps: { height: '100%' }, height: "100%" },
-            React.createElement(FormLayout_1.default, null,
-                React.createElement(FormLayout_1.FormRow, { label: "Expression" },
-                    React.createElement(FieldWrap_1.default, { marginRight: 1, width: "100%" },
-                        React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }),
-                        React.createElement(Input_1.default, { onKeyDown: handleEnter, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (x) => setExpression(x.target.value), style: { fontFamily: 'monospace', fontSize: 12 } }),
-                        isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })),
-                        gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
+    return (React.createElement(PopupPanel, { className: "ab-GridFilter", headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: gridFilterHelpPage, infoLinkDisabled: gridFilterLinkDisabled },
+        React.createElement(Panel, { bodyProps: { height: '100%' }, height: "100%" },
+            React.createElement(FormLayout, null,
+                React.createElement(FormRow, { label: "Expression" },
+                    React.createElement(FieldWrap, { marginRight: 1, width: "100%" },
+                        React.createElement(ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }),
+                        React.createElement(Input, { onKeyDown: handleEnter, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (x) => setExpression(x.target.value), style: { fontFamily: 'monospace', fontSize: 12 } }),
+                        isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })),
+                        gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
                         ' ',
-                        StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))),
-                React.createElement(FormLayout_1.FormRow, { label: "" },
-                    React.createElement(rebass_1.Flex, { justifyContent: "space-around" },
-                        React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }, "Save"),
-                        isSuspended ? (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Resume")) : (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Suspend")),
-                        React.createElement(DropdownButton_1.default, { disabled: disabled, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
-                        React.createElement(NamedQuerySelector_1.NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }, "Named Queries")))))));
+                        StringExtensions.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))),
+                React.createElement(FormRow, { label: "" },
+                    React.createElement(Flex, { justifyContent: "space-around" },
+                        React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }, "Save"),
+                        isSuspended ? (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Resume")) : (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Suspend")),
+                        React.createElement(DropdownButton, { disabled: disabled, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
+                        React.createElement(NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }, "Named Queries")))))));
 };
-exports.GridFilterPopup = GridFilterPopup;

package/src/View/GridFilter/GridFilterStatusbar.js

@@ -1,14 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridFilterStatusbar = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const GridFilterStatusbar = (props) => {
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+export const GridFilterStatusbar = (props) => {
     var _a, _b;
     const queryMaxLength = 15;
-    const currentLayoutName = (0, react_redux_1.useSelector)((state) => state.Layout.CurrentLayout);
-    const currentLayout = (0, react_redux_1.useSelector)((state) => state.Layout.Layouts).find((layout) => layout.Name === currentLayoutName);
+    const currentLayoutName = useSelector((state) => state.Layout.CurrentLayout);
+    const currentLayout = useSelector((state) => state.Layout.Layouts).find((layout) => layout.Name === currentLayoutName);
     const query = (_b = (_a = currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : '';
     let text = query;
     let popover = null;
@@ -18,4 +14,3 @@ const GridFilterStatusbar = (props) => {
     }
     return React.createElement(React.Fragment, null, text !== null && text !== void 0 ? text : 'No Query');
 };
-exports.GridFilterStatusbar = GridFilterStatusbar;