feat(sign): add offset prop (#623)

affects: @gio-design/components, website

Co-authored-by: Jack <panjie@growingio.com>

packages/components/src/components/sign/Number.tsx

@@ -1,6 +1,53 @@
 import React from 'react';
 import classnames from 'classnames';
-import { ISignNumberProps } from './interface';
+import { ISignNumberProps, TPlacement } from './interface';
+
+const getOffsetByPlacement = (placement: TPlacement, offset: [number, number]) => {
+  switch (placement) {
+    case 'top':
+      return {
+        left: `calc(50% + ${offset[0]}px)`,
+        top: `-${offset[1]}px`,
+      };
+    case 'right':
+      return {
+        right: `-${offset[0]}px`,
+        top: `calc(50% - ${offset[1]}px)`,
+      };
+    case 'bottom':
+      return {
+        left: `calc(50% + ${offset[0]}px)`,
+        bottom: `${offset[1]}px`,
+      };
+    case 'left':
+      return {
+        left: `${offset[0]}px`,
+        top: `calc(50% - ${offset[1]}px)`,
+      };
+    case 'leftTop':
+      return {
+        left: `${offset[0]}px`,
+        top: `-${offset[1]}px`,
+      };
+    case 'leftBottom':
+      return {
+        left: `${offset[0]}px`,
+        bottom: `${offset[1]}px`,
+      };
+    case 'rightTop':
+      return {
+        right: `-${offset[0]}px`,
+        top: `-${offset[1]}px`,
+      };
+    case 'rightBottom':
+      return {
+        right: `-${offset[0]}px`,
+        bottom: `${offset[1]}px`,
+      };
+    default:
+      return {};
+  }
+};
 
 const Number: React.FC<ISignNumberProps> = ({
   prefixCls,
@@ -10,6 +57,8 @@ const Number: React.FC<ISignNumberProps> = ({
   showZero,
   visible,
   magnitude,
+  offset = [0, 0],
+  placement = 'rightTop',
 }: ISignNumberProps) => {
   const displayCount = count >= magnitude ? `${magnitude - 1}+` : count;
   const isZero = count === 0 || !count;
@@ -19,8 +68,13 @@ const Number: React.FC<ISignNumberProps> = ({
     [`${prefixCls}--hide`]: isHide,
   });
 
+  const numberStyle: React.CSSProperties = {
+    ...style,
+    ...getOffsetByPlacement(placement, offset),
+  };
+
   return (
-    <span className={numberCls} style={style}>
+    <span className={numberCls} style={numberStyle}>
       {displayCount}
     </span>
   );

packages/components/src/components/sign/Sign.tsx

@@ -22,11 +22,12 @@ const Sign: React.FC<ISignProps> = ({
   status = 'default',
   size = 'middle',
   children,
+  offset,
 }: ISignProps) => {
   const prefix = usePrefixCls('sign', customPrefixCls);
   const noChildren = Children.count(children) === 0;
 
-  const cls = classnames(className, prefix, {
+  const cls = classnames(className, prefix, `${prefix}__${variant}-wrapper`, {
     [`${prefix}--no-children`]: noChildren,
   });
 
@@ -48,6 +49,8 @@ const Sign: React.FC<ISignProps> = ({
           showZero={showZero}
           magnitude={magnitude}
           visible={visible}
+          offset={offset}
+          placement={placement}
         />
       )}
       {children}

packages/components/src/components/sign/__tests__/__snapshots__/sign.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Testing Sign should render dot sign correctly 1`] = `
 <span
-  className="gio-customized-sign gio-sign"
+  className="gio-customized-sign gio-sign gio-sign__dot-wrapper"
 >
   <span
     className="gio-sign__dot gio-sign--right-top gio-sign__dot--default gio-sign__dot--middle"
@@ -15,10 +15,16 @@ exports[`Testing Sign should render dot sign correctly 1`] = `
 
 exports[`Testing Sign should render number sign correctly 1`] = `
 <span
-  className="gio-customized-sign gio-sign"
+  className="gio-customized-sign gio-sign gio-sign__number-wrapper"
 >
   <span
     className="gio-sign__number gio-sign--right-top"
+    style={
+      Object {
+        "right": "-0px",
+        "top": "-0px",
+      }
+    }
   >
     99+
   </span>

packages/components/src/components/sign/interface.ts

@@ -25,6 +25,15 @@ export interface ISignNumberProps extends ISignCommonProps {
   showZero?: boolean;
   // 最大显示数量级
   magnitude: TMagnitude;
+  /**
+   * 设置状态点的位置偏移
+   */
+  offset?: [number, number];
+
+  /**
+   *
+   */
+  placement?: TPlacement;
 }
 
 export interface ISignDotProps extends ISignCommonProps {
@@ -39,8 +48,4 @@ export interface ISignProps extends ISignNumberProps, ISignDotProps {
    * 设置 Sign 的变体类型，默认 number
    */
   variant?: TSignVariant;
-  /**
-   *
-   */
-  placement?: TPlacement;
 }

packages/components/src/components/sign/style/index.less

@@ -11,7 +11,9 @@
   .place();
   .background.default();
   border-radius: @radius-border-circle;
-
+  &-wrapper {
+    color: @palette-black-6;
+  }
   // status
   &--normal {
     .background.normal();
@@ -55,7 +57,6 @@
 .@{sign-prefix-cls} {
   position: relative;
   display: inline-block;
-  color: @palette-black-6;
 
   &--no-children {
     .@{sign-dot},

packages/website/src/components/basic/sign/demos/sign.tsx

@@ -7,7 +7,7 @@ import './demo.less';
 export default () => (
   <>
     <div className="demo-half-line">
-      <Sign count={4} magnitude={10}>
+      <Sign count={4} magnitude={10} placement="leftBottom" offset={[32, 32]}>
         <span className="demo-placeholder" />
       </Sign>
     </div>

packages/website/src/components/basic/sign/index.zh-CN.md

@@ -36,11 +36,12 @@ group:
 
 ### variant='number'时生效的 Props
 
-| 参数      | 说明                          | 类型      | 默认值 |
-| --------- | ----------------------------- | --------- | ------ |
-| count     | Sign 中显示的数字             | number    | 0      |
-| showZero  | 当 count 为 0 时是否显示 Sign | boolean   | false  |
-| magnitude | Sign 中数字最大数量级         | 10 \| 100 | 100    |
+| 参数      | 说明                                   | 类型             | 默认值 |
+| --------- | -------------------------------------- | ---------------- | ------ |
+| count     | Sign 中显示的数字                      | number           | 0      |
+| showZero  | 当 count 为 0 时是否显示 Sign          | boolean          | false  |
+| magnitude | Sign 中数字最大数量级                  | 10 \| 100        | 100    |
+| offset    | 设置状态点的位置偏移,格式为[left, top] | [number, number] | [0, 0] |
 
 ### variant='dot'时生效的 Props