@adaptabletools/adaptable 16.2.3 → 17.0.0-canary.0

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -1,28 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseEditorInput = void 0;
-const tslib_1 = require("tslib");
-const rebass_1 = require("rebass");
-const parser = tslib_1.__importStar(require("../../parser/src"));
-const React = tslib_1.__importStar(require("react"));
-const ErrorBox_1 = tslib_1.__importDefault(require("../ErrorBox"));
-const useSelectionRange_1 = require("../utils/useSelectionRange");
-const EditorButton_1 = tslib_1.__importDefault(require("./EditorButton"));
-const HelpBlock_1 = tslib_1.__importDefault(require("../HelpBlock"));
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
-const Textarea_1 = tslib_1.__importDefault(require("../Textarea"));
-const react_1 = require("react");
-const ExpressionEvaluationError_1 = require("../../parser/src/ExpressionEvaluationError");
-const ButtonInfo_1 = require("../../View/Components/Buttons/ButtonInfo");
-const DocumentationLinkConstants_1 = require("../../Utilities/Constants/DocumentationLinkConstants");
-const icons_1 = require("../icons");
-const AdaptableContext_1 = require("../../View/AdaptableContext");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
-const ExpressionFunctionDocumentation_1 = require("./ExpressionFunctionDocumentation");
-const Tag_1 = require("../Tag");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
-const Radio_1 = tslib_1.__importDefault(require("../Radio"));
+import { Box, Flex, Text } from 'rebass';
+import * as parser from '../../parser/src';
+import * as React from 'react';
+import ErrorBox from '../ErrorBox';
+import { useSelectionRange } from '../utils/useSelectionRange';
+import EditorButton from './EditorButton';
+import HelpBlock from '../HelpBlock';
+import OverlayTrigger from '../OverlayTrigger';
+import SimpleButton from '../SimpleButton';
+import Textarea from '../Textarea';
+import { useEffect, useMemo } from 'react';
+import { ExpressionEvaluationError } from '../../parser/src/ExpressionEvaluationError';
+import { ButtonInfo } from '../../View/Components/Buttons/ButtonInfo';
+import { ExpressionEditorDocsLink } from '../../Utilities/Constants/DocumentationLinkConstants';
+import { Icon } from '../icons';
+import { useAdaptable } from '../../View/AdaptableContext';
+import join from '../utils/join';
+import { ExpressionFunctionDocumentation } from './ExpressionFunctionDocumentation';
+import { Tag } from '../Tag';
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+import Radio from '../Radio';
 const filterableCategories = [
     'dates',
     'logical',
@@ -47,14 +43,14 @@ const getCategoryOrder = (category) => {
 };
 const VarEditorButton = () => {
     var _a;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const customQueryVariables = (_a = adaptable.api.optionsApi.getExpressionOptions()) === null || _a === void 0 ? void 0 : _a.customQueryVariables;
     if (!customQueryVariables || Object.keys(customQueryVariables).length === 0) {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement(React.Fragment, null, Object.keys(customQueryVariables).map((varOption) => {
         const varString = `VAR('${varOption}')`;
-        return (React.createElement(EditorButton_1.default, { data: varString, key: varOption }, varString));
+        return (React.createElement(EditorButton, { data: varString, key: varOption }, varString));
     })));
 };
 const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
@@ -98,7 +94,7 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
             .filter((category) => filterableCategories.includes(category))
             .sort((first, second) => getCategoryOrder(first) - getCategoryOrder(second))
             .map((category) => ({
-            label: StringExtensions_1.default.Humanize(category),
+            label: StringExtensions.Humanize(category),
             value: category,
         }));
         return [{ label: 'All', value: 'all' }, ...categoryOptions];
@@ -112,15 +108,15 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
      * - mouse leaves
      * - a function is inserted
      */
-    return (React.createElement(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (React.createElement(rebass_1.Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper`, flexDirection: "column", onMouseLeave: () => hidePopup() },
-            React.createElement(rebass_1.Flex, { pl: 2, style: { gap: 10 } }, categoryOptions.map((option, index) => {
-                return (React.createElement(Radio_1.default, { key: option.value, onFocus: (event) => {
+    return (React.createElement(OverlayTrigger, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (React.createElement(Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper`, flexDirection: "column", onMouseLeave: () => hidePopup() },
+            React.createElement(Flex, { pl: 2, style: { gap: 10 } }, categoryOptions.map((option, index) => {
+                return (React.createElement(Radio, { key: option.value, onFocus: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                     }, onClick: handleFunctionCategoryChange(option.value), checked: currentFunctionCategory === option.value }, option.label));
             })),
-            React.createElement(rebass_1.Flex, null,
-                React.createElement(rebass_1.Flex, { className: `${baseClassName}__dropdown-functions-list`, "data-name": "expression-dropdown-fuctions-list", flexDirection: "column", p: 2, maxHeight: '50vh' }, orderedGroupNames
+            React.createElement(Flex, null,
+                React.createElement(Flex, { className: `${baseClassName}__dropdown-functions-list`, "data-name": "expression-dropdown-fuctions-list", flexDirection: "column", p: 2, maxHeight: '50vh' }, orderedGroupNames
                     .filter((groupName) => !!groupedFunctions[groupName])
                     .map((groupName) => {
                     const functionsInGroup = Object.keys(groupedFunctions[groupName]);
@@ -140,26 +136,26 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
                         }
                         return `${functionName}()`;
                     };
-                    return (React.createElement(rebass_1.Box, { mb: 2, key: groupName },
-                        React.createElement(Tag_1.Tag, { mb: 1 }, StringExtensions_1.default.Humanize(groupName)),
-                        functionsInGroup.map((functionName) => (React.createElement(rebass_1.Box, { key: functionName, onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup() }, functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName })) : (React.createElement(EditorButton_1.default, { data: getEditorButtonData(functionName), key: functionName, mr: 1 }, functionName)))))));
+                    return (React.createElement(Box, { mb: 2, key: groupName },
+                        React.createElement(Tag, { mb: 1 }, StringExtensions.Humanize(groupName)),
+                        functionsInGroup.map((functionName) => (React.createElement(Box, { key: functionName, onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup() }, functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName })) : (React.createElement(EditorButton, { data: getEditorButtonData(functionName), key: functionName, mr: 1 }, functionName)))))));
                 })),
