diginet-core-ui 1.4.64-beta.6 → 1.4.65
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/button/more.js +28 -14
- package/components/form-control/calendar/function.js +1 -1
- package/components/form-control/calendar/index.js +1 -1
- package/components/form-control/date-picker/index.js +1 -1
- package/components/form-control/date-range-picker/index.js +35 -18
- package/components/form-control/dropdown/index.js +3 -3
- package/components/form-control/dropdown-box/index.js +21 -63
- package/components/form-control/money-input/index.js +14 -8
- package/components/form-control/number-input/index2.js +1 -4
- package/components/popup/v2/index.js +9 -5
- package/global/index.js +2 -1
- package/package.json +44 -78
- package/readme.md +13 -0
- package/theme/settings.js +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/** @jsxRuntime classic */
|
|
2
2
|
/** @jsx jsx */
|
|
3
3
|
import { css, jsx } from '@emotion/core';
|
|
4
|
-
import { ButtonIcon, Icon, Popover, Tooltip, Typography } from "./..";
|
|
4
|
+
import { Button, ButtonIcon, Icon, Popover, Tooltip, Typography } from "./..";
|
|
5
5
|
import OptionWrapper from "../others/option-wrapper";
|
|
6
6
|
import PropTypes from 'prop-types';
|
|
7
7
|
import React, { forwardRef, isValidElement, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
@@ -30,7 +30,8 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
|
|
|
30
30
|
optionType,
|
|
31
31
|
popoverProp,
|
|
32
32
|
style,
|
|
33
|
-
onClick
|
|
33
|
+
onClick,
|
|
34
|
+
label
|
|
34
35
|
} = props;
|
|
35
36
|
const isOptionFull = optionType === 'full';
|
|
36
37
|
let anchor = anchorProp;
|
|
@@ -114,6 +115,28 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
|
|
|
114
115
|
});
|
|
115
116
|
return AnchorTag;
|
|
116
117
|
};
|
|
118
|
+
const renderBtnMore = () => {
|
|
119
|
+
const btnRef = {
|
|
120
|
+
ref: ref,
|
|
121
|
+
viewType: 'text',
|
|
122
|
+
id: id,
|
|
123
|
+
style: style,
|
|
124
|
+
disabled: disabled,
|
|
125
|
+
onClick: openPopover,
|
|
126
|
+
...buttonProps
|
|
127
|
+
};
|
|
128
|
+
const btn = label ? jsx(Button, {
|
|
129
|
+
label: label,
|
|
130
|
+
className: className,
|
|
131
|
+
...btnRef
|
|
132
|
+
}) : jsx(ButtonIcon, {
|
|
133
|
+
circular: true,
|
|
134
|
+
name: 'more',
|
|
135
|
+
className: classNames('DGN-UI-ButtonMore', className),
|
|
136
|
+
...btnRef
|
|
137
|
+
});
|
|
138
|
+
return btn;
|
|
139
|
+
};
|
|
117
140
|
return useMemo(() => {
|
|
118
141
|
return jsx(Popover, {
|
|
119
142
|
css: _PopoverCSS,
|
|
@@ -127,18 +150,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
|
|
|
127
150
|
vertical: 'top',
|
|
128
151
|
horizontal: 'left'
|
|
129
152
|
},
|
|
130
|
-
anchor: anchor ? renderAnchor() :
|
|
131
|
-
ref: ref,
|
|
132
|
-
circular: true,
|
|
133
|
-
name: 'more',
|
|
134
|
-
viewType: 'text',
|
|
135
|
-
id: id,
|
|
136
|
-
style: style,
|
|
137
|
-
className: classNames('DGN-UI-ButtonMore', className),
|
|
138
|
-
disabled: disabled,
|
|
139
|
-
onClick: openPopover,
|
|
140
|
-
...buttonProps
|
|
141
|
-
}),
|
|
153
|
+
anchor: anchor ? renderAnchor() : renderBtnMore(),
|
|
142
154
|
...popoverProp
|
|
143
155
|
}, renderOptions());
|
|
144
156
|
}, [buttonProps, className, disabled, id, options, optionType, popoverProp, style, iconState, openState, theme]);
|
|
@@ -195,6 +207,8 @@ ButtonMore.propTypes = {
|
|
|
195
207
|
className: PropTypes.string,
|
|
196
208
|
/** If `true`, the component is disabled. */
|
|
197
209
|
disabled: PropTypes.bool,
|
|
210
|
+
/** The content of the component. */
|
|
211
|
+
label: PropTypes.string,
|
|
198
212
|
/** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-typography) applied to the `Typography` label. */
|
|
199
213
|
labelProp: PropTypes.object,
|
|
200
214
|
/** Option(s) in popover. */
|
|
@@ -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)) {
|
|
@@ -192,7 +192,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
|
|
|
192
192
|
});
|
|
193
193
|
const iconComp = jsx("div", {
|
|
194
194
|
css: _IconAreaCSS
|
|
195
|
-
}, clearAble && value ? jsx(ButtonIcon, {
|
|
195
|
+
}, clearAble && value && !disabled && !readOnly ? jsx(ButtonIcon, {
|
|
196
196
|
disabled: disabled || readOnly,
|
|
197
197
|
viewType: 'ghost',
|
|
198
198
|
onClick: onClear,
|
|
@@ -14,6 +14,9 @@ import { getColor } from "../../../styles/utils";
|
|
|
14
14
|
import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
|
|
15
15
|
import ControlComp from "../control";
|
|
16
16
|
import useThemeProps from "../../../theme/utils/useThemeProps";
|
|
17
|
+
const SINGLE_CALENDAR_BOARD_WIDTH = 360;
|
|
18
|
+
const SINGLE_CALENDAR_BOARD_HEIGHT = 295;
|
|
19
|
+
const CONTROL_BOARD_HEIGHT = 56;
|
|
17
20
|
const toLocalTimestamp = t => {
|
|
18
21
|
if (typeof t === 'object' && t.getTime) {
|
|
19
22
|
t = t.getTime();
|
|
@@ -140,6 +143,12 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
|
|
|
140
143
|
const focusBtnRef = useRef('today');
|
|
141
144
|
const loadMoreTimer = useRef(null);
|
|
142
145
|
const dropdownListRef = useRef(null);
|
|
146
|
+
const anchorInputDateRef = useRef(null);
|
|
147
|
+
const singleCalendarBoardInfoRef = useRef({
|
|
148
|
+
status: false,
|
|
149
|
+
width: SINGLE_CALENDAR_BOARD_WIDTH,
|
|
150
|
+
height: controls ? SINGLE_CALENDAR_BOARD_HEIGHT + CONTROL_BOARD_HEIGHT : SINGLE_CALENDAR_BOARD_HEIGHT
|
|
151
|
+
});
|
|
143
152
|
const [valueState, setValueState] = useState();
|
|
144
153
|
const navigatorFromRefs = {
|
|
145
154
|
doubleLeft: useRef(null),
|
|
@@ -398,21 +407,32 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
|
|
|
398
407
|
height,
|
|
399
408
|
top
|
|
400
409
|
} = anchor instanceof Element ? anchor.getBoundingClientRect() : ref.current.getBoundingClientRect();
|
|
401
|
-
const pickerHeight = innerWidth < 567 ? controls ? 550 : 495 :
|
|
410
|
+
const pickerHeight = innerWidth < 567 ? controls ? 550 : 495 : singleCalendarBoardInfoRef.current.height;
|
|
402
411
|
let style = {};
|
|
403
412
|
style.left = left;
|
|
404
413
|
style.top = top + height + 4;
|
|
405
414
|
style.transformOrigin = '50% 20%';
|
|
406
415
|
if (style.top + pickerHeight > innerHeight) {
|
|
407
416
|
if (top > pickerHeight) {
|
|
408
|
-
|
|
417
|
+
var _anchorInputDateRef$c;
|
|
418
|
+
const anchorRef = (_anchorInputDateRef$c = anchorInputDateRef.current) !== null && _anchorInputDateRef$c !== void 0 ? _anchorInputDateRef$c : ipConRef.current;
|
|
419
|
+
const {
|
|
420
|
+
top: topInput
|
|
421
|
+
} = anchorRef.getBoundingClientRect() || {};
|
|
422
|
+
style.top = topInput - pickerHeight;
|
|
409
423
|
style.transformOrigin = '50% 80%';
|
|
410
424
|
} else {
|
|
411
425
|
style.top = Math.round((innerHeight - pickerHeight - 16) / 2);
|
|
412
426
|
style.transformOrigin = 'center';
|
|
413
427
|
}
|
|
414
428
|
}
|
|
415
|
-
const
|
|
429
|
+
const {
|
|
430
|
+
width: singleCalendarCompWidth
|
|
431
|
+
} = {
|
|
432
|
+
...singleCalendarBoardInfoRef.current
|
|
433
|
+
};
|
|
434
|
+
const fullCalendarComp = singleCalendarCompWidth * 2;
|
|
435
|
+
const pickerWidth = window.innerWidth <= fullCalendarComp ? singleCalendarCompWidth : fullCalendarComp;
|
|
416
436
|
if (left + pickerWidth > innerWidth) {
|
|
417
437
|
if (innerWidth > pickerWidth) {
|
|
418
438
|
style.left = (innerWidth - pickerWidth) / 2;
|
|
@@ -692,6 +712,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
|
|
|
692
712
|
renderCalendar(valueTo.current, 'to');
|
|
693
713
|
};
|
|
694
714
|
const openPicker = anchor => {
|
|
715
|
+
if (anchor) anchorInputDateRef.current = anchor;
|
|
695
716
|
const backGr = createBackground();
|
|
696
717
|
const picker = createPicker(anchor);
|
|
697
718
|
render(pickerComp, backGr.appendChild(picker));
|
|
@@ -1057,6 +1078,16 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
|
|
|
1057
1078
|
onClick: onConfirm
|
|
1058
1079
|
}, confirmText)));
|
|
1059
1080
|
const leftCalendarComp = jsx("div", {
|
|
1081
|
+
...(!singleCalendarBoardInfoRef.current.status ? {
|
|
1082
|
+
ref: ref => {
|
|
1083
|
+
var _ref$clientWidth;
|
|
1084
|
+
return singleCalendarBoardInfoRef.current = {
|
|
1085
|
+
...singleCalendarBoardInfoRef.current,
|
|
1086
|
+
status: true,
|
|
1087
|
+
width: (_ref$clientWidth = ref === null || ref === void 0 ? void 0 : ref.clientWidth) !== null && _ref$clientWidth !== void 0 ? _ref$clientWidth : SINGLE_CALENDAR_BOARD_WIDTH
|
|
1088
|
+
};
|
|
1089
|
+
}
|
|
1090
|
+
} : {}),
|
|
1060
1091
|
css: generateCalendarCSS(unique, false, false, theme)
|
|
1061
1092
|
}, renderNavigator(unique, navigatorFromRefs, e => setPrevTime(e, 'year', valueFr.current, 'from'), e => setPrevTime(e, 'month', valueFr.current, 'from'), e => setNextTime(e, 'month', valueFr.current, 'from'), e => setNextTime(e, 'year', valueFr.current, 'from')), jsx("div", {
|
|
1062
1093
|
className: unique.table.container
|
|
@@ -1484,21 +1515,7 @@ DateRangePicker.propTypes = {
|
|
|
1484
1515
|
placeholder: PropTypes.string,
|
|
1485
1516
|
/** If `true`, hitting escape will close component. */
|
|
1486
1517
|
pressESCToClose: PropTypes.bool,
|
|
1487
|
-
/** Options for period selector.
|
|
1488
|
-
* example: {
|
|
1489
|
-
* enable: true,
|
|
1490
|
-
* dataSource: [],
|
|
1491
|
-
* displayExpr: "DisplayName",
|
|
1492
|
-
* valueFromExpr: "DateFrom",
|
|
1493
|
-
* valueToExpr: "DateTo",
|
|
1494
|
-
* valueFormat: "DD/MM/YYYY",
|
|
1495
|
-
* limit: 5,
|
|
1496
|
-
* skip: 0,
|
|
1497
|
-
* total: 100,
|
|
1498
|
-
* onLoadMore: () => {},
|
|
1499
|
-
* loading: false
|
|
1500
|
-
* }
|
|
1501
|
-
*/
|
|
1518
|
+
/** Options for period selector. */
|
|
1502
1519
|
periodOptions: PropTypes.object,
|
|
1503
1520
|
/** If `true`, the component is readOnly. */
|
|
1504
1521
|
readOnly: PropTypes.bool,
|
|
@@ -29,7 +29,7 @@ const convertData = (dt, valueExpr) => {
|
|
|
29
29
|
};
|
|
30
30
|
const convertSearchDelayTime = searchDelayTime => {
|
|
31
31
|
var _searchDelayTime$matc, _searchDelayTime$matc2;
|
|
32
|
-
if (searchDelayTime === true) return getGlobal('
|
|
32
|
+
if (searchDelayTime === true) return getGlobal('delayOnSearchInput');
|
|
33
33
|
const units = {
|
|
34
34
|
m: 60000,
|
|
35
35
|
s: 1000,
|
|
@@ -122,10 +122,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
122
122
|
} = props;
|
|
123
123
|
const selectBox = multiple && selectBoxProp === undefined ? true : selectBoxProp;
|
|
124
124
|
const searchExpr = typeof searchExprProp === 'string' ? [searchExprProp] : searchExprProp;
|
|
125
|
-
const searchDelayTime = convertSearchDelayTime(searchDelayTimeProp === undefined ? getGlobal('
|
|
125
|
+
const searchDelayTime = convertSearchDelayTime(searchDelayTimeProp === undefined ? getGlobal('delayOnSearchInput') : searchDelayTimeProp);
|
|
126
126
|
let displayExpr = displayExprProp;
|
|
127
127
|
const noDataText = noDataTextProp || getGlobal('noDataText');
|
|
128
|
-
const placeholder = placeholderProp || getGlobal('dropdownPlaceholder');
|
|
128
|
+
const placeholder = placeholderProp || !readOnly && !disabled && getGlobal('dropdownPlaceholder');
|
|
129
129
|
const ref = useRef(null);
|
|
130
130
|
const dropdownRef = useRef(null);
|
|
131
131
|
const timer = useRef(null);
|
|
@@ -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;
|
|
@@ -404,13 +404,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
|
|
|
404
404
|
}
|
|
405
405
|
const v = getValueWithDecimal(number.toString().replace('.', decimalSymbol));
|
|
406
406
|
if (convertToWords && !decimalDigit && (disabled || readOnly)) {
|
|
407
|
-
|
|
408
|
-
if (Number.isInteger(number)) {
|
|
409
|
-
const currentLocale = locale.get();
|
|
410
|
-
const converter = converters[currentLocale] || num2WordsVi; // fallback VN
|
|
411
|
-
valueConverted = converter.convert(number);
|
|
412
|
-
}
|
|
413
|
-
inputRef.current.value = parseValueWithFix(valueConverted);
|
|
407
|
+
inputRef.current.value = convertNumToWords(value);
|
|
414
408
|
} else {
|
|
415
409
|
inputRef.current.value = parseValueWithFix(thousandSeparator ? getThousandSeparator(v) : v);
|
|
416
410
|
}
|
|
@@ -427,13 +421,23 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
|
|
|
427
421
|
useImperativeHandle(reference, () => {
|
|
428
422
|
const currentRef = ref.current || {};
|
|
429
423
|
const _instance = {
|
|
430
|
-
getThousandSeparator: getThousandSeparator
|
|
424
|
+
getThousandSeparator: getThousandSeparator,
|
|
425
|
+
convertNumToWords
|
|
431
426
|
}; // methods
|
|
432
427
|
_instance.__proto__ = {}; // hidden methods
|
|
433
428
|
currentRef.instance = _instance;
|
|
434
429
|
currentRef.getThousandSeparator = getThousandSeparator;
|
|
435
430
|
return currentRef;
|
|
436
431
|
});
|
|
432
|
+
const convertNumToWords = number => {
|
|
433
|
+
let valueConverted = getGlobal('helperInvalid');
|
|
434
|
+
if (Number.isInteger(number)) {
|
|
435
|
+
const currentLocale = locale.get();
|
|
436
|
+
const converter = converters[currentLocale] || num2WordsVi; // fallback VN
|
|
437
|
+
valueConverted = Object.hasOwn(converter, 'convert') ? converter.convert(number) : converter(number);
|
|
438
|
+
}
|
|
439
|
+
return valueConverted;
|
|
440
|
+
};
|
|
437
441
|
const validateResult = validates && onValidate(value, validates, true);
|
|
438
442
|
return jsx("div", {
|
|
439
443
|
ref: ref,
|
|
@@ -543,6 +547,8 @@ MoneyInput.propTypes = {
|
|
|
543
547
|
required: PropTypes.bool,
|
|
544
548
|
/** Convert money from number to words when readOnly || disabled */
|
|
545
549
|
convertToWords: PropTypes.bool,
|
|
550
|
+
/** Convert number to words function */
|
|
551
|
+
convertNumToWords: PropTypes.number,
|
|
546
552
|
/** Add a string to first of value when convertToWords. */
|
|
547
553
|
prefix: PropTypes.string,
|
|
548
554
|
/** Add a string to last of value when convertToWords. */
|
|
@@ -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({});
|
|
@@ -36,6 +36,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
36
36
|
type,
|
|
37
37
|
width,
|
|
38
38
|
yesText,
|
|
39
|
+
showFullContent,
|
|
39
40
|
...props
|
|
40
41
|
}, reference) => {
|
|
41
42
|
if (!reference) reference = useRef(null);
|
|
@@ -43,7 +44,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
43
44
|
const statusAction = useRef('');
|
|
44
45
|
const [openState, setOpenState] = useState(open);
|
|
45
46
|
const [custom, setCustom] = useState(null);
|
|
46
|
-
const [showMoreDescription, setShowMoreDescription] = useState(
|
|
47
|
+
const [showMoreDescription, setShowMoreDescription] = useState(!showFullContent);
|
|
47
48
|
const [descriptionLines, setDescriptionLines] = useState(0);
|
|
48
49
|
const showPopup = useDelayUnmount(openState, 200);
|
|
49
50
|
const theme = useTheme();
|
|
@@ -100,7 +101,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
100
101
|
const onRefChange = useCallback(node => {
|
|
101
102
|
if (node) {
|
|
102
103
|
setDescriptionLines(Math.round((node === null || node === void 0 ? void 0 : node.offsetHeight) / 18)); //18 is line-height of Typography p2
|
|
103
|
-
setShowMoreDescription(
|
|
104
|
+
setShowMoreDescription(!showFullContent);
|
|
104
105
|
}
|
|
105
106
|
}, []);
|
|
106
107
|
useEffect(() => {
|
|
@@ -175,7 +176,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
175
176
|
ref: onRefChange,
|
|
176
177
|
type: 'p2',
|
|
177
178
|
className: 'DGN-UI-Popup-Body-Detail'
|
|
178
|
-
}, description), subtitle && descriptionLines > 1 || descriptionLines > 3 ? jsx("span", {
|
|
179
|
+
}, description), (subtitle && descriptionLines > 1 || descriptionLines > 3) && showFullContent ? jsx("span", {
|
|
179
180
|
className: 'DGN-More-Action',
|
|
180
181
|
onClick: () => setShowMoreDescription(!showMoreDescription)
|
|
181
182
|
}, getGlobal(showMoreDescription ? 'showLess' : 'showMore')) : null)));
|
|
@@ -343,7 +344,8 @@ Popup.defaultProps = {
|
|
|
343
344
|
style: {},
|
|
344
345
|
top: 56,
|
|
345
346
|
type: 'info',
|
|
346
|
-
width: 480
|
|
347
|
+
width: 480,
|
|
348
|
+
showFullContent: true
|
|
347
349
|
};
|
|
348
350
|
Popup.propTypes = {
|
|
349
351
|
/** If `true`, the component is shown. */
|
|
@@ -379,7 +381,9 @@ Popup.propTypes = {
|
|
|
379
381
|
/** Width of the component. */
|
|
380
382
|
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
381
383
|
/** Label of confirm button. */
|
|
382
|
-
yesText: PropTypes.string
|
|
384
|
+
yesText: PropTypes.string,
|
|
385
|
+
/** If `true`, show full content in popup */
|
|
386
|
+
showFullContent: PropTypes.bool
|
|
383
387
|
/**
|
|
384
388
|
* ref methods
|
|
385
389
|
*
|
package/global/index.js
CHANGED
|
@@ -245,7 +245,8 @@ const globalObject = {
|
|
|
245
245
|
dropdownPlaceholder: '请选择'
|
|
246
246
|
},
|
|
247
247
|
//Global variable
|
|
248
|
-
delayOnInput:
|
|
248
|
+
delayOnInput: 500,
|
|
249
|
+
delayOnSearchInput: 1200,
|
|
249
250
|
maxSizeUpload: Infinity
|
|
250
251
|
};
|
|
251
252
|
export const getGlobal = (key, language = locale.get()) => {
|
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.65",
|
|
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
|
@@ -41,6 +41,19 @@ npm test
|
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
## Changelog
|
|
44
|
+
## 1.4.65
|
|
45
|
+
- \[Added\]: Icon – Add Icon OpenNew
|
|
46
|
+
- \[Added\]: Icon – Add IconMenu WEO53TR001, WEO53APP01
|
|
47
|
+
- \[Added\]: Icon – Add IconMenu MHRM09N1404
|
|
48
|
+
- \[Added\]: Icon – Add IconMenu MHRP25N0010
|
|
49
|
+
- \[Added\]: Icon – Add IconMenu D95F3090, D95F3093, D06-2, D06-4, D95F3094, W102F1000, W103F1000, W104F1000, W105F1000, W106F1000, W107F1000, W108F1000
|
|
50
|
+
- \[Changed\]: ButtonMore - Allow custom ButtonMore
|
|
51
|
+
- \[Changed\]: Setting - Adjust the debounce/wait time when entering employee search information from 0.7s to 1.2s
|
|
52
|
+
- \[Changed\]: DatePicker, Dropdown - Adjust the behavior so that when DatePicker or Dropdown is in ReadOnly or Disabled state, the "Select" placeholder text and the clear (X) icon are still displayed
|
|
53
|
+
- \[Fixed\]: DateRangePicker - Display a popup for DateRangePicker
|
|
54
|
+
- \[Changed\]: MoneyInput - Add support for converting numbers into currency words/text in MoneyInput
|
|
55
|
+
- \[Changed\]: Popup - Add the showFullContent prop for Popup
|
|
56
|
+
|
|
44
57
|
## 1.4.64
|
|
45
58
|
- \[Added\]: Icon – Add Icon BloodMinus
|
|
46
59
|
- \[Changed\]: DatePicker - Allow manual input for the DatePicker (default value shows "Invalid Date" when typing) + add a "delayOnChange" prop.
|