@krowdy-ui/views/esm/ListWindow/ListWindow.js

React components that implement Google's Material Design.

import React from 'react';
import { FixedSizeList as List } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';

function ListWindow(props) {
  var ItemComponent = props.ItemComponent,
      rows = props.rows,
      loadNextPage = props.loadMoreItems,
      pagination = props.pagination,
      _props$listWidth = props.listWidth,
      listWidth = _props$listWidth === void 0 ? 300 : _props$listWidth,
      _props$listHeight = props.listHeight,
      listHeight = _props$listHeight === void 0 ? 300 : _props$listHeight,
      _props$itemHeight = props.itemHeight,
      itemHeight = _props$itemHeight === void 0 ? 30 : _props$itemHeight; // const listRef = useRef(null)
  // const hasMountedRef = useRef(false)
  // Each time the sort prop changed we called the method resetloadMoreItemsCache to clear the cache
  // useEffect(() => {
  //   if(listRef.current && hasMountedRef.current)
  //     listRef.current.resetloadMoreItemsCache()
  //   hasMountedRef.current = true
  // }, [ sortOrder ])
  // If there are more items to be loaded then add an extra row to hold a loading indicator.
  // const itemCount = hasNextPage ? rows.length + 1 : rows.length
  // Only load 1 page of items at a time.
  // Pass an empty callback to InfiniteLoader in case it asks us to load more than once.

  var loadMoreItems = rows.length < pagination.page + 1 * pagination.perPage ? loadNextPage : function () {}; // Every row is loaded except for our loading indicator row.

  var isItemLoaded = function isItemLoaded(index) {
    return !!rows[index];
  }; // index < rows.length || !hasNextPage
  // Render an item or a loading indicator.
  // const Item = ({ index, style }) => {
  //   let content = (!isItemLoaded(index)) ? 'Loading...' : rows[index]
  //   // let content = isItemLoaded && rows[index] ? rows[index].name : 'Loading...'
  //   return <div style={style}>{content}</div>
  // }
  // console.log('Grover: isItemLoaded', isItemLoaded)
  // We passed down the ref to the InfiniteLoader component


  return /*#__PURE__*/React.createElement(InfiniteLoader, {
    isItemLoaded: isItemLoaded,
    itemCount: pagination.total // ref={listRef}
    ,
    loadMoreItems: loadMoreItems
  }, function (_ref) {
    var onItemsRendered = _ref.onItemsRendered,
        ref = _ref.ref;
    return /*#__PURE__*/React.createElement(List, {
      height: listHeight,
      itemCount: pagination.total,
      itemSize: itemHeight,
      onItemsRendered: onItemsRendered,
      ref: ref,
      width: listWidth
    }, ItemComponent);
  });
}

export default ListWindow;