diginet-core-ui 1.4.2 → 1.4.3

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

@@ -332,10 +332,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //     }
   // };
 
-  /**
-   * 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 (typeof text !== 'string') text = text.toString();
@@ -347,10 +347,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } 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 = '';
@@ -1758,9 +1758,9 @@ Dropdown.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** 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]),
   /**  Style inline of dropdown items. */
@@ -1769,14 +1769,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,
-  /** 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,
@@ -1810,8 +1810,8 @@ Dropdown.propTypes = {
   onChange: PropTypes.func,
   /** Callback fired when dropdown closed. */
   onClosed: PropTypes.func,
-  /** 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,
   /** Callback fired when key down input */
@@ -1822,21 +1822,21 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */
   readOnly: PropTypes.bool,
-  /** 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]),
   /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
-  /**
-   * 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]),
   /** Specifies a data object's field name or an expression whose value is compared to the search string. */
@@ -1863,19 +1863,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
    */
 };
 

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

@@ -12,7 +12,10 @@ const regexNumber = /[^0-9]/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 clamp = (num, min, max) => {
+  var _Math$min;
+  return (_Math$min = Math.min(Math.max(num, min), max)) !== null && _Math$min !== void 0 ? _Math$min : '';
+};
 const NumberInput = /*#__PURE__*/forwardRef(({
   action = {},
   autoFocus,
@@ -93,11 +96,16 @@ const NumberInput = /*#__PURE__*/forwardRef(({
       }
     } = inputRef;
     let number = convertMoneyToNumber(vl, isNumber);
-    if (disabledNegative && Number(number || 0) < 0) number = clamp(number, min, max);
-    if (typeof max !== 'undefined' && Number(number) > max) number = Math.min(number, max);
+
+    // if (disabledNegative && Number(number || 0) < 0) number = clamp(number, min, max);
+    // if (typeof max !== 'undefined' && Number(number) > max) number = Math.min(number, max);
+    if (!number || isNaN(number)) return number;else if (number.toString().substr(-1) !== '.') {
+      number = clamp(number, min, max);
+    }
 
     // number = Currency.format(number);
-    if (!number) return number;
+    // if (!number) return number;
+
     number = (_number = number) === null || _number === void 0 ? void 0 : _number.toString().split('.');
     if (number.length === 2 && !number[0]) {
       number[0] = '0';
@@ -137,6 +145,8 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     valueT = parseNumberToMoney(valueT);
     const returnValue = convertMoneyToNumber(valueT);
     e.value = globalRef.current.value = !isNaN(parseFloat(returnValue)) ? parseFloat(returnValue) : null;
+    // e.target.value = globalRef.current.valueString = valueT || '';
+    // globalRef.current.returnValue = returnValue || '';
     e.target.value = globalRef.current.valueString = valueT || '';
     globalRef.current.returnValue = returnValue || '';
     onInput === null || onInput === void 0 ? void 0 : onInput(e);
@@ -224,7 +234,8 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     }
 
     // disabled negative
-    const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-'));
+    // const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-'));
+    const disabled180 = (keyCode === 189 || keyCode === 109) && (min === 0 || value.includes('-'));
 
     // disabled max digit
     const isMaxDigit = maxDigit && (value === null || value === void 0 ? void 0 : value.replace(regexNumber, '').length) === maxDigit && (isNumber || key === thousandSymbol || key === decimalSymbol) && selectionStart === selectionEnd;
@@ -246,12 +257,18 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     }
   }, [value]);
   useEffect(() => {
-    var _valueProps;
-    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);
+    // if (typeof valueProps !== 'undefined')
+    //     if (disabledNegative && Number(valueProps || 0) < 0) {
+    if (!isNaN(valueProps) || !isNaN(value)) {
+      var _valueProps;
+      if (min === 0 && 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?.toString().replace(regexValidNumber, ''), true));
+      setValue(parseNumberToMoney((_valueProps = valueProps) === null || _valueProps === void 0 ? void 0 : _valueProps.toString().replace(regexValidNumber, ''), true));
     }
-    setValue(parseNumberToMoney((_valueProps = valueProps) === null || _valueProps === void 0 ? void 0 : _valueProps.toString().replace(regexValidNumber, ''), true));
   }, [valueProps]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -327,7 +344,7 @@ const NumberInputRoot = css`
 NumberInput.defaultProps = {
   autoFocus: false,
   className: '',
-  decimalDigit: 0,
+  decimalDigit: Infinity,
   decimalSymbol: locale.get() === 'vi' ? ',' : '.',
   disabled: false,
   disabledNegative: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,9 @@ npm test
 ```
 
 ## Changelog
+## 1.4.3
+- \[Fixed\]: NumberInput – Fix bug arrow keydown, back, check min, max
+
 ## 1.4.2
 - \[Changed\]: Dropdown – Add action loadData
 - \[Fixed\]: Dropdown – Fix bug search filter data when using remote; Fix bug not render invalid html tag

package/styles/sx/index.js

@@ -1,20 +1,22 @@
 import { css } from '@emotion/core';
+import { getSpacing } from "../general";
 import { handleBreakpoints } from "../../utils";
-const cssKeyMap = new Map([['display', 'display']]);
+const cssKeyMap = new Map([['display', 'display'], ['padding', 'padding']]);
+const parsePropValue = (cssKey, propValue) => {
+  switch (cssKey) {
+    case 'padding':
+      return `${cssKey}: ${getSpacing(propValue)}`;
+    default:
+      return `${cssKey}: ${propValue};`;
+  }
+};
 const sx = prop => {
   if (typeof prop !== 'object' || Array.isArray(prop) || prop === null) return null;
   let sxStyleCSS = '';
   Object.keys(prop).forEach(key => {
     const cssKey = cssKeyMap.get(key);
     if (!cssKey) return null;
-    sxStyleCSS += handleBreakpoints(prop[key], propValue => {
-      if (propValue) {
-        return `
-                        ${cssKey}: ${propValue};
-                    `;
-      }
-      return '';
-    });
+    sxStyleCSS += handleBreakpoints(prop[key], propValue => propValue ? parsePropValue(cssKey, propValue) : '');
   });
   return css`
         ${sxStyleCSS}

package/utils/index.js

@@ -7,6 +7,7 @@ export { default as getFileType } from "./getFileType";
 export { default as handleBreakpoints } from "./handleBreakpoints";
 export { default as hexToRGBA } from "./hexToRGBA";
 export { default as isMobile } from "./isMobile";
+export { default as isUndefined } from "./isUndefined";
 export { default as mapParent } from "./map-parent";
 export { default as onValidate } from "./validate";
 export { default as parseTextToHTML } from "./parseHTML";

package/utils/isUndefined.js

@@ -0,0 +1,2 @@
+const isUndefined = variable => typeof variable === 'undefined';
+export default isUndefined;