@antscorp/antsomi-ui 1.3.5-beta.971 → 1.3.5-beta.973

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

package/es/components/molecules/DisplayFormat/DisplayFormatSettings.js

@@ -5,7 +5,7 @@ import { translate, translations } from '@antscorp/antsomi-locales';
 // Components
 import { FormatDatetime, FormatNumber, } from './components';
 import { EditIcon } from '../../icons';
-import { Button, Text } from '../../atoms';
+import { Button, Typography } from '../../atoms';
 // Utils
 import { formatDatetimeDF, formatNumberDF } from './utils';
 // Constants
@@ -43,14 +43,40 @@ export const DisplayFormatSettings = props => {
         if (displayFormatType === 'datetime') {
             formatDFValue = formatDatetimeDF(DATE_TIME_EXAMPLE, settings);
         }
-        return (_jsxs("div", { className: "ants-flex ants-flex-wrap ants-items-center ants-mt-1 ants-gap-2 ant-flex-row", style: { display: 'flex', alignItems: 'end', gap: '8px', marginBottom: '5px' }, ...rest, children: [_jsx(Text, { size: 11, className: "ants-flex", color: "#7F7F7F", dangerouslySetInnerHTML: {
-                        __html: `${translate(translations._ACT_PREVIEW)}: &nbsp;<bdo dir='ltr'>${formatDFValue}</bdo>`,
-                    } }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", style: {
+        return (_jsxs("div", { className: "ants-flex ants-items-center ants-mt-1 ants-gap-2 ant-flex-row", style: {
+                display: 'flex',
+                alignItems: 'end',
+                gap: '8px',
+                marginBottom: '5px',
+                flexShrink: 0,
+                width: '100%',
+                flexWrap: 'nowrap',
+                overflow: 'hidden',
+            }, ...rest, children: [_jsxs(Typography.Text
+                // size={11}
+                , { 
+                    // size={11}
+                    className: "ants-flex", style: {
+                        color: '#7F7F7F',
+                        fontSize: '11px',
+                        whiteSpace: 'nowrap',
+                        maxWidth: 'calc(89%)',
+                    }, children: [translate(translations._ACT_PREVIEW), ": \u00A0", _jsx(Typography.Text, { style: {
+                                color: '#7F7F7F',
+                                fontSize: '11px',
+                                whiteSpace: 'nowrap',
+                                maxWidth: 'calc(85%)',
+                            }, ellipsis: { tooltip: true }, children: _jsx("bdo", { dir: "ltr", children: formatDFValue }) })] }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", 
+                    // className={`ants-border-none transition-colors duration-300 rounded-md ${
+                    //   showDetailEdit ? 'bg-[#DEEFFE]' : 'hover:bg-[#E0F2FE]'
+                    // }`}
+                    style: {
                         marginTop: '1px',
                         backgroundColor: showDetailEdit ? '#DEEFFE' : 'transparent',
                         border: 'none',
                         boxShadow: 'none',
                         borderRadius: '5px',
+                        flexShrink: 0,
                     }, onClick: () => setShowDetailEdit(prevShow => !prevShow) })] }));
     };
     const renderFormatSetting = () => {

package/es/components/molecules/DisplayFormat/components/FormatNumber.js

@@ -112,7 +112,7 @@ export const FormatNumber = (props) => {
                             ...settingValues,
                             isCompact: checked,
                         });
-                    }, children: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.compact) }) }), _jsx(Form.Item, { label: decimalPlacesLabel, style: { marginBottom: 12 }, colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, children: _jsxs("div", { style: { display: 'flex', marginLeft: '55px', gap: '15px' }, children: [_jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, disabled: decimalPlaces <= 0, onClick: () => onChangeSettingsHandle({
+                    }, children: translate(translations._TITL_EDIT_NUMBER_COMPACT) }) }), _jsx(Form.Item, { label: decimalPlacesLabel, style: { marginBottom: 12 }, colon: false, labelCol: { span: 11 }, wrapperCol: { span: 13 }, children: _jsxs("div", { style: { display: 'flex', marginLeft: '55px', gap: '15px' }, children: [_jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, disabled: decimalPlaces <= 0, onClick: () => onChangeSettingsHandle({
                                 ...settingValues,
                                 decimalPlaces: decimalPlaces - 1,
                             }), size: "small", icon: _jsx(DecreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) }), _jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, onClick: () => onChangeSettingsHandle({

package/es/components/molecules/DisplayFormat/constants.d.ts

@@ -149,3 +149,24 @@ export declare const DYNAMIC_CONTENT_DF_FORMAT_TYPE: {
     number: string;
     datetime: string;
 };
+export declare const TYPE_FORMAT_OPTIONS: {
+    SHORT: string;
+    MEDIUM: string;
+    LONG: string;
+};
+export declare const DATE_FORMAT_LIST_TEST: {
+    [x: string]: {
+        [x: string]: {
+            label: string;
+            value: string;
+        };
+    };
+};
+export declare const TIME_FORMAT_LIST_TEST: {
+    [x: string]: {
+        [x: string]: {
+            label: string;
+            value: string;
+        };
+    };
+};

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

@@ -239,3 +239,68 @@ export const DYNAMIC_CONTENT_DF_FORMAT_TYPE = {
     number: 'number',
     datetime: 'datetime',
 };
+export const TYPE_FORMAT_OPTIONS = {
+    SHORT: 'short',
+    MEDIUM: 'medium',
+    LONG: 'long',
+};
+export const DATE_FORMAT_LIST_TEST = {
+    [DATE_FORMAT_OPTIONS[0].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._DATE_SHORT_FORMAT1),
+            value: 'MM/DD/YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._DATE_MEDIUM_FORMAT1),
+            value: 'MMM DD, YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._DATE_LONG_FORMAT1),
+            value: 'MMMM DD, YYYY',
+        },
+    },
+    [DATE_FORMAT_OPTIONS[1].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._DATE_SHORT_FORMAT2),
+            value: 'DD/MM/YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._DATE_MEDIUM_FORMAT2),
+            value: 'DD MMM, YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._DATE_LONG_FORMAT2),
+            value: 'DD MMMM, YYYY',
+        },
+    },
+};
+export const TIME_FORMAT_LIST_TEST = {
+    [TIME_FORMAT_OPTIONS[0].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._TIME_SHORT_FOTMAT1),
+            value: 'h:mm A',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._TIME_MEDIUM_FORMAT1),
+            value: 'h:mm:ss A',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._TIME_LONG_FORMAT1),
+            value: 'h:mm:ss A [GMT]',
+        },
+    },
+    [TIME_FORMAT_OPTIONS[1].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._TIME_SHORT_FOTMAT2),
+            value: 'H:mm',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._TIME_MEDIUM_FORMAT2),
+            value: 'H:mm:ss',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._TIME_LONG_FORMAT2),
+            value: 'H:mm:ss [GMT]',
+        },
+    },
+};

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

