diginet-core-ui 1.3.78 → 1.3.79

package/components/button/index.js

@@ -1,32 +1,28 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
-import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import OptionWrapper from '../others/option-wrapper';
-import * as allColors from '../../styles/colors';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { Typography } from '../';
-import { detectColor, fade, hslToRgb, isColor, isColorName, rgbaToHexA, rgbToHex, hexToRGBA } from '../../styles/color-helper';
-import Ripple from './ripple-effect';
-import CircularProgress from '../progress/circular';
 import Icon from '../../icons';
-import { flexRow, alignCenter, justifyCenter, positionRelative, borderRadius4px, borderBox, noPadding, noBorder, cursorPointer, overflowHidden, pointerEventsNone, outlineNone, userSelectNone, backgroundTransparent, inlineFlex, noMargin } from '../../styles/general';
-import { classNames } from '../../utils';
-import theme from '../../theme/settings';
+import { detectColor, fade, hexToRGBA, hslToRgb, isColor, isColorName, rgbaToHexA, rgbToHex } from '../../styles/color-helper';
+import * as allColors from '../../styles/colors';
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, noMargin, noPadding, outlineNone, overflowHidden, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
+import { useColor as colors, useTheme } from '../../theme';
+import { classNames, refType as ref } from '../../utils';
+import OptionWrapper from '../others/option-wrapper';
+import CircularProgress from '../progress/circular';
+import Ripple from './ripple-effect';
 const {
   colors: {
     system: {
-      active,
+      active: systemActive,
       disabled: systemDisabled,
-      rest,
-      white
+      rest: systemRest,
+      white: systemWhite
     },
     semantic: {
-      success,
-      warning,
-      danger,
-      info
+      info: semanticInfo
     },
     fill: {
       disabled: fillDisabled
@@ -36,47 +32,36 @@ const {
     uppercase
   },
   spacing
-} = theme;
+} = useTheme();
 export const getRippleColor = (color, viewType, colors) => {
   if (!isColor(color) && !isColorName(color)) {
     let level = 3;
     let name = color;
-
     if (name === 'primary') {
       name = 'formal';
     }
-
     const isSystemColor = colors[name + level];
-
     if (isSystemColor) {
       if (viewType === 'filled') {
         level = 7;
       }
-
       return colors[name + level];
     }
   }
-
   if (isColorName(color)) {
     return fade(isColorName(color), 0.5);
   }
-
   const colorType = detectColor(color);
-
   switch (colorType) {
     case 'hex':
     case 'hexa':
       return rgbaToHexA(fade(color, 0.5));
-
     case 'rgb':
       return rgbToHex(fade(color, 0.5));
-
     case 'rgba':
       return rgbaToHexA(fade(color, 0.5));
-
     case 'hsl':
       return rgbToHex(hslToRgb(fade(color, 0.5)));
-
     case 'hsla':
       return rgbaToHexA(hslToRgb(fade(color, 0.5)));
   }
@@ -84,11 +69,10 @@ export const getRippleColor = (color, viewType, colors) => {
 export const getClassNameFromColor = color => {
   return !isColor(color) && !isColorName(color) ? color : 'custom-color';
 };
-const colorMap = new Map([['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
 const iconSizeMap = new Map([['tiny', spacing([4])], ['small', spacing([5])], ['medium', spacing([6])], ['large', spacing([8])], ['giant', spacing([10])]]);
 const paddingSizeMap = new Map([['tiny', spacing([1, 2])], ['small', spacing([1.5, 3])], ['medium', spacing([2, 4])], ['large', spacing([2, 5])], ['giant', spacing([2, 6])]]);
 const outlinedPaddingSizeMap = new Map([['tiny', spacing([0.75, 1.75])], ['small', spacing([1.25, 2.75])], ['medium', spacing([1.75, 3.75])], ['large', spacing([1.75, 4.75])], ['giant', spacing([1.75, 5.75])]]);
-const iconMarginSizeMap = new Map([['tiny', '4px'], ['small', '4px'], ['medium', '4px'], ['large', '6px'], ['giant', '8px']]);
+const iconMarginSizeMap = new Map([['tiny', spacing([1])], ['small', spacing([1])], ['medium', spacing([1])], ['large', spacing([1.5])], ['giant', spacing([2])]]);
 const typographySizeMap = new Map([['tiny', 'heading5'], ['small', 'heading5'], ['medium', 'heading4'], ['large', 'heading2'], ['giant', 'heading1']]);
 const minHeightSizeMap = new Map([['tiny', '24px'], ['small', '32px'], ['medium', '40px'], ['large', '48px'], ['giant', '56px']]);
 const minHeightSizeLinkMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
@@ -102,11 +86,12 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
   className,
-  color,
+  color: colorProp,
   disabled,
   endIcon,
   id,
   label,
+  labelProps,
   loading,
   onClick,
   size,
@@ -117,8 +102,9 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   ...props
 }, reference) => {
-  const ref = useRef(null);
   label = label || text || '';
+  const ref = useRef(null);
+  const rippleRef = useRef(null);
   const iconSize = iconSizeMap.get(size);
   const paddingSize = paddingSizeMap.get(size);
   const outlinedPaddingSize = outlinedPaddingSizeMap.get(size);
@@ -126,25 +112,24 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const iconMarginSize = iconMarginSizeMap.get(size);
   const minHeightSize = minHeightSizeMap.get(size);
   const minHeightSizeLink = minHeightSizeLinkMap.get(size);
-
-  const _ButtonText = ButtonText(loading, iconMarginSize);
-
-  const _ButtonRoot = ButtonRoot(viewType, size, paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color);
-
+  const color = colors[colorProp] || colorProp;
+  const isViewTypeLink = viewType === 'link';
+  const _ButtonRootCSS = ButtonRootCSS(color);
+  const _ButtonIcon = ButtonIconCSS(endIcon, label, startIcon, iconMarginSize, iconSize);
+  const _ButtonTextCSS = ButtonTextCSS(loading, iconMarginSize);
+  const _ButtonSizeCSS = ButtonSizeCSS(paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, 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 StartIcon = useMemo(() => {
     let node = startIcon;
-
     if (typeof node === 'string') {
       node = jsx(Icon, {
         name: node,
@@ -154,19 +139,17 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         viewBox: true
       });
       return jsx("span", {
-        css: ButtonIcon,
+        css: _ButtonIcon,
         className: 'DGN-UI-Button-Start-Icon'
       }, node);
     }
-
     return jsx("span", {
-      css: ButtonIcon,
+      css: _ButtonIcon,
       className: 'DGN-UI-Button-Custom-Start-Icon'
     }, node);
   }, [startIcon, size]);
   const EndIcon = useMemo(() => {
     let node = endIcon;
-
     if (typeof node === 'string') {
       node = jsx(Icon, {
         name: node,
@@ -176,19 +159,18 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         viewBox: true
       });
       return jsx("span", {
-        css: ButtonIcon,
+        css: _ButtonIcon,
         className: 'DGN-UI-Button-End-Icon'
       }, node);
     }
-
     return jsx("span", {
-      css: ButtonIcon,
+      css: _ButtonIcon,
       className: 'DGN-UI-Button-Custom-End-Icon'
     }, node);
   }, [endIcon, size]);
-
   const iconLoading = () => {
     return jsx(CircularProgress, {
+      className: 'DGN-UI-Button-Loading',
       size: 'extraSmall',
       background: 'transparent',
       color: 'currentColor',
@@ -196,67 +178,104 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       width: parseInt(iconSize)
     });
   };
-
-  const _onClick = event => {
-    onClick && stopPropagation && event.stopPropagation();
+  const _onClick = e => {
+    onClick && stopPropagation && e.stopPropagation();
     if (disabled || loading) return;
-    onClick && onClick(event);
+    if (!isViewTypeLink) rippleRef.current.start(e);
+    onClick && onClick(e);
   };
-
   return useMemo(() => {
     // 1. Có StartIcon => thay StartIcon
     // 2. Có EndIcon => thay EndIcon
     // 3. Có StartIcon + EndIcon => thay StartIcon
     // 4. Không có Icon => hiện thêm icon loading ở đầu
+
     let start = startIcon ? StartIcon : jsx("span", {
       className: 'no-icon'
     });
     let end = endIcon ? EndIcon : null;
-
     if (loading) {
       if (startIcon) start = iconLoading();
       if (endIcon) end = iconLoading();
-
       if (startIcon && endIcon) {
         start = iconLoading();
         end = EndIcon;
       }
-
       if (!startIcon && !endIcon) start = iconLoading();
     }
-
     return jsx("button", {
-      css: _ButtonRoot,
+      css: [_ButtonRootCSS, _ButtonSizeCSS, disabled && ButtonDisabledCSS],
       ref: ref,
       onClick: _onClick,
       id: id,
       type: type,
-      className: classNames('DGN-UI-Button', viewType, getClassNameFromColor(color), size, loading && 'button--loading', disabled && 'button--disabled', className),
+      disabled: disabled,
+      className: classNames('DGN-UI-Button', viewType, getClassNameFromColor(colorProp), size, loading && 'button--loading', className),
       ...props
     }, start, jsx(Typography, {
-      css: _ButtonText,
+      css: _ButtonTextCSS,
       type: typographySize,
-      className: 'button-text'
-    }, children || label), end && end, !disabled && !loading && viewType !== 'link' && jsx(Ripple, {
-      color: getRippleColor(color, viewType, allColors)
+      className: classNames('DGN-UI-Button-Label', 'button-text'),
+      ...labelProps
+    }, children || label), end && end, !disabled && !loading && !isViewTypeLink && jsx(Ripple, {
+      ref: rippleRef,
+      color: getRippleColor(colorProp, viewType, allColors)
     }));
-  }, [children, className, color, disabled, endIcon, id, label, loading, onClick, size, startIcon, type, viewType]);
+  }, [children, className, colorProp, disabled, endIcon, id, label, loading, onClick, size, startIcon, stopPropagation, type, viewType]);
 }));
-const ButtonIcon = css`
+const ButtonIconCSS = (endIcon, label, startIcon, iconMarginSize, iconSize) => css`
     ${flexRow};
     ${alignCenter};
     ${justifyCenter};
     ${positionRelative};
     ${borderBox};
+    margin-right: ${endIcon || label ? iconMarginSize : 0};
+    &.DGN-UI-Button-End-Icon,
+    &.DGN-UI-Button-Custom-End-Icon {
+        margin-right: unset;
+        margin-left: ${startIcon || label ? iconMarginSize : 0};
+    }
+    &.DGN-UI-Button-Start-Icon,
+    &.DGN-UI-Button-End-Icon {
+        ${parseWidthHeight(iconSize)};
+    }
 `;
-
-const ButtonText = (loading, iconMarginSize) => css`
+const ButtonTextCSS = (loading, iconMarginSize) => css`
     white-space: nowrap;
     color: inherit;
     margin: 0 ${loading ? iconMarginSize : 0};
 `;
-
-const ButtonRoot = (viewType, size, paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color) => css`
+const ButtonDisabledCSS = css`
+    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 = (paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, iconSize) => css`
+    padding: ${paddingSize};
+    ${parseMinWidthHeight('max-content', minHeightSize)};
+    &.outlined {
+        padding: ${outlinedPaddingSize};
+    }
+    &.link {
+        ${parseMinHeight(minHeightSizeLink)};
+    }
+    .no-icon {
+        ${noMargin};
+        ${parseHeight(iconSize)};
+        ${parseMinWidth(0)};
+    }
+`;
+const ButtonRootCSS = color => css`
     ${inlineFlex};
     ${alignCenter};
     ${justifyCenter};
@@ -268,99 +287,44 @@ const ButtonRoot = (viewType, size, paddingSize, minHeightSize, minHeightSizeLin
     ${overflowHidden};
     ${outlineNone};
     ${userSelectNone};
-    height: max-content;
+    ${parseHeight('max-content')};
     transition: all 0.5s;
-    &.button--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;
-        }
-    }
-    /* &:not(:disabled):focus {
-        box-shadow: ${viewType === 'outlined' ? '0 0 0 2px ' + hexToRGBA(active, 0.13) : 'none'};
-    } */
     &.button--loading {
         ${pointerEventsNone};
     }
-    &.${size} {
-        padding: ${paddingSize};
-        min-height: ${minHeightSize};
-        min-width: max-content;
-        &.outlined {
-            padding: ${outlinedPaddingSize};
-        }
-        .css-${ButtonIcon.name} {
-            margin-right: ${endIcon || label ? iconMarginSize : 0};
-            &.DGN-UI-Button-End-Icon,
-            &.DGN-UI-Button-Custom-End-Icon {
-                margin-right: unset;
-                margin-left: ${startIcon || label ? iconMarginSize : 0};
-            }
-            &.DGN-UI-Button-Start-Icon,
-            &.DGN-UI-Button-End-Icon {
-                height: ${iconSize};
-                width: ${iconSize};
-            }
-        }
-        .no-icon {
-            ${noMargin};
-            height: ${iconSize};
-            min-width: 0;
-        }
-    }
     &.outlined {
-        ${backgroundTransparent}
+        ${backgroundTransparent};
+        ${border(1, color)};
+        color: ${color};
+        &.button--loading {
+            background-color: ${hexToRGBA(color, alphaLoading)};
+        }
+        ${Object.keys(alphaArr).map(key => `&:${key} {
+                    background-color: ${hexToRGBA(color, alphaArr[key])};
+                }`)}
         &.default {
-            border: 1px solid ${rest};
-            color: ${rest};
+            ${border(1, systemRest)};
+            color: ${systemRest};
             &.button--loading,
             &:hover,
             &:focus,
             &:active {
-                color: ${active};
-                border-color: ${active};
+                color: ${systemActive};
+                border-color: ${systemActive};
             }
             &.button--loading {
-                background-color: ${hexToRGBA(active, alphaLoading)};
+                background-color: ${hexToRGBA(systemActive, alphaLoading)};
             }
             ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(active, alphaArr[key])};
+                        background-color: ${hexToRGBA(systemActive, alphaArr[key])};
                     }`)}// &:hover | &:focus | &:active
         }
