This commit is contained in:
2026-05-25 17:08:18 +08:00
parent df501f6151
commit f1259b71b5
9178 changed files with 1626125 additions and 0 deletions
+22
View File
@@ -0,0 +1,22 @@
import * as React from 'react';
import type { ButtonHTMLType, ButtonProps } from '../button';
import type { ButtonGroupProps } from '../button/ButtonGroup';
import type { DropdownProps } from './dropdown';
export type DropdownButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text';
export interface DropdownButtonProps extends ButtonGroupProps, DropdownProps {
type?: DropdownButtonType;
htmlType?: ButtonHTMLType;
danger?: boolean;
disabled?: boolean;
loading?: ButtonProps['loading'];
onClick?: React.MouseEventHandler<HTMLElement>;
icon?: React.ReactNode;
href?: string;
children?: React.ReactNode;
title?: string;
buttonsRender?: (buttons: React.ReactNode[]) => React.ReactNode[];
}
type CompoundedComponent = React.FC<DropdownButtonProps> & {};
/** @deprecated Please use Space.Compact + Dropdown + Button instead */
declare const DropdownButton: CompoundedComponent;
export default DropdownButton;
+129
View File
@@ -0,0 +1,129 @@
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _EllipsisOutlined = _interopRequireDefault(require("@ant-design/icons/EllipsisOutlined"));
var _clsx = require("clsx");
var _warning = require("../_util/warning");
var _button = _interopRequireDefault(require("../button"));
var _configProvider = require("../config-provider");
var _space = _interopRequireDefault(require("../space"));
var _Compact = require("../space/Compact");
var _dropdown = _interopRequireDefault(require("./dropdown"));
/** @deprecated Please use Space.Compact + Dropdown + Button instead */
const DropdownButton = props => {
const {
getPopupContainer: getContextPopupContainer,
getPrefixCls,
direction
} = React.useContext(_configProvider.ConfigContext);
const {
prefixCls: customizePrefixCls,
type = 'default',
danger,
disabled,
loading,
onClick,
htmlType,
children,
className,
menu,
arrow,
autoFocus,
trigger,
align,
open,
onOpenChange,
placement,
getPopupContainer,
href,
icon = /*#__PURE__*/React.createElement(_EllipsisOutlined.default, null),
title,
buttonsRender = buttons => buttons,
mouseEnterDelay,
mouseLeaveDelay,
overlayClassName,
overlayStyle,
destroyOnHidden,
destroyPopupOnHide,
dropdownRender,
popupRender,
...restProps
} = props;
const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
const buttonPrefixCls = `${prefixCls}-button`;
const mergedPopupRender = popupRender || dropdownRender;
const dropdownProps = {
menu,
arrow,
autoFocus,
align,
disabled,
trigger: disabled ? [] : trigger,
onOpenChange,
getPopupContainer: getPopupContainer || getContextPopupContainer,
mouseEnterDelay,
mouseLeaveDelay,
classNames: {
root: overlayClassName
},
styles: {
root: overlayStyle
},
destroyOnHidden,
popupRender: mergedPopupRender
};
const {
compactSize,
compactItemClassnames
} = (0, _Compact.useCompactItemContext)(prefixCls, direction);
const classes = (0, _clsx.clsx)(buttonPrefixCls, compactItemClassnames, className);
if ('destroyPopupOnHide' in props) {
dropdownProps.destroyPopupOnHide = destroyPopupOnHide;
}
if ('open' in props) {
dropdownProps.open = open;
}
if ('placement' in props) {
dropdownProps.placement = placement;
} else {
dropdownProps.placement = direction === 'rtl' ? 'bottomLeft' : 'bottomRight';
}
// ============================== Warn ==============================
if (process.env.NODE_ENV !== 'production') {
const warning = (0, _warning.devUseWarning)('Dropdown.Button');
warning.deprecated(false, 'Dropdown.Button', 'Space.Compact + Dropdown + Button');
}
const leftButton = /*#__PURE__*/React.createElement(_button.default, {
type: type,
danger: danger,
disabled: disabled,
loading: loading,
onClick: onClick,
htmlType: htmlType,
href: href,
title: title
}, children);
const rightButton = /*#__PURE__*/React.createElement(_button.default, {
type: type,
danger: danger,
icon: icon
});
const [leftButtonToRender, rightButtonToRender] = buttonsRender([leftButton, rightButton]);
return /*#__PURE__*/React.createElement(_space.default.Compact, {
className: classes,
size: compactSize,
block: true,
...restProps
}, leftButtonToRender, /*#__PURE__*/React.createElement(_dropdown.default, {
...dropdownProps
}, rightButtonToRender));
};
DropdownButton.__ANT_BUTTON = true;
var _default = exports.default = DropdownButton;
+75
View File
@@ -0,0 +1,75 @@
import * as React from 'react';
import type { MenuProps as RcMenuProps } from '@rc-component/menu';
import type { AlignType } from '@rc-component/trigger';
import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
import type { AdjustOverflow } from '../_util/placements';
import type { MenuProps } from '../menu';
declare const _Placements: readonly ["topLeft", "topCenter", "topRight", "bottomLeft", "bottomCenter", "bottomRight", "top", "bottom"];
type Placement = (typeof _Placements)[number];
export type DropdownArrowOptions = {
pointAtCenter?: boolean;
};
export type DropdownSemanticName = keyof DropdownSemanticClassNames & keyof DropdownSemanticStyles;
export type DropdownSemanticClassNames = {
root?: string;
item?: string;
itemTitle?: string;
itemIcon?: string;
itemContent?: string;
};
export type DropdownSemanticStyles = {
root?: React.CSSProperties;
item?: React.CSSProperties;
itemTitle?: React.CSSProperties;
itemIcon?: React.CSSProperties;
itemContent?: React.CSSProperties;
};
export type DropdownClassNamesType = SemanticClassNamesType<DropdownProps, DropdownSemanticClassNames>;
export type DropdownStylesType = SemanticStylesType<DropdownProps, DropdownSemanticStyles>;
export interface DropdownProps {
classNames?: DropdownClassNamesType;
styles?: DropdownStylesType;
menu?: MenuProps & {
activeKey?: RcMenuProps['activeKey'];
};
autoFocus?: boolean;
arrow?: boolean | DropdownArrowOptions;
trigger?: ('click' | 'hover' | 'contextMenu')[];
/** @deprecated Please use `popupRender` instead */
dropdownRender?: (originNode: React.ReactNode) => React.ReactNode;
popupRender?: (originNode: React.ReactNode) => React.ReactNode;
onOpenChange?: (open: boolean, info: {
source: 'trigger' | 'menu';
}) => void;
open?: boolean;
disabled?: boolean;
/** @deprecated Please use `destroyOnHidden` instead */
destroyPopupOnHide?: boolean;
/**
* @since 5.25.0
*/
destroyOnHidden?: boolean;
align?: AlignType;
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
prefixCls?: string;
className?: string;
rootClassName?: string;
transitionName?: string;
placement?: Placement;
/** @deprecated please use `classNames.root` instead.*/
overlayClassName?: string;
/** @deprecated please use `styles.root` instead.*/
overlayStyle?: React.CSSProperties;
forceRender?: boolean;
mouseEnterDelay?: number;
mouseLeaveDelay?: number;
openClassName?: string;
children?: React.ReactNode;
autoAdjustOverflow?: boolean | AdjustOverflow;
}
type CompoundedComponent = React.FC<DropdownProps> & {
_InternalPanelDoNotUseOrYouWillBeFired: typeof WrapPurePanel;
};
declare const Dropdown: CompoundedComponent;
declare const WrapPurePanel: React.FC<DropdownProps>;
export default Dropdown;
+246
View File
@@ -0,0 +1,246 @@
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _LeftOutlined = _interopRequireDefault(require("@ant-design/icons/LeftOutlined"));
var _RightOutlined = _interopRequireDefault(require("@ant-design/icons/RightOutlined"));
var _dropdown = _interopRequireDefault(require("@rc-component/dropdown"));
var _util = require("@rc-component/util");
var _clsx = require("clsx");
var _hooks = require("../_util/hooks");
var _is = require("../_util/is");
var _placements = _interopRequireDefault(require("../_util/placements"));
var _PurePanel = _interopRequireDefault(require("../_util/PurePanel"));
var _reactNode = require("../_util/reactNode");
var _warning = require("../_util/warning");
var _zindexContext = _interopRequireDefault(require("../_util/zindexContext"));
var _context = require("../config-provider/context");
var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
var _menu = _interopRequireDefault(require("../menu"));
var _OverrideContext = require("../menu/OverrideContext");
var _internal = require("../theme/internal");
var _style = _interopRequireDefault(require("./style"));
const _Placements = ['topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight', 'top', 'bottom'];
const Dropdown = props => {
const {
menu,
arrow,
prefixCls: customizePrefixCls,
children,
trigger,
disabled,
dropdownRender,
popupRender,
getPopupContainer,
overlayClassName,
rootClassName,
overlayStyle,
open,
onOpenChange,
mouseEnterDelay = 0.15,
mouseLeaveDelay = 0.1,
autoAdjustOverflow = true,
placement = '',
transitionName,
classNames,
styles,
destroyPopupOnHide,
destroyOnHidden
} = props;
const {
getPrefixCls,
direction,
getPopupContainer: getContextPopupContainer,
className: contextClassName,
style: contextStyle,
classNames: contextClassNames,
styles: contextStyles
} = (0, _context.useComponentConfig)('dropdown');
const mergedProps = {
...props,
mouseEnterDelay,
mouseLeaveDelay,
autoAdjustOverflow
};
const [mergedClassNames, mergedStyles] = (0, _hooks.useMergeSemantic)([contextClassNames, classNames], [contextStyles, styles], {
props: mergedProps
});
const mergedRootStyles = {
...contextStyle,
...overlayStyle,
...mergedStyles.root
};
const mergedPopupRender = popupRender || dropdownRender;
// =================== Warning =====================
const warning = (0, _warning.devUseWarning)('Dropdown');
if (process.env.NODE_ENV !== 'production') {
const deprecatedProps = {
dropdownRender: 'popupRender',
destroyPopupOnHide: 'destroyOnHidden',
overlayClassName: 'classNames.root',
overlayStyle: 'styles.root'
};
Object.entries(deprecatedProps).forEach(([deprecatedName, newName]) => {
warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
});
if (placement.includes('Center')) {
warning.deprecated(!placement.includes('Center'), `placement: ${placement}`, `placement: ${placement.slice(0, placement.indexOf('Center'))}`);
}
}
const memoTransitionName = React.useMemo(() => {
const rootPrefixCls = getPrefixCls();
if (transitionName !== undefined) {
return transitionName;
}
if (placement.includes('top')) {
return `${rootPrefixCls}-slide-down`;
}
return `${rootPrefixCls}-slide-up`;
}, [getPrefixCls, placement, transitionName]);
const memoPlacement = React.useMemo(() => {
if (!placement) {
return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
}
if (placement.includes('Center')) {
return placement.slice(0, placement.indexOf('Center'));
}
return placement;
}, [placement, direction]);
const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
const rootCls = (0, _useCSSVarCls.default)(prefixCls);
const [hashId, cssVarCls] = (0, _style.default)(prefixCls, rootCls);
const [, token] = (0, _internal.useToken)();
const child = React.Children.only((0, _is.isPrimitive)(children) ? /*#__PURE__*/React.createElement("span", null, children) : children);
const popupTrigger = (0, _reactNode.cloneElement)(child, {
className: (0, _clsx.clsx)(`${prefixCls}-trigger`, {
[`${prefixCls}-rtl`]: direction === 'rtl'
}, child.props.className),
disabled: child.props.disabled ?? disabled
});
const triggerActions = disabled ? [] : trigger;
const alignPoint = !!triggerActions?.includes('contextMenu');
// =========================== Open ============================
const [mergedOpen, setOpen] = (0, _util.useControlledState)(false, open);
const onInnerOpenChange = (0, _util.useEvent)(nextOpen => {
onOpenChange?.(nextOpen, {
source: 'trigger'
});
setOpen(nextOpen);
});
// =========================== Overlay ============================
const overlayClassNameCustomized = (0, _clsx.clsx)(overlayClassName, rootClassName, hashId, cssVarCls, rootCls, contextClassName, mergedClassNames.root, {
[`${prefixCls}-rtl`]: direction === 'rtl'
});
const builtinPlacements = (0, _placements.default)({
arrowPointAtCenter: (0, _is.isPlainObject)(arrow) && arrow.pointAtCenter,
autoAdjustOverflow,
offset: token.marginXXS,
arrowWidth: arrow ? token.sizePopupArrow : 0,
borderRadius: token.borderRadius
});
const onMenuClick = (0, _util.useEvent)(() => {
if (menu?.selectable && menu?.multiple) {
return;
}
onOpenChange?.(false, {
source: 'menu'
});
setOpen(false);
});
const renderOverlay = () => {
// @rc-component/dropdown already can process the function of overlay, but we have check logic here.
// So we need render the element to check and pass back to @rc-component/dropdown.
const menuClassNames = (0, _util.omit)(mergedClassNames, ['root']);
const menuStyles = (0, _util.omit)(mergedStyles, ['root']);
let overlayNode;
if (menu?.items) {
overlayNode = /*#__PURE__*/React.createElement(_menu.default, {
...menu,
classNames: {
...menuClassNames,
subMenu: {
...menuClassNames
}
},
styles: {
...menuStyles,
subMenu: {
...menuStyles
}
}
});
}
if (mergedPopupRender) {
overlayNode = mergedPopupRender(overlayNode);
}
overlayNode = React.Children.only(typeof overlayNode === 'string' ? /*#__PURE__*/React.createElement("span", null, overlayNode) : overlayNode);
return /*#__PURE__*/React.createElement(_OverrideContext.OverrideProvider, {
prefixCls: `${prefixCls}-menu`,
rootClassName: (0, _clsx.clsx)(cssVarCls, rootCls),
expandIcon: /*#__PURE__*/React.createElement("span", {
className: `${prefixCls}-menu-submenu-arrow`
}, direction === 'rtl' ? (/*#__PURE__*/React.createElement(_LeftOutlined.default, {
className: `${prefixCls}-menu-submenu-arrow-icon`
})) : (/*#__PURE__*/React.createElement(_RightOutlined.default, {
className: `${prefixCls}-menu-submenu-arrow-icon`
}))),
mode: "vertical",
selectable: false,
onClick: onMenuClick,
validator: ({
mode
}) => {
// Warning if use other mode
process.env.NODE_ENV !== "production" ? warning(!mode || mode === 'vertical', 'usage', `mode="${mode}" is not supported for Dropdown's Menu.`) : void 0;
}
}, overlayNode);
};
// =========================== zIndex ============================
const [zIndex, contextZIndex] = (0, _hooks.useZIndex)('Dropdown', mergedRootStyles.zIndex);
// ============================ Render ============================
let renderNode = /*#__PURE__*/React.createElement(_dropdown.default, {
alignPoint: alignPoint,
...(0, _util.omit)(props, ['rootClassName', 'onOpenChange']),
mouseEnterDelay: mouseEnterDelay,
mouseLeaveDelay: mouseLeaveDelay,
visible: mergedOpen,
builtinPlacements: builtinPlacements,
arrow: !!arrow,
overlayClassName: overlayClassNameCustomized,
prefixCls: prefixCls,
getPopupContainer: getPopupContainer || getContextPopupContainer,
transitionName: memoTransitionName,
trigger: triggerActions,
overlay: renderOverlay,
placement: memoPlacement,
onVisibleChange: onInnerOpenChange,
overlayStyle: {
...mergedRootStyles,
zIndex
},
autoDestroy: destroyOnHidden ?? destroyPopupOnHide
}, popupTrigger);
if (zIndex) {
renderNode = /*#__PURE__*/React.createElement(_zindexContext.default.Provider, {
value: contextZIndex
}, renderNode);
}
return renderNode;
};
// We don't care debug panel
const PurePanel = (0, _PurePanel.default)(Dropdown, 'align', undefined, 'dropdown', prefixCls => prefixCls);
/* istanbul ignore next */
const WrapPurePanel = props => (/*#__PURE__*/React.createElement(PurePanel, {
...props
}, /*#__PURE__*/React.createElement("span", null)));
Dropdown._InternalPanelDoNotUseOrYouWillBeFired = WrapPurePanel;
if (process.env.NODE_ENV !== 'production') {
Dropdown.displayName = 'Dropdown';
}
var _default = exports.default = Dropdown;
+8
View File
@@ -0,0 +1,8 @@
import InternalDropdown from './dropdown';
import DropdownButton from './dropdown-button';
export type { DropdownProps as DropDownProps, DropdownProps, DropdownSemanticClassNames, DropdownSemanticName, DropdownSemanticStyles, } from './dropdown';
export type { DropdownButtonProps, DropdownButtonType } from './dropdown-button';
declare const Dropdown: typeof InternalDropdown & {
Button: typeof DropdownButton;
};
export default Dropdown;
+14
View File
@@ -0,0 +1,14 @@
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _dropdown = _interopRequireDefault(require("./dropdown"));
var _dropdownButton = _interopRequireDefault(require("./dropdown-button"));
const Dropdown = _dropdown.default;
/** @deprecated Please use Space.Compact + Dropdown + Button instead */
Dropdown.Button = _dropdownButton.default;
var _default = exports.default = Dropdown;
+40
View File
@@ -0,0 +1,40 @@
import type { CSSProperties } from 'react';
import type { ArrowOffsetToken } from '../../style/placementArrow';
import type { ArrowToken } from '../../style/roundedArrow';
import type { FullToken, GetDefaultToken } from '../../theme/internal';
export interface ComponentToken extends ArrowToken, ArrowOffsetToken {
/**
* @desc 下拉菜单 z-index
* @descEN z-index of dropdown
*/
zIndexPopup: number;
/**
* @desc 下拉菜单纵向内边距
* @descEN Vertical padding of dropdown
*/
paddingBlock: CSSProperties['paddingBlock'];
}
/**
* @desc Dropdown 组件的 Token
* @descEN Token for Dropdown component
*/
export interface DropdownToken extends FullToken<'Dropdown'> {
/**
* @desc 下拉箭头距离
* @descEN Distance of dropdown arrow
*/
dropdownArrowDistance: number | string;
/**
* @desc 下拉菜单边缘子项内边距
* @descEN Padding of edge child in dropdown menu
*/
dropdownEdgeChildPadding: number;
/**
* @desc 菜单类名
* @descEN Menu class name
*/
menuCls: string;
}
export declare const prepareComponentToken: GetDefaultToken<'Dropdown'>;
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
export default _default;
+306
View File
@@ -0,0 +1,306 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.prepareComponentToken = exports.default = void 0;
var _cssinjs = require("@ant-design/cssinjs");
var _style = require("../../style");
var _motion = require("../../style/motion");
var _placementArrow = _interopRequireWildcard(require("../../style/placementArrow"));
var _roundedArrow = require("../../style/roundedArrow");
var _internal = require("../../theme/internal");
var _status = _interopRequireDefault(require("./status"));
// =============================== Base ===============================
const genBaseStyle = token => {
const {
componentCls,
menuCls,
zIndexPopup,
dropdownArrowDistance,
sizePopupArrow,
antCls,
iconCls,
motionDurationMid,
paddingBlock,
fontSize,
dropdownEdgeChildPadding,
colorTextDisabled,
fontSizeIcon,
controlPaddingHorizontal,
colorBgElevated
} = token;
return [{
[componentCls]: {
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',
insetBlock: token.calc(sizePopupArrow).div(2).sub(dropdownArrowDistance).equal(),
// insetInlineStart: -7, // FIXME: Seems not work for hidden element
zIndex: -9999,
opacity: 0.0001,
content: '""'
},
// Makes vertical dropdowns have a scrollbar once they become taller than the viewport.
'&-menu-vertical': {
maxHeight: '100vh',
overflowY: 'auto'
},
[`&-trigger${antCls}-btn`]: {
[`& > ${iconCls}-down, & > ${antCls}-btn-icon > ${iconCls}-down`]: {
fontSize: fontSizeIcon
}
},
[`${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.
[`&${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: _motion.slideUpIn
},
[`&${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: _motion.slideDownIn
},
[`&${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: _motion.slideUpOut
},
[`&${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: _motion.slideDownOut
}
}
},
// =============================================================
// == Arrow style ==
// =============================================================
(0, _placementArrow.default)(token, colorBgElevated, {
arrowPlacement: {
top: true,
bottom: true
}
}), {
// =============================================================
// == 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',
margin: 0
}
},
[`${componentCls}, ${componentCls}-menu-submenu`]: {
...(0, _style.resetComponent)(token),
[menuCls]: {
padding: dropdownEdgeChildPadding,
listStyleType: 'none',
backgroundColor: colorBgElevated,
backgroundClip: 'padding-box',
borderRadius: token.borderRadiusLG,
outline: 'none',
boxShadow: token.boxShadowSecondary,
...(0, _style.genFocusStyle)(token),
'&:empty': {
padding: 0,
boxShadow: 'none'
},
[`${menuCls}-item-group-title`]: {
padding: `${(0, _cssinjs.unit)(paddingBlock)} ${(0, _cssinjs.unit)(controlPaddingHorizontal)}`,
color: token.colorTextDescription,
transition: `all ${motionDurationMid}`
},
// ======================= Item Content =======================
[`${menuCls}-item`]: {
position: 'relative',
display: 'flex',
alignItems: 'center'
},
[`${menuCls}-item-icon`]: {
minWidth: fontSize,
marginInlineEnd: token.marginXS,
fontSize: token.fontSizeSM
},
[`${menuCls}-title-content`]: {
flex: 'auto',
'&-with-extra': {
display: 'inline-flex',
alignItems: 'center',
width: '100%'
},
'> a': {
color: 'inherit',
transition: `all ${motionDurationMid}`,
'&:hover': {
color: 'inherit'
},
'&::after': {
position: 'absolute',
inset: 0,
content: '""'
}
},
[`${menuCls}-item-extra`]: {
paddingInlineStart: token.padding,
marginInlineStart: 'auto',
fontSize: token.fontSizeSM,
color: token.colorTextDescription
}
},
// =========================== Item ===========================
[`${menuCls}-item, ${menuCls}-submenu-title`]: {
display: 'flex',
margin: 0,
padding: `${(0, _cssinjs.unit)(paddingBlock)} ${(0, _cssinjs.unit)(controlPaddingHorizontal)}`,
color: token.colorText,
fontWeight: 'normal',
fontSize,
lineHeight: token.lineHeight,
cursor: 'pointer',
transition: `all ${motionDurationMid}`,
borderRadius: token.borderRadiusSM,
'&:hover, &-active': {
backgroundColor: token.controlItemBgHover
},
...(0, _style.genFocusStyle)(token),
'&-selected': {
color: token.colorPrimary,
backgroundColor: token.controlItemBgActive,
'&:hover, &-active': {
backgroundColor: token.controlItemBgActiveHover
}
},
'&-disabled': {
color: colorTextDisabled,
cursor: 'not-allowed',
'&:hover': {
color: colorTextDisabled,
backgroundColor: colorBgElevated,
cursor: 'not-allowed'
},
a: {
pointerEvents: 'none'
}
},
'&-divider': {
height: 1,
// By design
margin: `${(0, _cssinjs.unit)(token.marginXXS)} 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',
color: token.colorIcon,
fontSize: fontSizeIcon,
fontStyle: 'normal'
}
}
},
[`${menuCls}-item-group-list`]: {
margin: `0 ${(0, _cssinjs.unit)(token.marginXS)}`,
padding: 0,
listStyle: 'none'
},
[`${menuCls}-submenu-title`]: {
paddingInlineEnd: token.calc(controlPaddingHorizontal).add(token.fontSizeSM).equal()
},
[`${menuCls}-submenu-vertical`]: {
position: 'relative'
},
[`${menuCls}-submenu${menuCls}-submenu-disabled ${componentCls}-menu-submenu-title`]: {
[`&, ${componentCls}-menu-submenu-arrow-icon`]: {
color: colorTextDisabled,
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
[(0, _motion.initSlideMotion)(token, 'slide-up'), (0, _motion.initSlideMotion)(token, 'slide-down'), (0, _motion.initMoveMotion)(token, 'move-up'), (0, _motion.initMoveMotion)(token, 'move-down'), (0, _motion.initZoomMotion)(token, 'zoom-big')]];
};
// ============================== Export ==============================
const prepareComponentToken = token => ({
zIndexPopup: token.zIndexPopupBase + 50,
paddingBlock: (token.controlHeight - token.fontSize * token.lineHeight) / 2,
...(0, _placementArrow.getArrowOffsetToken)({
contentRadius: token.borderRadiusLG,
limitVerticalRadius: true
}),
...(0, _roundedArrow.getArrowToken)(token)
});
exports.prepareComponentToken = prepareComponentToken;
var _default = exports.default = (0, _internal.genStyleHooks)('Dropdown', token => {
const {
marginXXS,
sizePopupArrow,
paddingXXS,
componentCls
} = token;
const dropdownToken = (0, _internal.mergeToken)(token, {
menuCls: `${componentCls}-menu`,
dropdownArrowDistance: token.calc(sizePopupArrow).div(2).add(marginXXS).equal(),
dropdownEdgeChildPadding: paddingXXS
});
return [genBaseStyle(dropdownToken), (0, _status.default)(dropdownToken)];
}, prepareComponentToken, {
resetStyle: false
});
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { DropdownToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
declare const genStatusStyle: GenerateStyle<DropdownToken, CSSObject>;
export default genStatusStyle;
+29
View File
@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
const genStatusStyle = token => {
const {
componentCls,
menuCls,
colorError,
colorTextLightSolid
} = token;
const itemCls = `${menuCls}-item`;
return {
[`${componentCls}, ${componentCls}-menu-submenu`]: {
[`${menuCls} ${itemCls}`]: {
[`&${itemCls}-danger:not(${itemCls}-disabled)`]: {
color: colorError,
'&:hover': {
color: colorTextLightSolid,
backgroundColor: colorError
}
}
}
}
};
};
var _default = exports.default = genStatusStyle;