@antscorp/antsomi-ui 1.3.5-beta.967 → 1.3.5-beta.969

package/es/components/molecules/InputSelectAttribute/index.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export type ValueType = 'input' | 'select';
+type Value = string | {
+    source: string;
+    code: string;
+} | null;
+type Option = {
+    [key: string]: any;
+    label: string;
+    value: string;
+};
+export interface InputSelectAttributeProps {
+    sourceOptions: Option[];
+    codeOptions: Option[];
+    errorMsg?: string;
+    value: Value;
+    onChange: (newValueData: {
+        value: Value;
+        valueType: ValueType;
+    }) => void;
+}
+declare const _default: import("react").MemoExoticComponent<(props: InputSelectAttributeProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/es/components/molecules/InputSelectAttribute/index.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Libraries
+import { memo, useCallback, useState } from 'react';
+// Translations
+import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
+// Components
+import Icon from '@antscorp/icons';
+import { StyledTag as Tag } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2/styled';
+import { Flex, Select, Typography } from 'antd';
+import { StyledSelect } from './styled';
+import { Modal } from '../Modal';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+const InputSelectAttribute = (props) => {
+    const { value, errorMsg, sourceOptions, codeOptions, onChange } = props;
+    // States
+    const [openModal, setOpenModal] = useState(false);
+    const [attributeState, setAttributeState] = useState(() => {
+        if (value && typeof value !== 'string') {
+            return value;
+        }
+        return {
+            source: '',
+            code: '',
+        };
+    });
+    const onOpenModal = useCallback(() => {
+        setOpenModal(true);
+    }, []);
+    const onDeselect = useCallback(() => {
+        onChange({ value: '', valueType: 'input' });
+    }, [onChange]);
+    const onHideModal = useCallback(() => {
+        setOpenModal(false);
+    }, []);
+    const onOk = useCallback(() => {
+        setOpenModal(false);
+        onChange({ value: attributeState, valueType: 'select' });
+    }, [attributeState, onChange]);
+    const onChangeInput = useCallback((val) => {
+        onChange({ value: val, valueType: 'input' });
+    }, [onChange]);
+    const renderInput = () => {
+        let element = null;
+        const isObjValue = value && typeof value !== 'string';
+        if (openModal || isObjValue) {
+            element = (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    height: 32,
+                    padding: '4px 12px 4px 4px',
+                    borderBottom: `1px solid ${errorMsg ? THEME.token?.colorError : THEME.token?.blue1}`,
+                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && _jsx(Tag, { children: value.code }) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
+        }
+        else {
+            element = (_jsx(StyledSelect, { mode: "multiple", options: [{ value: '', label: translate(translations.orSelectAField.title) }], notFoundContent: null, onSelect: onOpenModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, status: errorMsg ? 'error' : undefined, placeholder: typeof value === 'string' ? value : translate(translations.inputYourValue.title), "$isPlaceholder": !value, "$isError": !!errorMsg, dropdownStyle: {
+                    ...(openModal ? { display: 'none' } : {}),
+                } }));
+        }
+        return element;
+    };
+    return (_jsxs(_Fragment, { children: [renderInput(), errorMsg ? (_jsx(Typography.Text, { style: { marginLeft: 8, color: THEME.token?.red8, marginTop: 5 }, children: errorMsg })) : null, _jsx(Modal, { title: translate(translations._PREDICT_MODEL_SELECT_ATTRIBUTE, 'Select attribute'), okText: translate(translations._ACT_APPLY, 'Apply'), open: openModal, onOk: onOk, onCancel: onHideModal, children: _jsxs(Flex, { vertical: true, gap: 15, children: [_jsxs(Flex, { gap: 10, children: [_jsxs(Typography.Text, { style: { lineHeight: '30px', flexBasis: 130 }, children: [translate(translations._TITL_PERSONALIZATION_TYPE, 'Content Source'), _jsx("span", { style: { color: THEME.token?.red8 }, children: "\u00A0 *" })] }), _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), style: { flex: 1 }, options: sourceOptions, value: attributeState.source, onChange: newValue => {
+                                        setAttributeState(state => ({ ...state, source: newValue }));
+                                    } })] }), _jsxs(Flex, { gap: 10, children: [_jsxs(Typography.Text, { style: { lineHeight: '30px', flexBasis: 130 }, children: ["Allocated Code", _jsx("span", { style: { color: THEME.token?.red8 }, children: "\u00A0 *" })] }), _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), style: { flex: 1 }, value: attributeState.code, options: codeOptions, onChange: newValue => {
+                                        setAttributeState(state => ({ ...state, code: newValue }));
+                                    } })] })] }) })] }));
+};
+export default memo(InputSelectAttribute);

