diginet-core-ui 1.3.54 → 1.3.55

package/assets/images/menu/dhr/MHRM09N1040.svg

@@ -0,0 +1,8 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0C4.03 0 0 4.03 0 9C0 13.97 4.03 18 9 18C13.97 18 18 13.97 18 9C17.99 4.03 13.96 0 9 0ZM9.67 13.54V15.07H8.21V13.64C7.21 13.61 6.25 13.33 5.68 13.02L6.13 11.28C6.75 11.62 7.63 11.93 8.6 11.93C9.45 11.93 10.04 11.59 10.04 11.01C10.04 10.44 9.55 10.09 8.45 9.72C6.85 9.18 5.77 8.43 5.77 6.99C5.77 5.67 6.69 4.64 8.28 4.34V2.93H9.74V4.24C10.74 4.27 11.41 4.49 11.91 4.73L11.46 6.41C11.09 6.23 10.39 5.89 9.32 5.89C8.35 5.89 8.04 6.32 8.04 6.74C8.04 7.22 8.56 7.54 9.82 8C11.6 8.63 12.3 9.44 12.3 10.8C12.31 12.12 11.39 13.24 9.67 13.54Z" fill="#FFAA00"/>
+<path d="M9.23009 29.5501C9.24009 31.6701 9.23009 33.7701 9.23009 35.8901V39.0001H2.34009C2.34009 39.0001 2.37009 31.7801 2.38009 29.6701C2.38009 28.5501 2.75009 28.2101 3.91009 28.2001H7.79009C8.82009 28.2001 9.22009 28.5701 9.23009 29.5501Z" fill="#2680EB"/>
+<path d="M18.3601 26.9901C18.3701 29.9701 18.3601 32.9401 18.3601 35.9301V39.0001H11.5101C11.5101 39.0001 11.5001 30.0601 11.5101 27.1201C11.5101 25.9501 11.8701 25.6101 13.0801 25.6101C14.3501 25.6001 15.6101 25.6001 16.8801 25.6101C17.9601 25.6101 18.3501 25.9701 18.3601 26.9901Z" fill="#2680EB"/>
+<path d="M27.4901 23.1301V39.0001H20.6401V23.2601C20.6401 21.9301 20.9401 21.6401 22.3201 21.6401H25.9001C27.1501 21.6501 27.4901 21.9601 27.4901 23.1301Z" fill="#2680EB"/>
+<path d="M36.6301 39.0001H29.7701V16.0901C29.7701 14.7101 30.0501 14.4401 31.4901 14.4401C32.6601 14.4301 33.8201 14.4301 34.9901 14.4401C36.2901 14.4401 36.6201 14.7501 36.6201 15.9701L36.6301 39.0001Z" fill="#2680EB"/>
+<path d="M38.95 8.00006C38.36 5.72006 37.74 3.44006 37.12 1.17006C36.88 0.310064 36.17 -0.149936 35.39 0.0500641C32.84 0.690064 30.51 1.32006 28.27 1.97006C27.83 2.10006 27.49 2.43006 27.35 2.87006C27.19 3.35006 27.28 3.88006 27.59 4.29006C28.02 4.84006 28.64 5.02006 29.44 4.80006L32.6 3.95006C32.58 3.99006 32.55 4.03006 32.52 4.07006C26.96 12.8301 14.59 21.7301 1.69998 21.7901C1.17998 21.7901 0.719982 21.9701 0.409982 22.2801C0.139982 22.5601 -0.0100183 22.9401 -1.83033e-05 23.3601C0.0099817 23.7801 0.169982 24.1601 0.459982 24.4301C0.759982 24.7101 1.16998 24.8501 1.63998 24.8501C1.67998 24.8501 1.71998 24.8501 1.75998 24.8501C2.08998 24.8301 2.42998 24.8201 2.75998 24.8001C3.93998 24.7501 5.14998 24.7001 6.32998 24.4801C18.43 22.2401 28.12 15.9101 35.13 5.65006L35.33 6.40006C35.53 7.16006 35.73 7.91006 35.94 8.66006C36.2 9.55006 37.04 10.0701 37.87 9.84006C38.7 9.62006 39.16 8.82006 38.95 8.00006Z" fill="#FF8C00"/>
+</svg>

package/components/button/icon.js

