refactor(badge):拆分badge标记组件(#826)，

uiwjs · May 18, 2022 · 27a0c01 · 27a0c01
1 parent 46173a5
commit 27a0c01
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 100 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "watch:uiw": "lerna exec --scope uiw -- tsbb watch",
     "watch:react-menu": "lerna exec --scope @uiw/react-menu -- tsbb watch",
     "watch:css:react-menu": "lerna exec --scope @uiw/react-menu -- compile-less -d src -o esm --watch",
-    "watch": "lerna exec  --scope @uiw/react-back-top -- tsbb watch",
+    "watch": "lerna exec  --scope @uiw/react-badge -- tsbb watch",
     "//-----------": "//-----------",
     "build": "npm run b:uiw && npm run b:css && npm run b:css:dist",
     "start": "lerna exec --scope website -- npm run start",

diff --git a/packages/react-badge/src/index.tsx b/packages/react-badge/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { IProps, HTMLSpanProps } from '@uiw/utils';
-import Warp from './style';
+import { BadgeWarp, BadgeColorDot, BadgeSupCountDot } from './style';
 
 export interface BadgeProps extends IProps, HTMLSpanProps {
   color?: string;
@@ -45,10 +45,16 @@ export default React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
     warpperProps.style = style || {};
   }
   return (
-    <Warp className={cls} {...other} {...warpperProps} ref={ref}>
-      {color && <span className={`${prefixCls}-dot`} style={{ backgroundColor: color }} />}
+    <BadgeWarp className={cls} {...other} {...warpperProps} ref={ref}>
+      {color && (
+        <BadgeColorDot className={`${prefixCls}-dot`} processing={processing} style={{ backgroundColor: color }} />
+      )}
       {children}
-      {count !== 0 && !color && <sup {...supProps}>{!dot && count && max && count > max ? `${max}+` : count}</sup>}
-    </Warp>
+      {count !== 0 && !color && (
+        <BadgeSupCountDot {...supProps} dot={dot} nowrap={!children}>
+          {!dot && count && max && count > max ? `${max}+` : count}
+        </BadgeSupCountDot>
+      )}
+    </BadgeWarp>
   );
 });
diff --git a/packages/react-badge/src/style/index.ts b/packages/react-badge/src/style/index.ts
@@ -1,14 +1,7 @@
-import styled, { keyframes } from 'styled-components';
+import styled, { keyframes, css } from 'styled-components';
 import { getThemeVariantValue, ThemeVariantValueOptions } from '@uiw/utils';
 
