@antscorp/antsomi-ui 1.3.3-beta.7 → 1.3.3-beta.71

package/es/constants/richMenu.js

@@ -0,0 +1,19 @@
+export const AREA_LAYOUT_KEYS = {
+    LAYOUT_1: 'LAYOUT_1',
+    LAYOUT_2: 'LAYOUT_2',
+    LAYOUT_3: 'LAYOUT_3',
+    LAYOUT_4: 'LAYOUT_4',
+    LAYOUT_5: 'LAYOUT_5',
+    LAYOUT_6: 'LAYOUT_6',
+    LAYOUT_7: 'LAYOUT_7',
+    LAYOUT_8: 'LAYOUT_8',
+    LAYOUT_9: 'LAYOUT_9',
+    LAYOUT_10: 'LAYOUT_10',
+    LAYOUT_11: 'LAYOUT_11',
+    LAYOUT_12: 'LAYOUT_12',
+};
+export const BLOCK_KEYS = {
+    RICH_MENU: 'RICH_MENU',
+    CELL_ACTION: 'CELL_ACTION',
+    CELL_IMAGE: 'CELL_IMAGE',
+};

package/es/constants/storybook.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const TABLE_API_COLUMNS: ({
     title: string;
     dataIndex: string;
@@ -7,5 +8,10 @@ export declare const TABLE_API_COLUMNS: ({
     title: string;
     dataIndex: string;
     key: string;
-    render: (text: any) => JSX.Element;
+    render: (text: any) => React.JSX.Element;
 })[];
+export declare const TABLE_TYPE_COLUMNS: {
+    title: string;
+    dataIndex: string;
+    key: string;
+}[];

package/es/constants/storybook.js

@@ -22,3 +22,15 @@ export const TABLE_API_COLUMNS = [
         key: 'default',
     },
 ];
+export const TABLE_TYPE_COLUMNS = [
+    {
+        title: 'Value',
+        dataIndex: 'value',
+        key: 'value',
+    },
+    {
+        title: 'Label',
+        dataIndex: 'label',
+        key: 'label',
+    },
+];

package/es/constants/theme.js

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
 // Types
 import { theme } from 'antd';
 // Variables
@@ -64,8 +64,12 @@ export const THEME = {
         accent2: '#dddddd',
         accent3: '#d2d2d2',
         accent5: '#999999',
+        accent6: '#f2f2f2',
+        accent7: '#cccccc',
+        gray5: '#d9d9d9',
         gold1,
         gold6,
+        scrollBarSize: '8px',
     },
 };
 THEME.components = {
@@ -128,19 +132,42 @@ THEME.components = {
         controlHeight: 31,
     },
     Divider: {
-        marginLG: 10,
+        marginLG: 15,
+        marginXL: 15,
+        colorSplit: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.accent3,
     },
     Checkbox: {
         controlInteractiveSize: 18,
     },
     Modal: {
+        titleFontSize: 16,
         borderRadiusSM: 3,
+        fontSizeLG: 18,
         paddingContentHorizontalLG: 0,
         paddingLG: 0,
         paddingMD: 0,
     },
     Tabs: {
         colorPrimary: '#1F5FAC',
-        margin: 20,
+        horizontalItemPadding: '10px 20px',
+        horizontalItemGutter: 0,
+        lineWidthBold: 3,
+        titleFontSize: 14,
+        titleFontSizeLG: 14,
+        titleFontSizeSM: 14,
+        horizontalMargin: '0px',
+    },
+    Collapse: {
+        headerBg: '#FFF',
+        borderRadiusLG: 0,
+        headerPadding: '15px 10px',
+    },
+    Switch: {
+        colorTextQuaternary: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw0,
+        colorTextTertiary: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw0,
+        handleSize: 12,
+        handleSizeSM: 7,
+        trackMinWidth: 30,
+        handleBg: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.colorPrimary,
     },
 };

package/es/hooks/index.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare function useDeepCompareEffect(callback: React.EffectCallback, dependencies: React.DependencyList | undefined): void;
+export { useDeepCompareMemo } from './useDeepCompareMemo';

package/es/hooks/index.js

@@ -19,3 +19,4 @@ export function useDeepCompareEffect(callback, dependencies) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(callback, dependencies === null || dependencies === void 0 ? void 0 : dependencies.map(useDeepCompareMemoize));
 }
+export { useDeepCompareMemo } from './useDeepCompareMemo';

