@adaptabletools/adaptable 17.0.0-canary.3 → 17.0.0-canary.5

package/src/View/Components/StyleComponent.js

@@ -1,21 +1,25 @@
-import * as React from 'react';
-import { Box, Flex, Text } from 'rebass';
-import { CheckBox } from '../../components/CheckBox';
-import { ColorPicker } from '../../components/ColorPicker';
-import FormLayout, { FormRow } from '../../components/FormLayout';
-import HelpBlock from '../../components/HelpBlock';
-import Panel from '../../components/Panel';
-import Radio from '../../components/Radio';
-import { Select } from '../../components/Select';
-import { StylePreview } from '../../components/StylePreview';
-import { Toggle } from '../../components/Toggle/Toggle';
-import { ToggleGroup } from '../../components/Toggle/ToggleGroup';
-import { FontSize, FontStyle, FontWeight } from '../../PredefinedConfig/Common/Enums';
-import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
-import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
-import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
-import AdaptableInput from './AdaptableInput';
-export class StyleComponent extends React.Component {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../components/CheckBox");
+const ColorPicker_1 = require("../../components/ColorPicker");
+const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
+const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const Select_1 = require("../../components/Select");
+const StylePreview_1 = require("../../components/StylePreview");
+const Toggle_1 = require("../../components/Toggle/Toggle");
+const ToggleGroup_1 = require("../../components/Toggle/ToggleGroup");
+const Enums_1 = require("../../PredefinedConfig/Common/Enums");
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
+const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
+const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
+const AdaptableInput_1 = tslib_1.__importDefault(require("./AdaptableInput"));
+class StyleComponent extends React.Component {
     constructor(props) {
         super(props);
         this.onShowClassNameChanged = (checked) => {
@@ -34,7 +38,7 @@ export class StyleComponent extends React.Component {
         };
         this.state = {
             componentStyle: this.props.Style,
-            ShowClassName: StringExtensions.IsNotNullOrEmpty(this.props.Style.ClassName),
+            ShowClassName: StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.Style.ClassName),
         };
     }
     static getDerivedStateFromProps(nextProps, prevState) {
@@ -44,7 +48,7 @@ export class StyleComponent extends React.Component {
     }
     render() {
         var _a, _b;
-        const Cmp = this.props.headless ? Box : Panel;
+        const Cmp = this.props.headless ? rebass_1.Box : Panel_1.default;
         const cmpProps = this.props.headless
             ? {}
             : {
@@ -56,73 +60,73 @@ export class StyleComponent extends React.Component {
         const colourSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('Colour');
         const coloursSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('colours');
         let fontSizes = ['Default'];
-        fontSizes.push(...EnumExtensions.getNames(FontSize));
+        fontSizes.push(...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize));
         return (React.createElement(Cmp, Object.assign({}, cmpProps, { className: "ab-StyleComponent" }),
-            ArrayExtensions.IsNotNullOrEmpty(styleClassNames) && (React.createElement(Flex, { flexDirection: "row", padding: 2 },
-                React.createElement(Radio, { "data-name": "show-class-name", value: "classname", checked: this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(true) }, "Use Style Class Name"),
+            ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) && (React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2 },
+                React.createElement(Radio_1.default, { "data-name": "show-class-name", value: "classname", checked: this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(true) }, "Use Style Class Name"),
                 ' ',
-                React.createElement(Radio, { "data-name": "create-style", marginLeft: 3, value: "expression", checked: !this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(false) }, "Create Style"),
+                React.createElement(Radio_1.default, { "data-name": "create-style", marginLeft: 3, value: "expression", checked: !this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(false) }, "Create Style"),
                 ' ')),
             this.state.ShowClassName ? (React.createElement("div", null,
-                React.createElement(HelpBlock, { fontSize: 2 }, 'Select a CSS Class Name'),
-                React.createElement(Box, { style: { maxWidth: '15rem' }, m: 3 },
-                    React.createElement(Select, { options: ArrayExtensions.IsNullOrEmpty(styleClassNames)
+                React.createElement(HelpBlock_1.default, { fontSize: 2 }, 'Select a CSS Class Name'),
+                React.createElement(rebass_1.Box, { style: { maxWidth: '15rem' }, m: 3 },
+                    React.createElement(Select_1.Select, { options: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames)
                             ? []
                             : styleClassNames.map((item) => ({
                                 label: item,
                                 value: item,
                             })), value: this.state.componentStyle.ClassName, onChange: (value) => this.onStyleClassNameChanged(value) })),
-                React.createElement(Text, { color: 'var(--ab-color-warn)', style: { flex: 2 }, margin: 2 }, 'Please ensure that the styles listed are in the current stylesheet'))) : (React.createElement(Flex, { flexDirection: "column" },
-                React.createElement(Flex, { flex: 1 },
+                React.createElement(rebass_1.Text, { color: 'var(--ab-color-warn)', style: { flex: 2 }, margin: 2 }, 'Please ensure that the styles listed are in the current stylesheet'))) : (React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                React.createElement(rebass_1.Flex, { flex: 1 },
                     React.createElement("div", null,
-                        React.createElement(HelpBlock, { fontSize: 2, marginTop: 2, marginBottom: 2 },
+                        React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 },
                             "Set ",
                             coloursSpellingVariant,
                             " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
                             coloursSpellingVariant),
-                        React.createElement(FormLayout, { columns: [1, 2] },
-                            React.createElement(FormRow, null,
-                                React.createElement(CheckBox, { "data-name": "set-background-color", value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
+                        React.createElement(FormLayout_1.default, { columns: [1, 2] },
+                            React.createElement(FormLayout_1.FormRow, null,
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
                                     "Back ",
                                     colourSpellingVariant),
-                                this.state.componentStyle.BackColor != null ? (React.createElement(ColorPicker, { api: this.props.api, value: this.state.componentStyle.BackColor, onChange: (x) => this.onBackColorSelectChange(x) })) : (React.createElement("span", null))),
-                            React.createElement(FormRow, null,
-                                React.createElement(CheckBox, { "data-name": "set-foreground-color", margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
+                                this.state.componentStyle.BackColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BackColor, onChange: (x) => this.onBackColorSelectChange(x) })) : (React.createElement("span", null))),
+                            React.createElement(FormLayout_1.FormRow, null,
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
                                     "Fore ",
                                     colourSpellingVariant),
-                                this.state.componentStyle.ForeColor != null ? (React.createElement(ColorPicker, { api: this.props.api, value: this.state.componentStyle.ForeColor, onChange: (x) => this.onForeColorSelectChange(x) })) : (React.createElement("span", null))),
-                            React.createElement(FormRow, null,
-                                React.createElement(CheckBox, { "data-name": "set-border-color", margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
+                                this.state.componentStyle.ForeColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.ForeColor, onChange: (x) => this.onForeColorSelectChange(x) })) : (React.createElement("span", null))),
+                            React.createElement(FormLayout_1.FormRow, null,
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-border-color", margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
                                     "Border ",
                                     colourSpellingVariant),
-                                this.state.componentStyle.BorderColor != null ? (React.createElement(ColorPicker, { api: this.props.api, value: this.state.componentStyle.BorderColor, onChange: (x) => this.onBorderColorSelectChange(x) })) : (React.createElement("span", null)))),
-                        React.createElement(HelpBlock, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set the font properties of the Style"),
-                        React.createElement(FormLayout, null,
-                            React.createElement(FormRow, { label: "Font Style" },
-                                React.createElement(ToggleGroup, null,
-                                    React.createElement(Toggle, { pressed: this.state.componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => this.onFontStyleChange(checked), icon: "italic" }),
-                                    React.createElement(Toggle, { pressed: this.state.componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => this.onFontWeightChange(checked), icon: "bold" }))),
-                            React.createElement(FormRow, { label: "Text Decoration" },
-                                React.createElement(ToggleGroup, null,
-                                    React.createElement(Toggle, { icon: "underline", pressed: this.state.componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Underline' : 'None') }),
-                                    React.createElement(Toggle, { icon: "strikethrough", pressed: this.state.componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
-                                    React.createElement(Toggle, { icon: "overline", pressed: this.state.componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Overline' : 'None') }))),
-                            React.createElement(FormRow, { label: "Font Size" }, !this.props.showFontSizeAs || this.props.showFontSizeAs === 'dropdown' ? (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
-                                React.createElement(Select, { placeholder: "Default", options: [
+                                this.state.componentStyle.BorderColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BorderColor, onChange: (x) => this.onBorderColorSelectChange(x) })) : (React.createElement("span", null)))),
+                        React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set the font properties of the Style"),
+                        React.createElement(FormLayout_1.default, null,
+                            React.createElement(FormLayout_1.FormRow, { label: "Font Style" },
+                                React.createElement(ToggleGroup_1.ToggleGroup, null,
+                                    React.createElement(Toggle_1.Toggle, { pressed: this.state.componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => this.onFontStyleChange(checked), icon: "italic" }),
+                                    React.createElement(Toggle_1.Toggle, { pressed: this.state.componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => this.onFontWeightChange(checked), icon: "bold" }))),
+                            React.createElement(FormLayout_1.FormRow, { label: "Text Decoration" },
+                                React.createElement(ToggleGroup_1.ToggleGroup, null,
+                                    React.createElement(Toggle_1.Toggle, { icon: "underline", pressed: this.state.componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Underline' : 'None') }),
+                                    React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: this.state.componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
+                                    React.createElement(Toggle_1.Toggle, { icon: "overline", pressed: this.state.componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Overline' : 'None') }))),
+                            React.createElement(FormLayout_1.FormRow, { label: "Font Size" }, !this.props.showFontSizeAs || this.props.showFontSizeAs === 'dropdown' ? (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
+                                React.createElement(Select_1.Select, { placeholder: "Default", options: [
                                         {
                                             label: 'Default',
                                             value: '',
                                         },
-                                        ...EnumExtensions.getNames(FontSize).map((enumName) => ({
+                                        ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
                                             label: enumName,
                                             value: enumName,
                                         })),
-                                    ], value: (_b = (_a = this.state.componentStyle.FontSize) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '', onChange: (value) => this.onFontSizeChange(value) }))) : (React.createElement(Box, null, fontSizes.map((enumName) => {
-                                return (React.createElement(Radio, { onClick: () => this.onFontSizeChange(enumName), checked: (enumName == 'Default' && !this.state.componentStyle.FontSize) ||
+                                    ], value: (_b = (_a = this.state.componentStyle.FontSize) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '', onChange: (value) => this.onFontSizeChange(value) }))) : (React.createElement(rebass_1.Box, null, fontSizes.map((enumName) => {
+                                return (React.createElement(Radio_1.default, { onClick: () => this.onFontSizeChange(enumName), checked: (enumName == 'Default' && !this.state.componentStyle.FontSize) ||
                                         this.state.componentStyle.FontSize === enumName, mr: 3, key: enumName }, enumName));
                             })))),
-                            React.createElement(FormRow, { label: "Border Radius" },
-                                React.createElement(AdaptableInput, { width: "100px", type: "number", min: "0", value: this.state.componentStyle.BorderRadius, onChange: (event) => {
+                            React.createElement(FormLayout_1.FormRow, { label: "Border Radius" },
+                                React.createElement(AdaptableInput_1.default, { width: "100px", type: "number", min: "0", value: this.state.componentStyle.BorderRadius, onChange: (event) => {
                                         const number = Number(event.target.value);
                                         if (isNaN(number)) {
                                             this.onBorderRadiusChange(0);
@@ -131,9 +135,9 @@ export class StyleComponent extends React.Component {
                                             this.onBorderRadiusChange(number);
                                         }
                                     } }))))))),
-            !this.props.hidePreview && (React.createElement(Box, null,
-                React.createElement(HelpBlock, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Preview"),
-                React.createElement(StylePreview, { styleObject: this.state.componentStyle })))));
+            !this.props.hidePreview && (React.createElement(rebass_1.Box, null,
+                React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Preview"),
+                React.createElement(StylePreview_1.StylePreview, { styleObject: this.state.componentStyle })))));
     }
     onStyleClassNameChanged(value) {
         this.state.componentStyle.ClassName = value == 'select' ? '' : value;
@@ -168,7 +172,7 @@ export class StyleComponent extends React.Component {
     }
     onUseFontSizeCheckChange(checked) {
         if (checked) {
-            this.state.componentStyle.FontSize = FontSize.Medium;
+            this.state.componentStyle.FontSize = Enums_1.FontSize.Medium;
         }
         else {
             delete this.state.componentStyle.FontSize;
@@ -189,7 +193,7 @@ export class StyleComponent extends React.Component {
     }
     onFontWeightChange(checked) {
         if (checked) {
-            this.state.componentStyle.FontWeight = FontWeight.Bold;
+            this.state.componentStyle.FontWeight = Enums_1.FontWeight.Bold;
         }
         else {
             delete this.state.componentStyle.FontWeight;
@@ -198,7 +202,7 @@ export class StyleComponent extends React.Component {
     }
     onFontStyleChange(checked) {
         if (checked) {
-            this.state.componentStyle.FontStyle = FontStyle.Italic;
+            this.state.componentStyle.FontStyle = Enums_1.FontStyle.Italic;
         }
         else {
             delete this.state.componentStyle.FontStyle;
@@ -227,3 +231,4 @@ export class StyleComponent extends React.Component {
         this.props.UpdateStyle(this.state.componentStyle);
     }
 }
+exports.StyleComponent = StyleComponent;

package/src/View/Components/StyleVisualItem.js

@@ -1,14 +1,18 @@
-import * as React from 'react';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleVisualItem = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
 /// <reference path="../../typings/.d.ts" />
-import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
-import { FontWeight, FontStyle } from '../../PredefinedConfig/Common/Enums';
-import StringExtensions from '../../Utilities/Extensions/StringExtensions';
-export class StyleVisualItem extends React.Component {
+const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
+const Enums_1 = require("../../PredefinedConfig/Common/Enums");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
+class StyleVisualItem extends React.Component {
     render() {
         if (!this.props.Style) {
             return null;
         }
-        let styleText = StringExtensions.IsNotNullOrEmpty(this.props.Text)
+        let styleText = StringExtensions_1.default.IsNotNullOrEmpty(this.props.Text)
             ? this.props.Text
             : 'Style';
         let styleVisualisation;
@@ -19,9 +23,9 @@ export class StyleVisualItem extends React.Component {
             let backColorForStyle = this.props.Style.BackColor != undefined ? this.props.Style.BackColor : null;
             let foreColorForStyle = this.props.Style.ForeColor != undefined ? this.props.Style.ForeColor : 'black';
             let borderColorForStyle = this.props.Style.BorderColor != undefined ? this.props.Style.BorderColor : null;
-            let fontWeightForStyle = this.props.Style.FontWeight == FontWeight.Bold ? 'bold' : 'normal';
-            let fontStyleForStyle = this.props.Style.FontStyle == FontStyle.Italic ? 'italic' : 'normal';
-            let fontSizeForStyle = EnumExtensions.getCssFontSizeFromFontSizeEnum(this.props.Style.FontSize);
+            let fontWeightForStyle = this.props.Style.FontWeight == Enums_1.FontWeight.Bold ? 'bold' : 'normal';
+            let fontStyleForStyle = this.props.Style.FontStyle == Enums_1.FontStyle.Italic ? 'italic' : 'normal';
+            let fontSizeForStyle = EnumExtensions_1.EnumExtensions.getCssFontSizeFromFontSizeEnum(this.props.Style.FontSize);
             styleVisualisation = (React.createElement("div", { className: this.props.Style.BackColor != undefined ? '' : 'ab_white_grey_stripes', style: {
                     textAlign: 'center',
                     margin: '2px',
@@ -38,3 +42,4 @@ export class StyleVisualItem extends React.Component {
         return styleVisualisation;
     }
 }
+exports.StyleVisualItem = StyleVisualItem;

package/src/View/Components/TagValueSelector/index.js

@@ -1,19 +1,25 @@
-import * as React from 'react';
-import { ValueOptionsTags, ValueSelector } from '../ValueSelector';
-import { useAdaptable } from '../../AdaptableContext';
-export const TagValueSelector = (props) => {
-    const { api } = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagValueOptionsTags = exports.TagValueSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ValueSelector_1 = require("../ValueSelector");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const TagValueSelector = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
     const getDefaultTags = () => {
         var _a;
         return (_a = api.internalApi.getAvailableTags()) !== null && _a !== void 0 ? _a : [];
     };
     const { availableTags = getDefaultTags(), selectedTags = [], onChange, singleSelect } = props;
-    return (React.createElement(ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
+    return (React.createElement(ValueSelector_1.ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
             onChange(selectedTagsIds.map((id) => selectedTagsMap.get(id)));
         }, selectionBoxPosition: 'top', toIdentifier: (tag) => api.internalApi.getLabelForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag), noSelectionLabel: singleSelect ? 'Select a tag' : 'You have not selected any tags.', xSelectedLabel: singleSelect ? () => 'Selected tag:' : () => 'Selected tags:' }));
 };
-export const TagValueOptionsTags = (props) => {
+exports.TagValueSelector = TagValueSelector;
+const TagValueOptionsTags = (props) => {
     const { tags = [] } = props;
-    const { api } = useAdaptable();
-    return (React.createElement(ValueOptionsTags, { options: tags, value: tags.map((tag) => api.internalApi.getValueForTag(tag)), toIdentifier: (tag) => api.internalApi.getValueForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag), allowWrap: true, readOnly: true }));
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    return (React.createElement(ValueSelector_1.ValueOptionsTags, { options: tags, value: tags.map((tag) => api.internalApi.getValueForTag(tag)), toIdentifier: (tag) => api.internalApi.getValueForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag), allowWrap: true, readOnly: true }));
 };
+exports.TagValueOptionsTags = TagValueOptionsTags;

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -1,26 +1,30 @@
-import * as React from 'react';
-import kebabCase from 'lodash/kebabCase';
-import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
-import * as SystemRedux from '../../../Redux/ActionsReducers/SystemRedux';
-import { connect } from 'react-redux';
-import { Flex } from 'rebass';
-import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
-import { Icon } from '../../../components/icons';
-import { CheckBox } from '../../../components/CheckBox';
-import DropdownButton from '../../../components/DropdownButton';
-import { ALL_TOOL_PANELS, } from '../../../PredefinedConfig/Common/Types';
-import SimpleButton from '../../../components/SimpleButton';
-import { ButtonConfigure } from '../Buttons/ButtonConfigure';
-import { renderWithAdaptableContext } from '../../renderWithAdaptableContext';
-import { ToolPanelWrapper } from './ToolPanelWrapper';
-import { ToolPanelConfigView } from './ToolPanelPopup';
-import { createUuid } from '../../../components/utils/uuid';
-import { ToolPanelModuleId } from '../../../Utilities/Constants/ModuleConstants';
-import HelpBlock from '../../../components/HelpBlock';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAdaptableToolPanelAgGridComponent = exports.ConnectedAdaptableToolPanel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
+const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
+const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
+const icons_1 = require("../../../components/icons");
+const CheckBox_1 = require("../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const Types_1 = require("../../../PredefinedConfig/Common/Types");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const ButtonConfigure_1 = require("../Buttons/ButtonConfigure");
+const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext");
+const ToolPanelWrapper_1 = require("./ToolPanelWrapper");
+const ToolPanelPopup_1 = require("./ToolPanelPopup");
+const uuid_1 = require("../../../components/utils/uuid");
+const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const preventDefault = (e) => e.preventDefault();
 const AdaptableToolPanelComponent = (props) => {
     var _a;
-    const toolPanelsGlyph = React.createElement(Icon, { name: 'align-justify' });
+    const toolPanelsGlyph = React.createElement(icons_1.Icon, { name: 'align-justify' });
     const entitlementService = props.api.internalApi.getEntitlementService();
     const moduleService = props.api.internalApi.getModuleService();
     const adaptableOptions = props.api.optionsApi.getAdaptableOptions();
@@ -28,7 +32,7 @@ const AdaptableToolPanelComponent = (props) => {
     const settingsPanelOptions = adaptableOptions.settingsPanelOptions;
     if (entitlementService.isModuleHiddenEntitlement('ToolPanel')) {
         // do NOT show any toolPanel content if the required entitlements are missing
-        return (React.createElement(HelpBlock, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } }, "Not enough rights"));
+        return (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } }, "Not enough rights"));
     }
     const availableModuleItems = props.MainMenuItems.filter((menuItem) => menuItem.isVisible);
     const availableModules = availableModuleItems.map((menuItem) => menuItem.module);
@@ -44,7 +48,7 @@ const AdaptableToolPanelComponent = (props) => {
         !entitlementService.isModuleHiddenEntitlement('OpenFin')) {
         availableModules.push('OpenFin');
     }
-    const availableModuleToolPanels = ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions.ContainsItem(availableModules, moduleToolPanel));
+    const availableModuleToolPanels = Types_1.ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions_1.default.ContainsItem(availableModules, moduleToolPanel));
     const onStateChange = (toolPanel, visibilityMode) => {
         if (visibilityMode === 'expanded') {
             props.onExpandToolPanel(toolPanel);
@@ -55,7 +59,7 @@ const AdaptableToolPanelComponent = (props) => {
     };
     const isToolPanelModuleConfigurable = props.api.internalApi
         .getModuleService()
-        .getModuleById(ToolPanelModuleId)
+        .getModuleById(ModuleConstants_1.ToolPanelModuleId)
         .isModuleEditable();
     const visibleToolPanels = [];
     const visibleToolPanelControls = ((_a = props.ToolPanels) !== null && _a !== void 0 ? _a : []).map((toolPanelDefinition) => {
@@ -65,14 +69,14 @@ const AdaptableToolPanelComponent = (props) => {
         const customToolPanel = props.api.toolPanelApi.getCustomToolPanelByName(toolPanelDefinition.Name);
         if (customToolPanel) {
             visibleToolPanels.push(customToolPanel.name);
-            return (React.createElement(ToolPanelWrapper, { key: customToolPanel.name, customToolPanel: customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(customToolPanel.name, state) }));
+            return (React.createElement(ToolPanelWrapper_1.ToolPanelWrapper, { key: customToolPanel.name, customToolPanel: customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(customToolPanel.name, state) }));
         }
         // 2. check if it's an available module toolPanel
         if (availableModuleToolPanels.some((module) => module === toolPanelDefinition.Name)) {
             // assertion is safe as if just checked it in the if clause
             const moduleToolPanel = toolPanelDefinition.Name;
             visibleToolPanels.push(moduleToolPanel);
-            return (React.createElement(ToolPanelWrapper, { key: moduleToolPanel, adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }));
+            return (React.createElement(ToolPanelWrapper_1.ToolPanelWrapper, { key: moduleToolPanel, adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }));
         }
     });
     const renderToolPanelDropdowns = () => {
@@ -86,7 +90,7 @@ const AdaptableToolPanelComponent = (props) => {
                     ' ',
                     "\u00A0\u00A0",
                     React.createElement("b", null, 'Tool Panels'),
-                    renderToolPanelConfigureButton(ToolPanelConfigView.ToolPanels))),
+                    renderToolPanelConfigureButton(ToolPanelPopup_1.ToolPanelConfigView.ToolPanels))),
             },
         ];
         const isItemVisible = (panelItem) => visibleToolPanels.includes(panelItem);
@@ -96,7 +100,7 @@ const AdaptableToolPanelComponent = (props) => {
                 onClick: () => {
                     onSetToolPanelVisibility(toolPanel, !isVisible);
                 },
-                label: (React.createElement(CheckBox, { className: "ab-dd-checkbox", variant: "agGrid", my: 0, as: "div", value: toolPanel, key: toolPanel, checked: isVisible, onMouseDown: preventDefault }, toolPanel)),
+                label: (React.createElement(CheckBox_1.CheckBox, { className: "ab-dd-checkbox", variant: "agGrid", my: 0, as: "div", value: toolPanel, key: toolPanel, checked: isVisible, onMouseDown: preventDefault }, toolPanel)),
             };
         };
         // 1. process custom tool panels
@@ -119,7 +123,7 @@ const AdaptableToolPanelComponent = (props) => {
             }
             return 0;
         });
-        return (React.createElement(DropdownButton, { variant: "text", tone: "none", collapseOnItemClick: false, key: 'dropdown-toolpanels', id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", columns: ['label'], items: toolpanelItems, tooltip: "Manage Tool Panels" }, toolPanelsGlyph));
+        return (React.createElement(DropdownButton_1.default, { variant: "text", tone: "none", collapseOnItemClick: false, key: 'dropdown-toolpanels', id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", columns: ['label'], items: toolpanelItems, tooltip: "Manage Tool Panels" }, toolPanelsGlyph));
     };
     const renderToolPanelButtons = () => {
         const toolPanelButtons = [];
@@ -133,7 +137,7 @@ const AdaptableToolPanelComponent = (props) => {
             toolPanelButtons.push(moduleButtons.map((x) => {
                 let menuItem = props.MainMenuItems.find((y) => y.isVisible && y.module == x);
                 if (menuItem) {
-                    return (React.createElement(SimpleButton, { "data-name": menuItem.module, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${kebabCase(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
+                    return (React.createElement(SimpleButton_1.default, { "data-name": menuItem.module, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
                 }
             }));
         }
@@ -159,8 +163,8 @@ const AdaptableToolPanelComponent = (props) => {
             const disabled = button.disabled && button.disabled(button, toolPanelContext);
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
-            const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : createUuid();
-            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
+            const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : (0, uuid_1.createUuid)();
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
         });
     };
     const onSetColumnVisibility = (name) => {
@@ -185,22 +189,22 @@ const AdaptableToolPanelComponent = (props) => {
         const moduleParams = initialTab
             ? { source: 'Other', config: { initialTab } }
             : undefined;
-        return (React.createElement(ButtonConfigure, { iconSize: 16, tone: "none", marginLeft: 2, className: "ab-ToolPanel__configure-button", tooltip: 'Configure ToolPanels', onClick: () => {
+        return (React.createElement(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, tone: "none", marginLeft: 2, className: "ab-ToolPanel__configure-button", tooltip: 'Configure ToolPanels', onClick: () => {
                 props.api.internalApi.showSettingsPanel('ToolPanel', moduleParams);
             } }));
     };
     const toolPanelButtons = renderToolPanelButtons();
-    return (React.createElement(Flex, { className: "ab-ToolPanel", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", padding: 2, style: {
+    return (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", padding: 2, style: {
             width: '100%',
             // Cannot have the with of the parent, on windows, when you have scrollbars
             // the inner-width is smaller
             // minWidth: 'var(--ab-cmp-toolpanel__width)',
         } },
-        React.createElement(Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap", style: { width: '100%' } },
+        React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap", style: { width: '100%' } },
             isToolPanelModuleConfigurable && renderToolPanelDropdowns(),
             toolPanelButtons,
             isToolPanelModuleConfigurable && renderToolPanelConfigureButton()),
-        Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (React.createElement(Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, renderCustomToolPanelButtons())),
+        Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, renderCustomToolPanelButtons())),
         visibleToolPanelControls));
 };
 function mapStateToProps(state) {
@@ -222,18 +226,18 @@ function mapDispatchToProps(dispatch) {
         onCollapseToolPanel: (toolPanel) => dispatch(ToolPanelRedux.ToolPanelCollapseToolPanel(toolPanel)),
     };
 }
-export const ConnectedAdaptableToolPanel = connect(mapStateToProps, mapDispatchToProps)(AdaptableToolPanelComponent);
+exports.ConnectedAdaptableToolPanel = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(AdaptableToolPanelComponent);
 const toolPanelContainerStyle = {
     width: '100%',
     overflow: 'auto',
 };
-export const getAdaptableToolPanelAgGridComponent = (adaptable) => {
+const getAdaptableToolPanelAgGridComponent = (adaptable) => {
     function getContainerId() {
         return 'adaptable-tool-panel_' + adaptable.adaptableOptions.adaptableId;
     }
     if (adaptable.variant === 'react') {
         return () => {
-            const content = renderWithAdaptableContext(React.createElement(ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
+            const content = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
             return (React.createElement("div", { id: getContainerId(), className: 'ag-adaptable-panel', style: toolPanelContainerStyle }, content));
         };
     }
@@ -248,7 +252,7 @@ export const getAdaptableToolPanelAgGridComponent = (adaptable) => {
                 //@ts-ignore
                 this.gui.style[key] = toolPanelContainerStyle[key];
             });
-            this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
+            this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
         }
         getGui() {
             if (!this.gui) {
@@ -265,3 +269,4 @@ export const getAdaptableToolPanelAgGridComponent = (adaptable) => {
         }
     };
 };
+exports.getAdaptableToolPanelAgGridComponent = getAdaptableToolPanelAgGridComponent;

package/src/View/Components/ToolPanel/CustomToolPanelContent.js

@@ -1,18 +1,22 @@
-import * as React from 'react';
-import { useLayoutEffect, useRef, useState } from 'react';
-import { useAdaptable } from '../../AdaptableContext';
-import { createUuid } from '../../../components/utils/uuid';
-import SimpleButton from '../../../components/SimpleButton';
-import kebabCase from 'lodash/kebabCase';
-export const CustomToolPanelContent = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomToolPanelContent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const uuid_1 = require("../../../components/utils/uuid");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
+const CustomToolPanelContent = (props) => {
     var _a;
     const { customToolPanel } = props;
-    const { api } = useAdaptable();
-    const contentsDivDomRef = useRef();
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const contentsDivDomRef = (0, react_1.useRef)();
     const contentsDivId = `ab-ToolPanel__${customToolPanel.name}__contents`;
     const buttonsDivId = `ab-ToolPanel__${customToolPanel.name}__buttons`;
-    const [contentsHTML, setContentsHTML] = useState('');
-    useLayoutEffect(() => {
+    const [contentsHTML, setContentsHTML] = (0, react_1.useState)('');
+    (0, react_1.useLayoutEffect)(() => {
         const element = contentsDivDomRef.current;
         if (hasCustomRenderFn(customToolPanel)) {
             const customRenderContext = {
@@ -65,9 +69,10 @@ export const CustomToolPanelContent = (props) => {
             const disabled = button.disabled && button.disabled(button, toolPanelContext);
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
-            const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : createUuid();
-            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
+            const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : (0, uuid_1.createUuid)();
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
         })))));
 };
+exports.CustomToolPanelContent = CustomToolPanelContent;
 const hasCustomRenderFn = (customToolPanel) => customToolPanel.render;
 const hasCustomFrameworkComponent = (customToolPanel) => customToolPanel.frameworkComponent;