@antscorp/antsomi-ui 2.0.59 → 2.0.60

package/es/components/atoms/Typography/EllipsisMiddle.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const EllipsisMiddle: React.FC<{
+    suffixCount: number;
+    children: string;
+    tooltip?: string;
+    style?: React.CSSProperties;
+}>;

package/es/components/atoms/Typography/EllipsisMiddle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from 'antd';
+export const EllipsisMiddle = ({ suffixCount, children, tooltip = false, style }) => {
+    if (children.length <= suffixCount)
+        return _jsx(Typography.Text, { style: style, children: children });
+    const start = children.slice(0, children.length - suffixCount);
+    const suffix = children.slice(-suffixCount);
+    return (_jsx(Typography.Text, { style: style, ellipsis: { tooltip: tooltip ? _jsx("bdo", { dir: "ltr", children: tooltip }) : false, suffix }, children: start }));
+};

package/es/components/atoms/Typography/index.d.ts

@@ -1 +1,2 @@
 export { Typography } from './Text';
+export { EllipsisMiddle } from './EllipsisMiddle';

package/es/components/atoms/Typography/index.js

@@ -1 +1,2 @@
 export { Typography } from './Text';
+export { EllipsisMiddle } from './EllipsisMiddle';

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

@@ -6,7 +6,7 @@ export { Radio, RadioGroupSub, RadioButton } from './Radio';
 export { Space } from './Space';
 export { Tag } from './Tag';
 export { Tooltip } from './Tooltip';
-export { Typography } from './Typography';
+export { Typography, EllipsisMiddle } from './Typography';
 export { Checkbox } from './Checkbox';
 export { message } from './Message';
 export { Segmented } from './Segmented';

package/es/components/atoms/index.js

@@ -6,7 +6,7 @@ export { Radio, RadioGroupSub, RadioButton } from './Radio';
 export { Space } from './Space';
 export { Tag } from './Tag';
 export { Tooltip } from './Tooltip';
-export { Typography } from './Typography';
+export { Typography, EllipsisMiddle } from './Typography';
 export { Checkbox } from './Checkbox';
 export { message } from './Message';
 export { Segmented } from './Segmented';

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

@@ -1,20 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // Libraries
 import { useEffect, useState } from 'react';
 import { translate, translations } from '@antscorp/antsomi-locales';
 // Components
 import { FormatDatetime, FormatNumber, } from './components';
 import { EditIcon } from '../../icons';
-import { Button, Text } from '../../atoms';
+import { Button, EllipsisMiddle, Typography } from '../../atoms';
 // Utils
 import { formatDatetimeDF, formatNumberDF } from './utils';
 // Constants
 import { DATE_TIME_EXAMPLE, DATETIME_SETTINGS_DEFAULT, NUMBER_SETTINGS_DEFAULT, NUMBER_EXAMPLE, } from './constants';
