diginet-core-ui 1.3.24 → 1.3.29

package/components/button/icon.js

@@ -1,19 +1,66 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, useEffect, useMemo, forwardRef } from 'react';
+import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import * as colors from '../../styles/colors';
-import { hexToRgb, isColor, isColorName, lighten } from '../../styles/color-helper';
+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 * as Icons from '../../icons';
+import Icon from '../../icons';
 import Ripple from './ripple-effect';
-import theme from '../../theme/settings';
 import { getClassNameFromColor, getRippleColor } from '.';
-import CircularProgress from "../progress/circular";
+import CircularProgress from '../progress/circular';
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, outlineNone, overflowHidden, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
+const {
+  system: {
+    active,
+    disabled: systemDisabled,
+    rest,
+    white
+  },
+  semantic: {
+    success,
+    warning,
+    danger,
+    info
+  },
+  fill: {
+    disabled: fillDisabled
+  }
+} = colors;
+const colorMap = new Map([['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+const sizeMap = new Map([['tiny', {
+  buttonSize: '24px',
+  iconSize: '16px'
+}], ['small', {
+  buttonSize: '32px',
+  iconSize: '20px'
+}], ['medium', {
+  buttonSize: '40px',
+  iconSize: '24px'
+}], ['large', {
+  buttonSize: '48px',
+  iconSize: '32px'
+}], ['giant', {
+  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 alphaArr = {
+  hover: 0.1,
+  focus: 0.2,
+  active: 0.3
+};
+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 ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   viewType,
@@ -32,364 +79,214 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   refs,
   loading,
+  colorHover,
   ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
+}, reference) => {
+  var _sizeMap$get, _sizeMap$get2;
 
+  const ref = 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';
+  colorHover = colorMap.get(colorHover) || colorHover;
   const ButtonRoot = css`
-        display: inline-flex;
-        position: relative;
-        justify-content: center;
-        align-items: center;
-        outline: none;
-        margin: 2px;
-        box-sizing: border-box;
+        ${inlineFlex}
+        ${positionRelative}
+        ${justifyCenter}
+        ${alignCenter}
+        ${outlineNone}
+        ${borderBox}
+        ${overflowHidden}
+        ${cursorPointer}
+        ${userSelectNone}
+        padding: 0;
         border-radius: ${circular ? '50%' : '4px'};
         transition: background-color 0.5s, filter 0.5s;
-        overflow: hidden;
-        cursor: pointer;
-        user-select: none;
-        &.tiny {
-            padding: 4px;
-            &.outlined {
-                padding: 3px;
-            }
-            .DGN-UI-ButtonIcon-Icon {
-                height: 16px;
-                width: 16px;
-            }
+        .DGN-UI-ButtonIcon-Icon {
+            ${flexRow}
+            ${positionRelative}
+            ${borderBox}
+            ${justifyCenter}
+            ${alignCenter}
         }
-        &.small {
-            padding: 6px;
+        &.disabled {
+            cursor: not-allowed !important;
+            color: ${systemDisabled} !important;
             &.outlined {
-                padding: 5px;
-            }
-            .DGN-UI-ButtonIcon-Icon {
-                height: 20px;
-                width: 20px;
+                border-color: ${systemDisabled} !important;
+                background-color: transparent !important;
             }
-        }
-        &.medium {
-            padding: 8px;
-            &.outlined {
-                padding: 7px;
+            &.filled {
+                background-color: ${fillDisabled} !important;
+                filter: brightness(1) !important;
             }
-            .DGN-UI-ButtonIcon-Icon {
-                height: 24px;
-                width: 24px;
+            &.text {
+                background-color: transparent !important;
             }
         }
-        &.large {
-            padding: 8px;
-            &.outlined {
-                padding: 7px;
-            }
-            .DGN-UI-ButtonIcon-Icon {
-                height: 32px;
-                width: 32px;
-            }
+        &.loading {
+            ${pointerEventsNone}
         }
-        &.giant {
-            padding: 8px;
-            &.outlined {
-                padding: 7px;
-            }
+        &.${size} {
+            width: ${width ? isNaN(width) ? width : width + 'px' : buttonSize};
+            height: ${height ? isNaN(height) ? height : height + 'px' : buttonSize};
             .DGN-UI-ButtonIcon-Icon {
-                height: 40px;
-                width: 40px;
+                height: ${iconSize};
+                width: ${iconSize};
             }
         }
         &.outlined {
-            background-color: ${theme.colors.white};
-            font-weight     : bold;
+            ${backgroundTransparent}
             &.default {
-                border: 1px solid ${theme.colors.secondary};
-                color : ${theme.colors.default};
-                &:hover {
-                    background-color: ${lighten(theme.colors.default, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.default, 0.8)};
-                }
+                ${border(1, rest)}
+                color: ${rest};
+                &.loading,
+                &:hover,
+                &:focus,
                 &:active {
-                    background-color: ${lighten(theme.colors.default, 0.7)};
-                }
-            }
-            &.primary {
-                border: 1px solid ${theme.colors.primary};
-                color : ${theme.colors.primary};
-                &:hover {
-                    background-color: ${lighten(theme.colors.primary, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.primary, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.primary, 0.7)};
-                }
-            }
-            &.success {
-                border: 1px solid ${theme.colors.success};
-                color : ${theme.colors.success};
-                &:hover {
-                    background-color: ${lighten(theme.colors.success, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.success, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.success, 0.7)};
-                }
-            }
-            &.warning {
-                border: 1px solid ${theme.colors.warning};
-                color : ${theme.colors.warning};
-                &:hover {
-                    background-color: ${lighten(theme.colors.warning, 0.9)};
+                    color: ${colorHover};
+                    border-color: ${colorHover};
                 }
-                &:focus {
-                    background-color: ${lighten(theme.colors.warning, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.warning, 0.7)};
+                &.loading {
+                    background-color: ${hexToRGBA(colorHover, alphaLoading)};
                 }
+                ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(colorHover, alphaArr[key])};
+                    }`)}// &:hover | &:focus | &:active
             }