@@ -115,38 +115,33 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
 
   const _onClick = event => {
+    event.persist();
     onClick && event.stopPropagation();
     if (disabled || loading) return;
     onClick && onClick(event);
   };
 
   return useMemo(() => {
-    let node = children;
-
-    if (!node) {
-      node = jsx(Icon, {
-        name: name,
-        width: isViewTypeGhost ? width ? _width : iconSize : iconSize,
-        height: isViewTypeGhost ? height ? _height : iconSize : iconSize,
-        color: 'currentColor',
-        viewBox: viewBox
-      });
-    }
-
     return jsx("div", {
       css: _ButtonRootCSS,
-      style: style,
       ref: ref,
+      id: id,
+      style: style,
       onClick: _onClick,
-      className: ['DGN-UI-ButtonIcon', viewType, getClassNameFromColor(color), size, loading && 'button-icon--loading', disabled && 'button-icon--disabled', className].join(' ').trim().replace(/\s+/g, ' '),
-      id: id
+      className: ['DGN-UI-ButtonIcon', viewType, getClassNameFromColor(color), size, loading && 'button-icon--loading', disabled && 'button-icon--disabled', className].join(' ').trim().replace(/\s+/g, ' ')
     }, loading && renderIconLoading(iconSize), !loading && jsx("span", {
       className: 'DGN-UI-ButtonIcon-Icon'
-    }, " ", node, " "), !disabled && !loading && viewType !== 'ghost' && jsx(Ripple, {
+    }, children || jsx(Icon, {
+      name: name,
+      width: isViewTypeGhost ? width ? _width : iconSize : iconSize,
+      height: isViewTypeGhost ? height ? _height : iconSize : iconSize,
+      color: 'currentColor',
+      viewBox: viewBox
+    })), !disabled && !loading && viewType !== 'ghost' && jsx(Ripple, {
       color: getRippleColor(color, viewType, allColors),
       circular: circular
     }));
-  }, [style, className, size, viewType, color, colorHover, disabled, name, children, onClick, loading, circular, viewBox, width, height]);
+  }, [id, style, className, size, viewType, color, colorHover, disabled, name, children, onClick, loading, circular, viewBox, width, height]);
 }));
 
 const ButtonRootCSS = (circular, size, width, _width, height, _height, buttonSize, iconSize, colorHover, color, _color, name) => css`
@@ -201,7 +196,7 @@ const ButtonRootCSS = (circular, size, width, _width, height, _height, buttonSiz
     &.outlined {
         ${backgroundTransparent};
         &.default {
-            ${border(1, rest)}
+            ${border(1, rest)};
             color: ${rest};
             &.button-icon--loading,
             &:hover,
@@ -348,17 +343,35 @@ ButtonIcon.defaultProps = {
   viewBox: true
 };
 ButtonIcon.propTypes = {
-  /** used to fill background for button */
-  viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
+  /** The content of the component. */
+  children: PropTypes.node,
 
-  /** color for button */
+  /** If `true`, component is circular. */
+  circular: PropTypes.bool,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** The color of the component. */
   color: PropTypes.string,
 
-  /** custom hover color for button with color 'default' */
+  /** Custom hover color for button with color 'default'. */
   colorHover: PropTypes.string,
 
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+
+  /** Height oof the component. */
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** If `true`, the loading indicator is shown. */
+  loading: PropTypes.bool,
+
+  /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
+  name: PropTypes.string,
+
   /**
-   * size of button
+   * 	The size of the component.
    *
    * * tiny (button 24px, icon 16px)
    * * small (button 32px, icon 20px)
@@ -368,38 +381,20 @@ ButtonIcon.propTypes = {
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
 
-  /** name of icon in icons store */
-  name: PropTypes.string,
-
-  /** the class for button */
-  className: PropTypes.string,
-
-  /** the width of button */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** the height of button */
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** has view box if true */
+  /** If `true`, icon has view box. */
   viewBox: PropTypes.bool,
 
-  /** circle button if true */
-  circular: PropTypes.bool,
-
-  /** prevent all event if true */
-  disabled: PropTypes.bool,
-
-  /** style inline of button */
-  style: PropTypes.object,
-
-  /** element to display in button */
-  children: PropTypes.node,
+  /** The variant to use. */
+  viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
 
-  /** status loading of button */
-  loading: PropTypes.bool,
+  /** Width of the component. */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
-   * ref methods
+   * ref methods (ref.current.instance.*method*)
    *
    * * option(): Gets all UI component properties
    *  * Returns value - object

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

@@ -59,6 +59,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!inputBaseRef) inputBaseRef = useRef(null);
   const ref = useRef(null);
   const valueArray = useRef([]);
+  const isEnabled = !readOnly && !disabled;
   /* Start styled */
 
   const inputBaseRoot = css`