-interface WarpProps extends ThemeVariantValueOptions {
-  defaultTheme?: {
-    boxShadowColorBadge: string;
-    colorBadge: string;
-    fontSizeDefault: string;
-    fontSizeSmall: string;
-  };
-}
+export interface BadgeWarpProps extends ThemeVariantValueOptions {}
 
 const keyframesStatusProcessing = keyframes`
   from {
@@ -18,95 +11,152 @@ const keyframesStatusProcessing = keyframes`
     transform: rotateZ(360deg);
   }
 `;
+export interface BadgeColorDotProps extends ThemeVariantValueOptions {
+  processing?: boolean;
+  defaultTheme?: {
+    backgroundColorBadgepPocessing: string;
+    widthBadgeColorDot: string;
+    topBadgeColorDot: string;
+    fontSizeDefault: string;
+    [k: string]: string | number;
+  };
+}
+/** 展示 color  **/
+export const BadgeColorDot = styled.span<BadgeColorDotProps>`
+  line-height: inherit;
+  vertical-align: baseline;
+  font-size: ${(props) => getThemeVariantValue(props, 'fontSizeDefault')};
+  margin: ${(props) =>
+    css`
+      ${getThemeVariantValue(props, 'marginVerticalBadgeColorDot')} ${getThemeVariantValue(
+        props,
+        'marginHorizontalBadgeColorDot',
+      )}
+    `};
+  width: ${(props) => getThemeVariantValue(props, 'widthBadgeColorDot')};
+  height: ${(props) => getThemeVariantValue(props, 'widthBadgeColorDot')};
+  display: inline-block;
+  border-radius: 50%;
+  vertical-align: middle;
+  position: relative;
+  top: ${(props) => getThemeVariantValue(props, 'topBadgeColorDot')};
+  ${(props) => {
+    if (props.processing) {
+      return css`
+        position: relative;
+        background-color: ${(props) => getThemeVariantValue(props, 'backgroundColorBadgepPocessing')};
+        &:after {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          background-color: inherit;
+          content: '';
+          -webkit-animation: ${keyframesStatusProcessing} 1.2s infinite ease-in-out;
+          animation: ${keyframesStatusProcessing} 1.2s infinite ease-in-out;
+        }
+      `;
+    }
+    return css``;
+  }}
+`;
 
-const Warp = styled.span<WarpProps>`
+export interface BadgeSupCountDotProps extends ThemeVariantValueOptions {
+  dot?: boolean;
+  nowrap?: boolean;
+  defaultTheme?: {
+    boxShadowColorBadge: string;
+    colorBadge: string;
+    fontSizeSmall: string;
+    backgroundBadgeCountDot: string;
+    [k: string]: string | number;
+  };
+}
+/** 展示 count  **/
+export const BadgeSupCountDot = styled.sup<BadgeSupCountDotProps>`
+  ${(props) =>
+    !props.dot &&
+    css`
+      position: absolute;
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%);
+      top: -10px;
+      height: 16px;
+      border-radius: 10px;
+      min-width: 16px;
+      background: ${(props) => getThemeVariantValue(props, 'backgroundBadgeCountDot')};
+      color: ${(props) => getThemeVariantValue(props, 'colorBadge')};
+      line-height: 16px;
+      text-align: center;
+      padding: 0 5px;
+      font-size: ${(props) => getThemeVariantValue(props, 'fontSizeSmall')};
+      white-space: nowrap;
+      -webkit-transform-origin: -10% center;
+      transform-origin: -10% center;
+      font-family: tahoma;
+      box-shadow: ${(props) => getThemeVariantValue(props, 'boxShadowBadgeCountDot')};
+    `}
+
+  ${(props) =>
+    props.nowrap &&
+    !props.dot &&
+    css`
+      top: auto;
+      display: block;
+      position: relative;
+      -webkit-transform: none !important;
+      transform: none !important;
+      overflow: hidden;
+    `}
+    ${(props) =>
+    props.dot &&
+    css`
+      position: absolute;
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%);
+      -webkit-transform-origin: 0 center;
+      transform-origin: 0 center;
+      overflow: hidden;
+      color: transparent;
+      top: -4px;
+      height: 6px;
+      width: 6px;
+      padding: 0;
+      border-radius: 100%;
+      background: ${(props) => getThemeVariantValue(props, 'backgroundBadgeCountDot')};
+      z-index: 10;
+      box-shadow: ${(props) => getThemeVariantValue(props, 'boxShadowBadgeCountDot')};
+    `}
+`;
+/** 最外层包裹 **/
+export const BadgeWarp = styled.span<BadgeWarpProps>`
   position: relative;
   display: inline-block;
   line-height: 1;
   vertical-align: middle;
-  & sup.w-badge-count {
-    position: absolute;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-    top: -10px;
-    height: 16px;
-    border-radius: 10px;
-    min-width: 16px;
-    background: #f04134;
-    color: ${(props) => getThemeVariantValue(props, 'colorBadge')};
-    line-height: 16px;
-    text-align: center;
-    padding: 0 5px;
-    font-size: ${(props) => props.theme.fontSizeSmall};
-    white-space: nowrap;
-    -webkit-transform-origin: -10% center;
-    transform-origin: -10% center;
-    font-family: tahoma;
-    box-shadow: 0 0 0 1px ${(props) => getThemeVariantValue(props, 'boxShadowColorBadge')};
-  }
-  &.nowrap sup.w-badge-count {
-    top: auto;
-    display: block;
-    position: relative;
-    -webkit-transform: none !important;
-    transform: none !important;
-    overflow: hidden;
-  }
-  & sup.dot {
-    position: absolute;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-    -webkit-transform-origin: 0 center;
-    transform-origin: 0 center;
-    overflow: hidden;
-    color: transparent;
-    top: -4px;
-    height: 6px;
-    width: 6px;
-    padding: 0;
-    border-radius: 100%;
-    background: #f04134;
-    z-index: 10;
-    box-shadow: 0 0 0 1px ${(props) => getThemeVariantValue(props, 'boxShadowColorBadge')};
-  }
-  .w-badge-dot {
-    line-height: inherit;
-    vertical-align: baseline;
-    font-size: ${(props) => getThemeVariantValue(props, 'fontSizeDefault')};
-    margin: 0 4px;
-    width: 6px;
-    height: 6px;
-    display: inline-block;
-    border-radius: 50%;
-    vertical-align: middle;
-    position: relative;
-    top: -1px;
-  }
-  .w-badge-processing .w-badge-dot {
-    position: relative;
-    background-color: '#007bff';
-  }
-  .w-badge-processing .w-badge-dot:after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: inherit;
-    content: '';
-    -webkit-animation: ${keyframesStatusProcessing} 1.2s infinite ease-in-out;
-    animation: ${keyframesStatusProcessing} 1.2s infinite ease-in-out;
-  }
 `;
