@adaptabletools/adaptable 16.2.3 → 17.0.0-canary.0

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -1,25 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatColumnFormatWizardSection = exports.getFormatDisplayTypeForScope = exports.renderFormatColumnFormatSummary = exports.getFormatColumnFormatSummaryValue = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const uniq_1 = tslib_1.__importDefault(require("lodash/uniq"));
-const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const CheckBox_1 = require("../../../components/CheckBox");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Tabs_1 = require("../../../components/Tabs");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
-const Tag_1 = require("../../../components/Tag");
-const AdaptableContext_1 = require("../../AdaptableContext");
-const FormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/FormatHelper"));
-const Toggle_1 = require("../../../components/Toggle");
+import * as React from 'react';
+import { Box, Flex, Text } from 'rebass';
+import uniq from 'lodash/uniq';
+import clamp from 'lodash/clamp';
+import HelpBlock from '../../../components/HelpBlock';
+import Input from '../../../components/Input';
+import SimpleButton from '../../../components/SimpleButton';
+import { CheckBox } from '../../../components/CheckBox';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
+import Radio from '../../../components/Radio';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Tabs } from '../../../components/Tabs';
+import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
+import { Tag } from '../../../components/Tag';
+import { useAdaptable } from '../../AdaptableContext';
+import FormatHelper from '../../../Utilities/Helpers/FormatHelper';
+import { Toggle, ToggleGroup } from '../../../components/Toggle';
 const DOLLAR_OPTIONS = {
     FractionDigits: 2,
     FractionSeparator: '.',
@@ -79,29 +75,28 @@ const DateFormatPresets = [
     'yyyyMMdd',
     'HH:mm:ss',
 ];
-const getFormatColumnFormatSummaryValue = (data) => {
+export const getFormatColumnFormatSummaryValue = (data) => {
     let content = 'N/A';
     if (!data.DisplayFormat) {
         content = 'N/A';
     }
     else {
         if (data.DisplayFormat.Formatter === 'NumberFormatter') {
-            content = FormatHelper_1.default.NumberFormatter(12345.6789, data.DisplayFormat.Options);
+            content = FormatHelper.NumberFormatter(12345.6789, data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'DateFormatter') {
-            content = FormatHelper_1.default.DateFormatter(new Date(2022, 0, 1), data.DisplayFormat.Options);
+            content = FormatHelper.DateFormatter(new Date(2022, 0, 1), data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'StringFormatter') {
-            content = FormatHelper_1.default.StringFormatter('Hello World ', data.DisplayFormat.Options);
+            content = FormatHelper.StringFormatter('Hello World ', data.DisplayFormat.Options);
         }
     }
     return content;
 };
-exports.getFormatColumnFormatSummaryValue = getFormatColumnFormatSummaryValue;
 const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
     var _a, _b, _c;
-    return (React.createElement(FormLayout_1.FormRow, { key: customFormatter.id, label: (_a = customFormatter.label) !== null && _a !== void 0 ? _a : customFormatter.id },
-        React.createElement(CheckBox_1.CheckBox, { "data-name": customFormatter.id, checked: (_c = (_b = data.DisplayFormat.Options.CustomDisplayFormats) === null || _b === void 0 ? void 0 : _b.some) === null || _c === void 0 ? void 0 : _c.call(_b, (item) => item === customFormatter.id), onChange: (checked) => {
+    return (React.createElement(FormRow, { key: customFormatter.id, label: (_a = customFormatter.label) !== null && _a !== void 0 ? _a : customFormatter.id },
+        React.createElement(CheckBox, { "data-name": customFormatter.id, checked: (_c = (_b = data.DisplayFormat.Options.CustomDisplayFormats) === null || _b === void 0 ? void 0 : _b.some) === null || _c === void 0 ? void 0 : _c.call(_b, (item) => item === customFormatter.id), onChange: (checked) => {
                 var _a, _b, _c;
                 let newCustomFormats = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.DisplayFormat) === null || _a === void 0 ? void 0 : _a.Options) === null || _b === void 0 ? void 0 : _b.CustomDisplayFormats) !== null && _c !== void 0 ? _c : [];
                 if (checked) {
@@ -113,11 +108,10 @@ const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
                 setFormatOption('CustomDisplayFormats', newCustomFormats);
             } })));
 };
-const renderFormatColumnFormatSummary = (data) => {
-    return React.createElement(Tag_1.Tag, null, (0, exports.getFormatColumnFormatSummaryValue)(data));
+export const renderFormatColumnFormatSummary = (data) => {
+    return React.createElement(Tag, null, getFormatColumnFormatSummaryValue(data));
 };
-exports.renderFormatColumnFormatSummary = renderFormatColumnFormatSummary;
-const getFormatDisplayTypeForScope = (scope, api) => {
+export const getFormatDisplayTypeForScope = (scope, api) => {
     if (scope == undefined) {
         return undefined;
     }
@@ -127,7 +121,7 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     // need to see if all columns are numeric or date
     if ('ColumnIds' in scope) {
         const columns = scope.ColumnIds.map((c) => api.columnApi.getColumnWithColumnId(c)).filter(Boolean);
-        const columnDataTypes = (0, uniq_1.default)(columns.map((c) => c.dataType));
+        const columnDataTypes = uniq(columns.map((c) => c.dataType));
         if (columnDataTypes.length == 1 && columnDataTypes[0] == 'Number') {
             return 'Number';
         }
@@ -150,46 +144,45 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     }
     return undefined;
 };
-exports.getFormatDisplayTypeForScope = getFormatDisplayTypeForScope;
 const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters) => {
     var _a;
     if (data.DisplayFormat.Formatter !== 'DateFormatter') {
         return null;
     }
-    return (React.createElement(rebass_1.Box, { padding: 2 },
-        React.createElement(Tabs_1.Tabs, null,
-            React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 },
+    return (React.createElement(Box, { padding: 2 },
+        React.createElement(Tabs, null,
+            React.createElement(Tabs.Tab, null, "Format"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Text, { padding: 2, fontSize: 2 },
                     "Either create your own date pattern, or select one of the preset date formats (check out",
                     ' ',
                     React.createElement("a", { href: "https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table", target: "_blank" }, "available symbols"),
                     ")."),
-                React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "Pattern" },
-                        React.createElement(Input_1.default, { "data-name": "pattern", value: (_a = data.DisplayFormat.Options.Pattern) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), mr: 2 }),
+                React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "Pattern" },
+                        React.createElement(Input, { "data-name": "pattern", value: (_a = data.DisplayFormat.Options.Pattern) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), mr: 2 }),
                         React.createElement("span", null, data.DisplayFormat.Options.Pattern &&
-                            FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options, true)))))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(FormLayout_1.default, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
-        React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
+                            FormatHelper.DateFormatter(new Date(), data.DisplayFormat.Options, true)))))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs.Tab, null, "Custom Formats"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(FormLayout, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
+        React.createElement(Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs.Tab, null, "Presets"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
                         { Content: 'Pattern', Size: 1 },
                         { Content: 'Formatted Date', Size: 1 },
                         { Content: '', Size: 1 },
                     ] }),
-                DateFormatPresets.map((Pattern, index) => (React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: [
+                DateFormatPresets.map((Pattern, index) => (React.createElement(AdaptableObjectRow, { key: index, colItems: [
                         { Content: Pattern, Size: 1 },
                         {
-                            Content: FormatHelper_1.default.DateFormatter(new Date(), { Pattern }),
+                            Content: FormatHelper.DateFormatter(new Date(), { Pattern }),
                             Size: 1,
                         },
                         {
-                            Content: (React.createElement(SimpleButton_1.default, { "data-name": "apply-format-pattern", "data-value": Pattern, onClick: () => setFormatOption('Pattern', Pattern) }, "Apply")),
+                            Content: (React.createElement(SimpleButton, { "data-name": "apply-format-pattern", "data-value": Pattern, onClick: () => setFormatOption('Pattern', Pattern) }, "Apply")),
                             Size: 1,
                         },
                     ] })))))));
