diginet-core-ui 1.3.33 → 1.3.34

package/components/badge/index.js

@@ -1,14 +1,14 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, forwardRef, useEffect, useMemo } from 'react';
+import { memo, useRef, forwardRef, useEffect, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import Icon from '../../icons';
-import { lighten } from '../../styles/color-helper';
+import OptionWrapper from '../others/option-wrapper';
 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';
+import { alignCenter, borderBox, borderRadius4px, flexRow, flexWrap, inlineFlex, justifyCenter, pointerEventsNone, positionAbsolute, positionRelative } from '../../styles/general';
+import Icon from '../../icons';
 const {
   paragraph1,
   paragraph2,
@@ -28,60 +28,96 @@ const {
   }
 } = 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 iconSizeMap = new Map([['medium', 24], ['large', 32], ['giant', 40]]);
 const dotSizeMap = new Map([['medium', 8], ['large', 10], ['giant', 12]]);
-const dotPaddingSizeMap = new Map([['medium', 0], ['large', 1], ['giant', 2]]);
+const dotIndentMap = new Map([['medium', 4], ['large', 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 calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) => {
+  const halfDotSize = dotSize / 2;
+  const {
+    horizontal,
+    vertical
+  } = anchorOrigin;
+  const dotIndent = hasContent ? dotIndentMap.get(size) || 0 : 0;
+  const verticalCssRight = vertical === 'bottom' ? css`
+                    bottom: ${-dotIndent}px;
+            ` : css`
+                    top: ${-dotIndent}px;
+            `;
+  const verticalCssLeft = vertical === 'bottom' ? css`
+                    bottom: ${-halfDotSize}px;
+            ` : css`
+                    top: ${-halfDotSize}px;
+            `;
+
+  if (contentDirection === 'right') {
+    if (horizontal === 'left') {
+      return css`
+                left: ${-dotIndent}px;
+                ${verticalCssRight};
+            `;
+    } else {
+      return css`
+                left: ${`calc(100% - ${dotSize - dotIndent}px);`};
+                ${verticalCssRight};
+            `;
+    }
+  } else {
+    if (horizontal === 'left') {
+      return css`
+                right: ${`calc(100% - ${halfDotSize}px);`};
+                ${verticalCssLeft};
+            `;
+    } else {
+      return css`
+                right: ${`${-halfDotSize}px;`};
+                ${verticalCssLeft};
+            `;
+    }
+  }
 };
 
 const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  anchorOrigin,
+  contentDirection,
   content,
   max,
-  viewType,
   name,
   color,
   size,
   className,
   style,
-  badgeNumStyle,
+  showZero,
+  invisible,
   refs,
-  onClick,
   children,
+  iconProps,
   ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
-  const _size = sizeMap.get(size);
-
-  const _color = colorMap.get(color);
-
+}, reference) => {
+  const ref = useRef(null);
   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 dotSize = content || content === 0 && showZero ? dotSizeMap.get(size) + 8 : dotSizeMap.get(size);
+  const dotColor = colorMap.get(color) || colors[color] || color;
+  const dotPos = calDotPos(anchorOrigin, !children && name ? 'right' : contentDirection, dotSize, content || content === 0, size);
   const BadgeNumber = css`
         ${typographySize};
         ${flexRow}
         ${alignCenter}
         ${justifyCenter}
         ${flexWrap}
-        ${positionAbsolute}
         ${borderBox}
+        ${pointerEventsNone}
+        ${children || name ? positionAbsolute : positionRelative}
         color: ${white};
         min-height: ${dotSize}px;
         min-width: ${dotSize}px;
         background-color: ${dotColor};
         border-radius: ${dotSize / 2}px;
         padding: 0 4px;
-        z-index: 1;
+        transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+        ${invisible && 'transform: scale(0) translate(50%, -50%);'};
     `;
   const BadgeRoot = css`
         ${inlineFlex}
@@ -90,39 +126,27 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         ${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;
-            }
-        }
-        &.filled {
-            ${name && !children && `
-            color: ${white};
-            background-color: ${_color};
-            `}
-            .css-${BadgeNumber.name} {
-                top: ${dotPos}px;
-                right: ${dotPos}px;
-            }
+        height: max-content;
+        min-height: max-content;
+        width: max-content;
+        min-width: max-content;
+        color: ${white};
+        .css-${BadgeNumber.name} {
+            ${(children || name) && dotPos}
         }
     `;
-  const BadgeIcon = css`
-        ${overflowHidden}
-    `;
-
-  const _onClick = event => {
-    onClick && onClick(event);
-  };
-
   useEffect(() => {
     if (refs) refs(ref);
   }, []);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     let node = children;
 
@@ -131,39 +155,46 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         name: name,
         width: iconSize,
         height: iconSize,
-        color: 'currentColor',
-        viewBox: true
+        viewBox: true,
+        ...iconProps
       });
     }
 
     return jsx("div", {
       css: BadgeRoot,
       ref: ref,
-      className: ['DGN-UI-Badge', viewType, className].join(' ').trim().replace(/\s+/g, ' '),
+      className: ['DGN-UI-Badge', className].join(' ').trim().replace(/\s+/g, ' '),
       style: style,
-      onClick: _onClick,
       ...props
     }, jsx("span", {
-      css: BadgeIcon,
-      className: 'DGN-UI-Badge-Icon'
+      className: 'DGN-UI-Badge-Children'
     }, node), content !== undefined && jsx("span", {
       css: BadgeNumber,
-      className: 'DGN-UI-Badge-Dot',
-      style: badgeNumStyle
-    }, max && content > max ? max + '+' : content));
-  }, [content, name, size, children, max, viewType, color, style, className]);
+      className: 'DGN-UI-Badge-Dot'
+    }, max && content > max ? max + '+' : content === 0 && !showZero ? null : content));
+  }, [anchorOrigin, contentDirection, content, name, size, children, max, showZero, invisible, color, style, className]);
 }));
 Badge.defaultProps = {
-  viewType: 'filled',
-  // name: 'Notification',
   color: 'default',
   size: 'medium',
+  anchorOrigin: {
+    vertical: 'top',
+    horizontal: 'right'
+  },
   content: null,
   max: 99,
+  contentDirection: 'left',
+  showZero: false,
+  invisible: false,
   className: '',
   style: {}
 };
 Badge.propTypes = {
+  anchorOrigin: PropTypes.shape({
+    horizontal: PropTypes.oneOf(['left', 'right']),
+    vertical: PropTypes.oneOf(['top', 'bottom'])
+  }),
+
   /** the quantity is shown on the badge */
   content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
@@ -171,36 +202,45 @@ Badge.propTypes = {
   max: PropTypes.number,
 
   /** used to fill background for button */
-  viewType: PropTypes.oneOf(['text', 'filled']),
+  contentDirection: PropTypes.oneOf(['left', 'right']),
 
   /** background color of badge */
-  color: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']),
+  color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
 
-  /** name of icon in the icons store */
+  /** use name will replace children with ButtonIcon */
   name: PropTypes.string,
 
-  /** size of Badge */
+  /** other icon props when use prop name */
+  iconProps: PropTypes.object,
+
+  /** size of Badge
+   *
+   * * medium (dot 8px, typography p3)
+   * * large (button 10px, typography p2)
+   * * giant (button 12px, typography p1)
+   * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
 
-  /** className of badge */
+  /** Controls whether the badge is hidden when content is zero */
+  showZero: PropTypes.bool,
+
+  /** If true, the badge is invisible */
+  invisible: PropTypes.bool,
+
+  /** className of component */
   className: PropTypes.string,
 
-  /** style inline of badge */
+  /** style inline of component */
   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;
+export { Badge };
+export default OptionWrapper(Badge);