col.js 3.9 KB

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