diginet-core-ui 1.3.35-beta.3 → 1.3.35-beta.7

package/components/chip/index.js

@@ -48,6 +48,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   readOnly,
   children,
+  style,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -114,7 +115,8 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: size
     }, jsx(Typography, {
       type: size === 'small' ? 'p2' : 'p1',
-      color: 'inherit'
+      color: 'inherit',
+      lineClamp: 1
     }, renderLabel()));
   }, [label, size, startIcon, endIcon, clearAble]);
   const endIconView = useMemo(() => {
@@ -149,6 +151,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: ChipRootCSS(onClick, onDbClick, color),
     ref: ref,
     className: ['DGN-UI-Chip', size, className, color && color !== 'default' && color, color && color !== 'default' && viewType, disabled && 'chip--disabled', readOnly && 'chip--readOnly'].join(' ').trim().replace(/\s+/g, ' '),
+    style: style,
     onClick: _onClick,
     onDoubleClick: _onDbClick,
     ...props
@@ -272,6 +275,7 @@ const ChipRootCSS = (onClick, onDbClick, color) => css`
 Chip.defaultProps = {
   label: '',
   className: '',
+  style: {},
   viewType: 'outlined',
   size: 'small',
   clearAble: false
@@ -284,6 +288,9 @@ Chip.propTypes = {
   className: PropTypes.string,
 
   /** max length content to display was allowed */
+
+  /** style inline of component */
+  style: PropTypes.object,
   maxLength: PropTypes.number,
 
   /** the icon display at head of Chip */

package/components/form-control/attachment/index.js

@@ -1856,6 +1856,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref.current.allNewAttached = allNewAttached;
     ref.current.attached = attached;
     ref.current.clear = clearAllAttached;
+    ref.current.openFileDialog = triggerClickInput;
     return ref.current;
   });
   return jsx("div", { ...props,

package/components/form-control/date-range-picker/index.js

@@ -12,6 +12,10 @@ import { randomString, updatePosition, date as moment, capitalizeSentenceCase, i
 import { getGlobal } from '../../../global';
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from '../calendar/function';
 import locale from '../../../locale';
+import { useTheme } from '../../../theme';
+const {
+  zIndex
+} = useTheme();
 const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actionIconAt,
   controls,

package/components/form-control/dropdown/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Account } from '../../../icons';
 import AvatarDefault from '../../../assets/avatar/default.svg';
-import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon } from '../../';
+import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon, Typography } from '../../';
 import { mapParent, randomString, updatePosition } from '../../../utils';
 import { getGlobal } from '../../../global';
 import { color as colors } from '../../../styles/colors';
@@ -101,10 +101,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   formStyle,
   labelProps,
   errorStyle,
-  refs,
   children,
   dropdownItemStyle
-}, ref) => {
+}, reference) => {
   const dropdownRef = useRef(null);
   const timerRef = useRef(null);
   const formRef = useRef(null);
@@ -119,7 +118,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowSymbol: false
   }));
   const [openState, setOpenState] = useState(false);
-  const [errorState, setErrorState] = useState(error && !valueProp && valueProp !== 0);
   const [showClear, setShowClear] = useState(false);
 
   const _isMobile = isMobile.any();
@@ -845,7 +843,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               clearAble: true,
               onRemove: e => onRemove(e, value),
               style: {
-                margin: '3px 0'
+                margin: '3px 0',
+                width: '100%'
               }
             });
           }
@@ -1056,7 +1055,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         clearAble: true,
         onRemove: e => onRemove(e, value),
         style: {
-          margin: '3px 0'
+          margin: '3px 0',
+          width: '100%'
         }
       });
     }
@@ -1085,8 +1085,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const icon = getIconFromData(data);
       const valueWithIcon = jsx(Fragment, null, icon && jsx("div", {
         css: DropdownIconCSS
-      }, icon), jsx("div", {
-        css: DropdownTextCSS
+      }, icon), jsx(Typography, {
+        type: 'p1',
+        lineClamp: 1,
+        hoverTooltip: !_isMobile
       }, text));
       const el = document.createElement('div');
       el.style.cssText = 'display: flex; align-items: center; min-height:24px;';
@@ -1096,17 +1098,43 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useImperativeHandle(ref, () => ({
-    closeDropdown: () => {
-      closeDropdown();
-    },
-    showDropdown: () => {
-      showDropdown();
-    },
-    onClear,
-    setPreviousValue,
-    DOM: dropdownRef.current
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = dropdownRef.current || {};
+    const _instance = {
+      closeDropdown: () => {
+        closeDropdown();
+      },
+      showDropdown: () => {
+        showDropdown();
+      },
+      onClear,
+      setPreviousValue,
+      setValue: value => {
+        if (allValue[unique][allValue[unique].length - 1] !== value) {
+          allValue[unique].push(value);
+        }
+
+        setValueIntoInput(value);
+      }
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance; // keep old method
+
+    currentRef.closeDropdown = () => closeDropdown();
+
+    currentRef.showDropdown = () => showDropdown();
+
+    currentRef.onClear = onClear, currentRef.setPreviousValue = setPreviousValue, currentRef.setValue = value => {
+      if (allValue[unique][allValue[unique].length - 1] !== value) {
+        allValue[unique].push(value);
+      }
+
+      setValueIntoInput(value);
+    }, currentRef.DOM = dropdownRef.current;
+    return currentRef;
+  });
   useEffect(() => {
     setShowClear(clearAble && checkHasValue(valueProp) && !disabled && !readOnly && !loading);
   }, [clearAble, valueProp, disabled, readOnly, loading]);
@@ -1126,7 +1154,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, [valueObjectDefault]);
   useEffect(() => {
-    !!refs && refs(dropdownRef);
     allValue[unique] = [];
 
     if (defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
@@ -1190,9 +1217,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
     }
   }, [loading]);
-  useEffect(() => {
-    setErrorState(error && (!valueProp && valueProp !== 0 || (valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) === 0));
-  }, [error, valueProp]);
   useEffect(() => {
     if (valueProp !== undefined && (!boxRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
       setValueIntoInput(valueProp);
@@ -1309,7 +1333,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: ['DGN-UI-Dropdown-Form', openState && 'dropdown-showing'].join(' ').trim().replace(/\s+/g, ' '),
       style: formStyle
     }, jsx("div", {
-      css: _InputCSS
+      css: _InputCSS,
+      className: 'DGN-UI-Dropdown-Form-Input'
     }, multiple ? jsx("div", { ...inputProps,
       style: {
         cursor: 'text',
@@ -1367,7 +1392,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disabled: disabled || readOnly
     })));
   }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, itemMultipleSize, openState, showClear]);
-  const errorComp = useMemo(() => errorState && jsx(HelperText, {
+  const errorComp = useMemo(() => error && jsx(HelperText, {
     disabled: disabled,
     style: {
       minHeight: '16px',
@@ -1375,13 +1400,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       top: '100%',
       ...errorStyle
     }
-  }, error), [error, valueProp, disabled, errorStyle, errorState]);
+  }, error), [error, disabled, errorStyle]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
     ref: dropdownRef,
     css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, loading, showClear),
-    className: ['DGN-UI-Dropdown', className, errorState && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
+    className: ['DGN-UI-Dropdown', className, error && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
     style: style
   }, labelComp, inputComp, errorComp), openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null);
 }));
@@ -1389,7 +1414,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
 const InputCSS = (multiple, renderSelectedItem, clearAble) => css`
     ${flexRow};
-    flex: 1 1 auto;
+    width: 100%;
     ${!multiple && renderSelectedItem ? `width: calc(100% - 34px${clearAble ? ' - 18px' : ''})` : ''}
 `;
 
@@ -1401,11 +1426,15 @@ const DropdownIconCSS = css`
     height: inherit;
     margin-right: 8px;
     height: 32px;
+    min-height: 32px;
     width: 32px;
+    min-width: 32px;
     border-radius: 16px;
     img {
         height: 32px;
+        min-height: 32px;
         width: 32px;
+        min-width: 32px;
         object-fit: cover;
     }
 `;
@@ -1427,8 +1456,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
         ${flexWrap};
         ${overflowHidden};
         ${breakWord};
-        /* max-height: max-content; */
-        ${!multiple ? 'min-height: 24px; max-width: 100%; white-space: nowrap;' : ''}
+        ${!multiple ? 'min-height: 24px; max-width: 100%;' : ''}
         &::after {
             ${flexRow};
             ${positionAbsolute};
@@ -1459,10 +1487,14 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
             min-width: 24px;
             ` : `
             height: 24px;
+            min-height: 24px;
             width: 24px;
+            min-width: 24px;
             img {
                 height: 24px;
+                min-height: 24px;
                 width: 24px;
+                min-width: 24px;
             }
             `}
     }
