@chem-po/react-web 0.0.4 → 0.0.6

package/src/components/list/Body/InfiniteScrollGridBody.tsx

@@ -0,0 +1,177 @@
+import { useColorMode } from '@chakra-ui/react'
+import { AnyObject, WithId } from '@chem-po/core'
+import { ListGridOptions, useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import {
+  FixedSizeGrid,
+  GridOnItemsRenderedProps,
+  ListOnItemsRenderedProps,
+  VariableSizeGrid,
+} from 'react-window'
+import InfiniteLoader from 'react-window-infinite-loader'
+import { GridItemProps, ListCell } from '../ListItem/ListCell'
+import { ListItemProps } from '../ListItem/ListRow'
+import { NoItemsRow } from '../NoItems'
+import { getIsDynamicSize } from '../utils'
+import { useGridDims } from './hooks'
+
+export const InfiniteScrollGridBody = <T extends AnyObject>({
+  height,
+  options,
+}: {
+  height: number
+  options: ListGridOptions<T>
+}) => {
+  const {
+    totalCount,
+    data: { data: items },
+    refetchItem,
+    isItemLoaded,
+    goNext: fetchMoreData,
+  } = usePaginatedList<T>()
+  const { list, onSelectItem, mobileLayout, query } = useDataList<T>()
+  const { width } = useFullSize()
+  const { numCols, numRows, rowHeight, colWidth } = useGridDims<T>(options, width)
+  const { previewHeight, mobile } = list
+  const { colorMode } = useColorMode()
+  const itemData = useMemo<GridItemProps<T>>(
+    () => ({
+      list,
+      items,
+      mobileLayout,
+      grid: options,
+      colorMode,
+      numCols,
+      onSelect: (item: WithId<T>) => onSelectItem(item._id),
+      refetch: refetchItem,
+    }),
+    [items, list, refetchItem, onSelectItem, mobileLayout, numCols, options, colorMode],
+  )
+
+  const varRef = useRef<VariableSizeGrid | null>(null)
+
+  const itemHeight = useMemo(
+    () => (mobileLayout ? (mobile?.previewHeight ?? previewHeight) : previewHeight),
+    [mobile, previewHeight, mobileLayout],
+  )
+
+  useEffect(() => {
+    const varGrid = varRef.current
+    if (varGrid) {
+      varGrid.resetAfterColumnIndex(0)
+      varGrid.resetAfterRowIndex(0)
+    }
+  }, [query])
+
+  const infiniteLoaderRef = useRef<InfiniteLoader>(null)
+  useEffect(() => {
+    if (infiniteLoaderRef.current) {
+      infiniteLoaderRef.current.resetloadMoreItemsCache(true)
+    }
+  }, [totalCount])
+
+  const isDynamicHeight = useMemo(() => getIsDynamicSize(itemHeight), [itemHeight])
+
+  const itemKey = useCallback(
+    ({
+      columnIndex,
+      rowIndex,
+      data,
+    }: {
+      columnIndex: number
+      rowIndex: number
+      data: ListItemProps<T>
+    }) => {
+      const index = rowIndex * numCols + columnIndex
+      return data.items[index]?._id || `${index}`
+    },
+    [numCols],
+  )
+
+  const onRendered = useCallback(
+    (
+      {
+        overscanColumnStartIndex,
+        overscanColumnStopIndex,
+        overscanRowStartIndex,
+        overscanRowStopIndex,
+        visibleColumnStartIndex,
+        visibleColumnStopIndex,
+        visibleRowStartIndex,
+        visibleRowStopIndex,
+      }: GridOnItemsRenderedProps,
+      onItemsRendered: (p: ListOnItemsRenderedProps) => void,
+    ) => {
+      const start = visibleRowStartIndex * numCols + visibleColumnStartIndex
+      const stop = visibleRowStopIndex * numCols + visibleColumnStopIndex
+      const overscanStart = overscanRowStartIndex * numCols + overscanColumnStartIndex
+      const overscanStop = overscanRowStopIndex * numCols + overscanColumnStopIndex
+      onItemsRendered({
+        overscanStartIndex: overscanStart,
+        overscanStopIndex: overscanStop,
+        visibleStartIndex: start,
+        visibleStopIndex: stop,
+      })
+    },
+    [numCols],
+  )
+
+  if (!items.length) {
+    return <NoItemsRow />
+  }
+
+  return isDynamicHeight ? (
+    <InfiniteLoader
+      isItemLoaded={isItemLoaded}
+      ref={infiniteLoaderRef}
+      itemCount={totalCount ?? 0}
+      loadMoreItems={fetchMoreData}>
+      {({ onItemsRendered, ref }) => (
+        <VariableSizeGrid<GridItemProps<T>>
+          height={height}
+          width={width}
+          rowCount={numRows}
+          columnCount={numCols}
+          rowHeight={rowHeight as (idx: number) => number}
+          columnWidth={colWidth as (idx: number) => number}
+          itemData={itemData}
+          style={{ overflowX: 'hidden' }}
+          itemKey={itemKey}
+          onItemsRendered={i => onRendered(i, onItemsRendered)}
+          ref={r => {
+            ref(r)
+            varRef.current = r
+          }}>
+          {ListCell}
+        </VariableSizeGrid>
+      )}
+    </InfiniteLoader>
+  ) : (
+    <InfiniteLoader
+      isItemLoaded={isItemLoaded}
+      itemCount={totalCount ?? 0}
+      ref={infiniteLoaderRef}
+      loadMoreItems={fetchMoreData}>
+      {({ onItemsRendered, ref }) => (
+        <FixedSizeGrid<GridItemProps<T>>
+          height={height}
+          width={width}
+          rowCount={numRows}
+          columnCount={numCols}
+          rowHeight={rowHeight as number}
+          columnWidth={colWidth as number}
+          itemData={itemData}
+          onItemsRendered={i => onRendered(i, onItemsRendered)}
+          style={{
+            overflowX: 'hidden',
+          }}
+          ref={r => {
+            ref(r)
+            varRef.current = null
+          }}>
+          {ListCell}
+        </FixedSizeGrid>
+      )}
+    </InfiniteLoader>
+  )
+}

package/src/components/list/Body/InfiniteScrollListBody.tsx

@@ -0,0 +1,114 @@
+import { useColorMode } from '@chakra-ui/react'
+import { AnyObject, WithId } from '@chem-po/core'
+import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { FixedSizeList, VariableSizeGrid, VariableSizeList } from 'react-window'
+import InfiniteLoader from 'react-window-infinite-loader'
+import { ListItemProps, ListRow } from '../ListItem/ListRow'
+import { NoItemsRow } from '../NoItems'
+import { getIsDynamicSize } from '../utils'
+
+export const InfiniteScrollListBody = ({ height }: { height: number }) => {
+  const {
+    totalCount,
+    data: { data: items },
+    refetchItem,
+    isItemLoaded,
+    goNext: fetchMoreData,
+  } = usePaginatedList()
+  const { list, onSelectItem, mobileLayout, query } = useDataList()
+  const { previewHeight, mobile } = list
+  const { colorMode } = useColorMode()
+  const { width } = useFullSize()
+  const itemData = useMemo<ListItemProps>(
+    () => ({
+      list,
+      items,
+      mobileLayout,
+      colorMode,
+      onSelect: (item: WithId<AnyObject>) => onSelectItem(item._id),
+      refetch: refetchItem,
+    }),
+    [items, list, refetchItem, onSelectItem, mobileLayout, colorMode],
+  )
+
+  const varRef = useRef<VariableSizeGrid | null>(null)
+  const itemHeight = useMemo(
+    () => (mobileLayout ? (mobile?.previewHeight ?? previewHeight) : previewHeight),
+    [mobile, previewHeight, mobileLayout],
+  )
+
+  const infiniteLoaderRef = useRef<InfiniteLoader>(null)
+  useEffect(() => {
+    if (infiniteLoaderRef.current) {
+      infiniteLoaderRef.current.resetloadMoreItemsCache(true)
+    }
+  }, [totalCount])
+
+  useEffect(() => {
+    const varGrid = varRef.current
+    if (varGrid) {
+      varGrid.resetAfterRowIndex(0)
+      varGrid.resetAfterColumnIndex(0)
+    }
+  }, [query])
+
+  const getItemSize = useCallback(
+    (index: number) => (typeof itemHeight === 'function' ? itemHeight(items[index]) : itemHeight),
+    [items, itemHeight],
+  )
+
+  const isDynamicHeight = useMemo(() => getIsDynamicSize(itemHeight), [itemHeight])
+
+  if (!items.length) {
+    return <NoItemsRow />
+  }
+
+  return isDynamicHeight ? (
+    <InfiniteLoader
+      ref={infiniteLoaderRef}
+      isItemLoaded={isItemLoaded}
+      itemCount={totalCount ?? 0}
+      loadMoreItems={fetchMoreData}>
+      {({ onItemsRendered, ref }) => (
+        <VariableSizeList<ListItemProps>
+          height={height}
+          width={width}
+          itemSize={getItemSize}
+          itemCount={totalCount ?? 0}
+          itemData={itemData}
+          style={{ overflowX: 'hidden' }}
+          itemKey={index => items[index]?._id || `${index}`}
+          onItemsRendered={i => {
+            onItemsRendered(i)
+          }}
+          ref={ref}>
+          {ListRow}
+        </VariableSizeList>
+      )}
+    </InfiniteLoader>
+  ) : (
+    <InfiniteLoader
+      ref={infiniteLoaderRef}
+      isItemLoaded={isItemLoaded}
+      itemCount={totalCount ?? 0}
+      loadMoreItems={fetchMoreData}>
+      {({ onItemsRendered, ref }) => (
+        <FixedSizeList<ListItemProps>
+          height={height}
+          width={width}
+          itemSize={itemHeight as number}
+          itemCount={totalCount ?? 0}
+          itemData={itemData}
+          itemKey={index => items[index]?._id || `${index}`}
+          style={{
+            overflowX: 'hidden',
+          }}
+          onItemsRendered={onItemsRendered}
+          ref={ref}>
+          {ListRow}
+        </FixedSizeList>
+      )}
+    </InfiniteLoader>
+  )
+}

package/src/components/list/Body/ListBody.tsx

@@ -0,0 +1,23 @@
+import { useDataList } from '@chem-po/react'
+import { InfiniteScrollGridBody } from './InfiniteScrollGridBody'
+import { InfiniteScrollListBody } from './InfiniteScrollListBody'
+import { PagedGridBody } from './PagedGridBody'
+import { PagedListBody } from './PagedListBody'
+
+export const ListBody = ({ height }: { height: number }) => {
+  const { infiniteScroll, gridLayout, list } = useDataList()
+  const { grid } = list
+
+  if (gridLayout && grid) {
+    return infiniteScroll ? (
+      <InfiniteScrollGridBody options={grid} height={height} />
+    ) : (
+      <PagedGridBody options={grid} height={height} />
+    )
+  }
+  return infiniteScroll ? (
+    <InfiniteScrollListBody height={height} />
+  ) : (
+    <PagedListBody height={height} />
+  )
+}

package/src/components/list/Body/PagedGridBody.tsx

@@ -0,0 +1,104 @@
+import { useColorMode } from '@chakra-ui/react'
+import { AnyObject, BaseComponent, ItemPreviewProps, ListGridOptions } from '@chem-po/core'
+import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
+import { memo, useEffect, useMemo, useRef } from 'react'
+import { FixedSizeGrid, VariableSizeGrid } from 'react-window'
+import { GridItemProps, ListCell } from '../ListItem/ListCell'
+import { NoItemsRow } from '../NoItems'
+import { getIsDynamicSize } from '../utils'
+import { useGridDims } from './hooks'
+
+const BasePagedGridBody = <
+  T extends AnyObject,
+  ItemPreviewComponent extends BaseComponent<ItemPreviewProps<T>>,
+>({
+  height,
+  options,
+}: {
+  height: number
+  options: ListGridOptions<T, ItemPreviewComponent>
+}) => {
+  const { list, onSelectItem, mobileLayout, query } = useDataList<T>()
+  const {
+    data: { data: items },
+    pageIndex,
+  } = usePaginatedList<T>()
+  const variableRef = useRef<VariableSizeGrid>(null)
+  const fixedRef = useRef<FixedSizeGrid>(null)
+  const { width } = useFullSize()
+  const { numCols, numRows, rowHeight, colWidth } = useGridDims<T>(options, width)
+  const { colorMode } = useColorMode()
+  const itemData = useMemo<GridItemProps<T>>(
+    () => ({
+      list,
+      items,
+      numCols,
+      onSelect: item => onSelectItem(item._id),
+      mobileLayout,
+      colorMode,
+      grid: options,
+    }),
+    [items, list, onSelectItem, mobileLayout, numCols, options, colorMode],
+  )
+
+  useEffect(() => {
+    const varGrid = variableRef.current
+    if (varGrid) {
+      varGrid.resetAfterColumnIndex(0)
+      varGrid.resetAfterRowIndex(0)
+    }
+  }, [query])
+
+  // scroll to top when page or query changes
+  useEffect(() => {
+    const varGrid = variableRef.current
+    const fixGrid = fixedRef.current
+    if (varGrid) {
+      varGrid.scrollTo({ scrollLeft: 0, scrollTop: 0 })
+    }
+    if (fixGrid) {
+      fixGrid.scrollTo({ scrollLeft: 0, scrollTop: 0 })
+    }
+  }, [pageIndex, query])
+
+  const isDynamicHeight = useMemo(
+    () => getIsDynamicSize(options.rowHeight) || getIsDynamicSize(options.columnWidth),
+    [options],
+  )
+
+  if (!items.length) return <NoItemsRow />
+
+  return isDynamicHeight ? (
+    <VariableSizeGrid<GridItemProps<T>>
+      ref={variableRef}
+      height={height}
+      width={width}
+      rowCount={numRows}
+      columnCount={numCols}
+      rowHeight={rowHeight as (idx: number) => number}
+      columnWidth={colWidth as (idx: number) => number}
+      itemData={itemData}
+      style={{
+        overflowX: 'hidden',
+      }}>
+      {ListCell}
+    </VariableSizeGrid>
+  ) : (
+    <FixedSizeGrid<GridItemProps<T>>
+      height={height}
+      ref={fixedRef}
+      width={width}
+      rowCount={numRows}
+      columnCount={numCols}
+      rowHeight={rowHeight as number}
+      columnWidth={colWidth as number}
+      itemData={itemData}
+      style={{
+        overflowX: 'hidden',
+      }}>
+      {ListCell}
+    </FixedSizeGrid>
+  )
+}
+
+export const PagedGridBody = memo(BasePagedGridBody) as typeof BasePagedGridBody

package/src/components/list/Body/PagedListBody.tsx

@@ -0,0 +1,92 @@
+import { useColorMode } from '@chakra-ui/react'
+import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
+import { FixedSizeList, VariableSizeList } from 'react-window'
+import { ListItemProps, ListRow } from '../ListItem/ListRow'
+import { NoItemsRow } from '../NoItems'
+import { getIsDynamicSize } from '../utils'
+
+const BasePagedListBody = ({ height }: { height: number }) => {
+  const { list, onSelectItem, mobileLayout, query } = useDataList()
+  const {
+    data: { data: items },
+    pageIndex,
+  } = usePaginatedList()
+  const { width } = useFullSize()
+  const { previewHeight, mobile } = list
+  const varRef = useRef<VariableSizeList>(null)
+  const fixedRef = useRef<FixedSizeList>(null)
+  const { colorMode } = useColorMode()
+  const itemData = useMemo<ListItemProps>(
+    () => ({
+      list,
+      colorMode,
+      items,
+      onSelect: item => onSelectItem(item._id),
+      mobileLayout,
+    }),
+    [items, list, onSelectItem, mobileLayout, colorMode],
+  )
+
+  const itemHeight = useMemo(
+    () => (mobileLayout ? (mobile?.previewHeight ?? previewHeight) : previewHeight),
+    [mobile, previewHeight, mobileLayout],
+  )
+
+  useEffect(() => {
+    const varList = varRef.current
+    if (varList) {
+      varList.resetAfterIndex(0)
+    }
+  }, [query])
+
+  // scroll to top when page or query changes
+  useEffect(() => {
+    const varList = varRef.current
+    const fixList = fixedRef.current
+    if (varList) {
+      varList.scrollTo(0)
+    }
+    if (fixList) {
+      fixList.scrollTo(0)
+    }
+  }, [query, pageIndex])
+
+  const getItemSize = useCallback(
+    (index: number) => (typeof itemHeight === 'function' ? itemHeight(items[index]) : itemHeight),
+    [items, itemHeight],
+  )
+
+  const isDynamicHeight = useMemo(() => getIsDynamicSize(itemHeight), [itemHeight])
+
+  if (!items.length) return <NoItemsRow />
+  return isDynamicHeight ? (
+    <FixedSizeList<ListItemProps>
+      ref={fixedRef}
+      height={height}
+      width={width}
+      itemSize={itemHeight as number}
+      itemCount={items.length}
+      itemData={itemData}
+      style={{
+        overflowX: 'hidden',
+      }}>
+      {ListRow}
+    </FixedSizeList>
+  ) : (
+    <VariableSizeList<ListItemProps>
+      ref={varRef}
+      height={height}
+      width={width}
+      itemSize={getItemSize}
+      itemCount={items.length}
+      itemData={itemData}
+      style={{
+        overflowX: 'hidden',
+      }}>
+      {ListRow}
+    </VariableSizeList>
+  )
+}
+
+export const PagedListBody = memo(BasePagedListBody) as typeof BasePagedListBody

package/src/components/list/Body/hooks.ts

@@ -0,0 +1,84 @@
+import { AnyObject } from '@chem-po/core'
+import { DataList, ListGridOptions, usePaginatedList } from '@chem-po/react'
+import { useMemo } from 'react'
+
+// determine number of columns and rows based on data and grid options
+// if row height and column width are both variable, throw an error
+// if row height is variable, calculate dims based on data
+// if column width is variable, calculate dims based on data
+interface CellDims {
+  numRows: number
+  numCols: number
+}
+const getCellDims = <T extends AnyObject>(
+  data: T[],
+  grid: Required<DataList<T>>['grid'],
+  gridWidth: number,
+): CellDims => {
+  const { rowHeight, columnWidth } = grid
+  if (typeof rowHeight !== 'number' && typeof columnWidth !== 'number') {
+    throw new Error('Cannot have both variable row height and variable column width')
+  }
+
+  if (typeof columnWidth === 'function') {
+    const numCols = Math.floor(gridWidth / columnWidth(data[0]))
+    const numRows = Math.ceil(data.length / numCols)
+    return { numRows, numCols }
+  }
+  const numCols = Math.max(1, Math.floor(gridWidth / columnWidth))
+  const numRows = Math.ceil(data.length / numCols)
+  return { numRows, numCols }
+}
+
+type CellSize = CellDims & {
+  rowHeight: number | ((idx: number) => number)
+  colWidth: number | ((idx: number) => number)
+}
+
+const getCellSize = <T extends AnyObject>(
+  data: T[],
+  grid: Required<DataList<T>>['grid'],
+  gridWidth: number,
+): CellSize => {
+  const { rowHeight: preferredHeight, columnWidth: preferredWidth } = grid
+  const { numRows, numCols } = getCellDims(data, grid, gridWidth)
+
+  const colWidths =
+    typeof preferredWidth === 'number'
+      ? gridWidth / numCols
+      : Array.from({ length: numCols }, (_i, i) => {
+          const col = data.filter((_j, j) => j % numCols === i)
+          return col.reduce((acc, item) => {
+            const itemWidth = preferredWidth(item)
+            return Math.max(acc, itemWidth)
+          }, 0)
+        })
+
+  const rowHeights =
+    typeof preferredHeight === 'number'
+      ? preferredHeight
+      : Array.from({ length: numRows }, (_, i) => {
+          const row = data.slice(i * numCols, (i + 1) * numCols)
+          return row.reduce((acc, item) => {
+            const itemHeight = preferredHeight(item)
+            return Math.max(acc, itemHeight)
+          }, 0)
+        })
+
+  const rowHeight = Array.isArray(rowHeights) ? (idx: number) => rowHeights[idx] : rowHeights
+  const colWidth = Array.isArray(colWidths) ? (idx: number) => colWidths[idx] : colWidths
+
+  return {
+    rowHeight,
+    colWidth,
+    numCols,
+    numRows,
+  }
+}
+
+export const useGridDims = <T extends AnyObject>(grid: ListGridOptions<T>, width: number) => {
+  const {
+    data: { data },
+  } = usePaginatedList<T>()
+  return useMemo(() => getCellSize(data, grid, width), [data, grid, width])
+}

package/src/components/list/DataList.tsx

@@ -0,0 +1,32 @@
+import { AnyObject } from '@chem-po/core'
+import {
+  PaginatedListProvider,
+  useBackendBase,
+  useDataListData,
+  usePaginatedQuery,
+} from '@chem-po/react'
+import { ListContainer } from './ListContainer'
+import { ListContent } from './ListContent'
+import { ListViewProps } from './types'
+
+export const DataList = <T extends AnyObject>({
+  list,
+  basePath,
+  flexProps,
+  infiniteScroll,
+  ...rest
+}: ListViewProps<T>) => {
+  const {
+    adapter: { db },
+  } = useBackendBase()
+  const { baseQuery } = list
+  const state = useDataListData(list, infiniteScroll, basePath)
+  const data = usePaginatedQuery<T>(db, baseQuery, !!infiniteScroll)
+  return (
+    <PaginatedListProvider<T> state={state} data={data}>
+      <ListContainer {...flexProps}>
+        <ListContent {...rest} />
+      </ListContainer>
+    </PaginatedListProvider>
+  )
+}

package/src/components/list/ListContainer.tsx

@@ -0,0 +1,20 @@
+import { Flex, FlexProps } from '@chakra-ui/react'
+import { useMounted } from '@chem-po/react'
+import { FullSizeProvider } from '../box'
+
+export const ListContainer = (props: FlexProps) => {
+  const mounted = useMounted()
+  return (
+    <FullSizeProvider>
+      <Flex
+        overflow="hidden"
+        flexFlow="column"
+        h="100%"
+        w="100%"
+        opacity={mounted ? 1 : 0}
+        transition="opacity 300ms"
+        {...props}
+      />
+    </FullSizeProvider>
+  )
+}