mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 15:19:58 +08:00
989a27ada8
* chore: part of tree * chore: tree cssinjs * chore: fix lint * refactor: RTL support * fix: checkbox hover logic * chore: rtl use same style * fix: check style priority
439 lines
11 KiB
TypeScript
439 lines
11 KiB
TypeScript
// import '../../style/index.less';
|
|
// import './index.less';
|
|
|
|
// deps-lint-skip-all
|
|
import { CSSObject, CSSInterpolation, Keyframes } from '@ant-design/cssinjs';
|
|
import { DerivativeToken, useStyleRegister, useToken, resetComponent } from '../../_util/theme';
|
|
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
|
|
|
|
// ============================ Keyframes =============================
|
|
const treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', {
|
|
'0%': {
|
|
opacity: 0,
|
|
},
|
|
'100%': {
|
|
opacity: 1,
|
|
},
|
|
});
|
|
|
|
// ============================== Switch ==============================
|
|
const getSwitchStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({
|
|
[`.${prefixCls}-switcher-icon`]: {
|
|
display: 'inline-block',
|
|
fontSize: 10, // FIXME: missing token
|
|
verticalAlign: 'baseline',
|
|
|
|
svg: {
|
|
transition: `transform ${token.duration}`,
|
|
},
|
|
},
|
|
});
|
|
|
|
// =============================== Drop ===============================
|
|
const getDropIndicatorStyle = (prefixCls: string, token: DerivativeToken) => ({
|
|
[`.${prefixCls}-drop-indicator`]: {
|
|
position: 'absolute',
|
|
// it should displayed over the following node
|
|
zIndex: 1,
|
|
height: 2,
|
|
backgroundColor: token.primaryColor,
|
|
borderRadius: 1,
|
|
pointerEvents: 'none',
|
|
|
|
'&:after': {
|
|
position: 'absolute',
|
|
top: -3,
|
|
left: -6,
|
|
width: 8,
|
|
height: 8,
|
|
backgroundColor: 'transparent',
|
|
border: `2px solid ${token.primaryColor}`,
|
|
borderRadius: '50%',
|
|
content: '""',
|
|
},
|
|
},
|
|
});
|
|
|
|
// =============================== Base ===============================
|
|
type TreeToken = DerivativeToken & {
|
|
treeCls: string;
|
|
treeNodeCls: string;
|
|
treeNodePadding: number;
|
|
treeTitleHeight: number;
|
|
};
|
|
|
|
export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string): CSSObject => {
|
|
const { treeCls, treeNodeCls, treeNodePadding, treeTitleHeight } = token;
|
|
|
|
const treeCheckBoxMarginVertical = (treeTitleHeight - token.fontSizeLG) / 2;
|
|
const treeCheckBoxMarginHorizontal = token.paddingXS;
|
|
|
|
return {
|
|
[treeCls]: {
|
|
...resetComponent(token),
|
|
background: token.componentBackground,
|
|
borderRadius: token.borderRadius,
|
|
transition: `background-color ${token.duration}`,
|
|
|
|
'&-focused:not(:hover):not(&-active-focused)': {
|
|
background: token.tmpPrimaryHoverColorWeak,
|
|
},
|
|
|
|
// =================== Virtual List ===================
|
|
'&-list-holder-inner': {
|
|
alignItems: 'flex-start',
|
|
},
|
|
|
|
[`&${treeCls}-block-node`]: {
|
|
[`${treeCls}-list-holder-inner`]: {
|
|
alignItems: 'stretch',
|
|
|
|
// >>> Title
|
|
[`${treeCls}-node-content-wrapper`]: {
|
|
flex: 'auto',
|
|
display: 'flex',
|
|
flexWrap: 'nowrap',
|
|
},
|
|
|
|
// >>> Drag
|
|
[`${treeNodeCls}.dragging`]: {
|
|
position: 'relative',
|
|
|
|
'&:after': {
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
bottom: treeNodePadding,
|
|
left: 0,
|
|
border: `1px solid ${token.primaryColor}`,
|
|
opacity: 0,
|
|
animation: `${treeNodeFX.getName(hashId)} ${token.duration}`,
|
|
animationPlayState: 'running',
|
|
animationFillMode: 'forwards',
|
|
content: '""',
|
|
pointerEvents: 'none',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
// ===================== TreeNode =====================
|
|
[`${treeNodeCls}`]: {
|
|
display: 'flex',
|
|
alignItems: 'flex-start',
|
|
padding: `0 0 ${treeNodePadding}px 0`,
|
|
outline: 'none',
|
|
|
|
// Disabled
|
|
'&-disabled': {
|
|
// >>> Title
|
|
[`${treeCls}-node-content-wrapper`]: {
|
|
color: token.textColorDisabled,
|
|
cursor: 'not-allowed',
|
|
'&:hover': {
|
|
background: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
|
|
[`&-active ${treeCls}-node-content-wrapper`]: {
|
|
background: token.itemHoverBackground,
|
|
},
|
|
|
|
[`&:not(&-disabled).filter-node ${treeCls}-title`]: {
|
|
color: 'inherit',
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
|
|
// >>> Indent
|
|
'&-indent': {
|
|
alignSelf: 'stretch',
|
|
whiteSpace: 'nowrap',
|
|
userSelect: 'none',
|
|
'&-unit': {
|
|
display: 'inline-block',
|
|
width: treeTitleHeight,
|
|
},
|
|
},
|
|
|
|
// >>> Drag Handler
|
|
'&-draggable-icon': {
|
|
width: treeTitleHeight,
|
|
lineHeight: `${treeTitleHeight}px`,
|
|
textAlign: 'center',
|
|
opacity: 0.2,
|
|
transition: `opacity ${token.duration}`,
|
|
|
|
[`${treeNodeCls}:hover &`]: {
|
|
opacity: 0.45,
|
|
},
|
|
},
|
|
|
|
// >>> Switcher
|
|
'&-switcher': {
|
|
...getSwitchStyle(prefixCls, token),
|
|
position: 'relative',
|
|
flex: 'none',
|
|
alignSelf: 'stretch',
|
|
width: treeTitleHeight,
|
|
margin: 0,
|
|
lineHeight: `${treeTitleHeight}px`,
|
|
textAlign: 'center',
|
|
cursor: 'pointer',
|
|
userSelect: 'none',
|
|
|
|
'&-noop': {
|
|
cursor: 'default',
|
|
},
|
|
|
|
'&_close': {
|
|
[`${treeCls}-switcher-icon`]: {
|
|
svg: {
|
|
transform: 'rotate(-90deg)',
|
|
},
|
|
},
|
|
},
|
|
|
|
'&-loading-icon': {
|
|
color: token.primaryColor,
|
|
},
|
|
|
|
'&-leaf-line': {
|
|
position: 'relative',
|
|
zIndex: 1,
|
|
display: 'inline-block',
|
|
width: '100%',
|
|
height: '100%',
|
|
|
|
// https://github.com/ant-design/ant-design/issues/31884
|
|
'&:before': {
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: treeTitleHeight / 2,
|
|
bottom: -treeNodePadding,
|
|
marginLeft: -1,
|
|
borderRight: `1px solid ${token.borderColor}`,
|
|
content: '""',
|
|
},
|
|
|
|
'&:after': {
|
|
position: 'absolute',
|
|
width: (treeTitleHeight / 2) * 0.8,
|
|
height: treeTitleHeight / 2,
|
|
borderBottom: `1px solid ${token.borderColor}`,
|
|
content: '""',
|
|
},
|
|
},
|
|
},
|
|
|
|
// >>> Checkbox
|
|
'&-checkbox': {
|
|
top: 'initial',
|
|
marginInlineEnd: treeCheckBoxMarginHorizontal,
|
|
marginBlockStart: treeCheckBoxMarginVertical,
|
|
},
|
|
|
|
// >>> Title
|
|
'& &-node-content-wrapper': {
|
|
position: 'relative',
|
|
zIndex: 'auto',
|
|
minHeight: treeTitleHeight,
|
|
margin: 0,
|
|
padding: `0 ${token.paddingXS / 2}px`,
|
|
color: 'inherit',
|
|
lineHeight: `${treeTitleHeight}px`,
|
|
background: 'transparent',
|
|
borderRadius: token.borderRadius,
|
|
cursor: 'pointer',
|
|
transition: `all ${token.duration}, border 0s, line-height 0s, box-shadow 0s`,
|
|
|
|
'&:hover': {
|
|
backgroundColor: token.itemHoverBackground,
|
|
},
|
|
|
|
[`&${treeCls}-node-selected`]: {
|
|
backgroundColor: token.tmpPrimaryHoverColorWeak,
|
|
},
|
|
|
|
// Icon
|
|
[`${treeCls}-iconEle`]: {
|
|
display: 'inline-block',
|
|
width: treeTitleHeight,
|
|
height: treeTitleHeight,
|
|
lineHeight: `${treeTitleHeight}px`,
|
|
textAlign: 'center',
|
|
verticalAlign: 'top',
|
|
|
|
'&:empty': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
},
|
|
|
|
// https://github.com/ant-design/ant-design/issues/28217
|
|
'&-unselectable &-node-content-wrapper:hover': {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
|
|
// ==================== Draggable =====================
|
|
'&-node-content-wrapper': {
|
|
lineHeight: `${treeTitleHeight}px`,
|
|
userSelect: 'none',
|
|
|
|
...getDropIndicatorStyle(prefixCls, token),
|
|
},
|
|
|
|
[`${treeNodeCls}.drop-container`]: {
|
|
'> [draggable]': {
|
|
boxShadow: `0 0 0 2px ${token.primaryColor}`,
|
|
},
|
|
},
|
|
|
|
// ==================== Show Line =====================
|
|
'&-show-line': {
|
|
// ================ Indent lines ================
|
|
[`${treeCls}-indent`]: {
|
|
'&-unit': {
|
|
position: 'relative',
|
|
height: '100%',
|
|
|
|
'&:before': {
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: treeTitleHeight / 2,
|
|
bottom: -treeNodePadding,
|
|
borderRight: `1px solid ${token.borderColor}`,
|
|
content: '""',
|
|
},
|
|
|
|
'&-end': {
|
|
'&:before': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
// ============== Cover Background ==============
|
|
[`${treeCls}-switcher`]: {
|
|
background: token.componentBackground,
|
|
|
|
'&-line-icon': {
|
|
// https://github.com/ant-design/ant-design/issues/32813
|
|
verticalAlign: '-0.15em',
|
|
},
|
|
},
|
|
},
|
|
|
|
[`${treeNodeCls}-leaf-last`]: {
|
|
[`${treeCls}-switcher`]: {
|
|
'&-leaf-line': {
|
|
'&:before': {
|
|
top: 'auto !important',
|
|
bottom: 'auto !important',
|
|
height: `${treeTitleHeight / 2}px !important`,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
// =============================== RTL ================================
|
|
export const genRTLStyle = (token: TreeToken): CSSObject => {
|
|
const { treeCls, treeNodeCls, treeTitleHeight } = token;
|
|
|
|
return {
|
|
[treeCls]: {
|
|
'&-rtl': {
|
|
direction: 'rtl',
|
|
[`${treeCls}-node-content-wrapper[draggable='true']`]: {
|
|
[`${treeCls}-drop-indicator`]: {
|
|
'&:after': {
|
|
right: -6,
|
|
left: 'unset',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
// ===================== TreeNode =====================
|
|
[`${treeNodeCls}`]: {
|
|
'&-rtl': {
|
|
direction: 'rtl',
|
|
},
|
|
},
|
|
|
|
// >>> Switcher
|
|
'&-switcher': {
|
|
'&_close': {
|
|
[`${treeCls}-switcher-icon`]: {
|
|
svg: {
|
|
[`${treeCls}-rtl &`]: {
|
|
transform: 'rotate(90deg)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
// ==================== Show Line =====================
|
|
'&-show-line': {
|
|
// ================ Indent lines ================
|
|
[`${treeCls}-indent`]: {
|
|
'&-unit': {
|
|
'&:before': {
|
|
[`${treeCls}-rtl&`]: {
|
|
right: 'auto',
|
|
left: -(treeTitleHeight / 2) - 1,
|
|
borderRight: 'none',
|
|
borderLeft: `1px solid ${token.borderColor}`,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
// ============================== Merged ==============================
|
|
export const genTreeStyle = (
|
|
prefixCls: string,
|
|
token: DerivativeToken,
|
|
hashId: string,
|
|
): CSSInterpolation => {
|
|
const treeCls = `.${prefixCls}`;
|
|
const treeNodeCls = `${treeCls}-treenode`;
|
|
|
|
const treeNodePadding = token.paddingXS / 2;
|
|
const treeTitleHeight = token.heightSM;
|
|
|
|
const treeToken = {
|
|
...token,
|
|
treeCls,
|
|
treeNodeCls,
|
|
treeNodePadding,
|
|
treeTitleHeight,
|
|
};
|
|
|
|
return [
|
|
// Basic
|
|
genBaseStyle(prefixCls, treeToken, hashId),
|
|
// RTL
|
|
genRTLStyle(treeToken),
|
|
];
|
|
};
|
|
|
|
// ============================== Export ==============================
|
|
export default function useStyle(prefixCls: string) {
|
|
const [theme, token, hashId] = useToken();
|
|
|
|
return useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
|
getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId),
|
|
genTreeStyle(prefixCls, token, hashId),
|
|
treeNodeFX,
|
|
]);
|
|
}
|