-                React.createElement(rebass_1.Box, { className: `${baseClassName}__dropdown-functions-description`, p: 2, width: 600, maxWidth: "30vw" }, overFunction ? (React.createElement(React.Fragment, null,
-                    React.createElement(Tag_1.Tag, null, overFunction),
-                    React.createElement(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] }))) : (React.createElement(Tag_1.Tag, { padding: 20 },
+                React.createElement(Box, { className: `${baseClassName}__dropdown-functions-description`, p: 2, width: 600, maxWidth: "30vw" }, overFunction ? (React.createElement(React.Fragment, null,
+                    React.createElement(Tag, null, overFunction),
+                    React.createElement(ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] }))) : (React.createElement(Tag, { padding: 20 },
                     React.createElement("ul", null,
                         React.createElement("li", null,
                             "Hover over a Function to learn more",
                             React.createElement("br", null),
                             React.createElement("br", null)),
                         React.createElement("li", null, "Select a Function to add to the Expression in the Editor")))))))) },
-        React.createElement(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', mr: 1 },
-            React.createElement(rebass_1.Flex, { marginRight: 1, fontSize: 2 },
-                React.createElement(icons_1.Icon, { name: "equation" })))));
+        React.createElement(SimpleButton, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', mr: 1 },
+            React.createElement(Flex, { marginRight: 1, fontSize: 2 },
+                React.createElement(Icon, { name: "equation" })))));
 };
-function BaseEditorInput(props) {
+export function BaseEditorInput(props) {
     const { expressionFunctions, testData, style, type } = props;
-    const { ref: textAreaRefCallback, selectionStart, selectionEnd } = (0, useSelectionRange_1.useSelectionRange)();
+    const { ref: textAreaRefCallback, selectionStart, selectionEnd } = useSelectionRange();
     const cursor = selectionStart === selectionEnd ? selectionStart : null;
     let result;
     let evaluationError;
@@ -173,12 +169,12 @@ function BaseEditorInput(props) {
         }
         const parserExceptionDetails = e.message;
         return (React.createElement("details", null,
-            React.createElement(rebass_1.Flex, { marginBottom: 1, as: "summary" },
+            React.createElement(Flex, { marginBottom: 1, as: "summary" },
                 parserExceptionSummary,
                 React.createElement("i", null, " (click for more details)")),
-            React.createElement(rebass_1.Text, { marginLeft: 3, style: { fontStyle: 'italic' } }, parserExceptionDetails)));
+            React.createElement(Text, { marginLeft: 3, style: { fontStyle: 'italic' } }, parserExceptionDetails)));
     };
