@fesjs/fes-design/es/virtual-list/listItem.js

fes-design for PC

import { defineComponent, ref, computed, cloneVNode } from 'vue';
import useResize from '../_util/use/useResize';
import { getFirstValidNode } from '../_util/vnode';
import getElementFromVueInstance from '../_util/getElementFromVueInstance';
import { itemProps } from './props';

/**
 * item component, we need to know their size change at any time
 */

// wrapping for item
const FVirtualListItem = defineComponent({
  name: 'FVirtualListItem',
  props: itemProps,
  setup(props, _ref) {
    let {
      attrs
    } = _ref;
    const itemRef = ref();

    // tell parent current size identify by unqiue key
    const dispatchSizeChange = () => {
      const shapeKey = props.horizontal ? 'offsetWidth' : 'offsetHeight';
      const s = itemRef.value ? itemRef.value[shapeKey] : 0;
      attrs.onItemResized(props.uniqueKey, s);
    };
    useResize(itemRef, dispatchSizeChange, computed(() => !props.observeResize));
    return {
      itemRef
    };
  },
  render() {
    var _$slots$default, _$slots$default2;
    const {
      index,
      source,
      $slots
    } = this;
    const vNode = getFirstValidNode((_$slots$default = (_$slots$default2 = $slots.default) === null || _$slots$default2 === void 0 ? void 0 : _$slots$default2.call($slots, {
      index,
      source
    })) !== null && _$slots$default !== void 0 ? _$slots$default : []);
    if (!vNode) {
      return;
    }
    return cloneVNode(vNode, {
      ref: el => {
        if (el) {
          this.itemRef = getElementFromVueInstance(el);
        }
      }
    }, true);
  }
});

export { FVirtualListItem };