diginet-core-ui 1.3.78 → 1.3.79

package/components/badge/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -25,7 +24,6 @@ const iconSizeMap = new Map([['medium', 24], ['large', 32], ['giant', 40]]);
 const dotSizeMap = new Map([['medium', 8], ['large', 10], ['giant', 12]]);
 const dotIndentMap = new Map([['medium', 4], ['large', 2]]);
 const typographySizeMap = new Map([['medium', paragraph3], ['large', paragraph2], ['giant', paragraph1]]);
-
 const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) => {
   const halfDotSize = dotSize / 2;
   const {
@@ -43,7 +41,6 @@ const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) =>
               ` : css`
                   top: ${-halfDotSize}px;
               `;
-
   if (contentDirection === 'right') {
     if (horizontal === 'left') {
       return css`
@@ -70,7 +67,6 @@ const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) =>
     }
   }
 };
-
 const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   anchorOrigin,
@@ -94,25 +90,20 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const dotSize = content || content === 0 && showZero ? dotSizeMap.get(size) + 8 : dotSizeMap.get(size);
   const dotColor = colors[color] || colorMap.get(color) || color;
   const dotPos = calDotPos(anchorOrigin, !children && name ? 'right' : contentDirection, dotSize, content || content === 0, size);
-
   const _BadgeNumberCSS = BadgeNumberCSS(typographySize, children, name, dotSize, dotColor, invisible);
-
   const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS);
-
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
   return useMemo(() => {
     let node = children;
-
     if (!node && name) {
       node = jsx(Icon, {
         name: name,
@@ -122,7 +113,6 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         ...iconProps
       });
     }
-
     return jsx("div", {
       css: _BadgeRootCSS,
       ref: ref,
@@ -137,7 +127,6 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, max && content > max ? max + '+' : content === 0 && !showZero ? null : content));
   }, [anchorOrigin, contentDirection, content, name, size, children, max, showZero, invisible, color, style, className, iconProps]);
 }));
-
 const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor, invisible) => css`
     ${typographySize};
     ${flexRow};
@@ -156,7 +145,6 @@ const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor, invis
     transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     ${invisible && 'transform: scale(0) translate(50%, -50%);'};
 `;