package/es/hooks/useDebounceCallback.d.ts

@@ -0,0 +1 @@
+export declare function useDebounceCallback<T extends (...args: any[]) => any>(callback: T, delay?: number): T;

package/es/hooks/useDebounceCallback.js

@@ -0,0 +1,5 @@
+import { useDebounce } from './useDebounceV2';
+export function useDebounceCallback(callback, delay = 500) {
+    const debouncedCallback = useDebounce(callback, delay);
+    return debouncedCallback;
+}

package/es/hooks/useDebounceV2.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/es/hooks/useDebounceV2.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+export function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}

package/es/hooks/useDeepCompareEffect.d.ts

@@ -0,0 +1 @@
+export declare function useDeepCompareEffect(callback: any, dependencies: any): void;

package/es/hooks/useDeepCompareEffect.js

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+import isEqual from 'react-fast-compare';
+function deepCompareEquals(a, b) {
+    // TODO: implement deep comparison here
+    // something like lodash
+    // return _.isEqual(a, b);
+    return isEqual(a, b);
+}
+function useDeepCompareMemoize(value) {
+    const ref = useRef();
+    // it can be done by using useMemo as well
+    // but useRef is rather cleaner and easier
+    if (!deepCompareEquals(value, ref.current)) {
+        ref.current = value;
+    }
+    return ref.current;
+}
+export function useDeepCompareEffect(callback, dependencies) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(callback, dependencies.map(useDeepCompareMemoize));
+}

package/es/hooks/useDeepCompareMemo.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useDeepCompareMemo<T>(callback: () => T, dependencies: React.DependencyList | undefined): T;

package/es/hooks/useDeepCompareMemo.js

@@ -0,0 +1,21 @@
+import { useMemo, useRef } from 'react';
+import isEqual from 'react-fast-compare';
+function deepCompareEquals(a, b) {
+    // TODO: implement deep comparison here
+    // something like lodash
+    // return _.isEqual(a, b);
+    return isEqual(a, b);
+}
+function useDeepCompareMemoize(value) {
+    const ref = useRef();
+    // it can be done by using useMemo as well
+    // but useRef is rather cleaner and easier
+    if (!deepCompareEquals(value, ref.current)) {
+        ref.current = value;
+    }
+    return ref.current;
+}
+export function useDeepCompareMemo(callback, dependencies) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useMemo(callback, dependencies === null || dependencies === void 0 ? void 0 : dependencies.map(useDeepCompareMemoize));
+}

package/es/hooks/usePrevious.d.ts

@@ -0,0 +1,2 @@
+declare function usePrevious<T>(value: T): T | undefined;
+export default usePrevious;

package/es/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react';
+function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+export default usePrevious;

package/es/locales/en/translation.json

@@ -14,8 +14,8 @@
             "firstDayOfMonth": "First day of this month",
             "firstDayOfQuarter": "First day of this quarter",
             "firstDayOfYear": "First day of this year",
-            "lastDayOfWeekMonSun": "First day of this week (Mon - Sun)",
-            "lastDayOfWeekSunSat": "First day of this week (Sun - Sat)",
+            "lastDayOfWeekMonSun": "Last day of this week (Mon - Sun)",
+            "lastDayOfWeekSunSat": "Last day of this week (Sun - Sat)",
             "lastDayOfMonth": "Last day of this month",
             "lastDayOfQuarter": "Last day of this quarter",
             "lastDayOfYear": "Last day of this year",
@@ -30,6 +30,161 @@
         "quarters": "Quarters",
         "years": "Years"
     },
