From 194dbcedfad6daf36d13e72e68c7b244c98e6190 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 16 Nov 2023 10:45:15 +0800 Subject: [PATCH] feat: Anchor support cssVar (#45808) * feat: Anchor support cssVar * fix: fix * fix: fix * Update components/anchor/style/index.ts Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc --- components/anchor/Anchor.tsx | 46 +++++++++++-------------------- components/anchor/style/cssVar.ts | 4 +++ components/anchor/style/index.ts | 44 +++++++++++++++-------------- scripts/check-cssinjs.tsx | 1 - 4 files changed, 43 insertions(+), 52 deletions(-) create mode 100644 components/anchor/style/cssVar.ts diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 79b18e5567..16cc6433ee 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -9,10 +9,12 @@ import { devUseWarning } from '../_util/warning'; import Affix from '../affix'; import type { ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider'; +import useCSSVarCls from '../config-provider/hooks/useCSSVarCls'; import type { AnchorLinkBaseProps } from './AnchorLink'; import AnchorLink from './AnchorLink'; import AnchorContext from './context'; import useStyle from './style'; +import useCSSVar from './style/cssVar'; export interface AnchorLinkItemProps extends AnchorLinkBaseProps { key: React.Key; @@ -79,11 +81,6 @@ export interface AnchorProps { replace?: boolean; } -interface InternalAnchorProps extends AnchorProps { - anchorPrefixCls: string; - rootClassName: string; -} - export interface AnchorState { activeLink: null | string; } @@ -109,10 +106,10 @@ export interface AntAnchor { direction: AnchorDirection; } -const AnchorContent: React.FC = (props) => { +const Anchor: React.FC = (props) => { const { rootClassName, - anchorPrefixCls: prefixCls, + prefixCls: customPrefixCls, className, style, offsetTop, @@ -151,9 +148,15 @@ const AnchorContent: React.FC = (props) => { const spanLinkNode = React.useRef(null); const animating = React.useRef(false); - const { direction, getTargetContainer, anchor } = + const { direction, anchor, getTargetContainer, getPrefixCls } = React.useContext(ConfigContext); + const prefixCls = getPrefixCls('anchor', customPrefixCls); + + const [, hashId] = useStyle(prefixCls); + const rootCls = useCSSVarCls(prefixCls); + const wrapCSSVar = useCSSVar(rootCls); + const getCurrentContainer = getContainer ?? getTargetContainer ?? getDefaultContainer; const dependencyListItem: React.DependencyList[number] = JSON.stringify(links); @@ -182,10 +185,7 @@ const AnchorContent: React.FC = (props) => { inkStyle.left = horizontalAnchor ? `${linkNode.offsetLeft}px` : ''; inkStyle.width = horizontalAnchor ? `${linkNode.clientWidth}px` : ''; if (horizontalAnchor) { - scrollIntoView(linkNode, { - scrollMode: 'if-needed', - block: 'nearest', - }); + scrollIntoView(linkNode, { scrollMode: 'if-needed', block: 'nearest' }); } } }; @@ -274,6 +274,8 @@ const AnchorContent: React.FC = (props) => { ); const wrapperClass = classNames( + hashId, + rootCls, rootClassName, `${prefixCls}-wrapper`, { @@ -347,7 +349,7 @@ const AnchorContent: React.FC = (props) => { [activeLink, onClick, handleScrollTo, anchorDirection], ); - return ( + return wrapCSSVar( {affix ? ( @@ -356,23 +358,7 @@ const AnchorContent: React.FC = (props) => { ) : ( anchorContent )} - - ); -}; - -const Anchor: React.FC = (props) => { - const { prefixCls: customizePrefixCls, rootClassName } = props; - const { getPrefixCls } = React.useContext(ConfigContext); - const anchorPrefixCls = getPrefixCls('anchor', customizePrefixCls); - - const [wrapSSR, hashId] = useStyle(anchorPrefixCls); - - return wrapSSR( - , + , ); }; diff --git a/components/anchor/style/cssVar.ts b/components/anchor/style/cssVar.ts new file mode 100644 index 0000000000..a1fe9c58a6 --- /dev/null +++ b/components/anchor/style/cssVar.ts @@ -0,0 +1,4 @@ +import { prepareComponentToken } from '.'; +import { genCSSVarRegister } from '../../theme/internal'; + +export default genCSSVarRegister<'Anchor'>('Anchor', prepareComponentToken); diff --git a/components/anchor/style/index.ts b/components/anchor/style/index.ts index 0ea7e5578c..84a7d42d43 100644 --- a/components/anchor/style/index.ts +++ b/components/anchor/style/index.ts @@ -1,6 +1,7 @@ -import type { CSSObject } from '@ant-design/cssinjs'; +import { unit } from '@ant-design/cssinjs'; + import { resetComponent, textEllipsis } from '../../style'; -import type { FullToken, GenerateStyle } from '../../theme/internal'; +import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { @@ -18,13 +19,13 @@ export interface ComponentToken { interface AnchorToken extends FullToken<'Anchor'> { holderOffsetBlock: number; - anchorPaddingBlockSecondary: number; - anchorBallSize: number; - anchorTitleBlock: number; + anchorPaddingBlockSecondary: number | string; + anchorBallSize: number | string; + anchorTitleBlock: number | string; } // ============================== Shared ============================== -const genSharedAnchorStyle: GenerateStyle = (token): CSSObject => { +const genSharedAnchorStyle: GenerateStyle = (token) => { const { componentCls, holderOffsetBlock, @@ -33,11 +34,12 @@ const genSharedAnchorStyle: GenerateStyle = (token): CSSObject => { colorPrimary, lineType, colorSplit, + calc, } = token; return { [`${componentCls}-wrapper`]: { - marginBlockStart: -holderOffsetBlock, + marginBlockStart: calc(holderOffsetBlock).mul(-1).equal(), paddingBlockStart: holderOffsetBlock, // delete overflow: auto @@ -50,7 +52,7 @@ const genSharedAnchorStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-link`]: { paddingBlock: token.linkPaddingBlock, - paddingInline: `${token.linkPaddingInlineStart}px 0`, + paddingInline: `${unit(token.linkPaddingInlineStart)} 0`, '&-title': { ...textEllipsis, @@ -83,7 +85,7 @@ const genSharedAnchorStyle: GenerateStyle = (token): CSSObject => { insetInlineStart: 0, top: 0, height: '100%', - borderInlineStart: `${lineWidthBold}px ${lineType} ${colorSplit}`, + borderInlineStart: `${unit(lineWidthBold)} ${lineType} ${colorSplit}`, content: '" "', }, @@ -95,7 +97,6 @@ const genSharedAnchorStyle: GenerateStyle = (token): CSSObject => { transition: `top ${motionDurationSlow} ease-in-out`, width: lineWidthBold, backgroundColor: colorPrimary, - [`&${componentCls}-ink-visible`]: { display: 'inline-block', }, @@ -110,7 +111,7 @@ const genSharedAnchorStyle: GenerateStyle = (token): CSSObject => { }; }; -const genSharedAnchorHorizontalStyle: GenerateStyle = (token): CSSObject => { +const genSharedAnchorHorizontalStyle: GenerateStyle = (token) => { const { componentCls, motionDurationSlow, lineWidthBold, colorPrimary } = token; return { @@ -128,7 +129,7 @@ const genSharedAnchorHorizontalStyle: GenerateStyle = (token): CSSO value: 0, }, bottom: 0, - borderBottom: `1px ${token.lineType} ${token.colorSplit}`, + borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`, content: '" "', }, @@ -158,22 +159,23 @@ const genSharedAnchorHorizontalStyle: GenerateStyle = (token): CSSO }; }; +export const prepareComponentToken: GetDefaultToken<'Anchor'> = (token) => ({ + linkPaddingBlock: token.paddingXXS, + linkPaddingInlineStart: token.padding, +}); + // ============================== Export ============================== export default genComponentStyleHook( 'Anchor', (token) => { - const { fontSize, fontSizeLG, paddingXXS } = token; - + const { fontSize, fontSizeLG, paddingXXS, calc } = token; const anchorToken = mergeToken(token, { holderOffsetBlock: paddingXXS, - anchorPaddingBlockSecondary: paddingXXS / 2, - anchorTitleBlock: (fontSize / 14) * 3, - anchorBallSize: fontSizeLG / 2, + anchorPaddingBlockSecondary: calc(paddingXXS).div(2).equal(), + anchorTitleBlock: calc(fontSize).div(14).mul(3).equal(), + anchorBallSize: calc(fontSizeLG).div(2).equal(), }); return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)]; }, - (token) => ({ - linkPaddingBlock: token.paddingXXS, - linkPaddingInlineStart: token.padding, - }), + prepareComponentToken, ); diff --git a/scripts/check-cssinjs.tsx b/scripts/check-cssinjs.tsx index 3e225b60e2..883b2d0fee 100644 --- a/scripts/check-cssinjs.tsx +++ b/scripts/check-cssinjs.tsx @@ -28,7 +28,6 @@ console.error = (msg: any) => { async function checkCSSVar() { const ignore = [ - 'anchor', 'badge', 'breadcrumb', 'calendar',