package/es/components/molecules/InputSelectAttribute/styled.d.ts

@@ -0,0 +1,14 @@
+export declare const StyledSelect: import("styled-components").StyledComponent<{
+    (props: import("@antscorp/antsomi-ui/es/components/molecules").SelectV2Props): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        suffixIcon: import("react/jsx-runtime").JSX.Element;
+        filterOption: (input: any, option: any) => boolean;
+        tagRender: (props: any) => import("react/jsx-runtime").JSX.Element;
+        containerStyle: {};
+        labelStyle: {};
+        clearIcon: import("react/jsx-runtime").JSX.Element;
+    };
+}, any, {
+    $isPlaceholder?: any;
+    $isError?: boolean | undefined;
+}, never>;

package/es/components/molecules/InputSelectAttribute/styled.js

@@ -0,0 +1,28 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Components
+import { SelectV2 as Select } from '@antscorp/antsomi-ui/es/components/molecules';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const StyledSelect = styled(Select) `
+  .antsomi-select-selection-search {
+    width: fit-content !important;
+  }
+
+  ${({ $isError }) => $isError
+    ? css `
+          .antsomi-select-selector {
+            box-shadow: none !important;
+          }
+        `
+    : css ``}
+
+  .antsomi-select-selection-placeholder {
+    ${props => !props.$isPlaceholder
+    ? css `
+            color: rgba(0, 0, 0, 0.85);
+            font-size: ${THEME.token?.fontSize}px;
+          `
+    : css ``}
+  }
+`;

package/es/components/molecules/TagifyInput/TagifyInput.js