-            &.danger {
-                border: 1px solid ${theme.colors.danger};
-                color : ${theme.colors.danger};
-                &:hover {
-                    background-color: ${lighten(theme.colors.danger, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.danger, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.danger, 0.7)};
+            &.${color} {
+                ${color !== 'default' && border(1, colorMap.get(color))}
+                color: ${colorMap.get(color)};
+                &.loading {
+                    background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
                 }
+                ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
+                    }`)}
             }
-            &.info {
-                border: 1px solid ${theme.colors.info};
-                color : ${theme.colors.info};
-                &:hover {
-                    background-color: ${lighten(theme.colors.info, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.info, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.info, 0.7)};
+            &.custom-color {
+                ${border(1, color)}
+                color: ${color};
+                &.loading {
+                    background-color: ${hexToRGBA(color, alphaLoading)};
                 }
+                ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(color, alphaArr[key])};
+                    }`)}
             }
-            ${isColor(color) && `&.custom-color {
-                border: 1px solid ${color};
-                color : ${color};
-                &:hover {
-                    background-color: ${lighten(color, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(color, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(color, 0.7)};
-                }
-            }`}
-            ${isColorName(color) && `&.custom-color {
-                border: 1px solid ${isColorName(color)};
-                color : ${isColorName(color)};
-                &:hover {
-                    background-color: ${lighten(isColorName(color), 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(isColorName(color), 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(isColorName(color), 0.7)};
-                }
-            }`}
         }
         &.filled {
-            border     : none;
-            color      : ${theme.colors.white};
+            ${borderNone}
+            color: ${white};
             font-weight: bold;
-            &:hover, &:focus {
+            &.loading,
+            &:hover,
+            &:focus {
                 filter: brightness(0.85);
             }
             &:active {
                 filter: brightness(0.7);
             }
             &.default {
-                background-color: ${theme.colors.secondary};
-            }
-            &.primary {
-                background-color: ${theme.colors.primary};
-            }
-            &.success {
-                background-color: ${theme.colors.success};
-            }
-            &.warning {
-                background-color: ${theme.colors.warning};
-            }
-            &.danger {
-                background-color: ${theme.colors.danger};
+                background-color: ${rest};
+                &.loading,
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: ${colorHover};
+                }
             }
-            &.info {
-                background-color: ${theme.colors.info};
+            &.${color} {
+                background-color: ${colorMap.get(color)};
             }
-            ${isColor(color) && `&.custom-color {
+            &.custom-color {
                 background-color: ${color};
-            }`}
-            ${isColorName(color) && `&.custom-color {
-                background-color: ${isColorName(color)};
-            }`}
+            }
         }
         &.text {
-            background-color: transparent;
-            border          : none !important;
+            ${noBorder}
+            ${backgroundTransparent}
             &.default {
-                color : ${theme.colors.secondary};
-                &:hover {
-                    background-color: ${lighten(theme.colors.secondary, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.secondary, 0.8)};
-                }
+                color: ${rest};
+                &:hover,
+                &:focus,
                 &:active {
-                    background-color: ${lighten(theme.colors.secondary, 0.7)};
-                }
-            }
-            &.primary {
-                color : ${theme.colors.primary};
-                &:hover {
-                    background-color: ${lighten(theme.colors.primary, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.primary, 0.8)};
+                    color: ${colorHover};
                 }
-                &:active {
-                    background-color: ${lighten(theme.colors.primary, 0.7)};
+                &.loading {
+                    color: ${active};
+                    background-color: ${hexToRGBA(colorHover, alphaLoading)};
                 }
+                ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(colorHover, alphaArr[key])};
+                    }`)}
             }
-            &.success {
-                color : ${theme.colors.success};
-                &:hover {
-                    background-color: ${lighten(theme.colors.success, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.success, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.success, 0.7)};
+            &.${color} {
+                color: ${colorMap.get(color)};
+                &.loading {
+                    background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
                 }
+                ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(colorMap.get(color), alphaArr[key])};
+                    }`)}
             }
