@antscorp/antsomi-ui 1.3.3-beta.3 → 1.3.3-beta.30

package/es/components/organism/Help/styled.d.ts

@@ -1,16 +1,10 @@
 /// <reference types="react" />
 export declare const DropDown: import("styled-components").StyledComponent<import("react").FC<import("antd").DropDownProps> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd").DropDownProps>;
+} & {
     Button: import("react").FC<import("antd/es/dropdown").DropdownButtonProps>;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd").DropDownProps) => JSX.Element;
 }, any, {}, never>;
-export declare const ButtonFeedback: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Partial<{
-    href: string;
-    target?: string | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
-} & import("antd/es/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "type" | "onClick"> & {
-    htmlType?: "button" | "reset" | "submit" | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">> & import("react").RefAttributes<HTMLElement>> & {
+export declare const ButtonFeedback: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {
     height?: number | undefined;
@@ -21,7 +15,7 @@ export declare const Overlay: import("styled-components").StyledComponent<"div",
 export declare const Text: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SendFeedback: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ControlGroup: import("styled-components").StyledComponent<import("react").FC<import("antd").SpaceProps> & {
+export declare const ControlGroup: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").SpaceProps & import("react").RefAttributes<HTMLDivElement>> & {
     Compact: import("react").FC<import("antd/es/space/Compact").SpaceCompactProps>;
 }, any, {}, never>;
 export declare const ControlLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
@@ -64,15 +58,11 @@ export declare const TitleSearch: import("styled-components").StyledComponent<"s
 export declare const WrapperSearch: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>, any, {}, never>;
 export declare const TreeContent: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd").TreeProps<T> & {
     children?: import("react").ReactNode;
-} & {
-    ref?: import("react").Ref<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>> | undefined;
-}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+} & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     TreeNode: import("react").FC<import("rc-tree").TreeNodeProps<import("antd").TreeDataNode>>;
     DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
         children?: import("react").ReactNode;
-    } & {
-        ref?: import("react").Ref<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>> | undefined;
-    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    } & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
         displayName?: string | undefined;
     };
 }, any, {}, never>;

package/es/components/organism/Table/ExplorePivotTable/styled.d.ts

@@ -1,4 +1,5 @@
 export declare const StyledTable: import("styled-components").StyledComponent<import("antd/es/table/interface").RefTable & {
+    displayName?: string | undefined;
     SELECTION_COLUMN: {};
     EXPAND_COLUMN: {};
     SELECTION_ALL: "SELECT_ALL";

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/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/locales/en/translation.json

@@ -62,5 +62,6 @@
         "eighth": "Eighth",
         "ninth": "Ninth",
         "tenth": "Tenth"
-    }
+    },
+    "close": "Close"
 }

package/es/locales/i18n.d.ts

@@ -65,6 +65,7 @@ export declare const translationsJson: {
                 ninth: string;
                 tenth: string;
             };
+            close: string;
         };
     };
     vi: {
@@ -133,6 +134,7 @@ export declare const translationsJson: {
                 ninth: string;
                 tenth: string;
             };
+            close: string;
         };
     };
 };

package/es/locales/translations.d.ts

@@ -65,6 +65,7 @@ export declare const convertLanguageJsonToObject: (json: any, objToConvertTo?: C
         ninth: string;
         tenth: string;
     };
+    close: string;
 }>, current?: string) => void;
 export declare const t: (id: string, ...rest: any[]) => [string, ...any[]];
 export declare const getTranslateMessage: (id: string, defaultMessage?: string, value?: Record<string, unknown>) => string;

package/es/locales/vi/translation.json

@@ -62,5 +62,6 @@
         "eighth": "thứ tám",
         "ninth": "thứ chín",
         "tenth": "thứ mười"
-    }
+    },
+    "close": "Đóng"
 }

package/es/test.js