+    "edit": {
+        "title": "Edit",
+        "description": ""
+    },
+    "messageError": {
+        "createColorProfile": {
+            "message": "Create Color Profile Failed",
+            "description": ""
+        },
+        "maxLength": {
+            "message": "{{name}} is too long, max length is {{maxLength}} characters",
+            "description": ""
+        },
+        "promotionPoolDeactivated": {
+            "message": "This promotion pool is deactivated",
+            "description": ""
+        },
+        "BOArchive": {
+            "message": "This BO is archive",
+            "description": ""
+        },
+        "BODelete": {
+            "message": "This BO does not exist",
+            "description": ""
+        },
+        "attributeArchive": {
+            "message": "This attribute is not available",
+            "description": ""
+        },
+        "attributeDelete": {
+            "message": "This attribute does not exist",
+            "description": ""
+        },
+        "collectionArchive": {
+            "message": "This collection is not available",
+            "description": ""
+        },
+        "collectionDisable": {
+            "message": "This collection is disabled",
+            "description": ""
+        },
+        "collectionDelete": {
+            "message": "This collection does not exist",
+            "description": ""
+        },
+        "blockError": {
+            "message": "There are some blocks that are failing. Please check again",
+            "description": ""
+        },
+        "boError": {
+            "message": "Content sources has a problem. Please check again",
+            "description": ""
+        },
+        "fieldIsRequired": {
+            "message": "This field is required",
+            "description": ""
+        },
+        "completeSetupInContentSources": {
+            "message": "Please complete the setup in Content sources",
+            "description": ""
+        },
+        "fieldEmpty": {
+            "message": "This field can't be empty"
+        },
+        "nameExisted": {
+            "message": "This name has already existed"
+        },
+        "richMenuSwitchNoExist": {
+            "message": "There must be at least 1 Switch Menu action"
+        }
+    },
+    "expandEditor": {
+        "title": "Expand editor",
+        "description": ""
+    },
+    "dynamicContent": {
+        "title": "Dynamic content",
+        "modal": {
+            "error": {
+                "boAttr": "Error getting Business Object Attributes",
+                "customerAttr": "Error getting Customer Attributes",
+                "eventAttr": "Error getting Event Attributes",
+                "eventBySource": "Error getting Event in selected Source",
+                "promotionCodeAttr": "Error getting Promotion Code Attributes",
+                "promotionPools": "Error getting Promotion Pools",
+                "source": "Error getting Sources",
+                "visitorAttr": "Error getting Visitor Attributes",
+                "perName": "This name already existed",
+                "function": "Invalid function"
+            },
+            "label": {
+                "index": "Index",
+                "contentSource": "Content Source",
+                "personalizationName": "Personalization Name",
+                "function": "Function",
+                "ouputDataType": "Output Data Type",
+                "ouputFormat": "Output Format",
+                "saveTemplate": "Save as template",
+                "attribute": "Attribute",
+                "promotionCodeAttr": "Promotion code attribute",
+                "promotionPools": "Promotion pools",
+                "selectEvent": "Select event",
+                "selectEventAttr": "Select event attribute",
+                "selectSource": "In any source of",
+                "displayFormat": "Display Format",
+                "numberFormated": "Display Format",
+                "formNumberDisplayFormat": {
+                    "currency": "Currency",
+                    "currencySymbol": "Symbol",
+                    "currencyCode": "Code",
+                    "compact": "Compact numbers",
+                    "decimalPlace": "Decimal Places",
+                    "grouping": "Grouping",
+                    "decimal": "Decimal",
+                    "groupingIconTooltipTitle": "Select a mark to separate between groups of thounsands",
+                    "decimalIconTooltipTitle": "Select a mark to separate integer and its decimalds"
+                },
+                "datimeDisplayFormat": {
+                    "dateDF": "Date display format",
+                    "timeDF": "Time display format",
+                    "short": "Short",
+                    "medium": "Medium",
+                    "long": "Long",
+                    "use24hour": "Use 24-hour clock"
+                }
+            },
+            "message": {
+                "confirmDeleteVariable": "Are you sure to delete this Dynamic Text ?",
+                "selectDisableEventAttr": "Data-updating of this attribute has been disabled. You still can use the output value of the last time it is processed"
+            },
+            "dynamicContentType": {
+                "customerAttr": "Customer Attribute",
+                "eventAttr": "Event Attribute",
+                "promotionCode": "Promotion Code",
+                "visitorAttr": "Visitor Attribute",
+                "custom": "Custom"
+            },
+            "attrDisplayFormat": {
+                "number": "Number",
+                "percentage": "Percentage",
+                "currency": "Currency",
+                "datetime": "Datetime",
+                "rawString": "Raw string"
+            },
+            "title": {
+                "addDynamicContent": "Add Dynamic Content",
+                "deleteVariable": "Delete Dynamic Text"
+            }
+        },
+        "sidePanel": {
+            "highlightCheckbox": "Highlight Dynamic Content",
+            "title": "Dynamic Content",
+            "addDynamicContent": "Add dynamic content"
+        }
+    },
     "linear": "Linear",
     "radial": "Radial",
     "gradientStyle": "Gradient Style",