-            &.warning {
-                color : ${theme.colors.warning};
-                &:hover {
-                    background-color: ${lighten(theme.colors.warning, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.warning, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.warning, 0.7)};
+            &.custom-color {
+                color: ${color};
+                &.loading {
+                    background-color: ${hexToRGBA(color, alphaLoading)};
                 }
+                ${Object.keys(alphaArr).map(key => `&:${key} {
+                        background-color: ${hexToRGBA(color, alphaArr[key])};
+                    }`)}
             }
-            &.danger {
-                color : ${theme.colors.danger};
-                &:hover {
-                    background-color: ${lighten(theme.colors.danger, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.danger, 0.8)};
-                }
-                &:active {
-                    background-color: ${lighten(theme.colors.danger, 0.7)};
-                }
+        }
+        &.ghost {
+            ${backgroundTransparent}
+            ${noBorder}
+            color: ${rest};
+            &.${size} {
+                height: ${iconSize};
+                width: ${iconSize};
             }
-            &.info {
-                color : ${theme.colors.info};
-                &:hover {
-                    background-color: ${lighten(theme.colors.info, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(theme.colors.info, 0.8)};
-                }
+            &.default {
+                &:hover,
+                &:focus,
                 &:active {
-                    background-color: ${lighten(theme.colors.info, 0.7)};
+                    color: ${iconColorMap.get(capitalize(name)) || colorHover};
                 }
             }
-            ${isColor(color) && `&.custom-color {
-                color : ${color};
-                &:hover {
-                    background-color: ${lighten(color, 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(color, 0.8)};
-                }
+            &.${color} {
+                &:hover,
+                &:focus,
                 &:active {
-                    background-color: ${lighten(color, 0.7)};
-                }
-            }`}
-            ${isColorName(color) && `&.custom-color {
-                color : ${isColorName(color)};
-                &:hover {
-                    background-color: ${lighten(isColorName(color), 0.9)};
-                }
-                &:focus {
-                    background-color: ${lighten(isColorName(color), 0.8)};
+                    color: ${colorMap.get(color)};
                 }
+            }
+            &.custom-color {
+                &:hover,
+                &:focus,
                 &:active {
-                    background-color: ${lighten(isColorName(color), 0.7)};
+                    color: ${color};
                 }
-            }`}
-        }
-        &:disabled {
-            pointer-events: none;
-            color: ${colors.dark4} !important;
-            &.filled, &.outlined {
-                background-color: ${theme.colors.bgDisabled} !important;
-                filter: brightness(1);
-            }
-            &.outlined {
-                border-color: ${theme.colors.disabled};
-            }
-            &.text {
-                background-color: transparent !important;
-            }
-            .DGN-UI-ButtonIcon-Icon {
-                pointer-events: auto;
-                cursor: no-drop;
             }
         }
-        &:not(:disabled):focus {
-            box-shadow: ${viewType !== 'text' ? '0 0 0 2px ' + hexToRgb(colors.brand + '20') : 'none'};
-        }
-        .DGN-UI-ButtonIcon-Icon {
-            display: flex;
-            position: relative;
-            box-sizing: border-box;
-            justify-content: center;
-            align-items: center;
-        }
     `;
-  const NotFoundIcon = css`
-        display: block;
-        width: 70%;
-        height: 70%;
-        border: 1px dashed ${theme.colors.border};
-    `;
-  useEffect(() => {
-    if (refs) refs(ref);
-  }, []);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
 
   const iconLoading = () => {
     return jsx(CircularProgress, {
-      size: "extraSmall",
-      background: "transparent",
+      size: 'extraSmall',
+      background: 'transparent',
       color: 'currentColor',
       strokeWidth: 3,
-      width: 24
+      width: parseInt(iconSize)
     });
   };
 
@@ -398,63 +295,66 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClick && onClick(event);
   };
 
-  const ButtonView = useMemo(() => {
+  return useMemo(() => {
     let node = children;
 
     if (!node) {
-      const IconComp = Icons[capitalize(name)];
-
-      if (IconComp) {
-        node = jsx(IconComp, {
-          width: width,
-          height: height,
-          color: 'currentColor',
-          viewBox: viewBox
-        });
-      } else {
-        node = jsx("span", {
-          css: NotFoundIcon
-        });
-      }
+      node = jsx(Icon, {
+        name: name,
+        width: iconSize,
+        height: iconSize,
+        color: 'currentColor',
+        viewBox: true
+      });
     }
 
-    return jsx("button", _extends({
+    return jsx("button", {
       css: ButtonRoot,
       style: style,
       ref: ref,
       type: type,
       onClick: _onClick,
-      disabled: disabled,
-      className: ['DGN-UI-ButtonIcon', viewType, getClassNameFromColor(color), size, className].join(' ').trim().replace(/\s+/g, ' ')
-    }, props), loading && iconLoading(), !loading && jsx("span", {
+      className: ['DGN-UI-ButtonIcon', viewType, getClassNameFromColor(color), size, loading && 'loading', disabled && 'disabled', className].join(' ').trim().replace(/\s+/g, ' '),
+      ...props
+    }, loading && iconLoading(), !loading && jsx("span", {
       className: 'DGN-UI-ButtonIcon-Icon'
-    }, " ", node, " "), !disabled && jsx(Ripple, {
-      color: getRippleColor(color, viewType, colors)
+    }, " ", node, " "), !disabled && !loading && viewType !== 'ghost' && jsx(Ripple, {
+      color: getRippleColor(color, viewType, allColors)
     }));
-  }, [size, viewType, color, disabled, name, children, onClick, loading, circular, viewBox]);
-  return ButtonView;
+  }, [size, viewType, color, colorHover, disabled, name, children, onClick, loading, circular, viewBox, width, height]);
 }));
 ButtonIcon.defaultProps = {
   viewType: 'outlined',
   color: 'default',
+  colorHover: active,
   size: 'medium',
   className: '',
-  width: '100%',
-  height: '100%',
   circular: false,
-  disabled: false
+  disabled: false,
+  viewBox: true
 };
 ButtonIcon.propTypes = {
   /** The type attribute specifies the type of tag button */
   type: PropTypes.oneOf(['button', 'submit', 'reset']),
 
   /** used to fill background for button */
-  viewType: PropTypes.oneOf(['text', 'outlined', 'filled']),
+  viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
 
   /** color for button */
   color: PropTypes.string,
 
-  /** size button */
+  /** custom hover color for button with color 'default' */
+  colorHover: PropTypes.string,
+
+  /** 
+   * size of button
+   * 
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
+   * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
 
   /** name of icon in icons store */
@@ -463,10 +363,10 @@ ButtonIcon.propTypes = {
   /** the class for button */
   className: PropTypes.string,
 
-  /** the width of icon */
+  /** the width of button */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /** the height of icon */
+  /** the height of button */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /** has view box if true */
@@ -488,6 +388,14 @@ ButtonIcon.propTypes = {
   props: PropTypes.any,
 
   /** status loading of button */
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+
+  /**
+   * ref methods
+   * 
+   * * onClick
+   */
+  reference: PropTypes.func
 };
-export default ButtonIcon;
+export { ButtonIcon };
+export default OptionWrapper(ButtonIcon);