@antscorp/antsomi-ui 2.0.114 → 2.0.115

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

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Libraries
+import { memo, useCallback, useMemo, useState } from 'react';
+import { get, has, keyBy, upperFirst } from 'lodash';
+import { Flex, Form, Select, Tooltip, Typography } from 'antd';
+// Translations
+import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
+// Components
+import Icon from '@antscorp/icons';
+import { ModalV2 } from '../ModalV2';
+import { StyledTag as Tag } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2/styled';
+import { StyledSelect } from './styled';
+import { EmptyData } from '../EmptyData';
+import { Dashboard30Icon, ErrorIcon } from '../../icons';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { TAG_TYPE } from '../TagifyInput';
+const InputSelectAttribute = (props) => {
+    const { value, errorMsg, label, isErrorTag, sourceOptions = [], mapCodeOptions = {}, onChange, } = props;
+    const [form] = Form.useForm();
+    const sourceValue = Form.useWatch('source', form);
+    // States
+    const [openModal, setOpenModal] = useState(false);
+    const codeOptions = useMemo(() => {
+        if (sourceValue) {
+            return get(mapCodeOptions, sourceValue, []);
+        }
+        return [];
+    }, [sourceValue, mapCodeOptions]);
+    const initCodeTitleField = useMemo(() => {
+        if (sourceValue === TAG_TYPE.PROMOTION_CODE) {
+            return 'Allocated Code';
+        }
+        return upperFirst(translate(translations._ITEM_NAME_ATTRIBUTE, 'attribute'));
+    }, [sourceValue]);
+    const mapCodeBySource = useMemo(() => {
+        if (typeof value === 'string')
+            return {};
+        return keyBy(get(mapCodeOptions, value?.source, []), 'value');
+    }, [mapCodeOptions, value]);
+    const mapSourceOptions = useMemo(() => {
+        if (typeof value === 'string')
+            return {};
+        return keyBy(sourceOptions, 'value');
+    }, [sourceOptions, value]);
+    const getCodeDefaultBySource = useCallback((source) => get(mapCodeOptions, [source, '0', 'value'], ''), [mapCodeOptions]);
+    const onOpenModal = useCallback(() => {
+        if (value && typeof value !== 'string') {
+            const isExistCode = has(mapCodeBySource, [value?.code, 'label']);
+            const isExistSource = has(mapSourceOptions, [value?.source]);
+            form.setFieldsValue({
+                source: isExistSource ? value?.source : undefined,
+                code: isExistCode ? value?.code : undefined,
+            });
+        }
+        else {
+            const source = sourceOptions[0]?.value || '';
+            const code = getCodeDefaultBySource(source);
+            form.setFieldsValue({ source, code });
+        }
+        setOpenModal(true);
+    }, [value, mapCodeBySource, form, sourceOptions, mapSourceOptions, getCodeDefaultBySource]);
+    const onDeselect = useCallback(() => {
+        onChange({ value: '', valueType: 'input' });
+    }, [onChange]);
+    const onHideModal = useCallback(() => {
+        setOpenModal(false);
+    }, []);
+    const onAfterClose = useCallback(() => {
+        form.resetFields();
+    }, [form]);
+    const onOk = async () => {
+        try {
+            // Validate form fields before getting values
+            const values = await form.validateFields();
+            if (typeof values !== 'string') {
+                const newValue = {
+                    source: values?.source,
+                    code: values?.code,
+                };
+                onChange({ value: newValue, valueType: 'select' });
+            }
+            setOpenModal(false);
+        }
+        catch (errorInfo) {
+            // eslint-disable-next-line no-console
+            console.error('Validation Failed:', errorInfo);
+        }
+    };
+    const onChangeInput = useCallback((val) => {
+        onChange({ value: val, valueType: 'input' });
+    }, [onChange]);
+    const onValuesChange = useCallback((changedValues) => {
+        // If source changed -> set new code based on new source
+        if (changedValues?.source) {
+            const newCode = getCodeDefaultBySource(changedValues.source);
+            form.setFieldValue('code', newCode);
+        }
+    }, [form, getCodeDefaultBySource]);
+    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, { isError: isErrorTag, children: isErrorTag ? (_jsxs(Flex, { gap: 5, align: "center", children: ["Unknown", _jsx(Tooltip, { title: "The used dynamic content is removed", children: _jsx(ErrorIcon, { size: 16 }) })] })) : (_jsx(Typography.Text, { ellipsis: {
+                                    tooltip: get(mapCodeBySource, [value?.code, 'label'], value?.code),
+                                }, style: { maxWidth: 150 }, children: get(mapCodeBySource, [value?.code, 'label'], 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: 'Or select a field' }], 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(ModalV2, { title: translate(translations._PREDICT_MODEL_SELECT_ATTRIBUTE, 'Select attribute'), okText: translate(translations._ACT_APPLY, 'Apply'), open: openModal, onOk: onOk, onCancel: onHideModal, afterClose: onAfterClose, destroyOnClose: true, centered: true, children: _jsxs(Form, { colon: false, form: form, onValuesChange: onValuesChange, children: [_jsx(Form.Item, { label: translate(translations._TITL_PERSONALIZATION_TYPE, 'Content Source'), name: "source", required: true, labelCol: { span: 6 }, labelAlign: "left", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), options: sourceOptions, placeholder: "Please select an item" }) }), _jsx(Form.Item, { label: label || initCodeTitleField, required: true, labelCol: { span: 6 }, labelAlign: "left", name: "code", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), notFoundContent: _jsx(EmptyData, { size: "small", icon: _jsx(Dashboard30Icon, {}), description: "No personalized content in this journey" }), placeholder: "Please select an item", options: codeOptions }) })] }) })] }));
+};
+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,33 @@
+// 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-overflow .antsomi-select-selection-overflow-item {
+    flex: 1;
+
+    .antsomi-select-selection-search {
+      width: fit-content !important;
+      flex: 1;
+    }
+  }
+
+  ${({ $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/ItemNotFound/styled.js

@@ -1,29 +1,29 @@
 import { Flex } from 'antd';
 import styled from 'styled-components';
-export const ContainerModule = styled(Flex) `
-  height: ${props => (props.$height ? props.$height : '100%')};
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 5px;
-  .item-title {
-    display: flex;
-
-    .content-title {
-      font-size: 20px;
-      font-weight: bold;
-      color: #f29100;
-      margin-right: 5px;
-    }
-
-    .icon-title {
-      font-size: 24px;
-      color: #666666;
-    }
-  }
-
-  .item-body {
-    font-size: 12px;
-    color: #595959;
-  }
+export const ContainerModule = styled(Flex) `
+  height: ${props => (props.$height ? props.$height : '100%')};
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 5px;
+  .item-title {
+    display: flex;
+
+    .content-title {
+      font-size: 20px;
+      font-weight: bold;
+      color: #f29100;
+      margin-right: 5px;
+    }
+
+    .icon-title {
+      font-size: 24px;
+      color: #666666;
+    }
+  }
+
+  .item-body {
+    font-size: 12px;
+    color: #595959;
+  }
 `;

package/es/components/molecules/MatchAnySelect/components/ExtendValuePopup.js

@@ -15,14 +15,14 @@ import { splitTextByNewline } from '@antscorp/antsomi-ui/es/utils';
 const { borderRadius, blue1 } = globalToken || {};
 const { t } = i18nInstance;
 // Styled
-const TextArea = styled(props => _jsx(Input.TextArea, { ...props })) `
-  &.antsomi-input-borderless {
-    border: 1px solid ${blue1} !important;
-    border-radius: ${borderRadius}px;
-  }
-  ::-webkit-input-placeholder {
-    opacity: 1 !important;
-  }
+const TextArea = styled(props => _jsx(Input.TextArea, { ...props })) `
+  &.antsomi-input-borderless {
+    border: 1px solid ${blue1} !important;
+    border-radius: ${borderRadius}px;
+  }
+  ::-webkit-input-placeholder {
+    opacity: 1 !important;
+  }
 `;
 export const ExtendValuePopup = props => {
     // Props