index.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _internal = require("../../theme/internal");
  7. var _utils = require("../utils");
  8. const genFlexStyle = token => {
  9. const {
  10. componentCls
  11. } = token;
  12. return {
  13. [componentCls]: {
  14. display: 'flex',
  15. '&-vertical': {
  16. flexDirection: 'column'
  17. },
  18. '&-rtl': {
  19. direction: 'rtl'
  20. },
  21. '&:empty': {
  22. display: 'none'
  23. }
  24. }
  25. };
  26. };
  27. const genFlexGapStyle = token => {
  28. const {
  29. componentCls
  30. } = token;
  31. return {
  32. [componentCls]: {
  33. '&-gap-small': {
  34. gap: token.flexGapSM
  35. },
  36. '&-gap-middle': {
  37. gap: token.flexGap
  38. },
  39. '&-gap-large': {
  40. gap: token.flexGapLG
  41. }
  42. }
  43. };
  44. };
  45. const genFlexWrapStyle = token => {
  46. const {
  47. componentCls
  48. } = token;
  49. const wrapStyle = {};
  50. _utils.flexWrapValues.forEach(value => {
  51. wrapStyle[`${componentCls}-wrap-${value}`] = {
  52. flexWrap: value
  53. };
  54. });
  55. return wrapStyle;
  56. };
  57. const genAlignItemsStyle = token => {
  58. const {
  59. componentCls
  60. } = token;
  61. const alignStyle = {};
  62. _utils.alignItemsValues.forEach(value => {
  63. alignStyle[`${componentCls}-align-${value}`] = {
  64. alignItems: value
  65. };
  66. });
  67. return alignStyle;
  68. };
  69. const genJustifyContentStyle = token => {
  70. const {
  71. componentCls
  72. } = token;
  73. const justifyStyle = {};
  74. _utils.justifyContentValues.forEach(value => {
  75. justifyStyle[`${componentCls}-justify-${value}`] = {
  76. justifyContent: value
  77. };
  78. });
  79. return justifyStyle;
  80. };
  81. var _default = exports.default = (0, _internal.genComponentStyleHook)('Flex', token => {
  82. const flexToken = (0, _internal.mergeToken)(token, {
  83. flexGapSM: token.paddingXS,
  84. flexGap: token.padding,
  85. flexGapLG: token.paddingLG
  86. });
  87. return [genFlexStyle(flexToken), genFlexGapStyle(flexToken), genFlexWrapStyle(flexToken), genAlignItemsStyle(flexToken), genJustifyContentStyle(flexToken)];
  88. });