@chem-po/react-web 0.0.51 → 0.0.53

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

@@ -1,84 +0,0 @@
-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

@@ -1,33 +0,0 @@
-import { AnyObject } from '@chem-po/core'
-import {
-  PaginatedListProvider,
-  useBackendBase,
-  useDataListData,
-  usePaginatedQuery,
-} from '@chem-po/react'
-import React from '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)
-  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

@@ -1,21 +0,0 @@
-import { Flex, FlexProps } from '@chakra-ui/react'
-import { useMounted } from '@chem-po/react'
-import React from '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>
-  )
-}

package/src/components/list/ListContent.tsx

@@ -1,54 +0,0 @@
-import { Box } from '@chakra-ui/react'
-import { AnyObject } from '@chem-po/core'
-import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import React, { useCallback, useMemo, useState } from 'react'
-import { LoadingOverlay } from '../loading'
-import { ListBody } from './Body/ListBody'
-import { ListCreate } from './ListCreate'
-import { ListFooter } from './ListFooter'
-import { DataListHeader } from './ListHeader'
-import { ListItemView } from './ListItemView'
-import { ListContentProps } from './types'
-
-export const ListContent = <T extends AnyObject>({
-  modals,
-  noFooter,
-  headerProps,
-  footerProps,
-}: ListContentProps<T>) => {
-  const {
-    data: { isLoading, data },
-  } = usePaginatedList()
-  const { list } = useDataList<T>()
-  const { height } = useFullSize()
-
-  const [headerHeight, setHeaderHeight] = useState(0)
-  const [footerHeight, setFooterHeight] = useState(0)
-  const bodyHeight = useMemo(
-    () => height - headerHeight - footerHeight,
-    [height, headerHeight, footerHeight],
-  )
-  const handleHeaderResize = useCallback((updated: { height: number; width: number }) => {
-    setHeaderHeight(updated.height)
-  }, [])
-
-  const handleFooterResize = useCallback((size: { width: number; height: number }) => {
-    setFooterHeight(size.height)
-  }, [])
-
-  const { ItemView: ItemViewComponent, field: createField } = list
-
-  return (
-    <>
-      <DataListHeader boxProps={headerProps} onResize={handleHeaderResize} />
-      <Box h={`${bodyHeight}px`} position="relative" w="100%">
-        <ListBody height={bodyHeight} />
-        {noFooter ? <LoadingOverlay isLoading={!data.length && isLoading} /> : null}
-      </Box>
-      <ListFooter noFooter={noFooter} flexProps={footerProps} onResize={handleFooterResize} />
-      {modals ?? null}
-      {ItemViewComponent ? <ListItemView /> : null}
-      {createField ? <ListCreate field={createField} /> : null}
-    </>
-  )
-}

package/src/components/list/ListCreate.tsx

@@ -1,57 +0,0 @@
-import { CloseIcon } from '@chakra-ui/icons'
-import { Flex, IconButton, Text } from '@chakra-ui/react'
-import { FieldMap, useBackendBase, useDataList, usePaginatedList } from '@chem-po/react'
-import React, { useCallback } from 'react'
-import { Form } from '../form'
-import { DesktopModal } from '../modal'
-
-export const ListCreate = ({ field }: { field: FieldMap }) => {
-  const {
-    list: { baseQuery, itemName },
-    newItemOpen: isOpen,
-    setNewItemOpen: setIsOpen,
-  } = useDataList()
-  const {
-    adapter: { db },
-  } = useBackendBase()
-  const { refetch } = usePaginatedList()
-  // const collectionRef = useMemo(() => collection(db, collectionPath), [collectionPath, db])
-  // const newItemDoc = useMemo(() => (isOpen ? doc(collectionRef) : null), [collectionRef, isOpen])
-  // const newItemStoragePath = useMemo(
-  //   () => (newItemDoc ? `${storagePath}/${newItemDoc.id}` : null),
-  //   [storagePath, newItemDoc],
-  // )
-  const handleSubmit = useCallback(
-    async (data: object) => {
-      // if (!newItemDoc) return { [FORM_ERROR]: 'No document reference' }
-      // await setDoc(newItemDoc, data)
-      await db.createItem(baseQuery.collection, data)
-      setIsOpen(false)
-      if (refetch) refetch()
-      return undefined
-    },
-    [setIsOpen, refetch, db, baseQuery],
-  )
-
-  return (
-    <DesktopModal isOpen={isOpen} onClose={() => setIsOpen(false)}>
-      <Flex align="center" pt={3} px={3} w="100%">
-        <Text pl={1} opacity={0.7} fontWeight={600}>
-          NEW {itemName.toUpperCase()}
-        </Text>
-        <IconButton
-          size="sm"
-          borderRadius="full"
-          ml="auto"
-          h={7}
-          w={7}
-          minW={0}
-          onClick={() => setIsOpen(false)}
-          aria-label="Close"
-          icon={<CloseIcon opacity={0.8} w={3} h={3} />}
-        />
-      </Flex>
-      <Form field={field} onSubmit={handleSubmit} />
-    </DesktopModal>
-  )
-}

package/src/components/list/ListFilters.tsx

