You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

58 lines
1.4 KiB

import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook } from '../../theme/internal';
import genSpaceCompactStyle from './compact';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
// Component token here
}
interface SpaceToken extends FullToken<'Space'> {
// Custom token here
}
const genSpaceStyle: GenerateStyle<SpaceToken> = (token) => {
const { componentCls } = token;
return {
[componentCls]: {
display: 'inline-flex',
'&-rtl': {
direction: 'rtl',
},
'&-vertical': {
flexDirection: 'column',
},
'&-align': {
flexDirection: 'column',
'&-center': {
alignItems: 'center',
},
'&-start': {
alignItems: 'flex-start',
},
'&-end': {
alignItems: 'flex-end',
},
'&-baseline': {
alignItems: 'baseline',
},
},
[`${componentCls}-item:empty`]: {
display: 'none',
},
},
};
};
// ============================== Export ==============================
export default genComponentStyleHook(
'Space',
(token) => [genSpaceStyle(token), genSpaceCompactStyle(token)],
() => ({}),
{
// Space component don't apply extra font style
// https://github.com/ant-design/ant-design/issues/40315
resetStyle: false,
},
);