From 8e32367fd50971769b94320782aa4bd299df7050 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Tue, 14 Nov 2023 19:17:23 +0800 Subject: [PATCH] feat: tree & treeSelect support cssVar (#45814) * feat: tree support cssVar * feat: treeSelect support cssVar * feat: treeSelect support cssVar * feat: optimize code * feat: optimize code --- components/tree-select/index.tsx | 16 +++++-- components/tree-select/style/cssVar.ts | 4 ++ components/tree-select/style/index.ts | 12 +++-- components/tree/Tree.tsx | 6 ++- components/tree/style/cssVar.ts | 4 ++ components/tree/style/index.ts | 61 ++++++++++++++------------ scripts/check-cssinjs.tsx | 2 - 7 files changed, 66 insertions(+), 39 deletions(-) create mode 100644 components/tree-select/style/cssVar.ts create mode 100644 components/tree/style/cssVar.ts diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index 7ce8845235..c168b3ed43 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -28,6 +28,8 @@ import type { AntTreeNodeProps, TreeProps } from '../tree'; import type { SwitcherIcon } from '../tree/Tree'; import SwitcherIconCom from '../tree/utils/iconUtil'; import useStyle from './style'; +import useCSSVar from './style/cssVar'; +import useCSSVarCls from '../config-provider/hooks/useCSSVarCls'; import { useZIndex } from '../_util/hooks/useZIndex'; type RawValue = string | number; @@ -151,8 +153,12 @@ const InternalTreeSelect = < const treeSelectPrefixCls = getPrefixCls('tree-select', customizePrefixCls); const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction); - const [wrapSelectSSR, hashId] = useSelectStyle(prefixCls); - const [wrapTreeSelectSSR] = useStyle(treeSelectPrefixCls, treePrefixCls); + const [, hashId] = useSelectStyle(prefixCls); + useStyle(treeSelectPrefixCls, treePrefixCls); + const rootCls = useCSSVarCls(prefixCls); + const treeSelectRootCls = useCSSVarCls(treeSelectPrefixCls); + const wrapCSSVar = useCSSVar(rootCls); + const treeSelectWrapCSSVar = useCSSVar(treeSelectRootCls); const mergedDropdownClassName = classNames( popupClassName || dropdownClassName, @@ -161,6 +167,8 @@ const InternalTreeSelect = < [`${treeSelectPrefixCls}-dropdown-rtl`]: direction === 'rtl', }, rootClassName, + rootCls, + treeSelectRootCls, hashId, ); @@ -238,6 +246,8 @@ const InternalTreeSelect = < compactItemClassnames, className, rootClassName, + rootCls, + treeSelectRootCls, hashId, ); @@ -290,7 +300,7 @@ const InternalTreeSelect = < /> ); - return wrapSelectSSR(wrapTreeSelectSSR(returnNode)); + return wrapCSSVar(treeSelectWrapCSSVar(returnNode)); }; const TreeSelectRef = React.forwardRef(InternalTreeSelect) as < diff --git a/components/tree-select/style/cssVar.ts b/components/tree-select/style/cssVar.ts new file mode 100644 index 0000000000..1298582daf --- /dev/null +++ b/components/tree-select/style/cssVar.ts @@ -0,0 +1,4 @@ +import { genCSSVarRegister } from '../../theme/internal'; +import { prepareComponentToken } from '.'; + +export default genCSSVarRegister('TreeSelect', prepareComponentToken); diff --git a/components/tree-select/style/index.ts b/components/tree-select/style/index.ts index f2c12500b8..c3ec04ec65 100644 --- a/components/tree-select/style/index.ts +++ b/components/tree-select/style/index.ts @@ -1,8 +1,10 @@ +import { unit } from '@ant-design/cssinjs'; import { getStyle as getCheckboxStyle } from '../../checkbox/style'; -import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal'; +import type { AliasToken, FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import type { TreeSharedToken } from '../../tree/style'; import { genTreeStyle, initComponentToken } from '../../tree/style'; +import type { CSSUtil } from '../../theme/util/genComponentStyleHook'; export interface ComponentToken extends TreeSharedToken {} @@ -22,13 +24,15 @@ const genBaseStyle: GenerateStyle = (token) => { { [`${componentCls}-dropdown`]: [ { - padding: `${token.paddingXS}px ${token.paddingXS / 2}px`, + padding: `${unit(token.paddingXS)} ${unit(token.calc(token.paddingXS).div(2).equal())}`, }, // ====================== Tree ====================== genTreeStyle( treePrefixCls, - mergeToken(token, { colorBgContainer: colorBgElevated }), + mergeToken(token, { + colorBgContainer: colorBgElevated, + }), ), { [treeCls]: { @@ -65,6 +69,8 @@ const genBaseStyle: GenerateStyle = (token) => { ]; }; +export const prepareComponentToken: GetDefaultToken<'TreeSelect'> = initComponentToken; + // ============================== Export ============================== export default function useTreeSelectStyle(prefixCls: string, treePrefixCls: string) { return genComponentStyleHook( diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx index 9ba5c27dcf..f27f244da1 100644 --- a/components/tree/Tree.tsx +++ b/components/tree/Tree.tsx @@ -10,6 +10,7 @@ import type { DataNode, Key } from 'rc-tree/lib/interface'; import initCollapseMotion from '../_util/motion'; import { ConfigContext } from '../config-provider'; import useStyle from './style'; +import useCSSVar from './style/cssVar'; import dropIndicatorRender from './utils/dropIndicator'; import SwitcherIconCom from './utils/iconUtil'; @@ -193,7 +194,8 @@ const Tree = React.forwardRef((props, ref) => { dropIndicatorRender, }; - const [wrapSSR, hashId] = useStyle(prefixCls); + const [, hashId] = useStyle(prefixCls); + const wrapCSSVar = useCSSVar(prefixCls); const draggableConfig = React.useMemo(() => { if (!draggable) { @@ -229,7 +231,7 @@ const Tree = React.forwardRef((props, ref) => { /> ); - return wrapSSR( + return wrapCSSVar( ({ width: 8, height: 8, backgroundColor: 'transparent', - border: `${token.lineWidthBold}px solid ${token.colorPrimary}`, + border: `${unit(token.lineWidthBold)} solid ${token.colorPrimary}`, borderRadius: '50%', content: '""', }, @@ -89,7 +90,7 @@ const getDropIndicatorStyle = (prefixCls: string, token: DerivativeToken) => ({ type TreeToken = FullToken<'Tree'> & { treeCls: string; treeNodeCls: string; - treeNodePadding: number; + treeNodePadding: number | string; }; export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => { @@ -161,7 +162,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => [`${treeNodeCls}`]: { display: 'flex', alignItems: 'flex-start', - padding: `0 0 ${treeNodePadding}px 0`, + padding: `0 0 ${unit(treeNodePadding)} 0`, outline: 'none', '&-rtl': { @@ -194,7 +195,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => // https://github.com/ant-design/ant-design/issues/41915 flexShrink: 0, width: titleHeight, - lineHeight: `${titleHeight}px`, + lineHeight: `${unit(titleHeight)}`, textAlign: 'center', visibility: 'visible', opacity: 0.2, @@ -237,7 +238,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => alignSelf: 'stretch', width: titleHeight, margin: 0, - lineHeight: `${titleHeight}px`, + lineHeight: `${unit(titleHeight)}`, textAlign: 'center', cursor: 'pointer', userSelect: 'none', @@ -269,8 +270,8 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => '&:before': { position: 'absolute', top: 0, - insetInlineEnd: titleHeight / 2, - bottom: -treeNodePadding, + insetInlineEnd: token.calc(titleHeight).div(2).equal(), + bottom: token.calc(treeNodePadding).mul(-1).equal(), marginInlineStart: -1, borderInlineEnd: `1px solid ${token.colorBorder}`, content: '""', @@ -278,8 +279,8 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => '&:after': { position: 'absolute', - width: (titleHeight / 2) * 0.8, - height: titleHeight / 2, + width: token.calc(token.calc(titleHeight).div(2).equal()).mul(0.8).equal(), + height: token.calc(titleHeight).div(2).equal(), borderBottom: `1px solid ${token.colorBorder}`, content: '""', }, @@ -301,9 +302,9 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => zIndex: 'auto', minHeight: titleHeight, margin: 0, - padding: `0 ${token.paddingXS / 2}px`, + padding: `0 ${unit(token.calc(token.paddingXS).div(2).equal())}`, color: 'inherit', - lineHeight: `${titleHeight}px`, + lineHeight: `${unit(titleHeight)}`, background: 'transparent', borderRadius: token.borderRadius, cursor: 'pointer', @@ -322,7 +323,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => display: 'inline-block', width: titleHeight, height: titleHeight, - lineHeight: `${titleHeight}px`, + lineHeight: `${unit(titleHeight)}`, textAlign: 'center', verticalAlign: 'top', @@ -339,7 +340,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => // ==================== Draggable ===================== [`${treeCls}-node-content-wrapper`]: { - lineHeight: `${titleHeight}px`, + lineHeight: `${unit(titleHeight)}`, userSelect: 'none', ...getDropIndicatorStyle(prefixCls, token), @@ -362,8 +363,8 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => '&:before': { position: 'absolute', top: 0, - insetInlineEnd: titleHeight / 2, - bottom: -treeNodePadding, + insetInlineEnd: token.calc(titleHeight).div(2).equal(), + bottom: token.calc(treeNodePadding).mul(-1).equal(), borderInlineEnd: `1px solid ${token.colorBorder}`, content: '""', }, @@ -393,7 +394,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => '&:before': { top: 'auto !important', bottom: 'auto !important', - height: `${titleHeight / 2}px !important`, + height: `${unit(token.calc(titleHeight).div(2).equal())} !important`, }, }, }, @@ -489,12 +490,12 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => { // ============================== Merged ============================== export const genTreeStyle = ( prefixCls: string, - token: AliasToken & TreeSharedToken, + token: AliasToken & TreeSharedToken & CSSUtil, ): CSSInterpolation => { const treeCls = `.${prefixCls}`; const treeNodeCls = `${treeCls}-treenode`; - const treeNodePadding = token.paddingXS / 2; + const treeNodePadding = token.calc(token.paddingXS).div(2).equal(); const treeToken = mergeToken(token, { treeCls, @@ -520,6 +521,16 @@ export const initComponentToken = (token: AliasToken): TreeSharedToken => { }; }; +export const prepareComponentToken: GetDefaultToken<'Tree'> = (token) => { + const { colorTextLightSolid, colorPrimary } = token; + + return { + ...initComponentToken(token), + directoryNodeSelectedColor: colorTextLightSolid, + directoryNodeSelectedBg: colorPrimary, + }; +}; + export default genComponentStyleHook( 'Tree', (token, { prefixCls }) => [ @@ -529,13 +540,5 @@ export default genComponentStyleHook( genTreeStyle(prefixCls, token), genCollapseMotion(token), ], - (token) => { - const { colorTextLightSolid, colorPrimary } = token; - - return { - ...initComponentToken(token), - directoryNodeSelectedColor: colorTextLightSolid, - directoryNodeSelectedBg: colorPrimary, - }; - }, + prepareComponentToken, ); diff --git a/scripts/check-cssinjs.tsx b/scripts/check-cssinjs.tsx index ca44a53e9f..e4e5e8d323 100644 --- a/scripts/check-cssinjs.tsx +++ b/scripts/check-cssinjs.tsx @@ -48,8 +48,6 @@ async function checkCSSVar() { 'steps', 'switch', 'table', - 'tree', - 'tree-select', ]; await generateCssinjs({