@@ -490,12 +491,12 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (autoFocus) {
       inputBaseRef.current.focus();
     }
-  }, [multiline]);
-  useEffect(() => {
-    if (placeholder !== undefined) {
-      inputBaseRef.current.placeholder = placeholder;
-    }
-  }, [placeholder]);
+  }, [multiline]); // useEffect(() => {
+  //     if (placeholder !== undefined) {
+  //         inputBaseRef.current.placeholder = placeholder;
+  //     }
+  // }, [placeholder]);
+
   useEffect(() => {
     const defaultHeight = 24;
 
@@ -541,7 +542,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...props
   }, jsx("textarea", {
     type: "text",
-    placeholder: placeholder,
+    placeholder: isEnabled ? placeholder : '',
     defaultValue: defaultValue,
     ...inputProps,
     css: textAreaCSS,
@@ -578,7 +579,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   })), jsx("input", {
     type: type,
     autoComplete: autoComplete,
-    placeholder: placeholder,
+    placeholder: isEnabled ? placeholder : '',
     defaultValue: defaultValue,
     ...inputProps,
     readOnly: readOnly,

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

@@ -1,3 +1,5 @@
+/* eslint-disable no-redeclare */
+
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -16,7 +18,9 @@ const num2WordsVi = function () {
     let o = '',
         a = Math.floor(r / 10),
         e = r % 10;
-    return a > 1 ? (o = ' ' + t[a] + ' mươi', 1 === e && (o += ' mốt')) : 1 === a ? (o = ' mười', 1 === e && (o += ' một')) : n && e > 0 && (o = ' lẻ'), 5 === e && a >= 1 ? o += ' lăm' : 4 === e && a >= 1 ? o += ' tư' : (e > 1 || 1 === e && 0 === a) && (o += ' ' + t[e]), o;
+    return a > 1 ? (o = ' ' + t[a] + ' mươi', 1 === e && (o += ' mốt')) : 1 === a ? (o = ' mười', 1 === e && (o += ' một')) : n && e > 0 && (o = ' lẻ'), 5 === e && a >= 1 ? o += ' lăm' : // : 4 === e && a >= 1
+    // ? (o += ' tư')
+    (e > 1 || 1 === e && 0 === a) && (o += ' ' + t[e]), o;
   },
       n = function (n, o) {
     var a = '',
@@ -48,9 +52,6 @@ const num2WordsVi = function () {
   };
 }();
 
-var a = ['', 'one ', 'two ', 'three ', 'four ', 'five ', 'six ', 'seven ', 'eight ', 'nine ', 'ten ', 'eleven ', 'twelve ', 'thirteen ', 'fourteen ', 'fifteen ', 'sixteen ', 'seventeen ', 'eighteen ', 'nineteen '];
-var b = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
-
 const num2WordsEn = n => {
   const arr = x => Array.from(x);
 
@@ -104,19 +105,14 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   placeholder,
   startIcon,
   endIcon,
-  autoComplete,
   autoFocus,
   disabled,
   readOnly,
   multiline,
-  onConfirm,
   refs,
   inputRef,
   inputProps,
-  iconStyle,
   inputStyle,
-  labelProps,
-  errorProps,
   error,
   onChange,
   onBlur,
@@ -456,7 +452,6 @@ MoneyInput.defaultProps = {
   viewType: 'underlined',
   valueTypeReturn: 'number',
   label: '',
-  placeholder: '',
   className: '',
   error: '',
   startIcon: '',
@@ -501,9 +496,6 @@ MoneyInput.propTypes = {
   /** error for input */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /** type auto complete of input (like new-password) */
-  autoComplete: PropTypes.string,
-
   /** icon at start */
   startIcon: PropTypes.any,
 
@@ -543,12 +535,6 @@ MoneyInput.propTypes = {
   /** style inline of input in MoneyInput component */
   inputStyle: PropTypes.object,
 
-  /** any props of label in MoneyInput component */
-  labelProps: PropTypes.object,
-
-  /** any props of error in MoneyInput component */
-  errorProps: PropTypes.object,
-
   /** The function to get ref of MoneyInput component */
   refs: PropTypes.func,
 

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

@@ -7,7 +7,6 @@ import { jsx, css } from '@emotion/core';
 import locale from '../../../locale';
 import { InputBase, Label, HelperText } from '../..';
 import { onValidate } from '../../../utils';
-import { getGlobal } from '../../../global';
 /* Start styled */
 
 const NumberInputRoot = css`
@@ -309,7 +308,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
 NumberInput.defaultProps = {
   viewType: 'underlined',
   label: '',
-  placeholder: getGlobal('inputPlaceholder'),
+  // placeholder: getGlobal('inputPlaceholder'),
   error: '',
   startIcon: '',
   endIcon: '',

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

@@ -36,7 +36,6 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   defaultValue,
   value: valueProp,
   placeholder,
-  resize,
   startIcon,
   endIcon,
   startIconProps,
@@ -58,7 +57,6 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   inputProps,
   inputStyle,
   labelProps,
-  errorProps,
   error,
   onChange,
   onBlur,
@@ -109,7 +107,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* Start handler */
 
   const onMouseDownHandler = () => {
-    ref.current.querySelector(`.css-${TextInputBox.name}`).style.backgroundColor = 'transparent';
+    // ref.current.querySelector(`.css-${TextInputBox.name}`).style.backgroundColor = 'transparent';
     inputRef.current.style.backgroundColor = 'transparent';
   };
 
@@ -376,10 +374,8 @@ TextInput.defaultProps = {
   label: '',
   className: '',
   defaultValue: '',
-  placeholder: '',
   status: 'default',
   error: '',
-  resize: 'none',
   autoComplete: 'off',
   required: false,
   loading: false,
@@ -427,9 +423,6 @@ TextInput.propTypes = {
   /** type auto complete of input (like new-password) */
   autoComplete: PropTypes.string,
 
-  /** allow resize multiline input (resize css style) */
-  resize: PropTypes.string,
-
   /** prevent all event if true, hide all icon */
   disabled: PropTypes.bool,
 
@@ -475,9 +468,6 @@ TextInput.propTypes = {
   /** any props of label in TextInput component */
   labelProps: PropTypes.object,
 
-  /** any props of error in TextInput component */
-  errorProps: PropTypes.object,
-
   /** The function to get ref of Dropdown component */
   refs: PropTypes.func,
 

package/components/paging/page-info.js

@@ -138,7 +138,6 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     currentPageRef.current = 0;
     setItemsPerPageState(per);
-    setCurrentPageState(0);
     setDisablePrevState(true);
     setDisableNextState(disableNext);
     if (onChangePerPage) onChangePerPage(per);
@@ -175,7 +174,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     timer.current = setTimeout(() => {
-      _onChangePage(currentPageState !== null && currentPageState !== void 0 ? currentPageState : 0, true);
+      _onChangePage(0, true);
     }, delayOnInput);
   }, [totalItemsState, itemsPerPageState]);
   useEffect(() => {

package/icons/basic.js

@@ -1138,6 +1138,34 @@ export const Calendar = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const CalendarAdd = /*#__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: "M19 3H20C21.1 3 22 3.9 22 5V21C22 22.1 21.1 23 20 23H4C2.9 23 2 22.1 2 21V5C2 3.9 2.9 3 4 3H5V1H7V3H17V1H19V3ZM4 21H20V8H4V21ZM13 10.5H11V13.5H8V15.5H11V18.5H13V15.5H16V13.5H13V10.5Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 22,
+    viewBox: "0 0 20 22",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17 2H18C19.1 2 20 2.9 20 4V20C20 21.1 19.1 22 18 22H2C0.9 22 0 21.1 0 20V4C0 2.9 0.9 2 2 2H3V0H5V2H15V0H17V2ZM2 20H18V7H2V20ZM11 9.5H9V12.5H6V14.5H9V17.5H11V14.5H14V12.5H11V9.5Z",
+    fill: colors[color] || color
+  }));
+});
 export const CalendarBlank = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

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

package/readme.md

@@ -38,6 +38,14 @@ npm test
 ```
 
 ## Changelog
+## 1.3.55
+- \[Added\]: MenuIcon – MHRM09N1040
+- \[Added\]: Icon – CalendarAdd
+- \[Changed\]: MoneyInput – Correct some cases of convert to words
+- \[Fixed\]: Input – Fix default placeholder; Hide placeholder when readOnly, or disabled
+- \[Fixed\]: ButtonIcon – Add event.persist()
+- \[Fixed\]: PagingInfo – Fix bug not go to first page when totalItems, itemsPerPage changed
+
 ## 1.3.54
 - \[Changed\]: Popover – Allow prop anchor as element
 - \[Changed\]: Row, Col – Update responsive padding