@chem-po/react-web 0.0.4 → 0.0.6

package/src/components/list/ListFooter.tsx

@@ -0,0 +1,458 @@
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
+import {
+  Box,
+  Button,
+  Collapse,
+  Flex,
+  IconButton,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Progress,
+  Text,
+  Tooltip,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import { toPlural } from '@chem-po/core'
+import { useDataList, usePaginatedList } from '@chem-po/react'
+import useResizeObserver from '@react-hook/resize-observer'
+import { useCallback, useMemo, useRef } from 'react'
+import { useBorderColor } from '../../hooks'
+import { ExpandOnMount } from '../box'
+import { DataListFooterProps } from './types'
+
+const NextButton = ({
+  goNext,
+  canGoNext,
+  mobileLayout,
+}: {
+  goNext?: () => void
+  canGoNext: boolean
+  mobileLayout?: boolean
+}) => (
+  <Button
+    opacity={canGoNext ? 1 : 0.6}
+    pointerEvents={canGoNext ? 'auto' : 'none'}
+    borderRadius="full"
+    onClick={goNext}
+    aria-label="next"
+    variant="ghost"
+    size={mobileLayout ? 'xs' : 'sm'}
+    pl={3}
+    pr={1}
+    gap={1}>
+    <Text>Next</Text>
+    <ChevronRightIcon w={5} h={5} />
+  </Button>
+)
+
+const PrevButton = ({
+  goPrev,
+  canGoPrev,
+  mobileLayout,
+}: {
+  goPrev?: () => void
+  canGoPrev: boolean
+  mobileLayout?: boolean
+}) => (
+  <Button
+    opacity={canGoPrev ? 1 : 0.5}
+    pointerEvents={canGoPrev ? 'auto' : 'none'}
+    onClick={goPrev}
+    borderRadius="full"
+    aria-label="back"
+    variant="ghost"
+    pr={3}
+    pl={1}
+    gap={1}
+    size={mobileLayout ? 'xs' : 'sm'}>
+    <ChevronLeftIcon w={5} h={5} />
+    <Text>Back</Text>
+  </Button>
+)
+
+const FooterLoadingAndError = ({
+  progressBg,
+  borderColor,
+}: {
+  progressBg: string
+  borderColor: string
+}) => {
+  const {
+    data: { isLoading, error },
+  } = usePaginatedList()
+  return (
+    <Box position="absolute" bottom="100%" w="100%" left={0}>
+      <Collapse style={{ width: '100%' }} in={!!error} animateOpacity>
+        <Box borderTopRadius={6} bg="red.600" maxW="100%" p={1}>
+          <Tooltip placement="top" hasArrow label={error?.message ?? ''} aria-label="error">
+            <Text
+              textShadow="1px 1px 3px #00000077"
+              _dark={{ textShadow: 'none' }}
+              px={1}
+              fontWeight={600}
+              isTruncated
+              maxW="100%"
+              fontSize="sm"
+              color="white">
+              {error?.message}
+            </Text>
+          </Tooltip>
+        </Box>
+      </Collapse>
+      <ExpandOnMount in={isLoading} animateOpacity>
+        <Flex
+          bg={progressBg}
+          borderTop="1px solid"
+          borderBottom="1px solid"
+          borderColor={borderColor}
+          w="100%">
+          <Progress borderRadius={0} w="100%" height="8px" isIndeterminate={isLoading} />
+        </Flex>
+      </ExpandOnMount>
+    </Box>
+  )
+}
+
+interface PageIndicator {
+  index: number
+  isActive: boolean
+}
+interface PageIndicatorGroup {
+  indicators: PageIndicator[]
+  collapsed: boolean
+}
+
+/* 
+page nav groups: 
+0 - first group - pages 1:3 if not in current group
+1 - second group (collapsed) - pages 4:i-1 if not in current group, where i is the selected page
+2 - current group - pages i:i+2
+3 - fourth group (collapsed) - pages i+3:n-3 if not in current group, where n is the last page
+4 - last group - pages n-2:n
+*/
+const getGroupIndex = (index: number, selected: number, numPages: number) => {
+  if (Math.abs(index - selected) <= 1) return 2
+  if (index < 3) return selected === 0 ? 2 : 0
+  if (index > numPages - 4) return selected > numPages - 3 ? 2 : 4
+  return index < selected ? 1 : 3
+}
+
+const NAV_BUTTON_SIZE = 28
+const MOBILE_NAV_BUTTON_SIZE = 24
+
+const PageNavButton = ({
+  index,
+  isActive,
+  onClick,
+  borderColor,
+  isLoading,
+  mobileLayout,
+}: {
+  index: number
+  isActive: boolean
+  onClick: () => void
+  borderColor: string
+  isLoading: boolean
+  mobileLayout: boolean
+}) => {
+  return (
+    <Button
+      key={index}
+      onClick={onClick}
+      variant="unstyled"
+      display="flex"
+      border="1px solid"
+      borderColor={isActive ? 'transparent' : borderColor}
+      justifyContent="center"
+      alignItems="center"
+      width={`${mobileLayout ? MOBILE_NAV_BUTTON_SIZE : NAV_BUTTON_SIZE}px`}
+      height={`${mobileLayout ? MOBILE_NAV_BUTTON_SIZE : NAV_BUTTON_SIZE}px`}
+      fontFamily="fonts.heading"
+      lineHeight={1}
+      fontWeight={600}
+      minW="0"
+      bg={isActive ? 'accent.400' : 'transparent'}
+      _hover={{
+        bg: isActive ? 'accent.500' : 'whiteAlpha.500',
+      }}
+      color={isActive ? 'white' : borderColor}
+      textShadow={isActive ? '1px 1px 3px #00000088' : 'none'}
+      size="sm"
+      disabled={isLoading}
+      aria-label={`Go to page ${index + 1}`}>
+      {index + 1}
+    </Button>
+  )
+}
+
+const PageNavGroup = ({
+  group: { indicators, collapsed },
+  mobileLayout,
+}: {
+  group: PageIndicatorGroup
+  mobileLayout: boolean
+}) => {
+  const {
+    data: { isLoading },
+    goToPage,
+  } = usePaginatedList()
+  const borderColor = useBorderColor()
+
+  if (collapsed) {
+    return (
+      <Popover trigger="hover" gutter={1} variant="fixed">
+        {({ onClose }) => (
+          <>
+            <PopoverTrigger>
+              <IconButton
+                variant="unstyled"
+                width={`${mobileLayout ? MOBILE_NAV_BUTTON_SIZE : NAV_BUTTON_SIZE}px`}
+                height={`${mobileLayout ? MOBILE_NAV_BUTTON_SIZE : NAV_BUTTON_SIZE}px`}
+                minW="0"
+                opacity={0.7}
+                _hover={{
+                  opacity: 1,
+                }}
+                aria-label="more pages"
+                icon={
+                  <Text fontSize="md" position="relative" bottom="2px">
+                    ...
+                  </Text>
+                }
+              />
+            </PopoverTrigger>
+            <PopoverContent
+              bg="background.200"
+              w="auto"
+              border="1px solid"
+              borderColor={borderColor}
+              boxShadow="none">
+              <PopoverBody w="auto" maxW="166px" p={0.5}>
+                <Flex align="center" justify="center" flexFlow="row wrap">
+                  {indicators.map(({ index, isActive }) => (
+                    <Box key={`ind-${index}`} m={0.5}>
+                      <PageNavButton
+                        mobileLayout={mobileLayout}
+                        index={index}
+                        isActive={isActive}
+                        onClick={() => {
+                          goToPage(index)
+                          onClose()
+                        }}
+                        borderColor={borderColor}
+                        isLoading={isLoading}
+                      />
+                    </Box>
+                  ))}
+                </Flex>
+              </PopoverBody>
+            </PopoverContent>
+          </>
+        )}
+      </Popover>
+    )
+  }
+  return (
+    <>
+      {indicators.map(({ index, isActive }) => (
+        <PageNavButton
+          mobileLayout={mobileLayout}
+          key={index}
+          index={index}
+          isActive={isActive}
+          onClick={() => goToPage(index)}
+          borderColor={borderColor}
+          isLoading={isLoading}
+        />
+      ))}
+    </>
+  )
+}
+
+const PageNav = () => {
+  const { pageIndex, numPages } = usePaginatedList()
+  const { mobileLayout } = useDataList()
+  const groups = useMemo<PageIndicatorGroup[]>(() => {
+    const nPages = numPages ?? 0
+    if (nPages <= 9)
+      return [
+        {
+          indicators: Array.from({ length: nPages }, (_, i) => ({
+            index: i,
+            isActive: i === pageIndex,
+          })),
+          collapsed: false,
+        },
+      ]
+    const g: PageIndicatorGroup[] = Array.from({ length: 5 }, (_, i) => ({
+      indicators: [],
+      collapsed: i % 2 === 1,
+    }))
+
+    for (let i = 0; i < nPages; i += 1) {
+      const groupIndex = getGroupIndex(i, pageIndex, nPages)
+      if (!g[groupIndex]) {
+        g[groupIndex] = { indicators: [], collapsed: groupIndex !== 2 }
+      }
+      g[groupIndex].indicators.push({ index: i, isActive: i === pageIndex })
+    }
+    return g
+      .filter(group => group.indicators.length)
+      .map(g => ({ ...g, collapsed: g.collapsed && g.indicators.length > 1 }))
+  }, [numPages, pageIndex])
+  return (
+    <Flex gap={1} align="center">
+      {groups.map((group, i) => (
+        <PageNavGroup mobileLayout={mobileLayout} key={`group-${i}`} group={group} />
+      ))}
+    </Flex>
+  )
+}
+
+const FOOTER_TEXT_WIDTH = 120
+export const ListFooter = ({ onResize, flexProps, noFooter }: DataListFooterProps) => {
+  const borderColor = useColorModeValue('#cdcdcd', '#2d3748')
+
+  const {
+    list,
+    mobileLayout,
+    infiniteScroll,
+    search: { search, debounced },
+  } = useDataList()
+  const {
+    data: { data, isLoading },
+    totalCount,
+    pageIndex,
+    limit,
+    numFetched,
+    goNext,
+    goPrev,
+    hasMoreData,
+  } = usePaginatedList()
+  const { itemName, pluralItemName, searchRequired } = list
+
+  const { itemsText, pageText } = useMemo(() => {
+    if (isLoading && !infiniteScroll)
+      return { itemsText: mobileLayout ? 'Loading...' : '', pageText: '' }
+    if (totalCount === null) return { itemsText: 'Loading...', pageText: '' }
+    if (totalCount === 0 && !isLoading && search === debounced) {
+      return {
+        itemsText:
+          !search && searchRequired
+            ? `Search ${pluralItemName ?? toPlural(itemName)}`
+            : `No ${pluralItemName ?? toPlural(itemName)} found`,
+        pageText: '',
+      }
+    }
+    const firstItemIndex = infiniteScroll ? 1 : (pageIndex || 0) * limit + 1
+    // return `Displaying ${pluralItemName || toPlural(itemName)} ${firstItemIndex} - ${
+    //   infiniteScroll ? numFetched : pageIndex * limit + data.length
+    // } of ${totalCount}`
+    return {
+      itemsText: `${firstItemIndex} - ${
+        infiniteScroll ? numFetched : pageIndex * limit + data.length
+      } of ${totalCount}`,
+      pageText: `Page ${pageIndex + 1} of ${limit ? Math.ceil((totalCount ?? 0) / limit) : 0}`,
+    }
+  }, [
+    totalCount,
+    isLoading,
+    itemName,
+    pluralItemName,
+    limit,
+    pageIndex,
+    search,
+    searchRequired,
+    mobileLayout,
+    debounced,
+    data,
+    infiniteScroll,
+    numFetched,
+  ])
+  const hasPrev = useMemo(() => !infiniteScroll && goPrev, [infiniteScroll, goPrev])
+  const hasNext = useMemo(() => !infiniteScroll && goNext, [infiniteScroll, goNext])
+  const progressBg = useColorModeValue('#efefef', '#212121')
+
+  const ref = useRef<HTMLDivElement>(null)
+  const handleResize = useCallback(
+    (e: ResizeObserverEntry) => {
+      const height = e.borderBoxSize[0].blockSize
+      const width = e.borderBoxSize[0].inlineSize
+      onResize({ height, width })
+    },
+    [onResize],
+  )
+  useResizeObserver(ref, handleResize)
+
+  return (
+    <Flex
+      ref={ref}
+      py={noFooter ? 0 : 2}
+      px={noFooter ? 0 : 3}
+      borderTop={`1px solid ${borderColor}`}
+      position="relative"
+      flexFlow={mobileLayout ? 'column' : 'row'}
+      gap={mobileLayout ? 1 : 0}
+      w="100%"
+      {...flexProps}>
+      {noFooter || (mobileLayout && infiniteScroll) ? null : (
+        <Flex
+          align="center"
+          justify={mobileLayout ? 'center' : 'space-between'}
+          position="relative"
+          w="100%">
+          {hasPrev && !mobileLayout ? (
+            <PrevButton goPrev={goPrev} canGoPrev={!isLoading && !!pageIndex} />
+          ) : null}
+          <Flex gap={1} align="center">
+            {infiniteScroll ? null : (
+              <>
+                {!mobileLayout ? (
+                  <Text
+                    fontFamily="fonts.heading"
+                    whiteSpace="nowrap"
+                    textAlign="center"
+                    w={`${FOOTER_TEXT_WIDTH}px`}
+                    fontSize="sm">
+                    {pageText}
+                  </Text>
+                ) : null}
+                <PageNav />
+              </>
+            )}
+            {!mobileLayout ? (
+              <Text
+                fontFamily="fonts.heading"
+                textAlign="center"
+                w={mobileLayout || infiniteScroll ? 'auto' : `${FOOTER_TEXT_WIDTH}px`}
+                whiteSpace="nowrap"
+                fontSize="sm">
+                {itemsText}
+              </Text>
+            ) : null}
+          </Flex>
+          {hasNext && !mobileLayout ? (
+            <NextButton goNext={goNext} canGoNext={!isLoading && hasMoreData} />
+          ) : null}
+        </Flex>
+      )}
+      {mobileLayout && !noFooter ? (
+        <Flex gap={2} w="100%" justify="space-between" align="center">
+          {hasPrev ? <PrevButton mobileLayout goPrev={goPrev} canGoPrev={!!pageIndex} /> : null}
+          <Text
+            fontFamily="fonts.heading"
+            textAlign="center"
+            w={mobileLayout || infiniteScroll ? 'auto' : `${FOOTER_TEXT_WIDTH}px`}
+            whiteSpace="nowrap"
+            fontSize="sm">
+            {itemsText}
+          </Text>
+          {hasNext ? <NextButton mobileLayout goNext={goNext} canGoNext={hasMoreData} /> : null}
+        </Flex>
+      ) : null}
+      <FooterLoadingAndError progressBg={progressBg} borderColor={borderColor} />
+    </Flex>
+  )
+}

package/src/components/list/ListHeader.tsx

@@ -0,0 +1,180 @@
+import { AddIcon, RepeatIcon, SearchIcon } from '@chakra-ui/icons'
+import {
+  Box,
+  Flex,
+  IconButton,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Tooltip,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import { getHasAccess, toPlural } from '@chem-po/core'
+import { useAuth, useDataList } from '@chem-po/react'
+import useResizeObserver from '@react-hook/resize-observer'
+import { useCallback, useMemo, useRef } from 'react'
+import { useBorderColor } from '../../hooks/ui/useBorderColor'
+import { Toggle, ToggleOption } from '../button/Toggle'
+import { PresetFilters } from './ListFilters'
+import { ListSortView } from './ListSort'
+import { DataListHeaderProps } from './types'
+
+const ListSearch = () => {
+  const {
+    list,
+    search: { search, update },
+  } = useDataList()
+  const { searchIcon, itemName, pluralItemName } = list
+  const iconFilter = useColorModeValue('invert(0)', 'invert(1)')
+
+  return (
+    <Flex p={1} flex={1} minW="0">
+      <InputGroup>
+        <InputLeftElement pointerEvents="none">
+          {searchIcon ? (
+            <Image filter={iconFilter} src={searchIcon} w="24px" />
+          ) : (
+            <SearchIcon w="24px" opacity={0.5} />
+          )}
+        </InputLeftElement>
+        <Input
+          bg="whiteAlpha.700"
+          pl={9}
+          borderRadius={6}
+          _focus={{ boxShadow: 'none', outline: 'none' }}
+          border="none"
+          _dark={{
+            bg: 'blackAlpha.400',
+            color: '#cdcdcd',
+            _placeholder: {
+              color: '#ababab',
+            },
+            border: 'none',
+          }}
+          value={search}
+          placeholder={`Search for ${pluralItemName ?? toPlural(itemName)}`}
+          onChange={e => update(e.target.value)}
+        />
+      </InputGroup>
+    </Flex>
+  )
+}
+
+const HeaderButtons = ({ refetch }: { refetch?: () => void }) => {
+  const { list, setNewItemOpen } = useDataList()
+  const auth = useAuth()
+  const { itemName, field, access } = list
+
+  const canCreate = useMemo(() => getHasAccess(auth, access?.create, null), [access, auth])
+  return (
+    <Flex gap={2} ml="auto" align="center">
+      {refetch ? (
+        <Tooltip placement="left" hasArrow label="Refresh" aria-label="Refresh">
+          <IconButton size="xs" icon={<RepeatIcon />} aria-label="Refresh" onClick={refetch} />
+        </Tooltip>
+      ) : null}
+      {field && canCreate ? (
+        <Tooltip
+          placement="left"
+          hasArrow
+          label={`Create new ${itemName}`}
+          aria-label={`Create new ${itemName}`}>
+          <IconButton
+            size="xs"
+            icon={<AddIcon />}
+            aria-label={`Create new ${itemName}`}
+            onClick={() => setNewItemOpen(true)}
+          />
+        </Tooltip>
+      ) : null}
+    </Flex>
+  )
+}
+
+const gridToggleOptions: ToggleOption<'grid' | 'list'>[] = [
+  {
+    id: 'grid',
+    label: 'Grid View',
+    Render: selected => <Image w={5} opacity={selected ? 1 : 0.7} src="/icons/grid_view.svg" />,
+  },
+  {
+    id: 'list',
+    label: 'List View',
+    Render: selected => <Image w={6} opacity={selected ? 1 : 0.7} src="/icons/list.svg" />,
+  },
+]
+
+const GridViewToggle = () => {
+  const { toggleGridLayout, gridLayout } = useDataList()
+  if (!toggleGridLayout) return null
+  return (
+    <Toggle
+      onChange={toggleGridLayout}
+      options={gridToggleOptions}
+      value={gridLayout ? 'grid' : 'list'}
+    />
+  )
+}
+
+export const DataListHeader = ({ onResize, refetch, boxProps }: DataListHeaderProps) => {
+  const { list, mobileLayout, toggleGridLayout } = useDataList()
+  const { searchPath, sortPresets, filterPresets, Header } = list
+
+  const borderColor = useBorderColor()
+  const ref = useRef<HTMLDivElement>(null)
+  const handleResize = useCallback(
+    (entry: ResizeObserverEntry) => {
+      onResize({ height: entry.contentRect.height, width: entry.contentRect.width })
+    },
+    [onResize],
+  )
+  const hasSearch = useMemo(() => !!Object.keys(searchPath ?? {}).length, [searchPath])
+
+  useResizeObserver(ref, handleResize)
+
+  return (
+    <Box
+      ref={ref}
+      bg="background.200"
+      borderBottom={`1px solid ${borderColor}`}
+      w="100%"
+      {...boxProps}>
+      <Flex px={2} align="center" w="100%">
+        {sortPresets?.length || filterPresets?.length || hasSearch ? (
+          <Flex w="100%" flexFlow={mobileLayout ? 'column' : 'row'}>
+            {mobileLayout && !Header ? null : (
+              <Flex flex={1} px={2} py={mobileLayout ? 0 : 1} gap={1} align="center">
+                {mobileLayout ? null : (
+                  <Flex flex={1} minW="0" align="center" gap={2}>
+                    {toggleGridLayout ? <GridViewToggle /> : null}
+                    <PresetFilters />
+                    <ListSortView />
+                    {hasSearch ? <ListSearch /> : null}
+                  </Flex>
+                )}
+                <Flex align="center" minW="0" gap={3} ml="auto">
+                  {Header ? (
+                    <Box minW="0" flex={1}>
+                      <Header />
+                    </Box>
+                  ) : null}
+                  {mobileLayout ? null : <HeaderButtons refetch={refetch} />}
+                </Flex>
+              </Flex>
+            )}
+            {hasSearch && mobileLayout ? <ListSearch /> : null}
+            {mobileLayout && (sortPresets?.length || filterPresets?.length) ? (
+              <Flex pl={1} py={1} gap={1.5} align="center" w="100%">
+                {toggleGridLayout ? <GridViewToggle /> : null}
+                <PresetFilters />
+                <ListSortView />
+                <HeaderButtons refetch={refetch} />
+              </Flex>
+            ) : null}
+          </Flex>
+        ) : null}
+      </Flex>
+    </Box>
+  )
+}

package/src/components/list/ListItem/ListCell.tsx

@@ -0,0 +1,48 @@
+import { Flex } from '@chakra-ui/react'
+import { AnyObject, ColorMode, DBItem } from '@chem-po/core'
+import { DataList, ListGridOptions } from '@chem-po/react'
+import { GridChildComponentProps } from 'react-window'
+
+export interface GridItemProps<T extends AnyObject> {
+  list: DataList<T>
+  grid: ListGridOptions<T>
+  items: Array<DBItem<T>>
+  colorMode: ColorMode
+  numCols: number
+  mobileLayout: boolean
+  onSelect: (item: DBItem<T>) => void
+  refetch?: (id: string) => Promise<void>
+}
+export const ListCell = <T extends AnyObject>({
+  data,
+  rowIndex,
+  columnIndex,
+  style,
+}: GridChildComponentProps<GridItemProps<T>>) => {
+  const { items, onSelect, refetch, grid, numCols, colorMode } = data || {}
+  const { ItemPreview: Render } = grid
+
+  const itemIdx = rowIndex * numCols + columnIndex
+  const item = items[itemIdx]
+  if (!item) return null
+  return (
+    <Flex
+      display="flex"
+      cursor="pointer"
+      aria-label="list-item"
+      onClick={() => {
+        onSelect(item)
+      }}
+      style={style}
+      px={1}
+      py={0.25}
+      key={itemIdx}>
+      {Render({
+        index: itemIdx,
+        item,
+        refetch: refetch ? () => refetch(item._id) : undefined,
+        colorMode,
+      })}
+    </Flex>
+  )
+}