diginet-core-ui 1.4.25-beta.4 → 1.4.26-beta.1

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,10 +93,15 @@ 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);
@@ -106,7 +111,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =
   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)};
@@ -288,29 +288,29 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading, disabled, {
                     }
                 `)}
         ${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`
@@ -324,16 +324,16 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading, disabled, {
             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`
@@ -347,15 +347,15 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading, disabled, {
                     }
                 `)}
         ${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]))};
                         }
                     `)}
         `}
@@ -365,7 +365,7 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading, disabled, {
     `}
     ${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);
@@ -380,7 +380,7 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading, disabled, {
     `}
     &.disabled {
         ${cursorNotAllowed};
-        ${textColor(getProp(colors, 'system.disabled'))};
+        ${textColor(getProp(colors, 'system/disabled'))};
         filter: brightness(1);
     }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.25-beta.4",
+  "version": "1.4.26-beta.1",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/readme.md

@@ -42,6 +42,14 @@ npm test
 
 ## Changelog
 
+## 1.4.26
+
+-   \[Changed\]: Icon – Add theme components default props
+-   \[Fixed\]: Chip – Fix not lineClamp
+-   \[Fixed\]: Popover – Fix shifting popover
+-   \[Fixed\]: Label – Fix label missing margin in DatePicker
+-   \[Fixed\]: Attachment – Add prop allowDelete
+
 ## 1.4.25
 
 -   \[Added\]: DatePicker – Add DateInput