2023-01-31 10:21:17 +08:00
|
|
|
import { genFocusStyle, resetComponent } from '../../style';
|
2022-04-25 10:54:00 +08:00
|
|
|
import {
|
2022-06-21 00:34:51 +08:00
|
|
|
initMoveMotion,
|
2022-04-25 10:54:00 +08:00
|
|
|
initSlideMotion,
|
2022-12-04 13:22:57 +08:00
|
|
|
initZoomMotion,
|
2022-04-25 10:54:00 +08:00
|
|
|
slideDownIn,
|
|
|
|
slideDownOut,
|
2022-06-21 00:34:51 +08:00
|
|
|
slideUpIn,
|
|
|
|
slideUpOut,
|
2022-04-25 10:54:00 +08:00
|
|
|
} from '../../style/motion';
|
2023-01-31 10:21:17 +08:00
|
|
|
import getArrowStyle, { getArrowOffset } from '../../style/placementArrow';
|
2022-11-23 20:22:38 +08:00
|
|
|
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
2022-04-25 10:54:00 +08:00
|
|
|
import genStatusStyle from './status';
|
2016-04-27 20:44:36 +08:00
|
|
|
|
2022-04-25 10:54:00 +08:00
|
|
|
export interface ComponentToken {
|
2023-07-05 17:49:59 +08:00
|
|
|
/**
|
|
|
|
* @desc 下拉菜单 z-index
|
|
|
|
* @descEN z-index of dropdown
|
|
|
|
*/
|
2022-05-10 17:30:01 +08:00
|
|
|
zIndexPopup: number;
|
2022-04-25 10:54:00 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface DropdownToken extends FullToken<'Dropdown'> {
|
|
|
|
rootPrefixCls: string;
|
|
|
|
dropdownArrowDistance: number;
|
|
|
|
dropdownArrowOffset: number;
|
|
|
|
dropdownPaddingVertical: number;
|
2022-09-09 17:47:17 +08:00
|
|
|
dropdownEdgeChildPadding: number;
|
2022-04-25 10:54:00 +08:00
|
|
|
menuCls: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
// =============================== Base ===============================
|
2022-11-17 23:31:41 +08:00
|
|
|
const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
|
2022-04-25 10:54:00 +08:00
|
|
|
const {
|
|
|
|
componentCls,
|
|
|
|
menuCls,
|
2022-05-10 17:30:01 +08:00
|
|
|
zIndexPopup,
|
2022-04-25 10:54:00 +08:00
|
|
|
dropdownArrowDistance,
|
|
|
|
sizePopupArrow,
|
|
|
|
antCls,
|
|
|
|
iconCls,
|
|
|
|
motionDurationMid,
|
|
|
|
dropdownPaddingVertical,
|
2022-11-01 15:06:38 +08:00
|
|
|
fontSize,
|
2022-09-09 17:47:17 +08:00
|
|
|
dropdownEdgeChildPadding,
|
2022-04-25 10:54:00 +08:00
|
|
|
colorTextDisabled,
|
|
|
|
fontSizeIcon,
|
|
|
|
controlPaddingHorizontal,
|
2022-06-21 11:06:06 +08:00
|
|
|
colorBgElevated,
|
2022-04-25 10:54:00 +08:00
|
|
|
} = token;
|
|
|
|
|
|
|
|
return [
|
|
|
|
{
|
|
|
|
[componentCls]: {
|
|
|
|
...resetComponent(token),
|
|
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
top: -9999,
|
|
|
|
left: {
|
|
|
|
_skip_check_: true,
|
|
|
|
value: -9999,
|
|
|
|
},
|
2022-05-10 17:30:01 +08:00
|
|
|
zIndex: zIndexPopup,
|
2022-04-25 10:54:00 +08:00
|
|
|
display: 'block',
|
|
|
|
|
|
|
|
// A placeholder out of dropdown visible range to avoid close when user moving
|
|
|
|
'&::before': {
|
|
|
|
position: 'absolute',
|
2022-11-02 16:25:28 +08:00
|
|
|
insetBlock: -dropdownArrowDistance + sizePopupArrow / 2,
|
2022-04-25 10:54:00 +08:00
|
|
|
// insetInlineStart: -7, // FIXME: Seems not work for hidden element
|
|
|
|
zIndex: -9999,
|
|
|
|
opacity: 0.0001,
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
|
2023-05-22 13:37:41 +08:00
|
|
|
[`&-trigger${antCls}-btn`]: {
|
|
|
|
[`& > ${iconCls}-down, & > ${antCls}-btn-icon > ${iconCls}-down`]: {
|
|
|
|
fontSize: fontSizeIcon,
|
|
|
|
},
|
2023-03-28 13:20:59 +08:00
|
|
|
},
|
|
|
|
|
2022-04-25 10:54:00 +08:00
|
|
|
[`${componentCls}-wrap`]: {
|
|
|
|
position: 'relative',
|
|
|
|
|
|
|
|
[`${antCls}-btn > ${iconCls}-down`]: {
|
|
|
|
fontSize: fontSizeIcon,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${iconCls}-down::before`]: {
|
|
|
|
transition: `transform ${motionDurationMid}`,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-wrap-open`]: {
|
|
|
|
[`${iconCls}-down::before`]: {
|
|
|
|
transform: `rotate(180deg)`,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`
|
|
|
|
&-hidden,
|
|
|
|
&-menu-hidden,
|
|
|
|
&-menu-submenu-hidden
|
|
|
|
`]: {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
|
|
|
|
// =============================================================
|
|
|
|
// == Motion ==
|
|
|
|
// =============================================================
|
|
|
|
// When position is not enough for dropdown, the placement will revert.
|
|
|
|
// We will handle this with revert motion name.
|
2023-01-20 10:31:27 +08:00
|
|
|
[`&${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottomLeft,
|
|
|
|
&${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottomLeft,
|
|
|
|
&${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottom,
|
|
|
|
&${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottom,
|
|
|
|
&${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottomRight,
|
|
|
|
&${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottomRight`]:
|
|
|
|
{
|
|
|
|
animationName: slideUpIn,
|
|
|
|
},
|
2022-04-25 10:54:00 +08:00
|
|
|
|
2023-01-20 10:31:27 +08:00
|
|
|
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-topLeft,
|
|
|
|
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-topLeft,
|
|
|
|
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-top,
|
|
|
|
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-top,
|
|
|
|
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-topRight,
|
|
|
|
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-topRight`]:
|
|
|
|
{
|
|
|
|
animationName: slideDownIn,
|
|
|
|
},
|
2022-04-25 10:54:00 +08:00
|
|
|
|
2023-01-20 10:31:27 +08:00
|
|
|
[`&${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottomLeft,
|
|
|
|
&${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottom,
|
|
|
|
&${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottomRight`]:
|
|
|
|
{
|
|
|
|
animationName: slideUpOut,
|
|
|
|
},
|
2022-04-25 10:54:00 +08:00
|
|
|
|
2023-01-20 10:31:27 +08:00
|
|
|
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-topLeft,
|
|
|
|
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-top,
|
|
|
|
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-topRight`]:
|
|
|
|
{
|
|
|
|
animationName: slideDownOut,
|
|
|
|
},
|
2022-04-25 10:54:00 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2023-01-19 11:21:05 +08:00
|
|
|
// =============================================================
|
|
|
|
// == Arrow style ==
|
|
|
|
// =============================================================
|
|
|
|
getArrowStyle<DropdownToken>(token, {
|
|
|
|
colorBg: colorBgElevated,
|
|
|
|
limitVerticalRadius: true,
|
|
|
|
arrowPlacement: { top: true, bottom: true },
|
|
|
|
}),
|
|
|
|
|
2022-04-25 10:54:00 +08:00
|
|
|
{
|
|
|
|
// =============================================================
|
|
|
|
// == Menu ==
|
|
|
|
// =============================================================
|
|
|
|
[`${componentCls} ${menuCls}`]: {
|
|
|
|
position: 'relative',
|
|
|
|
margin: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${menuCls}-submenu-popup`]: {
|
|
|
|
position: 'absolute',
|
2022-05-10 17:30:01 +08:00
|
|
|
zIndex: zIndexPopup,
|
2022-04-25 10:54:00 +08:00
|
|
|
background: 'transparent',
|
|
|
|
boxShadow: 'none',
|
|
|
|
transformOrigin: '0 0',
|
|
|
|
|
2023-01-21 12:35:52 +08:00
|
|
|
'ul, li': {
|
2022-04-25 10:54:00 +08:00
|
|
|
listStyle: 'none',
|
2023-01-21 12:35:52 +08:00
|
|
|
margin: 0,
|
2022-04-25 10:54:00 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}, ${componentCls}-menu-submenu`]: {
|
|
|
|
[menuCls]: {
|
2022-09-09 17:47:17 +08:00
|
|
|
padding: dropdownEdgeChildPadding,
|
2022-04-25 10:54:00 +08:00
|
|
|
listStyleType: 'none',
|
2022-06-21 11:06:06 +08:00
|
|
|
backgroundColor: colorBgElevated,
|
2022-04-25 10:54:00 +08:00
|
|
|
backgroundClip: 'padding-box',
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadius: token.borderRadiusLG,
|
2022-04-25 10:54:00 +08:00
|
|
|
outline: 'none',
|
2022-08-26 16:05:16 +08:00
|
|
|
boxShadow: token.boxShadowSecondary,
|
2022-09-09 10:53:03 +08:00
|
|
|
...genFocusStyle(token),
|
2022-04-25 10:54:00 +08:00
|
|
|
|
|
|
|
[`${menuCls}-item-group-title`]: {
|
|
|
|
padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`,
|
2022-08-04 16:16:50 +08:00
|
|
|
color: token.colorTextDescription,
|
2022-11-17 23:31:41 +08:00
|
|
|
transition: `all ${motionDurationMid}`,
|
2022-04-25 10:54:00 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
// ======================= Item Content =======================
|
|
|
|
[`${menuCls}-item`]: {
|
|
|
|
position: 'relative',
|
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'center',
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${menuCls}-item-icon`]: {
|
2022-11-01 15:06:38 +08:00
|
|
|
minWidth: fontSize,
|
2022-04-25 10:54:00 +08:00
|
|
|
marginInlineEnd: token.marginXS,
|
|
|
|
fontSize: token.fontSizeSM,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${menuCls}-title-content`]: {
|
|
|
|
flex: 'auto',
|
|
|
|
|
|
|
|
'> a': {
|
|
|
|
color: 'inherit',
|
2022-11-17 23:31:41 +08:00
|
|
|
transition: `all ${motionDurationMid}`,
|
2022-04-25 10:54:00 +08:00
|
|
|
|
|
|
|
'&:hover': {
|
|
|
|
color: 'inherit',
|
|
|
|
},
|
|
|
|
|
|
|
|
'&::after': {
|
|
|
|
position: 'absolute',
|
|
|
|
inset: 0,
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// =========================== Item ===========================
|
|
|
|
[`${menuCls}-item, ${menuCls}-submenu-title`]: {
|
|
|
|
clear: 'both',
|
|
|
|
margin: 0,
|
|
|
|
padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`,
|
|
|
|
color: token.colorText,
|
|
|
|
fontWeight: 'normal',
|
2022-11-01 15:06:38 +08:00
|
|
|
fontSize,
|
2022-04-25 10:54:00 +08:00
|
|
|
lineHeight: token.lineHeight,
|
|
|
|
cursor: 'pointer',
|
2022-11-17 23:31:41 +08:00
|
|
|
transition: `all ${motionDurationMid}`,
|
2023-01-21 12:35:52 +08:00
|
|
|
borderRadius: token.borderRadiusSM,
|
2022-04-25 10:54:00 +08:00
|
|
|
|
2022-09-07 12:00:00 +08:00
|
|
|
[`&:hover, &-active`]: {
|
|
|
|
backgroundColor: token.controlItemBgHover,
|
|
|
|
},
|
|
|
|
|
2022-09-09 10:53:03 +08:00
|
|
|
...genFocusStyle(token),
|
|
|
|
|
2022-04-25 10:54:00 +08:00
|
|
|
'&-selected': {
|
|
|
|
color: token.colorPrimary,
|
|
|
|
backgroundColor: token.controlItemBgActive,
|
2022-09-07 12:00:00 +08:00
|
|
|
'&:hover, &-active': {
|
|
|
|
backgroundColor: token.controlItemBgActiveHover,
|
|
|
|
},
|
2022-04-25 10:54:00 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'&-disabled': {
|
|
|
|
color: colorTextDisabled,
|
|
|
|
cursor: 'not-allowed',
|
|
|
|
|
|
|
|
'&:hover': {
|
|
|
|
color: colorTextDisabled,
|
2022-06-21 11:06:06 +08:00
|
|
|
backgroundColor: colorBgElevated,
|
2022-04-25 10:54:00 +08:00
|
|
|
cursor: 'not-allowed',
|
|
|
|
},
|
|
|
|
|
|
|
|
a: {
|
|
|
|
pointerEvents: 'none',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
'&-divider': {
|
|
|
|
height: 1, // By design
|
|
|
|
margin: `${token.marginXXS}px 0`,
|
|
|
|
overflow: 'hidden',
|
|
|
|
lineHeight: 0,
|
|
|
|
backgroundColor: token.colorSplit,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-menu-submenu-expand-icon`]: {
|
|
|
|
position: 'absolute',
|
|
|
|
insetInlineEnd: token.paddingXS,
|
|
|
|
|
|
|
|
[`${componentCls}-menu-submenu-arrow-icon`]: {
|
|
|
|
marginInlineEnd: '0 !important',
|
2022-08-04 16:16:50 +08:00
|
|
|
color: token.colorTextDescription,
|
2022-04-25 10:54:00 +08:00
|
|
|
fontSize: fontSizeIcon,
|
|
|
|
fontStyle: 'normal',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${menuCls}-item-group-list`]: {
|
|
|
|
margin: `0 ${token.marginXS}px`,
|
|
|
|
padding: 0,
|
|
|
|
listStyle: 'none',
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${menuCls}-submenu-title`]: {
|
|
|
|
paddingInlineEnd: controlPaddingHorizontal + token.fontSizeSM,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${menuCls}-submenu-vertical`]: {
|
|
|
|
position: 'relative',
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${menuCls}-submenu${menuCls}-submenu-disabled ${componentCls}-menu-submenu-title`]: {
|
|
|
|
[`&, ${componentCls}-menu-submenu-arrow-icon`]: {
|
|
|
|
color: colorTextDisabled,
|
2022-06-21 11:06:06 +08:00
|
|
|
backgroundColor: colorBgElevated,
|
2022-04-25 10:54:00 +08:00
|
|
|
cursor: 'not-allowed',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/19264
|
|
|
|
[`${menuCls}-submenu-selected ${componentCls}-menu-submenu-title`]: {
|
|
|
|
color: token.colorPrimary,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// Follow code may reuse in other components
|
|
|
|
[
|
2022-06-21 00:34:51 +08:00
|
|
|
initSlideMotion(token, 'slide-up'),
|
|
|
|
initSlideMotion(token, 'slide-down'),
|
|
|
|
initMoveMotion(token, 'move-up'),
|
|
|
|
initMoveMotion(token, 'move-down'),
|
2022-12-04 13:22:57 +08:00
|
|
|
initZoomMotion(token, 'zoom-big'),
|
2022-04-25 10:54:00 +08:00
|
|
|
],
|
|
|
|
];
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
|
|
|
export default genComponentStyleHook(
|
|
|
|
'Dropdown',
|
|
|
|
(token, { rootPrefixCls }) => {
|
|
|
|
const {
|
|
|
|
marginXXS,
|
|
|
|
sizePopupArrow,
|
|
|
|
controlHeight,
|
2022-11-01 15:06:38 +08:00
|
|
|
fontSize,
|
2022-04-25 10:54:00 +08:00
|
|
|
lineHeight,
|
|
|
|
paddingXXS,
|
|
|
|
componentCls,
|
2022-11-01 15:06:38 +08:00
|
|
|
borderRadiusLG,
|
2022-04-25 10:54:00 +08:00
|
|
|
} = token;
|
|
|
|
|
2022-11-01 15:06:38 +08:00
|
|
|
const dropdownPaddingVertical = (controlHeight - fontSize * lineHeight) / 2;
|
2022-09-13 17:07:16 +08:00
|
|
|
const { dropdownArrowOffset } = getArrowOffset({
|
2022-11-01 15:06:38 +08:00
|
|
|
contentRadius: borderRadiusLG,
|
2022-09-13 17:07:16 +08:00
|
|
|
});
|
2022-04-25 10:54:00 +08:00
|
|
|
|
|
|
|
const dropdownToken = mergeToken<DropdownToken>(token, {
|
|
|
|
menuCls: `${componentCls}-menu`,
|
|
|
|
rootPrefixCls,
|
2022-11-02 16:25:28 +08:00
|
|
|
dropdownArrowDistance: sizePopupArrow / 2 + marginXXS,
|
2022-09-13 17:07:16 +08:00
|
|
|
dropdownArrowOffset,
|
2022-04-25 10:54:00 +08:00
|
|
|
dropdownPaddingVertical,
|
2022-09-09 17:47:17 +08:00
|
|
|
dropdownEdgeChildPadding: paddingXXS,
|
2022-04-25 10:54:00 +08:00
|
|
|
});
|
2023-03-28 13:20:59 +08:00
|
|
|
return [genBaseStyle(dropdownToken), genStatusStyle(dropdownToken)];
|
2022-04-25 10:54:00 +08:00
|
|
|
},
|
2022-11-17 23:31:41 +08:00
|
|
|
(token) => ({
|
2022-05-10 17:30:01 +08:00
|
|
|
zIndexPopup: token.zIndexPopupBase + 50,
|
2022-04-25 10:54:00 +08:00
|
|
|
}),
|
|
|
|
);
|