@antscorp/antsomi-ui 1.3.5-beta.985 → 1.3.5-beta.986
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/atoms/Typography/EllipsisMiddle.d.ts +1 -1
- package/es/components/atoms/Typography/EllipsisMiddle.js +1 -1
- package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts +1 -0
- package/es/components/molecules/DisplayFormat/DisplayFormatSettings.js +22 -5
- package/es/components/molecules/DisplayFormat/components/FormatNumber.js +3 -1
- package/es/components/molecules/DisplayFormat/utils.js +17 -12
- package/es/components/template/TemplateListing/Loadable.d.ts +1 -0
- package/package.json +2 -1
|
@@ -5,5 +5,5 @@ export const EllipsisMiddle = ({ suffixCount, children, tooltip = false, style }
|
|
|
5
5
|
return _jsx(Typography.Text, { style: style, children: children });
|
|
6
6
|
const start = children.slice(0, children.length - suffixCount);
|
|
7
7
|
const suffix = children.slice(-suffixCount);
|
|
8
|
-
return (_jsx(Typography.Text, { style:
|
|
8
|
+
return (_jsx(Typography.Text, { style: style, ellipsis: { tooltip: tooltip ? _jsx("bdo", { dir: "ltr", children: tooltip }) : false, suffix }, children: start }));
|
|
9
9
|
};
|
|
@@ -10,11 +10,14 @@ import { Button, EllipsisMiddle, Typography } from '../../atoms';
|
|
|
10
10
|
import { formatDatetimeDF, formatNumberDF } from './utils';
|
|
11
11
|
// Constants
|
|
12
12
|
import { DATE_TIME_EXAMPLE, DATETIME_SETTINGS_DEFAULT, NUMBER_SETTINGS_DEFAULT, NUMBER_EXAMPLE, } from './constants';
|
|
13
|
+
// Json
|
|
14
|
+
import Currencies from './currencies.json';
|
|
13
15
|
export const DisplayFormatSettings = props => {
|
|
14
16
|
const { infos, url, displayFormatType, formatSettings, dynamicContentType, onSettingsChange, disabled, ...rest } = props;
|
|
15
17
|
const [settings, setSettings] = useState(formatSettings ??
|
|
16
18
|
(displayFormatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT));
|
|
17
19
|
const [showDetailEdit, setShowDetailEdit] = useState(false);
|
|
20
|
+
const [prefixSymbol, setPrefixSymbol] = useState(undefined);
|
|
18
21
|
useEffect(() => {
|
|
19
22
|
setSettings(displayFormatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT);
|
|
20
23
|
}, [displayFormatType]);
|
|
@@ -22,6 +25,14 @@ export const DisplayFormatSettings = props => {
|
|
|
22
25
|
if (Object.keys(formatSettings).length > 0) {
|
|
23
26
|
setSettings(formatSettings);
|
|
24
27
|
}
|
|
28
|
+
if (displayFormatType === 'currency' &&
|
|
29
|
+
formatSettings.prefixType === 'symbol' &&
|
|
30
|
+
Currencies[formatSettings.currencyCode].symbolOnLeft) {
|
|
31
|
+
setPrefixSymbol(Currencies[formatSettings.currencyCode].symbol);
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
34
|
+
setPrefixSymbol(undefined);
|
|
35
|
+
}
|
|
25
36
|
}, [formatSettings]);
|
|
26
37
|
const handleChangeFormat = (updatedSettings) => {
|
|
27
38
|
if (onSettingsChange) {
|
|
@@ -50,21 +61,27 @@ export const DisplayFormatSettings = props => {
|
|
|
50
61
|
flexShrink: 0,
|
|
51
62
|
width: '100%',
|
|
52
63
|
flexWrap: 'nowrap',
|
|
53
|
-
overflow: 'hidden',
|
|
54
64
|
marginTop: '5px',
|
|
55
65
|
}, ...rest, children: [_jsxs(Typography.Text, { className: "ants-flex", style: {
|
|
56
66
|
color: '#7F7F7F',
|
|
57
67
|
fontSize: '11px',
|
|
58
68
|
whiteSpace: 'nowrap',
|
|
59
69
|
maxWidth: '100%',
|
|
60
|
-
}, children: [translate(translations._ACT_PREVIEW), ": \u00A0"] }), _jsxs("div", { style: { display: 'inline-flex', maxWidth: '100%', alignItems: 'center' }, children: [_jsx(EllipsisMiddle, { style: {
|
|
70
|
+
}, 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: {
|
|
61
71
|
color: '#7F7F7F',
|
|
62
72
|
fontSize: '11px',
|
|
63
73
|
whiteSpace: 'nowrap',
|
|
64
74
|
flexShrink: 0,
|
|
65
|
-
width: '
|
|
66
|
-
|
|
67
|
-
|
|
75
|
+
width: displayFormatType === 'datetime'
|
|
76
|
+
? '100%'
|
|
77
|
+
: `calc(100% - (2px + ${translate(translations._ACT_PREVIEW).length * 0.35}px))`,
|
|
78
|
+
flexGrow: 1,
|
|
79
|
+
maxWidth: displayFormatType === 'datetime'
|
|
80
|
+
? '100%'
|
|
81
|
+
: prefixSymbol
|
|
82
|
+
? `calc(99% - (${prefixSymbol.length * 0.1}px + 1px))`
|
|
83
|
+
: `calc(100% - 2.5px)`,
|
|
84
|
+
}, 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: {
|
|
68
85
|
backgroundColor: showDetailEdit ? '#DEEFFE' : 'transparent',
|
|
69
86
|
border: 'none',
|
|
70
87
|
boxShadow: 'none',
|
|
@@ -118,7 +118,9 @@ export const FormatNumber = (props) => {
|
|
|
118
118
|
}), size: "small", icon: _jsx(DecreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) }), _jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, onClick: () => onChangeSettingsHandle({
|
|
119
119
|
...settingValues,
|
|
120
120
|
decimalPlaces: decimalPlaces + 1,
|
|
121
|
-
}),
|
|
121
|
+
}),
|
|
122
|
+
// disabled={decimalPlaces >= 100}
|
|
123
|
+
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({
|
|
122
124
|
...settingValues,
|
|
123
125
|
grouping: value,
|
|
124
126
|
}), 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({
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/* eslint-disable prefer-regex-literals */
|
|
2
2
|
// Libraries
|
|
3
3
|
import dayjs from 'dayjs';
|
|
4
|
-
import currencyFormatter from 'currency-formatter';
|
|
5
4
|
import { has, get, set } from 'lodash';
|
|
6
5
|
import 'dayjs/locale/vi';
|
|
6
|
+
import BigNumber from 'bignumber.js';
|
|
7
7
|
// Json
|
|
8
8
|
import Currencies from './currencies.json';
|
|
9
9
|
// Constants
|
|
@@ -114,12 +114,15 @@ export function formatNumberDF(number, fType, fOptions = {
|
|
|
114
114
|
});
|
|
115
115
|
let formatedCompactNumber;
|
|
116
116
|
if (item) {
|
|
117
|
-
const
|
|
117
|
+
const bigNum = new BigNumber(number);
|
|
118
|
+
const divisor = new BigNumber(item.value);
|
|
119
|
+
const numString = bigNum.div(divisor).toFixed(decimalPlaces);
|
|
120
|
+
const [integerPart, decimalPart] = numString.split('.');
|
|
121
|
+
const formattedInteger = new Intl.NumberFormat('en-US').format(Number(integerPart));
|
|
118
122
|
formatedCompactNumber =
|
|
119
|
-
|
|
120
|
-
decimal
|
|
121
|
-
|
|
122
|
-
}) + item.symbol;
|
|
123
|
+
formattedInteger.replace(/,/g, grouping !== 'none' ? grouping || '' : '') +
|
|
124
|
+
(decimalPart ? decimal + decimalPart : '') +
|
|
125
|
+
item.symbol;
|
|
123
126
|
}
|
|
124
127
|
else {
|
|
125
128
|
formatedCompactNumber = '0';
|
|
@@ -128,11 +131,13 @@ export function formatNumberDF(number, fType, fOptions = {
|
|
|
128
131
|
result.textNumberFormated = formatedCompactNumber;
|
|
129
132
|
}
|
|
130
133
|
else {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
134
|
+
const bigNum = new BigNumber(number);
|
|
135
|
+
const numString = bigNum.toFixed(decimalPlaces);
|
|
136
|
+
const [integerPart, decimalPart] = numString.split('.');
|
|
137
|
+
const formattedInteger = new Intl.NumberFormat('en-US').format(Number(integerPart));
|
|
138
|
+
result.textNumberFormated =
|
|
139
|
+
formattedInteger.replace(/,/g, grouping !== 'none' ? grouping || '' : '') +
|
|
140
|
+
(decimalPart ? decimal + decimalPart : '');
|
|
136
141
|
}
|
|
137
142
|
switch (fType) {
|
|
138
143
|
case 'percentage':
|
|
@@ -167,7 +172,7 @@ export function formatNumberDF(number, fType, fOptions = {
|
|
|
167
172
|
let html = result.textNumberFormated;
|
|
168
173
|
if (result.hasSymbol) {
|
|
169
174
|
if (result.symbolOnLeft) {
|
|
170
|
-
html = `${
|
|
175
|
+
html = `${html}`;
|
|
171
176
|
}
|
|
172
177
|
else {
|
|
173
178
|
html = `${html}${result.symbol}`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@antscorp/antsomi-ui",
|
|
3
|
-
"version": "1.3.5-beta.
|
|
3
|
+
"version": "1.3.5-beta.986",
|
|
4
4
|
"description": "An enterprise-class UI design language and React UI library.",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"dist/*",
|
|
@@ -66,6 +66,7 @@
|
|
|
66
66
|
"@antscorp/icons": "0.27.54",
|
|
67
67
|
"@antscorp/image-editor": "1.0.2",
|
|
68
68
|
"@antscorp/processing-notification": "^1.0.3",
|
|
69
|
+
"bignumber.js": "9.1.2",
|
|
69
70
|
"@dnd-kit/core": "^6.1.0",
|
|
70
71
|
"@dnd-kit/modifiers": "^7.0.0",
|
|
71
72
|
"@dnd-kit/sortable": "^8.0.0",
|