-
 const BadgeRootCSS = (children, name, dotPos, _BadgeNumberCSS) => css`
     ${inlineFlex};
     ${alignCenter};
@@ -173,7 +161,6 @@ const BadgeRootCSS = (children, name, dotPos, _BadgeNumberCSS) => css`
         ${(children || name) && dotPos}
     }
 `;
-
 Badge.defaultProps = {
   color: 'default',
   size: 'medium',
@@ -194,51 +181,37 @@ Badge.propTypes = {
     horizontal: PropTypes.oneOf(['left', 'right']),
     vertical: PropTypes.oneOf(['top', 'bottom'])
   }),
-
   /** the quantity is shown on the badge */
   content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** the largest number is displayed on the badge */
   max: PropTypes.number,
-
   /** used to fill background for button */
   contentDirection: PropTypes.oneOf(['left', 'right']),
-
   /** background color of badge */
   color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
-
   /** use name will replace children with ButtonIcon */
   name: PropTypes.string,
-
   /** other icon props when use prop name */
   iconProps: PropTypes.object,
-
-  /** size of Badge
-   *
-   * * medium (dot 8px, typography p3)
-   * * large (button 10px, typography p2)
-   * * giant (button 12px, typography p1)
+  /** size of Badge
+   *
+   * * medium (dot 8px, typography p3)
+   * * large (button 10px, typography p2)
+   * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
-
   /** Controls whether the badge is hidden when content is zero */
   showZero: PropTypes.bool,
-
   /** If true, the badge is invisible */
   invisible: PropTypes.bool,
-
   /** className of component */
   className: PropTypes.string,
-
   /** style inline of component */
   style: PropTypes.object,
-
   /** the function get ref */
   refs: PropTypes.func,
-
   /** the content displayed under the number of the badge */
   children: PropTypes.node,
-
   /** any props else */
   props: PropTypes.any
 };

package/components/button/icon.js

@@ -1,36 +1,37 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import * as allColors from '../../styles/colors';
-import { color as colors } from '../../styles/colors';
 import { hexToRGBA } from '../../styles/color-helper';
-import { capitalize } from '../../utils';
+import { capitalize, classNames, refType as ref } from '../../utils';
 import Icon from '../../icons';
 import Ripple from './ripple-effect';
 import { getClassNameFromColor, getRippleColor } from '.';
 import CircularProgress from '../progress/circular';
-import { alignCenter, backgroundTransparent, border, borderBox, borderNone, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, outlineNone, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, borderRadius50, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, outlineNone, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
+import { useColor as colors, useTheme } from '../../theme';
 const {
-  system: {
-    active,
-    disabled: systemDisabled,
-    rest,
-    white
-  },
-  semantic: {
-    success,
-    warning,
-    danger,
-    info
-  },
-  fill: {
-    disabled: fillDisabled
+  colors: {
+    system: {
+      active,
+      disabled: systemDisabled,
+      rest: systemRest,
+      white: systemWhite
+    },
+    semantic: {
+      success: semanticSuccess,
+      warning: semanticWarning,
+      danger: semanticDanger,
+      info: semanticInfo
+    },
+    fill: {
+      disabled: fillDisabled
+    }
   }
-} = colors;
+} = useTheme();
 const sizeMap = new Map([['tiny', {
   buttonSize: '24px',
   iconSize: '16px'
@@ -47,20 +48,19 @@ const sizeMap = new Map([['tiny', {
   buttonSize: '56px',
   iconSize: '40px'
 }]]);
-const iconColorMap = new Map([['Close', danger], ['Cancel', danger], ['Approval', success], ['Delete', warning], ['Trash', warning], ['Edit', info], ['EditV2', info], ['View', info]]);
+const iconColorMap = new Map([['Close', semanticDanger], ['Cancel', semanticDanger], ['Approval', semanticSuccess], ['Delete', semanticWarning], ['Trash', semanticWarning], ['Edit', semanticInfo], ['EditV2', semanticInfo], ['View', semanticInfo]]);
 const alphaArr = {
   hover: 0.1,
   focus: 0.2,
   active: 0.3
 };
-const alphaLoading = 0.2; // customIconSize calculated based on design size
+const alphaLoading = 0.2;
+// customIconSize calculated based on design size
 // Button size <= 24 => icon size = Button size - 8
 // Button size > 24 && <= 32 => icon size = Button size - 12
 // Button size > 32 => icon size = Button size - 16
-
 const customIconSize = width => width <= 24 ? width - 8 : width <= 32 ? width - 12 : width - 16;
-
-const renderIconLoading = iconSize => {
+const IconLoadingView = iconSize => {
   return jsx(CircularProgress, {
     size: 'extraSmall',
     background: 'transparent',
@@ -69,85 +69,110 @@ const renderIconLoading = iconSize => {
     width: parseInt(iconSize)
   });
 };
-
 const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
-  viewType,
-  color,
-  size,
-  name,
-  width,
-  height,
-  className,
+  children,
   circular,
-  viewBox,
+  className,
+  color: colorProp,
+  colorHover,
   disabled,
-  style,
-  onClick,
-  children,
+  height,
+  id,
   loading,
-  colorHover,
-  id
+  name,
+  onClick,
+  size,
+  style,
+  viewBox,
+  viewType,
+  width
 }, reference) => {
   var _sizeMap$get, _sizeMap$get2;
-
   const ref = useRef(null);
+  const rippleRef = useRef(null);
   const buttonSize = ((_sizeMap$get = sizeMap.get(size)) === null || _sizeMap$get === void 0 ? void 0 : _sizeMap$get.buttonSize) || '40px';
   const iconSize = width ? isNaN(width) ? '60%' : customIconSize(parseInt(width)) + 'px' : ((_sizeMap$get2 = sizeMap.get(size)) === null || _sizeMap$get2 === void 0 ? void 0 : _sizeMap$get2.iconSize) || '24px';
   const isViewTypeGhost = viewType === 'ghost';
-
-  const _width = isNaN(width) ? width : width + 'px';
-
-  const _height = isNaN(height) ? height : height + 'px';
-
-  const _color = colors[color];
+  const color = colors[colorProp] || colorProp;
   colorHover = colors[colorHover] || colorHover;
-
-  const _ButtonRootCSS = ButtonRootCSS(circular, size, width, _width, height, _height, buttonSize, iconSize, colorHover, color, _color, name);
-
+  const _ButtonRootCSS = ButtonRootCSS(circular, colorHover, color, name);
+  const _ButtonSizeCSS = ButtonSizeCSS(width, height, buttonSize, iconSize);
+  const _ButtonIconCSS = ButtonIconCSS(iconSize);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
-
   const _onClick = event => {
     event.persist();
     onClick && event.stopPropagation();
     if (disabled || loading) return;
+    if (!isViewTypeGhost) rippleRef.current.start(event);
     onClick && onClick(event);
   };
-
   return useMemo(() => {
-    return jsx("div", {
-      css: _ButtonRootCSS,
+    return jsx("button", {
+      css: [_ButtonRootCSS, _ButtonSizeCSS, disabled && ButtonDisabledCSS],
       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, ' ')
-    }, loading && renderIconLoading(iconSize), !loading && jsx("span", {
-      className: 'DGN-UI-ButtonIcon-Icon'
+      className: classNames('DGN-UI-ButtonIcon', viewType, getClassNameFromColor(colorProp), size, loading && 'button-icon--loading', className)
+    }, loading && IconLoadingView(iconSize), !loading && jsx("span", {
+      className: 'DGN-UI-ButtonIcon-Icon',
+      css: _ButtonIconCSS
     }, children || jsx(Icon, {
       name: name,
-      width: isViewTypeGhost ? width ? _width : iconSize : iconSize,
-      height: isViewTypeGhost ? height ? _height : iconSize : iconSize,
+      width: isViewTypeGhost ? width || iconSize : iconSize,
+      height: isViewTypeGhost ? height || iconSize : iconSize,
       color: 'currentColor',
       viewBox: viewBox
-    })), !disabled && !loading && viewType !== 'ghost' && jsx(Ripple, {
-      color: getRippleColor(color, viewType, allColors),
+    })), !disabled && !loading && !isViewTypeGhost && jsx(Ripple, {
+      ref: rippleRef,
+      color: getRippleColor(colorProp, viewType, allColors),
       circular: circular
     }));
-  }, [id, style, className, size, viewType, color, colorHover, disabled, name, children, onClick, loading, circular, viewBox, width, height]);
+  }, [children, circular, className, colorProp, colorHover, disabled, height, id, loading, name, onClick, size, style, viewBox, viewType, width]);
 }));
-
-const ButtonRootCSS = (circular, size, width, _width, height, _height, buttonSize, iconSize, colorHover, color, _color, name) => css`
+const ButtonIconCSS = iconSize => css`
+    ${flexRow};
+    ${positionRelative};
+    ${borderBox};
+    ${justifyCenter};
+    ${alignCenter};
+    ${parseWidthHeight(iconSize)};
+    ${parseMinWidthHeight(iconSize)};
+`;
+const ButtonDisabledCSS = `
+    cursor: not-allowed !important;
+    color: ${systemDisabled} !important;
+    &.outlined {
+        border-color: ${systemDisabled} !important;
+        background-color: transparent !important;
+    }
+    &.filled {
+        background-color: ${fillDisabled} !important;
+        filter: brightness(1) !important;
+    }
+    &.text {
+        background-color: transparent !important;
+    }
+`;
+const ButtonSizeCSS = (width, height, buttonSize, iconSize) => css`
+    ${parseWidthHeight(width || buttonSize, height || buttonSize)};
+    ${parseMinWidthHeight(width || buttonSize, height || buttonSize)};
+    &.ghost {
+        ${parseWidthHeight(width || iconSize, height || iconSize)};
+        ${parseMinWidthHeight(width || iconSize, height || iconSize)};
+    }
+`;
+const ButtonRootCSS = (circular, colorHover, color, name) => css`
     ${inlineFlex};
     ${positionRelative};
     ${justifyCenter};
@@ -156,51 +181,25 @@ const ButtonRootCSS = (circular, size, width, _width, height, _height, buttonSiz
     ${borderBox};
     ${cursorPointer};
     ${userSelectNone};
+    ${circular ? borderRadius50 : borderRadius4px};
     padding: 0;
-    border-radius: ${circular ? '50%' : '4px'};
     transition: background-color 0.5s, filter 0.5s;
-    .DGN-UI-ButtonIcon-Icon {
-        ${flexRow};
-        ${positionRelative};
-        ${borderBox};
-        ${justifyCenter};
-        ${alignCenter};
-    }
-    &.button-icon--disabled {
-        cursor: not-allowed !important;
-        color: ${systemDisabled} !important;
-        &.outlined {
-            border-color: ${systemDisabled} !important;
-            background-color: transparent !important;
-        }
-        &.filled {
-            background-color: ${fillDisabled} !important;
-            filter: brightness(1) !important;
-        }
-        &.text {
-            background-color: transparent !important;
-        }
-    }
     &.button-icon--loading {
         ${pointerEventsNone};
     }
-    &.${size} {
-        width: ${width ? _width : buttonSize};
-        min-width: ${width ? _width : buttonSize};
-        height: ${height ? _height : buttonSize};
-        min-height: ${height ? _height : buttonSize};
-        .DGN-UI-ButtonIcon-Icon {
-            height: ${iconSize};
-            min-height: ${iconSize};
-            width: ${iconSize};
-            min-width: ${iconSize};
-        }
-    }
     &.outlined {
         ${backgroundTransparent};
+        ${border(1, color)}
+        color: ${color};
+        &.button-icon--loading {
+            background-color: ${hexToRGBA(color, alphaLoading)};
+        }
+        ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(color, alphaArr[key])};
+                }`)}
         &.default {
-            ${border(1, rest)};
-            color: ${rest};
+            ${border(1, systemRest)};
+            color: ${systemRest};
             &.button-icon--loading,
             &:hover,
             &:focus,
@@ -215,30 +214,11 @@ const ButtonRootCSS = (circular, size, width, _width, height, _height, buttonSiz
                         background-color: ${hexToRGBA(colorHover, alphaArr[key])};
                     }`)}// &:hover | &:focus | &:active
         }
-        &.${color} {
-            ${color !== 'default' && border(1, _color)}
-            color: ${_color};
-            &.button-icon--loading {
-                background-color: ${hexToRGBA(_color, alphaLoading)};
-            }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(_color, alphaArr[key])};
-                    }`)}
-        }
-        &.custom-color {
-            ${border(1, color)}
-            color: ${color};
-            &.button-icon--loading {
-                background-color: ${hexToRGBA(color, alphaLoading)};
-            }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(color, alphaArr[key])};
-                    }`)}
-        }
     }
     &.filled {
         ${borderNone};
-        color: ${color === white ? rest : white};
+        background-color: ${color};
+        color: ${color === systemWhite ? systemRest : systemWhite};
         font-weight: bold;
         &.button-icon--loading,
         &:hover,
@@ -249,7 +229,7 @@ const ButtonRootCSS = (circular, size, width, _width, height, _height, buttonSiz
             filter: brightness(0.7);
         }
         &.default {
-            background-color: ${rest};
+            background-color: ${systemRest};
             &.button-icon--loading,
             &:hover,
             &:focus,
@@ -257,18 +237,19 @@ const ButtonRootCSS = (circular, size, width, _width, height, _height, buttonSiz
                 background-color: ${colorHover};
             }
         }
-        &.${color} {
-            background-color: ${_color};
-        }
-        &.custom-color {
-            background-color: ${color};
-        }
     }
     &.text {
         ${noBorder};
         ${backgroundTransparent};
+        color: ${color};
+        &.button-icon--loading {
+            background-color: ${hexToRGBA(color, alphaLoading)};
+        }
+        ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(color, alphaArr[key])};
+                }`)}
         &.default {
-            color: ${rest};
+            color: ${systemRest};
             &:hover,
             &:focus,
             &:active {
@@ -282,35 +263,11 @@ const ButtonRootCSS = (circular, size, width, _width, height, _height, buttonSiz
                         background-color: ${hexToRGBA(colorHover, alphaArr[key])};
                     }`)}
         }
-        &.${color} {
-            color: ${_color};
-            &.button-icon--loading {
-                background-color: ${hexToRGBA(_color, alphaLoading)};
-            }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(_color, alphaArr[key])};
-                    }`)}
-        }
-        &.custom-color {
-            color: ${color};
-            &.button-icon--loading {
-                background-color: ${hexToRGBA(color, alphaLoading)};
-            }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(color, alphaArr[key])};
-                    }`)}
-        }
     }
     &.ghost {
         ${backgroundTransparent};
         ${noBorder};
-        color: ${rest};
-        &.${size} {
-            height: ${height ? _height : iconSize};
-            min-height: ${height ? _height : iconSize};
-            width: ${width ? _width : iconSize};
-            min-width: ${width ? _width : iconSize};
-        }
+        color: ${color};
         &.loading,
         &:hover,
         &:focus {
@@ -320,62 +277,46 @@ const ButtonRootCSS = (circular, size, width, _width, height, _height, buttonSiz
             filter: brightness(0.7);
         }
         &.default {
+            color: ${systemRest};
             &:hover,
             &:focus,
             &:active {
                 color: ${iconColorMap.get(capitalize(name)) || colorHover};
             }
         }
-        &.${color} {
-            color: ${_color};
-        }
-        &.custom-color {
-            color: ${color};
-        }
     }
 `;
-
 ButtonIcon.defaultProps = {
-  viewType: 'outlined',
+  circular: false,
+  className: '',
   color: 'default',
   colorHover: active,
-  size: 'medium',
-  className: '',
-  circular: false,
   disabled: false,
-  viewBox: true
+  size: 'medium',
+  viewBox: true,
+  viewType: 'outlined'
 };
 ButtonIcon.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-
   /** 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'. */
   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,
-
   /** Callback fired when the component is clicked. */
   onClick: PropTypes.func,
-
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-
   /**
    * 	The size of the component.
    *
@@ -386,19 +327,14 @@ ButtonIcon.propTypes = {
    * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** If `true`, icon has view box. */
   viewBox: PropTypes.bool,
-
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
-
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /**
    * ref methods (ref.current.instance.*method*)
    *
@@ -413,9 +349,7 @@ ButtonIcon.propTypes = {
    * * option(options): Updates the values of several properties
    *  * @param {options} - object
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  reference: ref
 };
 export { ButtonIcon };
 export default OptionWrapper(ButtonIcon);