@cloud-app-dev/vidc 2.0.0-alpha.1 → 2.0.0-alpha.13

package/es/List/GridList/hook.js

@@ -0,0 +1,301 @@
+import _useScroll from "ahooks/es/useScroll";
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getColumnWidth, getElementOffset, getElementSize, getWindowScroll, getWindowSize, isSameElementScroll, isSameElementSize } from './utils';
+export function useConstRef(value) {
+  var ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+export function useWindowSize() {
+  var _useState = useState(function () {
+    return getWindowSize();
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      windowSize = _useState2[0],
+      setWindowSize = _useState2[1];
+
+  var windowSizeRef = useConstRef(windowSize);
+  useEffect(function () {
+    function onResize() {
+      var nextWindowSize = getWindowSize();
+
+      if (!isSameElementSize(windowSizeRef.current, nextWindowSize)) {
+        setWindowSize(nextWindowSize);
+      }
+    }
+
+    window.addEventListener('resize', onResize);
+    return function () {
+      return window.removeEventListener('resize', onResize);
+    };
+  }, [windowSizeRef]);
+  return windowSize;
+}
+export function useElementSize(ref) {
+  var _useState3 = useState(function () {
+    if (ref.current) {
+      return getElementSize(ref.current);
+    } else {
+      return null;
+    }
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      elementSize = _useState4[0],
+      setElementSize = _useState4[1];
+
+  var elementSizeRef = useConstRef(elementSize);
+  useEffect(function () {
+    var observer = new ResizeObserver(function (entries) {
+      var nextElementSize = getElementSize(entries[0].target);
+
+      if (elementSizeRef.current === null || !isSameElementSize(elementSizeRef.current, nextElementSize)) {
+        setElementSize(nextElementSize);
+      }
+    });
+    if (ref.current) observer.observe(ref.current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [ref]);
+  return elementSize;
+}
+export function useWindowScroll() {
+  var _useState5 = useState(getWindowScroll()),
+      _useState6 = _slicedToArray(_useState5, 2),
+      scrollPosition = _useState6[0],
+      setScrollPosition = _useState6[1];
+
+  var ref = useConstRef(scrollPosition);
+  useEffect(function () {
+    function update() {
+      var nextScrollPosition = getWindowScroll();
+
+      if (!isSameElementScroll(ref.current, nextScrollPosition)) {
+        setScrollPosition(nextScrollPosition);
+      }
+    }
+
+    window.addEventListener('scroll', update);
+    window.addEventListener('resize', update);
+    return function () {
+      window.removeEventListener('scroll', update);
+      window.removeEventListener('resize', update);
+    };
+  }, [ref]);
+  return scrollPosition;
+}
+export function useElementWindowOffset(ref) {
+  var _useState7 = useState(function () {
+    if (ref.current) {
+      return getElementOffset(ref.current);
+    } else {
+      return null;
+    }
+  }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      elementOffset = _useState8[0],
+      setElementOffset = _useState8[1];
+
+  useEffect(function () {
+    var observer = new ResizeObserver(function (entries) {
+      setElementOffset(getElementOffset(entries[0].target));
+    });
+    if (ref.current) observer.observe(ref.current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [ref]);
+  return elementOffset;
+}
+export function useIntersecting(ref, rootMargin) {
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      intersecting = _useState10[0],
+      setIntersecting = _useState10[1];
+
+  useEffect(function () {
+    var observer = new IntersectionObserver(function (entries) {
+      setIntersecting(entries[0].isIntersecting);
+    }, {
+      rootMargin: rootMargin
+    });
+    if (ref.current) observer.observe(ref.current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [ref, rootMargin]);
+  return intersecting;
+}
+export function useGridListContainerData(ref) {
+  var windowSize = useWindowSize();
+
+  var windowScroll = _useScroll(ref);
+
+  var elementWindowOffset = useElementWindowOffset(ref);
+  var elementSize = useElementSize(ref);
+  return useMemo(function () {
+    return {
+      windowSize: windowSize,
+      windowScroll: {
+        x: (windowScroll === null || windowScroll === void 0 ? void 0 : windowScroll.left) || 0,
+        y: (windowScroll === null || windowScroll === void 0 ? void 0 : windowScroll.top) || 0
+      },
+      elementWindowOffset: elementWindowOffset,
+      elementSize: elementSize
+    };
+  }, [windowSize, windowScroll, elementWindowOffset, elementSize]);
+}
+export function useGridListConfigData(containerData, props) {
+  var items = props.items,
+      getWindowMargin = props.getWindowMargin,
+      getGridGap = props.getGridGap,
+      getColumnCount = props.getColumnCount,
+      getItemData = props.getItemData;
+  var elementWidth = containerData.elementSize ? containerData.elementSize.width : null;
+  var windowMargin = useMemo(function () {
+    if (getWindowMargin) {
+      return getWindowMargin(containerData.windowSize.height);
+    } else {
+      return containerData.windowSize.height;
+    }
+  }, [containerData.windowSize.height, getWindowMargin]);
+  var gridGap = useMemo(function () {
+    if (elementWidth === null) return null;
+
+    if (getGridGap) {
+      return getGridGap(elementWidth, containerData.windowSize.height);
+    } else {
+      return 0;
+    }
+  }, [elementWidth, containerData.windowSize.height, getGridGap]);
+  var columnCount = useMemo(function () {
+    if (elementWidth === null) return null;
+    if (gridGap === null) return null;
+    return getColumnCount(elementWidth, gridGap);
+  }, [getColumnCount, elementWidth, gridGap]);
+  var columnWidth = getColumnWidth(columnCount, gridGap, elementWidth);
+  var entries = useMemo(function () {
+    if (columnWidth === null) return null;
+    var safeColumnWidth = columnWidth;
+    return items.map(function (item) {
+      return {
+        data: getItemData(item, safeColumnWidth),
+        item: item
+      };
+    });
+  }, [items, columnWidth, getItemData]);
+  return useMemo(function () {
+    if (windowMargin === null || gridGap === null || columnCount === null || entries === null) {
+      return null;
+    }
+
+    return {
+      windowMargin: windowMargin,
+      gridGap: gridGap,
+      columnCount: columnCount,
+      entries: entries
+    };
+  }, [windowMargin, gridGap, columnCount, entries]);
+}
+export function useGridListLayoutData(configData) {
+  return useMemo(function () {
+    if (configData === null) return null;
+    var currentRowNumber = 1;
+    var prevRowsTotalHeight = 0;
+    var currentRowMaxHeight = 0;
+    var cells = configData.entries.map(function (entry, index) {
+      var key = entry.data.key;
+      var columnNumber = index % configData.columnCount + 1;
+      var rowNumber = Math.floor(index / configData.columnCount) + 1;
+
+      if (rowNumber !== currentRowNumber) {
+        currentRowNumber = rowNumber;
+        prevRowsTotalHeight += currentRowMaxHeight + configData.gridGap;
+        currentRowMaxHeight = 0;
+      }
+
+      var offset = prevRowsTotalHeight;
+      var height = Math.round(entry.data.height);
+      var width = Math.round(entry.data.width);
+      currentRowMaxHeight = Math.max(currentRowMaxHeight, height);
+      return {
+        key: key,
+        columnNumber: columnNumber,
+        rowNumber: rowNumber,
+        offset: offset,
+        height: height,
+        width: width,
+        item: entry.item
+      };
+    });
+    var totalHeight = prevRowsTotalHeight + currentRowMaxHeight;
+    return {
+      totalHeight: totalHeight,
+      cells: cells
+    };
+  }, [configData]);
+}
+export function useGridListRenderData(containerData, configData, layoutData) {
+  return useMemo(function () {
+    if (layoutData === null || configData === null) return null;
+    var cellsToRender = [];
+    var firstRenderedRowNumber = null;
+    var firstRenderedRowOffset = null;
+
+    if (containerData.elementWindowOffset !== null) {
+      var elementWindowOffset = containerData.elementWindowOffset;
+
+      var _iterator = _createForOfIteratorHelper(layoutData.cells),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var cell = _step.value;
+          var cellTop = elementWindowOffset + cell.offset;
+          var cellBottom = cellTop + cell.height;
+          var windowTop = containerData.windowScroll.y;
+          var windowBottom = windowTop + containerData.windowSize.height;
+          var renderTop = windowTop - configData.windowMargin;
+          var renderBottom = windowBottom + configData.windowMargin;
+          if (cellTop > renderBottom) continue;
+          if (cellBottom < renderTop) continue;
+
+          if (firstRenderedRowNumber === null) {
+            firstRenderedRowNumber = cell.rowNumber;
+          }
+
+          if (cell.rowNumber === firstRenderedRowNumber) {
+            firstRenderedRowOffset = firstRenderedRowOffset ? Math.min(firstRenderedRowOffset, cell.offset) : cell.offset;
+          }
+
+          cellsToRender.push(cell);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+
+    return {
+      cellsToRender: cellsToRender,
+      firstRenderedRowNumber: firstRenderedRowNumber,
+      firstRenderedRowOffset: firstRenderedRowOffset
+    };
+  }, [layoutData, configData, containerData.windowScroll.y, containerData.windowSize.height, containerData.elementWindowOffset]);
+}

package/es/List/GridList/index.css

@@ -0,0 +1,7 @@
+.cloudapp-grid-list {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: 20px;
+  contain: strict;
+}

package/es/List/GridList/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { GridListItemData } from './interface';
+import './index.less';
+export interface GridListProps<P> {
+    items: P[];
+    getGridGap?: (elementWidth: number, windowHeight: number) => number;
+    getWindowMargin?: (windowHeight: number) => number;
+    getColumnCount: (elementWidth: number, gridGap: number) => number;
+    getItemData: (item: P, columnWidth: number) => GridListItemData;
+    renderItem: (item: P) => React.ReactNode;
+    fixedColumnWidth?: number;
+    className?: string;
+}
+declare const _default: React.ForwardRefExoticComponent<GridListProps<any> & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/es/List/GridList/index.js

@@ -0,0 +1,47 @@
+import React, { useRef, useImperativeHandle } from 'react';
+import { useGridListConfigData, useGridListContainerData, useGridListLayoutData, useGridListRenderData, useIntersecting } from './hook';
+import { getGridRowStart } from './utils';
+import "./index.css";
+
+function GridList(props, ref) {
+  var containerRef = useRef(null);
+  var containerData = useGridListContainerData(containerRef);
+  var configData = useGridListConfigData(containerData, props);
+  var layoutData = useGridListLayoutData(configData);
+  var renderData = useGridListRenderData(containerData, configData, layoutData);
+  var intersecting = useIntersecting(containerRef, "".concat(configData !== null ? configData.windowMargin : 0, "px"));
+  var colWidth = props.fixedColumnWidth ? "".concat(props.fixedColumnWidth, "px") : '1fr';
+  useImperativeHandle(ref, function () {
+    return containerRef.current;
+  }, []);
+  console.log(renderData);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: "cloudapp-grid-list ".concat(props.className || '')
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      boxSizing: 'border-box',
+      height: layoutData !== null ? layoutData.totalHeight : undefined,
+      paddingTop: renderData !== null && renderData.firstRenderedRowOffset !== null ? renderData.firstRenderedRowOffset : 0
+    }
+  }, intersecting && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: configData !== null ? "repeat(".concat(configData.columnCount, ", ").concat(colWidth, ")") : undefined,
+      gridGap: configData ? configData.gridGap : undefined,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, renderData !== null && renderData.cellsToRender.map(function (cell) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: cell.key,
+      style: {
+        height: cell.height,
+        gridColumnStart: "".concat(cell.columnNumber),
+        gridRowStart: getGridRowStart(cell, renderData)
+      }
+    }, props.renderItem(cell.item));
+  }))));
+}
+
+export default /*#__PURE__*/React.forwardRef(GridList);

package/es/List/GridList/interface.d.ts

@@ -0,0 +1,59 @@
+import React, { useRef, useMemo, useState, useEffect, RefObject, MutableRefObject } from 'react';
+
+export type ConstRef<T> = Readonly<MutableRefObject<T>>;
+
+export interface ElementSize {
+  width: number;
+  height: number;
+}
+
+export interface ElementScroll {
+  x: number;
+  y: number;
+}
+
+export interface GridListItemData {
+  key: string;
+  height: number;
+  width: number;
+}
+
+export interface GridListEntry<P> {
+  item: P;
+  data: GridListItemData;
+}
+
+export interface GridListConfigData<P> {
+  windowMargin: number;
+  gridGap: number;
+  columnCount: number;
+  entries: GridListEntry<P>[];
+}
+
+export interface GridListContainerData {
+  windowSize: ElementSize;
+  elementSize: ElementSize | null;
+  windowScroll: ElementScroll;
+  elementWindowOffset: number | null;
+}
+
+export interface GridListCell<P> {
+  key: string;
+  columnNumber: number;
+  rowNumber: number;
+  offset: number;
+  height: number;
+  width: number;
+  item: P;
+}
+
+export interface GridListLayoutData<P> {
+  totalHeight: number;
+  cells: GridListCell<P>[];
+}
+
+export interface GridListRenderData<P> {
+  cellsToRender: GridListCell<P>[];
+  firstRenderedRowNumber: number | null;
+  firstRenderedRowOffset: number | null;
+}

package/es/List/GridList/utils.d.ts

@@ -0,0 +1,9 @@
+import { ElementScroll, ElementSize, GridListCell, GridListRenderData } from './interface';
+export declare function isSameElementSize(a: ElementSize, b: ElementSize): boolean;
+export declare function getWindowSize(): ElementSize;
+export declare function getElementSize(element: Element): ElementSize;
+export declare function isSameElementScroll(a: ElementScroll, b: ElementScroll): boolean;
+export declare function getWindowScroll(): ElementScroll;
+export declare function getElementOffset(element: Element): number;
+export declare function getColumnWidth(columnCount: number | null, gridGap: number | null, elementWidth: number | null): number;
+export declare function getGridRowStart<P>(cell: GridListCell<P>, renderData: GridListRenderData<P> | null): string;

package/es/List/GridList/utils.js

@@ -0,0 +1,43 @@
+export function isSameElementSize(a, b) {
+  return a.width === b.width && a.height === b.height;
+}
+export function getWindowSize() {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+}
+export function getElementSize(element) {
+  var rect = element.getBoundingClientRect();
+  return {
+    width: rect.width,
+    height: rect.height
+  };
+}
+export function isSameElementScroll(a, b) {
+  return a.x === b.x && a.y === b.y;
+}
+export function getWindowScroll() {
+  return {
+    x: window.scrollX,
+    y: window.scrollY
+  };
+}
+export function getElementOffset(element) {
+  return window.scrollY + element.getBoundingClientRect().top;
+}
+export function getColumnWidth(columnCount, gridGap, elementWidth) {
+  if (columnCount === null || gridGap === null || elementWidth === null) {
+    return null;
+  }
+
+  var totalGapSpace = (columnCount - 1) * gridGap;
+  var columnWidth = Math.round((elementWidth - totalGapSpace) / columnCount);
+  return columnWidth;
+}
+export function getGridRowStart(cell, renderData) {
+  if (renderData === null) return undefined;
+  var offset = renderData.firstRenderedRowNumber !== null ? renderData.firstRenderedRowNumber - 1 : 0;
+  var gridRowStart = cell.rowNumber - offset;
+  return "".concat(gridRowStart);
+}

package/es/List/ListExt/index.css

@@ -0,0 +1,3 @@
+.vidc-list-component {
+  margin-left: -1px;
+}

package/es/List/ListExt/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CheckListProps } from '../interface';
+import './index.less';
+export interface IListProps<T> extends CheckListProps<T>, IListExtProps {
+}
+export interface IListExtProps {
+    title?: string;
+    titleExt?: React.ReactNode;
+    inputPlaceholder?: string;
+    onKeywordChange?: (key: string) => void;
+}
+declare function ListExt<T>({ onKeywordChange, title, inputPlaceholder, titleExt, className, ...props }: IListProps<T>): JSX.Element;
+declare namespace ListExt {
+    var defaultProps: {
+        inputPlaceholder: string;
+        title: string;
+    };
+}
+export default ListExt;

package/es/List/ListExt/index.js

@@ -0,0 +1,44 @@
+import { __rest } from "tslib";
+import React from 'react';
+import List from '../index';
+import Title from '../../Title';
+import "./index.css";
+
+function ListExt(_a) {
+  var onKeywordChange = _a.onKeywordChange,
+      title = _a.title,
+      inputPlaceholder = _a.inputPlaceholder,
+      titleExt = _a.titleExt,
+      className = _a.className,
+      props = __rest(_a, ["onKeywordChange", "title", "inputPlaceholder", "titleExt", "className"]);
+
+  return /*#__PURE__*/React.createElement(List, Object.assign({}, props, {
+    className: "".concat(className, " vidc-list-component"),
+    checkExt: /*#__PURE__*/React.createElement(ListExtTitle, {
+      titleExt: titleExt,
+      onKeywordChange: onKeywordChange,
+      inputPlaceholder: inputPlaceholder,
+      title: title
+    })
+  }));
+}
+
+function ListExtTitle(_ref) {
+  var title = _ref.title,
+      inputPlaceholder = _ref.inputPlaceholder,
+      onKeywordChange = _ref.onKeywordChange,
+      titleExt = _ref.titleExt;
+  return /*#__PURE__*/React.createElement(Title, {
+    title: title,
+    inputPlaceholder: inputPlaceholder,
+    onChange: onKeywordChange,
+    hasInput: !!onKeywordChange,
+    titleExt: titleExt
+  });
+}
+
+ListExt.defaultProps = {
+  inputPlaceholder: '请输入关键字搜索',
+  title: '列表'
+};
+export default ListExt;

package/es/List/VList/index.css

@@ -0,0 +1,6 @@
+.vidc-simple-list-layout {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  contain: strict;
+}

package/es/List/VList/index.d.ts

@@ -0,0 +1,18 @@
+import './index.less';
+interface IVListProps<T> {
+    data?: Array<T>;
+    rowHeight?: number;
+    className?: string;
+    renderItem?(item: T, index: number): JSX.Element;
+    overscan?: number;
+}
+declare function VList<T>({ className, rowHeight, data, renderItem }: IVListProps<T>): JSX.Element;
+declare namespace VList {
+    var defaultProps: {
+        className: string;
+        rowHeight: number;
+        overscan: number;
+        data: any[];
+    };
+}
+export default VList;

package/es/List/VList/index.js

@@ -0,0 +1,51 @@
+import _useVirtualList3 from "ahooks/es/useVirtualList";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useRef } from 'react';
+import "./index.css";
+
+function VList(_ref) {
+  var className = _ref.className,
+      rowHeight = _ref.rowHeight,
+      data = _ref.data,
+      renderItem = _ref.renderItem;
+  var containerRef = useRef();
+  var wrapperRef = useRef();
+
+  var _useVirtualList = _useVirtualList3(data, {
+    containerTarget: containerRef,
+    wrapperTarget: wrapperRef,
+    itemHeight: rowHeight,
+    overscan: 10
+  }),
+      _useVirtualList2 = _slicedToArray(_useVirtualList, 1),
+      list = _useVirtualList2[0];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "vidc-simple-list-layout ".concat(className),
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef
+  }, list.map(function (ele) {
+    return renderItem(ele.data, ele.index);
+  })));
+}
+
+VList.defaultProps = {
+  className: '',
+  rowHeight: 30,
+  overscan: 10,
+  data: []
+};
+export default VList;

package/es/List/VList/utils.d.ts

@@ -0,0 +1,14 @@
+import React, { Key } from 'react';
+export declare function renderRowItem(rowRenderer?: ({ data, index, style }: {
+    data: any;
+    index: number;
+    style?: React.CSSProperties;
+}) => JSX.Element, renderItem?: (item: any, index: number) => JSX.Element, data?: any[]): (({ data, index, style }: {
+    data: any;
+    index: number;
+    style?: React.CSSProperties;
+}) => JSX.Element) | (({ key, index, style }: {
+    key: Key;
+    index: number;
+    style?: React.CSSProperties;
+}) => JSX.Element);

package/es/List/VList/utils.js

@@ -0,0 +1,17 @@
+import React from 'react';
+export function renderRowItem(rowRenderer, renderItem, data) {
+  if (rowRenderer) {
+    return rowRenderer;
+  }
+
+  return function (_ref) {
+    var key = _ref.key,
+        index = _ref.index,
+        style = _ref.style;
+    var item = data[index];
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      style: style
+    }, renderItem(item, index));
+  };
+}