2022-11-23 20:22:38 +08:00
|
|
|
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
|
|
|
import { genComponentStyleHook } from '../../theme/internal';
|
2022-10-28 16:09:38 +08:00
|
|
|
import genSpaceCompactStyle from './compact';
|
2022-05-04 22:00:39 +08:00
|
|
|
|
|
|
|
/** 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
|
|
|
|
}
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const genSpaceStyle: GenerateStyle<SpaceToken> = (token) => {
|
2022-05-04 22:00:39 +08:00
|
|
|
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': {
|
2022-12-23 10:47:26 +08:00
|
|
|
alignItems: 'baseline',
|
2022-05-04 22:00:39 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
[`${componentCls}-space-item`]: {
|
|
|
|
'&:empty': {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-11-19 13:47:33 +08:00
|
|
|
export default genComponentStyleHook('Space', (token) => [
|
2022-10-28 16:09:38 +08:00
|
|
|
genSpaceStyle(token),
|
|
|
|
genSpaceCompactStyle(token),
|
|
|
|
]);
|