diginet-core-ui 1.3.30-beta.3 → 1.3.32-beta.2

package/assets/images/menu/erp/W05F0011N0000.svg

@@ -0,0 +1,20 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13482_11580)">
+<path d="M22.7999 11.97L22.6299 11.4C22.5299 11.08 22.1999 10.91 21.8899 11L7.13993 15.47C6.81993 15.57 6.63993 15.9 6.73993 16.21L6.90993 16.78C7.00993 17.1 7.33993 17.28 7.64993 17.18L22.3999 12.71C22.7199 12.61 22.8999 12.28 22.7999 11.97Z" fill="#2680EB"/>
+<path d="M22.9999 16.24V18.1L9.19993 22.29C8.88993 22.39 8.55993 22.21 8.45993 21.89L8.28993 21.32C8.18993 21.01 8.36993 20.68 8.68993 20.58L22.9999 16.24Z" fill="#2680EB"/>
+<path d="M27.2999 27C27.2599 27.21 27.1099 27.38 26.8899 27.45L22.9299 28.66L12.1399 31.94C11.8299 32.04 11.4999 31.86 11.3999 31.54L11.2299 30.97C11.2099 30.89 11.1999 30.81 11.2099 30.74C11.2299 30.51 11.3899 30.3 11.6299 30.22L22.8199 26.82H22.8299C23.2099 26.94 23.5899 27 23.9999 27H27.2999Z" fill="#2680EB"/>
+<path d="M6.81993 6.30001C7.10993 7.23001 8.08993 7.75001 9.01993 7.47001L16.4299 5.21001C17.3599 4.93001 17.8899 3.95001 17.6099 3.01001L17.5999 2.98001C17.3199 2.05001 16.3299 1.53001 15.3999 1.81001L14.5299 2.08001C14.0699 2.22001 13.5699 1.96001 13.4299 1.49001L13.4199 1.46001C13.0899 0.37001 11.9399 -0.23999 10.8599 0.0900095L10.8099 0.10001C9.71993 0.43001 9.10993 1.58001 9.43993 2.66001V2.69001C9.57993 3.15001 9.31993 3.65001 8.84993 3.79001L7.97993 4.06001C7.04993 4.34001 6.52993 5.33001 6.80993 6.26001L6.81993 6.30001Z" fill="#2680EB"/>
+<path d="M33.5999 29.14L32.9499 27H29.8499L30.7599 30L10.8999 36.03L3.99993 13.33L22.9999 7.56001V6.00001C22.9999 5.60001 23.2399 5.23001 23.6199 5.08001C23.7399 5.02001 23.8699 5.00001 23.9999 5.00001C24.2599 5.00001 24.5199 5.10001 24.7099 5.29001L25.4999 6.09001L26.2899 5.29001C26.2999 5.28001 26.3199 5.27001 26.3299 5.25001L25.6599 3.04001C25.1799 1.47001 23.5299 0.580009 21.9599 1.06001L18.4999 2.11001C18.5899 2.27001 18.6599 2.45001 18.7199 2.64001C19.2099 4.23001 18.3299 5.88001 16.7699 6.35001L9.46993 8.57001C7.97993 9.02001 6.32993 8.31001 5.75993 6.86001C5.65993 6.58001 5.59993 6.31001 5.55993 6.04001L2.09993 7.09001C0.539928 7.56001 -0.350072 9.22001 0.129928 10.79L8.04993 36.89C8.52993 38.46 10.1799 39.35 11.7499 38.87L31.6199 32.84C33.1899 32.36 34.0799 30.71 33.5999 29.14Z" fill="#2680EB"/>
+<path d="M20.1099 23.92V23.93L10.5799 26.82C10.5299 26.84 10.4799 26.84 10.4299 26.84C10.1699 26.85 9.91993 26.7 9.83993 26.43L9.66993 25.86C9.64993 25.78 9.63993 25.7 9.64993 25.63C9.66993 25.39 9.82993 25.19 10.0699 25.11L19.9999 22.1V23C19.9999 23.32 20.0399 23.63 20.1099 23.92Z" fill="#2680EB"/>
+<path d="M32 13H28C27.45 13 27 12.55 27 12C27 11.45 27.45 11 28 11H32C32.55 11 33 11.45 33 12C33 12.55 32.55 13 32 13Z" fill="#FF8C00"/>
+<path d="M32 16H28C27.45 16 27 15.55 27 15C27 14.45 27.45 14 28 14H32C32.55 14 33 14.45 33 15C33 15.55 32.55 16 32 16Z" fill="#FF8C00"/>
+<path d="M37.5 7.5L36 6L34.5 7.5L33 6L31.5 7.5L30 6L28.5 7.5L27 6L25.5 7.5L24 6V20H22C21.45 20 21 20.45 21 21V23C21 24.66 22.34 26 24 26H36C37.66 26 39 24.66 39 23V6L37.5 7.5ZM33 24H24C23.45 24 23 23.55 23 23V22H33V24ZM37 23C37 23.55 36.55 24 36 24C35.45 24 35 23.55 35 23V21C35 20.45 34.55 20 34 20H26V9H37V23Z" fill="#FF8C00"/>
+<path d="M35 13C35.5523 13 36 12.5523 36 12C36 11.4477 35.5523 11 35 11C34.4477 11 34 11.4477 34 12C34 12.5523 34.4477 13 35 13Z" fill="#FF8C00"/>
+<path d="M35 16C35.5523 16 36 15.5523 36 15C36 14.4477 35.5523 14 35 14C34.4477 14 34 14.4477 34 15C34 15.5523 34.4477 16 35 16Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_13482_11580">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -1636,7 +1636,7 @@ Dropdown.defaultProps = {
   itemMultipleSize: 'medium',
   className: '',
   label: '',
-  placeholder: '',
+  placeholder: getGlobal('dropdownPlaceholder'),
   error: '',
   iconExpr: 'none',
   valueExpr: 'id',

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

@@ -192,9 +192,8 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const _onChangeInput = e => {
-    const value = e.target.value;
     const timeout = setTimeout(() => {
-      onChangeInput === null || onChangeInput === void 0 ? void 0 : onChangeInput(value);
+      onChangeInput === null || onChangeInput === void 0 ? void 0 : onChangeInput(e);
     }, delayOnInput);
     return () => clearTimeout(timeout);
   };

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

@@ -2,6 +2,7 @@
 
 /** @jsx jsx */
 import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import useInput from '../../../utils/useInput';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { renderIcon } from '../../../utils';
@@ -10,11 +11,12 @@ import { typography } from '../../../styles/typography';
 const {
   colors
 } = theme;
+import { getGlobal } from '../../../global';
 const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   viewType,
   defaultValue,
-  value,
+  value: valueProp,
   placeholder,
   resize,
   status,
@@ -42,8 +44,17 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onInput,
   onKeyDown,
   onKeyUp,
+  delayOnChange,
   ...props
 }, reference) => {
+  const {
+    bind
+  } = useInput({
+    defaultValue,
+    valueProp,
+    onChange,
+    delayOnChange
+  });
   const ref = useRef(null);
   const inputBaseRef = useRef(null);
   const valueArray = useRef([]);
@@ -478,9 +489,9 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     const defaultHeight = 24;
 
-    if (value !== undefined) {
-      valueArray.current.push(value);
-      inputBaseRef.current.value = value;
+    if (valueProp !== undefined) {
+      valueArray.current.push(valueProp);
+      inputBaseRef.current.value = valueProp;
 
       if (multiline && !/\d+/.test(rows)) {
         inputBaseRef.current.style.height = 0;
@@ -489,11 +500,11 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return () => {
-      if (value !== undefined && multiline && !/\d+/.test(rows) && inputBaseRef.current) {
+      if (valueProp !== undefined && multiline && !/\d+/.test(rows) && inputBaseRef.current) {
         inputBaseRef.current.style.height = defaultHeight + 'px';
       }
     };
-  }, [value]);
+  }, [valueProp]);
   useEffect(() => {
     if (disabled) {
       if (ref.current) {
@@ -531,9 +542,9 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     onInput: onInputTextArea,
-    onChange: onChange,
     onBlur: onBlur,
-    onFocus: onFocus
+    onFocus: onFocus,
+    ...bind
   }));
   const InputComp = jsx("div", {
     css: inputBaseRoot,
@@ -568,9 +579,9 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     onInput: onInput,
-    onChange: onChange,
     onBlur: onBlur,
-    onFocus: onFocus
+    onFocus: onFocus,
+    ...bind
   })), !!endIcon && jsx("div", {
     css: inputBaseIconCSS,
     ...endIconProps,
@@ -609,7 +620,7 @@ InputBase.defaultProps = {
   autoComplete: 'off',
   className: '',
   defaultValue: '',
-  placeholder: '',
+  placeholder: getGlobal('inputPlaceholder'),
   resize: 'none',
   status: 'default',
   type: 'text',
@@ -718,6 +729,9 @@ InputBase.propTypes = {
   onFocus: PropTypes.func,
 
   /** inputRef of InputBase component */
-  inputRef: PropTypes.any
+  inputRef: PropTypes.any,
+
+  /** delayOnChange of InputBase component */
+  delayOnChange: PropTypes.number
 };
 export default InputBase;

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

@@ -334,8 +334,11 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (valueTypeReturn === 'string') {
       el.value = result;
+      el.target.value = result;
     } else {
-      el.value = String(+result.replace(',', '.')) !== 'NaN' ? +result.replace(',', '.') : result;
+      const newResult = String(+result.replace(',', '.')) !== 'NaN' ? +result.replace(',', '.') : result;
+      el.value = newResult;
+      el.target.value = newResult;
     }
 
     !!onChange && onChange(el);
@@ -356,7 +359,8 @@ const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (v === null || v === undefined) {
       inputRef.current.value = '';
     } else {
-      v = getValueWithDecimal(getValueWithMinMax(v).replace('.', decimalSymbol));
+      v = v.toString().replace('.', decimalSymbol);
+      v = getValueWithDecimal(getValueWithMinMax(v));
       inputRef.current.value = format ? getFormat(v) : v;
     }
   };

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

@@ -1,11 +1,12 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { memo, useEffect, useRef, forwardRef, useState, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, CircularProgress as Circular, HelperText, InputBase, Label } from '../../';
 import { renderIcon, onValidate } from '../../../utils';
+import { displayBlock, flexRow, positionRelative } from '../../../styles/general';
 const icons = {
   default: `<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fillRule="evenodd" clipRule="evenodd" d="M15.5616 19.0007C15.4036 19.0007 15.2446 18.9637 15.0986 18.8877L9.99962 16.2237L4.90162 18.8877C4.56362 19.0627 4.15562 19.0327 3.84962 18.8087C3.54162 18.5847 3.38862 18.2057 3.45362 17.8307L4.42462 12.2027L0.304623 8.21765C0.030623 7.95265 -0.068377 7.55465 0.048623 7.19065C0.165623 6.82865 0.478623 6.56365 0.856623 6.50965L6.55662 5.68165L9.10462 0.555654C9.44262 -0.124346 10.5576 -0.124346 10.8956 0.555654L13.4436 5.68165L19.1436 6.50965C19.5216 6.56365 19.8346 6.82865 19.9516 7.19065C20.0686 7.55465 19.9696 7.95265 19.6956 8.21765L15.5756 12.2027L16.5466 17.8307C16.6116 18.2057 16.4576 18.5847 16.1506 18.8087C15.9766 18.9367 15.7696 19.0007 15.5616 19.0007Z" fill="#7F828E"/>
@@ -33,7 +34,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   label,
   defaultValue,
-  value,
+  value: valueProp,
   placeholder,
   resize,
   startIcon,
@@ -77,19 +78,20 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const iconRef = useRef(null);
   let currentValue = '';
+  const [value, setValue] = useState(valueProp || defaultValue);
   const isError = !!error && !value && value !== 0;
   /* Start styled */
 
   const TextInputRoot = css`
-        display: block;
-        position: relative;
+        ${displayBlock}
+        ${positionRelative}
         margin-bottom: 20px;
     `;
   const TextInputIcon = css`
-        display: flex;
+        ${flexRow}
         color: inherit;
         .edit-icon-pen {
-            display: flex;
+            ${flexRow}
         }
         .edit-icon-confirm {
             display: none;
@@ -179,12 +181,12 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     inputRef.current.disabled = false;
   };
 
+  useEffect(() => {
+    setValue(valueProp);
+  }, [valueProp]);
   useEffect(() => {
     !!refs && refs(ref);
-
-    if (defaultValue !== undefined && defaultValue !== '') {
-      currentValue = defaultValue;
-    }
+    currentValue = defaultValue || "";
   }, []);
   useEffect(() => {
     if (/^(quick)?Edit/i.test(type) && !multiline) {
@@ -329,7 +331,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return jsx("div", {
     ref: ref,
     css: TextInputRoot,
-    className: ['DGN-UI-TextInput', className].join(' ').trim(),
+    className: ['DGN-UI-TextInput', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
     ...props
   }, !!label && jsx(Label, {
@@ -342,7 +344,6 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     inputRef: inputRef,
     viewType: viewType,
     defaultValue: defaultValue,
-    value: value,
     placeholder: placeholder,
     autoFocus: autoFocus,
     disabled: disabled,
@@ -363,7 +364,8 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onInput: onInput,
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
-    onPaste: onPaste
+    onPaste: onPaste,
+    value: valueProp
   }), isError && jsx(HelperText, {
     disabled: disabled,
     status: status

package/global/index.js

@@ -63,7 +63,9 @@ const globalObject = {
       max: 'Vượt quá giá trị tối đa cho phép',
       min: 'Chưa đạt giá trị tối thiểu cho phép',
       required: 'Trường này bắt buộc nhập'
-    }
+    },
+    inputPlaceholder: "Nhập",
+    dropdownPlaceholder: "Chọn"
   },
   en: {
     agree: 'Agree',
@@ -127,8 +129,11 @@ const globalObject = {
       max: 'Exceeds the maximum value allowed',
       min: 'The minimum allowed value has not been reached',
       required: 'This field is required'
-    }
-  }
+    },
+    inputPlaceholder: "Type something",
+    dropdownPlaceholder: "Select"
+  },
+  delayOnInput: 500
 };
 export const getGlobal = (key, language = locale.get()) => {
   var _globalObject$languag;
@@ -147,7 +152,7 @@ export const getGlobal = (key, language = locale.get()) => {
     return result;
   }
 
-  return (_globalObject$languag = globalObject[language]) === null || _globalObject$languag === void 0 ? void 0 : _globalObject$languag[key];
+  return globalObject[key] || ((_globalObject$languag = globalObject[language]) === null || _globalObject$languag === void 0 ? void 0 : _globalObject$languag[key]);
 };
 export const setGlobal = global => {
   if (global && typeof global === 'object') {
@@ -169,8 +174,8 @@ const overrideGlobal = (newGlobal, ingredient, key) => {
         overrideGlobal(newGlobalValue, rootValue, newKey);
       }
     });
-  } else if (typeof newGlobalValue === 'string' && typeof rootValue === 'string') {
-    ingredient[key] = newGlobalValue;
+  } else {
+    globalObject[key] = newGlobalValue;
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.30-beta.3",
+  "version": "1.3.32-beta.2",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",
@@ -15,7 +15,9 @@
     "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
     "beta": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish --tag beta",
     "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
-    "version:add": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
+    "version:add": "run-script-os",
+    "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
+    "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
     "version:bump": "npm version patch --no-git-tag-version --silent",
     "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
     "test": "echo \"Error: no test specified\" && exit 1"

package/readme.md

@@ -38,7 +38,17 @@ npm test
 ```
 
 ## Changelog
-## 1.3.28
+## 1.3.31
+- \[Added\]: MenuIcon - W05F0011N0000
+- \[Changed\]: SYSTEM - Replace color text from string to object
+- \[Fixed\]: Toggle - Manage prop checked with useState
+- \[Fixed\]: Checkbox - Fix perfect pixel
+- \[Fixed\]: Button, ButtonIcon - Add Event.stopPropagation()
+- \[Fixed\]: Dropdown - Fix bug clear data Dropdown close DropdownBox
+- \[Fixed\]: NumberInput - Fix bug compare string
+- \[Fixed\]: Accordion - Fix css min-height AccordionSummary
+
+## 1.3.29
 - \[Added\]: Icon - Bug, Link
 - \[Added\]: MenuIcon - MHRM09N0004, MHRP29N0023
 - \[Changed\]: Accordion - Update Accordion, add expended like expend (keep prop expend), fix logic

package/utils/useInput.js

@@ -0,0 +1,39 @@
+import { useState, useRef } from 'react';
+
+const useInput = props => {
+  let {
+    defaultValue,
+    valueProp,
+    delayOnChange,
+    onChange
+  } = props;
+  const [value, setValue] = useState(defaultValue || valueProp);
+  const timer = useRef(null);
+  delayOnChange = Number(delayOnChange ?? 0);
+
+  const _onChange = e => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      setValue(e.target.value);
+
+      e.reset = () => {
+        setValue(e.target.value);
+        e.target.value = valueProp;
+      };
+
+      onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }, delayOnChange);
+  };
+
+  return {
+    value,
+    setValue,
+    resetState: () => setValue(value || ''),
+    clear: () => setValue(''),
+    bind: {
+      onChange: _onChange
+    }
+  };
+};
+
+export default useInput;