Item.js 3.8 KB

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