diginet-core-ui 1.4.54 → 1.4.55-beta.1

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

@@ -47,7 +47,7 @@ const uniqBy = (arr, iteratee) => {
     return true;
   });
 };
-const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {
@@ -63,6 +63,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     action = {},
     allowInput,
     allowSearch,
+    allowDuplicateValue,
     children,
     className,
     clearAble,
@@ -112,7 +113,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     valueObjectDefault,
     viewType,
     defaultValue,
-    disabled
+    disabled,
+    selectAll,
+    selectAllLabel
   } = props;
   const selectBox = multiple && selectBoxProp === undefined ? true : selectBoxProp;
   const searchExpr = typeof searchExprProp === 'string' ? [searchExprProp] : searchExprProp;
@@ -176,6 +179,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox, theme);
   const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _DropdownInputCSS.name, theme);
   const _CheckBoxCSS = CheckBoxCSS(theme);
+  const handleDataSource = data => {
+    let dataCustom = (data !== undefined ? data : dataSource) || [];
+    return selectAll ? [{
+      [valueExpr]: 'all'
+    }, ...dataCustom] : dataCustom;
+  };
 
   /* Start handler */
   const setShowDropdown = () => {
@@ -288,10 +297,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     });
   };
 
-  /**
-   * So sánh text đầu vào cáo map với txtSearch
-   * @param text
-   * @return {boolean}
+  /**
+   * So sánh text đầu vào cáo map với txtSearch
+   * @param text
+   * @return {boolean}
    */
   const handleRenderBySearch = (text = '') => {
     if (text === null || text === undefined) text = '';
@@ -304,24 +313,28 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     } else return text.toLowerCase().includes(txtSearch.toLowerCase());
   };
 
-  /**
-   * 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
-   * @param data {object} rowData of dataSource
-   * @return {string}
+  /**
+   * 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
+   * @param data {object} rowData of dataSource
+   * @return {string}
    */
   const displayValue = data => {
     let text = '';
+    let isReplace = true;
     if (data || data === 0) {
       displayExpr = displayExpr || valueExpr;
       let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
       // convert {id} - {name} to {<data[id]>} - {<data[name]>}
-      if (!mask && regexBetween.test(displayExpr)) {
+      if (selectAll && (data === null || data === void 0 ? void 0 : data[valueExpr]) === 'all') {
+        isReplace = false;
+        text = selectAllLabel || getGlobal('selectAll');
+      } else if (!mask && regexBetween.test(displayExpr)) {
         var _displayExpr;
         mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => (data === null || data === void 0 ? void 0 : data[_]) || '');
       } else if (!mask) {
         mask = typeof data !== 'object' ? data : '';
       }
-      text = mask.toString().replace(regexInclude, '');
+      if (isReplace) text = mask.toString().replace(regexInclude, '');
     }
     return text;
   };
