linkmore-design/es/virtual-list/index.js

🌈 🚀lm组件库。🚀

import React, { useMemo, useRef } from 'react';
import { useVirtual } from 'react-virtual';
var VirList = function VirList(props) {
  var bodyRef = useRef(null);
  var _props$options = props.options,
    options = _props$options === void 0 ? [] : _props$options,
    children = props.children,
    _props$size = props.size,
    size = _props$size === void 0 ? 32 : _props$size,
    _props$parentRef = props.parentRef,
    parentRef = _props$parentRef === void 0 ? null : _props$parentRef,
    className = props.className,
    _props$maxHeight = props.maxHeight,
    maxHeight = _props$maxHeight === void 0 ? 224 : _props$maxHeight;
  var _useVirtual = useVirtual({
      size: options.length,
      parentRef: parentRef || bodyRef,
      estimateSize: React.useCallback(function () {
        return size;
      }, [size]),
      overscan: 2
    }),
    totalSize = _useVirtual.totalSize,
    virtualItems = _useVirtual.virtualItems;
  var virScrollStyles = useMemo(function () {
    return {
      height: "".concat(totalSize, "px"),
      width: '100%',
      position: 'relative'
    };
  }, [totalSize]);
  if ((options === null || options === void 0 ? void 0 : options.length) < 50) {
    return /*#__PURE__*/React.createElement("div", {
      className: "virtual_list ".concat(className)
    }, options === null || options === void 0 ? void 0 : options.map(function (item, i) {
      return children({
        key: i,
        item: item
      });
    }));
  }
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    ref: bodyRef,
    className: "virtual_list ".concat(className),
    style: {
      overflow: 'auto',
      minWidth: 160,
      maxHeight: maxHeight
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: virScrollStyles
  }, virtualItems.map(function (virtualRow) {
    var style = {
      position: 'absolute',
      top: 0,
      left: 0,
      minWidth: '100%',
      height: "".concat(virtualRow.size, "px"),
      transform: "translateY(".concat(virtualRow.start, "px)")
    };
    return children({
      key: virtualRow.index,
      item: options[virtualRow.index],
      style: style
    });
  }))));
};
export default VirList;