@adaptabletools/adaptable 13.0.0-canary.16 → 13.0.0-canary.18

package/src/components/ExpressionEditor/index.js

@@ -31,6 +31,7 @@ function ExpressionEditor(props) {
     const [data, setData] = (0, react_1.useState)(props.initialData);
     const [showColumnIds, setShowColumnIds] = (0, react_1.useState)(false);
     const [showNamedQueries, setShowNamedQueries] = (0, react_1.useState)(false);
+    const baseClassName = `ab-ExpressionEditor`;
     const [selectedFunction, setSelectedFunction] = (0, react_1.useState)(null);
     const [expressionText, setExpressionText] = (0, react_1.useState)('');
     const { namedQuery, setNamedQuery } = (0, NamedQueryContext_1.useNamedQueryContext)();
@@ -102,7 +103,7 @@ function ExpressionEditor(props) {
     };
     const [searchInputValue, setSearchInputValue] = React.useState('');
     const dataTableEditor = (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+        React.createElement(rebass_1.Flex, { className: `${baseClassName}__columns-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
             React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
                     float: 'right',
                     margin: 0,
@@ -157,28 +158,24 @@ function ExpressionEditor(props) {
             setSelectedFunction,
             textAreaRef,
         } },
-        React.createElement("div", { "data-name": "expression-editor", style: Object.assign({ flex: 1, overflow: 'auto', display: 'flex', paddingLeft: 'var(--ab-space-2)' }, props.style) },
+        React.createElement(rebass_1.Flex, { className: baseClassName, flex: 1, "data-name": "expression-editor-wrapper", pl: 2, style: props.style },
             React.createElement(rebass_1.Flex, { flex: 1, style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
                     if (event.target.tagName === 'TEXTAREA') {
                         textAreaRef.current = event.target;
                     }
                 } },
-                React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", style: { fontSize: 'var(--ab-font-size-2)', minHeight: 0, flex: 1 } },
+                React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", fontSize: 2, style: { minHeight: 0 } },
                     React.createElement(rebass_1.Flex, { flex: 1, paddingRight: 2, style: { overflow: 'auto' }, "data-name": "expression-builder", flexDirection: "column" },
                         editorInput,
                         StringExtensions_1.default.IsNotNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && (React.createElement(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })),
                         /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
                         StringExtensions_1.default.IsNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && renderQueryHints(type),
-                        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 2, mb: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
-                            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, style: {
-                                    color: 'var(--ab-color-text-on-add)',
-                                    fill: 'var(--ab-color-text-on-add)',
-                                    background: 'var(--ab-color-action-add)',
-                                }, onClick: () => window.open(queryDocumentationLink, '_blank') }),
+                        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 2, mb: 2, fontSize: 3 },
+                            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(queryDocumentationLink, '_blank') }),
                             "See ",
                             StringExtensions_1.default.CapitaliseFirstLetter(type),
                             " Query documentation for more details and examples")),
-                        React.createElement("div", { style: { flex: 1 } }),
+                        React.createElement(rebass_1.Box, { flex: 1 }),
                         allowSaveNamedQuery &&
                             props.api.internalApi
                                 .getModuleService()
@@ -202,13 +199,8 @@ function ExpressionEditor(props) {
                                         BooleanExpression: expressionText,
                                     });
                                 } })) : null))),
-                    React.createElement(rebass_1.Box, { "data-name": "expression-column-picker", pb: 2, paddingLeft: 2, style: {
-                            overflow: 'auto',
-                            minWidth: 220,
-                            height: '100%',
-                            paddingRight: 'var(--ab-space-2)',
-                        } },
-                        ArrayExtensions_1.default.IsNotNullOrEmpty(props.namedQueries) && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "start", style: { padding: 3, marginTop: 5 }, backgroundColor: "primarylight" },
+                    React.createElement(rebass_1.Box, { className: `${baseClassName}__column-picker`, "data-name": "expression-column-picker", pb: 2, paddingLeft: 2, pr: 2 },
+                        ArrayExtensions_1.default.IsNotNullOrEmpty(props.namedQueries) && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "start", p: 1, mt: 2, backgroundColor: "primarylight" },
                             React.createElement(Radio_1.default, { checked: !showNamedQueries, onChange: (checked) => setShowNamedQueries(!checked), style: { marginRight: 10 } }, "Columns"),
                             React.createElement(Radio_1.default, { checked: showNamedQueries, onChange: (checked) => setShowNamedQueries(checked), style: { marginLeft: 10, whiteSpace: 'nowrap' } }, "Named Queries"))),
                         showNamedQueries ? React.createElement("div", null, namedQueries) : React.createElement("div", null, dataTableEditor)))))));

package/src/components/FormLayout/index.js

@@ -73,7 +73,7 @@ const FormRow = (props) => {
         }
         if (props.as != null || column.component != null) {
             const Cmp = column.component;
-            value = (React.createElement(Cmp, { style: Object.assign(Object.assign({}, column.style), { gridColumn: columnIndex + 1, gridRow: rowIndex + 1 }), className: column.className }, value));
+            value = (React.createElement(Cmp, { "data-name": props.dataName, style: Object.assign(Object.assign({}, column.style), { gridColumn: columnIndex + 1, gridRow: rowIndex + 1 }), className: column.className }, value));
         }
         return typeof value === 'string' ? value : React.cloneElement(value, { key: columnName });
     });

package/src/components/StylePreview.js

@@ -5,8 +5,9 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
+const join_1 = tslib_1.__importDefault(require("./utils/join"));
 const StylePreview = (props) => {
     var _a, _b, _c;
-    return (React.createElement(rebass_1.Box, Object.assign({}, props, { padding: (_a = props.padding) !== null && _a !== void 0 ? _a : 2, mt: (_b = props.mt) !== null && _b !== void 0 ? _b : 2, style: Object.assign(Object.assign({}, (0, StyleHelper_1.toStyle)(props.styleObject)), props.style) }), (_c = props.children) !== null && _c !== void 0 ? _c : 'Preview result'));
+    return (React.createElement(rebass_1.Box, Object.assign({}, props, { className: (0, join_1.default)('ab-StylePreview', props.className), padding: (_a = props.padding) !== null && _a !== void 0 ? _a : 2, mt: (_b = props.mt) !== null && _b !== void 0 ? _b : 2, style: Object.assign(Object.assign({}, (0, StyleHelper_1.toStyle)(props.styleObject)), props.style) }), (_c = props.children) !== null && _c !== void 0 ? _c : 'Preview result'));
 };
 exports.StylePreview = StylePreview;

package/src/metamodel/adaptable.metamodel.d.ts

@@ -4728,6 +4728,13 @@ export declare const ADAPTABLE_METAMODEL: {
             uiLabel: string;
             isOptional: boolean;
             reference?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            isOptional?: undefined;
+            reference?: undefined;
         } | {
             name: string;
             kind: string;