@@ -389,7 +402,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         type: 'p1'
       }, displayText);
       if (multiple && selectBox) {
-        const checked = Array.isArray(valueMulti) ? valueMulti.includes(value) : valueMulti.includes(value);
+        let checked = valueMulti.includes(value);
+        if (selectAll && value === 'all') checked = selectAll && value === 'all' && valueMulti.length > 0;
         const isMaximumSelection = maximumSelectionLength === (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length);
         itemDisabled = itemDisabled || isMaximumSelection && !checked;
         items.push(jsx("div", {
@@ -402,6 +416,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
           },
           tabIndex: -1
         }, jsx(Checkbox, {
+          determinate: !(selectAll && (data === null || data === void 0 ? void 0 : data[valueExpr]) === 'all' && (valueMulti || []).length !== (dataSourceState || []).length - 1),
           css: _CheckBoxCSS,
           forTreeView: true,
           checked: checked,
@@ -437,7 +452,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     }, items !== null && items !== void 0 && items.length ? items : EmptyDataText);
   };
   const mapTreeView = () => {
-    console.log('here');
     return jsx("div", {
       css: _DropdownListCSS,
       ref: dropdownListRef,
@@ -639,7 +653,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
           const total = data && data.total ? data.total : data === null || data === void 0 ? void 0 : data.length;
           setTotalState(total);
         }
-        setDataSourceState(isReset ? rows : dataSourceState.concat(rows));
+        setDataSourceState(handleDataSource(isReset ? rows : dataSourceState.concat(rows)));
       }
     };
     setLoadingState(true);
@@ -703,8 +717,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     } else if (multiple) {
       if (!Array.isArray(currentValue[unique])) currentValue[unique] = [];
       // const newValueArr = [...currentValue[unique]];
-      const newValueArrState = [...valueMulti];
-      if (!newValueArrState.some(v => JSON.stringify(v) === JSON.stringify(value))) {
+      let newValueArrState = [...valueMulti];
+      if (selectAll && value === 'all') {
+        newValueArrState = e !== null && e !== void 0 && e.value ? dataSourceState.flatMap(item => (item === null || item === void 0 ? void 0 : item[valueExpr]) === 'all' ? [] : [item === null || item === void 0 ? void 0 : item[valueExpr]]) : [];
+      } else if (!newValueArrState.some(v => JSON.stringify(v) === JSON.stringify(value))) {
         // newValueArr.push(value);
         newValueArrState.push(value);
       } else {
@@ -717,7 +733,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         data
       });
     } else {
-      const isChanged = currentValue[unique] !== value;
+      // biến allowDuplicateValue chỉ dùng trong trường hợp đặc biệt ID 300034
+      const isChanged = allowDuplicateValue ? allowDuplicateValue : currentValue[unique] !== value;
       if (isChanged) {
         if (valueProp === undefined) {
           allValue[unique].push(value);
@@ -914,7 +931,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     setTotalState(total);
   }, [total]);
   useEffect(() => {
-    setDataSourceState(dataSource || []);
+    setDataSourceState(handleDataSource(dataSource || []));
   }, [dataSource]);
   useEffect(() => {
     setShowClear(clearAble && checkHasValue(valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) && !disabled && !readOnly && !loadingState);
@@ -1708,6 +1725,8 @@ Dropdown.propTypes = {
   }),
   /** If `true`, the input box for searching will be displayed. */
   allowSearch: PropTypes.bool,
+  /** If `true`, click on same item will add its value instead of remove it (better not use this, only for specific situation). */
+  allowDuplicateValue: PropTypes.bool,
   /** If `true`, the input value will be added when user hit Enter. */
   allowInput: PropTypes.bool,
   /** The content to be displayed inside the Dropdown box, such as TreeView. */
@@ -1724,9 +1743,9 @@ Dropdown.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** The field name used for displaying text in the dropdown list.<br/>
-   * Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: Do not use 'id - name', as it will return undefined.
+  /** The field name used for displaying text in the dropdown list.<br/>
+   * Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: Do not use 'id - name', as it will return undefined.
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /**  Inline style for dropdown items. */
@@ -1735,14 +1754,14 @@ Dropdown.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
   helperTextProps: PropTypes.object,
-  /** The field name used for displaying icons.<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;}
+  /** The field name used for displaying icons.<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,
@@ -1776,8 +1795,8 @@ Dropdown.propTypes = {
   onChange: PropTypes.func,
   /** Callback function fired when the dropdown is closed. */
   onClosed: PropTypes.func,
-  /** Callback function fired when the input value changes.<br/>
-   * If undefined, the filter function will run (default behavior).
+  /** Callback function fired when the input value changes.<br/>
+   * If undefined, the filter function will run (default behavior).
    */
   onInput: PropTypes.func,
   /** Callback function fired when a key is pressed down in the input. */
@@ -1790,27 +1809,31 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */
   readOnly: PropTypes.bool,
-  /** Function used for custom rendering of items.<br/>
-   * Example: `(data, index) => data.name + ' - ' + data.role`<br/>
-   * This can be used as an alternative to `displayExpr`
+  /** Function used for custom rendering of items.<br/>
+   * Example: `(data, index) => data.name + ' - ' + data.role`<br/>
+   * This can be used as an alternative to `displayExpr`
    */
   renderItem: PropTypes.func,
-  /** Function or field name used to display selected items.<br/>
-   * Example: `(data, index) => index + ' - ' + data.name`<br/>
+  /** Function or field name used to display selected items.<br/>
+   * Example: `(data, index) => index + ' - ' + data.name`<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
-  /**
-   * Duration to wait after entering search content before triggering a search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, the default delayOnInput will be used.
+  /**
+   * Duration to wait after entering search content before triggering a search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, the default delayOnInput will be used.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   /** Specifies the field name or expression used to compare values with the search string. */
   searchExpr: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
   /** Specifies the comparison operation used to search items. */
   searchMode: PropTypes.oneOf(['contains', 'startswith', 'equals']),
+  /** If `true`, show select all check box. */
+  selectAll: PropTypes.bool,
+  /** The content display for label of checkbox select all */
+  selectAllLabel: PropTypes.string,
   /** If `true`, checkboxes will be shown next to each dropdown item. */
   selectBox: PropTypes.bool,
   /** Inline style for the component. */
@@ -1831,19 +1854,19 @@ Dropdown.propTypes = {
   valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   /** The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
-  /**
-   * 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
    */
 };
 export default Dropdown;

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

@@ -1,14 +1,16 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, InputBase, Label, Popover, PopoverBody } from "../..";
+import { ButtonIcon, InputBase, Label, Popover, PopoverBody, HelperText } from "../..";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useMemo } from 'react';
 import { animation, borderColor, displayBlock, overflowHidden, parseHeight, parseMinWidth, positionRelative, scaleX } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
