diginet-core-ui 1.4.26 → 1.4.28

package/components/button/index.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/core';
 import { CircularProgress, Icon, Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { detectColor, fade, hexToRGBA, hslToRgb, isColor, isColorName, rgbToHex, rgbaToHexA } from "../../styles/color-helper";
 import * as allColors from "../../styles/colors";
 import { alphaPseudo, bgColor, border, borderColor, borderNone, borderRadius4px, boxBorder, cursorNotAllowed, cursorPointer, displayFlex, displayInlineFlex, flexRow, itemsCenter, justifyCenter, outlineNone, overflowHidden, parseHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
@@ -12,9 +12,6 @@ import { useTheme } from "../../theme";
 import { classNames, getProp } from "../../utils";
 import Ripple from "./ripple-effect";
 import useThemeProps from "../../theme/utils/useThemeProps";
-const {
-  spacing
-} = useTheme();
 export const getRippleColor = (color, viewType, colors) => {
   if (!isColor(color) && !isColorName(color)) {
     let level = 3;
@@ -48,7 +45,9 @@ export const getRippleColor = (color, viewType, colors) => {
       return rgbaToHexA(hslToRgb(fade(color, 0.5)));
   }
 };
-const iconSizeMap = new Map([['tiny', spacing([4])], ['small', spacing([5])], ['medium', spacing([6])], ['large', spacing([8])], ['giant', spacing([10])]]);
+const iconSizeMap = ({
+  spacing
+}) => new Map([['tiny', spacing([4])], ['small', spacing([5])], ['medium', spacing([6])], ['large', spacing([8])], ['giant', spacing([10])]]);
 const paddingSizeMap = new Map([['tiny', [1, 2]], ['small', [1.5, 3]], ['medium', [2, 4]], ['large', [2, 5]], ['giant', [2, 6]]]);
 const outlinedPaddingSizeMap = new Map([['tiny', [0.75, 1.75]], ['small', [1.25, 2.75]], ['medium', [1.75, 3.75]], ['large', [1.75, 4.75]], ['giant', [1.75, 5.75]]]);
 const iconMarginSizeMap = new Map([['tiny', [1]], ['small', [1]], ['medium', [1]], ['large', [1.5]], ['giant', [2]]]);
@@ -57,6 +56,7 @@ const minHeightSizeMap = new Map([['tiny', '24px'], ['small', '32px'], ['medium'
 const minHeightSizeLinkMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
 const alphaLoading = 0.2;
 const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+  var _iconSizeMap;
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {
@@ -93,20 +93,25 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =
   const label = labelProp || text || '';
   const ref = useRef(null);
   const rippleRef = useRef(null);
-  const [urlState, setUrlState] = useState(href);
+  const url = useMemo(() => {
+    if (href) {
+      const qs = urlParams ? '?' + new URLSearchParams(urlParams).toString() : '';
+      return href + qs;
+    }
+  }, [href, urlParams]);
   const isColorDefault = colorProp === 'default';
   const isViewTypeLink = viewType === 'link';
-  const iconSize = iconSizeMap.get(size);
+  const iconSize = (_iconSizeMap = iconSizeMap(theme)) === null || _iconSizeMap === void 0 ? void 0 : _iconSizeMap.get(size);
   const paddingSize = isViewTypeLink ? 0 : viewType === 'outlined' ? outlinedPaddingSizeMap.get(size) : paddingSizeMap.get(size);
   const typographySize = typographySizeMap.get(size);
   const iconMarginSize = iconMarginSizeMap.get(size);
   const minHeightSize = isViewTypeLink ? minHeightSizeLinkMap.get(size) : minHeightSizeMap.get(size);
   const color = getProp(colors, colorProp, colorProp);
   const TagName = href ? 'a' : 'button';
-  const _ButtonRootCSS = ButtonRootCSS(color, isColorDefault, viewType, loading, theme);
+  const _ButtonRootCSS = ButtonRootCSS(color, isColorDefault, viewType, loading, disabled, theme);
   const _ButtonIconCSS = ButtonIconCSS(endIcon, label, startIcon, iconMarginSize, iconSize, theme);
   const _NonStartIconCSS = NonStartIconCSS(iconSize, theme);
-  const _ButtonLabelCSS = ButtonLabelCSS(loading, iconMarginSize);
+  const _ButtonLabelCSS = ButtonLabelCSS(loading, iconMarginSize, theme);
   const _ButtonSizeCSS = ButtonSizeCSS(paddingSize, minHeightSize, theme);
   const _onClick = e => {
     if (href) e.preventDefault(); //Prevent open link when click
@@ -115,13 +120,6 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =
     if (!isViewTypeLink) rippleRef.current.start(e);
     onClick && onClick(e);
   };
-  useEffect(() => {
-    if (href) {
-      const qs = urlParams ? '?' + new URLSearchParams(urlParams).toString() : '';
-      const url = href + qs;
-      setUrlState(url);
-    }
-  }, [href, urlParams]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -206,7 +204,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =
       id: id,
       type: type,
       className: classNames('DGN-UI-Button', disabled && 'disabled', viewType, size, className),
-      href: urlState || null,
+      href: url || null,
       ...other
     }, start, jsx(Typography, {
       css: _ButtonLabelCSS,
@@ -218,7 +216,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =
       ref: rippleRef,
       color: getRippleColor(colorProp, viewType, allColors)
     }) : null);
-  }, [children, className, colorProp, disabled, endIcon, href, id, labelProp, labelProps, loading, onClick, size, startIcon, stopPropagation, type, urlParams, viewType, urlState, theme]);
+  }, [children, className, colorProp, disabled, endIcon, href, id, labelProp, labelProps, loading, onClick, size, startIcon, stopPropagation, type, urlParams, viewType, theme]);
 }));
 const NonStartIconCSS = (iconSize, {
   spacing
@@ -247,7 +245,9 @@ const ButtonIconCSS = (endIcon, label, startIcon, iconMarginSize, iconSize, {
         ${parseWidthHeight(iconSize)};
     }
 `;
-const ButtonLabelCSS = (loading, iconMarginSize) => css`
+const ButtonLabelCSS = (loading, iconMarginSize, {
+  spacing
+}) => css`
     ${whiteSpaceNoWrap};
     ${textColor('inherit')};
     margin-left: ${spacing(loading ? iconMarginSize : 0)};
@@ -258,7 +258,7 @@ const ButtonSizeCSS = (paddingSize, minHeightSize, {
     padding: ${spacing(paddingSize)};
     ${parseMinWidthHeight('max-content', minHeightSize)};
 `;
-const ButtonRootCSS = (color, isColorDefault, viewType, loading, {
+const ButtonRootCSS = (color, isColorDefault, viewType, loading, disabled, {
   colors
 }) => css`
     ${displayInlineFlex};
@@ -273,7 +273,9 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading, {
     ${userSelectNone};
     ${parseHeight('max-content')};
     text-decoration: none;
-    transition: all 0.5s;
+    ${disabled && css`
+        transition: all 0.5s;
+    `};
     ${loading && pointerEventsNone};
     ${viewType === 'outlined' && css`
         ${textColor(color)};
@@ -286,29 +288,29 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading, {
                     }
                 `)}
         ${isColorDefault && css`
-            ${border(1, getProp(colors, 'system.rest'))};
-            ${textColor(getProp(colors, 'system.rest'))};
+            ${border(1, getProp(colors, 'system/rest'))};
+            ${textColor(getProp(colors, 'system/rest'))};
             ${loading && css`
-                ${textColor(getProp(colors, 'system.active'))};
-                ${borderColor(getProp(colors, 'system.active'))};
-                ${bgColor(hexToRGBA(getProp(colors, 'system.active'), alphaLoading))};
+                ${textColor(getProp(colors, 'system/active'))};
+                ${borderColor(getProp(colors, 'system/active'))};
+                ${bgColor(hexToRGBA(getProp(colors, 'system/active'), alphaLoading))};
             `}
             ${Object.keys(alphaPseudo).map(key => css`
                         &: ${key} {
-                            ${textColor(getProp(colors, 'system.active'))};
-                            ${borderColor(getProp(colors, 'system.active'))};
-                            ${bgColor(hexToRGBA(getProp(colors, 'system.active'), alphaPseudo[key]))};
+                            ${textColor(getProp(colors, 'system/active'))};
+                            ${borderColor(getProp(colors, 'system/active'))};
+                            ${bgColor(hexToRGBA(getProp(colors, 'system/active'), alphaPseudo[key]))};
                         }
                     `)} // &:hover | &:focus | &:active
         `}
         &.disabled {
-            ${borderColor(getProp(colors, 'system.disabled'))};
+            ${borderColor(getProp(colors, 'system/disabled'))};
             ${bgColor('transparent')};
         }
     `}
     ${viewType === 'filled' && css`
         ${borderNone};
-        ${textColor(getProp(colors, 'system.standard'))};
+        ${textColor(getProp(colors, 'system/standard'))};
         ${bgColor(color)};
         font-weight: bold;
         ${loading && css`
@@ -322,16 +324,16 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading, {
             filter: brightness(0.7);
         }
         ${isColorDefault && css`
-            ${bgColor(getProp(colors, 'system.rest'))};
-            ${loading && bgColor(getProp(colors, 'system.active'))};
+            ${bgColor(getProp(colors, 'system/rest'))};
+            ${loading && bgColor(getProp(colors, 'system/active'))};
             &:hover,
             &:focus,
             &:active {
-                ${bgColor(getProp(colors, 'system.active'))};
+                ${bgColor(getProp(colors, 'system/active'))};
             }
         `}
         &.disabled {
-            ${bgColor(getProp(colors, 'fill.disabled'))};
+            ${bgColor(getProp(colors, 'fill/disabled'))};
         }
     `}
     ${viewType === 'text' && css`
@@ -345,15 +347,15 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading, {
                     }
                 `)}
         ${isColorDefault && css`
-            ${textColor(getProp(colors, 'system.rest'))};
+            ${textColor(getProp(colors, 'system/rest'))};
             ${loading && css`
-                ${textColor(getProp(colors, 'system.active'))};
-                ${bgColor(hexToRGBA(getProp(colors, 'system.active'), alphaLoading))};
+                ${textColor(getProp(colors, 'system/active'))};
+                ${bgColor(hexToRGBA(getProp(colors, 'system/active'), alphaLoading))};
             `}
             ${Object.keys(alphaPseudo).map(key => css`
                         &: ${key} {
-                            ${textColor(getProp(colors, 'system.active'))};
-                            ${bgColor(hexToRGBA(getProp(colors, 'system.active'), alphaPseudo[key]))};
+                            ${textColor(getProp(colors, 'system/active'))};
+                            ${bgColor(hexToRGBA(getProp(colors, 'system/active'), alphaPseudo[key]))};
                         }
                     `)}
         `}
@@ -363,7 +365,7 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading, {
     `}
     ${viewType === 'link' && css`
         ${borderNone};
-        ${textColor(isColorDefault ? getProp(colors, 'semantic.info') : color)};
+        ${textColor(isColorDefault ? getProp(colors, 'semantic/info') : color)};
         ${bgColor('transparent')};
         ${loading && css`
             filter: brightness(0.85);
@@ -378,7 +380,7 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading, {
     `}
     &.disabled {
         ${cursorNotAllowed};
-        ${textColor(getProp(colors, 'system.disabled'))};
+        ${textColor(getProp(colors, 'system/disabled'))};
         filter: brightness(1);
     }
 `;

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

@@ -15,6 +15,7 @@ const allNewAttached = new FormData();
 const attached = []; // attached = [...dataState, ...newDataState]
 const chosenItems = [];
 const getType = data => {
+  if (!data) return null;
   if (data !== null && data !== void 0 && data.type) {
     var _type$match;
     const pattern = /word|sheet|presentation|pdf|image|compressed/i;
@@ -457,7 +458,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       recentRemovedAttached,
       removedAttached: removedAttachedRef.current,
       oldAttached,
-      allNewAttached: newDataState
+      allNewAttached: tempNewDataState
     });
     !!onRemoveProp && onRemoveProp(recentRemovedAttached);
     onClosePopup();
@@ -1467,17 +1468,17 @@ Attachment.propTypes = {
   allowSort: PropTypes.bool,
   /** Class for component. */
   className: PropTypes.string,
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
-   * }, ...]
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
    */
   data: PropTypes.array,
   /** The message to display when deleting files. */
@@ -1508,16 +1509,16 @@ Attachment.propTypes = {
   onChange: PropTypes.func,
   /** Download attached event, if not it will use default. */
   onDownload: PropTypes.func,
-  /**
-   * event when removed file(s)
-   *
-   * return data: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
-   * }
+  /**
+   * event when removed file(s)
+   *
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
    */
   onRemove: PropTypes.func,
   /** View attached event, if not it will use default. */

package/package.json

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

package/readme.md

@@ -42,8 +42,17 @@ npm test
 
 ## Changelog
 
+## 1.4.28
+
+-   \[Fixed\]: Attachment – Fix allNewAttached in onChange after delete
+
+## 1.4.27
+
+-   \[Changed\]: Button – Remove transition when disabled
+
 ## 1.4.26
 
+-   \[Added\]: IconMenu – Add MHRP13N0005, MHRP13N0006
 -   \[Changed\]: Icon – Add theme components default props
 -   \[Fixed\]: Chip – Fix not lineClamp
 -   \[Fixed\]: Popover – Fix shifting popover