mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

feat: tree & treeSelect support cssVar (#45814)

Browse Source 
* feat: tree support cssVar

* feat: treeSelect support cssVar

* feat: treeSelect support cssVar

* feat: optimize code

* feat: optimize code
This commit is contained in:
kiner-tang(文辉) 2023-11-14 19:17:23 +08:00 committed by GitHub
parent 9554807ca3
commit 8e32367fd5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 66 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/tree-select/index.tsx
View File

@ -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 <

4
components/tree-select/style/cssVar.ts Normal file
View File

@ -0,0 +1,4 @@
import { genCSSVarRegister } from '../../theme/internal';
import { prepareComponentToken } from '.';
export default genCSSVarRegister('TreeSelect', prepareComponentToken);

12
components/tree-select/style/index.ts
View File

@ -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<TreeSelectToken> = (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<AliasToken & TreeSharedToken>(token, { colorBgContainer: colorBgElevated }),
mergeToken<AliasToken & TreeSharedToken & CSSUtil>(token, {
colorBgContainer: colorBgElevated,
}),
),
{
[treeCls]: {
@ -65,6 +69,8 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = (token) => {
];
};
export const prepareComponentToken: GetDefaultToken<'TreeSelect'> = initComponentToken;
// ============================== Export ==============================
export default function useTreeSelectStyle(prefixCls: string, treePrefixCls: string) {
return genComponentStyleHook(

6
components/tree/Tree.tsx
View File

@ -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<RcTree, TreeProps>((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<RcTree, TreeProps>((props, ref) => {
/>
);
return wrapSSR(
return wrapCSSVar(
<RcTree
itemHeight={20}
ref={ref}

4
components/tree/style/cssVar.ts Normal file
View File

@ -0,0 +1,4 @@
import { genCSSVarRegister } from '../../theme/internal';
import { prepareComponentToken } from '.';
export default genCSSVarRegister('Tree', prepareComponentToken);

61
components/tree/style/index.ts
View File

@ -1,10 +1,11 @@
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import { Keyframes } from '@ant-design/cssinjs';
import { Keyframes, unit } from '@ant-design/cssinjs';
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
import { genFocusOutline, resetComponent } from '../../style';
import { genCollapseMotion } from '../../style/motion';
import type { AliasToken, DerivativeToken, FullToken } from '../../theme/internal';
import type { AliasToken, DerivativeToken, FullToken, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import type { CSSUtil } from '../../theme/util/genComponentStyleHook';
export interface TreeSharedToken {
/**
@ -78,7 +79,7 @@ const getDropIndicatorStyle = (prefixCls: string, token: DerivativeToken) => ({
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<TreeToken>(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,
);

2
scripts/check-cssinjs.tsx
View File

@ -48,8 +48,6 @@ async function checkCSSVar() {
'steps',
'switch',
'table',
'tree',
'tree-select',
];
await generateCssinjs({