-        &.${color} {
-            border: 1px solid ${colorMap.get(color)};
-            color: ${colorMap.get(color)};
-            &.button--loading {
-                background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
-            }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
-                    }`)}
-        }
-        &.custom-color {
-            border: 1px solid ${color};
-            color: ${color};
-            &.button--loading {
-                background-color: ${hexToRGBA(color, alphaLoading)};
-            }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(color, alphaArr[key])};
-                    }`)}
-        }
     }
     &.filled {
-        border: none;
-        color: ${white};
+        ${borderNone};
+        color: ${systemWhite};
         font-weight: bold;
+        background-color: ${color};
         &.button--loading,
         &:hover,
         &:focus {
@@ -370,66 +334,48 @@ const ButtonRoot = (viewType, size, paddingSize, minHeightSize, minHeightSizeLin
             filter: brightness(0.7);
         }
         &.default {
-            background-color: ${rest};
+            background-color: ${systemRest};
             &.button--loading {
-                background-color: ${active};
+                background-color: ${systemActive};
             }
             &:hover,
             &:focus,
             &:active {
-                background-color: ${active};
+                background-color: ${systemActive};
             }
         }
-        &.${color} {
-            background-color: ${colorMap.get(color)};
-        }
-        &.custom-color {
-            background-color: ${color};
-        }
     }
     &.text {
         ${backgroundTransparent};
         ${noBorder};
+        color: ${color};
+        &.button--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 {
-                color: ${active};
+                color: ${systemActive};
             }
             &.button--loading {
-                color: ${active};
-                background-color: ${hexToRGBA(active, alphaLoading)};
+                color: ${systemActive};
+                background-color: ${hexToRGBA(systemActive, alphaLoading)};
             }
             ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(active, alphaArr[key])};
-                    }`)}
-        }
-        &.${color} {
-            color: ${colorMap.get(color)};
-            &.button--loading {
-                background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
-            }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
-                    }`)}
-        }
-        &.custom-color {
-            color: ${color};
-            &.button--loading {
-                background-color: ${hexToRGBA(color, alphaLoading)};
-            }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(color, alphaArr[key])};
+                        background-color: ${hexToRGBA(systemActive, alphaArr[key])};
                     }`)}
         }
     }
     &.link {
-        min-height: ${minHeightSizeLink};
         ${backgroundTransparent};
         ${noBorder};
         ${noPadding};
-        color: ${info};
+        color: ${color};
         &.button--loading,
         &:hover,
         &:focus {
@@ -438,59 +384,46 @@ const ButtonRoot = (viewType, size, paddingSize, minHeightSize, minHeightSizeLin
         &:active {
             filter: brightness(0.7);
         }
-        &.${color} {
-            color: ${colorMap.get(color)};
-        }
-        &.custom-color {
-            color: ${color};
+        &.default {
+            color: ${semanticInfo};
         }
     }
 `;
