feat(Badge): Badge 组件新增 position 属性 (#65)

* feat(Badge): Badge 组件新增 position 属性

* test(Badge): 更新依赖 Badge 组件的 Snapshots

Author: windole

packages/rc-cli/src/commands/jest.ts

@@ -24,7 +24,7 @@ export async function test(command: Config.Argv) {
     debug: command.debug,
     coverage: command.coverage,
     colors: command.colors,
-    updateSnapshot: command.u,
+    updateSnapshot: command.updateSnapshot,
     // make jest tests faster
     // see: https://ivantanev.com/make-jest-faster/
     maxWorkers: '50%',

packages/rc-ui-lib/jest.config.js

@@ -10,4 +10,5 @@ module.exports = {
     '!**/**/PropsType.ts',
     '!**/test/**',
   ],
+  // testMatch: ['**/badge/__test__/**/*.[jt]s?(x)'],
 };

packages/rc-ui-lib/package.json

@@ -20,7 +20,7 @@
     "build:site": "rc-cli build-site",
     "release:site": "pnpm build:site && gh-pages -d site",
     "prepack": "pnpm build",
-    "test": "rc-cli test --u --colors --coverage",
+    "test": "rc-cli test --colors --coverage",
     "test:coverage": "open tests/coverage/index.html"
   },
   "author": "rancui",
@@ -82,4 +82,4 @@
     "lib/**/style/*",
     "*.less"
   ]
-}
+}

packages/rc-ui-lib/src/action-bar/__test__/__snapshots__/index.spec.tsx.snap