@@ -23,7 +23,7 @@ import { DETECT_LINK, EMOJI, ERROR_TAG, FORCE_SHOW_TOOLTIP, INVALID_TAG, MESSAGE
 const { CUSTOM_TAG } = TAG_TYPE;
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, escapeHTML, status, readonly, readonlyTag, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes, mapErrorAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, } = props;
+    const { initialValue, escapeHTML, status, readonly, readonlyTag, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties = {}, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -534,7 +534,7 @@ const TagifyInput = forwardRef((props, ref) => {
     /*
      * Any map attribute change will sync label of the tags
      */
-    const makeValidLabelTags = useCallback((attributes, errorAttributes) => {
+    const makeValidLabelTags = useCallback((attributes, errorAttributes, tagProperties) => {
         if (tagifyRef.current && labelTagRefreshness) {
             const tagElements = tagifyRef.current.getTagElms();
             const { pattern, name: cachePatternName, acceptablePattern: acceptableType, } = patternHandlers[PERSONALIZE_PTN];
@@ -558,7 +558,7 @@ const TagifyInput = forwardRef((props, ref) => {
                         while ((match = regex.exec(value)) !== null) {
                             const [, personalizeContent] = match;
                             const [tagCode] = personalizeContent.split('||');
-                            const { label: tagLabel, isValid, message, type, isRemoved, canView, isArchived, isActive, isExpired, } = getPersonalizeTagInfo(tagCode, attributes, errorAttributes);
+                            const { label: tagLabel, isValid, message, type, isRemoved, canView, isArchived, isActive, isExpired, } = getPersonalizeTagInfo(tagCode, attributes, errorAttributes, tagProperties);
                             const isPromotionCode = type === PROMOTION_CODE;
                             const tagTextNode = tagifyRef.current?.getTagTextNode(tagElement);
                             /*
@@ -579,7 +579,7 @@ const TagifyInput = forwardRef((props, ref) => {
                                 tagElement.removeAttribute(READONLY_TAG);
                                 tagElement.removeAttribute(MESSAGE_TAG);
                                 // In case promotion pool has something wrong
-                                if (isPromotionCode && message) {
+                                if (message) {
                                     if (isRemoved || isArchived || !isActive || isExpired) {
                                         tagElement.setAttribute(ERROR_TAG, 'true');
                                         tagElement.setAttribute(MESSAGE_TAG, message);
@@ -594,10 +594,6 @@ const TagifyInput = forwardRef((props, ref) => {
                                         tagElement.setAttribute(MESSAGE_TAG, message);
                                     }
                                 }
-                                else if ((isArchived || !isActive || isExpired) && message) {
-                                    tagElement.setAttribute(ERROR_TAG, 'true');
-                                    tagElement.setAttribute(MESSAGE_TAG, message);
-                                }
                             }
                         }
                     }
@@ -837,10 +833,8 @@ const TagifyInput = forwardRef((props, ref) => {
      * Need to sync label of the tags if any map attribute is changed to make correct label
      * */
     useDeepCompareEffect(() => {
-        if (!_.isEmpty(mapAttributes)) {
-            makeValidLabelTags(mapAttributes, mapErrorAttributes);
-        }
-    }, [mapAttributes, mapErrorAttributes, makeValidLabelTags]);
+        makeValidLabelTags(mapAttributes, mapErrorAttributes, tagProperties);
+    }, [mapAttributes, mapErrorAttributes, tagProperties, makeValidLabelTags]);
     useLayoutEffect(() => {
         if (tagProperties) {
             executeTagProperties(tagProperties);
@@ -895,9 +889,7 @@ const TagifyInput = forwardRef((props, ref) => {
                 const content = parseTagStringToTagify(textValue, acceptableTagPattern);
                 tagifyRef.current.loadOriginalValues(content);
                 // Need to sync label of the tags if any map attribute is changed to make correct label
-                if (!_.isEmpty(mapAttributes)) {
-                    makeValidLabelTags(mapAttributes, mapErrorAttributes);
-                }
+                makeValidLabelTags(mapAttributes, mapErrorAttributes, tagProperties);
             }
         }
     }, [
@@ -906,6 +898,7 @@ const TagifyInput = forwardRef((props, ref) => {
         mapErrorAttributes,
         escapeHTML,
         acceptableTagPattern,
+        tagProperties,
         makeValidLabelTags,
     ]);
     useEffect(() => {

package/es/components/molecules/TagifyInput/constants.js

@@ -57,6 +57,7 @@ export const tagifyDefaultProps = {
     placeholder: undefined,
     minWidthPlaceholder: 130,
     acceptableTagPattern: DEFAULT_ACCEPT_TAGS,
+    mapErrorAttributes: {},
     onChange: () => { },
 };
 export const TAG_TYPE = {

package/es/components/molecules/TagifyInput/patternHandlers.d.ts

@@ -1,4 +1,4 @@
-import type { AcceptablePattern, MapAttributesProps, PatterTagName, PatternHandlerWrapper, TagTypeProperty } from './types';
+import type { AcceptablePattern, MapAttributesProps, PatterTagName, PatternHandlerWrapper, TagProperties, TagTypeProperty } from './types';
 interface TagInfo {
     label: string;
     type: string;
@@ -29,7 +29,7 @@ export declare function acceptablePatternChecking(pattern: AcceptablePattern, ac
  * @returns {string} The extracted custom tag ID if the tag type is a custom tag; otherwise, empty string.
  */
 export declare const getCustomTagId: (tagType: TagTypeProperty, mergeCode: string) => string;
-export declare const getPersonalizeTagInfo: (originalTag: string, mapAttributes?: MapAttributesProps, mapErrorAttributes?: MapAttributesProps) => TagInfo;
+export declare const getPersonalizeTagInfo: (originalTag: string, mapAttributes: MapAttributesProps, mapErrorAttributes: MapAttributesProps, tagProperties: TagProperties) => TagInfo;
 export declare const getShortLinkTagInfo: (params: {
     type: string;
     label: string;

package/es/components/molecules/TagifyInput/patternHandlers.js

@@ -244,7 +244,7 @@ const getLabelAttribute = (type, attributeName, subAttributeName, mapAttributes)
         mapping[combineAttribute]?.template_name ||
         combineAttribute);
 };
-export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttributes) => {
+export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttributes, tagProperties) => {
     try {
         const [type, attributeName, subAttributeName] = originalTag.split('.');
         const isCsGroup = type === CONTENT_SOURCE_GROUP;
@@ -261,12 +261,13 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttrib
             true,
             false,
         ];
-        if (!mapAttributes || (!mapAttributes[type] && !isCsGroup)) {
+        if (!has(mapAttributes, type) && !has(tagProperties, combineAttribute) && !isCsGroup) {
             // return fallback if no mapping
             return {
                 type,
                 label: attributeName || type,
                 isValid: false,
+                message: 'This tag does not exist anymore',
                 isRemoved,
                 canView,
                 isArchived,
@@ -281,60 +282,54 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttrib
         switch (type) {
             case PROMOTION_CODE: {
                 // Check if the code is exist in the map
-                if (mapAttributes[type] && attributeName) {
-                    const isExistPromotionPool = has(mapAttributes[type], attributeName);
-                    if (!isExistPromotionPool) {
-                        isValid = false;
-                        message = 'This pool does not exist anymore';
-                        if (mapErrorAttributes &&
-                            mapErrorAttributes[type] &&
-                            mapErrorAttributes[type][attributeName]) {
-                            const { 
-                            // isEdit = false,
-                            isView = false, isExist = true, isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes[type][attributeName] || {};
-                            if (!isExist) {
-                                // Case Pool Removed
-                                isRemoved = !isExist;
-                                message = translate(translations._PERSONALIZATION_TAG_ERR_REMOVED, 'This pool is removed');
-                            }
-                            else if (_isArchived) {
-                                // Case Pool is Archived
-                                isArchived = true;
-                                message = translate(translations._PERSONALIZATION_TAG_ERR_ATT_ARCHIVE, 'This attribute has been archived');
-                            }
-                            else if (!_isActive) {
-                                // Case Pool is Inactive
-                                isActive = false;
-                                message = translate(translations._PERSONALIZATION_TAG_ERR_POOL_DEACTIVATE, 'This pool has been deactivated. You have to turn it on to use');
-                            }
-                            else if (_isExpired) {
-                                // Case Pool is Expired
-                                isExpired = true;
-                                message = translate(translations._PERSONALIZATION_TAG_ERR_POOL_EXPIRE, 'This pool has expired, new codes could not be allocated');
-                            }
-                            else if (!isView) {
-                                // Case Pool Can't View
-                                canView = isView;
-                                message = translate(translations._PERMISSION_ERR_POOL, 'You do not have permission on this pool');
-                            }
+                const isExistPromotionPool = has(mapAttributes, [type, attributeName]) || has(tagProperties, attributeName);
+                if (!isExistPromotionPool) {
+                    isValid = false;
+                    message = 'This pool does not exist anymore';
+                    if (has(mapErrorAttributes, [type, attributeName])) {
+                        const { 
+                        // isEdit = false,
+                        isView = false, isExist = true, isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes?.[type]?.[attributeName] || {};
+                        if (!isExist) {
+                            // Case Pool Removed
+                            isRemoved = !isExist;
+                            message = translate(translations._PERSONALIZATION_TAG_ERR_REMOVED, 'This pool is removed');
+                        }
+                        else if (_isArchived) {
+                            // Case Pool is Archived
+                            isArchived = true;
+                            message = translate(translations._PERSONALIZATION_TAG_ERR_ATT_ARCHIVE, 'This attribute has been archived');
+                        }
+                        else if (!_isActive) {
+                            // Case Pool is Inactive
+                            isActive = false;
+                            message = translate(translations._PERSONALIZATION_TAG_ERR_POOL_DEACTIVATE, 'This pool has been deactivated. You have to turn it on to use');
+                        }
+                        else if (_isExpired) {
+                            // Case Pool is Expired
+                            isExpired = true;
+                            message = translate(translations._PERSONALIZATION_TAG_ERR_POOL_EXPIRE, 'This pool has expired, new codes could not be allocated');
+                        }
+                        else if (!isView) {
+                            // Case Pool Can't View
+                            canView = isView;
+                            message = translate(translations._PERMISSION_ERR_POOL, 'You do not have permission on this pool');
                         }
                     }
                 }
                 break;
             }
             default: {
-                if (mapAttributes[type] &&
-                    combineAttribute &&
-                    !has(mapAttributes[type], combineAttribute)) {
+                if (combineAttribute &&
+                    (!has(mapAttributes, [type, combineAttribute]) ||
+                        !has(tagProperties, [type, combineAttribute]))) {
                     isValid = false;
                     message = 'This attribute does not exist anymore';
                 }
-                if (mapErrorAttributes &&
-                    mapErrorAttributes[type] &&
-                    mapErrorAttributes[type][combineAttribute]) {
-                    const { isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes[type][combineAttribute] || {};
+                if (has(mapErrorAttributes, [type, combineAttribute])) {
+                    const { isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes?.[type]?.[combineAttribute] || {};
                     if (_isArchived) {
-                        // Case Pool is Archived
+                        // Case Tag is Archived
                         isArchived = true;
                         message = translate(translations._PERSONALIZATION_TAG_ERR_ATT_ARCHIVE, 'This attribute has been archived');
                     }

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

@@ -65,6 +65,7 @@ export * from './TagifyInput';
 export * from './EmojiCollections';
 export * from './EmojiPopover';
 export * from './DisplayFormat';
+export * from './InputSelectAttribute';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/components/molecules/index.js

@@ -65,6 +65,7 @@ export * from './TagifyInput';
 export * from './EmojiCollections';
 export * from './EmojiPopover';
 export * from './DisplayFormat';
+export * from './InputSelectAttribute';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.967",
+  "version": "1.3.5-beta.969",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -61,7 +61,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/antsomi-locales": "1.0.31",
+    "@antscorp/antsomi-locales": "1.0.32",
     "@ant-design/cssinjs": "^1.6.2",
     "@antscorp/icons": "0.27.54",
     "@antscorp/image-editor": "1.0.2",