Item.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  10. var _vcResizeObserver = _interopRequireDefault(require("../vc-resize-observer"));
  11. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  12. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  13. var _excluded = ["prefixCls", "invalidate", "item", "renderItem", "responsive", "registerSize", "itemKey", "display", "order", "component"];
  14. var UNDEFINED = undefined;
  15. var _default2 = (0, _vue.defineComponent)({
  16. compatConfig: {
  17. MODE: 3
  18. },
  19. name: 'Item',
  20. props: {
  21. prefixCls: String,
  22. item: _vueTypes.default.any,
  23. renderItem: Function,
  24. responsive: Boolean,
  25. itemKey: {
  26. type: [String, Number]
  27. },
  28. registerSize: Function,
  29. display: Boolean,
  30. order: Number,
  31. component: _vueTypes.default.any,
  32. invalidate: Boolean
  33. },
  34. setup: function setup(props, _ref) {
  35. var slots = _ref.slots,
  36. expose = _ref.expose;
  37. var mergedHidden = (0, _vue.computed)(function () {
  38. return props.responsive && !props.display;
  39. });
  40. var itemNodeRef = (0, _vue.ref)();
  41. expose({
  42. itemNodeRef: itemNodeRef
  43. });
  44. // ================================ Effect ================================
  45. function internalRegisterSize(width) {
  46. props.registerSize(props.itemKey, width);
  47. }
  48. (0, _vue.onUnmounted)(function () {
  49. internalRegisterSize(null);
  50. });
  51. return function () {
  52. var _slots$default;
  53. var prefixCls = props.prefixCls,
  54. invalidate = props.invalidate,
  55. item = props.item,
  56. renderItem = props.renderItem,
  57. responsive = props.responsive,
  58. registerSize = props.registerSize,
  59. itemKey = props.itemKey,
  60. display = props.display,
  61. order = props.order,
  62. _props$component = props.component,
  63. Component = _props$component === void 0 ? 'div' : _props$component,
  64. restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  65. var children = (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
  66. // ================================ Render ================================
  67. var childNode = renderItem && item !== UNDEFINED ? renderItem(item) : children;
  68. var overflowStyle;
  69. if (!invalidate) {
  70. overflowStyle = {
  71. opacity: mergedHidden.value ? 0 : 1,
  72. height: mergedHidden.value ? 0 : UNDEFINED,
  73. overflowY: mergedHidden.value ? 'hidden' : UNDEFINED,
  74. order: responsive ? order : UNDEFINED,
  75. pointerEvents: mergedHidden.value ? 'none' : UNDEFINED,
  76. position: mergedHidden.value ? 'absolute' : UNDEFINED
  77. };
  78. }
  79. var overflowProps = {};
  80. if (mergedHidden.value) {
  81. overflowProps['aria-hidden'] = true;
  82. }
  83. // 使用 disabled 避免结构不一致 导致子组件 rerender
  84. return (0, _vue.createVNode)(_vcResizeObserver.default, {
  85. "disabled": !responsive,
  86. "onResize": function onResize(_ref2) {
  87. var offsetWidth = _ref2.offsetWidth;
  88. internalRegisterSize(offsetWidth);
  89. }
  90. }, {
  91. default: function _default() {
  92. return (0, _vue.createVNode)(Component, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
  93. "class": (0, _classNames.default)(!invalidate && prefixCls),
  94. "style": overflowStyle
  95. }, overflowProps), restProps), {}, {
  96. "ref": itemNodeRef
  97. }), {
  98. default: function _default() {
  99. return [childNode];
  100. }
  101. });
  102. }
  103. });
  104. };
  105. }
  106. });
  107. exports.default = _default2;