react-virtualized#Grid TypeScript Examples

MenuList: React.FC<MenuListProps> = ({
  rect,
  mainIndex,
  menulist,
  changeCheckState,
}) => {
  const getRowHeight = useCallback(
    ({ index }: { index: number }): number => {
      const menuListItem = menulist[index];
      if (menuListItem.visiable === false) {
        return 0;
      }
      if (menuListItem.type === 'separator') {
        return 10;
      }
      return 30;
    },
    [menulist]
  );

  const MenuListRenderer = useCallback(
    ({ key, rowIndex, style }: RendererProps) => (
      <MenuListItem
        key={key}
        curItem={menulist[rowIndex]}
        style={style}
        changeCheckState={changeCheckState}
        mainIndex={mainIndex}
        subIndex={rowIndex}
      />
    ),
    [menulist, changeCheckState, mainIndex]
  );

  const menuListHeight = menulist
    .map((_l, index) => getRowHeight({ index }))
    .reduce((a, b) => a + b, 0);
  return (
    <div
      id="foldout-container"
      style={{
        position: 'absolute',
        top: rect.bottom,
        left: 0,
        width: '100%',
        height: `calc(100% - ${rect.bottom}px)`,
      }}
    >
      <div className="overlay" tabIndex={-1} />
      <div
        className="foldout"
        style={{
          position: 'absolute',
          marginLeft: rect.left,
          maxWidth: `calc(100% - ${rect.left}px)`,
          height: '100%',
          overflow: 'hidden',
          top: 0,
        }}
      >
        <div id="app-menu-foldout">
          <div
            className="menu-pane"
            style={{
              height: menuListHeight,
              maxHeight: '100%',
            }}
          >
            <div className="list" role="menu">
              <Grid
                cellRenderer={MenuListRenderer}
                columnCount={1}
                rowCount={menulist.length}
                columnWidth={240}
                height={menuListHeight}
                rowHeight={getRowHeight}
                width={240}
              />
            </div>
            <div className="menu-pane menu-endblock" />
          </div>
        </div>
      </div>
    </div>
  );
}

SearchView: React.FC<{
  title: string;
  titleSubtext?: string;
  icon: IconName;
  iconColor?: string;
  hiddenSearch: SearchQuery;
  defaultSearch: SearchQuery;
  onClickItem?: (item: DataItem) => void;
  rightContent?: React.ReactNode;
}> = props => {
  const mainContent = useMainContentContext();
  const dataInterface = useDataInterface();
  const overlaySearch = useOverlaySearch();
  const [hiddenSearch, setHiddenSearch] = useState(props.hiddenSearch);
  const [userSearch, setUserSearch] = useState(props.defaultSearch);
  // const [searchQuery, setSearchQuery] = useState<SearchQuery>({ ...props.hiddenSearch, ...props.defaultSearch });
  const searchQuery = { ...hiddenSearch, ...userSearch };
  const { items, nextPageAvailable, fetchNextPage, isFetching } = useDataSearch(
    Object.keys(searchQuery).length === 0 ? { all: true } : searchQuery,
    200
  );
  const parent = useDataItem(hiddenSearch.parents?.[0]);
  const previews = useDataItemPreviews(items);
  // TODO currently, all previews are loaded at once. Use Grid.onSectionRendered() to only load previews when they enter the viewport

  useEffect(() => setHiddenSearch(q => ({ ...q, ...props.hiddenSearch })), [props.hiddenSearch]);
  useEffect(() => setUserSearch(q => ({ ...q, ...props.defaultSearch })), [props.defaultSearch]);

  return (
    <PageContainer
      header={
        <PageHeader
          title={props.title}
          titleSubtext={props.titleSubtext}
          icon={props.icon}
          iconColor={props.iconColor}
          lowerContent={
            <SearchBar onChangeSearchQuery={setUserSearch}>
              <SearchInput />
            </SearchBar>
          }
          rightContent={
            <>
              {props.rightContent}{' '}
              <Popover content={<SearchSortingMenu searchQuery={hiddenSearch} onChange={setHiddenSearch} />}>
                <Button
                  icon={searchQuery.sortDirection === SearchQuerySortDirection.Ascending ? 'sort-asc' : 'sort-desc'}
                  outlined
                >
                  Sort Items
                </Button>
              </Popover>
              {parent && (
                <>
                  {' '}
                  <Popover
                    interactionKind={'click'}
                    position={'bottom'}
                    captureDismiss={true}
                    content={
                      <DataItemContextMenu
                        item={parent}
                        renderer={Bp3MenuRenderer}
                        mainContent={mainContent}
                        dataInterface={dataInterface}
                        overlaySearch={overlaySearch}
                      />
                    }
                  >
                    <Button outlined rightIcon={'chevron-down'}>
                      More
                    </Button>
                  </Popover>
                </>
              )}
            </>
          }
        />
      }
    >
      <AutoSizer>
        {({ width, height }) => {
          if (width <= searchViewCellDimensions.cellWidth) return null;

          const rowCount = Math.ceil(items.length / Math.floor(width / searchViewCellDimensions.cellWidth));
          const columnCount = Math.floor(width / searchViewCellDimensions.cellWidth);
          return (
            <Grid
              cellRenderer={cellProps => {
                const itemId =
                  cellProps.rowIndex * Math.floor(width / searchViewCellDimensions.cellWidth) + cellProps.columnIndex;
                const additionalLeftMargin = (width - columnCount * searchViewCellDimensions.cellWidth) / 2;

                if (items.length === 0) {
                  return null; // Provoke non ideal state
                }

                if (itemId >= items.length) {
                  if (!nextPageAvailable) {
                    return null;
                  }

                  fetchNextPage();
                  return (
                    <LoadingSearchViewCard
                      key={cellProps.key}
                      additionalLeftMargin={additionalLeftMargin}
                      containerStyle={cellProps.style}
                    />
                  );
                }

                const item = items[itemId];

                return (
                  <SearchViewCard
                    cellProps={cellProps}
                    dataItem={item}
                    additionalLeftMargin={additionalLeftMargin}
                    onClick={props.onClickItem ? () => props.onClickItem?.(item) : undefined}
                    preview={previews[item.id]}
                  />
                );
              }}
              columnWidth={searchViewCellDimensions.cellWidth}
              columnCount={columnCount}
              noContentRenderer={() =>
                isFetching ? (
                  <NonIdealState icon={<Spinner />} title="Loading items..." />
                ) : (
                  <NonIdealState icon={'warning-sign'} title="No items found" />
                )
              }
              overscanColumnCount={0}
              overscanRowCount={6}
              rowHeight={searchViewCellDimensions.cellHeight}
              rowCount={rowCount + (nextPageAvailable ? 12 : 0)}
              onSectionRendered={section => {}}
              height={height}
              width={width}
            />
          );
        }}
      </AutoSizer>
    </PageContainer>
  );
}