ant-design/components/dropdown/style/index.tsx

466 lines
14 KiB
TypeScript
Raw Normal View History

import { getArrowOffset } from '../../style/placementArrow';
import {
initMoveMotion,
initSlideMotion,
slideDownIn,
slideDownOut,
slideUpIn,
slideUpOut,
} from '../../style/motion';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import genButtonStyle from './button';
import genStatusStyle from './status';
import { genFocusStyle, resetComponent, roundedArrow } from '../../style';
export interface ComponentToken {
zIndexPopup: number;
}
export interface DropdownToken extends FullToken<'Dropdown'> {
rootPrefixCls: string;
dropdownArrowDistance: number;
dropdownArrowOffset: number;
dropdownPaddingVertical: number;
dropdownEdgeChildPadding: number;
menuCls: string;
}
// =============================== Base ===============================
const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
const {
componentCls,
menuCls,
zIndexPopup,
dropdownArrowDistance,
dropdownArrowOffset,
sizePopupArrow,
antCls,
iconCls,
motionDurationMid,
dropdownPaddingVertical,
fontSize,
dropdownEdgeChildPadding,
borderRadius,
colorTextDisabled,
fontSizeIcon,
controlPaddingHorizontal,
2022-06-21 11:06:06 +08:00
colorBgElevated,
2022-08-25 19:39:26 +08:00
boxShadowPopoverArrow,
} = token;
return [
{
[componentCls]: {
...resetComponent(token),
position: 'absolute',
top: -9999,
left: {
_skip_check_: true,
value: -9999,
},
zIndex: zIndexPopup,
display: 'block',
// A placeholder out of dropdown visible range to avoid close when user moving
'&::before': {
position: 'absolute',
[new component] Next tour (#37867) * feat: init * feat: update * feat: upate * feat: update * feat: update * feat: init * feat: init * feat: init * feat: update * feat: update * feat: update * feat: update rc-tour * feat: init component * feat: init component * chore: update pck * doc: update doc * doc: update reviewer * doc: update reviewer * doc: update reviewer * feat: update reviewer * feat: update reviewer * feat: update doc * feat: update deme * feat: update demo doc * feat: update demo * feat: update demo * feat: update style * feat: update dom & style * feat: update dome * feat: update dome * docs: update demo * feat: update doc * feat: update dome * feat: add locale * doc: update locale * doc: add test * feat: add test case * feat: add test case * feat: update package * feat: update ts * feat: update ts * feat: update snapshots * feat: update demo * feat: update demo * feat: update demo * feat: edit maxSize * feat: edit maxSize * feat: update lint * feat: update lint * feat: update style reviewer * feat: update style * feat: merge next * feat: add locale * feat: reset bundleSize * feat: change maxSize * feat: update test coverage * feat: update test coverage * feat: add type * chore: simplify en locale * feat: update * feat: update test snap * docs: demo update * chore: adjust style * chore: adjust style * chore: bump rc-tour * Update package.json * feat: update package * feat: update package * feat: update cover * docs: update api * docs: update overview snap * feat: update token * feat: delete repeat ts * feat: remove finishButtonProps * chore: update demo * feat: tour style * test: fix lint * chore: code clean Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: MadCcc <1075746765@qq.com>
2022-11-02 16:25:28 +08:00
insetBlock: -dropdownArrowDistance + sizePopupArrow / 2,
// insetInlineStart: -7, // FIXME: Seems not work for hidden element
zIndex: -9999,
opacity: 0.0001,
content: '""',
},
[`${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',
},
// =============================================================
// == Arrow ==
// =============================================================
// Offset the popover to account for the dropdown arrow
[`
&-show-arrow&-placement-topLeft,
&-show-arrow&-placement-top,
&-show-arrow&-placement-topRight
`]: {
paddingBottom: dropdownArrowDistance,
},
[`
&-show-arrow&-placement-bottomLeft,
&-show-arrow&-placement-bottom,
&-show-arrow&-placement-bottomRight
`]: {
paddingTop: dropdownArrowDistance,
},
// Note: .popover-arrow is outer, .popover-arrow:after is inner
[`${componentCls}-arrow`]: {
position: 'absolute',
zIndex: 1, // lift it up so the menu wouldn't cask shadow on it
display: 'block',
2022-08-25 19:39:26 +08:00
...roundedArrow(
sizePopupArrow,
token.borderRadiusXS,
token.borderRadiusOuter,
2022-08-25 19:39:26 +08:00
colorBgElevated,
boxShadowPopoverArrow,
),
},
[`
&-placement-top > ${componentCls}-arrow,
&-placement-topLeft > ${componentCls}-arrow,
&-placement-topRight > ${componentCls}-arrow
`]: {
2022-08-25 19:39:26 +08:00
bottom: dropdownArrowDistance,
transform: 'translateY(100%) rotate(180deg)',
},
[`&-placement-top > ${componentCls}-arrow`]: {
left: {
_skip_check_: true,
value: '50%',
},
2022-08-25 19:39:26 +08:00
transform: 'translateX(-50%) translateY(100%) rotate(180deg)',
},
[`&-placement-topLeft > ${componentCls}-arrow`]: {
left: {
_skip_check_: true,
value: dropdownArrowOffset,
},
},
[`&-placement-topRight > ${componentCls}-arrow`]: {
right: {
_skip_check_: true,
value: dropdownArrowOffset,
},
},
[`
&-placement-bottom > ${componentCls}-arrow,
&-placement-bottomLeft > ${componentCls}-arrow,
&-placement-bottomRight > ${componentCls}-arrow
`]: {
2022-08-25 19:39:26 +08:00
top: dropdownArrowDistance,
transform: `translateY(-100%)`,
},
[`&-placement-bottom > ${componentCls}-arrow`]: {
left: {
_skip_check_: true,
value: '50%',
},
2022-08-25 19:39:26 +08:00
transform: `translateY(-100%) translateX(-50%)`,
},
[`&-placement-bottomLeft > ${componentCls}-arrow`]: {
left: {
_skip_check_: true,
value: dropdownArrowOffset,
},
},
[`&-placement-bottomRight > ${componentCls}-arrow`]: {
right: {
_skip_check_: true,
value: dropdownArrowOffset,
},
},
// =============================================================
// == Motion ==
// =============================================================
// When position is not enough for dropdown, the placement will revert.
// We will handle this with revert motion name.
[`&${antCls}-slide-down-enter${antCls}-slide-down-enter-active&-placement-bottomLeft,
&${antCls}-slide-down-appear${antCls}-slide-down-appear-active&-placement-bottomLeft
&${antCls}-slide-down-enter${antCls}-slide-down-enter-active&-placement-bottom,
&${antCls}-slide-down-appear${antCls}-slide-down-appear-active&-placement-bottom,
&${antCls}-slide-down-enter${antCls}-slide-down-enter-active&-placement-bottomRight,
&${antCls}-slide-down-appear${antCls}-slide-down-appear-active&-placement-bottomRight`]: {
animationName: slideUpIn,
},
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft,
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-top,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-top,
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topRight,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topRight`]: {
animationName: slideDownIn,
},
[`&${antCls}-slide-down-leave${antCls}-slide-down-leave-active&-placement-bottomLeft,
&${antCls}-slide-down-leave${antCls}-slide-down-leave-active&-placement-bottom,
&${antCls}-slide-down-leave${antCls}-slide-down-leave-active&-placement-bottomRight`]: {
animationName: slideUpOut,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-top,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topRight`]: {
animationName: slideDownOut,
},
},
},
{
// =============================================================
// == Menu ==
// =============================================================
[`${componentCls} ${menuCls}`]: {
position: 'relative',
margin: 0,
},
[`${menuCls}-submenu-popup`]: {
position: 'absolute',
zIndex: zIndexPopup,
background: 'transparent',
boxShadow: 'none',
transformOrigin: '0 0',
'ul,li': {
listStyle: 'none',
},
ul: {
marginInline: '0.3em',
},
},
[`${componentCls}, ${componentCls}-menu-submenu`]: {
[menuCls]: {
padding: dropdownEdgeChildPadding,
listStyleType: 'none',
2022-06-21 11:06:06 +08:00
backgroundColor: colorBgElevated,
backgroundClip: 'padding-box',
borderRadius: token.borderRadiusLG,
outline: 'none',
boxShadow: token.boxShadowSecondary,
...genFocusStyle(token),
[`${menuCls}-item-group-title`]: {
padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`,
2022-08-04 16:16:50 +08:00
color: token.colorTextDescription,
transition: `all ${motionDurationMid}`,
},
// ======================= Item Content =======================
[`${menuCls}-item`]: {
position: 'relative',
display: 'flex',
alignItems: 'center',
borderRadius: token.borderRadiusSM,
},
[`${menuCls}-item-icon`]: {
minWidth: fontSize,
marginInlineEnd: token.marginXS,
fontSize: token.fontSizeSM,
},
[`${menuCls}-title-content`]: {
flex: 'auto',
'> a': {
color: 'inherit',
transition: `all ${motionDurationMid}`,
'&: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',
fontSize,
lineHeight: token.lineHeight,
cursor: 'pointer',
transition: `all ${motionDurationMid}`,
'&:first-child': !dropdownEdgeChildPadding
? {
borderRadius: `${borderRadius}px ${borderRadius}px 0 0`,
}
: [],
'&:last-child': !dropdownEdgeChildPadding
? {
borderRadius: `0 0 ${borderRadius}px ${borderRadius}px`,
}
: [],
[`&:hover, &-active`]: {
backgroundColor: token.controlItemBgHover,
},
...genFocusStyle(token),
'&-selected': {
color: token.colorPrimary,
backgroundColor: token.controlItemBgActive,
'&:hover, &-active': {
backgroundColor: token.controlItemBgActiveHover,
},
},
'&-disabled': {
color: colorTextDisabled,
cursor: 'not-allowed',
'&:hover': {
color: colorTextDisabled,
2022-06-21 11:06:06 +08:00
backgroundColor: colorBgElevated,
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,
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,
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
[
initSlideMotion(token, 'slide-up'),
initSlideMotion(token, 'slide-down'),
initMoveMotion(token, 'move-up'),
initMoveMotion(token, 'move-down'),
],
];
};
// ============================== Export ==============================
export default genComponentStyleHook(
'Dropdown',
(token, { rootPrefixCls }) => {
const {
marginXXS,
sizePopupArrow,
controlHeight,
fontSize,
lineHeight,
paddingXXS,
componentCls,
borderRadiusOuter,
borderRadiusLG,
} = token;
const dropdownPaddingVertical = (controlHeight - fontSize * lineHeight) / 2;
const { dropdownArrowOffset } = getArrowOffset({
sizePopupArrow,
contentRadius: borderRadiusLG,
borderRadiusOuter,
});
const dropdownToken = mergeToken<DropdownToken>(token, {
menuCls: `${componentCls}-menu`,
rootPrefixCls,
[new component] Next tour (#37867) * feat: init * feat: update * feat: upate * feat: update * feat: update * feat: init * feat: init * feat: init * feat: update * feat: update * feat: update * feat: update rc-tour * feat: init component * feat: init component * chore: update pck * doc: update doc * doc: update reviewer * doc: update reviewer * doc: update reviewer * feat: update reviewer * feat: update reviewer * feat: update doc * feat: update deme * feat: update demo doc * feat: update demo * feat: update demo * feat: update style * feat: update dom & style * feat: update dome * feat: update dome * docs: update demo * feat: update doc * feat: update dome * feat: add locale * doc: update locale * doc: add test * feat: add test case * feat: add test case * feat: update package * feat: update ts * feat: update ts * feat: update snapshots * feat: update demo * feat: update demo * feat: update demo * feat: edit maxSize * feat: edit maxSize * feat: update lint * feat: update lint * feat: update style reviewer * feat: update style * feat: merge next * feat: add locale * feat: reset bundleSize * feat: change maxSize * feat: update test coverage * feat: update test coverage * feat: add type * chore: simplify en locale * feat: update * feat: update test snap * docs: demo update * chore: adjust style * chore: adjust style * chore: bump rc-tour * Update package.json * feat: update package * feat: update package * feat: update cover * docs: update api * docs: update overview snap * feat: update token * feat: delete repeat ts * feat: remove finishButtonProps * chore: update demo * feat: tour style * test: fix lint * chore: code clean Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: MadCcc <1075746765@qq.com>
2022-11-02 16:25:28 +08:00
dropdownArrowDistance: sizePopupArrow / 2 + marginXXS,
dropdownArrowOffset,
dropdownPaddingVertical,
dropdownEdgeChildPadding: paddingXXS,
});
return [
genBaseStyle(dropdownToken),
genButtonStyle(dropdownToken),
genStatusStyle(dropdownToken),
];
},
(token) => ({
zIndexPopup: token.zIndexPopupBase + 50,
}),
);