@adaptabletools/adaptable 15.4.3 → 16.0.0-canary.1

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -60,6 +60,7 @@ exports.ReactAdaptableDateEditor = (0, react_1.forwardRef)((props, ref) => {
                             Pattern,
                         });
                     } });
+                // @ts-ignore it will be fixed with https://github.com/AdaptableTools/adaptable/issues/2230
                 valueRef.current = valueParser(params);
             }
             else {
@@ -159,6 +160,7 @@ class AdaptableDateEditor {
                                 Pattern,
                             });
                         } });
+                    // @ts-ignore it will be fixed with https://github.com/AdaptableTools/adaptable/issues/2230
                     this.value = this.valueParser(params);
                 }
                 else {

package/src/agGrid/editors/AdaptableNumberEditor/index.js

@@ -19,8 +19,8 @@ function getStartValue(params) {
     if (shouldClearExistingValue(params)) {
         return '';
     }
-    if (params.charPress && isValidChar(params.charPress)) {
-        return params.charPress;
+    if (params.eventKey && isValidChar(params.eventKey)) {
+        return params.eventKey;
     }
     return params.value;
 }

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -18,9 +18,12 @@ function AdaptableFormComponentButtons({ formDef, onClick, defaultTone, disabled
             height: 15,
             width: 15,
         });
-        let buttonStyle = api.internalApi.getStyleForButton(button, context ? context : { adaptableApi: api });
-        let buttonLabel = api.internalApi.getLabelForButton(button, context ? context : { adaptableApi: api });
-        let buttonTooltip = api.internalApi.getTooltipForButton(button, context ? context : { adaptableApi: api });
+        let buttonStyle = api.internalApi.getStyleForButton(button, context ? context : { adaptableApi: api, userName: this.getOptions().userName,
+            adaptableId: this.getOptions().adaptableId, });
+        let buttonLabel = api.internalApi.getLabelForButton(button, context ? context : { adaptableApi: api, userName: this.getOptions().userName,
+            adaptableId: this.getOptions().adaptableId, });
+        let buttonTooltip = api.internalApi.getTooltipForButton(button, context ? context : { adaptableApi: api, userName: this.getOptions().userName,
+            adaptableId: this.getOptions().adaptableId, });
         return (React.createElement(SimpleButton_1.default, { autoFocus: focusFirstButton && index === 0, disabled: disabledButtons[index], key: index, tooltip: buttonTooltip, icon: buttonIcon, tone: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _a !== void 0 ? _a : defaultTone, variant: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant, "data-text": buttonLabel, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, marginLeft: index ? 2 : 0, onClick: () => {
                 onClick(button);
             } }, buttonLabel));

package/src/components/AdaptableIconComponent/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isAdaptableIcon = exports.isAdaptableElementIcon = exports.isAdaptableExternalIcon = exports.isAdaptableInternalIcon = exports.AdaptableIconComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const icons_1 = require("../icons");
+const icons_1 = tslib_1.__importStar(require("../icons"));
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const react_1 = require("react");
 const AdaptableIconComponent = (props) => {
@@ -26,6 +26,9 @@ const AdaptableIconComponent = (props) => {
             }
             else {
                 htmlElement = icon.element;
+                // THe element neets to be cloned.
+                // when it is used in more than one plce the element is removed from the DOM
+                htmlElement = htmlElement.cloneNode(true);
             }
             divRef.current.insertAdjacentElement('afterend', htmlElement);
         }
@@ -35,8 +38,8 @@ const AdaptableIconComponent = (props) => {
             }
         };
     }, [icon]);
