index.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import * as React from 'react';
  11. import classNames from 'classnames';
  12. import toArray from "rc-util/es/Children/toArray";
  13. import { isPresetSize, isValidGapNumber } from '../_util/gapSize';
  14. import { useComponentConfig } from '../config-provider/context';
  15. import Compact from './Compact';
  16. import { SpaceContextProvider } from './context';
  17. import Item from './Item';
  18. import useStyle from './style';
  19. export { SpaceContext } from './context';
  20. const InternalSpace = /*#__PURE__*/React.forwardRef((props, ref) => {
  21. var _a;
  22. const {
  23. getPrefixCls,
  24. direction: directionConfig,
  25. size: contextSize,
  26. className: contextClassName,
  27. style: contextStyle,
  28. classNames: contextClassNames,
  29. styles: contextStyles
  30. } = useComponentConfig('space');
  31. const {
  32. size = contextSize !== null && contextSize !== void 0 ? contextSize : 'small',
  33. align,
  34. className,
  35. rootClassName,
  36. children,
  37. direction = 'horizontal',
  38. prefixCls: customizePrefixCls,
  39. split,
  40. style,
  41. wrap = false,
  42. classNames: customClassNames,
  43. styles
  44. } = props,
  45. otherProps = __rest(props, ["size", "align", "className", "rootClassName", "children", "direction", "prefixCls", "split", "style", "wrap", "classNames", "styles"]);
  46. const [horizontalSize, verticalSize] = Array.isArray(size) ? size : [size, size];
  47. const isPresetVerticalSize = isPresetSize(verticalSize);
  48. const isPresetHorizontalSize = isPresetSize(horizontalSize);
  49. const isValidVerticalSize = isValidGapNumber(verticalSize);
  50. const isValidHorizontalSize = isValidGapNumber(horizontalSize);
  51. const childNodes = toArray(children, {
  52. keepEmpty: true
  53. });
  54. const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align;
  55. const prefixCls = getPrefixCls('space', customizePrefixCls);
  56. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
  57. const cls = classNames(prefixCls, contextClassName, hashId, `${prefixCls}-${direction}`, {
  58. [`${prefixCls}-rtl`]: directionConfig === 'rtl',
  59. [`${prefixCls}-align-${mergedAlign}`]: mergedAlign,
  60. [`${prefixCls}-gap-row-${verticalSize}`]: isPresetVerticalSize,
  61. [`${prefixCls}-gap-col-${horizontalSize}`]: isPresetHorizontalSize
  62. }, className, rootClassName, cssVarCls);
  63. const itemClassName = classNames(`${prefixCls}-item`, (_a = customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.item) !== null && _a !== void 0 ? _a : contextClassNames.item);
  64. // Calculate latest one
  65. let latestIndex = 0;
  66. const nodes = childNodes.map((child, i) => {
  67. var _a;
  68. if (child !== null && child !== undefined) {
  69. latestIndex = i;
  70. }
  71. const key = (child === null || child === void 0 ? void 0 : child.key) || `${itemClassName}-${i}`;
  72. return /*#__PURE__*/React.createElement(Item, {
  73. className: itemClassName,
  74. key: key,
  75. index: i,
  76. split: split,
  77. style: (_a = styles === null || styles === void 0 ? void 0 : styles.item) !== null && _a !== void 0 ? _a : contextStyles.item
  78. }, child);
  79. });
  80. const spaceContext = React.useMemo(() => ({
  81. latestIndex
  82. }), [latestIndex]);
  83. // =========================== Render ===========================
  84. if (childNodes.length === 0) {
  85. return null;
  86. }
  87. const gapStyle = {};
  88. if (wrap) {
  89. gapStyle.flexWrap = 'wrap';
  90. }
  91. if (!isPresetHorizontalSize && isValidHorizontalSize) {
  92. gapStyle.columnGap = horizontalSize;
  93. }
  94. if (!isPresetVerticalSize && isValidVerticalSize) {
  95. gapStyle.rowGap = verticalSize;
  96. }
  97. return wrapCSSVar(/*#__PURE__*/React.createElement("div", Object.assign({
  98. ref: ref,
  99. className: cls,
  100. style: Object.assign(Object.assign(Object.assign({}, gapStyle), contextStyle), style)
  101. }, otherProps), /*#__PURE__*/React.createElement(SpaceContextProvider, {
  102. value: spaceContext
  103. }, nodes)));
  104. });
  105. const Space = InternalSpace;
  106. Space.Compact = Compact;
  107. if (process.env.NODE_ENV !== 'production') {
  108. Space.displayName = 'Space';
  109. }
  110. export default Space;