@@ -62,5 +217,7 @@
         "eighth": "Eighth",
         "ninth": "Ninth",
         "tenth": "Tenth"
-    }
+    },
+    "close": "Close",
+    "cellAction": "Click to add image"
 }

package/es/locales/i18n.d.ts

@@ -32,6 +32,161 @@ export declare const translationsJson: {
                 quarters: string;
                 years: string;
             };
+            edit: {
+                title: string;
+                description: string;
+            };
+            messageError: {
+                createColorProfile: {
+                    message: string;
+                    description: string;
+                };
+                maxLength: {
+                    message: string;
+                    description: string;
+                };
+                promotionPoolDeactivated: {
+                    message: string;
+                    description: string;
+                };
+                BOArchive: {
+                    message: string;
+                    description: string;
+                };
+                BODelete: {
+                    message: string;
+                    description: string;
+                };
+                attributeArchive: {
+                    message: string;
+                    description: string;
+                };
+                attributeDelete: {
+                    message: string;
+                    description: string;
+                };
+                collectionArchive: {
+                    message: string;
+                    description: string;
+                };
+                collectionDisable: {
+                    message: string;
+                    description: string;
+                };
+                collectionDelete: {
+                    message: string;
+                    description: string;
+                };
+                blockError: {
+                    message: string;
+                    description: string;
+                };
+                boError: {
+                    message: string;
+                    description: string;
+                };
+                fieldIsRequired: {
+                    message: string;
+                    description: string;
+                };
+                completeSetupInContentSources: {
+                    message: string;
+                    description: string;
+                };
+                fieldEmpty: {
+                    message: string;
+                };
+                nameExisted: {
+                    message: string;
+                };
+                richMenuSwitchNoExist: {
+                    message: string;
+                };
+            };
+            expandEditor: {
+                title: string;
+                description: string;
+            };
+            dynamicContent: {
+                title: string;
+                modal: {
+                    error: {
+                        boAttr: string;
+                        customerAttr: string;
+                        eventAttr: string;
+                        eventBySource: string;
+                        promotionCodeAttr: string;
+                        promotionPools: string;
+                        source: string;
+                        visitorAttr: string;
+                        perName: string;
+                        function: string;
+                    };
+                    label: {
+                        index: string;
+                        contentSource: string;
+                        personalizationName: string;
+                        function: string;
+                        ouputDataType: string;
+                        ouputFormat: string;
+                        saveTemplate: string;
+                        attribute: string;
+                        promotionCodeAttr: string;
+                        promotionPools: string;
+                        selectEvent: string;
+                        selectEventAttr: string;
+                        selectSource: string;
+                        displayFormat: string;
+                        numberFormated: string;
+                        formNumberDisplayFormat: {
+                            currency: string;
+                            currencySymbol: string;
+                            currencyCode: string;
+                            compact: string;
+                            decimalPlace: string;
+                            grouping: string;
+                            decimal: string;
+                            groupingIconTooltipTitle: string;
+                            decimalIconTooltipTitle: string;
+                        };
+                        datimeDisplayFormat: {
+                            dateDF: string;
+                            timeDF: string;
+                            short: string;
+                            medium: string;
+                            long: string;
+                            use24hour: string;
+                        };
+                    };
+                    message: {
+                        confirmDeleteVariable: string;
+                        selectDisableEventAttr: string;
+                    };
+                    dynamicContentType: {
+                        customerAttr: string;
+                        eventAttr: string;
+                        promotionCode: string;
+                        visitorAttr: string;
+                        custom: string;
+                    };
+                    attrDisplayFormat: {
+                        number: string;
+                        percentage: string;
+                        currency: string;
+                        datetime: string;
+                        rawString: string;
+                    };
+                    title: {
+                        addDynamicContent: string;
+                        deleteVariable: string;
+                    };
+                };
+                sidePanel: {
+                    highlightCheckbox: string;
+                    title: string;
+                    addDynamicContent: string;
+                };
+            };
             linear: string;
             radial: string;
             gradientStyle: string;
@@ -65,6 +220,8 @@ export declare const translationsJson: {
                 ninth: string;
                 tenth: string;
             };
+            close: string;
+            cellAction: string;
         };
     };
     vi: {
@@ -133,6 +290,7 @@ export declare const translationsJson: {
                 ninth: string;
                 tenth: string;
             };
+            close: string;
         };
     };
 };