@chem-po/react-web 0.0.51 → 0.0.53

package/src/components/form/view/index.tsx

@@ -1,52 +0,0 @@
-import { Flex, Text } from '@chakra-ui/react'
-
-import { formatField } from '@chem-po/core'
-import { Field, FormatField } from '@chem-po/react'
-import React, { CSSProperties, useMemo } from 'react'
-import { FileFieldView } from './file'
-import { MultipleSelectFieldView } from './multipleSelect'
-import { SelectFieldView } from './select'
-import { FieldViewProps } from './types'
-
-const DefaultFieldView = <F extends Field>({ field, value, noLabel, style }: FieldViewProps<F>) => {
-  const { placeholder } = field
-
-  const formatted = useMemo(() => {
-    const format = formatField[field._type] as FormatField<F>
-    if (!format) return value
-    return format(field, value)
-  }, [value, field])
-  return (
-    <Flex align="center" style={style}>
-      {noLabel ? null : (
-        <Text pr={2} opacity={0.7} fontWeight={600}>
-          {placeholder}
-        </Text>
-      )}
-      <Text opacity={value !== undefined && value !== null ? 1 : 0.6}>{formatted ?? 'None'}</Text>
-    </Flex>
-  )
-}
-
-export const FieldView = ({
-  field,
-  value,
-  noLabel,
-  style,
-}: {
-  field: Field
-  value: any
-  noLabel?: boolean
-  style?: CSSProperties
-}) => {
-  switch (field._type) {
-    case 'select':
-      return <SelectFieldView style={style} field={field} value={value} noLabel={noLabel} />
-    case 'multipleSelect':
-      return <MultipleSelectFieldView style={style} field={field} value={value} noLabel={noLabel} />
-    case 'file':
-      return <FileFieldView style={style} field={field} value={value} noLabel={noLabel} />
-    default:
-      return <DefaultFieldView style={style} field={field} value={value} noLabel={noLabel} />
-  }
-}

package/src/components/form/view/multipleSelect.tsx

@@ -1,51 +0,0 @@
-import { Box, Text } from '@chakra-ui/react'
-
-import { Flex, useColorMode } from '@chakra-ui/react'
-import { MultipleSelectField } from '@chem-po/react'
-import React, { useMemo } from 'react'
-import { useInputStyles } from '../input/hooks/useInputStyles'
-import { getRenderSelectedOptionText } from '../input/multipleSelect'
-import { FieldViewProps } from './types'
-
-export const MultipleSelectFieldView = <F extends MultipleSelectField>({
-  field,
-  value,
-  noLabel,
-  style,
-}: FieldViewProps<F>) => {
-  const { placeholder, options } = field
-  const { size, text } = useInputStyles(undefined, field.size)
-  const selectedOptions = useMemo(
-    () => options.filter(o => value?.includes(o.value)),
-    [value, options],
-  )
-  const RenderSelectedOptionText = useMemo(
-    () => getRenderSelectedOptionText(field, text),
-    [field, text],
-  )
-  const { colorMode } = useColorMode()
-  return (
-    <Flex maxW="100%" flexFlow="row wrap" align="center" style={style}>
-      {noLabel ? null : (
-        <Text pr={2} opacity={0.7} fontWeight={600}>
-          {placeholder}
-        </Text>
-      )}
-      {selectedOptions.length ? (
-        selectedOptions.map(o => (
-          <Box key={o.value} p={0.5}>
-            <RenderSelectedOptionText
-              value={o.value}
-              option={o}
-              colorMode={colorMode}
-              isSelected={true}
-              size={size}
-            />
-          </Box>
-        ))
-      ) : (
-        <Text opacity={0.6}>None</Text>
-      )}
-    </Flex>
-  )
-}

package/src/components/form/view/select.tsx

@@ -1,50 +0,0 @@
-import { Flex, Text, useColorMode } from '@chakra-ui/react'
-import { SelectField } from '@chem-po/react'
-import React from 'react'
-import { useInputStyles } from '../input/hooks/useInputStyles'
-import { FieldViewProps } from './types'
-
-const stringifyValue = (value: any) => {
-  if (typeof value === 'string') return value
-  if (typeof value === 'number') return value.toString()
-  if (typeof value === 'boolean') return value.toString()
-  return JSON.stringify(value)
-}
-const DefaultRenderOption = (value: any) => {
-  // TODO: maybe handle non-string values more gracefully
-  return <Text>{stringifyValue(value)}</Text>
-}
-
-export const SelectFieldView = <F extends SelectField>({
-  field,
-  value,
-  noLabel,
-  style,
-  size: propSize,
-}: FieldViewProps<F>) => {
-  const { placeholder, renderOption: customRender } = field
-  const { colorMode } = useColorMode()
-  const { size } = useInputStyles(undefined, field.size, propSize)
-  const selectedOption = field.options.find(o => o.value === value)
-  const RenderOption = customRender ?? DefaultRenderOption
-  return (
-    <Flex align="center" style={style}>
-      {noLabel ? null : (
-        <Text pr={2} opacity={0.7} fontWeight={600}>
-          {placeholder}
-        </Text>
-      )}
-      {value && selectedOption ? (
-        <RenderOption
-          value={value}
-          option={selectedOption}
-          colorMode={colorMode}
-          isSelected={true}
-          size={size}
-        />
-      ) : (
-        <Text>None</Text>
-      )}
-    </Flex>
-  )
-}

package/src/components/form/view/types.ts

@@ -1,11 +0,0 @@
-import { InputSize } from '@chem-po/core'
-import { Field } from '@chem-po/react'
-import { CSSProperties } from 'react'
-
-export interface FieldViewProps<F extends Field> {
-  field: F
-  value: F['defaultValue']
-  noLabel?: boolean
-  size?: InputSize
-  style?: CSSProperties
-}

package/src/components/index.ts

@@ -1,14 +0,0 @@
-export * from './auth'
-export * from './box'
-export * from './button'
-export * from './feed'
-export * from './form'
-export * from './list'
-export * from './loading'
-export * from './media'
-export * from './modal'
-export * from './nav'
-export * from './overlay'
-export * from './text'
-export * from './theme'
-export * from './view'

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

@@ -1,177 +0,0 @@
-import { useColorMode } from '@chakra-ui/react'
-import { AnyObject, WithId } from '@chem-po/core'
-import { ListGridOptions, useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import React, { 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

@@ -1,114 +0,0 @@
-import { useColorMode } from '@chakra-ui/react'
-import { AnyObject, WithId } from '@chem-po/core'
-import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import React, { 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

@@ -1,24 +0,0 @@
-import { useDataList } from '@chem-po/react'
-import React from '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

@@ -1,104 +0,0 @@
-import { useColorMode } from '@chakra-ui/react'
-import { AnyObject, BaseComponent, ItemPreviewProps, ListGridOptions } from '@chem-po/core'
-import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import React, { 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

@@ -1,92 +0,0 @@
-import { useColorMode } from '@chakra-ui/react'
-import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import React, { 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