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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactVirtual = require("react-virtual");
const VirList = props => {
  const bodyRef = (0, _react.useRef)(null);
  const {
    options = [],
    children,
    size = 32,
    parentRef = null,
    className,
    maxHeight = 224
  } = props;
  const {
    totalSize,
    virtualItems
  } = (0, _reactVirtual.useVirtual)({
    size: options.length,
    parentRef: parentRef || bodyRef,
    estimateSize: _react.default.useCallback(() => size, [size]),
    overscan: 2
  });
  const virScrollStyles = (0, _react.useMemo)(() => ({
    height: `${totalSize}px`,
    width: '100%',
    position: 'relative'
  }), [totalSize]);
  if (options?.length < 50) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: `virtual_list ${className}`
    }, options?.map((item, i) => children({
      key: i,
      item
    })));
  }
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    ref: bodyRef,
    className: `virtual_list ${className}`,
    style: {
      overflow: 'auto',
      minWidth: 160,
      maxHeight
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: virScrollStyles
  }, virtualItems.map(virtualRow => {
    const style = {
      position: 'absolute',
      top: 0,
      left: 0,
      minWidth: '100%',
      height: `${virtualRow.size}px`,
      transform: `translateY(${virtualRow.start}px)`
    };
    return children({
      key: virtualRow.index,
      item: options[virtualRow.index],
      style
    });
  }))));
};
var _default = VirList;
exports.default = _default;