@@ -247,94 +240,94 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
         data.DisplayFormat.Options.Multiplier === MILLION_OPTIONS.Multiplier; //isEqual(data.DisplayFormat.Options, MILLION_OPTIONS);
     const IS_DOLLAR = data.DisplayFormat.Options.Prefix === '$'; //isEqual(data.DisplayFormat.Options, DOLLAR_OPTIONS);
     const IS_STERLING = data.DisplayFormat.Options.Prefix === '£'; //isEqual(data.DisplayFormat, STERLING_OPTIONS);
-    return (React.createElement(rebass_1.Box, { "data-name": 'format-column-display-format', padding: 2 },
-        React.createElement(Tabs_1.Tabs, null,
-            React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, { mr: 3 },
-                        React.createElement(FormLayout_1.FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input_1.default, { "data-name": "fraction-separator", value: data.DisplayFormat.Options.FractionSeparator, onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Integer Separator" },
-                            React.createElement(Input_1.default, { "data-name": "integer-separator", value: data.DisplayFormat.Options.IntegerSeparator, onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
-                            React.createElement(Input_1.default, { "data-name": "prefix", value: (_a = data.DisplayFormat.Options.Prefix) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { "data-name": "suffix", value: (_b = data.DisplayFormat.Options.Suffix) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Truncate" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "truncate-checkbox", checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Ceiling" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "ceiling-checkbox", checked: data.DisplayFormat.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) })),
+    return (React.createElement(Box, { "data-name": 'format-column-display-format', padding: 2 },
+        React.createElement(Tabs, null,
+            React.createElement(Tabs.Tab, null, "Format"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout, { mr: 3 },
+                        React.createElement(FormRow, { label: "Fraction Separator" },
+                            React.createElement(Input, { "data-name": "fraction-separator", value: data.DisplayFormat.Options.FractionSeparator, onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
+                        React.createElement(FormRow, { label: "Integer Separator" },
+                            React.createElement(Input, { "data-name": "integer-separator", value: data.DisplayFormat.Options.IntegerSeparator, onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
+                        React.createElement(FormRow, { label: "Prefix" },
+                            React.createElement(Input, { "data-name": "prefix", value: (_a = data.DisplayFormat.Options.Prefix) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                        React.createElement(FormRow, { label: "Suffix" },
+                            React.createElement(Input, { "data-name": "suffix", value: (_b = data.DisplayFormat.Options.Suffix) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                        React.createElement(FormRow, { label: "Truncate" },
+                            React.createElement(CheckBox, { "data-name": "truncate-checkbox", checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
+                        React.createElement(FormRow, { label: "Ceiling" },
+                            React.createElement(CheckBox, { "data-name": "ceiling-checkbox", checked: data.DisplayFormat.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) })),
                         ' ',
-                        React.createElement(FormLayout_1.FormRow, { label: "Absolute" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "abs-checkbox", checked: data.DisplayFormat.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) }))),
-                    React.createElement(FormLayout_1.default, null,
-                        React.createElement(FormLayout_1.FormRow, { label: "Fraction Digits" },
-                            React.createElement(Input_1.default, { "data-name": "fraction-digits", type: "number", min: "0", 
+                        React.createElement(FormRow, { label: "Absolute" },
+                            React.createElement(CheckBox, { "data-name": "abs-checkbox", checked: data.DisplayFormat.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) }))),
+                    React.createElement(FormLayout, null,
+                        React.createElement(FormRow, { label: "Fraction Digits" },
+                            React.createElement(Input, { "data-name": "fraction-digits", type: "number", min: "0", 
                                 // max="20"
                                 value: typeof data.DisplayFormat.Options.FractionDigits === 'number'
                                     ? data.DisplayFormat.Options.FractionDigits
-                                    : '', onChange: (e) => setFormatOption('FractionDigits', StringExtensions_1.default.IsNumeric(e.currentTarget.value)
-                                    ? (0, clamp_1.default)(Number(e.currentTarget.value), 0, 20)
+                                    : '', onChange: (e) => setFormatOption('FractionDigits', StringExtensions.IsNumeric(e.currentTarget.value)
+                                    ? clamp(Number(e.currentTarget.value), 0, 20)
                                     : undefined) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Integer Digits" },
-                            React.createElement(Input_1.default, { "data-name": "integer-digits", type: "number", min: "0", value: data.DisplayFormat.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions_1.default.IsNumeric(e.currentTarget.value)
-                                    ? (0, clamp_1.default)(Number(e.currentTarget.value), 0, 20)
+                        React.createElement(FormRow, { label: "Integer Digits" },
+                            React.createElement(Input, { "data-name": "integer-digits", type: "number", min: "0", value: data.DisplayFormat.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions.IsNumeric(e.currentTarget.value)
+                                    ? clamp(Number(e.currentTarget.value), 0, 20)
                                     : undefined) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Multiplier" },
-                            React.createElement(Input_1.default, { "data-name": "multiplier", type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
+                        React.createElement(FormRow, { label: "Multiplier" },
+                            React.createElement(Input, { "data-name": "multiplier", type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
                         ' ',
-                        React.createElement(FormLayout_1.FormRow, { label: "Content" },
-                            React.createElement(Input_1.default, { "data-name": "content", value: (_c = data.DisplayFormat.Options.Content) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
+                        React.createElement(FormRow, { label: "Content" },
+                            React.createElement(Input, { "data-name": "content", value: (_c = data.DisplayFormat.Options.Content) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
                         ' ',
-                        React.createElement(FormLayout_1.FormRow, { label: "Parentheses" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "parentheses-checkbox", checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Floor" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "floor-checkbox", checked: data.DisplayFormat.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Round" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "round-checkbox", checked: data.DisplayFormat.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })))))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
-        React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 }, "Select a preset for common use cases"),
-                React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, { margin: 2 },
-                        React.createElement(FormLayout_1.FormRow, { label: "Show As:" },
-                            React.createElement(Radio_1.default, { "data-name": "preset-percentage", marginLeft: 2, checked: IS_PERCENT, onChange: () => setPercentPreset() }, "Percentage"),
-                            React.createElement(Radio_1.default, { "data-name": "preset-thousand", marginLeft: 3, checked: IS_THOUSAND, onChange: () => setDivideThousandPreset() }, "K (Thousand)"),
-                            React.createElement(Radio_1.default, { "data-name": "preset-million", marginLeft: 3, checked: IS_MILLION, onChange: () => setDivideMillionPreset() }, "M (Million)"),
-                            React.createElement(Radio_1.default, { "data-name": "preset-dollar", marginLeft: 3, checked: IS_DOLLAR, onChange: () => setDollarPreset() }, "Dollar"),
-                            React.createElement(Radio_1.default, { "data-name": "preset-sterling", marginLeft: 3, checked: IS_STERLING, onChange: () => setSterlingPreset() }, "Sterling")))))),
-        React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Examples"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
+                        React.createElement(FormRow, { label: "Parentheses" },
+                            React.createElement(CheckBox, { "data-name": "parentheses-checkbox", checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
+                        React.createElement(FormRow, { label: "Floor" },
+                            React.createElement(CheckBox, { "data-name": "floor-checkbox", checked: data.DisplayFormat.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) })),
+                        React.createElement(FormRow, { label: "Round" },
+                            React.createElement(CheckBox, { "data-name": "round-checkbox", checked: data.DisplayFormat.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })))))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs.Tab, null, "Custom Formats"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
+        React.createElement(Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
+            React.createElement(Tabs.Tab, null, "Presets"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Text, { padding: 2, fontSize: 2 }, "Select a preset for common use cases"),
+                React.createElement(Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout, { margin: 2 },
+                        React.createElement(FormRow, { label: "Show As:" },
+                            React.createElement(Radio, { "data-name": "preset-percentage", marginLeft: 2, checked: IS_PERCENT, onChange: () => setPercentPreset() }, "Percentage"),
+                            React.createElement(Radio, { "data-name": "preset-thousand", marginLeft: 3, checked: IS_THOUSAND, onChange: () => setDivideThousandPreset() }, "K (Thousand)"),
+                            React.createElement(Radio, { "data-name": "preset-million", marginLeft: 3, checked: IS_MILLION, onChange: () => setDivideMillionPreset() }, "M (Million)"),
+                            React.createElement(Radio, { "data-name": "preset-dollar", marginLeft: 3, checked: IS_DOLLAR, onChange: () => setDollarPreset() }, "Dollar"),
+                            React.createElement(Radio, { "data-name": "preset-sterling", marginLeft: 3, checked: IS_STERLING, onChange: () => setSterlingPreset() }, "Sterling")))))),
+        React.createElement(Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
+            React.createElement(Tabs.Tab, null, "Examples"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
                         { Content: 'Raw Number', Size: 1 },
                         { Content: 'Formatted Number', Size: 1 },
                     ] }),
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
+                React.createElement(AdaptableObjectRow, { colItems: [
                         { Content: '12345.6789', Size: 1 },
                         {
-                            Content: FormatHelper_1.default.NumberFormatter(12345.6789, data.DisplayFormat.Options),
+                            Content: FormatHelper.NumberFormatter(12345.6789, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] }),
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
+                React.createElement(AdaptableObjectRow, { colItems: [
                         { Content: '-12345.6789', Size: 1 },
                         {
-                            Content: FormatHelper_1.default.NumberFormatter(-12345.6789, data.DisplayFormat.Options),
+                            Content: FormatHelper.NumberFormatter(-12345.6789, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] }),
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
+                React.createElement(AdaptableObjectRow, { colItems: [
                         { Content: '0.123', Size: 1 },
                         {
-                            Content: FormatHelper_1.default.NumberFormatter(0.123, data.DisplayFormat.Options),
+                            Content: FormatHelper.NumberFormatter(0.123, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] })))));
@@ -344,53 +337,53 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
     if (data.DisplayFormat.Formatter !== 'StringFormatter') {
         return null;
     }
-    return (React.createElement(rebass_1.Box, { "data-name": 'format-column-display-format', padding: 2 },
-        React.createElement(Tabs_1.Tabs, null,
-            React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout_1.default, { mr: 3 },
-                        React.createElement(FormLayout_1.FormRow, { label: "Case:" },
-                            React.createElement(rebass_1.Flex, null,
-                                React.createElement(Toggle_1.ToggleGroup, null,
-                                    React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }),
-                                    React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }),
-                                    React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })),
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "trim-checkbox", marginLeft: 5, checked: data.DisplayFormat.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim"))),
-                        React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
-                            React.createElement(Input_1.default, { "data-name": "prefix", value: (_a = data.DisplayFormat.Options.Prefix) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { "data-name": "suffix", value: (_b = data.DisplayFormat.Options.Suffix) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Content" },
-                            React.createElement(Input_1.default, { "data-name": "content", value: (_c = data.DisplayFormat.Options.Content) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Empty" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) })))))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout_1.default, { mr: 3 }, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
-        React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Example"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
+    return (React.createElement(Box, { "data-name": 'format-column-display-format', padding: 2 },
+        React.createElement(Tabs, null,
+            React.createElement(Tabs.Tab, null, "Format"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "column" },
+                    React.createElement(FormLayout, { mr: 3 },
+                        React.createElement(FormRow, { label: "Case:" },
+                            React.createElement(Flex, null,
+                                React.createElement(ToggleGroup, null,
+                                    React.createElement(Toggle, { pressed: data.DisplayFormat.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }),
+                                    React.createElement(Toggle, { pressed: data.DisplayFormat.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }),
+                                    React.createElement(Toggle, { pressed: data.DisplayFormat.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })),
+                                React.createElement(CheckBox, { "data-name": "trim-checkbox", marginLeft: 5, checked: data.DisplayFormat.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim"))),
+                        React.createElement(FormRow, { label: "Prefix" },
+                            React.createElement(Input, { "data-name": "prefix", value: (_a = data.DisplayFormat.Options.Prefix) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                        React.createElement(FormRow, { label: "Suffix" },
+                            React.createElement(Input, { "data-name": "suffix", value: (_b = data.DisplayFormat.Options.Suffix) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                        React.createElement(FormRow, { label: "Content" },
+                            React.createElement(Input, { "data-name": "content", value: (_c = data.DisplayFormat.Options.Content) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
+                        React.createElement(FormRow, { label: "Empty" },
+                            React.createElement(CheckBox, { "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) })))))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs.Tab, null, "Custom Formats"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "column" },
+                    React.createElement(FormLayout, { mr: 3 }, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
+        React.createElement(Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs.Tab, null, "Example"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
                         { Content: 'Raw String', Size: 1 },
                         { Content: 'Formatted String', Size: 1 },
                     ] }),
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
+                React.createElement(AdaptableObjectRow, { colItems: [
                         { Content: '"Hello World "', Size: 1 },
                         {
                             Content: '"' +
-                                FormatHelper_1.default.StringFormatter('Hello World ', data.DisplayFormat.Options) +
+                                FormatHelper.StringFormatter('Hello World ', data.DisplayFormat.Options) +
                                 '"',
                             Size: 1,
                         },
                     ] })))));
 };
-const FormatColumnFormatWizardSection = (props) => {
+export const FormatColumnFormatWizardSection = (props) => {
     var _a;
-    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { data } = useOnePageAdaptableWizardContext();
+    const adaptable = useAdaptable();
     const formatColumnApi = adaptable.api.formatColumnApi;
     const customDisplayFormatters = (_a = adaptable.api.optionsApi.getFormatColumnOptions().customDisplayFormatters) !== null && _a !== void 0 ? _a : [];
     const update = (updated) => {
@@ -413,9 +406,8 @@ const FormatColumnFormatWizardSection = (props) => {
     if (Type === 'StringFormatter') {
         return renderStringFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }
-    return (React.createElement(HelpBlock_1.default, { margin: 3 },
+    return (React.createElement(HelpBlock, { margin: 3 },
         "Setting a Display Format is only possible if ",
         React.createElement("b", null, "all"),
         " the columns in Scope are Numeric, String or Date."));
 };
-exports.FormatColumnFormatWizardSection = FormatColumnFormatWizardSection;

package/src/View/FormatColumn/Wizard/FormatColumnRuleWizardSection.js

@@ -1,13 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatColumnRuleWizardSection = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
-function FormatColumnRuleWizardSection(props) {
-    const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, 
+import * as React from 'react';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { EntityRulesEditor } from '../../Components/EntityRulesEditor';
+export function FormatColumnRuleWizardSection(props) {
+    const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();
+    return (React.createElement(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, 
         // TODO see what is this
         predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showPredicate: !api.scopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
             selectPredicate: 'Create a Format Column Rule - to be applied when data changes',
@@ -25,4 +21,3 @@ function FormatColumnRuleWizardSection(props) {
                 " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
         } }));
 }
-exports.FormatColumnRuleWizardSection = FormatColumnRuleWizardSection;

package/src/View/FormatColumn/Wizard/FormatColumnScopeWizardSection.js

@@ -1,22 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatColumnScopeWizardSection = exports.renderFormatColumnScopeSummary = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const constants_1 = require("./constants");
-const renderFormatColumnScopeSummary = (data) => {
-    return (0, NewScopeComponent_1.renderScopeSummary)(data.Scope, {
+import * as React from 'react';
+import { NewScopeComponent, renderScopeSummary } from '../../Components/NewScopeComponent';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
+export const renderFormatColumnScopeSummary = (data) => {
+    return renderScopeSummary(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
         scopeColumns: 'Cells in selected columns will be formatted',
         scopeDataTypes: 'Cells in columns with these Data Types will be formatted',
     });
 };
-exports.renderFormatColumnScopeSummary = renderFormatColumnScopeSummary;
-const FormatColumnScopeWizardSection = (props) => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(NewScopeComponent_1.NewScopeComponent, { descriptions: {
+export const FormatColumnScopeWizardSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
+    return (React.createElement(NewScopeComponent, { descriptions: {
             rowScope: 'Format all columns in the row',
             columnScope: 'Select columns to format',
         }, scope: data.Scope, updateScope: (Scope) => {
@@ -34,7 +29,7 @@ const FormatColumnScopeWizardSection = (props) => {
                     // if scope is not whole row, if you have a predicate, reset it
                     newData.Rule.Predicates = [
                         {
-                            PredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN,
+                            PredicateId: DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN,
                         },
                     ];
                 }
@@ -42,4 +37,3 @@ const FormatColumnScopeWizardSection = (props) => {
             props.onChange(newData);
         } }));
 };
-exports.FormatColumnScopeWizardSection = FormatColumnScopeWizardSection;