@antscorp/antsomi-ui 1.3.5-beta.984 → 1.3.5-beta.986

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

@@ -2,6 +2,6 @@
 export declare const EllipsisMiddle: React.FC<{
     suffixCount: number;
     children: string;
-    tooltip?: boolean;
+    tooltip?: string;
     style?: React.CSSProperties;
 }>;

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

@@ -5,5 +5,5 @@ export const EllipsisMiddle = ({ suffixCount, children, tooltip = false, style }
         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: { maxWidth: '100%', ...style }, ellipsis: { tooltip: tooltip ? children : false, suffix }, children: start }));
+    return (_jsx(Typography.Text, { style: style, ellipsis: { tooltip: tooltip ? _jsx("bdo", { dir: "ltr", children: tooltip }) : false, suffix }, children: start }));
 };

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

@@ -10,11 +10,14 @@ import { Button, EllipsisMiddle, Typography } from '../../atoms';
 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) {
@@ -50,21 +61,27 @@ export const DisplayFormatSettings = props => {
                 flexShrink: 0,
                 width: '100%',
                 flexWrap: 'nowrap',
-                overflow: 'hidden',
                 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"] }), _jsxs("div", { style: { display: 'inline-flex', maxWidth: '100%', alignItems: 'center' }, children: [_jsx(EllipsisMiddle, { style: {
+                    }, 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: '100%',
-                                maxWidth: displayFormatType === 'datetime' ? '100%' : 'calc(100% - 2.5px)',
-                            }, suffixCount: 7, tooltip: true, children: formatDFValue }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", style: {
+                                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',

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

@@ -118,7 +118,9 @@ export const FormatNumber = (props) => {
                             }), 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,
-                            }), 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({
+                            }), 
+                            // 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: 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({

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/es/components/molecules/TagifyInput/utils.js

@@ -403,7 +403,7 @@ export const isPersonalizeTagType = (type) => [
     CUSTOM_FN,
     CONTENT_SOURCE_GROUP,
     ALLOCATED_CODE,
-    CUSTOM_TAG,
+    // CUSTOM_TAG,
 ].includes(type);
 export const isShortLinkTagType = (type) => [SHORT_LINK_V2].includes(type);
 export const isCustomTagType = (type) => type === CUSTOM_TAG;

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.984",
+  "version": "1.3.5-beta.986",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -66,6 +66,7 @@
     "@antscorp/icons": "0.27.54",
     "@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",