diginet-core-ui 1.3.74 → 1.3.75-beta.2

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

@@ -1850,14 +1850,14 @@ Dropdown.propTypes = {
   /** The icon to display if not found the icon follow `iconExpr`. */
   iconDefault: PropTypes.string,
 
-  /** Field name used for icon display.<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** Field name used for icon display.<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1872,9 +1872,9 @@ Dropdown.propTypes = {
   /** The displayed value of component. */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** Field name used for text display in dropdown list.<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** Field name used for text display in dropdown list.<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
@@ -1884,10 +1884,10 @@ Dropdown.propTypes = {
   /** The field name used for the returned result. */
   valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * Duration wait enter search content on search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, used default delayOnInput.
+  /**
+   * Duration wait enter search content on search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, used default delayOnInput.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
 
@@ -1954,19 +1954,19 @@ Dropdown.propTypes = {
   /** The array of elements that appear in the dropdown list. */
   dataSource: PropTypes.array,
 
-  /** Function displays items by custom.<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** Function displays items by custom.<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
 
-  /** Function or field name used for display selected items, example:<br/>
-   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** Function or field name used for display selected items, example:<br/>
+   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
-  /** Callback fired when the input value changes.<br/>
-   * if undefined: the filter function will run (default)
+  /** Callback fired when the input value changes.<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
 
@@ -1997,19 +1997,19 @@ Dropdown.propTypes = {
   /** If `true`, show multi-line selected item(s). */
   multilineSelectedItem: PropTypes.bool,
 
-  /**
-   * 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
+  /**
+   * 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)

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

@@ -23,16 +23,16 @@ const {
 } = useTheme();
 const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
+  children,
+  className,
+  color,
   disabled,
+  hoverTooltip,
+  id,
+  lineClamp,
   readOnly,
   required,
-  className,
-  children,
   type,
-  lineClamp,
-  hoverTooltip,
-  id,
-  color,
   ...props
 }, reference) => {
   const ref = useRef(null);

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

@@ -6,55 +6,56 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import locale from '../../../locale';
 import { InputBase, Label, HelperText } from '../..';
-import { onValidate } from '../../../utils';
-/* Start styled */
-
-const NumberInputRoot = css`
-    display: block;
-    position: relative;
-    margin-bottom: 20px;
-`;
+import { classNames, onValidate, refType as ref } from '../../../utils';
+import { displayBlock, positionRelative } from '../../../styles/general';
+import theme from '../../../theme/settings';
+const {
+  spacing
+} = theme;
 const regexValidNumber = /[^0-9.,-]/g;
 const regexNumber = /[^0-9]/g;
-const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g;
+const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g; // Clamp number between two values with the following line:
+
+const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+
 const NumberInput = /*#__PURE__*/forwardRef(({
-  viewType,
-  required,
-  disabledNegative,
-  nonStyle,
+  autoFocus,
+  autoWidth,
+  className,
   decimalDigit,
   decimalSymbol,
-  thousandSeparator: thousandSymbol,
-  label,
   defaultValue,
-  value: valueProps,
-  min,
-  max,
-  step,
-  placeholder,
-  startIcon,
-  endIcon,
-  autoFocus,
+  delayOnChange,
   disabled,
-  readOnly,
-  inputRef,
+  disabledNegative,
+  endIcon,
+  error,
+  fixedDecimalDigit,
+  helperTextProps,
   inputProps,
+  inputRef,
   inputStyle,
-  error,
+  label,
+  labelProps,
+  max,
+  maxDigit,
+  min,
+  nonStyle,
+  onBlur,
   onChange,
   onFocus,
   onInput,
-  onBlur,
   onKeyDown,
   onKeyUp,
+  placeholder,
+  readOnly,
+  required,
+  startIcon,
+  step,
+  thousandSeparator: thousandSymbol,
   validates,
-  delayOnChange,
-  fixedDecimalDigit,
-  className,
-  maxDigit,
-  autoWidth,
-  labelProps,
-  helperTextProps
+  value: valueProps,
+  viewType
 }, reference) => {
   inputRef = inputRef || useRef(null);
   const pos = useRef(null);
@@ -75,15 +76,12 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     thousandSymbol = '';
   }
 
-  const validateResult = validates && onValidate(value, validates, true); // Clamp number between two values with the following line:
-
-  const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
-
+  const validateResult = validates && onValidate(value, validates, true);
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
   /**
    * Convert number to format money
    * @param vl {number} - value
-   * @type {function(*): number}
+   * @type {function}
    * @return {string}
    * @example 1200300.123 => 1,200,300.123
    * @example 1200300,123 => 1.200.300,123
@@ -109,7 +107,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
       pos.current = 2;
     }
 
-    number[0] = (_number2 = number) === null || _number2 === void 0 ? void 0 : _number2[0].replace(regexThousandNumber, '$1' + thousandSymbol); // add thousand symbol to number
+    number[0] = (_number2 = number) === null || _number2 === void 0 ? void 0 : _number2[0].replace(regexThousandNumber, '$1' + thousandSymbol); // add a 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
@@ -123,7 +121,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   /**
    * Convert money to format number
    * @param vl {string} - value
-   * @type {function(*): number}
+   * @type {function}
    * @return {number}
    * @example 1,200,300.123 => 1200300.123
    * @example 1.200.300,123 => 1200300.123
@@ -163,10 +161,11 @@ const NumberInput = /*#__PURE__*/forwardRef(({
       value = convertMoneyToNumber(value);
 
       if (Number(value) < min || Number(value) > max) {
+        const target = e.target;
+        target.value = clamp(value, min, max);
+
         _onInput({ ...e,
-          target: { ...e.target,
-            value: clamp(value, min, max)
-          }
+          target
         });
       }
     }
@@ -209,22 +208,23 @@ const NumberInput = /*#__PURE__*/forwardRef(({
 
     const disabledTypingDecimal = ((_value$split = value.split(decimalSymbol)) === null || _value$split === void 0 ? void 0 : (_value$split$ = _value$split[1]) === null || _value$split$ === void 0 ? void 0 : _value$split$.length) >= decimalDigit && // total number after decimal symbol > {decimalDigit}
     selectionStart === value.length; // the focus is at the end of the string
-    // key arrow up
+
+    const target = e.target; // key arrow up
 
     if (keyCode === 38) {
+      target.value = Number(convertMoneyToNumber(value) || 0) + step;
+
       _onInput({ ...e,
-        target: { ...e.target,
-          value: Number(convertMoneyToNumber(value) || 0) + step
-        }
+        target
       });
 
       e.preventDefault();
     } // key arrow down
     else if (keyCode === 40) {
+      target.value = Number(convertMoneyToNumber(value) || 0) - step;
+
       _onInput({ ...e,
-        target: { ...e.target,
-          value: Number(convertMoneyToNumber(value) || 0) - step
-        }
+        target
       });
 
       e.preventDefault();
@@ -261,6 +261,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   }, [valueProps]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
+    currentRef.element = ref.current;
     const _instance = {}; // methods
 
     _instance.__proto__ = {}; // hidden methods
@@ -271,7 +272,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   return jsx("div", {
     ref: ref,
     css: NumberInputRoot,
-    className: ['DGN-UI-NumberInput', className].join(' ').trim().replace(/\s+/g, ' ')
+    className: classNames('DGN-UI-NumberInput', className)
   }, !!label && jsx(Label, { ...labelProps,
     required: required,
     disabled: disabled
@@ -297,12 +298,12 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     delayOnChange: delayOnChange,
     onKeyDown: _onKeyDown,
     onChange: e => {
+      const target = e.target;
+      target.value = globalRef.current.valueString;
+      target.valueString = globalRef.current.returnValue;
       onChange({ ...e,
         value: globalRef.current.value,
-        target: { ...e.target,
-          value: globalRef.current.valueString,
-          valueString: globalRef.current.returnValue
-        }
+        target
       });
     },
     onBlur: e => _onBlur(e)
@@ -312,142 +313,146 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     disabled: disabled
   }, validateResult));
 });
+const NumberInputRoot = css`
+    ${displayBlock};
+    ${positionRelative};
+    margin-bottom: ${spacing([5])};
+`;
 NumberInput.defaultProps = {
-  viewType: 'underlined',
-  label: '',
-  // placeholder: getGlobal('inputPlaceholder'),
-  error: '',
-  startIcon: '',
-  endIcon: '',
-  decimalSymbol: locale.get() === 'vi' ? ',' : '.',
-  required: false,
-  nonStyle: false,
   autoFocus: false,
+  className: '',
+  decimalDigit: 0,
+  decimalSymbol: locale.get() === 'vi' ? ',' : '.',
   disabled: false,
-  readOnly: false,
   disabledNegative: false,
+  endIcon: '',
+  error: '',
   fixedDecimalDigit: false,
+  label: '',
+  max: Infinity,
+  min: -Infinity,
+  nonStyle: false,
+  readOnly: false,
+  required: false,
+  startIcon: '',
   step: 1,
-  decimalDigit: 0,
   thousandSeparator: false,
-  min: -Infinity,
-  max: Infinity,
-  className: ''
+  viewType: 'underlined'
 };
 NumberInput.propTypes = {
-  /** the type of border you want to display */
-  viewType: PropTypes.oneOf(['underlined', 'outlined']),
-
-  /** separator symbol */
-  decimalSymbol: PropTypes.oneOf([',', '.']),
+  /** If `true`, the `input` element is focused during the first mount. */
+  autoFocus: PropTypes.bool,
 
-  /** default value is displayed for first render */
-  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** If `true`, width of input will resize according to content. */
+  autoWidth: PropTypes.bool,
 
-  /** the displayed value for each change */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Class for component. */
+  className: PropTypes.string,
 
-  /** number of decimal places allowed */
+  /** Number of decimal places allowed. */
   decimalDigit: PropTypes.number,
 
-  /** min of value was allowed */
-  min: PropTypes.number,
-
-  /** max of value was allowed */
-  max: PropTypes.number,
+  /** Separator symbol. */
+  decimalSymbol: PropTypes.oneOf([',', '.']),
 
-  /** step of input */
-  step: PropTypes.number,
+  /** Default value of the component. */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /** label for input */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** The number of milliseconds to wait before call onChange. */
+  delayOnChange: PropTypes.number,
 
-  /** hints for input */
-  placeholder: PropTypes.string,
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
 
-  /** error for input */
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /** If `true`, negative numbers are not allowed. */
+  disabledNegative: PropTypes.bool,
 
-  /** icon at start */
-  startIcon: PropTypes.any,
+  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the right of input. */
+  endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** icon at end */
-  endIcon: PropTypes.any,
+  /** Error displayed below input. */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /** prevent all event if true, hide all icon */
-  disabled: PropTypes.bool,
+  /** fixedDecimalDigit. */
+  fixedDecimalDigit: PropTypes.bool,
 
-  /** transparent border color if true */
-  nonStyle: PropTypes.bool,
+  /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
+  helperTextProps: PropTypes.object,
 
-  /** prevent all event if true */
-  readOnly: PropTypes.bool,
+  /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) applied to the input element. */
+  inputProps: PropTypes.object,
 
-  /** auto focus after first render */
-  autoFocus: PropTypes.bool,
+  /** Pass a ref to the input element. */
+  inputRef: ref,
 
-  /** negative numbers are not allowed if true */
-  disabledNegative: PropTypes.bool,
+  /** Style inline of input element. */
+  inputStyle: PropTypes.object,
 
-  /** At least one character is required */
-  required: PropTypes.bool,
+  /** The label of the component. */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** props of input in NumberInput component */
-  inputProps: PropTypes.object,
+  /**  Props applied to the [Label](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) element. */
+  labelProps: PropTypes.object,
 
-  /** style inline of input in NumberInput component */
-  inputStyle: PropTypes.object,
+  /** Maximum possible value. */
+  max: PropTypes.number,
 
-  /** 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/>
-   * * array: the validation rule list, insist object/string
-   */
-  validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
+  /** Maximum value character (not including separator). */
+  maxDigit: PropTypes.number,
 
-  /** on key down function */
-  onKeyDown: PropTypes.func,
+  /** Minimal possible value. */
+  min: PropTypes.number,
 
-  /** on key up function */
-  onKeyUp: PropTypes.func,
+  /** If `true`, component will have no style */
+  nonStyle: PropTypes.bool,
 
-  /** on input function */
-  onInput: PropTypes.func,
+  /** Callback fired when the input is blurred. */
+  onBlur: PropTypes.func,
 
-  /** on change function */
+  /** Callback fired when the value is changed. */
   onChange: PropTypes.func,
 
-  /** on focus function */
+  /** Callback fired when the input is focused. */
   onFocus: PropTypes.func,
 
-  /** on blur function */
-  onBlur: PropTypes.func,
+  /** Callback fired when input. */
+  onInput: PropTypes.func,
 
-  /** inputRef of NumberInput component */
-  inputRef: PropTypes.any,
+  /** Callback fired when pressing a key. */
+  onKeyDown: PropTypes.func,
 
-  /** inputRef of fixedDecimalDigit component */
-  fixedDecimalDigit: PropTypes.bool,
+  /** Callback fired when releases a key. */
+  onKeyUp: PropTypes.func,
 
-  /** inputRef of delayOnChange component */
-  delayOnChange: PropTypes.number,
+  /** The short hint displayed in the input before the user enters a value. */
+  placeholder: PropTypes.string,
 
-  /** inputRef of delayOnChange component */
-  thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
+  /** If `true`, the component is readOnly. */
+  readOnly: PropTypes.bool,
 
-  /** className of component */
-  className: PropTypes.string,
+  /** If `true`, the input element is required. */
+  required: PropTypes.bool,
 
-  /** max character is number of NumberInput component */
-  maxDigit: PropTypes.number,
+  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the left of input. */
+  startIcon: PropTypes.any,
 
-  /** autoWidth of TextInput component, don't run with multiline = true */
-  autoWidth: PropTypes.bool,
+  /** Specify how much the values should increase/decrease upon clicking on up/down button. */
+  step: PropTypes.number,
 
-  /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
-  labelProps: PropTypes.object,
+  /** Thousand separator character. */
+  thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
+
+  /** 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/>
+   * * array: the validation rule list, insist object/string
+   */
+  validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
+
+  /** The value of the input element, required for a controlled component. */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
-  helperTextProps: PropTypes.object
+  /** The variant to use. */
+  viewType: PropTypes.oneOf(['underlined', 'outlined'])
 };
 export default NumberInput;