diginet-core-ui 1.3.24 → 1.3.29

package/components/badge/index.js

@@ -1,47 +1,51 @@
-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';
+import Icon from '../../icons';
+import { lighten } from '../../styles/color-helper';
+import { color as colors } from '../../styles/colors';
+import { typography } from '../../styles/typography';
+import { alignCenter, borderBox, borderRadius4px, cursorPointer, flexRow, flexWrap, inlineFlex, justifyCenter, overflowHidden, positionAbsolute, positionRelative } from '../../styles/general';
 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
+  paragraph1,
+  paragraph2,
+  paragraph3
+} = typography;
+const {
+  system: {
+    active,
+    rest,
+    white
   },
-  large: {
-    height: 40,
-    number: 22,
-    icon: 31.67,
-    fontSize: 16
+  semantic: {
+    success,
+    warning,
+    danger,
+    info
   }
+} = colors;
+const colorMap = new Map([['default', rest], ['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+const sizeMap = new Map([['medium', '40px'], ['large', '48px'], ['giant', '56px']]);
+const iconSizeMap = new Map([['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
+const dotSizeMap = new Map([['medium', 8], ['large', 10], ['giant', 12]]);
+const dotPaddingSizeMap = new Map([['medium', 0], ['large', 1], ['giant', 2]]);
+const typographySizeMap = new Map([['medium', paragraph3], ['large', paragraph2], ['giant', paragraph1]]);
+
+const calDotPos = (dotSize, dotPaddingSize, iconSize, isText, content) => {
+  return isText ? content || content === 0 ? iconSize - 4 * (dotPaddingSize + 1) : dotSize * 3 - dotPaddingSize : -(dotSize / 2);
 };
+
 const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   content,
   max,
+  viewType,
   name,
   color,
-  iconProps,
   size,
+  className,
   style,
   badgeNumStyle,
   refs,
@@ -53,138 +57,122 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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 _size = sizeMap.get(size);
+
+  const _color = colorMap.get(color);
+
+  const typographySize = typographySizeMap.get(size);
+  const iconSize = iconSizeMap.get(size);
+  const dotSize = content || content === 0 ? dotSizeMap.get(size) + 8 : dotSizeMap.get(size);
+  const dotColor = colorMap.get(color);
+  const dotPaddingSize = dotPaddingSizeMap.get(size);
+  const dotPos = calDotPos(dotSize, dotPaddingSize, parseInt(iconSize), viewType === 'text', content);
   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;
+        ${typographySize};
+        ${flexRow}
+        ${alignCenter}
+        ${justifyCenter}
+        ${flexWrap}
+        ${positionAbsolute}
+        ${borderBox}
+        color: ${white};
+        min-height: ${dotSize}px;
+        min-width: ${dotSize}px;
+        background-color: ${dotColor};
+        border-radius: ${dotSize / 2}px;
+        padding: 0 4px;
         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};
+    `;
+  const BadgeRoot = css`
+        ${inlineFlex}
+        ${alignCenter}
+        ${justifyCenter}
+        ${positionRelative}
+        ${borderBox}
+        ${borderRadius4px}
+        ${onClick && cursorPointer}
+        height: ${name && !children ? _size : 'max-content'};
+        width: ${name && !children ? _size : 'max-content'};
+        &.text {
+            color: ${_color};
+            background-color: ${lighten(_color, 0.9)};
+            .css-${BadgeNumber.name} {
+                bottom: ${dotPos}px;
+                left: ${dotPos}px;
+            }
         }
-        &.danger {
-            color: #FFF;
-            background-color: ${colors.danger};
+        &.filled {
+            ${name && !children && `
+            color: ${white};
+            background-color: ${_color};
+            `}
+            .css-${BadgeNumber.name} {
+                top: ${dotPos}px;
+                right: ${dotPos}px;
+            }
         }
     `;
+  const BadgeIcon = css`
+        ${overflowHidden}
+    `;
+
+  const _onClick = event => {
+    onClick && onClick(event);
+  };
+
   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(() => {
+  return useMemo(() => {
     let node = children;
 
     if (!node && name) {
-      const IconNode = Icons[capitalize(name)];
-
-      if (IconNode) {
-        node = jsx(IconNode, _extends({
-          width: badgeIconSize,
-          height: badgeIconSize
-        }, iconProps));
-      }
+      node = jsx(Icon, {
+        name: name,
+        width: iconSize,
+        height: iconSize,
+        color: 'currentColor',
+        viewBox: true
+      });
     }
 
-    return jsx("div", _extends({
+    return jsx("div", {
       css: BadgeRoot,
+      ref: ref,
+      className: ['DGN-UI-Badge', viewType, className].join(' ').trim().replace(/\s+/g, ' '),
       style: style,
-      ref: ref
-    }, props), jsx("span", {
-      css: BadgeIcon
+      onClick: _onClick,
+      ...props
+    }, jsx("span", {
+      css: BadgeIcon,
+      className: 'DGN-UI-Badge-Icon'
     }, node), content !== undefined && jsx("span", {
       css: BadgeNumber,
+      className: 'DGN-UI-Badge-Dot',
       style: badgeNumStyle
     }, max && content > max ? max + '+' : content));
-  }, [content, name, size, children]);
-  return BadgeView;
+  }, [content, name, size, children, max, viewType, color, style, className]);
 }));
 Badge.defaultProps = {
+  viewType: 'filled',
+  // name: 'Notification',
   color: 'default',
   size: 'medium',
-  iconProps: {
-    color: '#000',
-    viewBox: true
-  }
+  content: null,
+  max: 99,
+  className: '',
+  style: {}
 };
 Badge.propTypes = {
   /** the quantity is shown on the badge */
-  content: PropTypes.number,
+  content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /** the largest number is displayed on the badge */
   max: PropTypes.number,
 
+  /** used to fill background for button */
+  viewType: PropTypes.oneOf(['text', 'filled']),
+
   /** background color of badge */
   color: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']),
 
@@ -192,15 +180,10 @@ Badge.propTypes = {
   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
-  }),
+  size: PropTypes.oneOf(['medium', 'large', 'giant']),
+
+  /** className of badge */
+  className: PropTypes.string,
 
   /** style inline of badge */
   style: PropTypes.object,