index.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. import { genComponentStyleHook, 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. '&-vertical': {
  11. flexDirection: 'column'
  12. },
  13. '&-rtl': {
  14. direction: 'rtl'
  15. },
  16. '&:empty': {
  17. display: 'none'
  18. }
  19. }
  20. };
  21. };
  22. const genFlexGapStyle = token => {
  23. const {
  24. componentCls
  25. } = token;
  26. return {
  27. [componentCls]: {
  28. '&-gap-small': {
  29. gap: token.flexGapSM
  30. },
  31. '&-gap-middle': {
  32. gap: token.flexGap
  33. },
  34. '&-gap-large': {
  35. gap: token.flexGapLG
  36. }
  37. }
  38. };
  39. };
  40. const genFlexWrapStyle = token => {
  41. const {
  42. componentCls
  43. } = token;
  44. const wrapStyle = {};
  45. flexWrapValues.forEach(value => {
  46. wrapStyle[`${componentCls}-wrap-${value}`] = {
  47. flexWrap: value
  48. };
  49. });
  50. return wrapStyle;
  51. };
  52. const genAlignItemsStyle = token => {
  53. const {
  54. componentCls
  55. } = token;
  56. const alignStyle = {};
  57. alignItemsValues.forEach(value => {
  58. alignStyle[`${componentCls}-align-${value}`] = {
  59. alignItems: value
  60. };
  61. });
  62. return alignStyle;
  63. };
  64. const genJustifyContentStyle = token => {
  65. const {
  66. componentCls
  67. } = token;
  68. const justifyStyle = {};
  69. justifyContentValues.forEach(value => {
  70. justifyStyle[`${componentCls}-justify-${value}`] = {
  71. justifyContent: value
  72. };
  73. });
  74. return justifyStyle;
  75. };
  76. export default genComponentStyleHook('Flex', token => {
  77. const flexToken = mergeToken(token, {
  78. flexGapSM: token.paddingXS,
  79. flexGap: token.padding,
  80. flexGapLG: token.paddingLG
  81. });
  82. return [genFlexStyle(flexToken), genFlexGapStyle(flexToken), genFlexWrapStyle(flexToken), genAlignItemsStyle(flexToken), genJustifyContentStyle(flexToken)];
  83. });