index.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import { genStyleHooks, mergeToken } from '../../theme/internal';
  2. import { alignItemsValues, flexWrapValues, justifyContentValues } from '../utils';
  3. const genFlexStyle = token => {
  4. const {
  5. componentCls
  6. } = token;
  7. return {
  8. [componentCls]: {
  9. display: 'flex',
  10. margin: 0,
  11. padding: 0,
  12. '&-vertical': {
  13. flexDirection: 'column'
  14. },
  15. '&-rtl': {
  16. direction: 'rtl'
  17. },
  18. '&:empty': {
  19. display: 'none'
  20. }
  21. }
  22. };
  23. };
  24. const genFlexGapStyle = token => {
  25. const {
  26. componentCls
  27. } = token;
  28. return {
  29. [componentCls]: {
  30. '&-gap-small': {
  31. gap: token.flexGapSM
  32. },
  33. '&-gap-middle': {
  34. gap: token.flexGap
  35. },
  36. '&-gap-large': {
  37. gap: token.flexGapLG
  38. }
  39. }
  40. };
  41. };
  42. const genFlexWrapStyle = token => {
  43. const {
  44. componentCls
  45. } = token;
  46. const wrapStyle = {};
  47. flexWrapValues.forEach(value => {
  48. wrapStyle[`${componentCls}-wrap-${value}`] = {
  49. flexWrap: value
  50. };
  51. });
  52. return wrapStyle;
  53. };
  54. const genAlignItemsStyle = token => {
  55. const {
  56. componentCls
  57. } = token;
  58. const alignStyle = {};
  59. alignItemsValues.forEach(value => {
  60. alignStyle[`${componentCls}-align-${value}`] = {
  61. alignItems: value
  62. };
  63. });
  64. return alignStyle;
  65. };
  66. const genJustifyContentStyle = token => {
  67. const {
  68. componentCls
  69. } = token;
  70. const justifyStyle = {};
  71. justifyContentValues.forEach(value => {
  72. justifyStyle[`${componentCls}-justify-${value}`] = {
  73. justifyContent: value
  74. };
  75. });
  76. return justifyStyle;
  77. };
  78. export const prepareComponentToken = () => ({});
  79. export default genStyleHooks('Flex', token => {
  80. const {
  81. paddingXS,
  82. padding,
  83. paddingLG
  84. } = token;
  85. const flexToken = mergeToken(token, {
  86. flexGapSM: paddingXS,
  87. flexGap: padding,
  88. flexGapLG: paddingLG
  89. });
  90. return [genFlexStyle(flexToken), genFlexGapStyle(flexToken), genFlexWrapStyle(flexToken), genAlignItemsStyle(flexToken), genJustifyContentStyle(flexToken)];
  91. }, prepareComponentToken, {
  92. // Flex component don't apply extra font style
  93. // https://github.com/ant-design/ant-design/issues/46403
  94. resetStyle: false
  95. });