-const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const regexBetween = /[^{}]+(?=})/g;
+const regexInclude = /{|}/g;
+const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {
@@ -22,10 +24,14 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
   });
   const {
     action = {},
+    allowInput,
     bgColor: bgColorProp,
     children,
     className,
     delayOnInput,
+    disabled,
+    displayExpr: displayExprProp,
+    error,
     endIcon,
     inputProps,
     inputRef,
@@ -39,10 +45,19 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     placeholder,
     startIcon,
     style,
-    value,
-    viewType
+    value: valueProps,
+    valueExpr,
+    viewType,
+    helperTextProps
   } = props;
+  let displayExpr = displayExprProp;
   const bgColor = typeof bgColorProp === 'string' ? getProp(colors, bgColorProp, bgColorProp) : bgColorProp;
+  const ErrorView = useMemo(() => {
+    return error ? jsx(HelperText, {
+      ...helperTextProps,
+      disabled: disabled
+    }, error) : null;
+  }, [disabled, error, helperTextProps]);
   const ref = useRef(null);
   const dropdownBoxRef = useRef(null);
   const timer = useRef(null);
@@ -85,6 +100,28 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClosed === null || onClosed === void 0 ? void 0 : onClosed();
     }
   };
+
+  /**
+   * 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
+   * @param data {object} rowData of dataSource
+   * @return {string}
+   */
+  const displayValue = data => {
+    let text = '';
+    if (data || data === 0) {
+      displayExpr = displayExpr || valueExpr;
+      let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
+      // convert {id} - {name} to {<data[id]>} - {<data[name]>}
+      if (!mask && regexBetween.test(displayExpr)) {
+        var _displayExpr;
+        mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => (data === null || data === void 0 ? void 0 : data[_]) || '');
+      } else if (!mask) {
+        mask = typeof data !== 'object' ? data : '';
+      }
+      text = mask.toString().replace(regexInclude, '');
+    }
+    return text;
+  };
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -130,15 +167,17 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
     }) : null;
   };
