diginet-core-ui 1.3.24

package/components/button/index.js

@@ -0,0 +1,653 @@
+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 PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import * as colors from '../../styles/colors';
+import { Typography } from '../';
+import { detectColor, fade, hexToRgb, hslToRgb, isColor, isColorName, lighten, rgbaToHexA, rgbToHex } from '../../styles/color-helper';
+import { capitalize } from '../../utils';
+import * as Icons from '../../icons';
+import Ripple from './ripple-effect';
+import theme from '../../theme/settings';
+import CircularProgress from "../progress/circular";
+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)));
+  }
+};
+export const getClassNameFromColor = color => {
+  if (!isColor(color) && !isColorName(color)) {
+    return color;
+  }
+
+  return 'custom-color';
+};
+const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  type,
+  viewType,
+  color,
+  size,
+  label,
+  text,
+  className,
+  disabled,
+  onClick,
+  startIcon,
+  endIcon,
+  children,
+  refs,
+  loading,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const ButtonIcon = css`
+        display: flex;
+        position: relative;
+        box-sizing: border-box;
+        justify-content: center;
+        align-items: center;
+    `;
+  const ButtonText = css`
+        color: inherit;
+        text-transform: inherit;
+        margin: 0 ${loading ? '5px' : 0};
+    `;
+  const ButtonRoot = css`
+        display: flex;
+        position: relative;
+        justify-content: center;
+        align-items: center;
+        height: max-content;
+        outline: none;
+        margin: 2px;
+        box-sizing: border-box;
+        border-radius: 4px;
+        transition: all 0.5s;
+        overflow: hidden;
+        text-transform: ${theme.typography.button.textTransform};
+        cursor: pointer;
+        user-select: none;
+        &.text {
+            background-color: transparent;
+            border          : none !important;
+            &.default {
+                color : ${theme.colors.secondary};
+                &:hover {
+                    background-color: ${lighten(theme.colors.secondary, 0.9)};
+                }
+                &:focus {
+                    background-color: ${lighten(theme.colors.secondary, 0.8)};
+                }
+                &: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)};
+                }
+                &:active {
+                    background-color: ${lighten(theme.colors.primary, 0.7)};
+                }
+            }
+            &.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 {
+                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)};
+                }
+            }
+            &.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)};
+                }
+            }
+            &.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)};
+                }
+            }
+            ${isColor(color) && `&.custom-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 {
+                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)};
+                }
+            }`}
+        }
+        &.outlined {
+            font-weight: bold;
+            background-color: ${theme.colors.white};
+            &.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)};
+                }
+                &: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)};
+                }
+                &:focus {
+                    background-color: ${lighten(theme.colors.warning, 0.8)};
+                }
+                &:active {
+                    background-color: ${lighten(theme.colors.warning, 0.7)};
+                }
+            }
+            &.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)};
+                }
+            }
+            &.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)};
+                }
+            }
+            ${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};
+            font-weight: bold;
+            &: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};
+            }
+            &.info {
+                background-color: ${theme.colors.info};
+            }
+            ${isColor(color) && `&.custom-color {
+                background-color: ${color};
+            }`}
+            ${isColorName(color) && `&.custom-color {
+                background-color: ${isColorName(color)};
+            }`}
+        }
+        &.tiny {
+            padding: 4px 8px;
+            &.outlined {
+                padding: 3px 7px;
+            }
+            .css-${ButtonText.name} {
+                font-size: 10px;
+                line-height: 16px;
+            }
+            .css-${ButtonIcon.name} {
+                max-height: 16px;
+                min-width: 16px;
+                max-width: 16px;
+                margin-right: 4px;
+                &.end-icon {
+                    margin-right: unset;
+                    margin-left: 4px;
+                }
+            }
+        }
+        &.small {
+            padding: 6px 12px;
+            &.outlined {
+                padding: 5px 11px;
+            }
+            .css-${ButtonText.name} {
+                font-size: 12px;
+                line-height: 20px;
+            }
+            .css-${ButtonIcon.name} {
+                max-height: 20px;
+                min-width: 20px;
+                max-width: 20px;
+                margin-right: 6px;
+                &.end-icon {
+                    margin-right: unset;
+                    margin-left: 6px;
+                }
+            }
+        }
+        &.medium {
+            padding: 8px 16px;
+            &.outlined {
+                padding: 7px 15px;
+            }
+            .css-${ButtonText.name} {
+                font-size: 14px;
+                line-height: 24px;
+            }
+            .css-${ButtonIcon.name} {
+                max-height: 24px;
+                min-width: 24px;
+                max-width: 24px;
+                margin-right: 8px;
+                &.end-icon {
+                    margin-right: unset;
+                    margin-left: 8px;
+                }
+            }
+        }
+        &.large {
+            padding: 8px 20px;
+            &.outlined {
+                padding: 7px 19px;
+            }
+            .css-${ButtonText.name} {
+                font-size: 16px;
+                line-height: 32px;
+            }
+            .css-${ButtonIcon.name} {
+                max-height: 32px;
+                min-width: 32px;
+                max-width: 32px;
+                margin-right: 8px;
+                &.end-icon {
+                    margin-right: unset;
+                    margin-left: 8px;
+                }
+            }
+        }
+        &.giant {
+            padding: 8px 24px;
+            &.outlined {
+                padding: 7px 23px;
+            }
+            .css-${ButtonText.name} {
+                font-size: 20px;
+                line-height: 40px;
+            }
+            .css-${ButtonIcon.name} {
+                max-height: 40px;
+                min-width: 40px;
+                max-width: 40px;
+                margin-right: 8px;
+                &.end-icon {
+                    margin-right: unset;
+                    margin-left: 8px;
+                }
+            }
+        }
+        &:disabled {
+            cursor: initial;
+            color: ${theme.colors.disabled} !important;
+            &.outlined, &.filled {
+                background-color: ${theme.colors.bgDisabled} !important;
+                filter: brightness(1);
+            }
+            &.text {
+                background-color: transparent !important;
+            }
+            &.outlined {
+                border-color: ${theme.colors.disabled} !important;
+            }
+            pointer-events: none;
+            &::after {
+                content: '';
+                position: absolute;
+                cursor: no-drop;
+                inset: 0;
+                pointer-events: auto;
+                z-index: 1;
+            }
+        }
+        &:not(:disabled):focus {
+            box-shadow: ${viewType !== 'text' ? '0 0 0 2px ' + hexToRgb(colors.brand + '20') : 'none'};
+        }
+    `;
+  useEffect(() => {
+    if (refs) refs(ref);
+  }, []);
+  useEffect(() => {
+    if (!children) {
+      ref.current.querySelector('.button-text').innerHTML = label || text;
+      return () => {
+        if (ref.current) {
+          ref.current.querySelector('.button-text').innerHTML = null;
+        }
+      };
+    }
+  }, [label, text]);
+  const StartIcon = useMemo(() => {
+    let node = startIcon;
+
+    if (typeof node === 'string') {
+      const IconComp = Icons[capitalize(node)];
+
+      if (IconComp) {
+        node = jsx(IconComp, {
+          color: 'currentColor',
+          width: '100%',
+          height: '100%',
+          viewBox: true
+        });
+      }
+    }
+
+    return jsx("span", {
+      css: ButtonIcon
+    }, node);
+  }, [startIcon]);
+  const EndIcon = useMemo(() => {
+    let node = endIcon;
+
+    if (typeof node === 'string') {
+      const IconComp = Icons[capitalize(node)];
+
+      if (IconComp) {
+        node = jsx(IconComp, {
+          color: 'currentColor',
+          width: '100%',
+          height: '100%',
+          viewBox: true
+        });
+      }
+    }
+
+    return jsx("span", {
+      css: ButtonIcon,
+      className: 'end-icon'
+    }, node);
+  }, [endIcon]);
+
+  const iconLoading = () => {
+    return jsx(CircularProgress, {
+      size: "extraSmall",
+      background: "transparent",
+      color: 'currentColor',
+      strokeWidth: 3,
+      width: 24
+    });
+  };
+
+  const _onClick = event => {
+    if (disabled || loading) return;
+    onClick && onClick(event);
+  };
+
+  const ButtonView = 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 : null;
+    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", _extends({
+      css: ButtonRoot,
+      onClick: _onClick,
+      ref: ref,
+      disabled: disabled,
+      type: type,
+      className: ['DGN-UI-Button', viewType, getClassNameFromColor(color), size, className].join(' ').trim().replace(/\s+/g, ' ')
+    }, props), start && start, jsx("span", {
+      css: ButtonText
+    }, jsx(Typography, {
+      type: 'h4',
+      className: 'button-text',
+      color: 'inherit',
+      style: {
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
+        textTransform: 'inherit'
+      }
+    }, children || label || text)), end && end, jsx(Ripple, {
+      color: getRippleColor(color, viewType, colors)
+    }));
+  }, [size, viewType, color, disabled, onClick, loading, startIcon, endIcon]);
+  return ButtonView;
+}));
+Button.defaultProps = {
+  viewType: 'text',
+  color: 'default',
+  size: 'medium',
+  text: '',
+  label: '',
+  className: '',
+  disabled: false,
+  loading: false
+};
+Button.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']),
+
+  /** color for button */
+  color: PropTypes.string,
+
+  /** size button */
+  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
+
+  /** text to display in button */
+  text: PropTypes.string,
+
+  /** the content to display in button (like text prop) */
+  label: PropTypes.string,
+
+  /** the class for button */
+  className: PropTypes.string,
+
+  /** prevent all event if true */
+  disabled: PropTypes.bool,
+
+  /** icon to the left of the button */
+  startIcon: PropTypes.node,
+
+  /** icon to the right of the button */
+  endIcon: PropTypes.node,
+
+  /** element to display in button (like text) */
+  children: PropTypes.node,
+
+  /** the function will run when click on button */
+  onClick: PropTypes.func,
+
+  /** any props else */
+  props: PropTypes.any,
+
+  /** status loading of button */
+  loading: PropTypes.bool
+};
+export default Button;