@antscorp/antsomi-ui 1.3.5-beta.383 → 1.3.5-beta.385

package/es/components/molecules/EditableName/EditableName.js

@@ -3,12 +3,15 @@ import { InputWrapperStyled } from './styled';
 import { Input, Tooltip } from 'antd';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import Icon from '@antscorp/icons';
+import { useInView } from 'react-intersection-observer';
 import { Spin } from '../../atoms';
 export const EditableName = React.forwardRef((props, ref) => {
     var _a;
-    const { className, isLoading, defaultValue, required, error, value, style, readonly, maxLength, onBlur, onChange, } = props;
+    const { className, isLoading, required, error, value, style, readonly, maxLength, onBlur, onChange, } = props;
+    const defaultValue = useRef(props.defaultValue);
     const [inputWidth, setInputWidth] = useState(1);
-    const [internalValue, setInternalValue] = useState(value || defaultValue || '');
+    const [internalValue, setInternalValue] = useState(value || defaultValue.current || '');
+    const { ref: componentInViewRef, inView: componentInView } = useInView();
     const requiredError = useMemo(() => {
         const newValue = value ? value.trim() : internalValue.trim();
         return required && newValue.length === 0 ? 'This field is required' : '';
@@ -29,16 +32,14 @@ export const EditableName = React.forwardRef((props, ref) => {
     };
     useEffect(() => {
         var _a;
-        if (spanRef.current) {
-            spanRef.current.innerText = value || defaultValue || '';
-            setInputWidth(((_a = spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1);
-        }
-        // NOTE: the defaultValue props should need use only one time and don't change in component life circle
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-    return (React.createElement(InputWrapperStyled, { className: className || '', style: style },
+        if (!spanRef.current || !componentInView)
+            return;
+        spanRef.current.innerText = value || defaultValue.current || '';
+        setInputWidth(((_a = spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1);
+    }, [value, componentInView]);
+    return (React.createElement(InputWrapperStyled, { className: className || '', style: style, ref: componentInViewRef },
         React.createElement(Tooltip, { title: value || internalValue },
-            React.createElement(Input, { readOnly: readonly, ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue, value: value, onChange: event => {
+            React.createElement(Input, { readOnly: readonly, ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue.current, value: value, onChange: event => {
                     var _a;
                     const newValue = event.target.value;
                     if (spanRef.current)

package/es/components/molecules/EditorTab/EditorTab.d.ts

@@ -26,6 +26,7 @@ interface EditorTabProps {
     modalFuncProps?: ModalFuncProps;
     onActiveTab: (id: string) => void;
     onCloseTab: (tab: EditorTabItem, index: number, newTabs: EditorTabItem[]) => void;
+    onConfirmRemove?: (tab: EditorTabItem) => void;
     onConfigure: (id: string) => void;
     onSaveName?: (id: string, value: string) => void;
     onAddTab: () => void;

package/es/components/molecules/EditorTab/EditorTab.js

@@ -22,7 +22,7 @@ export const EditorTab = props => {
     var _a;
     const { listTab = [], activeId = '', showArrow, showDropdown, editNameOnConfigure, 
     // disabledScroll,
-    onCloseTab, onActiveTab, onAddTab, onConfigure, onSaveName, newTabText, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, confirmOnRemoveTab = true, modalFuncProps, } = props;
+    onCloseTab, onConfirmRemove, onActiveTab, onAddTab, onConfigure, onSaveName, newTabText, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, confirmOnRemoveTab = true, modalFuncProps, } = props;
     const [activeTabId, setActiveTabId] = useState(activeId || ((_a = listTab === null || listTab === void 0 ? void 0 : listTab[0]) === null || _a === void 0 ? void 0 : _a.id));
     const [arrTabs, setArrTabs] = useState(listTab || []);
     const [isEditable, setIsEditable] = useState();
@@ -49,7 +49,13 @@ export const EditorTab = props => {
     const handleAddNew = () => {
         onAddTab();
     };
-    const modalConfirmAsync = useCallback(() => modal.confirm(Object.assign({ title: 'Remove this tab', content: 'Removing this tab will delete it permanently. Are you sure you want to perform this action?', okText: 'Confirm', icon: React.createElement("span", { style: { display: 'none' } }), className: 'editor-tab__modal-confirm' }, modalFuncProps)), [modalFuncProps, modal]);
+    const modalConfirmAsync = useCallback((tab) => {
+        const modalInstance = modal.confirm(Object.assign({ title: 'Remove this tab', content: 'Removing this tab will delete it permanently. Are you sure you want to perform this action?', okText: 'Confirm', icon: React.createElement("span", { style: { display: 'none' } }), onOk: () => {
+                if (onConfirmRemove)
+                    return onConfirmRemove(tab);
+            }, className: 'editor-tab__modal-confirm', centered: true }, modalFuncProps));
+        return modalInstance;
+    }, [modalFuncProps, modal, onConfirmRemove]);
     const handleActiveTab = useCallback((tabId) => {
         setActiveTabId(tabId);
         if (onActiveTab)
@@ -60,7 +66,7 @@ export const EditorTab = props => {
         if (arrTabs.length < 2) {
             return;
         }
-        const isConfirm = confirmOnRemoveTab ? yield modalConfirmAsync() : true;
+        const isConfirm = confirmOnRemoveTab ? yield modalConfirmAsync(tab) : true;
         if (!isConfirm)
             return;
         if (activeTabId === tab.id) {
@@ -143,7 +149,7 @@ export const EditorTab = props => {
                                         break;
                                 }
                             }),
-                        }, placement: "bottomRight", trigger: ['click'], destroyPopupOnHide: true },
+                        }, placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true },
                         React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-three-dot-vertical", overlayStyle: { fontSize: 12 } }), size: "small" }))) : closeable ? (React.createElement(Button, { onClick: e => handleCloseTab(e, tab, idx), icon: React.createElement(Icon, { type: "icon-ants-remove-slim", overlayStyle: { fontSize: 12 } }), size: "small" })) : null));
             })
             : null),

package/es/components/organism/LeftMenu/hooks/usePermission.js

@@ -19,8 +19,13 @@ export const usePermission = () => {
     const { data: menuList } = useGetListMenu({
         args: {
             auth: {
-                token: '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4' || (auth === null || auth === void 0 ? void 0 : auth.token),
-                url: 'https://sandbox-permission.ants.vn',
+                token: ['development', 'sandbox'].includes(env)
+                    ? '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4'
+                    : auth === null || auth === void 0 ? void 0 : auth.token,
+                // url: 'https://sandbox-permission.ants.vn',
+                url: ['development', 'sandbox'].includes(env)
+                    ? 'https://sandbox-permission.ants.vn'
+                    : permissionDomain, // NOTE: Hard for sandbox, development
                 portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
                 userId: auth === null || auth === void 0 ? void 0 : auth.userId,
                 accountId: auth === null || auth === void 0 ? void 0 : auth.accountId,
@@ -30,7 +35,7 @@ export const usePermission = () => {
             },
         },
         options: {
-            enabled: !!(auth === null || auth === void 0 ? void 0 : auth.userId) && !!auth.portalId,
+            enabled: !!(auth === null || auth === void 0 ? void 0 : auth.userId) && !!auth.portalId && !!permissionDomain,
         },
     });
     const { data: dashboardData, refetch: refetchDashboard } = useGetDashboard({

package/es/components/template/Layout/Layout.js

@@ -130,7 +130,7 @@ export const Layout = memo(props => {
     return (React.createElement(LayoutWrapper, { showLeftMenu: !!showLeftMenu },
         React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { showLogo: !showLeftMenu })),
         React.createElement(Flex, { className: "layout-body" },
-            showLeftMenu && (React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${leftMenuClassName}`, appConfig: appConfig }, mergeLeftMenuProps, { onActiveMenuCodeChange: onActiveMenuCodeChange }))),
+            showLeftMenu && (React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${leftMenuClassName}` }, mergeLeftMenuProps, { appConfig: Object.assign(Object.assign({}, appConfig), { permissionDomain }), onActiveMenuCodeChange: onActiveMenuCodeChange }))),
             React.createElement(ContentWrapper, Object.assign({ "$noPadding": noPadding, "$noSpaceTopContent": noSpaceTopContent }, mergeContentWrapperProps), activeMenuCode === HOME_MENU_ITEMS.RECOMMENDATION.menu_item_code ? (React.createElement("div", { className: "layout-body__content" },
                 React.createElement(RecommendationWorkspace, null))) : (React.createElement("div", Object.assign({ className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }, mergeWorkSpaceProps),
                 React.createElement(NotificationWrapper, { ref: notificationWrapperRef },

package/es/config/index.d.ts

@@ -2,6 +2,7 @@ export declare const ENV: {
     readonly DEV: "development";
     readonly PROD: "production";
     readonly SANDBOX: "sandbox";
+    readonly STAGING: "staging";
 };
 export declare const isDev: boolean;
 export declare const ENDPOINT: {

package/es/config/index.js

@@ -3,6 +3,7 @@ export const ENV = {
     DEV: 'development',
     PROD: 'production',
     SANDBOX: 'sandbox',
+    STAGING: 'staging',
 };
 export const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'sandbox';
 /* VERSION */

package/es/constants/api.d.ts

@@ -5,11 +5,13 @@ export declare const TINYMCE_API_KEY = "scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflh
 export declare const CDP_API: {
     development: string;
     sandbox: string;
+    staging: string;
     production: string;
 };
 export declare const ISSUE_API: {
     development: string;
     sandbox: string;
+    staging: string;
     production: string;
 };
 export declare const PLATFORM_API = "https://platform.ants.tech";
@@ -20,18 +22,21 @@ export declare const APP_PERMISSION_DOMAIN: {
     [x: string]: {
         development: string;
         sandbox: string;
+        staging: string;
         production: string;
     };
 };
 export declare const PERMISSION_ENV_API: {
     development: string;
     sandbox: string;
+    staging: string;
     production: string;
 };
 export declare const APP_IAM_DOMAIN: {
     [x: string]: {
         development: string;
         sandbox: string;
+        staging: string;
         production: string;
     };
 };

package/es/constants/api.js

@@ -9,11 +9,13 @@ export const TINYMCE_API_KEY = 'scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35
 export const CDP_API = {
     [ENV.DEV]: 'https://sandbox-app.cdp.asia',
     [ENV.SANDBOX]: 'https://sandbox-app.cdp.asia',
+    [ENV.STAGING]: 'https://staging-cdp.antsomi.com',
     [ENV.PROD]: 'https://cdp.antsomi.com',
 };
 export const ISSUE_API = {
     [ENV.DEV]: 'https://sandbox-issue.antsomi.com',
     [ENV.SANDBOX]: 'https://sandbox-issue.antsomi.com',
+    [ENV.STAGING]: 'https://issue.antsomi.com',
     [ENV.PROD]: 'https://issue.antsomi.com',
 };
 export const PLATFORM_API = 'https://platform.ants.tech';
@@ -23,6 +25,7 @@ export const IAM_API = 'https://iam.ants.tech';
 const PERMISSION_URLS = {
     [ENV.DEV]: 'https://sandbox-permission.ants.vn',
     [ENV.SANDBOX]: 'https://sandbox-permission.ants.vn',
+    [ENV.STAGING]: 'https://permission.antsomi.com',
     [ENV.PROD]: 'https://permission.antsomi.com',
 };
 export const APP_PERMISSION_DOMAIN = {
@@ -34,11 +37,13 @@ export const APP_IAM_DOMAIN = {
     [DATAFLOWS]: {
         [ENV.DEV]: 'https://sandbox-aacm.ants.vn',
         [ENV.SANDBOX]: 'https://sandbox-aacm.ants.vn',
+        [ENV.STAGING]: 'https://iam.ants.tech',
         [ENV.PROD]: 'https://iam.ants.tech',
     },
     [APP_ANTALYSER]: {
         [ENV.DEV]: 'https://sandbox-aacm.ants.vn',
         [ENV.SANDBOX]: 'https://sandbox-aacm.ants.vn',
+        [ENV.STAGING]: 'https://iam.ants.tech',
         [ENV.PROD]: 'https://iam.ants.tech',
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.383",
+  "version": "1.3.5-beta.385",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -59,7 +59,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/icons": "0.27.36",
+    "@antscorp/icons": "0.27.37",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",
     "@dnd-kit/core": "^6.1.0",
@@ -111,6 +111,7 @@
     "react-draggable": "^4.4.5",
     "react-frame-component": "^5.2.6",
     "react-konva": "^18.2.10",
+    "react-intersection-observer": "^9.10.3",
     "react-markdown": "^8.0.7",
     "react-resizable": "^3.0.5",
     "react-syntax-highlighter": "^15.5.0",