-
 Button.defaultProps = {
-  viewType: 'text',
-  color: 'default',
-  size: 'medium',
-  label: '',
   className: '',
+  color: 'default',
   disabled: false,
+  label: '',
   loading: false,
-  stopPropagation: true
+  size: 'medium',
+  stopPropagation: true,
+  viewType: 'text'
 };
 Button.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** The color of the component. */
   color: PropTypes.string,
-
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed after the children. */
   endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
   /** The content of the component. */
   label: PropTypes.string,
-
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography--title) applied to the `Typography` label. */
+  labelProps: PropTypes.object,
   /** If `true`, the loading indicator is shown. */
   loading: PropTypes.bool,
-
   /** Callback fired when the component is clicked. */
   onClick: PropTypes.func,
-
   /** The size of the component. */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
-
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed before the children. */
   startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link']),
-
   /**
    * ref methods (ref.current.instance.*method*)
    *
@@ -505,9 +438,7 @@ Button.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 { Button };
 export default OptionWrapper(Button);

package/components/button/more.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, useState, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -20,7 +19,6 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const [open, setOpen] = useState(false);
   const ButtonMoreStyle = css`
             display: inline-flex;
@@ -40,22 +38,18 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 display: none;
             }
         `;
-
   const showMoreOption = () => {
     if (!open) {
       setOpen(true);
     }
   };
-
   useEffect(() => {
     const iconCloseEl = ref.current.querySelector('.more-icon-close');
     const iconDownEl = ref.current.querySelector('.more-icon-down');
-
     if (open) {
       iconCloseEl.style.display = 'block';
       iconDownEl.style.display = 'none';
     }
-
     return () => {
       if (open) {
         iconCloseEl.style.display = null;
@@ -112,22 +106,16 @@ ButtonMore.defaultProps = {
 ButtonMore.propTypes = {
   /** used to fill background for button */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled']),
-
   /** color for button */
   color: PropTypes.string,
-
   /** size button */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
-
   /** prevent all event if true */
   disabled: PropTypes.bool,
-
   /** more options element to display */
   children: PropTypes.node,
-
   /** any props else for Button component */
   props: PropTypes.any,
-
   /** status loading of button */
   loading: PropTypes.bool
 };