col.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  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 _configProvider = require("../config-provider");
  12. var _RowContext = _interopRequireDefault(require("./RowContext"));
  13. var _style = require("./style");
  14. var __rest = void 0 && (void 0).__rest || function (s, e) {
  15. var t = {};
  16. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  17. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  18. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  19. }
  20. return t;
  21. };
  22. function parseFlex(flex) {
  23. if (typeof flex === 'number') {
  24. return `${flex} ${flex} auto`;
  25. }
  26. if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
  27. return `0 0 ${flex}`;
  28. }
  29. return flex;
  30. }
  31. const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
  32. const Col = /*#__PURE__*/React.forwardRef((props, ref) => {
  33. const {
  34. getPrefixCls,
  35. direction
  36. } = React.useContext(_configProvider.ConfigContext);
  37. const {
  38. gutter,
  39. wrap
  40. } = React.useContext(_RowContext.default);
  41. const {
  42. prefixCls: customizePrefixCls,
  43. span,
  44. order,
  45. offset,
  46. push,
  47. pull,
  48. className,
  49. children,
  50. flex,
  51. style
  52. } = props,
  53. others = __rest(props, ["prefixCls", "span", "order", "offset", "push", "pull", "className", "children", "flex", "style"]);
  54. const prefixCls = getPrefixCls('col', customizePrefixCls);
  55. const [wrapCSSVar, hashId, cssVarCls] = (0, _style.useColStyle)(prefixCls);
  56. // ===================== Size ======================
  57. const sizeStyle = {};
  58. let sizeClassObj = {};
  59. sizes.forEach(size => {
  60. let sizeProps = {};
  61. const propSize = props[size];
  62. if (typeof propSize === 'number') {
  63. sizeProps.span = propSize;
  64. } else if (typeof propSize === 'object') {
  65. sizeProps = propSize || {};
  66. }
  67. delete others[size];
  68. sizeClassObj = Object.assign(Object.assign({}, sizeClassObj), {
  69. [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
  70. [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
  71. [`${prefixCls}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
  72. [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
  73. [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
  74. [`${prefixCls}-rtl`]: direction === 'rtl'
  75. });
  76. // Responsive flex layout
  77. if (sizeProps.flex) {
  78. sizeClassObj[`${prefixCls}-${size}-flex`] = true;
  79. sizeStyle[`--${prefixCls}-${size}-flex`] = parseFlex(sizeProps.flex);
  80. }
  81. });
  82. // ==================== Normal =====================
  83. const classes = (0, _classnames.default)(prefixCls, {
  84. [`${prefixCls}-${span}`]: span !== undefined,
  85. [`${prefixCls}-order-${order}`]: order,
  86. [`${prefixCls}-offset-${offset}`]: offset,
  87. [`${prefixCls}-push-${push}`]: push,
  88. [`${prefixCls}-pull-${pull}`]: pull
  89. }, className, sizeClassObj, hashId, cssVarCls);
  90. const mergedStyle = {};
  91. // Horizontal gutter use padding
  92. if (gutter && gutter[0] > 0) {
  93. const horizontalGutter = gutter[0] / 2;
  94. mergedStyle.paddingLeft = horizontalGutter;
  95. mergedStyle.paddingRight = horizontalGutter;
  96. }
  97. if (flex) {
  98. mergedStyle.flex = parseFlex(flex);
  99. // Hack for Firefox to avoid size issue
  100. // https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
  101. if (wrap === false && !mergedStyle.minWidth) {
  102. mergedStyle.minWidth = 0;
  103. }
  104. }
  105. // ==================== Render =====================
  106. return wrapCSSVar(/*#__PURE__*/React.createElement("div", Object.assign({}, others, {
  107. style: Object.assign(Object.assign(Object.assign({}, mergedStyle), style), sizeStyle),
  108. className: classes,
  109. ref: ref
  110. }), children));
  111. });
  112. if (process.env.NODE_ENV !== 'production') {
  113. Col.displayName = 'Col';
  114. }
  115. var _default = exports.default = Col;