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

164 lines
5.2 KiB
TypeScript
Raw Normal View History

2022-03-09 00:29:00 +08:00
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
import type { FullToken, GenerateStyle } from '../../theme';
import { genComponentStyleHook } from '../../theme';
import { textEllipsis } from '../../style';
import { genCompactItemStyle } from '../../style/compact-item';
2022-03-09 00:29:00 +08:00
export interface ComponentToken {
controlWidth: number;
controlItemWidth: number;
dropdownHeight: number;
}
type CascaderToken = FullToken<'Cascader'>;
2022-03-09 00:29:00 +08:00
// =============================== Base ===============================
const genBaseStyle: GenerateStyle<CascaderToken> = token => {
const { prefixCls, componentCls, antCls } = token;
const cascaderMenuItemCls = `${componentCls}-menu-item`;
2022-03-09 00:29:00 +08:00
const iconCls = `
&${cascaderMenuItemCls}-expand ${cascaderMenuItemCls}-expand-icon,
2022-03-09 00:29:00 +08:00
${cascaderMenuItemCls}-loading-icon
`;
const itemPaddingVertical = Math.round(
(token.controlHeight - token.fontSize * token.lineHeight) / 2,
);
return [
// =====================================================
// == Control ==
// =====================================================
{
[componentCls]: {
width: token.controlWidth,
...genCompactItemStyle(token, componentCls),
2022-03-09 00:29:00 +08:00
},
},
// =====================================================
// == Popup ==
// =====================================================
{
[`${componentCls}-dropdown`]: [
// ==================== Checkbox ====================
getCheckboxStyle(`${prefixCls}-checkbox`, token),
{
[`&${antCls}-select-dropdown`]: {
padding: 0,
},
},
{
[componentCls]: {
// ================== Checkbox ==================
'&-checkbox': {
top: 0,
marginInlineEnd: token.paddingXS,
2022-03-09 00:29:00 +08:00
},
// ==================== Menu ====================
// >>> Menus
'&-menus': {
2022-03-09 00:29:00 +08:00
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'flex-start',
[`&${componentCls}-menu-empty`]: {
[`${componentCls}-menu`]: {
width: '100%',
height: 'auto',
[cascaderMenuItemCls]: {
color: token.colorTextDisabled,
cursor: 'default',
pointerEvents: 'none',
},
},
2022-03-09 00:29:00 +08:00
},
},
// >>> Menu
'&-menu': {
2022-04-15 15:44:02 +08:00
flexGrow: 1,
minWidth: token.controlItemWidth,
height: token.dropdownHeight,
padding: token.paddingXXS,
overflow: 'auto',
verticalAlign: 'top',
listStyle: 'none',
'-ms-overflow-style': '-ms-autohiding-scrollbar', // https://github.com/ant-design/ant-design/issues/11857
'&:not(:last-child)': {
borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
},
'&-item': {
...textEllipsis,
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'center',
padding: `${itemPaddingVertical}px ${token.paddingSM}px`,
lineHeight: token.lineHeight,
cursor: 'pointer',
transition: `all ${token.motionDurationFast}`,
borderRadius: token.borderRadiusSM,
2022-03-09 00:29:00 +08:00
'&:hover': {
background: token.controlItemBgHover,
2022-03-09 00:29:00 +08:00
},
' &-disabled': {
color: token.colorTextDisabled,
cursor: 'not-allowed',
'&:hover': {
background: 'transparent',
},
[iconCls]: {
color: token.colorTextDisabled,
},
2022-03-09 00:29:00 +08:00
},
[`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
[`&, &:hover`]: {
fontWeight: token.fontWeightStrong,
backgroundColor: token.controlItemBgActive,
},
2022-03-09 00:29:00 +08:00
},
'&-content': {
flex: 'auto',
},
2022-03-09 00:29:00 +08:00
[iconCls]: {
marginInlineStart: token.paddingXXS,
2022-08-04 16:16:50 +08:00
color: token.colorTextDescription,
fontSize: token.fontSizeIcon,
},
2022-03-09 00:29:00 +08:00
'&-keyword': {
color: token.colorHighlight,
},
2022-03-09 00:29:00 +08:00
},
},
},
},
],
2022-03-09 00:29:00 +08:00
},
// =====================================================
// == RTL ==
// =====================================================
{
[`${componentCls}-dropdown-rtl`]: {
2022-03-09 00:29:00 +08:00
direction: 'rtl',
},
},
];
};
// ============================== Export ==============================
export default genComponentStyleHook('Cascader', token => [genBaseStyle(token)], {
controlWidth: 184,
controlItemWidth: 111,
dropdownHeight: 180,
});