@@ -12,6 +12,7 @@ type Option = {
 export interface InputSelectAttributeProps {
     sourceOptions: Option[];
     codeOptions: Option[];
+    label?: string;
     errorMsg?: string;
     value: Value;
     onChange: (newValueData: {

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { get, keyBy } from 'lodash';
 // Translations
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
 // Components
@@ -12,7 +13,7 @@ import { Modal } from '../Modal';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const InputSelectAttribute = (props) => {
-    const { value, errorMsg, sourceOptions, codeOptions, onChange } = props;
+    const { value, errorMsg, label, sourceOptions, codeOptions, onChange } = props;
     // States
     const [openModal, setOpenModal] = useState(false);
     const [attributeState, setAttributeState] = useState(() => {
@@ -24,6 +25,8 @@ const InputSelectAttribute = (props) => {
             code: '',
         };
     });
+    // Memoized
+    const mapCodeOpts = useMemo(() => keyBy(codeOptions, 'value'), [codeOptions]);
     const onOpenModal = useCallback(() => {
         setOpenModal(true);
     }, []);
@@ -51,7 +54,7 @@ const InputSelectAttribute = (props) => {
                     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 })] }));
+                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && _jsx(Tag, { children: get(mapCodeOpts, [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: 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: {
@@ -62,7 +65,7 @@ const InputSelectAttribute = (props) => {
     };
     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 => {
+                                    } })] }), _jsxs(Flex, { gap: 10, children: [_jsxs(Typography.Text, { style: { lineHeight: '30px', flexBasis: 130 }, children: [label || '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 }));
                                     } })] })] }) })] }));
 };

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,4 +3,5 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
+/// <reference types="react" />
 export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.971",
+  "version": "1.3.5-beta.973",
   "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.32",
+    "@antscorp/antsomi-locales": "1.0.33",
     "@ant-design/cssinjs": "^1.6.2",
     "@antscorp/icons": "0.27.54",
     "@antscorp/image-editor": "1.0.2",