@@ -1,182 +0,0 @@
-import {
-  Box,
-  Button,
-  Flex,
-  HStack,
-  IconButton,
-  Image,
-  Popover,
-  PopoverArrow,
-  PopoverBody,
-  PopoverCloseButton,
-  PopoverContent,
-  PopoverTrigger,
-  Portal,
-  Text,
-  useColorMode,
-  useColorModeValue,
-} from '@chakra-ui/react'
-
-import { AnyObject, isFilterGroup, QueryFilter } from '@chem-po/core'
-import { FilterPreset, FilterPresetGroup, useDataList, useScreen } from '@chem-po/react'
-import React, { useMemo } from 'react'
-import { useBorderColor } from '../../hooks'
-import { filterMatchesPreset } from './utils'
-
-const FilterButton = <T extends AnyObject>({
-  filter,
-  filters,
-  GroupRender,
-  toggleFilter,
-}: {
-  filter: FilterPreset<T>
-  filters: QueryFilter<T>[]
-  GroupRender?: FilterPresetGroup<T>['RenderFilter']
-  toggleFilter: (toggled: FilterPreset<T>) => void
-}) => {
-  const { label, Render } = filter
-  const isActive = useMemo(
-    () => filters.some(f => filterMatchesPreset(f, filter)),
-    [filters, filter],
-  )
-  const { colorMode } = useColorMode()
-  const borderColor = useBorderColor()
-  const textColor = useColorModeValue('gray.700', 'gray.100')
-  const CustomRender = Render ?? GroupRender
-  return (
-    <Box p={0.5}>
-      <Button
-        onClick={() => toggleFilter(filter)}
-        variant="unstyled"
-        color={isActive && !CustomRender ? 'white' : textColor}
-        bg={isActive && !CustomRender ? 'accent.400' : 'transparent'}
-        px={CustomRender ? 0 : 2}
-        py={CustomRender ? 0 : 1}
-        transition="all 300ms"
-        border="none"
-        boxShadow={`0px 0px 1px 1px ${isActive ? 'transparent' : '#00000033'}`}
-        w="auto"
-        _dark={{
-          boxShadow: `0px 0px 1px 1px ${isActive ? 'transparent' : '#ffffff66'}`,
-        }}
-        h="auto"
-        minW="0"
-        minH="0"
-        alignItems="center"
-        justifyContent="center"
-        borderColor={isActive ? 'transparent' : borderColor}
-        size="none">
-        {CustomRender ? (
-          <CustomRender active={isActive} colorMode={colorMode} preset={filter} />
-        ) : (
-          <Text textShadow={isActive ? '0 0 3px rgba(0,0,0,0.8)' : 'none'} fontSize="xs">
-            {label}
-          </Text>
-        )}
-      </Button>
-    </Box>
-  )
-}
-
-const FilterGroup = <T extends AnyObject>({
-  group,
-  filters,
-  toggleFilter,
-}: {
-  group: FilterPresetGroup<T>
-  filters: QueryFilter<T>[]
-  toggleFilter: (toggled: FilterPreset<T>) => void
-}) => {
-  const { label, filters: groupFilters } = group
-  return (
-    <Flex px={1} flexFlow="column" w="100%">
-      <Text px={1} opacity={0.8} fontSize="sm" fontWeight={600}>
-        {label}
-      </Text>
-      <Flex w="100%" flexFlow="row wrap">
-        {groupFilters.map(filter => (
-          <FilterButton
-            toggleFilter={toggleFilter}
-            GroupRender={group.RenderFilter}
-            filters={filters}
-            key={filter.label}
-            filter={filter}
-          />
-        ))}
-      </Flex>
-    </Flex>
-  )
-}
-
-export const PresetFilters = () => {
-  const { query, list, toggleFilter } = useDataList()
-  const isMobile = useScreen(s => s.isMobile)
-  const { filters: currentFilters = [] } = query || {}
-  const { filterPresets } = list
-  const borderColor = useBorderColor()
-  return filterPresets?.length ? (
-    <HStack spacing={1}>
-      <Popover
-        // closeOnBlur={false}
-        placement="right-start"
-        trigger={isMobile ? 'click' : 'hover'}
-        // trigger=
-        strategy="fixed">
-        <PopoverTrigger>
-          <IconButton
-            size="sm"
-            variant="ghost"
-            aria-label="Filters"
-            icon={
-              <Image
-                width="24px"
-                filter={`grayscale(${currentFilters.length ? 0 : 100}%)`}
-                src="/icons/tune.svg"
-              />
-            }
-          />
-        </PopoverTrigger>
-        <Portal>
-          <PopoverContent borderRadius={6} w="auto">
-            <PopoverBody w="240px" p={0}>
-              <Flex flexFlow="column" w="100%">
-                <HStack
-                  py={1.5}
-                  px={2}
-                  w="100%"
-                  spacing={1}
-                  borderBottom={`1px solid ${borderColor}`}>
-                  <Image width="18px" filter="grayscale(100%)" src="/icons/tune.svg" />
-                  <Text opacity={0.8} fontSize="sm" fontWeight={600}>
-                    FILTERS
-                  </Text>
-                </HStack>
-                <Flex justify="center" w="100%" flexFlow="row wrap" py={1} px={2}>
-                  {filterPresets.map(filter =>
-                    isFilterGroup(filter) ? (
-                      <FilterGroup
-                        toggleFilter={toggleFilter}
-                        filters={currentFilters}
-                        key={filter.label}
-                        group={filter}
-                      />
-                    ) : (
-                      <FilterButton
-                        toggleFilter={toggleFilter}
-                        filters={currentFilters}
-                        key={filter.label}
-                        filter={filter}
-                      />
-                    ),
-                  )}
-                </Flex>
-              </Flex>
-            </PopoverBody>
-            <PopoverArrow />
-            <PopoverCloseButton />
-          </PopoverContent>
-        </Portal>
-      </Popover>
-    </HStack>
-  ) : null
-}