+// Json
+import Currencies from './currencies.json';
 export const DisplayFormatSettings = props => {
     const { infos, url, displayFormatType, formatSettings, dynamicContentType, onSettingsChange, disabled, ...rest } = props;
     const [settings, setSettings] = useState(formatSettings ??
         (displayFormatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT));
     const [showDetailEdit, setShowDetailEdit] = useState(false);
+    const [prefixSymbol, setPrefixSymbol] = useState(undefined);
     useEffect(() => {
         setSettings(displayFormatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT);
     }, [displayFormatType]);
@@ -22,6 +25,14 @@ export const DisplayFormatSettings = props => {
         if (Object.keys(formatSettings).length > 0) {
             setSettings(formatSettings);
         }
+        if (displayFormatType === 'currency' &&
+            formatSettings.prefixType === 'symbol' &&
+            Currencies[formatSettings.currencyCode].symbolOnLeft) {
+            setPrefixSymbol(Currencies[formatSettings.currencyCode].symbol);
+        }
+        else {
+            setPrefixSymbol(undefined);
+        }
     }, [formatSettings]);
     const handleChangeFormat = (updatedSettings) => {
         if (onSettingsChange) {
@@ -43,15 +54,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: {
-                        marginTop: '1px',
-                        backgroundColor: showDetailEdit ? '#DEEFFE' : 'transparent',
-                        border: 'none',
-                        boxShadow: 'none',
-                        borderRadius: '5px',
-                    }, onClick: () => setShowDetailEdit(prevShow => !prevShow) })] }));
+        return (_jsxs("div", { className: "ants-flex ants-items-center ant-flex-row", style: {
+                display: 'flex',
+                alignItems: 'center',
+                marginBottom: '5px',
+                flexShrink: 0,
+                width: '100%',
+                flexWrap: 'nowrap',
+                marginTop: '5px',
+            }, ...rest, children: [_jsxs(Typography.Text, { className: "ants-flex", style: {
+                        color: '#7F7F7F',
+                        fontSize: '11px',
+                        whiteSpace: 'nowrap',
+                        maxWidth: '100%',
+                    }, children: [translate(translations._ACT_PREVIEW), ": \u00A0"] }), prefixSymbol && (_jsx("bdo", { dir: "ltr", style: { color: '#7F7F7F', fontSize: '11px' }, children: prefixSymbol })), _jsxs("div", { style: { display: 'inline-flex', maxWidth: '100%', alignItems: 'center' }, dir: "ltr", children: [_jsx(EllipsisMiddle, { style: {
+                                color: '#7F7F7F',
+                                fontSize: '11px',
+                                whiteSpace: 'nowrap',
+                                flexShrink: 0,
+                                width: displayFormatType === 'datetime'
+                                    ? '100%'
+                                    : `calc(100% - (2px + ${translate(translations._ACT_PREVIEW).length * 0.35}px))`,
+                                flexGrow: 1,
+                                maxWidth: displayFormatType === 'datetime'
+                                    ? '100%'
+                                    : prefixSymbol
+                                        ? `calc(99% - (${prefixSymbol.length * 0.1}px + 1px))`
+                                        : `calc(100% - 2.5px)`,
+                            }, suffixCount: 7, tooltip: prefixSymbol ? `${prefixSymbol}${formatDFValue}` : formatDFValue, children: formatDFValue }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", style: {
+                                backgroundColor: showDetailEdit ? '#DEEFFE' : 'transparent',
+                                border: 'none',
+                                boxShadow: 'none',
+                                borderRadius: '5px',
+                                flexShrink: 0,
+                            }, onClick: () => setShowDetailEdit(prevShow => !prevShow) })] })] }));
     };
     const renderFormatSetting = () => {
         switch (displayFormatType) {

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

@@ -112,18 +112,18 @@ 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: 12 }, wrapperCol: { span: 12 }, 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({
                                 ...settingValues,
                                 decimalPlaces: decimalPlaces + 1,
-                            }), size: "small", icon: _jsx(IncreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) })] }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_GROUPING) }), _jsx(Tooltip, { placement: "top", title: t(translations.dynamicContent.modal.label.formNumberDisplayFormat
-                                .groupingIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, children: _jsx(Select, { style: { width: 100 }, value: grouping, onChange: value => onChangeSettingsHandle({
+                            }), 
+                            // disabled={decimalPlaces >= 100}
+                            size: "small", icon: _jsx(IncreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) })] }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_GROUPING) }), _jsx(Tooltip, { placement: "top", title: translate(translations._TOOLTIP__DISPLAY_DECIMAL), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, children: _jsx(Select, { style: { width: 100 }, value: grouping, onChange: value => onChangeSettingsHandle({
                         ...settingValues,
                         grouping: value,
-                    }), options: listGroupingSeparatorOptions }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_DECIMAL) }), _jsx(Tooltip, { placement: "top", title: t(translations.dynamicContent.modal.label.formNumberDisplayFormat
-                                .decimalIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), labelCol: { span: 10 }, wrapperCol: { span: 14 }, colon: false, children: _jsx(Select, { style: { width: 100 }, value: decimal, onChange: value => onChangeSettingsHandle({
+                    }), options: listGroupingSeparatorOptions }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_DECIMAL) }), _jsx(Tooltip, { placement: "top", title: translate(translations._TOOLTIP__DISPLAY_GROUPING), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), labelCol: { span: 10 }, wrapperCol: { span: 14 }, colon: false, children: _jsx(Select, { style: { width: 100 }, value: decimal, onChange: value => onChangeSettingsHandle({
                         ...settingValues,
                         decimal: value,
                     }), options: listDecimalSeparatorOptions }) })] }));

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/DisplayFormat/utils.js

@@ -1,9 +1,9 @@
 /* eslint-disable prefer-regex-literals */
 // Libraries
 import dayjs from 'dayjs';
-import currencyFormatter from 'currency-formatter';
 import { has, get, set } from 'lodash';
 import 'dayjs/locale/vi';
+import BigNumber from 'bignumber.js';
 // Json
 import Currencies from './currencies.json';
 // Constants
@@ -114,12 +114,15 @@ export function formatNumberDF(number, fType, fOptions = {
         });
         let formatedCompactNumber;
         if (item) {
-            const compactNumber = (number / item.value).toFixed(decimalPlaces).replace(rx, '$1');
+            const bigNum = new BigNumber(number);
+            const divisor = new BigNumber(item.value);
+            const numString = bigNum.div(divisor).toFixed(decimalPlaces);
+            const [integerPart, decimalPart] = numString.split('.');
+            const formattedInteger = new Intl.NumberFormat('en-US').format(Number(integerPart));
             formatedCompactNumber =
-                currencyFormatter.format(Number(compactNumber), {
-                    decimal,
-                    precision: decimalPlaces,
-                }) + item.symbol;
+                formattedInteger.replace(/,/g, grouping !== 'none' ? grouping || '' : '') +
+                    (decimalPart ? decimal + decimalPart : '') +
+                    item.symbol;
         }
         else {
             formatedCompactNumber = '0';
@@ -128,11 +131,13 @@ export function formatNumberDF(number, fType, fOptions = {
         result.textNumberFormated = formatedCompactNumber;
     }
     else {
-        result.textNumberFormated = currencyFormatter.format(number, {
-            thousand: grouping === 'none' ? '' : grouping,
-            decimal,
-            precision: decimalPlaces,
-        });
+        const bigNum = new BigNumber(number);
+        const numString = bigNum.toFixed(decimalPlaces);
+        const [integerPart, decimalPart] = numString.split('.');
+        const formattedInteger = new Intl.NumberFormat('en-US').format(Number(integerPart));
+        result.textNumberFormated =
+            formattedInteger.replace(/,/g, grouping !== 'none' ? grouping || '' : '') +
+                (decimalPart ? decimal + decimalPart : '');
     }
     switch (fType) {
         case 'percentage':
@@ -167,7 +172,7 @@ export function formatNumberDF(number, fType, fOptions = {
     let html = result.textNumberFormated;
     if (result.hasSymbol) {
         if (result.symbolOnLeft) {
-            html = `${result.symbol}${html}`;
+            html = `${html}`;
         }
         else {
             html = `${html}${result.symbol}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.59",
+  "version": "2.0.60",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -64,6 +64,7 @@
     "@antscorp/antsomi-locales": "1.0.49",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",
+    "bignumber.js": "9.1.2",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",