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.
@@ -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() : jsx(ButtonIcon, {
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: ['sentence']
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) && !value) {
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 : controls ? 310 : 256;
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
- style.top = innerHeight - pickerHeight - 4;
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 pickerWidth = window.innerWidth <= 633 ? 300 : 633;
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('delayOnInput');
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('delayOnInput') : searchDelayTimeProp);
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, HelperText } from "../..";
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, useMemo } from 'react';
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: valueProps,
49
- valueExpr,
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, error && 'error'),
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)), ErrorView);
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
- let valueConverted = getGlobal('helperInvalid');
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: minProp,
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(false);
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(false);
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: 1200,
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.64-beta.6",
4
- "description": "",
5
- "main": "index.js",
6
- "license": "UNLICENSED",
7
- "scripts": {
8
- "start": "npm-run-all --parallel start-sb eslint-test",
9
- "start-sb": "start-storybook -p 9050",
10
- "build-storybook": "build-storybook -c .storybook -s src",
11
- "build": "run-script-os",
12
- "build:windows": "rimraf dist && mkdirp dist/components && npm run compile && sass --style=compressed src/scss:dist/css && xcopy src\\\\assets dist\\\\assets\\ /e /y",
13
- "build:darwin:linux:default": "rm -rf dist && npm run compile && sass --style=compressed src/scss:dist/css && cp -rf src/assets dist/assets",
14
- "compile": "babel src --out-dir dist --ignore **/*.stories.js",
15
- "pack": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm pack",
16
- "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
17
- "beta": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish --tag beta",
18
- "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
19
- "version:add": "run-script-os",
20
- "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
21
- "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
22
- "version:bump": "npm version patch --no-git-tag-version --silent",
23
- "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
24
- "test": "echo \"Error: no test specified\" && exit 1",
25
- "lint": "eslint --fix --config .eslintrc.js \"**/*.js\"",
26
- "eslint-test": "onchange \"src/**/*.{js,jsx,json}\" -- eslint . --fix",
27
- "freshtall": "npm cache clean --force && rm -rf node_modules && rm -f package-lock.json && npm install",
28
- "test-storybook": "test-storybook --url http://localhost:9050",
29
- "preinstall": "echo {} > package-lock.json"
30
- },
31
- "dependencies": {
32
- "@emotion/core": "^10.0.35",
33
- "@emotion/css": "^11.11.0",
34
- "@emotion/react": "^11.10.6",
35
- "babel-plugin-module-resolver": "^4.1.0",
36
- "date-fns": "^2.30.0",
37
- "prop-types": "^15.7.2"
38
- },
39
- "lint-staged": {
40
- "*/**/*.{js,jsx,json}": [
41
- "prettier --write",
42
- "git add"
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.
package/theme/settings.js CHANGED
@@ -436,7 +436,7 @@ const settings = {
436
436
  openOnClickAt: 'icon',
437
437
  viewType: 'underlined',
438
438
  inputProps: {},
439
- delayOnInput: 1200
439
+ delayOnInput: 700
440
440
  }
441
441
  },
442
442
  Grid: {