diginet-core-ui 1.3.59 → 1.3.60

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

@@ -15,6 +15,7 @@ const NumberInputRoot = css`
     margin-bottom: 20px;
 `;
 const regexValidNumber = /[^0-9.,-]/g;
+const regexNumber = /[^0-9]/g;
 const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g;
 const NumberInput = /*#__PURE__*/forwardRef(({
   viewType,
@@ -43,12 +44,14 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   onChange,
   onFocus,
   onInput,
+  onBlur,
   onKeyDown,
   onKeyUp,
   validates,
   delayOnChange,
   fixedDecimalDigit,
-  className
+  className,
+  maxDigit
 }, reference) => {
   inputRef = inputRef || useRef(null);
   const pos = useRef(null);
@@ -164,6 +167,8 @@ const NumberInput = /*#__PURE__*/forwardRef(({
         });
       }
     }
+
+    onBlur && onBlur(e);
   };
 
   const _onKeyDown = e => {
@@ -184,11 +189,8 @@ const NumberInput = /*#__PURE__*/forwardRef(({
 
     const isNumber = keyCode >= 48 && keyCode <= 57 && shiftKey === false || keyCode >= 96 && keyCode <= 105 || keyCode === 231 && key >= '0' && key <= '9'; // character input type="number"
 
-    const allowKeyTypeNumber = isNumber || keyCode === 8 || // key backspace
-    keyCode > 34 && keyCode < 40 || keyCode === 190 || keyCode === 110 || // .
-    keyCode === 231 && key === '.' || // .
-    keyCode === 188 || // ,
-    (ctrlKey || metaKey) && (keyCode === 65 || keyCode === 67 || keyCode === 86) || // ctrl + A, ctrl + C, ctrl + V
+    let allowKeyTypeNumber = isNumber || keyCode === 8 || // key backspace
+    keyCode > 34 && keyCode < 40 || key === thousandSymbol || key === decimalSymbol || (ctrlKey || metaKey) && (keyCode === 65 || keyCode === 67 || keyCode === 86) || // ctrl + A, ctrl + C, ctrl + V
     keyCode === 46 || // key delete
     keyCode === 189 || keyCode === 109 || // -
     keyCode === 9; // tab
@@ -197,13 +199,10 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     const removeDot = keyCode === 8 && selectionEnd - selectionStart <= 1 && value.charAt(selectionEnd - 1) === thousandSymbol; // Decimal
     // Do not allow the character decimal if decimalDigit is undefined
 
-    const isDecimalSymbol = decimalSymbol === '.' && (keyCode === 190 || keyCode === 110) || decimalSymbol === ',' && keyCode === 188;
+    const isDecimalSymbol = decimalSymbol === key;
     const disabledDecimalSymbol = isDecimalSymbol && !decimalDigit; // Accepts only one decimal separator
 
-    const decimalExists = value.includes(decimalSymbol) && isDecimalSymbol; // Do not allow the character thousand
-
-    const isThousandSymbol = (!thousandSymbol || thousandSymbol === '.') && (keyCode === 190 || keyCode === 110) || thousandSymbol === ',' && keyCode === 188;
-    const disabledThousandSymbol = isThousandSymbol; // Disabled typing input when decimal digit to limit and focus is last
+    const decimalExists = value.includes(decimalSymbol) && isDecimalSymbol; // Disabled typing input when decimal digit to limit and focus is last
 
     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
@@ -229,9 +228,11 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     } // disabled negative
 
 
-    const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-')); // Block event if include conditions
+    const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || 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; // Block event if include conditions
 
-    if (decimalExists || disabledThousandSymbol || removeDot || isNumber && disabledTypingDecimal || disabledDecimalSymbol || !allowKeyTypeNumber || disabled180) {
+    if (decimalExists || removeDot || isNumber && disabledTypingDecimal || disabledDecimalSymbol || !allowKeyTypeNumber || disabled180 || isMaxDigit) {
       e.preventDefault();
     }
 
@@ -415,6 +416,9 @@ NumberInput.propTypes = {
   /** on focus function */
   onFocus: PropTypes.func,
 
+  /** on blur function */
+  onBlur: PropTypes.func,
+
   /** inputRef of NumberInput component */
   inputRef: PropTypes.any,
 
@@ -428,6 +432,9 @@ NumberInput.propTypes = {
   thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
 
   /** className of component */
-  className: PropTypes.string
+  className: PropTypes.string,
+
+  /** max character is number of NumberInput component */
+  maxDigit: PropTypes.number
 };
 export default NumberInput;

package/icons/basic.js

@@ -3720,34 +3720,6 @@ export const NotificationV2 = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
-export const Pin = /*#__PURE__*/memo(({
-  width,
-  height,
-  color = '#7F828E',
-  viewBox = false
-}) => {
-  if (viewBox) {
-    return /*#__PURE__*/React.createElement("svg", {
-      width: width || 24,
-      height: height || 24,
-      viewBox: "0 0 24 24",
-      fill: "none"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M13.7484 4H10.2395C9.714 4 9.2855 4.44029 9.2855 4.98442C9.2855 5.24611 9.38656 5.49533 9.56443 5.67809C9.69783 5.81101 9.86357 5.90239 10.0414 5.94393L9.714 10.4216C9.3623 10.5545 9.03487 10.7622 8.76402 11.0405C8.27489 11.5472 8 12.2326 8 12.9429C8 13.4621 8.41233 13.8858 8.91764 13.8858H11.0278L12.002 20L12.9722 13.8858H15.0824C15.5877 13.8858 16 13.4621 16 12.9429C16 12.2285 15.7251 11.5472 15.2319 11.0447C14.9611 10.7664 14.6377 10.5587 14.282 10.4258L13.9505 5.93977C14.1283 5.90239 14.2941 5.81101 14.4275 5.67394C14.6054 5.49117 14.7064 5.2378 14.7064 4.98027C14.7064 4.44029 14.2779 4 13.7484 4Z",
-      fill: colors[color] || color
-    }));
-  }
-
-  return /*#__PURE__*/React.createElement("svg", {
-    width: width || 8,
-    height: height || 16,
-    viewBox: "0 0 8 16",
-    fill: "none"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M5.74836 0H2.23951C1.714 0 1.2855 0.440291 1.2855 0.984424C1.2855 1.24611 1.38656 1.49533 1.56443 1.67809C1.69783 1.81101 1.86357 1.90239 2.04144 1.94393L1.714 6.4216C1.3623 6.55452 1.03487 6.7622 0.764022 7.0405C0.274886 7.54725 0 8.23261 0 8.94289C0 9.4621 0.412329 9.88577 0.917635 9.88577H3.02779L4.00202 16L4.97221 9.88577H7.08236C7.58767 9.88577 8 9.4621 8 8.94289C8 8.22845 7.72511 7.54725 7.23193 7.04465C6.96109 6.76636 6.6377 6.55867 6.28196 6.42575L5.95048 1.93977C6.12835 1.90239 6.29409 1.81101 6.42749 1.67394C6.60536 1.49117 6.70642 1.2378 6.70642 0.98027C6.70642 0.440291 6.27792 0 5.74836 0Z",
-    fill: colors[color] || color
-  }));
-});
 export const Unlock = /*#__PURE__*/memo(({
   width,
   height,
@@ -3786,31 +3758,27 @@ export const UnPin = /*#__PURE__*/memo(({
   color = '#7F828E',
   viewBox = false
 }) => {
-  if (viewBox) {
-    return /*#__PURE__*/React.createElement("svg", {
-      width: width || 24,
-      height: height || 24,
-      viewBox: "0 0 24 24",
-      fill: "none"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M14.8572 10.624L11.0435 14.2961L12.0073 20.0001L13.0459 13.8881H15.2976C15.8376 13.8881 16.278 13.4641 16.278 12.944C16.278 12.232 15.9872 11.552 15.4554 11.048C15.2726 10.872 15.0732 10.736 14.8572 10.624Z",
-      fill: colors[color] || color
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M17.8816 6.34403C17.7154 6.18402 17.4578 6.18402 17.2917 6.34403L14.342 9.18406L14.0845 5.93602C14.2756 5.89602 14.4501 5.80802 14.5913 5.67202C14.7824 5.48802 14.8904 5.23201 14.8904 4.97601C14.8904 4.44 14.4334 4 13.8684 4H10.1295C9.56448 4 9.1075 4.44 9.1075 4.98401C9.1075 5.24801 9.21551 5.49602 9.40661 5.68002C9.54786 5.80802 9.72235 5.90402 9.91345 5.94402L9.56448 10.4241C9.19058 10.5521 8.84161 10.7601 8.5508 11.0401C8.02735 11.5441 7.73654 12.2321 7.73654 12.9441C7.73654 13.4641 8.17691 13.8881 8.71698 13.8881H9.45647L6.12463 17.0961C5.95846 17.2561 5.95846 17.5041 6.12463 17.6641C6.29081 17.8241 6.54838 17.8241 6.71456 17.6641L17.8816 6.91203C18.0395 6.75203 18.0395 6.49603 17.8816 6.34403Z",
-      fill: colors[color] || color
-    }));
-  }
-
-  return /*#__PURE__*/React.createElement("svg", {
-    width: width || 12,
-    height: height || 16,
-    viewBox: "0 0 12 16",
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M3.41421 1.41406L2 2.82828L8 8.82828V8.99991C8 10.6599 6.66 11.9999 5 11.9999V13.9999H10.97V20.9999L11.97 21.9999L12.97 20.9999V13.9999H13.1716L20.3848 21.2131L21.799 19.7988L3.41421 1.41406Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M19 13.9999H18.8284L6.84113 2.0126C6.8929 2.00425 6.94597 1.99991 7 1.99991H17C17.55 1.99991 18 2.44991 18 2.99991C18 3.54991 17.55 3.99991 17 3.99991H16V8.99991C16 10.6599 17.34 11.9999 19 11.9999V13.9999Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 21,
+    viewBox: "0 0 20 21",
     fill: "none"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M8.8572 6.62402L5.04346 10.2961L6.00728 16.0001L7.04588 9.88806H9.29757C9.83764 9.88806 10.278 9.46405 10.278 8.94405C10.278 8.23204 9.9872 7.55203 9.45544 7.04803C9.27264 6.87203 9.07323 6.73602 8.8572 6.62402Z",
+    d: "M1.41421 0.414062L0 1.82828L6 7.82828V7.99991C6 9.65991 4.66 10.9999 3 10.9999V12.9999H8.97V19.9999L9.97 20.9999L10.97 19.9999V12.9999H11.1716L18.3848 20.2131L19.799 18.7988L1.41421 0.414062Z",
     fill: colors[color] || color
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M11.8816 2.34403C11.7154 2.18402 11.4578 2.18402 11.2917 2.34403L8.34205 5.18406L8.08447 1.93602C8.27558 1.89602 8.45006 1.80802 8.59131 1.67202C8.78241 1.48802 8.89043 1.23201 8.89043 0.976011C8.89043 0.440005 8.43344 0 7.86844 0H4.12948C3.56448 0 3.1075 0.440005 3.1075 0.984011C3.1075 1.24801 3.21551 1.49602 3.40661 1.68002C3.54786 1.80802 3.72235 1.90402 3.91345 1.94402L3.56448 6.42407C3.19058 6.55207 2.84161 6.76007 2.5508 7.04008C2.02735 7.54408 1.73654 8.23209 1.73654 8.9441C1.73654 9.4641 2.17691 9.88811 2.71698 9.88811H3.45647L0.124632 13.0961C-0.041544 13.2561 -0.041544 13.5041 0.124632 13.6641C0.290808 13.8241 0.548382 13.8241 0.714558 13.6641L11.8816 2.91203C12.0395 2.75203 12.0395 2.49603 11.8816 2.34403Z",
+    d: "M17 12.9999H16.8284L4.84113 1.0126C4.8929 1.00425 4.94597 0.999907 5 0.999907H15C15.55 0.999907 16 1.44991 16 1.99991C16 2.54991 15.55 2.99991 15 2.99991H14V7.99991C14 9.65991 15.34 10.9999 17 10.9999V12.9999Z",
     fill: colors[color] || color
   }));
 });
@@ -4400,6 +4368,34 @@ export const Photo = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Pin = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 9V4H17C17.55 4 18 3.55 18 3C18 2.45 17.55 2 17 2H7C6.45 2 6 2.45 6 3C6 3.55 6.45 4 7 4H8V9C8 10.66 6.66 12 5 12V14H10.97V21L11.97 22L12.97 21V14H19V12C17.34 12 16 10.66 16 9Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 14,
+    height: height || 20,
+    viewBox: "0 0 14 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 7V2H12C12.55 2 13 1.55 13 1C13 0.45 12.55 0 12 0H2C1.45 0 1 0.45 1 1C1 1.55 1.45 2 2 2H3V7C3 8.66 1.66 10 0 10V12H5.97V19L6.97 20L7.97 19V12H14V10C12.34 10 11 8.66 11 7Z",
+    fill: colors[color] || color
+  }));
+});
 export const PlanePaper = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

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

package/readme.md

@@ -38,6 +38,11 @@ npm test
 ```
 
 ## Changelog
+## 1.3.60
+- \[Added\]: NumberInput – Add props maxDigit
+- \[Changed\]: Icon – Pin, UnPin
+- \[Fixed\]: NumberInput – Fix bug decimalSymbol
+
 ## 1.3.59
 - \[Added\]: Icon – Export component Icon
 - \[Added\]: Icon – Groups, Photo