row.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. var React = _interopRequireWildcard(require("react"));
  10. var _classnames = _interopRequireDefault(require("classnames"));
  11. var _responsiveObserver = require("../_util/responsiveObserver");
  12. var _configProvider = require("../config-provider");
  13. var _useBreakpoint = _interopRequireDefault(require("./hooks/useBreakpoint"));
  14. var _useGutter = _interopRequireDefault(require("./hooks/useGutter"));
  15. var _RowContext = _interopRequireDefault(require("./RowContext"));
  16. var _style = require("./style");
  17. var __rest = void 0 && (void 0).__rest || function (s, e) {
  18. var t = {};
  19. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  20. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  21. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  22. }
  23. return t;
  24. };
  25. const _RowAligns = ['top', 'middle', 'bottom', 'stretch'];
  26. const _RowJustify = ['start', 'end', 'center', 'space-around', 'space-between', 'space-evenly'];
  27. function useMergedPropByScreen(oriProp, screen) {
  28. const [prop, setProp] = React.useState(typeof oriProp === 'string' ? oriProp : '');
  29. const calcMergedAlignOrJustify = () => {
  30. if (typeof oriProp === 'string') {
  31. setProp(oriProp);
  32. }
  33. if (typeof oriProp !== 'object') {
  34. return;
  35. }
  36. for (let i = 0; i < _responsiveObserver.responsiveArray.length; i++) {
  37. const breakpoint = _responsiveObserver.responsiveArray[i];
  38. // if do not match, do nothing
  39. if (!screen || !screen[breakpoint]) {
  40. continue;
  41. }
  42. const curVal = oriProp[breakpoint];
  43. if (curVal !== undefined) {
  44. setProp(curVal);
  45. return;
  46. }
  47. }
  48. };
  49. React.useEffect(() => {
  50. calcMergedAlignOrJustify();
  51. }, [JSON.stringify(oriProp), screen]);
  52. return prop;
  53. }
  54. const Row = /*#__PURE__*/React.forwardRef((props, ref) => {
  55. const {
  56. prefixCls: customizePrefixCls,
  57. justify,
  58. align,
  59. className,
  60. style,
  61. children,
  62. gutter = 0,
  63. wrap
  64. } = props,
  65. others = __rest(props, ["prefixCls", "justify", "align", "className", "style", "children", "gutter", "wrap"]);
  66. const {
  67. getPrefixCls,
  68. direction
  69. } = React.useContext(_configProvider.ConfigContext);
  70. const screens = (0, _useBreakpoint.default)(true, null);
  71. const mergedAlign = useMergedPropByScreen(align, screens);
  72. const mergedJustify = useMergedPropByScreen(justify, screens);
  73. const prefixCls = getPrefixCls('row', customizePrefixCls);
  74. const [wrapCSSVar, hashId, cssVarCls] = (0, _style.useRowStyle)(prefixCls);
  75. const gutters = (0, _useGutter.default)(gutter, screens);
  76. const classes = (0, _classnames.default)(prefixCls, {
  77. [`${prefixCls}-no-wrap`]: wrap === false,
  78. [`${prefixCls}-${mergedJustify}`]: mergedJustify,
  79. [`${prefixCls}-${mergedAlign}`]: mergedAlign,
  80. [`${prefixCls}-rtl`]: direction === 'rtl'
  81. }, className, hashId, cssVarCls);
  82. // Add gutter related style
  83. const rowStyle = {};
  84. const horizontalGutter = gutters[0] != null && gutters[0] > 0 ? gutters[0] / -2 : undefined;
  85. if (horizontalGutter) {
  86. rowStyle.marginLeft = horizontalGutter;
  87. rowStyle.marginRight = horizontalGutter;
  88. }
  89. // "gutters" is a new array in each rendering phase, it'll make 'React.useMemo' effectless.
  90. // So we deconstruct "gutters" variable here.
  91. const [gutterH, gutterV] = gutters;
  92. rowStyle.rowGap = gutterV;
  93. const rowContext = React.useMemo(() => ({
  94. gutter: [gutterH, gutterV],
  95. wrap
  96. }), [gutterH, gutterV, wrap]);
  97. return wrapCSSVar(/*#__PURE__*/React.createElement(_RowContext.default.Provider, {
  98. value: rowContext
  99. }, /*#__PURE__*/React.createElement("div", Object.assign({}, others, {
  100. className: classes,
  101. style: Object.assign(Object.assign({}, rowStyle), style),
  102. ref: ref
  103. }), children)));
  104. });
  105. if (process.env.NODE_ENV !== 'production') {
  106. Row.displayName = 'Row';
  107. }
  108. var _default = exports.default = Row;