From 7f189d56e5eb21d288ecfdd2a7d2bce5e0e5fa6b Mon Sep 17 00:00:00 2001 From: Wuxh Date: Fri, 6 Jan 2023 11:06:46 +0800 Subject: [PATCH] refactor: merge preset colors (#39742) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: remove redundant code * feat(style): add preset colour style generation method (cherry picked from commit 1266e42ba27accb48a6544e3eddaa4a94daef00c) * feat: uniform preset colour generation css selector method (cherry picked from commit 5af87e8d5ffcfd23e755946167f200c0565f8222) * chore: merge preset colors (cherry picked from commit 05040dfb703f60a3ea1715326748c508acbf41a6) * chore: update (cherry picked from commit 241b40a1361469487a6a3e8f1ad07a25d250463d) * chore: remove Badge preset inverse colors * chore: remove fix 删除的这部分其实一个 Bug，但是为了给 PR 减负（尽可能单一， 后面新开一个 PR 来修复这个问题 * suggestions accepted Update components/style/presetColor.tsx Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: MadCcc <1075746765@qq.com> --- components/_util/colors.ts | 41 +++++++++++++--------- components/badge/Ribbon.tsx | 4 +-- components/badge/index.tsx | 18 ++++++---- components/badge/style/index.ts | 38 ++++++++------------ components/badge/utils.ts | 6 ---- components/style/index.ts | 1 + components/style/presetColor.tsx | 35 ++++++++++++++++++ components/tag/index.tsx | 19 +++------- components/tag/style/index.ts | 38 +++++++++----------- components/theme/interface/index.ts | 2 +- components/theme/interface/presetColors.ts | 2 +- components/theme/internal.ts | 2 ++ components/tooltip/style/index.ts | 40 +++++++-------------- components/tooltip/util.ts | 10 +++--- 14 files changed, 130 insertions(+), 126 deletions(-) delete mode 100644 components/badge/utils.ts create mode 100644 components/style/presetColor.tsx diff --git a/components/_util/colors.ts b/components/_util/colors.ts index 8a3a6714ac..5c21c663cc 100644 --- a/components/_util/colors.ts +++ b/components/_util/colors.ts @@ -1,3 +1,9 @@ +import type { PresetColorKey } from '../theme/interface'; +import { PresetColors } from '../theme/interface'; + +type InverseColor = `${PresetColorKey}-inverse`; +const inverseColors = PresetColors.map((color) => `${color}-inverse`); + export const PresetStatusColorTypes = [ 'success', 'processing', @@ -6,22 +12,23 @@ export const PresetStatusColorTypes = [ 'warning', ] as const; -export const PresetColorTypes = [ - 'pink', - 'red', - 'yellow', - 'orange', - 'cyan', - 'green', - 'blue', - 'purple', - 'geekblue', - 'magenta', - 'volcano', - 'gold', - 'lime', -] as const; - -export type PresetColorType = typeof PresetColorTypes[number]; +export type PresetColorType = PresetColorKey | InverseColor; export type PresetStatusColorType = typeof PresetStatusColorTypes[number]; + +/** + * determine if the color keyword belongs to the `Ant Design` {@link PresetColors}. + * @param color color to be judged + * @param includeInverse whether to include reversed colors + */ +export function isPresetColor(color?: any, includeInverse = true) { + if (includeInverse) { + return [...inverseColors, ...PresetColors].includes(color); + } + + return PresetColors.includes(color); +} + +export function isPresetStatusColor(color?: any): color is PresetStatusColorType { + return PresetStatusColorTypes.includes(color); +} diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx index 08e6b12fc7..3fce7008bc 100644 --- a/components/badge/Ribbon.tsx +++ b/components/badge/Ribbon.tsx @@ -4,7 +4,7 @@ import { ConfigContext } from '../config-provider'; import type { PresetColorType } from '../_util/colors'; import type { LiteralUnion } from '../_util/type'; import useStyle from './style'; -import { isPresetColor } from './utils'; +import { isPresetColor } from '../_util/colors'; type RibbonPlacement = 'start' | 'end'; @@ -29,7 +29,7 @@ const Ribbon: React.FC = function Ribbon({ }) { const { getPrefixCls, direction } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('ribbon', customizePrefixCls); - const colorInPreset = isPresetColor(color); + const colorInPreset = isPresetColor(color, false); const ribbonCls = classNames( prefixCls, `${prefixCls}-placement-${placement}`, diff --git a/components/badge/index.tsx b/components/badge/index.tsx index d61f9e6549..28395bab51 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -3,13 +3,14 @@ import CSSMotion from 'rc-motion'; import * as React from 'react'; import { useMemo, useRef } from 'react'; import { ConfigContext } from '../config-provider'; -import type { PresetColorType, PresetStatusColorType } from '../_util/colors'; +import type { PresetStatusColorType } from '../_util/colors'; import { cloneElement } from '../_util/reactNode'; import type { LiteralUnion } from '../_util/type'; import Ribbon from './Ribbon'; import ScrollNumber from './ScrollNumber'; import useStyle from './style'; -import { isPresetColor } from './utils'; +import { isPresetColor } from '../_util/colors'; +import type { PresetColorKey } from '../theme/internal'; export type { ScrollNumberProps } from './ScrollNumber'; @@ -30,7 +31,7 @@ export interface BadgeProps { scrollNumberPrefixCls?: string; className?: string; status?: PresetStatusColorType; - color?: LiteralUnion; + color?: LiteralUnion; text?: React.ReactNode; size?: 'default' | 'small'; offset?: [number | string, number | string]; @@ -144,15 +145,18 @@ const Badge: CompoundedComponent = ({ }, })); + // InternalColor + const isInternalColor = isPresetColor(color, false); + // Shared styles const statusCls = classNames({ [`${prefixCls}-status-dot`]: hasStatus, [`${prefixCls}-status-${status}`]: !!status, - [`${prefixCls}-status-${color}`]: isPresetColor(color), + [`${prefixCls}-status-${color}`]: isInternalColor, }); const statusStyle: React.CSSProperties = {}; - if (color && !isPresetColor(color)) { + if (color && !isInternalColor) { statusStyle.color = color; statusStyle.background = color; } @@ -207,11 +211,11 @@ const Badge: CompoundedComponent = ({ [`${prefixCls}-multiple-words`]: !isDot && displayCount && displayCount.toString().length > 1, [`${prefixCls}-status-${status}`]: !!status, - [`${prefixCls}-status-${color}`]: isPresetColor(color), + [`${prefixCls}-status-${color}`]: isInternalColor, }); let scrollNumberStyle: React.CSSProperties = { ...mergedStyle }; - if (color && !isPresetColor(color)) { + if (color && !isInternalColor) { scrollNumberStyle = scrollNumberStyle || {}; scrollNumberStyle.background = color; } diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts index 89b51f4835..131da83c4c 100644 --- a/components/badge/style/index.ts +++ b/components/badge/style/index.ts @@ -1,8 +1,8 @@ import type { CSSObject } from '@ant-design/cssinjs'; import { Keyframes } from '@ant-design/cssinjs'; -import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/internal'; -import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal'; -import { resetComponent } from '../../style'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { genPresetColor, resetComponent } from '../../style'; interface BadgeToken extends FullToken<'Badge'> { badgeFontHeight: number; @@ -73,28 +73,18 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO const ribbonPrefixCls = `${antCls}-ribbon`; const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`; - const statusPreset = PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => { - const darkColor = token[`${colorKey}-6`]; - return { - ...prev, - [`${componentCls}-status-${colorKey}`]: { - background: darkColor, - }, - }; - }, {} as CSSObject); - const statusRibbonPreset = PresetColors.reduce( - (prev: CSSObject, colorKey: keyof PresetColorType) => { - const darkColor = token[`${colorKey}-6`]; - return { - ...prev, - [`&${ribbonPrefixCls}-color-${colorKey}`]: { - background: darkColor, - color: darkColor, - }, - }; + const statusPreset = genPresetColor(token, (colorKey, { darkColor }) => ({ + [`${componentCls}-status-${colorKey}`]: { + background: darkColor, + }, + })); + + const statusRibbonPreset = genPresetColor(token, (colorKey, { darkColor }) => ({ + [`&${ribbonPrefixCls}-color-${colorKey}`]: { + background: darkColor, + color: darkColor, }, - {} as CSSObject, - ); + })); return { [componentCls]: { diff --git a/components/badge/utils.ts b/components/badge/utils.ts deleted file mode 100644 index bb495314e7..0000000000 --- a/components/badge/utils.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { PresetColorTypes } from '../_util/colors'; - -// eslint-disable-next-line import/prefer-default-export -export function isPresetColor(color?: string): boolean { - return PresetColorTypes.includes(color as any); -} diff --git a/components/style/index.ts b/components/style/index.ts index 743ac86d50..7302169281 100644 --- a/components/style/index.ts +++ b/components/style/index.ts @@ -4,6 +4,7 @@ import type { DerivativeToken } from '../theme/internal'; export { operationUnit } from './operationUnit'; export { roundedArrow } from './roundedArrow'; +export { genPresetColor } from './presetColor'; export const textEllipsis: CSSObject = { overflow: 'hidden', diff --git a/components/style/presetColor.tsx b/components/style/presetColor.tsx new file mode 100644 index 0000000000..0704bd4f8e --- /dev/null +++ b/components/style/presetColor.tsx @@ -0,0 +1,35 @@ +/* eslint-disable import/prefer-default-export */ +import type { CSSObject } from '@ant-design/cssinjs'; +import type { AliasToken, PresetColorKey } from '../theme/internal'; +import { PresetColors } from '../theme/internal'; +import type { TokenWithCommonCls } from '../theme/util/genComponentStyleHook'; + +interface CalcColor { + /** token[`${colorKey}-1`] */ + lightColor: string; + /** token[`${colorKey}-3`] */ + lightBorderColor: string; + /** token[`${colorKey}-6`] */ + darkColor: string; + /** token[`${colorKey}-7`] */ + textColor: string; +} + +type GenCSS = (colorKey: PresetColorKey, calcColor: CalcColor) => CSSObject; + +export function genPresetColor>( + token: Token, + genCss: GenCSS, +): CSSObject { + return PresetColors.reduce((prev: CSSObject, colorKey: PresetColorKey) => { + const lightColor = token[`${colorKey}-1`]; + const lightBorderColor = token[`${colorKey}-3`]; + const darkColor = token[`${colorKey}-6`]; + const textColor = token[`${colorKey}-7`]; + + return { + ...prev, + ...genCss(colorKey, { lightColor, lightBorderColor, darkColor, textColor }), + }; + }, {} as CSSObject); +} diff --git a/components/tag/index.tsx b/components/tag/index.tsx index c543d886af..09997d5e0d 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import * as React from 'react'; import { ConfigContext } from '../config-provider'; import type { PresetColorType, PresetStatusColorType } from '../_util/colors'; -import { PresetColorTypes, PresetStatusColorTypes } from '../_util/colors'; +import { isPresetColor, isPresetStatusColor } from '../_util/colors'; import Wave from '../_util/wave'; import warning from '../_util/warning'; import CheckableTag from './CheckableTag'; @@ -25,9 +25,6 @@ export interface TagProps extends React.HTMLAttributes { icon?: React.ReactNode; } -const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`); -const PresetStatusColorRegex = new RegExp(`^(${PresetStatusColorTypes.join('|')})$`); - export interface TagType extends React.ForwardRefExoticComponent> { CheckableTag: typeof CheckableTag; @@ -66,19 +63,13 @@ const InternalTag: React.ForwardRefRenderFunction = ( } }, [props.visible]); - const isPresetColor = (): boolean => { - if (!color) { - return false; - } - return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color); - }; + const isInternalColor = isPresetColor(color) || isPresetStatusColor(color); const tagStyle = { - backgroundColor: color && !isPresetColor() ? color : undefined, + backgroundColor: color && !isInternalColor ? color : undefined, ...style, }; - const presetColor = isPresetColor(); const prefixCls = getPrefixCls('tag', customizePrefixCls); // Style const [wrapSSR, hashId] = useStyle(prefixCls); @@ -86,8 +77,8 @@ const InternalTag: React.ForwardRefRenderFunction = ( const tagClassName = classNames( prefixCls, { - [`${prefixCls}-${color}`]: presetColor, - [`${prefixCls}-has-color`]: color && !presetColor, + [`${prefixCls}-${color}`]: isInternalColor, + [`${prefixCls}-has-color`]: color && !isInternalColor, [`${prefixCls}-hidden`]: !visible, [`${prefixCls}-rtl`]: direction === 'rtl', }, diff --git a/components/tag/style/index.ts b/components/tag/style/index.ts index 649a15cd6a..16379c4891 100644 --- a/components/tag/style/index.ts +++ b/components/tag/style/index.ts @@ -1,9 +1,9 @@ -import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; +import type { CSSInterpolation } from '@ant-design/cssinjs'; import type React from 'react'; -import type { FullToken, PresetColorType } from '../../theme/internal'; -import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal'; +import type { FullToken } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import capitalize from '../../_util/capitalize'; -import { resetComponent } from '../../style'; +import { genPresetColor, resetComponent } from '../../style'; export interface ComponentToken {} @@ -35,27 +35,21 @@ const genTagStatusStyle = ( }; }; -// FIXME: special preset colors -const genTagColorStyle = (token: TagToken): CSSInterpolation => - PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => { - const lightColor = token[`${colorKey}-1`]; - const lightBorderColor = token[`${colorKey}-3`]; - const darkColor = token[`${colorKey}-6`]; - const textColor = token[`${colorKey}-7`]; - return { - ...prev, - [`${token.componentCls}-${colorKey}`]: { - color: textColor, - background: lightColor, - borderColor: lightBorderColor, - }, - [`${token.componentCls}-${colorKey}-inverse`]: { +const genPresetStyle = (token: TagToken) => + genPresetColor(token, (colorKey, { textColor, lightBorderColor, lightColor, darkColor }) => ({ + [`${token.componentCls}-${colorKey}`]: { + color: textColor, + background: lightColor, + borderColor: lightBorderColor, + + // Inverse color + '&-inverse': { color: token.colorTextLightSolid, background: darkColor, borderColor: darkColor, }, - }; - }, {} as CSSObject); + }, + })); const genBaseStyle = (token: TagToken): CSSInterpolation => { const { paddingXXS, lineWidth, tagPaddingHorizontal } = token; @@ -168,7 +162,7 @@ export default genComponentStyleHook('Tag', (token) => { return [ genBaseStyle(tagToken), - genTagColorStyle(tagToken), + genPresetStyle(tagToken), genTagStatusStyle(tagToken, 'success', 'Success'), genTagStatusStyle(tagToken, 'processing', 'Info'), genTagStatusStyle(tagToken, 'error', 'Error'), diff --git a/components/theme/interface/index.ts b/components/theme/interface/index.ts index 4c168b9fb2..a63b53ca28 100644 --- a/components/theme/interface/index.ts +++ b/components/theme/interface/index.ts @@ -9,7 +9,7 @@ export type OverrideToken = { export type GlobalToken = AliasToken & ComponentTokenMap; export { PresetColors } from './presetColors'; -export type { PresetColorType, ColorPalettes } from './presetColors'; +export type { PresetColorType, ColorPalettes, PresetColorKey } from './presetColors'; export type { SeedToken } from './seeds'; export type { MapToken, diff --git a/components/theme/interface/presetColors.ts b/components/theme/interface/presetColors.ts index 3f1fc59676..2cff21512c 100644 --- a/components/theme/interface/presetColors.ts +++ b/components/theme/interface/presetColors.ts @@ -14,7 +14,7 @@ export const PresetColors = [ 'gold', ] as const; -type PresetColorKey = typeof PresetColors[number]; +export type PresetColorKey = typeof PresetColors[number]; export type PresetColorType = Record; diff --git a/components/theme/internal.ts b/components/theme/internal.ts index 7c04b5f170..24f378a518 100644 --- a/components/theme/internal.ts +++ b/components/theme/internal.ts @@ -8,6 +8,7 @@ import type { MapToken, OverrideToken, PresetColorType, + PresetColorKey, SeedToken, } from './interface'; import { PresetColors } from './interface'; @@ -35,6 +36,7 @@ export type { SeedToken, AliasToken, PresetColorType, + PresetColorKey, // FIXME: Remove this type AliasToken as DerivativeToken, FullToken, diff --git a/components/tooltip/style/index.ts b/components/tooltip/style/index.ts index 65f932cb26..5304ba7cbf 100644 --- a/components/tooltip/style/index.ts +++ b/components/tooltip/style/index.ts @@ -1,13 +1,7 @@ -import type { CSSObject } from '@ant-design/cssinjs'; import { initZoomMotion } from '../../style/motion'; -import type { - FullToken, - GenerateStyle, - PresetColorType, - UseComponentStyleResult, -} from '../../theme/internal'; -import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal'; -import { resetComponent } from '../../style'; +import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { genPresetColor, resetComponent } from '../../style'; import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow'; export interface ComponentToken { @@ -24,23 +18,6 @@ interface TooltipToken extends FullToken<'Tooltip'> { tooltipRadiusOuter: number; } -const generatorTooltipPresetColor: GenerateStyle = (token) => { - const { componentCls } = token; - - return PresetColors.reduce((previousValue: any, currentValue: keyof PresetColorType) => { - const lightColor = token[`${currentValue}-6`]; - previousValue[`&${componentCls}-${currentValue}`] = { - [`${componentCls}-inner`]: { - backgroundColor: lightColor, - }, - [`${componentCls}-arrow`]: { - '--antd-arrow-background-color': lightColor, - }, - }; - return previousValue; - }, {}); -}; - const genTooltipStyle: GenerateStyle = (token) => { const { componentCls, // ant-tooltip @@ -105,7 +82,16 @@ const genTooltipStyle: GenerateStyle = (token) => { }, // generator for preset color - ...generatorTooltipPresetColor(token), + ...genPresetColor(token, (colorKey, { darkColor }) => ({ + [`&${componentCls}-${colorKey}`]: { + [`${componentCls}-inner`]: { + backgroundColor: darkColor, + }, + [`${componentCls}-arrow`]: { + '--antd-arrow-background-color': darkColor, + }, + }, + })), // RTL '&-rtl': { diff --git a/components/tooltip/util.ts b/components/tooltip/util.ts index 49af502617..7fa1f65b2e 100644 --- a/components/tooltip/util.ts +++ b/components/tooltip/util.ts @@ -2,19 +2,19 @@ import type * as React from 'react'; import classNames from 'classnames'; -import { PresetColorTypes } from '../_util/colors'; - -const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`); +import { isPresetColor } from '../_util/colors'; export function parseColor(prefixCls: string, color?: string) { + const isInternalColor = isPresetColor(color); + const className = classNames({ - [`${prefixCls}-${color}`]: color && PresetColorRegex.test(color), + [`${prefixCls}-${color}`]: color && isInternalColor, }); const overlayStyle: React.CSSProperties = {}; const arrowStyle: React.CSSProperties = {}; - if (color && !PresetColorRegex.test(color)) { + if (color && !isInternalColor) { overlayStyle.background = color; // @ts-ignore arrowStyle['--antd-arrow-background-color'] = color;