diginet-core-ui 1.4.55-beta.8.5 → 1.4.56
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/index.js +76 -23
- package/components/form-control/dropdown-box/index.js +21 -63
- package/components/form-control/number-input/index2.js +5 -9
- package/package.json +44 -78
- package/readme.md +7 -0
- package/utils/type.js +29 -1
|
@@ -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)) {
|
|
@@ -11,6 +11,7 @@ import { animation, bgColor, border, borderBottom, borderBottomColor, borderColo
|
|
|
11
11
|
import { useTheme } from "../../../theme";
|
|
12
12
|
import useThemeProps from "../../../theme/utils/useThemeProps";
|
|
13
13
|
import { classNames, getProp, isMobile, randomString } from "../../../utils";
|
|
14
|
+
import { isEmpty, typeOf } from "../../../utils/type";
|
|
14
15
|
const currentValue = {},
|
|
15
16
|
isSearch = {},
|
|
16
17
|
allValue = {};
|
|
@@ -135,6 +136,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
135
136
|
const loadMoreTimer = useRef(null);
|
|
136
137
|
const dataChosen = useRef([]);
|
|
137
138
|
const popupRef = useRef(null);
|
|
139
|
+
const valueObjectDefaultInit = useRef({});
|
|
138
140
|
const filter = useRef({
|
|
139
141
|
skip: skip || 0,
|
|
140
142
|
limit: limit || 50
|
|
@@ -322,8 +324,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
322
324
|
let text = '';
|
|
323
325
|
let isReplace = true;
|
|
324
326
|
if (data || data === 0) {
|
|
327
|
+
var _data$displayExpr;
|
|
325
328
|
displayExpr = displayExpr || valueExpr;
|
|
326
|
-
let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
|
|
329
|
+
let mask = typeOf(data === null || data === void 0 ? void 0 : data[displayExpr], 'array') ? ((_data$displayExpr = data[displayExpr]) === null || _data$displayExpr === void 0 ? void 0 : _data$displayExpr[0]) || '' : data === null || data === void 0 ? void 0 : data[displayExpr];
|
|
327
330
|
// convert {id} - {name} to {<data[id]>} - {<data[name]>}
|
|
328
331
|
if (selectAll && (data === null || data === void 0 ? void 0 : data[valueExpr]) === 'all') {
|
|
329
332
|
isReplace = false;
|
|
@@ -342,6 +345,43 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
342
345
|
var _dataSourceUsable2;
|
|
343
346
|
const items = [];
|
|
344
347
|
let dataSourceUsable = [...dataSourceState];
|
|
348
|
+
if (vlObjDefaultState && (vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length) > 0 && isEmpty(txtSearch)) {
|
|
349
|
+
// Sẽ Xem Lại
|
|
350
|
+
// if (vlObjDefaultState && vlObjDefaultState?.length > 0) {
|
|
351
|
+
const length = vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length;
|
|
352
|
+
let existItemQuantity = 0;
|
|
353
|
+
for (let index = length - 1; index >= 0; index--) {
|
|
354
|
+
if ((vlObjDefaultState[index][valueExpr] || vlObjDefaultState[index][valueExpr] === 0) && !dataSourceUsable.some(data => data[valueExpr] === vlObjDefaultState[index][valueExpr])) {
|
|
355
|
+
if (isMultipleVal(vlObjDefaultState[index])) {
|
|
356
|
+
if (isEmpty(valueObjectDefaultInit.current)) {
|
|
357
|
+
let dataCloneDeep = {};
|
|
358
|
+
for (const name in vlObjDefaultState[index]) {
|
|
359
|
+
var _vlObjDefaultState$in;
|
|
360
|
+
if (name) dataCloneDeep[name] = (((_vlObjDefaultState$in = vlObjDefaultState[index]) === null || _vlObjDefaultState$in === void 0 ? void 0 : _vlObjDefaultState$in[name]) || []).map(item => item);
|
|
361
|
+
}
|
|
362
|
+
if (!isEmpty(dataCloneDeep)) valueObjectDefaultInit.current = dataCloneDeep;
|
|
363
|
+
const valueObjectDefaultOrigin = {
|
|
364
|
+
...valueObjectDefaultInit.current
|
|
365
|
+
} || {};
|
|
366
|
+
const arr = (valueObjectDefaultOrigin === null || valueObjectDefaultOrigin === void 0 ? void 0 : valueObjectDefaultOrigin[valueExpr]) || [];
|
|
367
|
+
for (let i = 0; i < arr.length; i++) {
|
|
368
|
+
let objData = {};
|
|
369
|
+
for (const name in valueObjectDefaultOrigin) {
|
|
370
|
+
var _valueObjectDefaultOr;
|
|
371
|
+
if (name) objData[name] = (valueObjectDefaultOrigin === null || valueObjectDefaultOrigin === void 0 ? void 0 : (_valueObjectDefaultOr = valueObjectDefaultOrigin[name]) === null || _valueObjectDefaultOr === void 0 ? void 0 : _valueObjectDefaultOr[i]) || '';
|
|
372
|
+
}
|
|
373
|
+
dataSourceUsable.unshift(objData);
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
} else dataSourceUsable.unshift(vlObjDefaultState[index]);
|
|
377
|
+
} else {
|
|
378
|
+
// Nếu số lượng phần tử của valueObjectDefault tồn tại trong dataSource nhiều hơn hoặc bằng limit thì không remove nữa
|
|
379
|
+
if (++existItemQuantity > limit) {
|
|
380
|
+
continue;
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
}
|
|
345
385
|
|
|
346
386
|
// search dataSource dựa trên txtSearch
|
|
347
387
|
if (!onInput) {
|
|
@@ -358,20 +398,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
358
398
|
});
|
|
359
399
|
}
|
|
360
400
|
}
|
|
361
|
-
if (vlObjDefaultState && (vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length) > 0) {
|
|
362
|
-
const length = vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length;
|
|
363
|
-
let existItemQuantity = 0;
|
|
364
|
-
for (let index = length - 1; index >= 0; index--) {
|
|
365
|
-
if ((vlObjDefaultState[index][valueExpr] || vlObjDefaultState[index][valueExpr] === 0) && !dataSourceUsable.some(data => data[valueExpr] === vlObjDefaultState[index][valueExpr])) {
|
|
366
|
-
dataSourceUsable.unshift(vlObjDefaultState[index]);
|
|
367
|
-
} else {
|
|
368
|
-
// Nếu số lượng phần tử của valueObjectDefault tồn tại trong dataSource nhiều hơn hoặc bằng limit thì không remove nữa
|
|
369
|
-
if (++existItemQuantity > limit) {
|
|
370
|
-
continue;
|
|
371
|
-
}
|
|
372
|
-
}
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
401
|
const length = (_dataSourceUsable2 = dataSourceUsable) === null || _dataSourceUsable2 === void 0 ? void 0 : _dataSourceUsable2.length;
|
|
376
402
|
for (let index = 0; index < length; index++) {
|
|
377
403
|
const data = dataSourceUsable[index];
|
|
@@ -402,7 +428,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
402
428
|
type: 'p1'
|
|
403
429
|
}, displayText);
|
|
404
430
|
if (multiple && selectBox) {
|
|
405
|
-
let checked = valueMulti.includes(value);
|
|
431
|
+
let checked = typeOf(value, 'array') ? valueMulti.some(item => value.includes(item)) : valueMulti.includes(value);
|
|
406
432
|
if (selectAll && value === 'all') checked = selectAll && value === 'all' && valueMulti.length > 0;
|
|
407
433
|
const isMaximumSelection = maximumSelectionLength === (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length);
|
|
408
434
|
itemDisabled = itemDisabled || isMaximumSelection && !checked;
|
|
@@ -486,7 +512,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
486
512
|
const dataSourceUsable = [...dataSourceState];
|
|
487
513
|
// Nếu có load more thì đẩy đội tượng mặc định lên đầu
|
|
488
514
|
let notExistItem = 0;
|
|
489
|
-
if (onLoadMore && vlObjDefaultState !== null && vlObjDefaultState !== void 0 && vlObjDefaultState.length) {
|
|
515
|
+
if (onLoadMore && vlObjDefaultState !== null && vlObjDefaultState !== void 0 && vlObjDefaultState.length && isEmpty(txtSearch)) {
|
|
516
|
+
// Sẽ Xem Lại
|
|
517
|
+
// if (onLoadMore && vlObjDefaultState?.length) {
|
|
490
518
|
const length = vlObjDefaultState.length;
|
|
491
519
|
for (let index = length - 1; index >= 0; index--) {
|
|
492
520
|
if (!dataSourceUsable.some(data => data[valueExpr] === vlObjDefaultState[index][valueExpr])) {
|
|
@@ -550,7 +578,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
550
578
|
} else {
|
|
551
579
|
item = jsx(Fragment, null, icon, text);
|
|
552
580
|
}
|
|
553
|
-
if (!dropdownListRef.current) {
|
|
581
|
+
if (!dropdownListRef.current || isEmpty(txtSearch)) {
|
|
554
582
|
return;
|
|
555
583
|
}
|
|
556
584
|
ReactDOM.render(item, dropdownListRef.current.appendChild(dropdownItem));
|
|
@@ -997,7 +1025,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
997
1025
|
if (valueProp !== undefined && (!dropdownListRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
|
|
998
1026
|
setValueIntoInput(valueProp);
|
|
999
1027
|
if (oneLiner && multiple) {
|
|
1000
|
-
const valueArray = sortMultiple(valueProp);
|
|
1028
|
+
const valueArray = sortMultiple(valueProp, true);
|
|
1001
1029
|
setValueMultiDisplay(valueArray === null || valueArray === void 0 ? void 0 : valueArray.display);
|
|
1002
1030
|
setValueMultiOverflow(valueArray === null || valueArray === void 0 ? void 0 : valueArray.overflow);
|
|
1003
1031
|
if ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.overflow.length) === 0 && openMultipleOverflow) {
|
|
@@ -1098,9 +1126,34 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
1098
1126
|
disabled: disabled,
|
|
1099
1127
|
...labelProps
|
|
1100
1128
|
}, label) : null, [label, required, disabled, labelProps]);
|
|
1129
|
+
const isMultipleVal = (objData = {}) => {
|
|
1130
|
+
let status = false;
|
|
1131
|
+
if (typeOf(objData === null || objData === void 0 ? void 0 : objData[valueExpr], 'array') && !isEmpty(objData === null || objData === void 0 ? void 0 : objData[valueExpr]) || typeOf(objData === null || objData === void 0 ? void 0 : objData[displayExpr], 'array') && !isEmpty(objData === null || objData === void 0 ? void 0 : objData[displayExpr])) {
|
|
1132
|
+
status = true;
|
|
1133
|
+
}
|
|
1134
|
+
return status;
|
|
1135
|
+
};
|
|
1101
1136
|
const getData = () => {
|
|
1137
|
+
var _valObjDefault;
|
|
1102
1138
|
let dataFilter = JSON.parse(JSON.stringify(dataSourceState));
|
|
1103
|
-
|
|
1139
|
+
let valObjDefault = vlObjDefaultState;
|
|
1140
|
+
if (isMultipleVal((_valObjDefault = valObjDefault) === null || _valObjDefault === void 0 ? void 0 : _valObjDefault[0])) {
|
|
1141
|
+
var _vlObjDefaultState$;
|
|
1142
|
+
valObjDefault = [];
|
|
1143
|
+
const arr = (vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : (_vlObjDefaultState$ = vlObjDefaultState[0]) === null || _vlObjDefaultState$ === void 0 ? void 0 : _vlObjDefaultState$[valueExpr]) || [];
|
|
1144
|
+
for (let i = 0; i < arr.length; i++) {
|
|
1145
|
+
let objData = {};
|
|
1146
|
+
for (const name in vlObjDefaultState[0]) {
|
|
1147
|
+
var _vlObjDefaultState$2;
|
|
1148
|
+
if (name) objData[name] = (_vlObjDefaultState$2 = vlObjDefaultState[0]) === null || _vlObjDefaultState$2 === void 0 ? void 0 : _vlObjDefaultState$2[name][i];
|
|
1149
|
+
}
|
|
1150
|
+
if (!isEmpty(objData)) valObjDefault.push(objData);
|
|
1151
|
+
}
|
|
1152
|
+
}
|
|
1153
|
+
dataFilter = uniqBy([...valObjDefault, ...dataFilter], data => {
|
|
1154
|
+
let result = data === null || data === void 0 ? void 0 : data[valueExpr];
|
|
1155
|
+
return result;
|
|
1156
|
+
});
|
|
1104
1157
|
return dataFilter;
|
|
1105
1158
|
};
|
|
1106
1159
|
const getTextWidth = text => {
|
|
@@ -1127,8 +1180,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
1127
1180
|
const inputWidth = inputElement === null || inputElement === void 0 ? void 0 : inputElement.clientWidth;
|
|
1128
1181
|
const items = [];
|
|
1129
1182
|
if ((valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) > 0) {
|
|
1183
|
+
const dataFilter = getData();
|
|
1130
1184
|
value.map((vl, index) => {
|
|
1131
|
-
const dataFilter = getData();
|
|
1132
1185
|
const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
|
|
1133
1186
|
if (data) {
|
|
1134
1187
|
const displayText = displayValue(data);
|
|
@@ -1181,8 +1234,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
1181
1234
|
const renderMultipleItem = value => {
|
|
1182
1235
|
const items = [];
|
|
1183
1236
|
if ((valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) > 0) {
|
|
1237
|
+
const dataFilter = getData();
|
|
1184
1238
|
value.map((vl, index) => {
|
|
1185
|
-
const dataFilter = getData();
|
|
1186
1239
|
const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
|
|
1187
1240
|
if (data) {
|
|
1188
1241
|
const displayText = displayValue(data);
|
|
@@ -1251,8 +1304,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
1251
1304
|
const renderOverflowPopover = value => {
|
|
1252
1305
|
const items = [];
|
|
1253
1306
|
if ((valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) > 0) {
|
|
1307
|
+
const dataFilter = getData();
|
|
1254
1308
|
value.map((vl, index) => {
|
|
1255
|
-
const dataFilter = getData();
|
|
1256
1309
|
const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
|
|
1257
1310
|
if (data) {
|
|
1258
1311
|
const displayText = displayValue(data);
|
|
@@ -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({});
|
|
@@ -171,19 +168,18 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
|
|
|
171
168
|
const _onInput = useCallback((e, flag) => {
|
|
172
169
|
var _e$target$value;
|
|
173
170
|
let valueT = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : e.value;
|
|
174
|
-
if (disabledNegative &&
|
|
175
|
-
if ((min || min === 0) &&
|
|
176
|
-
if ((max || max === 0) &&
|
|
171
|
+
if (disabledNegative && eval(valueT || 0) <= 0 || valueT.includes('-')) valueT = 0;
|
|
172
|
+
if ((min || min === 0) && eval(valueT) <= min || min === 0 && valueT.includes('-')) valueT = min;
|
|
173
|
+
if ((max || max === 0) && eval(valueT) >= max) valueT = max;
|
|
177
174
|
valueT = parseNumberToMoney(valueT);
|
|
178
175
|
const returnValue = convertMoneyToNumber(valueT);
|
|
179
176
|
e.value = globalRef.current.value = !isNaN(parseFloat(returnValue)) ? parseFloat(returnValue) : null;
|
|
180
177
|
// e.target.value = globalRef.current.valueString = valueT || '';
|
|
181
178
|
// globalRef.current.returnValue = returnValue || '';
|
|
182
179
|
e.target.value = globalRef.current.valueString = valueT || '';
|
|
183
|
-
e.value = valueT;
|
|
184
180
|
globalRef.current.returnValue = returnValue || '';
|
|
185
181
|
onInput === null || onInput === void 0 ? void 0 : onInput(e);
|
|
186
|
-
setValue(
|
|
182
|
+
setValue(valueT);
|
|
187
183
|
if (flag) _onChange(e);
|
|
188
184
|
}, [min, max, decimalDigit]);
|
|
189
185
|
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.56",
|
|
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,13 @@ npm test
|
|
|
42
42
|
|
|
43
43
|
## Changelog
|
|
44
44
|
|
|
45
|
+
## 1.4.56
|
|
46
|
+
- \[Added\]: Icon – Add IconMenu MHRP29N0033, MHRP29N0034
|
|
47
|
+
- \[Added\]: Icon – Add Icon CelebrationColor
|
|
48
|
+
- \[Fixed\]: Dropdown - Fix valueObjectDefault bug in Dropdown.
|
|
49
|
+
- \[Fixed\]: NumberInput – Fix issue where NumberInput allowed pasting negative values even when disabledNegative prop was enabled.
|
|
50
|
+
- \[Added\]: DateRangePicker – Add a new mode to change the UI of DateRangePicker
|
|
51
|
+
|
|
45
52
|
## 1.4.55
|
|
46
53
|
- \[Added\]: Icon – Add IconMenu MHRM09N1401, MHRM09N1402
|
|
47
54
|
- \[Added\]: Icon – Add Icon Book
|
package/utils/type.js
CHANGED
|
@@ -33,6 +33,34 @@ const isNumeric = object => {
|
|
|
33
33
|
const isObject = object => {
|
|
34
34
|
return type(object) === 'object';
|
|
35
35
|
};
|
|
36
|
+
const typeOf = (value, type) => {
|
|
37
|
+
const result = Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
|
|
38
|
+
return type ? result === String(type).toLowerCase() : result;
|
|
39
|
+
};
|
|
40
|
+
const isEmpty = (value, escapeZero = false) => {
|
|
41
|
+
switch (typeOf(value)) {
|
|
42
|
+
case 'object':
|
|
43
|
+
{
|
|
44
|
+
return value && Object.keys(value).length <= 0 || !value;
|
|
45
|
+
}
|
|
46
|
+
case 'array':
|
|
47
|
+
{
|
|
48
|
+
return value.length <= 0;
|
|
49
|
+
}
|
|
50
|
+
case 'string':
|
|
51
|
+
{
|
|
52
|
+
return !value;
|
|
53
|
+
}
|
|
54
|
+
case 'number':
|
|
55
|
+
{
|
|
56
|
+
if (!escapeZero) return value === 0 ? false : !value;else return !value;
|
|
57
|
+
}
|
|
58
|
+
default:
|
|
59
|
+
{
|
|
60
|
+
return !value;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
};
|
|
36
64
|
const isEmptyObject = object => {
|
|
37
65
|
let property;
|
|
38
66
|
for (property in object) {
|
|
@@ -66,4 +94,4 @@ const isDeferred = object => {
|
|
|
66
94
|
const isEvent = object => {
|
|
67
95
|
return !!(object && object.preventDefault);
|
|
68
96
|
};
|
|
69
|
-
export { isBoolean, isExponential, isDate, isDefined, isFunction, isString, isNumeric, isObject, isEmptyObject, isPlainObject, isPrimitive, isWindow, isRenderer, isPromise, isDeferred, type, isEvent };
|
|
97
|
+
export { isBoolean, isExponential, isDate, isDefined, isFunction, isString, isNumeric, isObject, isEmptyObject, isPlainObject, isPrimitive, isWindow, isRenderer, isPromise, isDeferred, type, isEvent, isEmpty, typeOf };
|