Item.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  4. var _excluded = ["prefixCls", "invalidate", "item", "renderItem", "responsive", "responsiveDisabled", "registerSize", "itemKey", "className", "style", "children", "display", "order", "component"];
  5. import * as React from 'react';
  6. import classNames from 'classnames';
  7. import ResizeObserver from 'rc-resize-observer';
  8. // Use shared variable to save bundle size
  9. var UNDEFINED = undefined;
  10. function InternalItem(props, ref) {
  11. var prefixCls = props.prefixCls,
  12. invalidate = props.invalidate,
  13. item = props.item,
  14. renderItem = props.renderItem,
  15. responsive = props.responsive,
  16. responsiveDisabled = props.responsiveDisabled,
  17. registerSize = props.registerSize,
  18. itemKey = props.itemKey,
  19. className = props.className,
  20. style = props.style,
  21. children = props.children,
  22. display = props.display,
  23. order = props.order,
  24. _props$component = props.component,
  25. Component = _props$component === void 0 ? 'div' : _props$component,
  26. restProps = _objectWithoutProperties(props, _excluded);
  27. var mergedHidden = responsive && !display;
  28. // ================================ Effect ================================
  29. function internalRegisterSize(width) {
  30. registerSize(itemKey, width);
  31. }
  32. React.useEffect(function () {
  33. return function () {
  34. internalRegisterSize(null);
  35. };
  36. }, []);
  37. // ================================ Render ================================
  38. var childNode = renderItem && item !== UNDEFINED ? renderItem(item, {
  39. index: order
  40. }) : children;
  41. var overflowStyle;
  42. if (!invalidate) {
  43. overflowStyle = {
  44. opacity: mergedHidden ? 0 : 1,
  45. height: mergedHidden ? 0 : UNDEFINED,
  46. overflowY: mergedHidden ? 'hidden' : UNDEFINED,
  47. order: responsive ? order : UNDEFINED,
  48. pointerEvents: mergedHidden ? 'none' : UNDEFINED,
  49. position: mergedHidden ? 'absolute' : UNDEFINED
  50. };
  51. }
  52. var overflowProps = {};
  53. if (mergedHidden) {
  54. overflowProps['aria-hidden'] = true;
  55. }
  56. var itemNode = /*#__PURE__*/React.createElement(Component, _extends({
  57. className: classNames(!invalidate && prefixCls, className),
  58. style: _objectSpread(_objectSpread({}, overflowStyle), style)
  59. }, overflowProps, restProps, {
  60. ref: ref
  61. }), childNode);
  62. if (responsive) {
  63. itemNode = /*#__PURE__*/React.createElement(ResizeObserver, {
  64. onResize: function onResize(_ref) {
  65. var offsetWidth = _ref.offsetWidth;
  66. internalRegisterSize(offsetWidth);
  67. },
  68. disabled: responsiveDisabled
  69. }, itemNode);
  70. }
  71. return itemNode;
  72. }
  73. var Item = /*#__PURE__*/React.forwardRef(InternalItem);
  74. Item.displayName = 'Item';
  75. export default Item;