@adaptabletools/adaptable 17.0.0-canary.0 → 17.0.0-canary.10

package/src/View/Components/Selectors/ColumnValueSelector.js

@@ -1,133 +1,46 @@
-import * as React from 'react';
-import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
-import { SortOrder } from '../../../PredefinedConfig/Common/Enums';
-import { ArrayExtensions } from '../../../Utilities/Extensions/ArrayExtensions';
-import FieldWrap from '../../../components/FieldWrap';
-import DropdownButton from '../../../components/DropdownButton';
-import UIHelper from '../../UIHelper';
-import AdaptableInput from '../AdaptableInput';
-import { runIfNotResolvedIn } from '../../../Utilities/runIfNotResolvedIn';
-import join from '../../../components/utils/join';
-var NEW_OR_EXISTING;
-(function (NEW_OR_EXISTING) {
-    NEW_OR_EXISTING["existing"] = "Existing value";
-    NEW_OR_EXISTING["new"] = "New value";
-})(NEW_OR_EXISTING || (NEW_OR_EXISTING = {}));
-export class ColumnValueSelector extends React.Component {
-    constructor(props) {
-        super(props);
-        this.loadPermittedValues = async () => {
-            var _a;
-            if (!((_a = this.props.selectedColumn) === null || _a === void 0 ? void 0 : _a.columnId)) {
-                return;
-            }
-            // JW "fixed" this by replacing display values with raw values but really we should do it nicer in some way
-            // so that you we show the display value but we work on the raw value
-            const columnDisplayValuePairs = await runIfNotResolvedIn(this.props.api.gridApi.internalApi.getDistinctBulkUpdateDisplayValuesForColumn(this.props.selectedColumn.columnId, this.props.selectedGridCells), () => this.setState({ isDistinctColumnValuesLoading: true }));
-            this.setState({ isDistinctColumnValuesLoading: false });
-            const newSortedColumnValues = ArrayExtensions.sortArray(columnDisplayValuePairs, SortOrder.Asc).map((v) => ({
-                label: v,
-                value: v,
-                onClick: () => this.onSelectedValueChange([{ DisplayValue: v }]),
-            }));
-            this.setState({
-                distinctColumnValues: newSortedColumnValues,
-            });
-        };
-        this.handleSelectedValueExpand = () => {
-            // load only if not loaded
-            if (!this.state.distinctColumnValues.length) {
-                this.loadPermittedValues();
-            }
-        };
-        this.state = {
-            newOrExisting: NEW_OR_EXISTING.existing,
-            distinctColumnValues: [],
-            isDistinctColumnValuesLoading: false,
-        };
-    }
-    componentDidUpdate(prevProps) {
-        if (this.props.selectedColumn !== prevProps.selectedColumn ||
-            this.props.selectedGridCells !== prevProps.selectedGridCells) {
-            this.loadPermittedValues();
-        }
-    }
-    render() {
-        let placeholderText = 'Select';
-        let allowNew = this.props.allowNew != null ? this.props.allowNew : true;
-        if (allowNew) {
-            // placeholderText += ' or enter free text';
-        }
-        const baseClassName = 'ab-column-value-selector';
-        const className = join('ab-column-value-selector', this.state.isDistinctColumnValuesLoading && `${baseClassName}--loading`);
-        const fieldWidth = 150;
-        const items = this.state.isDistinctColumnValuesLoading
-            ? [
-                {
-                    label: 'Loading',
-                    disabled: true,
-                },
-            ]
-            : this.state.distinctColumnValues;
-        const dd = (React.createElement("div", null,
-            React.createElement(DropdownButton, { "data-name": "bulkupdate-value-selector", className: className, columns: ['label'], variant: "text", showClearButton: true, onClear: () => this.onSelectedValueChange([]), style: { fontSize: 'small' }, disabled: this.props.disabled, items: items, onExpand: this.handleSelectedValueExpand }, this.props.selectedColumnValue ? this.props.selectedColumnValue : placeholderText)));
-        const input = (React.createElement(AdaptableInput, { "data-name": "bulkupdate-value-input", type: this.props.selectedColumn
-                ? UIHelper.getDescriptionForDataType(this.props.selectedColumn.dataType)
-                : 'text', placeholder: this.props.selectedColumn
-                ? UIHelper.getPlaceHolderforDataType(this.props.selectedColumn.dataType)
-                : 'Enter Value', autoFocus: true, disabled: this.props.disabled, style: { width: fieldWidth }, value: this.props.selectedColumnValue, onChange: (e) => {
-                this.onSelectedValueChange([
-                    { customOption: true, DisplayValue: e.target.value },
-                ]);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnValueSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
+const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
+const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
+const rebass_1 = require("rebass");
+const PermittedValuesSelector_1 = require("./PermittedValuesSelector");
+const Select_1 = require("../../../components/Select");
+const ColumnValueSelector = (props) => {
+    var _a, _b;
+    const [valueType, setValueType] = React.useState('existing');
+    const columnType = (_a = props.selectedColumn) === null || _a === void 0 ? void 0 : _a.dataType;
+    const isDateType = props.selectedColumn && columnType === 'Date';
+    const permittedValueSelector = (React.createElement(rebass_1.Box, null,
+        React.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: (_b = props.selectedColumn) === null || _b === void 0 ? void 0 : _b.columnId, placeholder: isDateType ? 'Select' : 'Select or type new value', onChange: (value) => {
+                if (!value) {
+                    props.onColumnValueChange(null);
+                }
+                else {
+                    props.onColumnValueChange(value);
+                }
+            } })));
+    const input = (React.createElement(AdaptableInput_1.default, { "data-name": "bulkupdate-value-input", type: props.selectedColumn
+            ? UIHelper_1.default.getDescriptionForDataType(props.selectedColumn.dataType)
+            : 'text', placeholder: props.selectedColumn
+            ? UIHelper_1.default.getPlaceHolderforDataType(props.selectedColumn.dataType)
+            : 'Enter Value', autoFocus: true, disabled: props.disabled, style: { width: '100%' }, value: props.selectedColumnValue, onChange: (e) => {
+            props.onColumnValueChange(e.target.value);
+        } }));
+    let valueTypeSelector = null;
+    if (isDateType) {
+        valueTypeSelector = (React.createElement(Select_1.Select, { options: [
+                { label: 'New', value: 'new' },
+                { label: 'Existing', value: 'existing' },
+            ], value: valueType, onChange: (value) => {
+                setValueType(value);
             } }));
-        return (React.createElement(FieldWrap, { style: Object.assign(Object.assign({}, this.props.style), { overflow: 'visible' }) },
-            this.state.newOrExisting === NEW_OR_EXISTING.existing ? dd : input,
-            React.createElement(DropdownButton, Object.assign({ variant: "raised", tone: "neutral", columns: ['label'], style: {
-                    boxShadow: 'none',
-                    color: 'var(--ab-cmp-dashboardpanel__fill)',
-                    background: 'var(--ab-color-defaultbackground)',
-                }, disabled: this.props.disabled, marginRight: 1, items: [
-                    {
-                        label: NEW_OR_EXISTING.existing,
-                        onClick: () => {
-                            this.setState({
-                                newOrExisting: NEW_OR_EXISTING.existing,
-                            });
-                            this.onSelectedValueChange([]);
-                        },
-                    },
-                    {
-                        label: NEW_OR_EXISTING.new,
-                        onClick: () => {
-                            this.setState({
-                                newOrExisting: NEW_OR_EXISTING.new,
-                            });
-                            this.onSelectedValueChange([]);
-                        },
-                    },
-                ] }, this.props.dropdownButtonProps), this.state.newOrExisting === NEW_OR_EXISTING.existing
-                ? this.props.existingLabel
-                : this.props.newLabel)));
-    }
-    onSelectedValueChange(selected) {
-        if (ArrayExtensions.IsEmpty(selected) &&
-            StringExtensions.IsNullOrEmpty(this.props.selectedColumnValue)) {
-            return; // must be a nicer way but we want to avoid ridiculous amounts of prop calls
-        }
-        if (ArrayExtensions.IsEmpty(selected)) {
-            this.props.onColumnValueChange('');
-        }
-        else {
-            if (selected[0].customOption) {
-                this.props.onColumnValueChange(selected[0].DisplayValue);
-            }
-            else {
-                this.props.onColumnValueChange(selected[0].DisplayValue);
-            }
-        }
     }
-}
-ColumnValueSelector.defaultProps = {
-    newLabel: 'New value',
-    existingLabel: 'Existing value',
+    return (React.createElement(FieldWrap_1.default, { className: props.className, style: Object.assign(Object.assign({}, props.style), { overflow: 'visible', maxWidth: '100%' }) }, isDateType ? (React.createElement(React.Fragment, null,
+        valueType === 'new' ? input : permittedValueSelector,
+        valueTypeSelector)) : (permittedValueSelector)));
 };
+exports.ColumnValueSelector = ColumnValueSelector;

package/src/View/Components/Selectors/PermittedValuesSelector.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export type ValueType = number | string | Date;
+interface PermittedValuesSelectorProps<Value extends ValueType, IsMulti extends boolean> {
+    isMulti?: IsMulti;
+    columnId: string;
+    value: IsMulti extends true ? Value[] : Value;
+    onChange: (value: IsMulti extends true ? Value[] : Value) => void;
+    allowNewValues?: boolean;
+    className?: string;
+    disabled?: boolean;
+    placeholder?: string;
+}
+export declare const PermittedValuesSelector: <Value extends ValueType, IsMulti extends boolean = false>(props: PermittedValuesSelectorProps<Value, IsMulti>) => JSX.Element;
+export {};

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PermittedValuesSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Select_1 = require("../../../components/Select");
+const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const PermittedValuesSelector = function (props) {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const [isLoading, setIsLoading] = React.useState(true);
+    const [options, setOptions] = React.useState([]);
+    const [filter, setFilter] = React.useState('');
+    const columnType = React.useMemo(() => {
+        return adaptable.api.columnApi.getColumnDataTypeForColumnId(props.columnId);
+    }, []);
+    React.useEffect(() => {
+        if (!props.columnId) {
+            setIsLoading(false);
+            return;
+        }
+        setIsLoading(true);
+        (async () => {
+            const { values: distinctColumnValues } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(adaptable.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(props.columnId, filter, adaptable.api.optionsApi.getColumnFilterOptions().valuesFilterOptions
+                .showDistinctFilteredValuesOnly), () => {
+                setIsLoading(true);
+            });
+            setIsLoading(false);
+            setOptions(distinctColumnValues);
+        })();
+    }, [props.columnId, filter]);
+    const isCreatable = props.allowNewValues && ['String', 'Number'].includes(columnType);
+    const handleSingleValueChange = (value) => {
+        if (isCreatable) {
+            if (columnType === 'Number') {
+                let num = parseFloat(value);
+                num = isNaN(num) ? null : num;
+                props.onChange(num);
+            }
+            else {
+                props.onChange(value);
+            }
+        }
+        else {
+            props.onChange(value);
+        }
+    };
+    const handleMultiValueChange = (values) => {
+        if (isCreatable) {
+            if (columnType === 'Number') {
+                const nums = values.map((v) => parseFloat(v)).filter((v) => !isNaN(v));
+                props.onChange(nums);
+            }
+            else {
+                props.onChange(values);
+            }
+        }
+        else {
+            props.onChange(values);
+        }
+    };
+    const handleOnChange = (value) => {
+        // convert numbers
+        if (props.isMulti) {
+            handleMultiValueChange(value);
+        }
+        else {
+            handleSingleValueChange(value);
+        }
+    };
+    return (React.createElement(Select_1.Select, { isMulti: props.isMulti, className: props.className, disabled: props.disabled, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, options: options, isLoding: isLoading, onInputChange: setFilter, onChange: handleOnChange, value: props.value }));
+};
+exports.PermittedValuesSelector = PermittedValuesSelector;

package/src/View/Components/SharedProps/BaseProps.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/View/Components/SharedProps/ConfigEntityRowProps.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/View/Components/SharedProps/EditableConfigEntityState.js

@@ -1,7 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WizardStatus = void 0;
 /// <reference path="../../typings/.d.ts" />
-export var WizardStatus;
+var WizardStatus;
 (function (WizardStatus) {
     WizardStatus["New"] = "New";
     WizardStatus["Edit"] = "Edit";
     WizardStatus["None"] = "None";
-})(WizardStatus || (WizardStatus = {}));
+})(WizardStatus = exports.WizardStatus || (exports.WizardStatus = {}));

package/src/View/Components/SharedProps/ModuleSummaryProps.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/View/Components/SharedProps/ModuleViewPopupProps.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/View/Components/SharedProps/ToolPanelModuleViewPopupProps.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/View/Components/SharedProps/ToolbarModuleViewPopupProps.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/View/Components/SharedProps/ViewPanelProps.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/View/Components/SharedProps/WizardScopeState.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/View/Components/StyleComponent.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { AdaptableStyle } from '../../PredefinedConfig/Common/AdaptableStyle';
 import { CSSProperties } from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
+import { AdaptableStyle } from '../../PredefinedConfig/Common/AdaptableStyle';
 export interface StyleComponentProps extends React.ClassAttributes<StyleComponent> {
     className?: string;
     style?: CSSProperties;
@@ -20,10 +20,9 @@ export declare class StyleComponent extends React.Component<StyleComponentProps,
     constructor(props: StyleComponentProps);
     static getDerivedStateFromProps(nextProps: StyleComponentProps, prevState: StyleComponentState): {
         componentStyle: AdaptableStyle;
-        ShowClassName: boolean;
     };
     render(): JSX.Element;
-    private onShowClassNameChanged;
+    onShowClassNameChanged: (checked: boolean) => void;
     private onStyleClassNameChanged;
     private onUseBackColorCheckChange;
     private onUseForeColorCheckChange;

package/src/View/Components/StyleComponent.js

@@ -1,37 +1,54 @@
-import * as React from 'react';
-import { FontWeight, FontStyle, FontSize } from '../../PredefinedConfig/Common/Enums';
-import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
-import { ColorPicker } from '../../components/ColorPicker';
-import { Text, Flex, Box } from 'rebass';
-import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
-import { CheckBox } from '../../components/CheckBox';
-import Panel from '../../components/Panel';
-import HelpBlock from '../../components/HelpBlock';
-import FormLayout, { FormRow } from '../../components/FormLayout';
-import DropdownButton from '../../components/DropdownButton';
-import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
-import Radio from '../../components/Radio';
-import { StylePreview } from '../../components/StylePreview';
-import { ToggleGroup } from '../../components/Toggle/ToggleGroup';
-import { Toggle } from '../../components/Toggle/Toggle';
-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) => {
+            this.setState((state) => {
+                const newState = Object.assign({}, state);
+                delete newState.componentStyle.BackColor;
+                delete newState.componentStyle.ForeColor;
+                delete newState.componentStyle.BorderColor;
+                delete newState.componentStyle.FontSize;
+                delete newState.componentStyle.FontStyle;
+                delete newState.componentStyle.FontWeight;
+                newState.componentStyle.ClassName = '';
+                newState.ShowClassName = checked;
+                return newState;
+            });
+        };
         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) {
         return {
             componentStyle: nextProps.Style,
-            ShowClassName: StringExtensions.IsNotNullOrEmpty(nextProps.Style.ClassName),
         };
     }
     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
             ? {}
             : {
@@ -43,78 +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: "Predicate", checked: this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(checked) }, "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: (checked) => this.onShowClassNameChanged(!checked) }, "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(DropdownButton, { "data-name": "select-class-anme", margin: 3, placeholder: "Select", variant: "outlined", columns: ['label'], tone: "none", disabled: ArrayExtensions.IsNullOrEmpty(styleClassNames), style: {
-                        minWidth: '15rem',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                    }, items: styleClassNames.map((item) => ({
-                        value: item,
-                        label: item,
-                        onClick: () => this.onStyleClassNameChanged(item),
-                    })) }, this.state.componentStyle.ClassName),
-                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(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(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(DropdownButton, { width: "100px", mr: 1, items: [
+                                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: [
                                         {
-                                            value: '',
                                             label: 'Default',
-                                            onClick: () => this.onFontSizeChange(''),
+                                            value: '',
                                         },
-                                        ...EnumExtensions.getNames(FontSize).map((enumName) => ({
-                                            value: enumName,
+                                        ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
                                             label: enumName,
-                                            onClick: () => this.onFontSizeChange(enumName),
+                                            value: enumName,
                                         })),
-                                    ], columns: ['label'] }, (_b = (_a = this.state.componentStyle.FontSize) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : 'Default'))) : (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);
@@ -123,20 +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 })))));
-    }
-    onShowClassNameChanged(checked) {
-        // clear everything
-        delete this.state.componentStyle.BackColor;
-        delete this.state.componentStyle.ForeColor;
-        delete this.state.componentStyle.BorderColor;
-        delete this.state.componentStyle.FontSize;
-        delete this.state.componentStyle.FontStyle;
-        delete this.state.componentStyle.FontWeight;
-        this.state.componentStyle.ClassName = '';
-        this.setState({ ShowClassName: checked });
+            !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;
@@ -171,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;
@@ -192,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;
@@ -201,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;
@@ -230,3 +231,4 @@ export class StyleComponent extends React.Component {
         this.props.UpdateStyle(this.state.componentStyle);
     }
 }
+exports.StyleComponent = StyleComponent;