index.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.prepareComponentToken = exports.default = void 0;
  7. var _internal = require("../../theme/internal");
  8. var _compact = _interopRequireDefault(require("./compact"));
  9. const genSpaceStyle = token => {
  10. const {
  11. componentCls,
  12. antCls
  13. } = token;
  14. return {
  15. [componentCls]: {
  16. display: 'inline-flex',
  17. '&-rtl': {
  18. direction: 'rtl'
  19. },
  20. '&-vertical': {
  21. flexDirection: 'column'
  22. },
  23. '&-align': {
  24. flexDirection: 'column',
  25. '&-center': {
  26. alignItems: 'center'
  27. },
  28. '&-start': {
  29. alignItems: 'flex-start'
  30. },
  31. '&-end': {
  32. alignItems: 'flex-end'
  33. },
  34. '&-baseline': {
  35. alignItems: 'baseline'
  36. }
  37. },
  38. [`${componentCls}-item:empty`]: {
  39. display: 'none'
  40. },
  41. // https://github.com/ant-design/ant-design/issues/47875
  42. [`${componentCls}-item > ${antCls}-badge-not-a-wrapper:only-child`]: {
  43. display: 'block'
  44. }
  45. }
  46. };
  47. };
  48. const genSpaceGapStyle = token => {
  49. const {
  50. componentCls
  51. } = token;
  52. return {
  53. [componentCls]: {
  54. '&-gap-row-small': {
  55. rowGap: token.spaceGapSmallSize
  56. },
  57. '&-gap-row-middle': {
  58. rowGap: token.spaceGapMiddleSize
  59. },
  60. '&-gap-row-large': {
  61. rowGap: token.spaceGapLargeSize
  62. },
  63. '&-gap-col-small': {
  64. columnGap: token.spaceGapSmallSize
  65. },
  66. '&-gap-col-middle': {
  67. columnGap: token.spaceGapMiddleSize
  68. },
  69. '&-gap-col-large': {
  70. columnGap: token.spaceGapLargeSize
  71. }
  72. }
  73. };
  74. };
  75. // ============================== Export ==============================
  76. const prepareComponentToken = () => ({});
  77. exports.prepareComponentToken = prepareComponentToken;
  78. var _default = exports.default = (0, _internal.genStyleHooks)('Space', token => {
  79. const spaceToken = (0, _internal.mergeToken)(token, {
  80. spaceGapSmallSize: token.paddingXS,
  81. spaceGapMiddleSize: token.padding,
  82. spaceGapLargeSize: token.paddingLG
  83. });
  84. return [genSpaceStyle(spaceToken), genSpaceGapStyle(spaceToken), (0, _compact.default)(spaceToken)];
  85. }, () => ({}), {
  86. // Space component don't apply extra font style
  87. // https://github.com/ant-design/ant-design/issues/40315
  88. resetStyle: false
  89. });