@chem-po/react-web 0.0.4 → 0.0.6

package/src/components/list/ListContent.tsx

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

@@ -0,0 +1,57 @@
+import { CloseIcon } from '@chakra-ui/icons'
+import { Flex, IconButton, Text } from '@chakra-ui/react'
+import { FieldMap, useBackendBase, useDataList, usePaginatedList } from '@chem-po/react'
+import { 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

@@ -0,0 +1,182 @@
+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 { 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
+}