From 27a0c0112608c15aaf9539fb28973ba8c8762460 Mon Sep 17 00:00:00 2001 From: SunLxy <1011771396@qq.com> Date: Wed, 18 May 2022 20:39:12 +0800 Subject: [PATCH] =?UTF-8?q?refactor(badge):=E6=8B=86=E5=88=86badge?= =?UTF-8?q?=E6=A0=87=E8=AE=B0=E7=BB=84=E4=BB=B6(#826)=EF=BC=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- packages/react-badge/src/index.tsx | 16 +- packages/react-badge/src/style/index.ts | 236 +++++++++++------- theme/themeVariant.json5 | 9 +- .../src/components/Markdown/index.module.less | 8 + 5 files changed, 171 insertions(+), 100 deletions(-) diff --git a/package.json b/package.json index 796d80e244..431a988d85 100644 --- 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 index a1ecdeab18..44f0457fe5 100644 --- 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((props, ref) => { warpperProps.style = style || {}; } return ( - - {color && } + + {color && ( + + )} {children} - {count !== 0 && !color && {!dot && count && max && count > max ? `${max}+` : count}} - + {count !== 0 && !color && ( + + {!dot && count && max && count > max ? `${max}+` : count} + + )} + ); }); diff --git a/packages/react-badge/src/style/index.ts b/packages/react-badge/src/style/index.ts index 901e505d51..f22d0e84b8 100644 --- 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` + 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` +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` + ${(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` 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 index 6bbd01dde7..1b815fe03b 100644 --- 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 index 10e1e321f4..6a394b220c 100755 --- 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%; }