@adaptabletools/adaptable 16.0.7 → 16.0.8-canary.0

package/src/agGrid/BadgeRenderer.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getBadgeRendererForColumn = void 0;
+const tslib_1 = require("tslib");
 const Badge_1 = require("../View/Components/Badge");
 const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
+const React = tslib_1.__importStar(require("react"));
 const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
     if (!styledColumn.BadgeStyle) {
         return;
@@ -13,11 +15,58 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
             return adaptable;
         }
         init(params) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             const adaptable = this.getAdaptableInstance(params);
             const adapatableApi = adaptable.api;
             this.eGui = document.createElement('div');
             this.eGui.className = 'ab-Badge__wrapper';
+            const includeGrouped = Boolean(styledColumn.IncludeGroupedRows);
+            const isGrouped = params.node.group;
+            if ((includeGrouped === false && isGrouped)) {
+                const formattedValue = (_c = (_b = (_a = params.formatValue) === null || _a === void 0 ? void 0 : _a.call(params, params.value)) !== null && _b !== void 0 ? _b : params.value) !== null && _c !== void 0 ? _c : '';
+                this.eGui.innerHTML = formattedValue;
+                return;
+            }
+            if (['NumberArray', 'StringArray'].includes(abColumn.dataType)) {
+                this.renderArrayValues(params, adapatableApi);
+            }
+            else {
+                this.renderSingularValues(params, adapatableApi);
+            }
+        }
+        renderArrayValues(params, adapatableApi) {
+            var _a, _b, _c, _d, _e, _f;
+            let badgesConfig = [];
+            if (!Array.isArray(params.value) || params.value.length === 0) {
+                const formattedValue = (_c = (_b = (_a = params.formatValue) === null || _a === void 0 ? void 0 : _a.call(params, params.value)) !== null && _b !== void 0 ? _b : params.value) !== null && _c !== void 0 ? _c : '';
+                this.eGui.innerHTML = formattedValue;
+                return;
+            }
+            for (const value of params.value) {
+                const formattedValue = (_f = (_e = (_d = params.formatValue) === null || _d === void 0 ? void 0 : _d.call(params, value)) !== null && _e !== void 0 ? _e : value) !== null && _f !== void 0 ? _f : '';
+                const predicateDefHandlerContext = {
+                    value: value,
+                    oldValue: null,
+                    displayValue: params.formatValue,
+                    node: params.node,
+                    column: abColumn,
+                    adaptableApi: adapatableApi,
+                    userName: adapatableApi.optionsApi.getUserName(),
+                    adaptableId: adapatableApi.optionsApi.getAdaptableId(),
+                };
+                const badge = api.styledColumnApi.internalApi.getApplicableBadge(styledColumn, predicateDefHandlerContext);
+                const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
+                if (!isNullValue && badge) {
+                    badgesConfig.push({
+                        badge: Object.assign({}, badge),
+                        value: formattedValue,
+                    });
+                }
+            }
+            this.renderBadges(badgesConfig, api, params);
+        }
+        renderSingularValues(params, adapatableApi) {
+            var _a, _b, _c;
             const formattedValue = (_c = (_b = (_a = params.formatValue) === null || _a === void 0 ? void 0 : _a.call(params, params.value)) !== null && _b !== void 0 ? _b : params.value) !== null && _c !== void 0 ? _c : '';
             const predicateDefHandlerContext = {
                 value: params.value,
@@ -30,25 +79,34 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 adaptableId: adapatableApi.optionsApi.getAdaptableId(),
             };
             const badge = api.styledColumnApi.internalApi.getApplicableBadge(styledColumn, predicateDefHandlerContext);
-            const isGrouped = params.node.group;
-            const includeGrouped = Boolean(styledColumn.IncludeGroupedRows);
             const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
             if (
-            // grouped but do not incluide
-            (includeGrouped === false && isGrouped) ||
-                // empty values
-                isNullValue ||
+            // empty values
+            isNullValue ||
                 // no badge
                 !badge) {
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
-            this.unmountReactRoot = api.internalApi.getAdaptableInstance().renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)((0, Badge_1.Badge)({
-                adaptableStyle: badge.Style,
-                children: formattedValue,
-                icon: badge.Icon,
-                iconPosition: (_d = badge.IconPosition) !== null && _d !== void 0 ? _d : 'start',
-            }), adaptable), this.eGui);
+            this.renderBadges([{
+                    badge,
+                    value: formattedValue,
+                }], api, params);
+        }
+        renderBadges(config, api, params) {
+            const adaptable = this.getAdaptableInstance(params);
+            const badges = config.map(({ badge, value }, index) => {
+                var _a;
+                return React.createElement(Badge_1.Badge, {
+                    key: index,
+                    adaptableStyle: badge.Style,
+                    children: value,
+                    icon: badge.Icon,
+                    iconPosition: (_a = badge.IconPosition) !== null && _a !== void 0 ? _a : 'start',
+                    gap: 5
+                });
+            });
+            this.unmountReactRoot = api.internalApi.getAdaptableInstance().renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(React.Fragment, { children: badges }), adaptable), this.eGui);
         }
         getGui() {
             return this.eGui;

package/src/components/Icon/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isAdaptableIcon = exports.isAdaptableElementIcon = exports.isAdaptableCustomIcon = exports.isAdaptableSystemIcon = exports.IconComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const icons_1 = tslib_1.__importStar(require("../icons"));
+const icons_1 = require("../icons");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const react_1 = require("react");
 const IconComponent = (props) => {
@@ -38,7 +38,7 @@ const IconComponent = (props) => {
             }
         };
     }, [icon]);
