diginet-core-ui 1.4.56-beta.4 → 1.4.57
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/components/form-control/calendar/function.js +1 -1
- package/components/form-control/calendar/index.js +1 -1
- package/components/form-control/date-range-picker/index.js +0 -1
- package/components/form-control/dropdown-box/index.js +21 -63
- package/components/form-control/number-input/index2.js +8 -12
- package/package.json +44 -78
- package/readme.md +4 -0
|
@@ -652,7 +652,7 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
|
|
|
652
652
|
color: 'primary',
|
|
653
653
|
type: 'h3',
|
|
654
654
|
ref: refs.content,
|
|
655
|
-
format: ['
|
|
655
|
+
format: ['lowercase']
|
|
656
656
|
}))), jsx("div", {
|
|
657
657
|
className: className.navigator.around
|
|
658
658
|
}, jsx(ButtonIcon, {
|
|
@@ -226,7 +226,7 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
226
226
|
* START EFFECT
|
|
227
227
|
*/
|
|
228
228
|
useEffect(() => {
|
|
229
|
-
if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)
|
|
229
|
+
if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)) {
|
|
230
230
|
if (isBeforeLimit(min, defaultValue)) {
|
|
231
231
|
onUpdate(min);
|
|
232
232
|
} else if (isAfterLimit(max, defaultValue)) {
|
|
@@ -752,7 +752,6 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
|
|
|
752
752
|
}
|
|
753
753
|
ipRef.current && ipRef.current.blur();
|
|
754
754
|
updateTempValues([]);
|
|
755
|
-
setOpenState(false);
|
|
756
755
|
};
|
|
757
756
|
const onClickOutside = e => {
|
|
758
757
|
if (ipConRef.current && !ipConRef.current.contains(e.target) && ipRef.current && !ipRef.current.contains(e.target) && pickerRef.current && !pickerRef.current.contains(e.target)) {
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
/** @jsxRuntime classic */
|
|
2
2
|
/** @jsx jsx */
|
|
3
3
|
import { css, jsx } from '@emotion/core';
|
|
4
|
-
import { ButtonIcon, InputBase, Label, Popover, PopoverBody
|
|
4
|
+
import { ButtonIcon, InputBase, Label, Popover, PopoverBody } from "../..";
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
|
-
import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState
|
|
6
|
+
import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
|
|
7
7
|
import { animation, borderColor, displayBlock, overflowHidden, parseHeight, parseMinWidth, positionRelative, scaleX } from "../../../styles/general";
|
|
8
8
|
import { useTheme } from "../../../theme";
|
|
9
9
|
import useThemeProps from "../../../theme/utils/useThemeProps";
|
|
10
10
|
import { classNames, getProp } from "../../../utils";
|
|
11
|
-
const regexBetween = /[^{}]+(?=})/g;
|
|
12
|
-
const regexInclude = /{|}/g;
|
|
13
11
|
const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
|
|
14
12
|
if (!reference) reference = useRef(null);
|
|
15
13
|
const theme = useTheme();
|
|
@@ -24,14 +22,10 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
|
|
|
24
22
|
});
|
|
25
23
|
const {
|
|
26
24
|
action = {},
|
|
27
|
-
allowInput,
|
|
28
25
|
bgColor: bgColorProp,
|
|
29
26
|
children,
|
|
30
27
|
className,
|
|
31
28
|
delayOnInput,
|
|
32
|
-
disabled,
|
|
33
|
-
displayExpr: displayExprProp,
|
|
34
|
-
error,
|
|
35
29
|
endIcon,
|
|
36
30
|
inputProps,
|
|
37
31
|
inputRef,
|
|
@@ -45,19 +39,10 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
|
|
|
45
39
|
placeholder,
|
|
46
40
|
startIcon,
|
|
47
41
|
style,
|
|
48
|
-
value
|
|
49
|
-
|
|
50
|
-
viewType,
|
|
51
|
-
helperTextProps
|
|
42
|
+
value,
|
|
43
|
+
viewType
|
|
52
44
|
} = props;
|
|
53
|
-
let displayExpr = displayExprProp;
|
|
54
45
|
const bgColor = typeof bgColorProp === 'string' ? getProp(colors, bgColorProp, bgColorProp) : bgColorProp;
|
|
55
|
-
const ErrorView = useMemo(() => {
|
|
56
|
-
return error ? jsx(HelperText, {
|
|
57
|
-
...helperTextProps,
|
|
58
|
-
disabled: disabled
|
|
59
|
-
}, error) : null;
|
|
60
|
-
}, [disabled, error, helperTextProps]);
|
|
61
46
|
const ref = useRef(null);
|
|
62
47
|
const dropdownBoxRef = useRef(null);
|
|
63
48
|
const timer = useRef(null);
|
|
@@ -100,28 +85,6 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
|
|
|
100
85
|
onClosed === null || onClosed === void 0 ? void 0 : onClosed();
|
|
101
86
|
}
|
|
102
87
|
};
|
|
103
|
-
|
|
104
|
-
/**
|
|
105
|
-
* Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
|
|
106
|
-
* @param data {object} rowData of dataSource
|
|
107
|
-
* @return {string}
|
|
108
|
-
*/
|
|
109
|
-
const displayValue = data => {
|
|
110
|
-
let text = '';
|
|
111
|
-
if (data || data === 0) {
|
|
112
|
-
displayExpr = displayExpr || valueExpr;
|
|
113
|
-
let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
|
|
114
|
-
// convert {id} - {name} to {<data[id]>} - {<data[name]>}
|
|
115
|
-
if (!mask && regexBetween.test(displayExpr)) {
|
|
116
|
-
var _displayExpr;
|
|
117
|
-
mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => (data === null || data === void 0 ? void 0 : data[_]) || '');
|
|
118
|
-
} else if (!mask) {
|
|
119
|
-
mask = typeof data !== 'object' ? data : '';
|
|
120
|
-
}
|
|
121
|
-
text = mask.toString().replace(regexInclude, '');
|
|
122
|
-
}
|
|
123
|
-
return text;
|
|
124
|
-
};
|
|
125
88
|
useLayoutEffect(() => {
|
|
126
89
|
if (ref.current) {
|
|
127
90
|
const {
|
|
@@ -167,17 +130,15 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
|
|
|
167
130
|
onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
|
|
168
131
|
}) : null;
|
|
169
132
|
};
|
|
170
|
-
const value = displayValue(valueProps);
|
|
171
133
|
return jsx(Fragment, null, jsx("div", {
|
|
172
134
|
ref: ref,
|
|
173
135
|
css: _DropdownBoxRootCSS,
|
|
174
|
-
className: classNames('DGN-UI-Dropdown-Box', className
|
|
136
|
+
className: classNames('DGN-UI-Dropdown-Box', className),
|
|
175
137
|
style: style
|
|
176
138
|
}, label ? jsx(Label, {
|
|
177
139
|
...labelProps
|
|
178
140
|
}, label) : null, jsx(InputBase, {
|
|
179
141
|
...inputProps,
|
|
180
|
-
readOnly: !allowInput,
|
|
181
142
|
style: inputStyle,
|
|
182
143
|
viewType: viewType,
|
|
183
144
|
inputRef: inputRef,
|
|
@@ -196,7 +157,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
|
|
|
196
157
|
anchor: ref.current,
|
|
197
158
|
width: popoverWidth,
|
|
198
159
|
onClose: closeDropdownBox
|
|
199
|
-
}, jsx(PopoverBody, null, children))
|
|
160
|
+
}, jsx(PopoverBody, null, children)));
|
|
200
161
|
}));
|
|
201
162
|
const DropdownBoxRootCSS = (bgColorProp, {
|
|
202
163
|
colors
|
|
@@ -205,17 +166,6 @@ const DropdownBoxRootCSS = (bgColorProp, {
|
|
|
205
166
|
${positionRelative};
|
|
206
167
|
${parseMinWidth(150)};
|
|
207
168
|
${parseHeight('max-content')};
|
|
208
|
-
&.error {
|
|
209
|
-
.DGN-UI-InputBase {
|
|
210
|
-
${borderColor(getProp(colors, 'semantic/danger'))};
|
|
211
|
-
&::before {
|
|
212
|
-
${borderColor(getProp(colors, 'semantic/danger'))};
|
|
213
|
-
}
|
|
214
|
-
&::after {
|
|
215
|
-
${borderColor(getProp(colors, 'semantic/danger'))};
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
169
|
.DGN-UI-InputBase {
|
|
220
170
|
background: ${bgColorProp ? bgColorProp === true ? getProp(colors, 'fill/disabled') : bgColorProp : 'inherit'} !important;
|
|
221
171
|
${openState && css`
|
|
@@ -233,6 +183,20 @@ const DropdownBoxCSS = ({
|
|
|
233
183
|
margin-top: ${spacing([1])};
|
|
234
184
|
${overflowHidden};
|
|
235
185
|
`;
|
|
186
|
+
|
|
187
|
+
// DropdownBox.defaultProps = {
|
|
188
|
+
// className: '',
|
|
189
|
+
// label: '',
|
|
190
|
+
// placeholder: '',
|
|
191
|
+
// startIcon: 'Search',
|
|
192
|
+
// endIcon: 'ArrowDown',
|
|
193
|
+
// openOnClickAt: 'icon',
|
|
194
|
+
// viewType: 'underlined',
|
|
195
|
+
// inputProps: {},
|
|
196
|
+
// delayOnInput: 700,
|
|
197
|
+
// zIndex: zIndexCORE(1),
|
|
198
|
+
// };
|
|
199
|
+
|
|
236
200
|
DropdownBox.propTypes = {
|
|
237
201
|
/** class for dropdown */
|
|
238
202
|
className: PropTypes.string,
|
|
@@ -269,12 +233,6 @@ DropdownBox.propTypes = {
|
|
|
269
233
|
/** the function will run after open */
|
|
270
234
|
onOpened: PropTypes.func,
|
|
271
235
|
/** the function will run after close */
|
|
272
|
-
onClosed: PropTypes.func
|
|
273
|
-
/** Error message displayed below the input. */
|
|
274
|
-
error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
|
|
275
|
-
/** If `true`, the component is disabled. */
|
|
276
|
-
disabled: PropTypes.bool,
|
|
277
|
-
/** If `true`, the input is enable. */
|
|
278
|
-
allowInput: PropTypes.bool
|
|
236
|
+
onClosed: PropTypes.func
|
|
279
237
|
};
|
|
280
238
|
export default DropdownBox;
|
|
@@ -49,7 +49,7 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
|
|
|
49
49
|
labelProps,
|
|
50
50
|
max: maxProp,
|
|
51
51
|
maxDigit,
|
|
52
|
-
min
|
|
52
|
+
min,
|
|
53
53
|
nonStyle,
|
|
54
54
|
onBlur,
|
|
55
55
|
onChange,
|
|
@@ -69,12 +69,9 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
|
|
|
69
69
|
viewType
|
|
70
70
|
} = props;
|
|
71
71
|
let max = maxProp;
|
|
72
|
-
let min = minProp;
|
|
73
72
|
let thousandSymbol = thousandSeparator;
|
|
74
73
|
let decimalSymbol = decimalSymbolProp;
|
|
75
74
|
let valueProps = valueProp;
|
|
76
|
-
if (!min && min !== 0) min = -Infinity;
|
|
77
|
-
if (!max && max !== 0) max = Infinity;
|
|
78
75
|
const pos = useRef(null);
|
|
79
76
|
const ref = useRef(null);
|
|
80
77
|
const globalRef = useRef({});
|
|
@@ -169,23 +166,22 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
|
|
|
169
166
|
return number;
|
|
170
167
|
}, [decimalSymbol]);
|
|
171
168
|
const _onInput = useCallback((e, flag) => {
|
|
172
|
-
var _e$target$value,
|
|
169
|
+
var _e$target$value, _valueT$toString$repl, _valueT$toString$repl2;
|
|
173
170
|
let valueT = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : e.value;
|
|
174
171
|
// xóa các số "0" đứng trước giá trị ví dụ: 0100, 0200 để tránh lỗi Octal literals are not allowed in strict mode
|
|
175
|
-
let limitValueT = valueT.split(/([+\-*/])/).map(a => parseFloat(a) || a).join('');
|
|
176
|
-
if (disabledNegative && eval(
|
|
177
|
-
if ((min || min === 0) && eval(
|
|
178
|
-
if ((max || max === 0) && eval(
|
|
179
|
-
valueT = parseNumberToMoney(
|
|
172
|
+
let limitValueT = (_valueT$toString$repl = (_valueT$toString$repl2 = valueT.toString().replaceAll(thousandSymbol, '')).replaceAll) === null || _valueT$toString$repl === void 0 ? void 0 : _valueT$toString$repl.call(_valueT$toString$repl2, decimalSymbol, '.').split(/([+\-*/])/).map(a => parseFloat(a) || a).join('');
|
|
173
|
+
if (disabledNegative && eval(limitValueT) <= 0 || limitValueT.includes('-')) limitValueT = 0;
|
|
174
|
+
if ((min || min === 0) && eval(limitValueT) <= min || min === 0 && limitValueT.includes('-')) limitValueT = min;
|
|
175
|
+
if ((max || max === 0) && eval(limitValueT) >= max) limitValueT = max;
|
|
176
|
+
valueT = parseNumberToMoney(limitValueT);
|
|
180
177
|
const returnValue = convertMoneyToNumber(valueT);
|
|
181
178
|
e.value = globalRef.current.value = !isNaN(parseFloat(returnValue)) ? parseFloat(returnValue) : null;
|
|
182
179
|
// e.target.value = globalRef.current.valueString = valueT || '';
|
|
183
180
|
// globalRef.current.returnValue = returnValue || '';
|
|
184
181
|
e.target.value = globalRef.current.valueString = valueT || '';
|
|
185
|
-
e.value = valueT;
|
|
186
182
|
globalRef.current.returnValue = returnValue || '';
|
|
187
183
|
onInput === null || onInput === void 0 ? void 0 : onInput(e);
|
|
188
|
-
setValue(
|
|
184
|
+
setValue(valueT);
|
|
189
185
|
if (flag) _onChange(e);
|
|
190
186
|
}, [min, max, decimalDigit]);
|
|
191
187
|
const _onBlur = useCallback(e => {
|
package/package.json
CHANGED
|
@@ -1,78 +1,44 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "diginet-core-ui",
|
|
3
|
-
"version": "1.4.
|
|
4
|
-
"description": "",
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"scripts": {
|
|
8
|
-
"start": "
|
|
9
|
-
"start
|
|
10
|
-
"build
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
"devDependencies": {
|
|
46
|
-
"@babel/cli": "^7.14.3",
|
|
47
|
-
"@babel/plugin-proposal-class-properties": "^7.13.0",
|
|
48
|
-
"@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
|
|
49
|
-
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
|
|
50
|
-
"@babel/plugin-proposal-optional-chaining": "^7.14.2",
|
|
51
|
-
"@babel/plugin-proposal-private-methods": "^7.18.6",
|
|
52
|
-
"@babel/plugin-proposal-private-property-in-object": "^7.18.6",
|
|
53
|
-
"@babel/preset-react": "^7.13.13",
|
|
54
|
-
"@storybook/addon-actions": "6.2.9",
|
|
55
|
-
"@storybook/addon-essentials": "6.2.9",
|
|
56
|
-
"@storybook/addon-links": "6.2.9",
|
|
57
|
-
"@storybook/addon-postcss": "^2.0.0",
|
|
58
|
-
"@storybook/react": "6.2.9",
|
|
59
|
-
"@storybook/test-runner": "^0.7.1",
|
|
60
|
-
"autoprefixer": "^10.3.1",
|
|
61
|
-
"babel-loader": "^8.2.2",
|
|
62
|
-
"eslint": "^8.4.1",
|
|
63
|
-
"eslint-plugin-react": "^7.27.1",
|
|
64
|
-
"eslint-plugin-regex": "^1.10.0",
|
|
65
|
-
"husky": "^7.0.4",
|
|
66
|
-
"jest": "^27.5.1",
|
|
67
|
-
"lint-staged": "^12.1.2",
|
|
68
|
-
"mkdirp": "^1.0.4",
|
|
69
|
-
"npm-run-all": "^4.1.5",
|
|
70
|
-
"onchange": "^7.1.0",
|
|
71
|
-
"postcss-flexbugs-fixes": "^5.0.2",
|
|
72
|
-
"react": "^17.0.1",
|
|
73
|
-
"react-dom": "^17.0.1",
|
|
74
|
-
"rimraf": "^3.0.2",
|
|
75
|
-
"run-script-os": "^1.1.6",
|
|
76
|
-
"sass": "1.58.3"
|
|
77
|
-
}
|
|
78
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "diginet-core-ui",
|
|
3
|
+
"version": "1.4.57",
|
|
4
|
+
"description": "The DigiNet core ui",
|
|
5
|
+
"homepage": "https://diginet.com.vn",
|
|
6
|
+
"main": "index.js",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"start-js": "react-scripts start --max_old_space_size=4096",
|
|
9
|
+
"start": "npx npm-run-all -p start-js",
|
|
10
|
+
"build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
|
|
11
|
+
"eject": "react-scripts eject",
|
|
12
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
13
|
+
},
|
|
14
|
+
"dependencies": {
|
|
15
|
+
"@emotion/core": "^10.0.35",
|
|
16
|
+
"prop-types": "^15.7.2",
|
|
17
|
+
"@emotion/css": "^11.11.0",
|
|
18
|
+
"@emotion/react": "^11.10.6"
|
|
19
|
+
},
|
|
20
|
+
"repository": {
|
|
21
|
+
"type": "git",
|
|
22
|
+
"url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
|
|
23
|
+
},
|
|
24
|
+
"keywords": [
|
|
25
|
+
"core ui",
|
|
26
|
+
"diginet"
|
|
27
|
+
],
|
|
28
|
+
"author": "rocachien",
|
|
29
|
+
"contributors": [
|
|
30
|
+
{
|
|
31
|
+
"name": "Chien Do",
|
|
32
|
+
"email": "rocachien@gmail.com"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"name": "Nhat Tran",
|
|
36
|
+
"email": "tranminhnhat1005@gmail.com"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"name": "Thuan Nguyen",
|
|
40
|
+
"email": "nt.thuan.hutech@gmail.com"
|
|
41
|
+
}
|
|
42
|
+
],
|
|
43
|
+
"license": "MIT"
|
|
44
|
+
}
|
package/readme.md
CHANGED
|
@@ -42,6 +42,10 @@ npm test
|
|
|
42
42
|
|
|
43
43
|
## Changelog
|
|
44
44
|
|
|
45
|
+
## 1.4.57
|
|
46
|
+
- \[Fixed\]: NumberInput – Fix NumberInput, even with the disabledNegative prop enabled, users can still paste negative values.
|
|
47
|
+
- \[Fixed\]: Dropdown – In the multiple dropdown, the avatar and name are wrapping to the next line
|
|
48
|
+
|
|
45
49
|
## 1.4.56
|
|
46
50
|
- \[Added\]: Icon – Add IconMenu MHRP29N0033, MHRP29N0034
|
|
47
51
|
- \[Added\]: Icon – Add Icon CelebrationColor
|