-    if ((0, exports.isAdaptableInternalIcon)(icon)) {
-        return React.createElement(icons_1.Icon, { name: icon.name, size: icon.size, style: icon.style, className: className });
+    if ((0, exports.isAdaptableInternalIcon)(icon) && icon.name in icons_1.default) {
+        return (React.createElement(icons_1.Icon, { name: icon.name, size: icon.size, style: icon.style, className: className }));
     }
     if ((0, exports.isAdaptableExternalIcon)(icon)) {
         let width = (_b = (_a = icon.style) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 'var(--ab-cmp-icon__width)';

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -195,6 +195,8 @@ function BaseEditorInput(props) {
                 // we need a fully-fledged rowNode as Adaptable accesses internal methods of it
                 node: testRowNode,
                 adaptableApi: props.api,
+                userName: props.api.optionsApi.getUserName(),
+                adaptableId: props.api.optionsApi.getAdaptableId(),
                 functions: expressionFunctions,
                 evaluateCustomQueryVariable: props.api.internalApi.getQueryLanguageService().evaluateCustomQueryVariable,
             });

package/src/components/ExpressionEditor/index.js

@@ -112,7 +112,7 @@ function ExpressionEditor(props) {
                     padding: 5,
                 } }, showColumnIds
                 ? namedQuery.BooleanExpression
-                : props.api.queryLanguageApi.getAdaptableQueryExpressionWithColumnFriendlyNames(namedQuery)))))));
+                : props.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(namedQuery)))))));
     const showDocumentationLinks = props.api.internalApi.isDocumentationLinksDisplayed();
     const queryDocumentationLink = queryDocumentationLinks[type];
     return (React.createElement(EditorContext_1.ExpressionEditorContext.Provider, { value: {

package/src/components/IconSelector/IconSelector.d.ts

@@ -1,5 +1,7 @@
 import { FunctionComponent } from 'react';
+import { UserInterfaceOptions } from '../../types';
 export interface IconSelectorProps {
+    customIcons?: UserInterfaceOptions['customIcons'];
     value?: string;
     onChange: (iconName: string) => void;
     clearable?: boolean;

package/src/components/IconSelector/IconSelector.js

@@ -5,11 +5,15 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const rebass_1 = require("rebass");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
+const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
 const icons_1 = tslib_1.__importStar(require("../icons"));
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+const IconButton = (props) => {
+    return (react_1.default.createElement(SimpleButton_1.default, { onClick: () => props.onClick(), p: 2, variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon }, props.children));
+};
 const IconSelector = (props) => {
-    var _a;
+    var _a, _b, _c;
     const [query, setQuery] = react_1.default.useState('');
     const allIcons = Object.keys(icons_1.default);
     const filteredIcons = query
@@ -17,23 +21,35 @@ const IconSelector = (props) => {
             return iconName.toLowerCase().includes(query.toLowerCase());
         })
         : allIcons;
-    let iconsElements = filteredIcons.map((iconName) => {
+    const iconsElements = filteredIcons.map((iconName) => {
         return (react_1.default.createElement(rebass_1.Flex, { key: iconName },
-            react_1.default.createElement(SimpleButton_1.default, { onClick: () => props.onChange(iconName), p: 2, variant: iconName === props.value ? 'raised' : 'text', tone: iconName === props.value ? 'accent' : 'none', icon: iconName })));
+            react_1.default.createElement(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName })));
+    });
+    const customIconsElements = (_a = props.customIcons) === null || _a === void 0 ? void 0 : _a.map((def) => {
+        return (react_1.default.createElement(IconButton, { key: def.name, active: false, onClick: () => props.onChange(def.name) },
+            react_1.default.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { key: def.name, icon: def.icon })));
     });
     const popup = (react_1.default.createElement(rebass_1.Box, { className: "ab-IconSelector__Popup" },
         react_1.default.createElement(rebass_1.Box, { mb: 2 },
             react_1.default.createElement(rebass_1.Box, { mb: 2, fontSize: 4 }, "Select an Icon"),
             react_1.default.createElement(AdaptableInput_1.default, { value: query, onChange: (event) => { var _a; return setQuery((_a = event.target.value) !== null && _a !== void 0 ? _a : ''); }, width: "100%" })),
-        react_1.default.createElement(rebass_1.Flex, { p: 2, style: { width: 300, maxHeight: 300, overflow: 'auto' }, flexWrap: "wrap" }, iconsElements)));
+        react_1.default.createElement(rebass_1.Flex, { p: 2, style: { width: 300, maxHeight: 300, overflow: 'auto' }, flexWrap: "wrap" },
+            iconsElements,
+            " ",
+            customIconsElements)));
     let value = 'No Icon Selected';
     if (props.value in icons_1.default) {
         value = (react_1.default.createElement(icons_1.Icon, { style: { display: 'inline-block' }, name: props.value }));
     }
+    else {
+        const icon = (_b = props.customIcons) === null || _b === void 0 ? void 0 : _b.find((def) => def.name === props.value);
+        if (icon)
+            value = react_1.default.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: icon.icon });
+    }
     return (react_1.default.createElement(rebass_1.Flex, { className: "ab-IconSelector" },
         react_1.default.createElement(OverlayTrigger_1.default, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300 },
             react_1.default.createElement(SimpleButton_1.default, { className: "ab-IconSelector__trigger", textAlign: "center", onClick: () => null, variant: "raised", width: 150, justifyContent: "center" }, value)),
-        ((_a = props.clearable) !== null && _a !== void 0 ? _a : true) && (react_1.default.createElement(SimpleButton_1.default, { disabled: !props.value, className: "ab-IconSelector__clear-button", ml: 2, onClick: (event) => {
+        ((_c = props.clearable) !== null && _c !== void 0 ? _c : true) && (react_1.default.createElement(SimpleButton_1.default, { disabled: !props.value, className: "ab-IconSelector__clear-button", ml: 2, onClick: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
                 props.onChange('');

package/src/components/Input/NumberInput.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { InputProps } from './index';
+export declare type NumberInputProps = {
+    onChange: (value: number) => void;
+} & Omit<InputProps, 'onChange'>;
+/**
+ * This component allows - and empty values as intermediery values
+ * it calls change only with valid numeric values
+ */
+export declare const NumberInput: React.FunctionComponent<NumberInputProps>;

package/src/components/Input/NumberInput.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberInput = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const index_1 = tslib_1.__importDefault(require("./index"));
+/**
+ * This component allows - and empty values as intermediery values
+ * it calls change only with valid numeric values
+ */
+const NumberInput = (props) => {
+    const [value, setValue] = React.useState(() => {
+        var _a;
+        // awlays controlled
+        return (_a = props.value) !== null && _a !== void 0 ? _a : '';
+    });
+    const handleChange = React.useCallback((event) => {
+        const { value } = event.target;
+        let newVal = Number(value);
+        if (value === '-' || value === '') {
+            // we are saving invalid values so we allow values as empty string and '-'
+            // there is a validation that prevents the
+            newVal = value;
+            // the value may be empty or negative
+            setValue(value);
+        }
+        else if (!isNaN(newVal)) {
+            setValue(value);
+            // only set when a valid numer
+            props.onChange(newVal);
+        }
+    }, []);
+    React.useEffect(() => {
+        setValue(props.value);
+    }, [props.value]);
+    const handleBlur = React.useCallback((event) => {
+        var _a;
+        (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        // show the prop value
+        if (value !== props.value) {
+            setValue(props.value);
+        }
+    }, [props.value, value]);
+    return React.createElement(index_1.default, Object.assign({}, props, { value: value, onBlur: handleBlur, onChange: handleChange }));
+};
+exports.NumberInput = NumberInput;