@adaptabletools/adaptable 15.4.3 → 16.0.0-canary.0

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;