antd
Version:
An enterprise-class UI design language and React components implementation
303 lines (295 loc) • 13.8 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { TinyColor } from '@ctrl/tinycolor';
import { genCollapseMotion, initSlideMotion, initZoomMotion } from '../../style/motion';
import { genComponentStyleHook, mergeToken } from '../../theme';
import getHorizontalStyle from './horizontal';
import getRTLStyle from './rtl';
import getThemeStyle from './theme';
import getVerticalStyle from './vertical';
import { clearFix, resetComponent, resetIcon } from '../../style'; // =============================== Base ===============================
var getBaseStyle = function getBaseStyle(token) {
var _$concat$concat, _$concat5, _extends3;
var antCls = token.antCls,
componentCls = token.componentCls,
fontSize = token.fontSize,
motionDurationSlow = token.motionDurationSlow,
motionDurationMid = token.motionDurationMid,
motionEaseInOut = token.motionEaseInOut,
motionEaseOut = token.motionEaseOut,
lineHeight = token.lineHeight,
paddingXS = token.paddingXS,
padding = token.padding,
colorSplit = token.colorSplit,
lineWidth = token.lineWidth,
iconCls = token.iconCls,
zIndexPopup = token.zIndexPopup,
radiusBase = token.radiusBase,
menuArrowSize = token.menuArrowSize,
controlHeightSM = token.controlHeightSM,
menuArrowOffset = token.menuArrowOffset,
lineType = token.lineType,
menuPanelMaskInset = token.menuPanelMaskInset;
return [// Misc
_defineProperty({
'': _defineProperty({}, "".concat(componentCls), _extends(_extends({}, clearFix()), _defineProperty({}, "&-hidden", {
display: 'none'
})))
}, "".concat(componentCls, "-submenu-hidden"), {
display: 'none'
}), _defineProperty({}, componentCls, _extends(_extends({}, resetComponent(token)), (_extends3 = {
marginBottom: 0,
paddingInlineStart: 0,
// Override default ul/ol
fontSize: fontSize,
lineHeight: 0,
listStyle: 'none',
outline: 'none',
transition: ["background ".concat(motionDurationSlow), // Magic cubic here but smooth transition
"width ".concat(motionDurationSlow, " cubic-bezier(0.2, 0, 0, 1) 0s")].join(',')
}, _defineProperty(_extends3, "ul, ol", {
margin: 0,
padding: 0,
listStyle: 'none'
}), _defineProperty(_extends3, "&-overflow", _defineProperty({
display: 'flex'
}, "".concat(componentCls, "-item"), {
flex: 'none'
})), _defineProperty(_extends3, "".concat(componentCls, "-item,").concat(componentCls, "-submenu,"), {
borderRadius: token.radiusItem
}), _defineProperty(_extends3, "".concat(componentCls, "-item-group-title"), {
padding: "".concat(paddingXS, "px ").concat(padding, "px"),
fontSize: fontSize,
lineHeight: lineHeight,
transition: "all ".concat(motionDurationSlow)
}), _defineProperty(_extends3, "&-horizontal ".concat(componentCls, "-submenu"), {
transition: ["border-color ".concat(motionDurationSlow, " ").concat(motionEaseInOut), "background ".concat(motionDurationSlow, " ").concat(motionEaseInOut)].join(',')
}), _defineProperty(_extends3, "".concat(componentCls, "-submenu, ").concat(componentCls, "-submenu-inline"), {
transition: ["border-color ".concat(motionDurationSlow, " ").concat(motionEaseInOut), "background ".concat(motionDurationSlow, " ").concat(motionEaseInOut), "padding ".concat(motionDurationMid, " ").concat(motionEaseInOut)].join(',')
}), _defineProperty(_extends3, "".concat(componentCls, "-submenu ").concat(componentCls, "-sub"), {
cursor: 'initial',
transition: ["background ".concat(motionDurationSlow, " ").concat(motionEaseInOut), "padding ".concat(motionDurationSlow, " ").concat(motionEaseInOut)]
}), _defineProperty(_extends3, "".concat(componentCls, "-title-content"), {
transition: "color ".concat(motionDurationSlow)
}), _defineProperty(_extends3, "".concat(componentCls, "-item a"), {
'&::before': {
position: 'absolute',
inset: 0,
backgroundColor: 'transparent',
content: '""'
}
}), _defineProperty(_extends3, "".concat(componentCls, "-item-divider"), {
overflow: 'hidden',
lineHeight: 0,
borderColor: colorSplit,
borderStyle: lineType,
borderTopWidth: lineWidth,
marginBlock: lineWidth,
padding: 0,
'&-dashed': {
borderStyle: 'dashed'
}
}), _defineProperty(_extends3, "".concat(componentCls, "-item, ").concat(componentCls, "-submenu-title"), (_$concat$concat = {
position: 'relative',
display: 'block',
margin: 0,
// paddingInline: menuItemPaddingInline,
whiteSpace: 'nowrap',
cursor: 'pointer',
transition: ["border-color ".concat(motionDurationSlow), "background ".concat(motionDurationSlow), "padding ".concat(motionDurationSlow, " ").concat(motionEaseInOut)].join(',')
}, _defineProperty(_$concat$concat, "".concat(componentCls, "-item-icon, ").concat(iconCls), {
minWidth: fontSize,
fontSize: fontSize,
transition: ["font-size ".concat(motionDurationMid, " ").concat(motionEaseOut), "margin ".concat(motionDurationSlow, " ").concat(motionEaseInOut), "color ".concat(motionDurationSlow)].join(','),
'+ span': {
marginInlineStart: controlHeightSM - fontSize,
opacity: 1,
transition: ["opacity ".concat(motionDurationSlow, " ").concat(motionEaseInOut), "margin ".concat(motionDurationSlow), "color ".concat(motionDurationSlow)].join(',')
}
}), _defineProperty(_$concat$concat, "".concat(componentCls, "-item-icon"), _extends({}, resetIcon())), _defineProperty(_$concat$concat, "&.".concat(componentCls, "-item-only-child"), _defineProperty({}, "> ".concat(iconCls, ", > ").concat(componentCls, "-item-icon"), {
marginInlineEnd: 0
})), _$concat$concat)), _defineProperty(_extends3, "".concat(componentCls, "-item-disabled, ").concat(componentCls, "-submenu-disabled"), _defineProperty({
background: 'none !important',
cursor: 'not-allowed',
'&::after': {
borderColor: 'transparent !important'
},
a: {
color: 'inherit !important',
pointerEvents: 'none'
}
}, "> ".concat(componentCls, "-submenu-title"), {
color: 'inherit !important',
cursor: 'not-allowed'
})), _defineProperty(_extends3, "".concat(componentCls, "-item-group"), _defineProperty({}, "".concat(componentCls, "-item-group-list"), _defineProperty({
margin: 0,
padding: 0
}, "".concat(componentCls, "-item, ").concat(componentCls, "-submenu-title"), {
paddingInline: "".concat(fontSize * 2, "px ").concat(padding, "px")
}))), _defineProperty(_extends3, '&-submenu', _defineProperty({
'&-popup': {
position: 'absolute',
zIndex: zIndexPopup,
background: 'transparent',
borderRadius: radiusBase,
boxShadow: 'none',
transformOrigin: '0 0',
// https://github.com/ant-design/ant-design/issues/13955
'&::before': {
position: 'absolute',
inset: "".concat(menuPanelMaskInset, "px 0 0"),
zIndex: -1,
width: '100%',
height: '100%',
opacity: 0,
content: '""'
}
},
// https://github.com/ant-design/ant-design/issues/13955
'&-placement-rightTop::before': {
top: 0,
insetInlineStart: menuPanelMaskInset
}
}, "> ".concat(componentCls), _defineProperty({
borderRadius: radiusBase
}, "".concat(componentCls, "-submenu-title::after"), {
transition: "transform ".concat(motionDurationSlow, " ").concat(motionEaseInOut)
}))), _defineProperty(_extends3, "".concat(componentCls, "-submenu"), (_$concat5 = {}, _defineProperty(_$concat5, "&-expand-icon, &-arrow", {
position: 'absolute',
top: '50%',
insetInlineEnd: token.margin,
width: menuArrowSize,
color: 'currentcolor',
transform: 'translateY(-50%)',
transition: "transform ".concat(motionDurationSlow, " ").concat(motionEaseInOut)
}), _defineProperty(_$concat5, '&-arrow', {
// →
'&::before, &::after': {
position: 'absolute',
width: menuArrowSize * 0.6,
height: menuArrowSize * 0.15,
backgroundColor: 'currentcolor',
borderRadius: radiusBase,
transition: ["background ".concat(motionDurationSlow, " ").concat(motionEaseInOut), "transform ".concat(motionDurationSlow, " ").concat(motionEaseInOut), "top ".concat(motionDurationSlow, " ").concat(motionEaseInOut), "color ".concat(motionDurationSlow, " ").concat(motionEaseInOut)].join(','),
content: '""'
},
'&::before': {
transform: "rotate(45deg) translateY(-".concat(menuArrowOffset, ")")
},
'&::after': {
transform: "rotate(-45deg) translateY(".concat(menuArrowOffset, ")")
}
}), _$concat5)), _defineProperty(_extends3, "&-inline-collapsed ".concat(componentCls, "-submenu-arrow,\n &-inline ").concat(componentCls, "-submenu-arrow"), {
// ↓
'&::before': {
transform: "rotate(-45deg) translateX(".concat(menuArrowOffset, ")")
},
'&::after': {
transform: "rotate(45deg) translateX(-".concat(menuArrowOffset, ")")
}
}), _defineProperty(_extends3, "".concat(componentCls, "-submenu-open").concat(componentCls, "-submenu-inline > ").concat(componentCls, "-submenu-title > ").concat(componentCls, "-submenu-arrow"), {
// ↑
transform: "translateY(-".concat(menuArrowSize * 0.2, "px)"),
'&::after': {
transform: "rotate(-45deg) translateX(-".concat(menuArrowOffset, ")")
},
'&::before': {
transform: "rotate(45deg) translateX(".concat(menuArrowOffset, ")")
}
}), _extends3))), // Integration with header element so menu items have the same height
_defineProperty({}, "".concat(antCls, "-layout-header"), _defineProperty({}, componentCls, {
lineHeight: 'inherit'
}))];
}; // ============================== Export ==============================
export default (function (prefixCls, injectStyle) {
var useOriginHook = genComponentStyleHook('Menu', function (token, _ref5) {
var overrideComponentToken = _ref5.overrideComponentToken;
// Dropdown will handle menu style self. We do not need to handle this.
if (injectStyle === false) {
return [];
}
var colorPrimary = token.colorPrimary,
colorError = token.colorError,
colorErrorHover = token.colorErrorHover,
colorTextLightSolid = token.colorTextLightSolid,
colorTextSecondary = token.colorTextSecondary;
var controlHeightLG = token.controlHeightLG,
fontSize = token.fontSize;
var menuArrowSize = fontSize / 7 * 5; // Menu Token
var menuToken = mergeToken(token, {
menuItemHeight: controlHeightLG,
menuItemPaddingInline: token.margin,
menuItemMarginInline: token.marginXXS,
menuArrowSize: menuArrowSize,
menuHorizontalHeight: controlHeightLG * 1.15,
menuArrowOffset: "".concat(menuArrowSize * 0.25, "px"),
menuPanelMaskInset: -7 // Still a hardcode here since it's offset by rc-align
});
var menuDarkToken = mergeToken(menuToken, {
colorItemText: new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString(),
colorItemTextHover: colorTextLightSolid,
colorGroupTitle: colorTextSecondary,
colorItemTextSelected: colorTextLightSolid,
colorItemBg: '#001529',
colorSubItemBg: '#000c17',
colorItemBgActive: 'transparent',
colorItemBgSelected: colorPrimary,
colorActiveBarWidth: 0,
colorActiveBarHeight: 0,
colorActiveBarBorderSize: 0,
// Disabled
colorItemTextDisabled: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
// Danger
colorDangerItemText: colorError,
colorDangerItemTextHover: colorErrorHover,
colorDangerItemTextSelected: colorTextLightSolid,
colorDangerItemBgActive: colorError,
colorDangerItemBgSelected: colorError
}, _extends({}, overrideComponentToken));
return [// Basic
getBaseStyle(menuToken), // Horizontal
getHorizontalStyle(menuToken), // Vertical
getVerticalStyle(menuToken), // Theme
getThemeStyle(menuToken, 'light'), getThemeStyle(menuDarkToken, 'dark'), // RTL
getRTLStyle(menuToken), // Motion
genCollapseMotion(menuToken), initSlideMotion(menuToken, 'slide-up'), initSlideMotion(menuToken, 'slide-down'), initZoomMotion(menuToken, 'zoom-big')];
}, function (token) {
var colorPrimary = token.colorPrimary,
colorError = token.colorError,
colorTextDisabled = token.colorTextDisabled,
colorErrorBg = token.colorErrorBg,
colorText = token.colorText,
colorTextDescription = token.colorTextDescription,
colorBgContainer = token.colorBgContainer,
colorFillAlter = token.colorFillAlter,
controlItemBgActive = token.controlItemBgActive,
lineWidth = token.lineWidth,
lineWidthBold = token.lineWidthBold;
return {
dropdownWidth: 160,
zIndexPopup: token.zIndexPopupBase + 50,
radiusItem: 0,
colorItemText: colorText,
colorItemTextHover: colorPrimary,
colorGroupTitle: colorTextDescription,
colorItemTextSelected: colorPrimary,
colorItemBg: colorBgContainer,
colorSubItemBg: colorFillAlter,
colorItemBgActive: controlItemBgActive,
colorItemBgSelected: controlItemBgActive,
colorItemBgSelectedHorizontal: 'transparent',
colorActiveBarWidth: lineWidthBold + lineWidth,
colorActiveBarHeight: lineWidthBold,
colorActiveBarBorderSize: lineWidth,
// Disabled
colorItemTextDisabled: colorTextDisabled,
// Danger
colorDangerItemText: colorError,
colorDangerItemTextHover: colorError,
colorDangerItemTextSelected: colorError,
colorDangerItemBgActive: colorErrorBg,
colorDangerItemBgSelected: colorErrorBg
};
});
return useOriginHook(prefixCls);
});