index.js 2.3 KB

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