diginet-core-ui 1.4.36-beta.1 → 1.4.37
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.
|
@@ -255,8 +255,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
|
|
|
255
255
|
tableData = [],
|
|
256
256
|
weekDateFirst = getDateOfWeek(firstDay),
|
|
257
257
|
weekDateLast = getDateOfWeek(lastDay);
|
|
258
|
-
/**
|
|
259
|
-
* days of previous month
|
|
258
|
+
/**
|
|
259
|
+
* days of previous month
|
|
260
260
|
*/
|
|
261
261
|
for (let i = weekDateFirst; i > 0; i--) {
|
|
262
262
|
const day = Date.parse(new Date(time.getFullYear(), time.getMonth(), 1));
|
|
@@ -268,8 +268,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
|
|
|
268
268
|
className: unique.day.day
|
|
269
269
|
})));
|
|
270
270
|
}
|
|
271
|
-
/**
|
|
272
|
-
* days of current month
|
|
271
|
+
/**
|
|
272
|
+
* days of current month
|
|
273
273
|
*/
|
|
274
274
|
for (let i = 0; i < lastDate; i++) {
|
|
275
275
|
const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
|
|
@@ -295,8 +295,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
|
|
|
295
295
|
type: 'h6'
|
|
296
296
|
}, i + 1)));
|
|
297
297
|
}
|
|
298
|
-
/**
|
|
299
|
-
* days of next month
|
|
298
|
+
/**
|
|
299
|
+
* days of next month
|
|
300
300
|
*/
|
|
301
301
|
for (let i = 0; i < 13 - weekDateLast; i++) {
|
|
302
302
|
const day = Date.parse(new Date(time.getFullYear(), time.getMonth() + 1, 0));
|
|
@@ -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;
|
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.37",
|
|
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
|
+
}
|