@chem-po/react-web 0.0.4 → 0.0.6

package/src/components/button/DeleteButton.tsx

@@ -0,0 +1,178 @@
+import { DeleteIcon } from '@chakra-ui/icons'
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogOverlay,
+  Button,
+  Flex,
+  HStack,
+  IconButton,
+  IconButtonProps,
+  Text,
+  useToast,
+  VStack,
+} from '@chakra-ui/react'
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+
+const defaultAlertBodyText = "Are you sure? You can't undo this action afterwards."
+export const DeleteConfirmAlert = ({
+  confirmActive,
+  onCancel,
+  onConfirm,
+  body = defaultAlertBodyText,
+  actionName = 'Delete',
+  actionLoading,
+  itemName,
+}: {
+  confirmActive: boolean
+  onCancel: () => void
+  onConfirm: () => void
+  body?: string | ReactNode
+  actionLoading?: boolean
+  actionName?: string
+  itemName: string
+}) => {
+  const cancelRef = useRef<HTMLButtonElement>(null)
+  return (
+    <AlertDialog
+      isCentered
+      isOpen={confirmActive}
+      leastDestructiveRef={cancelRef}
+      onClose={() => onCancel()}>
+      <AlertDialogOverlay>
+        <AlertDialogContent gap={0}>
+          <AlertDialogBody>
+            <VStack align="flex-start" py={1}>
+              <Text fontSize="lg" fontWeight={500}>
+                {actionName} {itemName}?
+              </Text>
+              {typeof body === 'string' ? <Text fontSize="md">{body}</Text> : body}
+              <HStack justify="flex-end" w="100%">
+                <Button size="sm" ref={cancelRef} onClick={onCancel}>
+                  Cancel
+                </Button>
+                <Button
+                  size="sm"
+                  isLoading={actionLoading}
+                  color="white"
+                  textShadow="1px 1px 3px #00000077"
+                  bg="red.500"
+                  _dark={{
+                    bg: 'red.500',
+                  }}
+                  onClick={onConfirm}>
+                  {actionName}
+                </Button>
+              </HStack>
+            </VStack>
+          </AlertDialogBody>
+        </AlertDialogContent>
+      </AlertDialogOverlay>
+    </AlertDialog>
+  )
+}
+
+export const DeleteButton: React.FC<
+  Partial<IconButtonProps> & {
+    onDelete: (() => Promise<any>) | (() => void)
+    itemName: string
+    actionName?: string
+    noConfirm?: boolean
+    text?: string
+    alertBody?: string | ReactNode
+  }
+> = ({ onDelete, itemName, noConfirm, alertBody, text, actionName = 'Delete', ...props }) => {
+  const [deleteLoading, setDeleteLoading] = useState(false)
+  const [confirmActive, setConfirmActive] = useState(false)
+  const confirmTimer = useRef<any>()
+  const isMounted = useRef(true)
+  useEffect(() => {
+    isMounted.current = true
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  const toast = useToast()
+  const handleDelete = useCallback(async () => {
+    if (confirmTimer.current) clearTimeout(confirmTimer.current)
+    setConfirmActive(false)
+    if (onDelete) {
+      setDeleteLoading(true)
+      try {
+        await onDelete()
+      } catch (err: any) {
+        console.error(err)
+        toast({
+          title: 'Error',
+          description: err.message ?? 'An error occurred',
+          status: 'error',
+          duration: 5000,
+          isClosable: true,
+        })
+      }
+      if (isMounted.current) {
+        setDeleteLoading(false)
+      }
+    } else {
+      console.error('No delete function')
+    }
+  }, [onDelete, toast])
+
+  return (
+    <>
+      {text ? (
+        <Button
+          variant="ghost"
+          size={props.size ?? 'md'}
+          aria-label="delete"
+          _hover={{ color: 'red.600', bg: 'red.200' }}
+          color="red.600"
+          onClick={e => {
+            e.stopPropagation()
+            if (noConfirm) handleDelete()
+            else setConfirmActive(true)
+          }}
+          isLoading={deleteLoading}
+          {...props}>
+          <Flex align="center" gap={1}>
+            <DeleteIcon />
+            <Text>{text}</Text>
+          </Flex>
+        </Button>
+      ) : (
+        <IconButton
+          variant="ghost"
+          size={props.size ?? 'sm'}
+          aria-label={actionName}
+          _hover={{ color: 'red.600', bg: 'red.200' }}
+          color="red.500"
+          borderRadius="full"
+          icon={<DeleteIcon />}
+          onClick={e => {
+            e.stopPropagation()
+            if (noConfirm) handleDelete()
+            else setConfirmActive(true)
+          }}
+          isLoading={deleteLoading}
+          {...props}
+        />
+      )}
+      {noConfirm ? null : (
+        <DeleteConfirmAlert
+          confirmActive={confirmActive}
+          onCancel={() => setConfirmActive(false)}
+          actionLoading={deleteLoading}
+          onConfirm={() => {
+            handleDelete()
+          }}
+          actionName={actionName}
+          body={alertBody}
+          itemName={itemName}
+        />
+      )}
+    </>
+  )
+}

package/src/components/button/Toggle.tsx

@@ -0,0 +1,88 @@
+import { Box, Flex, IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react'
+import { JSX } from 'react'
+import { useBorderColor } from '../../hooks'
+
+export interface ToggleOption<Option extends string = string> {
+  id: Option
+  label: string
+  disabledMessage?: string
+  Render: (selected: boolean) => JSX.Element
+}
+export interface ToggleProps<Option extends string> {
+  options: ToggleOption<Option>[]
+  value: Option
+  size?: number
+  onChange: (value: Option) => Promise<void> | void
+}
+
+const ToggleButton = <Option extends string>({
+  selected,
+  option: { Render, label, disabledMessage },
+  size,
+  ...props
+}: Omit<IconButtonProps, 'children' | 'aria-label' | 'size'> & {
+  option: ToggleOption<Option>
+  size: number
+  selected: boolean
+}) => {
+  const body = (
+    <Box>
+      <IconButton
+        variant="unstyled"
+        w={`${size}px`}
+        h={`${size}px`}
+        minW={0}
+        borderRadius={0}
+        outline="none"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        opacity={!disabledMessage ? 1 : 0.6}
+        filter={!disabledMessage ? 'none' : 'grayscale(1)'}
+        bg={selected ? 'whiteAlpha.500' : 'blackAlpha.100'}
+        _dark={{ bg: selected ? 'blackAlpha.500' : 'whiteAlpha.200' }}
+        icon={Render(selected)}
+        pointerEvents={selected ? 'none' : 'auto'}
+        aria-label={label}
+        {...props}
+      />
+    </Box>
+  )
+
+  return (
+    <Tooltip label={disabledMessage ?? label} aria-label={label}>
+      {body}
+    </Tooltip>
+  )
+}
+
+export const Toggle = <Option extends string>({
+  value,
+  onChange,
+  size = 28,
+  options,
+}: ToggleProps<Option>) => {
+  const borderColor = useBorderColor()
+  return (
+    <Flex
+      bg="whiteAlpha.300"
+      _dark={{ bg: 'blackAlpha.300' }}
+      border={`1px solid ${borderColor}`}
+      borderRadius={3}>
+      {options.map((option, i) => (
+        <ToggleButton<Option>
+          key={option.id}
+          onClick={() => {
+            onChange(option.id)
+          }}
+          option={option}
+          size={size}
+          borderLeftRadius={i ? 0 : 3}
+          borderRightRadius={i === options.length - 1 ? 3 : 0}
+          selected={option.id === value}
+          borderLeft={i ? `1px solid ${borderColor}` : 'none'}
+        />
+      ))}
+    </Flex>
+  )
+}

package/src/components/button/ViewButton.tsx

@@ -0,0 +1,30 @@
+import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'
+import { IconButton } from '@chakra-ui/react'
+import { FC, MouseEvent } from 'react'
+
+export const ViewButton: FC<{
+  onClick: (e: MouseEvent) => void
+  isOpen: boolean
+  viewText?: string
+  hideText?: string
+  color?: string
+}> = ({ viewText = 'View', hideText = 'Hide', onClick, isOpen, color }) => (
+  <IconButton
+    icon={
+      isOpen ? <ChevronUpIcon width={5} height={5} /> : <ChevronDownIcon width={5} height={5} />
+    }
+    aria-label={isOpen ? hideText : viewText}
+    variant="ghost"
+    p="2px"
+    ml="auto"
+    size="xs"
+    fontSize="xs"
+    borderRadius="full"
+    _hover={{ bg: 'blackAlpha.200' }}
+    color={color ?? '#777'}
+    onClick={e => {
+      e.stopPropagation()
+      onClick(e)
+    }}
+  />
+)

package/src/components/button/index.ts

@@ -0,0 +1,3 @@
+export * from './DeleteButton'
+export * from './Toggle'
+export * from './ViewButton'

package/src/components/feed/FeedContentPane.tsx

@@ -0,0 +1,111 @@
+import { AnyObject, WithId } from '@chem-po/core'
+import { MobileFrameContextData, useDocument, useMobileFrame } from '@chem-po/react'
+import { motion, MotionValue, useMotionValue, useSpring, useTransform } from 'framer-motion'
+import { JSX, useEffect, useMemo, useRef } from 'react'
+import { springConfig } from './constants'
+import { PanelStatus } from './types'
+
+const getContentScale = (status: PanelStatus) => {
+  // if (status === 'current') return 1
+  if (status === 'current') return 1
+  return 0
+}
+const getContentX = (status: PanelStatus, contentSize: { width: number; height: number }) => {
+  const { width: cWidth } = contentSize
+  if (status === 'current') return 0
+  if (status === 'next') return cWidth
+  if (status === 'prev') return -cWidth
+  return 0
+}
+
+const getContentY = (status: PanelStatus, contentSize: { width: number; height: number }) => {
+  const { height: cHeight } = contentSize
+  if (status === 'current') return 0
+  if (status === 'next') return cHeight * 1.1
+  if (status === 'prev') return -cHeight * 1.1
+  return 0
+}
+
+interface FeedContentPaneProps<T extends AnyObject = AnyObject> {
+  id: string
+  collectionPath: string
+  RenderItem: (i: WithId<T>) => JSX.Element
+  onItemLoad: (data: WithId<T> | null) => void
+  status: PanelStatus
+  enterStatus?: PanelStatus | null
+  offsetY: MotionValue<number>
+}
+
+export const FeedContentPane = <T extends AnyObject = AnyObject>({
+  id,
+  collectionPath,
+  onItemLoad,
+  RenderItem,
+  status,
+  offsetY,
+  enterStatus,
+}: FeedContentPaneProps<T>) => {
+  const contentSize = useMobileFrame()
+  const scale = useSpring(0, springConfig)
+  const baseY = useMotionValue(getContentY(enterStatus ?? 'next', contentSize))
+  const yVal = useTransform(() => baseY.get() + offsetY.get())
+  const y = useSpring(yVal, springConfig)
+
+  const docPath = useMemo(() => `${collectionPath}/${id}`, [collectionPath, id])
+  const { data: item } = useDocument<T>(docPath, onItemLoad)
+
+  const init = useRef<{
+    status: PanelStatus
+    contentSize: MobileFrameContextData
+    y: number
+    scale: number
+  }>({
+    contentSize,
+    status: enterStatus ?? status,
+    // x: getContentX(fromStatus || status, contentSize),
+    y: getContentY(enterStatus ?? status, contentSize),
+    scale: getContentScale(enterStatus ?? status),
+  })
+
+  useEffect(() => {
+    const newScale = getContentScale(status)
+    const updatedX = getContentX(status, contentSize)
+    baseY.set(updatedX)
+    scale.set(newScale)
+  }, [status, baseY, scale, contentSize])
+
+  return (
+    // <AnimatePresence>
+    <motion.div
+      initial={{
+        x: 0,
+        y: init.current.y,
+        scale: init.current.scale,
+      }}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        touchAction: 'none',
+        userSelect: 'none',
+        height: '100%',
+        y,
+        scale,
+        opacity: scale,
+        width: '100%',
+      }}
+      exit={{
+        opacity: 0,
+        scale: 0,
+        // x: getContentX(fromStatus || status, contentSize),
+        x: 0,
+        y: getContentY(enterStatus === 'next' ? 'prev' : 'next', contentSize),
+      }}>
+      {item ? RenderItem(item) : null}
+    </motion.div>
+    // </AnimatePresence>
+  )
+}

package/src/components/feed/MediaFeed.tsx

@@ -0,0 +1,200 @@
+import { Center } from '@chakra-ui/react'
+import { AnyObject, WithId } from '@chem-po/core'
+import { useMobileFrame } from '@chem-po/react'
+import { useMotionValue } from 'framer-motion'
+import React, {
+  CSSProperties,
+  Dispatch,
+  PropsWithChildren,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { LoadingOverlay } from '../loading'
+import { REFRESH_THRESHOLD, SWIPE_THRESHOLD } from './constants'
+import { MediaFeedProvider } from './context'
+import { FeedContentPane } from './FeedContentPane'
+import { useMediaFeed } from './hooks'
+import { MediaFeedBackground } from './MediaFeedBackground'
+import { MediaFeedRefresh } from './MediaFeedRefresh'
+import { MediaBackgroundRef, MediaFeedProps, PanelData, UpdatePanelsArgs } from './types'
+
+const useUpdatePanels = (setItems: Dispatch<React.SetStateAction<Array<PanelData>>>) =>
+  useCallback(
+    (data: UpdatePanelsArgs) => {
+      const updated: PanelData[] = []
+      if (data.prev) updated.push({ status: 'prev', id: data.prev })
+      if (data.curr) {
+        updated.push({
+          status: 'current',
+          id: data.curr,
+        })
+      }
+      if (data.next) updated.push({ status: 'next', id: data.next })
+      setItems(updated)
+    },
+    [setItems],
+  )
+
+export const MediaFeed = <T extends AnyObject = AnyObject>({
+  fetch,
+  collection: collectionPath,
+  RenderItem,
+  authRequired,
+  getBackgroundUrl,
+  getBackgroundValue,
+  limit,
+  defaultBackground,
+  swipeDisabled,
+  children,
+}: PropsWithChildren<MediaFeedProps<T>>) => {
+  const { width, height } = useMobileFrame()
+
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  // const panels = useRef<Array<FeedContentPaneRef>>([])
+  const [direction, setDirection] = useState<'next' | 'prev' | null>(null)
+  const [panels, setPanels] = useState<Array<PanelData>>([])
+
+  const offsetY = useMotionValue(0)
+  const onNewData = useUpdatePanels(setPanels)
+
+  const backgroundRef = useRef<MediaBackgroundRef<T>>(null)
+
+  const { goNext, goPrev, loading, canGoNext, canGoPrev, refresh, refreshing } = useMediaFeed(
+    fetch,
+    onNewData,
+    limit,
+    authRequired,
+  )
+
+  const pointerDown = useRef(false)
+  const dragStart = useRef({ x: 0, y: 0 })
+
+  const onDragStart = useCallback(
+    (e: React.PointerEvent) => {
+      if (swipeDisabled) return
+      pointerDown.current = true
+      dragStart.current = { x: e.clientX, y: e.clientY }
+      const dragEndListener = (ev: PointerEvent) => {
+        // const oX = Math.max(-width / 4, Math.min(width / 4, ev.clientX - dragStart.current.x))
+        const maxY = canGoPrev ? SWIPE_THRESHOLD : REFRESH_THRESHOLD
+        const minY = canGoNext ? -SWIPE_THRESHOLD : -REFRESH_THRESHOLD
+        const oY = Math.max(minY, Math.min(maxY, ev.clientY - dragStart.current.y))
+        if (contentRef.current) contentRef.current.style.setProperty('pointer-events', 'auto')
+        if (canGoNext && oY < -(SWIPE_THRESHOLD - 10)) {
+          setDirection('next')
+          goNext()
+        } else if (canGoPrev && oY > SWIPE_THRESHOLD - 10) {
+          setDirection('prev')
+          goPrev()
+        } else if (oY > REFRESH_THRESHOLD - 10 || oY < -(REFRESH_THRESHOLD - 10)) {
+          refresh()
+          if (backgroundRef.current) backgroundRef.current.onNewData(null)
+        }
+        // else if (onSwipeUp && oY < -97) {
+        // onSwipeUp()
+        // }
+        offsetY.set(0)
+        pointerDown.current = false
+        window.removeEventListener('pointerup', dragEndListener)
+      }
+
+      window.addEventListener('pointerup', dragEndListener)
+    },
+    [offsetY, goNext, goPrev, canGoNext, canGoPrev, refresh, swipeDisabled],
+  )
+
+  const onDragMove = useCallback(
+    (e: React.PointerEvent) => {
+      requestAnimationFrame(() => {
+        if (pointerDown.current) {
+          const oX = Math.max(-10, Math.min(10, e.clientX - dragStart.current.x))
+          const maxY = canGoPrev ? SWIPE_THRESHOLD : REFRESH_THRESHOLD
+          const minY = canGoNext ? -SWIPE_THRESHOLD : -REFRESH_THRESHOLD
+          const oY = Math.max(minY, Math.min(maxY, e.clientY - dragStart.current.y))
+
+          const dist = Math.sqrt(oX ** 2 + oY ** 2)
+          if (dist > 10 && contentRef.current) {
+            contentRef.current.style.setProperty('pointer-events', 'none')
+          }
+          // offsetX.jump(oX)
+          offsetY.set(oY)
+        }
+      })
+    },
+    [offsetY, canGoNext, canGoPrev],
+  )
+
+  const containerStyle = useMemo<CSSProperties>(
+    () => ({
+      height: `${height}px`,
+      width: `${width}px`,
+      overflow: 'hidden',
+      pointerEvents: swipeDisabled ? 'none' : 'auto',
+    }),
+    [width, height, swipeDisabled],
+  )
+  const [curr, setCurr] = useState<WithId<T> | null>(null)
+
+  const handleItemLoad = useCallback(
+    (data: WithId<T> | null) => {
+      const isCurr = panels.find(p => p.status === 'current')?.id === data?._id
+      if (isCurr) setCurr(data)
+    },
+    [panels],
+  )
+
+  return (
+    <MediaFeedProvider curr={curr}>
+      <Center
+        background={defaultBackground ?? 'background.100'}
+        style={{ touchAction: 'none' }}
+        userSelect="none"
+        position="relative"
+        w="100%"
+        h="100%"
+        overflow="hidden"
+        onPointerDown={onDragStart}
+        onPointerMove={onDragMove}>
+        <MediaFeedBackground
+          item={curr}
+          getBackgroundValue={getBackgroundValue}
+          getBackgroundUrl={getBackgroundUrl}
+        />
+        <div ref={containerRef} style={containerStyle}>
+          <Center ref={contentRef} h="100%" w="100%">
+            {panels.map(panel => (
+              <FeedContentPane<T>
+                key={panel.id}
+                id={panel.id}
+                collectionPath={collectionPath}
+                RenderItem={RenderItem}
+                onItemLoad={handleItemLoad}
+                status={panel.status}
+                enterStatus={direction}
+                offsetY={offsetY}
+              />
+            ))}
+          </Center>
+        </div>
+        <MediaFeedRefresh canRefresh={!canGoPrev} refreshing={refreshing} offsetY={offsetY} />
+        {/* {onSwipeUp ? <MediaFeedSwipeUp offsetY={offsetY} /> : null} */}
+        <LoadingOverlay
+          inFeed
+          zIndex={2}
+          bg="transparent"
+          pointerEvents="none"
+          isLoading={loading}
+        />
+        {children ? (
+          <Center position="absolute" bottom="0" left="0" right="0" zIndex={3} pointerEvents="none">
+            {children}
+          </Center>
+        ) : null}
+      </Center>
+    </MediaFeedProvider>
+  )
+}