diginet-core-ui 1.3.24

package/components/badge/index.js

@@ -0,0 +1,223 @@
+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, forwardRef, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import * as Icons from '../../icons';
+import { capitalize } from '../../utils';
+import { useTheme } from '../../theme';
+const {
+  colors,
+  typography: {
+    fontFamily
+  }
+} = useTheme();
+const sizes = {
+  small: {
+    height: 24,
+    number: 14,
+    icon: 19,
+    fontSize: 12
+  },
+  medium: {
+    height: 32,
+    number: 18,
+    icon: 25.33,
+    fontSize: 14
+  },
+  large: {
+    height: 40,
+    number: 22,
+    icon: 31.67,
+    fontSize: 16
+  }
+};
+const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  content,
+  max,
+  name,
+  color,
+  iconProps,
+  size,
+  style,
+  badgeNumStyle,
+  refs,
+  onClick,
+  children,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const badgeNumSize = sizes[size || 'medium'].number || 18;
+  const badgeIconSize = sizes[size || 'medium'].icon || 25.33;
+  const BadgeRoot = css`
+        display: inline-flex;
+        align-items: flex-end;
+        position: relative;
+        flex-shrink: 0;
+        color: #000;
+        height: ${sizes[size || 'medium'].height || 32}px;
+        width: ${sizes[size || 'medium'].height || 32}px;
+        box-sizing: border-box;
+        &.click-able {
+            cursor: pointer;
+        }
+    `;
+  const BadgeIcon = css`
+        display: flex;
+        position: relative;
+        justify-content: flex-start;
+        align-items: flex-end;
+        height: ${badgeIconSize}px;
+    `;
+  const BadgeNumber = css`
+        display: flex;
+        flex-wrap: wrap;
+        position: absolute;
+        top: 0;
+        right: 0;
+        justify-content: center;
+        align-items: center;
+        font-family: ${fontFamily};
+        font-size: ${sizes[size || 'medium'].fontSize}px;
+        line-height: ${badgeNumSize}px;
+        font-style: normal;
+        height: ${badgeNumSize}px;
+        min-width: ${badgeNumSize}px;
+        padding: 0 3px;
+        color: #000;
+        background-color: ${colors.secondary};
+        border-radius: ${badgeNumSize / 2}px;
+        box-sizing: border-box;
+        z-index: 1;
+        &.primary {
+            color: #FFF;
+            background-color: ${colors.primary};
+        }
+        &.info {
+            color: #FFF;
+            background-color: ${colors.info};
+        }
+        &.success {
+            color: #FFF;
+            background-color: ${colors.success};
+        }
+        &.warning {
+            color: #FFF;
+            background-color: ${colors.warning};
+        }
+        &.danger {
+            color: #FFF;
+            background-color: ${colors.danger};
+        }
+    `;
+  useEffect(() => {
+    if (refs) refs(ref);
+  }, []);
+  useEffect(() => {
+    if (color && color !== 'default' && content) {
+      ref.current.querySelector(`.css-${BadgeNumber.name}`).classList.add(color);
+    }
+
+    return () => {
+      if (ref.current && color && color !== 'default' && content) {
+        ref.current.querySelector(`.css-${BadgeNumber.name}`).classList.remove(color);
+      }
+    };
+  }, [color]);
+  useEffect(() => {
+    if (onClick) {
+      ref.current.classList.add('click-able');
+      ref.current.addEventListener('click', onClick);
+    }
+
+    return () => {
+      if (onClick && ref.current) {
+        ref.current.classList.remove('click-able');
+        ref.current.removeEventListener('click', onClick);
+      }
+    };
+  }, [onClick]);
+  const BadgeView = useMemo(() => {
+    let node = children;
+
+    if (!node && name) {
+      const IconNode = Icons[capitalize(name)];
+
+      if (IconNode) {
+        node = jsx(IconNode, _extends({
+          width: badgeIconSize,
+          height: badgeIconSize
+        }, iconProps));
+      }
+    }
+
+    return jsx("div", _extends({
+      css: BadgeRoot,
+      style: style,
+      ref: ref
+    }, props), jsx("span", {
+      css: BadgeIcon
+    }, node), content !== undefined && jsx("span", {
+      css: BadgeNumber,
+      style: badgeNumStyle
+    }, max && content > max ? max + '+' : content));
+  }, [content, name, size, children]);
+  return BadgeView;
+}));
+Badge.defaultProps = {
+  color: 'default',
+  size: 'medium',
+  iconProps: {
+    color: '#000',
+    viewBox: true
+  }
+};
+Badge.propTypes = {
+  /** the quantity is shown on the badge */
+  content: PropTypes.number,
+
+  /** the largest number is displayed on the badge */
+  max: PropTypes.number,
+
+  /** background color of badge */
+  color: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']),
+
+  /** name of icon in the icons store */
+  name: PropTypes.string,
+
+  /** size of Badge */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+
+  /** color for icon (if use name instead of children) */
+  iconProps: PropTypes.shape({
+    color: PropTypes.string,
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    viewBox: PropTypes.bool
+  }),
+
+  /** style inline of badge */
+  style: PropTypes.object,
+
+  /** style inline of badge number */
+  badgeNumStyle: PropTypes.object,
+
+  /** the function get ref */
+  refs: PropTypes.func,
+
+  /** the function will run when click on badge */
+  onClick: PropTypes.func,
+
+  /** the content displayed under the number of the badge */
+  children: PropTypes.node,
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default Badge;

package/components/button/icon.js

@@ -0,0 +1,493 @@
+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 { hexToRgb, isColor, isColorName, lighten } from '../../styles/color-helper';
+import { capitalize } from '../../utils';
+import * as Icons from '../../icons';
+import Ripple from './ripple-effect';
+import theme from '../../theme/settings';
+import { getClassNameFromColor, getRippleColor } from '.';
+import CircularProgress from "../progress/circular";
+const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  type,
+  viewType,
+  color,
+  size,
+  name,
+  width,
+  height,
+  className,
+  circular,
+  viewBox,
+  disabled,
+  style,
+  onClick,
+  icon,
+  children,
+  refs,
+  loading,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const ButtonRoot = css`
+        display: inline-flex;
+        position: relative;
+        justify-content: center;
+        align-items: center;
+        outline: none;
+        margin: 2px;
+        box-sizing: border-box;
+        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;
+            }
+        }
+        &.small {
+            padding: 6px;
+            &.outlined {
+                padding: 5px;
+            }
+            .DGN-UI-ButtonIcon-Icon {
+                height: 20px;
+                width: 20px;
+            }
+        }
+        &.medium {
+            padding: 8px;
+            &.outlined {
+                padding: 7px;
+            }
+            .DGN-UI-ButtonIcon-Icon {
+                height: 24px;
+                width: 24px;
+            }
+        }
+        &.large {
+            padding: 8px;
+            &.outlined {
+                padding: 7px;
+            }
+            .DGN-UI-ButtonIcon-Icon {
+                height: 32px;
+                width: 32px;
+            }
+        }
+        &.giant {
+            padding: 8px;
+            &.outlined {
+                padding: 7px;
+            }
+            .DGN-UI-ButtonIcon-Icon {
+                height: 40px;
+                width: 40px;
+            }
+        }
+        &.outlined {
+            background-color: ${theme.colors.white};
+            font-weight     : bold;
+            &.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)};
+            }`}
+        }
+        &.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)};
+                }
+            }`}
+        }
+        &: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);
+  }, []);
+
+  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(() => {
+    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
+        });
+      }
+    }
+
+    return jsx("button", _extends({
+      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-Icon'
+    }, " ", node, " "), !disabled && jsx(Ripple, {
+      color: getRippleColor(color, viewType, colors)
+    }));
+  }, [size, viewType, color, disabled, name, children, onClick, loading, circular, viewBox]);
+  return ButtonView;
+}));
+ButtonIcon.defaultProps = {
+  viewType: 'outlined',
+  color: 'default',
+  size: 'medium',
+  className: '',
+  width: '100%',
+  height: '100%',
+  circular: false,
+  disabled: false
+};
+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']),
+
+  /** color for button */
+  color: PropTypes.string,
+
+  /** size button */
+  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
+
+  /** name of icon in icons store */
+  name: PropTypes.string,
+
+  /** the class for button */
+  className: PropTypes.string,
+
+  /** the width of icon */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** the height of icon */
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** has view box if true */
+  viewBox: PropTypes.bool,
+
+  /** circle button if true */
+  circular: PropTypes.bool,
+
+  /** prevent all event if true */
+  disabled: PropTypes.bool,
+
+  /** style inline of button */
+  style: PropTypes.object,
+
+  /** element to display in button */
+  children: PropTypes.node,
+
+  /** any props else */
+  props: PropTypes.any,
+
+  /** status loading of button */
+  loading: PropTypes.bool
+};
+export default ButtonIcon;