-    if ((0, exports.isAdaptableSystemIcon)(icon) && icon.name in icons_1.default) {
+    if ((0, exports.isAdaptableSystemIcon)(icon) && icon.name in icons_1.allIcons) {
         return (React.createElement(icons_1.Icon, { name: icon.name, size: icon.size, style: icon.style, className: className }));
     }
     if ((0, exports.isAdaptableCustomIcon)(icon)) {
@@ -68,6 +68,6 @@ const isAdaptableElementIcon = (icon) => {
 };
 exports.isAdaptableElementIcon = isAdaptableElementIcon;
 const isAdaptableIcon = (icon) => {
-    return ((0, exports.isAdaptableSystemIcon)(icon) || (0, exports.isAdaptableCustomIcon)(icon) || (0, exports.isAdaptableElementIcon)(icon));
+    return (0, exports.isAdaptableSystemIcon)(icon) || (0, exports.isAdaptableCustomIcon)(icon) || (0, exports.isAdaptableElementIcon)(icon);
 };
 exports.isAdaptableIcon = isAdaptableIcon;

package/src/components/IconSelector/IconSelector.js

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const rebass_1 = require("rebass");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
 const Icon_1 = require("../Icon");
-const icons_1 = tslib_1.__importStar(require("../icons"));
+const icons_1 = require("../icons");
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const IconButton = (props) => {
@@ -15,12 +15,12 @@ const IconButton = (props) => {
 const IconSelector = (props) => {
     var _a, _b, _c;
     const [query, setQuery] = react_1.default.useState('');
-    const allIcons = Object.keys(icons_1.default);
+    const allIconsNames = Object.keys(icons_1.allIcons);
     const filteredIcons = query
-        ? allIcons.filter((iconName) => {
+        ? allIconsNames.filter((iconName) => {
             return iconName.toLowerCase().includes(query.toLowerCase());
         })
-        : allIcons;
+        : allIconsNames;
     const iconsElements = filteredIcons.map((iconName) => {
         return (react_1.default.createElement(rebass_1.Flex, { key: iconName },
             react_1.default.createElement(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName })));
@@ -38,7 +38,7 @@ const IconSelector = (props) => {
             " ",
             customIconsElements)));
     let value = 'No Icon Selected';
-    if (props.value in icons_1.default) {
+    if (props.value in icons_1.allIcons) {
         value = (react_1.default.createElement(icons_1.Icon, { style: { display: 'inline-block' }, name: props.value }));
     }
     else {

package/src/components/SimpleButton/index.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
-const icons_1 = tslib_1.__importDefault(require("../icons"));
+const icons_1 = require("../icons");
 const Tooltip_1 = tslib_1.__importDefault(require("../Tooltip"));
 const theme_1 = tslib_1.__importDefault(require("../../theme"));
 const Icon_1 = require("../Icon");
@@ -17,7 +17,7 @@ const SimpleButton = React.forwardRef((props, theRef) => {
     if ((0, Icon_1.isAdaptableSystemIcon)(icon)) {
         adaptableSystemIcon = icon;
     }
-    if (typeof icon === 'string' && icons_1.default[icon]) {
+    if (typeof icon === 'string' && icons_1.allIcons[icon]) {
         adaptableSystemIcon = { name: icon };
     }
     if (adaptableSystemIcon) {

package/src/components/icons/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CSSProperties } from 'react';
 import { IconProps } from './DefaultIcon';
 import { AdaptableCustomIcon, AdaptableSystemIcon, AdaptableSystemIconName } from '../../PredefinedConfig/Common/AdaptableIcon';
-declare const allIcons: Record<AdaptableSystemIconName, React.FunctionComponent<IconProps>>;
+export declare const allIcons: Record<AdaptableSystemIconName, React.FunctionComponent<IconProps>>;
 export declare const Icon: ({ name, style, className, tabIndex, ...props }: {
     style?: React.CSSProperties;
     name: AdaptableSystemIconName;
@@ -12,4 +12,3 @@ export declare const Icon: ({ name, style, className, tabIndex, ...props }: {
     props?: React.SVGProps<SVGElement>;
 }) => JSX.Element;
 export declare const iconToString: (icon: AdaptableSystemIcon | AdaptableCustomIcon, style?: CSSProperties) => string;
-export default allIcons;

package/src/components/icons/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconToString = exports.Icon = void 0;
+exports.iconToString = exports.Icon = exports.allIcons = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const ReactDOMServer = tslib_1.__importStar(require("react-dom/server"));
@@ -155,7 +155,7 @@ const order_1 = tslib_1.__importDefault(require("./order"));
 const contact_1 = tslib_1.__importDefault(require("./contact"));
 const Icon_1 = require("../Icon");
 const AdaptableLogger_1 = require("../../agGrid/AdaptableLogger");
-const allIcons = {
+exports.allIcons = {
     search: query_1.default,
     grid: layout_1.default,
     cells: cell_summary_1.default,
@@ -307,13 +307,13 @@ const allIcons = {
     order: order_1.default,
     contact: contact_1.default,
 };
-Object.keys(allIcons).forEach((name) => {
-    const ReactCmp = allIcons[name];
-    allIcons[name] = (props) => React.createElement(ReactCmp, Object.assign({}, props, { name: name }));
+Object.keys(exports.allIcons).forEach((name) => {
+    const ReactCmp = exports.allIcons[name];
+    exports.allIcons[name] = (props) => React.createElement(ReactCmp, Object.assign({}, props, { name: name }));
 });
 const Icon = (_a) => {
     var { name, style, className, tabIndex } = _a, props = tslib_1.__rest(_a, ["name", "style", "className", "tabIndex"]);
-    const IconCmp = (allIcons[name] || null);
+    const IconCmp = (exports.allIcons[name] || null);
     if (!IconCmp) {
         AdaptableLogger_1.AdaptableLogger.consoleWarnBase('NO icon found for ' + name);
         return React.createElement("svg", { height: "17", width: "17" });
@@ -328,4 +328,3 @@ const iconToString = (icon, style) => {
     return ReactDOMServer.renderToString(React.createElement(Icon_1.IconComponent, { icon: Object.assign(Object.assign({}, icon), { style: Object.assign(Object.assign({}, icon.style), style) }) }));
 };
 exports.iconToString = iconToString;
-exports.default = allIcons;