1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- import { genStyleHooks, mergeToken } from '../../theme/internal';
- import { alignItemsValues, flexWrapValues, justifyContentValues } from '../utils';
- const genFlexStyle = token => {
- const {
- componentCls
- } = token;
- return {
- [componentCls]: {
- display: 'flex',
- margin: 0,
- padding: 0,
- '&-vertical': {
- flexDirection: 'column'
- },
- '&-rtl': {
- direction: 'rtl'
- },
- '&:empty': {
- display: 'none'
- }
- }
- };
- };
- const genFlexGapStyle = token => {
- const {
- componentCls
- } = token;
- return {
- [componentCls]: {
- '&-gap-small': {
- gap: token.flexGapSM
- },
- '&-gap-middle': {
- gap: token.flexGap
- },
- '&-gap-large': {
- gap: token.flexGapLG
- }
- }
- };
- };
- const genFlexWrapStyle = token => {
- const {
- componentCls
- } = token;
- const wrapStyle = {};
- flexWrapValues.forEach(value => {
- wrapStyle[`${componentCls}-wrap-${value}`] = {
- flexWrap: value
- };
- });
- return wrapStyle;
- };
- const genAlignItemsStyle = token => {
- const {
- componentCls
- } = token;
- const alignStyle = {};
- alignItemsValues.forEach(value => {
- alignStyle[`${componentCls}-align-${value}`] = {
- alignItems: value
- };
- });
- return alignStyle;
- };
- const genJustifyContentStyle = token => {
- const {
- componentCls
- } = token;
- const justifyStyle = {};
- justifyContentValues.forEach(value => {
- justifyStyle[`${componentCls}-justify-${value}`] = {
- justifyContent: value
- };
- });
- return justifyStyle;
- };
- export const prepareComponentToken = () => ({});
- export default genStyleHooks('Flex', token => {
- const {
- paddingXS,
- padding,
- paddingLG
- } = token;
- const flexToken = mergeToken(token, {
- flexGapSM: paddingXS,
- flexGap: padding,
- flexGapLG: paddingLG
- });
- return [genFlexStyle(flexToken), genFlexGapStyle(flexToken), genFlexWrapStyle(flexToken), genAlignItemsStyle(flexToken), genJustifyContentStyle(flexToken)];
- }, prepareComponentToken, {
- // Flex component don't apply extra font style
- // https://github.com/ant-design/ant-design/issues/46403
- resetStyle: false
- });
|