-    const testRowNode = (0, react_1.useMemo)(() => {
+    const testRowNode = useMemo(() => {
         const firstRowNode = props.api.gridApi.getFirstRowNode();
         if (!firstRowNode || !firstRowNode.data) {
             return {};
@@ -202,7 +198,7 @@ function BaseEditorInput(props) {
             });
         }
         catch (err) {
-            if (err instanceof ExpressionEvaluationError_1.ExpressionEvaluationError) {
+            if (err instanceof ExpressionEvaluationError) {
                 evaluationError = err;
             }
             else {
@@ -224,7 +220,7 @@ function BaseEditorInput(props) {
       ${e}`);
         }
     }
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         // update selected function only for focused textareas (where cursor is present)
         if (cursor != undefined) {
             props.onSelectedFunctionChange(selectedFunctionName ? expressionFunctions[selectedFunctionName] : null);
@@ -232,28 +228,27 @@ function BaseEditorInput(props) {
     }, [selectedFunctionName]);
     const operatorButtons = props.editorButtons
         .filter((editorButtonDef) => !!expressionFunctions[editorButtonDef.functionName])
-        .map((editorButtonDef) => (React.createElement(EditorButton_1.default, { key: `${editorButtonDef.functionName}-operator`, data: editorButtonDef.data, icon: editorButtonDef.icon }, !editorButtonDef.icon && (editorButtonDef.text || editorButtonDef.functionName))));
+        .map((editorButtonDef) => (React.createElement(EditorButton, { key: `${editorButtonDef.functionName}-operator`, data: editorButtonDef.data, icon: editorButtonDef.icon }, !editorButtonDef.icon && (editorButtonDef.text || editorButtonDef.functionName))));
     const showDocumentationLink = props.api.internalApi.isDocumentationLinksDisplayed();
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { className: baseClassName, "data-name": "expression-toolbar", py: 2, mb: 2, mt: 2, flexWrap: "wrap" },
-            React.createElement(rebass_1.Flex, { style: { flex: 1, marginLeft: 5 }, flexWrap: "wrap" },
+        React.createElement(Flex, { className: baseClassName, "data-name": "expression-toolbar", py: 2, mb: 2, mt: 2, flexWrap: "wrap" },
+            React.createElement(Flex, { style: { flex: 1, marginLeft: 5 }, flexWrap: "wrap" },
                 React.createElement(FunctionsDropdown, { expressionFunctions: expressionFunctions, baseClassName: baseClassName }),
                 operatorButtons),
-            showDocumentationLink && (React.createElement(rebass_1.Flex, { alignItems: "flex-start" },
-                React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') })))),
-        React.createElement(Textarea_1.default, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: (0, join_1.default)('ab-ExpressionEditor__textarea', // left for backwards compatibility
+            showDocumentationLink && (React.createElement(Flex, { alignItems: "flex-start" },
+                React.createElement(ButtonInfo, { mr: 2, tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(ExpressionEditorDocsLink, '_blank') })))),
+        React.createElement(Textarea, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: join('ab-ExpressionEditor__textarea', // left for backwards compatibility
             `${baseClassName}__textarea`), autoFocus: true, spellCheck: "false", onChange: (event) => {
                 props.onChange(event.target.value);
             }, style: style }),
-        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, fontSize: 3 },
+        props.isFullExpression !== true && (React.createElement(HelpBlock, { mt: 2, mb: 2, p: 2, fontSize: 3 },
             "This Query must resolve to a ",
             React.createElement("b", null, "boolean "),
             "(i.e. true / false) value")),
-        expressionError && (React.createElement(ErrorBox_1.default, { width: "100%", style: { whiteSpace: 'pre-wrap' }, mt: 2 }, expressionError)),
-        evaluationError && (React.createElement(ErrorBox_1.default, { style: { whiteSpace: 'pre-wrap' }, mt: 2 }, `${evaluationError.expressionFnName} ${evaluationError.message}`)),
-        !props.hideResultPreview && result !== undefined && (React.createElement(rebass_1.Box, { className: `${baseClassName}__editor-feedback`, "data-name": "expression-editor-feedback", mt: 2, p: 2 },
+        expressionError && (React.createElement(ErrorBox, { width: "100%", style: { whiteSpace: 'pre-wrap' }, mt: 2 }, expressionError)),
+        evaluationError && (React.createElement(ErrorBox, { style: { whiteSpace: 'pre-wrap' }, mt: 2 }, `${evaluationError.expressionFnName} ${evaluationError.message}`)),
+        !props.hideResultPreview && result !== undefined && (React.createElement(Box, { className: `${baseClassName}__editor-feedback`, "data-name": "expression-editor-feedback", mt: 2, p: 2 },
             React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } },
                 "Result (using Test Data): ",
                 React.createElement("b", null, JSON.stringify(result)))))));
 }
-exports.BaseEditorInput = BaseEditorInput;

package/src/components/ExpressionEditor/EditorButton.js

@@ -1,15 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
-const EditorContext_1 = require("./EditorContext");
+import { __rest } from "tslib";
+import * as React from 'react';
+import SimpleButton from '../SimpleButton';
+import { useExpressionEditor } from './EditorContext';
 let dragImage;
 const DRAG_IMAGE_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
 function EditorButton(props) {
-    const { data } = props, buttonProps = tslib_1.__rest(props, ["data"]);
-    const { textAreaRef } = (0, EditorContext_1.useExpressionEditor)();
-    return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": 'operator-or-fn', variant: "text", draggable: true, onDragStart: (event) => {
+    const { data } = props, buttonProps = __rest(props, ["data"]);
+    const { textAreaRef } = useExpressionEditor();
+    return (React.createElement(SimpleButton, Object.assign({ "data-name": 'operator-or-fn', variant: "text", draggable: true, onDragStart: (event) => {
             if (!dragImage) {
                 // we want to lazy init the image since otherwise it fails in SSR environments if it is declared outside the cmp - ReferenceError: Image is not defined
                 dragImage = new Image(0, 0);
@@ -40,4 +38,4 @@ function EditorButton(props) {
             cursor: 'grab',
         } }, buttonProps)));
 }
-exports.default = EditorButton;
+export default EditorButton;

package/src/components/ExpressionEditor/EditorContext.js

@@ -1,13 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useExpressionEditor = exports.ExpressionEditorContext = void 0;
-const react_1 = require("react");
-exports.ExpressionEditorContext = (0, react_1.createContext)({
+import { createContext, useContext } from 'react';
+export const ExpressionEditorContext = createContext({
     textAreaRef: { current: null },
     selectedFunction: null,
     setSelectedFunction: (_fn) => { },
 });
-const useExpressionEditor = () => {
-    return (0, react_1.useContext)(exports.ExpressionEditorContext);
+export const useExpressionEditor = () => {
+    return useContext(ExpressionEditorContext);
 };
-exports.useExpressionEditor = useExpressionEditor;

package/src/components/ExpressionEditor/EditorInput.js

@@ -1,26 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const BaseEditorInput_1 = require("./BaseEditorInput");
-const editorButtonsSearch_1 = require("./editorButtonsSearch");
-const EditorContext_1 = require("./EditorContext");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
-const editorButtonsAggregatedScalar_1 = require("./editorButtonsAggregatedScalar");
-const aggregatedScalarExpressionFunctions_1 = require("../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions");
-const editorButtonsCumulativeAggregatedScalar_1 = require("./editorButtonsCumulativeAggregatedScalar");
-const editorButtonsQuantileAggregatedScalar_1 = require("./editorButtonsQuantileAggregatedScalar");
+import * as React from 'react';
+import { useMemo } from 'react';
+import { BaseEditorInput } from './BaseEditorInput';
+import { editorButtonsSearch } from './editorButtonsSearch';
+import { useExpressionEditor } from './EditorContext';
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+import { editorButtonsAggregatedScalar } from './editorButtonsAggregatedScalar';
+import { aggregatedExpressionFunctions, cumulativeAggregatedExpressionFunctions, quantileAggregatedExpressionFunctions, } from '../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions';
+import { editorButtonsCumulativeAggregatedScalar } from './editorButtonsCumulativeAggregatedScalar';
+import { editorButtonsQuantileAggregatedScalar } from './editorButtonsQuantileAggregatedScalar';
 function EditorInput(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
         .getModuleExpressionFunctionsMap(props.module);
     const getFilteredAggregatedExpressionFunctions = (availableAggregatedExpressionFunctions, type) => {
         const sourceExpressionFunctions = type === 'cumulativeAggregatedScalar'
-            ? aggregatedScalarExpressionFunctions_1.cumulativeAggregatedExpressionFunctions
+            ? cumulativeAggregatedExpressionFunctions
             : type === 'quantileAggregatedScalar'
-                ? aggregatedScalarExpressionFunctions_1.quantileAggregatedExpressionFunctions
-                : aggregatedScalarExpressionFunctions_1.aggregatedExpressionFunctions;
+                ? quantileAggregatedExpressionFunctions
+                : aggregatedExpressionFunctions;
         return Object.keys(availableAggregatedExpressionFunctions)
             .filter((key) => sourceExpressionFunctions.includes(key))
             .reduce((obj, key) => {
@@ -28,23 +25,23 @@ function EditorInput(props) {
             return obj;
         }, {});
     };
-    const expressionFunctions = (0, react_1.useMemo)(() => {
+    const expressionFunctions = useMemo(() => {
         return props.type === 'aggregatedScalar' ||
             props.type === 'cumulativeAggregatedScalar' ||
             props.type === 'quantileAggregatedScalar'
             ? getFilteredAggregatedExpressionFunctions(moduleExpressionFunctions.aggregatedScalarFunctions, props.type)
             : Object.assign(Object.assign({}, moduleExpressionFunctions.booleanFunctions), moduleExpressionFunctions.scalarFunctions);
     }, [props.type]);
-    const { setSelectedFunction } = (0, EditorContext_1.useExpressionEditor)();
-    const queryName = `${StringExtensions_1.default.CapitaliseFirstLetter(props.type)}Query`;
-    return (React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: props.value, placeholder: `Create ${queryName}`, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
-            ? editorButtonsAggregatedScalar_1.editorButtonsAggregatedScalar
+    const { setSelectedFunction } = useExpressionEditor();
+    const queryName = `${StringExtensions.CapitaliseFirstLetter(props.type)}Query`;
+    return (React.createElement(BaseEditorInput, { type: 'main', value: props.value, placeholder: `Create ${queryName}`, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
+            ? editorButtonsAggregatedScalar
             : props.type === 'cumulativeAggregatedScalar'
-                ? editorButtonsCumulativeAggregatedScalar_1.editorButtonsCumulativeAggregatedScalar
+                ? editorButtonsCumulativeAggregatedScalar
                 : props.type === 'quantileAggregatedScalar'
-                    ? editorButtonsQuantileAggregatedScalar_1.editorButtonsQuantileAggregatedScalar
-                    : editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: props.isFullExpression, hideResultPreview: props.type === 'aggregatedScalar' ||
+                    ? editorButtonsQuantileAggregatedScalar
+                    : editorButtonsSearch, testData: props.testData, isFullExpression: props.isFullExpression, hideResultPreview: props.type === 'aggregatedScalar' ||
             props.type === 'cumulativeAggregatedScalar' ||
             props.type === 'quantileAggregatedScalar', api: props.api }));
 }
-exports.default = EditorInput;
+export default EditorInput;

package/src/components/ExpressionEditor/EditorInputWithWhereClause.js

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const BaseEditorInput_1 = require("./BaseEditorInput");
-const rebass_1 = require("rebass");
-const editorButtonsSearch_1 = require("./editorButtonsSearch");
-const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
-const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
-const editorButtonsObservable_1 = require("./editorButtonsObservable");
-const CheckBox_1 = require("../CheckBox");
-const EditorContext_1 = require("./EditorContext");
-const editorButtonsAggregatedBoolean_1 = require("./editorButtonsAggregatedBoolean");
+import * as React from 'react';
+import { useState } from 'react';
+import { BaseEditorInput } from './BaseEditorInput';
+import { Flex, Text } from 'rebass';
+import { editorButtonsSearch } from './editorButtonsSearch';
+import useProperty from '../utils/useProperty';
+import { CapitaliseFirstLetter, IsNotNullOrEmptyOrWhiteSpace, IsNullOrEmptyOrWhiteSpace, } from '../../Utilities/Extensions/StringExtensions';
+import { editorButtonsObservable } from './editorButtonsObservable';
+import { CheckBox } from '../CheckBox';
+import { useExpressionEditor } from './EditorContext';
+import { editorButtonsAggregatedBoolean } from './editorButtonsAggregatedBoolean';
 function EditorInputWithWhereClause(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
@@ -20,44 +17,44 @@ function EditorInputWithWhereClause(props) {
         ? moduleExpressionFunctions.observableFunctions
         : moduleExpressionFunctions.aggregatedBooleanFunctions;
     const whereClauseExpressionsFns = Object.assign(Object.assign({}, moduleExpressionFunctions.booleanFunctions), moduleExpressionFunctions.scalarFunctions);
-    const [value, setValue] = (0, useProperty_1.default)(props, 'value', '', {
+    const [value, setValue] = useProperty(props, 'value', '', {
         onChange: props.onChange,
     });
     const [reactiveValue, whereClauseValue] = value.split(' WHERE ');
     const updateReactiveValue = (value) => {
         let fullExpressionString = value;
-        if ((0, StringExtensions_1.IsNotNullOrEmptyOrWhiteSpace)(value) && (0, StringExtensions_1.IsNotNullOrEmptyOrWhiteSpace)(whereClauseValue)) {
+        if (IsNotNullOrEmptyOrWhiteSpace(value) && IsNotNullOrEmptyOrWhiteSpace(whereClauseValue)) {
             fullExpressionString = `${value} WHERE ${whereClauseValue}`;
         }
-        if ((0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(value)) {
+        if (IsNullOrEmptyOrWhiteSpace(value)) {
             setShowWhereClause(false);
         }
         setValue(fullExpressionString);
     };
     const updateWhereClauseValue = (value) => {
-        if ((0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(value)) {
+        if (IsNullOrEmptyOrWhiteSpace(value)) {
             setValue(reactiveValue);
         }
         else {
             setValue(`${reactiveValue} WHERE ${value}`);
         }
     };
-    const { setSelectedFunction } = (0, EditorContext_1.useExpressionEditor)();
-    const [showWhereClause, setShowWhereClause] = (0, react_1.useState)((0, StringExtensions_1.IsNotNullOrEmptyOrWhiteSpace)(whereClauseValue));
-    const queryName = `${(0, StringExtensions_1.CapitaliseFirstLetter)(props.type)}Query`;
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" },
-        React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: reactiveValue || '', placeholder: `Create ${queryName}`, onChange: updateReactiveValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: reactiveExpressionFns, editorButtons: props.type === 'observable' ? editorButtonsObservable_1.editorButtonsObservable : editorButtonsAggregatedBoolean_1.editorButtonsAggregatedBoolean, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }),
-        React.createElement(rebass_1.Text, { fontSize: 2, marginTop: 2, pl: 3 },
+    const { setSelectedFunction } = useExpressionEditor();
+    const [showWhereClause, setShowWhereClause] = useState(IsNotNullOrEmptyOrWhiteSpace(whereClauseValue));
+    const queryName = `${CapitaliseFirstLetter(props.type)}Query`;
+    return (React.createElement(Flex, { flexDirection: "column", alignItems: "start" },
+        React.createElement(BaseEditorInput, { type: 'main', value: reactiveValue || '', placeholder: `Create ${queryName}`, onChange: updateReactiveValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: reactiveExpressionFns, editorButtons: props.type === 'observable' ? editorButtonsObservable : editorButtonsAggregatedBoolean, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }),
+        React.createElement(Text, { fontSize: 2, marginTop: 2, pl: 3 },
             "Add a ",
             React.createElement("i", null, "WHERE"),
             " Clause to narrow the scope of the Query"),
-        React.createElement(CheckBox_1.CheckBox, { disabled: (0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(reactiveValue), checked: showWhereClause, style: { alignItems: 'center' }, onChange: (checked) => {
+        React.createElement(CheckBox, { disabled: IsNullOrEmptyOrWhiteSpace(reactiveValue), checked: showWhereClause, style: { alignItems: 'center' }, onChange: (checked) => {
                 setShowWhereClause(checked);
                 if (!checked) {
                     // reset whereClause value if textarea is hidden
                     updateWhereClauseValue(null);
                 }
             }, pl: 3 }, "WHERE"),
-        showWhereClause && (React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'secondary', disabled: (0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(reactiveValue), value: whereClauseValue || '', placeholder: `Create BooleanQuery which narrows down the scope of the ${queryName}`, onChange: updateWhereClauseValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: whereClauseExpressionsFns, editorButtons: editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }))));
+        showWhereClause && (React.createElement(BaseEditorInput, { type: 'secondary', disabled: IsNullOrEmptyOrWhiteSpace(reactiveValue), value: whereClauseValue || '', placeholder: `Create BooleanQuery which narrows down the scope of the ${queryName}`, onChange: updateWhereClauseValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: whereClauseExpressionsFns, editorButtons: editorButtonsSearch, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }))));
 }
-exports.default = EditorInputWithWhereClause;
+export default EditorInputWithWhereClause;

package/src/components/ExpressionEditor/ExpressionFunctionDocumentation.js

@@ -1,26 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpressionFunctionDocumentation = void 0;
-const tslib_1 = require("tslib");
-const rebass_1 = require("rebass");
-const React = tslib_1.__importStar(require("react"));
-const Tag_1 = require("../Tag");
-const ExpressionFunctionDocumentation = (props) => {
-    return props.expressionFunction ? (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation", my: 2, p: 2, style: {
+import { Box } from 'rebass';
+import * as React from 'react';
+import { Tag } from '../Tag';
+export const ExpressionFunctionDocumentation = (props) => {
+    return props.expressionFunction ? (React.createElement(Box, { "data-name": "expression-editor-documentation", my: 2, p: 2, style: {
             background: 'var(--ab-color-primary)',
             borderRadius: 'var(--ab__border-radius)',
         } },
-        props.expressionFunction.description && (React.createElement(rebass_1.Box, { mb: 3, style: { fontWeight: 'bold', whiteSpace: 'pre-wrap' }, "data-name": "expression-editor-documentation-description" }, props.expressionFunction.description)),
-        props.expressionFunction.signatures && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation-signatures" },
+        props.expressionFunction.description && (React.createElement(Box, { mb: 3, style: { fontWeight: 'bold', whiteSpace: 'pre-wrap' }, "data-name": "expression-editor-documentation-description" }, props.expressionFunction.description)),
+        props.expressionFunction.signatures && (React.createElement(Box, { "data-name": "expression-editor-documentation-signatures" },
             React.createElement("b", null, "Signatures"),
             React.createElement("ul", null, props.expressionFunction.signatures.map((signature, index) => (React.createElement("li", { key: index },
                 React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } }, signature))))))),
-        props.expressionFunction.examples && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation-examples" },
+        props.expressionFunction.examples && (React.createElement(Box, { "data-name": "expression-editor-documentation-examples" },
             React.createElement("b", null, "Examples"),
             React.createElement("ul", null, props.expressionFunction.examples.map((example, index) => (React.createElement("li", { key: index },
                 React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } }, example))))))),
-        props.expressionFunction.returnType && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation-examples" },
+        props.expressionFunction.returnType && (React.createElement(Box, { "data-name": "expression-editor-documentation-examples" },
             React.createElement("b", null, "Return Type"),
-            React.createElement(Tag_1.Tag, null, props.expressionFunction.returnType))))) : null;
+            React.createElement(Tag, null, props.expressionFunction.returnType))))) : null;
 };
-exports.ExpressionFunctionDocumentation = ExpressionFunctionDocumentation;

package/src/components/ExpressionEditor/NamedQueryContext.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { NamedQuery } from '../../PredefinedConfig/QueryState';
+import { NamedQuery } from '../../types';
 export declare type ExpressionEditorNamedQuery = false | NamedQuery;
 export declare const NamedQueryContext: import("react").Context<{
     namedQuery: ExpressionEditorNamedQuery;

package/src/components/ExpressionEditor/NamedQueryContext.js

@@ -1,13 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useNamedQueryContext = exports.NamedQueryContext = void 0;
-const react_1 = require("react");
-exports.NamedQueryContext = (0, react_1.createContext)({
+import { createContext, useContext } from 'react';
+export const NamedQueryContext = createContext({
     namedQuery: false,
     setNamedQuery: () => { },
     //  hasValidNamedQueryName: () => false,
 });
-const useNamedQueryContext = () => {
-    return (0, react_1.useContext)(exports.NamedQueryContext);
+export const useNamedQueryContext = () => {
+    return useContext(NamedQueryContext);
 };
-exports.useNamedQueryContext = useNamedQueryContext;

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { AdaptableColumnDataType, AdaptableModule, BooleanFunctionName } from '../../../types';
+interface QueryBuilderProps {
+    query: string;
+    getColumns: (type?: AdaptableColumnDataType) => {
+        label?: string;
+        value: string;
+        type: AdaptableColumnDataType;
+    }[];
+    onChange: (query: string) => void;
+    module: AdaptableModule;
+}
+export declare function useQueryBuilderContext(): {
+    getFields: (type?: AdaptableColumnDataType) => {
+        label?: string;
+        value: string;
+        type: AdaptableColumnDataType;
+    }[];
+    getExpressions: (columnType: AdaptableColumnDataType) => BooleanFunctionName[];
+};
+export declare const QueryBuilder: React.FunctionComponent<QueryBuilderProps>;
+export {};

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.js

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { DragDropContext } from 'react-beautiful-dnd';
+import { Box } from 'rebass';
+import { mapExpressionToQlPredicate, } from '../../../parser/src/predicate';
+import { mapQlPredicateToExpression } from '../../../parser/src/predicate/mapQlPredicateToExpression';
+import { useAdaptable } from '../../../View/AdaptableContext';
+import ErrorBox from '../../ErrorBox';
+import HelpBlock from '../../HelpBlock';
+import Panel from '../../Panel';
+import { QueryPredicateBuilder } from './QueryPredicateBuilder';
+import { getFunctionsForColumnType, reorder } from './utils';
+const QUERY_BUILDER_CLASSNAME = 'ab-QueryBuilder';
+const QueryBuilderContext = React.createContext(null);
+export function useQueryBuilderContext() {
+    const context = React.useContext(QueryBuilderContext);
+    if (!context) {
+        throw new Error('useQueryBuilderContext must be used within a QueryBuilderContext');
+    }
+    return context;
+}
+export const QueryBuilder = (props) => {
+    const adaptable = useAdaptable();
+    const [qlPredicate, setQlPredicate] = React.useState(() => {
+        const qlPredicate = mapExpressionToQlPredicate(props.query);
+        return qlPredicate;
+    });
+    const [expressionStr, setExpressionStr] = React.useState(props.query);
+    const handleQlPredicateChange = (qlPredicate) => {
+        setQlPredicate(qlPredicate);
+        if (qlPredicate && !('errorMessage' in qlPredicate)) {
+            const newQuery = mapQlPredicateToExpression(qlPredicate);
+            props.onChange(newQuery);
+            setExpressionStr(newQuery);
+        }
+    };
+    const booleanExpressions = React.useMemo(() => {
+        const expressionMap = adaptable.api.internalApi
+            .getQueryLanguageService()
+            .getModuleExpressionFunctionsMap(props.module);
+        const booleanExpressions = Object.assign({}, expressionMap.booleanFunctions);
+        const booleanExpressionsWithoutCombinators = booleanExpressions;
+        delete booleanExpressionsWithoutCombinators.AND;
+        delete booleanExpressionsWithoutCombinators.OR;
+        return booleanExpressionsWithoutCombinators;
+    }, []);
+    const context = React.useMemo(() => {
+        return {
+            getFields: props.getColumns,
+            getExpressions: (columnType) => {
+                return booleanExpressions
+                    ? getFunctionsForColumnType(columnType, Object.keys(booleanExpressions))
+                    : [];
+            },
+            onQlPredicateChange: handleQlPredicateChange,
+        };
+    }, []);
+    return (React.createElement(DragDropContext, { onDragEnd: (result) => {
+            if (!result.destination) {
+                return;
+            }
+            const toPath = `${result.destination.droppableId}/${result.destination.index}`;
+            const fromPath = result.draggableId;
+            const predicate = reorder(qlPredicate, fromPath, toPath);
+            handleQlPredicateChange(predicate);
+        } },
+        React.createElement(QueryBuilderContext.Provider, { value: context },
+            React.createElement(Box, { className: QUERY_BUILDER_CLASSNAME },
+                React.createElement(HelpBlock, { mt: 2, mb: 2, p: 2, fontSize: 3 }, "Create a Grid Filter by adding as many Conditions and AND / OR Groups as required.          "),
+                qlPredicate &&
+                    ('errorMessage' in qlPredicate ? (React.createElement(ErrorBox, null, qlPredicate.errorMessage)) : (React.createElement(QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {
+                            // add to its children
+                            const newPredicate = {
+                                operator: type === 'filter' ? undefined : 'AND',
+                                args: [],
+                            };
+                            handleQlPredicateChange(Object.assign(Object.assign({}, qlPredicate), { args: [...qlPredicate.args, newPredicate] }));
+                        }, onChange: (predicate) => {
+                            handleQlPredicateChange(predicate);
+                        } }))),
+                React.createElement(Panel, { variant: "default", header: "AdapTableQL Expression", mt: 3 },
+                    React.createElement(Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression`, minHeight: 48, my: 2, p: 3 }, expressionStr !== null && expressionStr !== void 0 ? expressionStr : ' '))))));
+};