2024-04-08 14:04:08 +08:00
|
|
|
import { unit } from '@ant-design/cssinjs';
|
|
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
2023-09-26 17:34:49 +08:00
|
|
|
|
2024-04-08 14:04:08 +08:00
|
|
|
import { prepareComponentToken } from '.';
|
|
|
|
import type { CascaderToken } from '.';
|
|
|
|
import { genComponentStyleHook } from '../../theme/internal';
|
|
|
|
import type { GenerateStyle } from '../../theme/internal';
|
2023-09-26 17:34:49 +08:00
|
|
|
import getColumnsStyle from './columns';
|
|
|
|
|
|
|
|
// ============================== Panel ===============================
|
|
|
|
const genPanelStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CSSObject => {
|
|
|
|
const { componentCls } = token;
|
|
|
|
|
|
|
|
return {
|
|
|
|
[`${componentCls}-panel`]: [
|
|
|
|
getColumnsStyle(token),
|
|
|
|
{
|
|
|
|
display: 'inline-flex',
|
2023-11-15 16:12:57 +08:00
|
|
|
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
|
2023-09-26 17:34:49 +08:00
|
|
|
borderRadius: token.borderRadiusLG,
|
|
|
|
overflowX: 'auto',
|
|
|
|
maxWidth: '100%',
|
|
|
|
|
|
|
|
[`${componentCls}-menus`]: {
|
|
|
|
alignItems: 'stretch',
|
|
|
|
},
|
|
|
|
[`${componentCls}-menu`]: {
|
|
|
|
height: 'auto',
|
|
|
|
},
|
|
|
|
|
|
|
|
'&-empty': {
|
|
|
|
padding: token.paddingXXS,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
|
|
|
export default genComponentStyleHook(
|
|
|
|
['Cascader', 'Panel'],
|
|
|
|
(token) => genPanelStyle(token),
|
|
|
|
prepareComponentToken,
|
|
|
|
);
|