@@ -1488,7 +1520,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
               ${alignCenter};
               ${positionRelative};
               ${borderBox};
-              flex: 1 1 auto;
+              width: 100%;
               padding-bottom: ${multiple ? 1 : 4}px;
               padding-top: ${multiple ? 1 : 4}px;
               &:not(:focus-within):hover {
@@ -1543,7 +1575,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
               ${borderRadius4px};
               ${borderBox};
               ${border(1, rest)};
-              flex: 1 1 auto;
+              width: 100%;
               min-height: 40px;
               &:not(:focus-within):hover {
                   background-color: ${hover};
@@ -1648,7 +1680,6 @@ const DropdownRootCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
     ${displayBlock};
     ${positionRelative};
     margin-bottom: 20px;
-    /* min-width: 150px; */
     height: max-content;
     &.error {
         .css-${DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
@@ -1663,8 +1694,6 @@ const DropdownRootCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
     }
     &.dgn-dropdown-loading,
     &.disabled {
-        ${pointerEventsNone};
-        ${userSelectNone};
         .css-${DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
             border-color: ${systemDisabled};
             .css-${IconCSS(viewType, loading, showClear).name} {
@@ -1864,9 +1893,6 @@ Dropdown.propTypes = {
   /** The array of elements that appear in the dropdown */
   dataSource: PropTypes.array,
 
-  /** The function to get ref of Dropdown component */
-  refs: PropTypes.func,
-
   /** function displays items by custom<br/>
    * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
    * --> such as: displayExpr={'name - role'}
@@ -1895,7 +1921,22 @@ Dropdown.propTypes = {
   /** the contents in Dropdown box (Exp: TreeView) */
   children: PropTypes.node,
 
-  /** any props else */
-  props: PropTypes.any
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
+   */
+  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
 };
 export default Dropdown;

package/components/form-control/number-input/index2.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { useState, useRef, forwardRef, useMemo, useCallback, useEffect } from 'react';
+import { useState, useRef, forwardRef, useMemo, useCallback, useEffect, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import locale from '../../../locale';
@@ -16,6 +16,7 @@ const NumberInputRoot = css`
     margin-bottom: 20px;
 `;
 const regexValidNumber = /[^0-9.,-]/g;
+const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g;
 const NumberInput = /*#__PURE__*/forwardRef(({
   viewType,
   required,
@@ -33,22 +34,14 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   placeholder,
   startIcon,
   endIcon,
-  valueTypeReturn,
-  autoComplete,
   autoFocus,
   disabled,
   readOnly,
-  refs,
   inputRef,
   inputProps,
-  iconStyle,
   inputStyle,
-  labelProps,
-  errorProps,
   error,
-  format,
   onChange,
-  onBlur,
   onFocus,
   onInput,
   onKeyDown,
@@ -56,13 +49,15 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   validates,
   delayOnChange,
   fixedDecimalDigit,
-  ...props
+  className
 }, reference) => {
   inputRef = inputRef || useRef(null);
   const pos = useRef(null);
   const ref = useRef(null);
   const globalRef = useRef({});
-  const [value, setValue] = useState(defaultValue);
+  const [value, setValue] = useState(defaultValue); // nếu không cho nhập số âm mà max là âm thì remove giá trị max
+
+  if (max < 0 && disabledNegative) max = null;
 
   if (thousandSymbol) {
     thousandSymbol = useMemo(() => {
@@ -109,7 +104,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
       pos.current = 2;
     }
 
-    number[0] = (_number2 = number) === null || _number2 === void 0 ? void 0 : _number2[0].replace(/(\d)(?=(\d{3})+\b)/g, '$1' + thousandSymbol); // add thousand symbol to number
+    number[0] = (_number2 = number) === null || _number2 === void 0 ? void 0 : _number2[0].replace(regexThousandNumber, '$1' + thousandSymbol); // add thousand symbol to number
 
     if (!decimalDigit) number.length = 1;else if (number[1]) number[1] = (_number$ = number[1]) === null || _number$ === void 0 ? void 0 : _number$.slice(0, decimalDigit || 0);
     number = number.join(decimalSymbol); // keep focus position
@@ -121,7 +116,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     }
 
     return number;
-  }, [decimalSymbol, value]);
+  }, [decimalSymbol, max, value]);
   /**
    * Convert money to format number
    * @param vl {string} - value
@@ -145,6 +140,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     var _e$target$value;
 
     let valueT = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : e.value;
+    if (disabledNegative && Number(valueT || 0) < 0) return;
     valueT = parseNumberToMoney(valueT);
     const returnValue = convertMoneyToNumber(valueT);
     e.value = globalRef.current.value = !isNaN(parseFloat(returnValue)) ? parseFloat(returnValue) : null;
@@ -194,7 +190,8 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     keyCode === 188 || // ,
     (ctrlKey || metaKey) && (keyCode === 65 || keyCode === 67 || keyCode === 86) || // ctrl + A, ctrl + C, ctrl + V
     keyCode === 46 || // key delete
-    keyCode === 189; // -
+    keyCode === 189 || // -
+    keyCode === 9; // tab
     // The key is delete (|| remove) and focus after the thousand digit
 
     const removeDot = keyCode === 8 && selectionEnd - selectionStart <= 1 && value.charAt(selectionEnd - 1) === thousandSymbol; // Decimal
@@ -252,12 +249,25 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     var _valueProps;
 
-    if (typeof valueProps !== 'undefined') setValue(parseNumberToMoney((_valueProps = valueProps) === null || _valueProps === void 0 ? void 0 : _valueProps.toString().replace(regexValidNumber, ''), true));
+    if (typeof valueProps !== 'undefined') if (disabledNegative && Number(valueProps || 0) < 0) {
+      // nếu không cho nhập số âm mà value đầu vào là âm thì reset value về 0
+      valueProps = clamp(0, min, max);
+    }
+    setValue(parseNumberToMoney((_valueProps = valueProps) === null || _valueProps === void 0 ? void 0 : _valueProps.toString().replace(regexValidNumber, ''), true));
   }, [valueProps]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return jsx("div", {
     ref: ref,
     css: NumberInputRoot,
-    ...props
+    className: ['DGN-UI-NumberInput', className].join(' ').trim().replace(/\s+/g, ' ')
   }, !!label && jsx(Label, {
     required: required,
     disabled: disabled
@@ -315,15 +325,13 @@ NumberInput.defaultProps = {
   decimalDigit: 0,
   thousandSeparator: false,
   min: -Infinity,
-  max: Infinity
+  max: Infinity,
+  className: ''
 };
 NumberInput.propTypes = {
   /** the type of border you want to display */
   viewType: PropTypes.oneOf(['underlined', 'outlined']),
 
-  /** the type of value which you want to return */
-  valueTypeReturn: PropTypes.oneOf(['number', 'string']),
-
   /** separator symbol */
   decimalSymbol: PropTypes.oneOf([',', '.']),
 
@@ -354,9 +362,6 @@ NumberInput.propTypes = {
   /** error for input */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /** type auto complete of input (like new-password) */
-  autoComplete: PropTypes.string,
-
   /** icon at start */
   startIcon: PropTypes.any,
 
@@ -387,25 +392,6 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: PropTypes.object,
 
-  /** any props of label in NumberInput component */
-  labelProps: PropTypes.object,
-
-  /** any props of error in NumberInput component */
-  errorProps: PropTypes.object,
-
-  /**
-   * the format to display value<br/>
-   * * function: value => function(value)<br/>
-   * * string: Example: '#.###', '# ###', '#.### 2%', '#.### %%'<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;#: integer part digit<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;. / '_': separator symbol<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;%: decimal digit, '2%' === '%%'
-   */
-  format: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-
-  /** The function to get ref of NumberInput component */
-  refs: PropTypes.func,
-
   /** validation value, argument can:<br/>
    * * string: the validation rule. Example required.<br/>
    * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
@@ -425,9 +411,6 @@ NumberInput.propTypes = {
   /** on change function */
   onChange: PropTypes.func,
 
-  /** on blur function */
-  onBlur: PropTypes.func,
-
   /** on focus function */
   onFocus: PropTypes.func,
 
@@ -441,6 +424,9 @@ NumberInput.propTypes = {
   delayOnChange: PropTypes.number,
 
   /** inputRef of delayOnChange component */
-  thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])])
+  thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
+
+  /** className of component */
+  className: PropTypes.string
 };
 export default NumberInput;

package/components/form-control/time-picker/index.js

@@ -9,6 +9,10 @@ import { randomString, useOnClickOutside } from '../../../utils';
 import theme from '../../../theme/settings';
 import Swiper from './swiper';
 import { typography } from '../../../styles/typography';
+import { useTheme } from '../../../theme';
+const {
+  zIndex
+} = useTheme();
 
 const formatDimension = x => {
   const regexPercent = /^\d+%$/;