-
-Warp.defaultProps = {
-  defaultTheme: {
-    boxShadowColorBadge: '#fff',
-    colorBadge: '#fff',
-    fontSizeDefault: '14px',
-    fontSizeSmall: '12px',
-  },
+export const BadgeColorDotDefaultTheme = {
+  marginVerticalBadgeColorDot: '0px',
+  marginHorizontalBadgeColorDot: '4px',
+  topBadgeColorDot: '-1px',
+  widthBadgeColorDot: '6px',
+  backgroundColorBadgepPocessing: '#007bff',
+  fontSizeDefault: '14px',
+};
+BadgeColorDot.defaultProps = {
+  defaultTheme: BadgeColorDotDefaultTheme,
+};
+export const BadgeSupCountDotDefaultTheme = {
+  backgroundBadgeCountDot: '#f04134',
+  boxShadowColorBadge: '#fff',
+  colorBadge: '#fff',
+  fontSizeSmall: '12px',
+  boxShadowBadgeCountDot: '0 0 0 1px #fff',
+};
+BadgeSupCountDot.defaultProps = {
+  defaultTheme: BadgeSupCountDotDefaultTheme,
 };
 
-export default Warp;
+BadgeWarp.defaultProps = {};
diff --git a/theme/themeVariant.json5 b/theme/themeVariant.json5
@@ -34,8 +34,15 @@
   widthAvatarLarge: '40px',
   borderRadiusDefault: '3px',
   // --------------------------badge 标记部分---------------------------------------
-  boxShadowColorBadge: '#fff',
   colorBadge: '#fff',
+  marginVerticalBadgeColorDot: '0px',
+  marginHorizontalBadgeColorDot: '4px',
+  topBadgeColorDot: '-1px',
+  widthBadgeColorDot: '6px',
+  backgroundColorBadgepPocessing: '#007bff',
+  backgroundBadgeCountDot: '#f04134',
+  boxShadowColorBadge: '#fff',
+  boxShadowBadgeCountDot: '0 0 0 1px #fff',
   // ---------------------------breadcrumb 面包屑 ---------------------------------
   colorBreadcrumb: '#6e6e6e',
 

diff --git a/website/src/components/Markdown/index.module.less b/website/src/components/Markdown/index.module.less
@@ -34,6 +34,14 @@
     line-height: 16px;
     position: absolute;
   }
+  :global(.w-badge .dot) {
+    line-height: 16px;
+    position: absolute;
+  }
+  :global(.w-badge.nowrap.w-badge-status .w-badge-count) {
+    position: relative;
+    line-height: 16px;
+  }
   :global(table) {
     width: 100%;
   }