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

package/es/components/atoms/InputDynamic/InputDynamic.js

@@ -15,6 +15,8 @@ import { getObjectPropSafely, random, safeParse } from '@antscorp/antsomi-ui/es/
 import { convertBreakTag, convertDivToBreakTag, convertHtmlText, genShortLinkValue, getInsertLinkPatternWithAppendSpaceEnd, getInsertPatternWithAppendSpaceEnd, handleUpdateInputPersonalization, initialValue, mapLabelPersonalization, pasteHtmlAtCaret, removeHtmlTag, spacingNonTracking, validateHTMLTags, createElement, getBgColorByContentSourceType, } from './utils';
 // Hooks
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const PATH = 'src/components/atoms/InputDynamic/InputDynamic.tsx';
 export const AllowDynamicType = {
     SHORTLINK: 'shortlink',
@@ -32,6 +34,7 @@ const defaultProps = {
         accountId: '1600085679',
         userId: '1600085679',
     },
+    disabled: false,
     showIndex: true,
     showDisplayFormat: true,
     isShowCustomFunction: true,
@@ -40,7 +43,7 @@ const defaultProps = {
     addMessageToQueue: () => { },
 };
 export const InputDynamic = (props) => {
-    const { value, isViewMode, errors, disabledOpts, canMultipleLine, allowDynamicOptions, showIndex, showDisplayFormat, isShowCustomFunction, apiConfig, onError, onChange, addMessageToQueue, } = props;
+    const { value, isViewMode, errors, disabledOpts, disabled, canMultipleLine, allowDynamicOptions, showIndex, showDisplayFormat, isShowCustomFunction, apiConfig, onError, onChange, addMessageToQueue, } = props;
     // States
     const [textValue, setTextValue] = useState(initialValue(value));
     const [initSelectedProperties, setInitSelectedProperties] = useState({
@@ -125,6 +128,8 @@ export const InputDynamic = (props) => {
         setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { visible: newChange })));
     }, []);
     const handleOpenChange = (newOpen) => {
+        if (disabled)
+            return;
         setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: '' })));
         setIsShowPopover(newOpen);
     };
@@ -433,6 +438,7 @@ export const InputDynamic = (props) => {
         return allowDynamicOptions.map((dynamicKey) => (React.createElement(DynamicItem, { key: dynamicKey, onClick: e => handleClickDynamicItem(e, dynamicKey) }, mapLabelPersonalization(dynamicKey))));
     };
     const renderAddPersonalizationView = () => {
+        var _a, _b;
         if (isViewMode) {
             return null;
         }
@@ -442,15 +448,25 @@ export const InputDynamic = (props) => {
         const hasOnlyShortlink = isOnlyOneOpt && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.includes(AllowDynamicType.SHORTLINK));
         const iconPersonalization = (React.createElement(Icon, { type: "icon-ants-person-alt", onClick: e => {
                 e.stopPropagation();
+                if (disabled || isRenderPopover)
+                    return;
                 // Open short link modal
                 if (hasOnlyShortlink) {
                     toggleShortLinkModal();
                 }
-                // Open Personalization modal
-                if (hasOnlyPersonalization) {
+                else if (hasOnlyPersonalization) {
+                    // Open Personalization modal
                     setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: '', visible: true })));
                 }
-            }, className: "customize-antsomi-profile", style: { width: 24, height: 24 } }));
+                else {
+                    toggleShortLinkModal();
+                }
+            }, className: "customize-antsomi-profile", style: {
+                width: 24,
+                height: 24,
+                color: disabled ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextDisabled : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary,
+                cursor: disabled ? 'not-allowed' : 'pointer',
+            } }));
         if (!isRenderPopover) {
             return iconPersonalization;
         }

package/es/components/atoms/InputDynamic/types.d.ts

@@ -12,6 +12,7 @@ export type InputDynamicProps = {
     value: string;
     isViewMode?: boolean;
     errors?: string[];
+    disabled?: boolean;
     disabledOpts?: DisableShortLinkTypeProps;
     allowDynamicOptions?: Array<AllowDynamicOptions>;
     showIndex?: boolean;

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 // Libraries
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Tooltip, theme } from 'antd';
 import dayjs from 'dayjs';
 import clsx from 'clsx';
@@ -183,7 +183,7 @@ export const AdvancedPicker = props => {
             });
         }
     }, [isOpen]);
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         try {
             if (option.dateType.value !== 'fixed') {
                 const newDate = calculationDateAdvanced(option.dateType.value, option.calculationType.value, option.calculationDate.value, option.value, format);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.3-beta.71",
+  "version": "1.3.3-beta.73",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -88,6 +88,7 @@
     "lodash": "^4.17.21",
     "moment": "2.29.2",
     "qs": "6.10.3",
+    "rc-picker": "^4.1.1",
     "react-color": "2.19.3",
     "react-draggable": "^4.4.5",
     "react-markdown": "^8.0.7",