@@ -2,12 +2,7 @@
 import React, { useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import '@antscorp/icons/main.css';
-import { ConfigProvider, EdgeSetting, GradientSetting, IconSelection, PositionSetting, SettingWrapper, 
-// Slider,
-SliderWithInputNumber, Space, UploadImage, } from './components';
-// import { Slider } from 'antd';
-import { Slider } from '@antscorp/antsomi-ui/es/components/atoms/Slider';
-import { Rate } from './components/atoms/Rate';
+import { ConfigProvider, InputDynamic, } from './components';
 export const BACKGROUND_COLOR_STYLE = {
     SOLID: {
         value: 'color',
@@ -31,6 +26,8 @@ export const customColors = [
     '#57b8c2',
 ];
 export const App = () => {
+    // const [valueShortlink, setValueShortlink] = useState('#{shortlink(https://test.com.vn)}');
+    const [valueShortlink, setValueShortlink] = useState('');
     const [state, setState] = useState({
         option: {
             dateType: 'today',
@@ -49,6 +46,7 @@ export const App = () => {
     const [sliderValue, setSliderValue] = useState(10);
     const [edge, setEdge] = useState(['auto', 'auto', 700, 700]);
     const [icon, setIcon] = useState('');
+    console.log('valueShortlink :>', valueShortlink);
     const callbackColorSetting = (key, dataIn) => {
         switch (key) {
             case 'ON_ADD_NEW_PRESET':
@@ -78,6 +76,17 @@ export const App = () => {
     const handleSetIcon = value => {
         setIcon(value);
     };
+    // ----------------------------  Test Input Dynamic start ------------------------------
+    return (React.createElement("div", { style: {
+            width: 500,
+            height: 500,
+            border: '1px solid black',
+            margin: '0 auto',
+            padding: 12,
+            borderRadius: '10px',
+        } },
+        React.createElement(InputDynamic, { errors: [], onChange: dataOut => setValueShortlink(dataOut), onError: () => { }, isViewMode: false, canMultipleLine: false, value: valueShortlink })));
+    // ----------------------------  Test Input Dynamic End ------------------------------
     // ----------------------------  Test Helps Start ------------------------------
     // return (
     //   <div style={{ display: 'flex', justifyContent: 'center', width: '100vw', height: '100vh' }}>
@@ -86,67 +95,156 @@ export const App = () => {
     // );
     // ----------------------------  Test Helps End ------------------------------
     // ------------------------ Media template components test start -------------------------
-    return (React.createElement(ConfigProvider, null,
-        React.createElement("div", { style: {
-                width: 500,
-                height: 1000,
-                border: '1px solid black',
-                margin: '0 auto',
-                padding: 12,
-                borderRadius: '10px',
-                marginTop: 12,
-            } },
-            React.createElement("h2", { style: { textAlign: 'center' } }, "Test component of media template"),
-            React.createElement(Space, { size: 20, direction: "vertical" },
-                React.createElement(SettingWrapper, { vertical: true, label: "Color Setting" },
-                    React.createElement(GradientSetting, null)),
-                React.createElement(SliderWithInputNumber, { label: "Size (px)", labelStyling: { marginTop: 10 }, min: 0, max: 100, value: sliderValue, onAfterChange: handleChangeSlider }),
-                React.createElement(EdgeSetting, { label: "Notification Spacing", unit: "px", linked: false, values: edge, 
-                    // edgeLabels={[t(translations.column.title), t(translations.row.title)]}
-                    onChange: ({ values, linked, unit }) => {
-                        setEdge(values);
-                        // onUpdateSettings({
-                        //   gapX: values[0] + unit,
-                        //   gapY: values[1] + unit,
-                        //   gapSuffix: unit,
-                        //   linkedGapInput: linked,
-                        // });
-                    } }),
-                React.createElement(PositionSetting, { settings: { linkedPositionInput: false, positionSuffix: 'px' }, styles: { top: '10px', right: '20px', bottom: '30', left: '40' }, onChange: () => { } })),
-            React.createElement(Space, { size: 10, direction: "vertical" },
-                React.createElement(SettingWrapper, { vertical: true, label: "Background Image", containerStyle: { gap: '20px' } },
-                    React.createElement(UploadImage, { domainMedia: "https://sandbox-media-template.antsomi.com", slug: "cdp/api/v1", labelButtonSelect: "Select Toggle from Computor", labelHeadingModal: "Toggle Selection", searchPlaceholder: "Search toggle", paramConfigs: {
-                            token: '5474r2x214z294b423a4y474d4j5q274p4g494f4k5p5',
-                            userId: '1600084695',
-                            accountId: '1600084695',
-                        }, 
-                        // title="Background Image"
-                        selectedImage: {
-                            url: 'https://th.bing.com/th?id=OSK.8664d1b5838c79a3d74a3e97739978b5&w=148&h=148&c=7&o=6&dpr=2&pid=SANGAM',
-                        }, onChangeImage: image => { }, onRemoveImage: () => {
-                            // onChangeSettings('backgroundImageObj', {
-                            //   name: '',
-                            //   previewUrl: '',
-                            // });
-                        } })),
-                React.createElement(SettingWrapper, { vertical: true, label: "Icon" },
-                    React.createElement(IconSelection, { isOpen: false, labelHeadingModal: "Toggle Selection", searchPlaceholder: "Search for toggle...", icon: icon, onChange: handleSetIcon, iconTypes: ['cus', 'font-awesome'], onChangeSvg: value => {
-                            console.log('onChangeSvg', value);
-                        } }))))));
+    // return (
+    //   <ConfigProvider>
+    //     <div
+    //       style={{
+    //         width: 500,
+    //         height: 1000,
+    //         border: '1px solid black',
+    //         margin: '0 auto',
+    //         padding: 12,
+    //         borderRadius: '10px',
+    //         marginTop: 12,
+    //       }}
+    //     >
+    //       <h2 style={{ textAlign: 'center' }}>Test component of media template</h2>
+    //       <Space size={20} direction="vertical">
+    //         {/* <SettingWrapper vertical label="Color Setting">
+    //           <ColorSetting
+    //             label="Background Color"
+    //             labelStyling={{ color: THEME.token?.colorIcon }}
+    //             color={colorSettingState.color}
+    //             customColors={colorSettingState.customColors}
+    //             callback={callbackColorSetting}
+    //             onChange={handleChangeColorSetting}
+    //           />
+    //         </SettingWrapper>
+    //         <SettingWrapper vertical label="Input number with unit">
+    //           <InputNumberWithUnit
+    //             unit="px"
+    //             min={0}
+    //             max={2000}
+    //             value={700}
+    //             onChange={value => {
+    //               console.log('onChange:: ', value);
+    //             }}
+    //             onChangeUnit={unit => {
+    //               console.log('onChangeUnit:: ', unit);
+    //             }}
+    //           />
+    //         </SettingWrapper>
+    //         <SettingWrapper label="Radio Group">
+    //           <RadioGroup
+    //             options={Object.values(BACKGROUND_COLOR_STYLE)}
+    //             value={radioValue}
+    //             onChange={e => handleChangeRadio(e)}
+    //           />
+    //         </SettingWrapper> */}
+    //         <SettingWrapper vertical label="Color Setting">
+    //           <GradientSetting />
+    //         </SettingWrapper>
+    //         <SliderWithInputNumber
+    //           label="Size (px)"
+    //           labelStyling={{ marginTop: 10 }}
+    //           min={0}
+    //           max={100}
+    //           value={sliderValue}
+    //           onAfterChange={handleChangeSlider}
+    //         />
+    //         <EdgeSetting
+    //           label="Notification Spacing"
+    //           unit="px"
+    //           linked={false}
+    //           values={edge}
+    //           // edgeLabels={[t(translations.column.title), t(translations.row.title)]}
+    //           onChange={({ values, linked, unit }) => {
+    //             setEdge(values);
+    //             // onUpdateSettings({
+    //             //   gapX: values[0] + unit,
+    //             //   gapY: values[1] + unit,
+    //             //   gapSuffix: unit,
+    //             //   linkedGapInput: linked,
+    //             // });
+    //           }}
+    //         />
+    //         <PositionSetting
+    //           settings={{ linkedPositionInput: false, positionSuffix: 'px' }}
+    //           styles={{ top: '10px', right: '20px', bottom: '30', left: '40' }}
+    //           onChange={() => {}}
+    //         />
+    //       </Space>
+    //       <Space size={10} direction="vertical">
+    //         <SettingWrapper vertical label="Background Image" containerStyle={{ gap: '20px' }}>
+    //           <UploadImage
+    //             domainMedia="https://sandbox-media-template.antsomi.com"
+    //             slug="cdp/api/v1"
+    //             labelButtonSelect="Select Toggle from Computor"
+    //             labelHeadingModal="Toggle Selection"
+    //             searchPlaceholder="Search toggle"
+    //             paramConfigs={{
+    //               token: '5474r2x214z294b423a4y474d4j5q274p4g494f4k5p5',
+    //               userId: '1600084695',
+    //               accountId: '1600084695',
+    //             }}
+    //             // title="Background Image"
+    //             selectedImage={{
+    //               url: 'https://th.bing.com/th?id=OSK.8664d1b5838c79a3d74a3e97739978b5&w=148&h=148&c=7&o=6&dpr=2&pid=SANGAM',
+    //             }}
+    //             onChangeImage={image =>
+    //               // onChangeSettings('backgroundImageObj', {
+    //               //   name: image.name,
+    //               //   previewUrl: image.url,
+    //               // })
+    //               {}
+    //             }
+    //             onRemoveImage={() => {
+    //               // onChangeSettings('backgroundImageObj', {
+    //               //   name: '',
+    //               //   previewUrl: '',
+    //               // });
+    //             }}
+    //           />
+    //         </SettingWrapper>
+    //         <SettingWrapper vertical label="Icon">
+    //           <IconSelection
+    //             isOpen={false}
+    //             labelHeadingModal="Toggle Selection"
+    //             searchPlaceholder="Search for toggle..."
+    //             icon={icon}
+    //             onChange={handleSetIcon}
+    //             iconTypes={['cus', 'font-awesome']}
+    //             onChangeSvg={value => {
+    //               console.log('onChangeSvg', value);
+    //             }}
+    //           />
+    //         </SettingWrapper>
+    //       </Space>
+    //     </div>
+    //   </ConfigProvider>
+    // );
     // ------------------------ Media template components test end -------------------------
-    return (React.createElement("div", { style: { width: '500px', margin: '32px' } },
-        React.createElement(GradientSetting, { onChange: e => console.log('gradient change') }),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement(Slider, { className: "test-classname", min: -10, max: 10, onChange: e => console.log('slider change', e) }),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement(Rate, null),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement(Slider, { className: "test-classname" })));
+    // return (
+    //   <div style={{ width: '500px', margin: '32px' }}>
+    //     <GradientSetting onChange={e => console.log('gradient change')} />
+    //     <br />
+    //     <br />
+    //     <br />
+    //     <br />
+    //     <Slider
+    //       className="test-classname"
+    //       min={-10}
+    //       max={10}
+    //       onChange={e => console.log('slider change', e)}
+    //     />
+    //     <br />
+    //     <br />
+    //     <Rate />
+    //     <br />
+    //     <br />
+    //     <Slider className="test-classname" />
+    //   </div>
+    // );
 };
 const container = document.getElementById('root');
 const root = createRoot(container);

package/es/utils/common.d.ts

@@ -7,6 +7,8 @@
  */
 export declare const reorder: (list: Array<Record<string, unknown> | string | number>, startIndex: number, endIndex: number) => any[];
 export declare const safeParse: (val: any, defaultVal: any) => any;
+export declare const getObjectPropSafely: (fn: any, defaultValue?: string) => any;
+export declare const random: (number: any) => string;
 export declare function getPortalId(config: any): any;
 export declare const safeParseInt: (val: any, defaultVal: any) => any;
 export declare function isUrlEmbedded(): boolean;

package/es/utils/common.js

@@ -26,6 +26,22 @@ export const safeParse = (val, defaultVal) => {
     }
     return val;
 };
+export const getObjectPropSafely = (fn, defaultValue = '') => {
+    try {
+        return fn();
+    }
+    catch (e) {
+        return defaultValue;
+    }
+};
+export const random = number => {
+    let text = '';
+    const possible = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    for (let i = 0; i < number; i++) {
+        text += possible.charAt(Math.floor(Math.random() * possible.length));
+    }
+    return text;
+};
 export function getPortalId(config) {
     const portalId = safeParse(getSessionStorage('api_pid', config), 0);
     if (portalId === 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.3-beta.3",
+  "version": "1.3.3-beta.30",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -19,6 +19,7 @@
   "unpkg": "dist/index.js",
   "types": "es/index.d.ts",
   "scripts": {
+    "publish": "npm run clean && npm run build:es",
     "build:es": "npm run copy-files && npm run ts-compile",
     "clean": "rimraf dist lib es",
     "dev": "vite",
@@ -65,14 +66,18 @@
     "@fortawesome/free-solid-svg-icons": "6.1.1",
     "@fortawesome/react-fontawesome": "0.2.0",
     "@tinymce/tinymce-react": "^3.7.0",
-    "antd": "^5.3.2",
+    "antd": "5.12.6",
     "axios": "^1.4.0",
     "babel-plugin-file-loader": "^2.0.0",
     "dayjs": "^1.11.7",
     "font-awesome": "4.7.0",
     "highlight.js": "^11.8.0",
+    "html-entities": "^2.0.2",
     "html-to-image": "^1.11.11",
     "html2canvas": "^1.4.1",
+    "i18next": "21.6.16",
+    "i18next-browser-languagedetector": "6.1.2",
+    "immer": "^10.0.3",
     "lodash": "^4.17.21",
     "moment": "2.29.2",
     "qs": "6.10.3",
@@ -84,8 +89,7 @@
     "remark-gfm": "^3.0.1",
     "ts-dedent": "^2.2.0",
     "tui-image-editor": "^3.15.3",
-    "i18next": "21.6.16",
-    "i18next-browser-languagedetector": "6.1.2"
+    "use-immer": "^0.9.0"
   },
   "devDependencies": {
     "@ant-design/cssinjs": "^1.6.2",