@@ -180,7 +180,7 @@ exports[`ActionBar should render correctly when using badge prop in ActionBarIco
         class="rc-badge__wrapper rc-action-bar-icon__icon van-icon van-icon-chat-o"
       >
         <div
-          class="rc-badge rc-badge--dot rc-badge--fixed"
+          class="rc-badge rc-badge--top-right rc-badge--dot rc-badge--fixed"
         />
       </div>
       客服
@@ -194,7 +194,7 @@ exports[`ActionBar should render correctly when using badge prop in ActionBarIco
         class="rc-badge__wrapper rc-action-bar-icon__icon van-icon van-icon-cart-o"
       >
         <div
-          class="rc-badge rc-badge--fixed"
+          class="rc-badge rc-badge--top-right rc-badge--fixed"
         >
           5
         </div>

packages/rc-ui-lib/src/action-sheet/__test__/__snapshots__/index.spec.tsx.snap

@@ -11,6 +11,7 @@ Array [
     <Badge
       className="rc-action-sheet__close van-icon van-icon-success"
       onClick={[Function]}
+      position="top-right"
       showZero={true}
       style={
         Object {
@@ -35,6 +36,7 @@ Array [
   <Badge
     className="rc-action-sheet__close van-icon van-icon-success"
     onClick={[Function]}
+    position="top-right"
     showZero={true}
     style={
       Object {

packages/rc-ui-lib/src/badge/Badge.tsx

@@ -12,15 +12,12 @@ const Badge: React.FC<BadgeProps> = (props) => {
   const [bem] = createNamespace('badge', prefixCls);
 
   const hasContent = () => {
-    // if (props.content) {
-    //   return true;
-    // }
     return isDef(content) && content !== '' && (showZero || +content !== 0);
   };
 
   const renderContent = () => {
     if (!dot && hasContent()) {
-      if (isDef(max) && isNumeric(content?.toString()) && +content > max) {
+      if (isDef(max) && isNumeric(content?.toString()) && +content > +max) {
         return `${max}+`;
       }
 
@@ -29,6 +26,9 @@ const Badge: React.FC<BadgeProps> = (props) => {
     return null;
   };
 
+  const getOffsetWithMinusString = (val: string) =>
+    val.startsWith('-') ? val.replace('-', '') : `-${val}`;
+
   const renderBadge = () => {
     if (hasContent() || props.dot) {
       let style: CSSProperties = {
@@ -37,13 +37,20 @@ const Badge: React.FC<BadgeProps> = (props) => {
 
       if (props.offset) {
         const [x, y] = props.offset;
+        const { position } = props;
+        const [offsetY, offsetX] = position.split('-') as ['top' | 'bottom', 'left' | 'right'];
 
         if (props.children) {
-          style.top = addUnit(y);
+          if (typeof y === 'number') {
+            style[offsetY] = addUnit(offsetY === 'top' ? y : -y);
+          } else {
+            style[offsetY] = offsetY === 'top' ? addUnit(y) : getOffsetWithMinusString(y);
+          }
+
           if (typeof x === 'number') {
-            style.right = addUnit(-x);
+            style[offsetX] = addUnit(offsetX === 'left' ? x : -x);
           } else {
-            style.right = x.startsWith('-') ? x.replace('-', '') : `-${x}`;
+            style[offsetX] = offsetX === 'left' ? addUnit(x) : getOffsetWithMinusString(x);
           }
         } else {
           style.marginTop = addUnit(y);
@@ -60,7 +67,7 @@ const Badge: React.FC<BadgeProps> = (props) => {
             {
               [props.className]: props.className && !props.children,
             },
-            bem({ dot: props.dot, fixed: !!props.children }),
+            bem([props.position, { dot: props.dot, fixed: !!props.children }]),
           )}
           style={style}
         >
@@ -91,6 +98,7 @@ const Badge: React.FC<BadgeProps> = (props) => {
 Badge.defaultProps = {
   tag: 'div',
   showZero: true,
+  position: 'top-right',
 };
 
 export default Badge;

packages/rc-ui-lib/src/badge/PropsType.ts

@@ -4,6 +4,8 @@ import { BaseTypeProps } from '../utils';
 /** HTML 标签	 */
 export type HtmlTagType = keyof HTMLElementTagNameMap;
 
+export type BadgePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
 export interface BadgeProps extends BaseTypeProps {
   /** 徽标内容 */
   content?: number | string | React.ReactNode;
@@ -24,6 +26,7 @@ export interface BadgeProps extends BaseTypeProps {
    * @default div
    */
   tag?: HtmlTagType;
+  position?: BadgePosition;
   /** 自元素 */
   children?: React.ReactNode;
   onClick?: (e: React.MouseEvent) => void;
@@ -34,3 +37,16 @@ export type BadgeSettingProps = Omit<
   BadgeProps,
   'children' | 'tag' | 'onClick' | 'style' | 'className'
 >;
+
+export type BadgeThemeVars = {
+  badgeSize?: string;
+  badgeColor?: string;
+  badgePadding?: string;
+  badgeFontSize?: string;
+  badgeFontWeight?: string;
+  badgeBorderWidth?: string;
+  badgeBackground?: string;
+  badgeDotColor?: string;
+  badgeDotSize?: string;
+  badgeFont?: string;
+};

packages/rc-ui-lib/src/badge/README.md

@@ -18,16 +18,16 @@ import { Badge } from 'rc-ui-lib';
 
 ```jsx
 <Badge content="5">
-  <div class="child" />
+  <div className="child" />
 </Badge>
 <Badge content="10">
-  <div class="child" />
+  <div className="child" />
 </Badge>
 <Badge content="Hot">
-  <div class="child" />
+  <div className="child" />
 </Badge>
 <Badge dot>
-  <div class="child" />
+  <div className="child" />
 </Badge>
 
 <style>
@@ -46,13 +46,13 @@ import { Badge } from 'rc-ui-lib';
 
 ```jsx
 <Badge content="20" max="9">
-  <div class="child" />
+  <div className="child" />
 </Badge>
 <Badge content="50" max="20">
-  <div class="child" />
+  <div className="child" />
 </Badge>
 <Badge content="200" max="99">
-  <div class="child" />
+  <div className="child" />
 </Badge>
 ```
 
@@ -62,21 +62,21 @@ import { Badge } from 'rc-ui-lib';
 
 ```jsx
 <Badge content="5" color="#1989fa">
-  <div class="child" />
+  <div className="child" />
 </Badge>
 <Badge content="10" color="#1989fa">
-  <div class="child" />
+  <div className="child" />
 </Badge>
 <Badge dot color="#1989fa">
-  <div class="child" />
+  <div className="child" />
 </Badge>
 ```
 
 ### 自定义徽标内容
 
 ```jsx
 <Badge content={<Icon name="success" className="badge-icon" />}>
-  <div class="child" />
+  <div className="child" />
 </Badge>
 ```
 
@@ -87,6 +87,22 @@ import { Badge } from 'rc-ui-lib';
   line-height: 16px;
 }
 ```
+### 自定义徽标位置
+
+通过 `position` 属性来设置徽标的位置。
+
+```jsx
+<Badge content="10" position="top-left">
+  <div className="child" />
+</Badge>
+<Badge content="10" position="bottom-left">
+  <div className="child" />
+</Badge>
+<Badge content="10" position="bottom-right">
+  <div className="child" />
+</Badge>
+```
+
 
 ### 独立展示
 
@@ -110,13 +126,21 @@ import { Badge } from 'rc-ui-lib';
 | max | 最大值，超过最大值会显示 `{max}+`，仅当 content 为数字时有效 | _number \| string_ | - |
 | offset | 设置徽标的偏移量，数组的两项分别对应水平和垂直方向的偏移量，默认单位为 `px` | _[number \| string, number \| string]_ | - |
 | showZero | 当 content 为数字 0 时，是否展示徽标 | _boolean_ | `true` |
+| position | 徽标位置，可选值为 `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
 
 ### 事件
 
 | 事件名  | 说明       | 回调参数       |
 | ------- | ---------- | -------------- |
 | onClick | 点击时触发 | _event: Event_ |
 
+### 类型定义
+
+组件导出以下类型定义：
+
+```ts
+import type { BadgeProps, BadgePosition, BadgeThemeVars } from 'rc-ui-lib';
+
 ## 主题定制
 
 ### 样式变量