+  const value = displayValue(valueProps);
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DropdownBoxRootCSS,
-    className: classNames('DGN-UI-Dropdown-Box', className),
+    className: classNames('DGN-UI-Dropdown-Box', className, error && 'error'),
     style: style
   }, label ? jsx(Label, {
     ...labelProps
   }, label) : null, jsx(InputBase, {
     ...inputProps,
+    readOnly: !allowInput,
     style: inputStyle,
     viewType: viewType,
     inputRef: inputRef,
@@ -157,7 +196,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     anchor: ref.current,
     width: popoverWidth,
     onClose: closeDropdownBox
-  }, jsx(PopoverBody, null, children)));
+  }, jsx(PopoverBody, null, children)), ErrorView);
 }));
 const DropdownBoxRootCSS = (bgColorProp, {
   colors
@@ -166,6 +205,17 @@ const DropdownBoxRootCSS = (bgColorProp, {
     ${positionRelative};
     ${parseMinWidth(150)};
     ${parseHeight('max-content')};
+    &.error {
+        .DGN-UI-InputBase {
+            ${borderColor(getProp(colors, 'semantic/danger'))};
+            &::before {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+            &::after {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+        }
+    }
     .DGN-UI-InputBase {
         background: ${bgColorProp ? bgColorProp === true ? getProp(colors, 'fill/disabled') : bgColorProp : 'inherit'} !important;
         ${openState && css`
@@ -183,20 +233,6 @@ const DropdownBoxCSS = ({
     margin-top: ${spacing([1])};
     ${overflowHidden};
 `;
-
-// DropdownBox.defaultProps = {
-//     className: '',
-//     label: '',
-//     placeholder: '',
-//     startIcon: 'Search',
-//     endIcon: 'ArrowDown',
-//     openOnClickAt: 'icon',
-//     viewType: 'underlined',
-//     inputProps: {},
-//     delayOnInput: 700,
-//     zIndex: zIndexCORE(1),
-// };
-
 DropdownBox.propTypes = {
   /** class for dropdown */
   className: PropTypes.string,
@@ -233,6 +269,12 @@ DropdownBox.propTypes = {
   /** the function will run after open */
   onOpened: PropTypes.func,
   /** the function will run after close */
-  onClosed: PropTypes.func
+  onClosed: PropTypes.func,
+  /** Error message displayed below the input. */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+  /** If `true`, the input is enable. */
+  allowInput: PropTypes.bool
 };
 export default DropdownBox;

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

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { Children, forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';
 import { useTheme } from "../../../theme";
-const FormGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const FormGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   fullWidth,
   oneHelperText,
   marginRight,

package/components/form-control/helper-text/index.js

@@ -9,7 +9,7 @@ import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
 const colorMap = new Map([['default', 'semantic/danger'], ['success', 'semantic/success'], ['warning', 'semantic/warning'], ['danger', 'semantic/danger'], ['info', 'semantic/info']]);
-const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const HelperText = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/form-control/input-base/UncontrolledInputBase.js

@@ -9,7 +9,7 @@ import { bgColor, border, borderBottom, borderBottomColor, borderColor, borderNo
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, refType as ref, getProp } from "../../../utils";
-const UncontrolledInputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const UncontrolledInputBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/form-control/input-base/index.js

@@ -9,7 +9,7 @@ import { bgColor, bgTransparent, border, borderBottom, borderBottomColor, border
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, refType as ref, useInput, getProp } from "../../../utils";
-const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const InputBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

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

@@ -9,7 +9,7 @@ import { flexRow, parseMinHeight, typographyTypes } from "../../../styles/genera
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
-const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Label = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/form-control/money-input/index.js

@@ -128,7 +128,7 @@ const converters = {
   en: num2WordsEn,
   zh: num2WordsZh
 };
-const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const MoneyInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`

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

@@ -49,7 +49,7 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     labelProps,
     max: maxProp,
     maxDigit,
-    min,
+    min: minProp,
     nonStyle,
     onBlur,
     onChange,
@@ -69,9 +69,12 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     viewType
   } = props;
   let max = maxProp;
+  let min = minProp;
   let thousandSymbol = thousandSeparator;
   let decimalSymbol = decimalSymbolProp;
   let valueProps = valueProp;
+  if (!min && min !== 0) min = -Infinity;
+  if (!max && max !== 0) max = Infinity;
   const pos = useRef(null);
   const ref = useRef(null);
   const globalRef = useRef({});
@@ -95,13 +98,13 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
 
   // if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
 
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
   const parseNumberToMoney = useCallback((vl, isNumber) => {
     var _number, _number2, _number$, _number3;
@@ -149,13 +152,13 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     return number;
   }, [decimalSymbol, max, value, decimalDigit, fixedDecimalDigit]);
 
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
     var _number4, _number4$toString, _number4$toString$rep, _number4$toString$rep2, _number4$toString$rep3;
@@ -167,7 +170,7 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
   }, [decimalSymbol]);
   const _onInput = useCallback((e, flag) => {
     var _e$target$value;
-    let valueT = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : e.value;
+    let valueT = eval((_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);
@@ -490,10 +493,10 @@ NumberInput.propTypes = {
   style: 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
+  /** 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. */

package/components/form-control/password-input/index.js

@@ -8,7 +8,7 @@ import { cursorNotAllowed, displayBlock, positionRelative } from "../../../style
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, onValidate, refType as ref } from "../../../utils";
-const PasswordInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const PasswordInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 

package/components/form-control/phone-input/index.js

@@ -17,7 +17,7 @@ const ensigns = {
     mark: '____ _______'
   }
 };
-const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const PhoneInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   viewType,
   ensign,
   required,

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

@@ -8,7 +8,7 @@ import { boxBorder, cursorNoDrop, cursorPointer, displayBlock, displayNone, posi
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp, randomString } from "../../../utils";
-const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Radio = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/form-control/text-input/index.js

@@ -8,7 +8,7 @@ import { cursorNotAllowed, displayBlock, positionRelative } from "../../../style
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, onValidate, refType as ref } from "../../../utils";
-const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 

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

@@ -73,7 +73,7 @@ const getValue = value => {
   }
   return new Date();
 };
-const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const TimePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   activeHeight,
   activeWidth,
   allowSeconds,

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

@@ -9,7 +9,7 @@ import { bgColor, border, borderColor, borderNone, borderRadius4px, displayFlex,
 import { useTheme } from "../../../../theme";
 import useThemeProps from "../../../../theme/utils/useThemeProps";
 import { classNames, date, getProp, hexToRGBA } from "../../../../utils";
-const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const TimePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`