@chem-po/react-web 0.0.5 → 0.0.7

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>
+  )
+}

package/src/components/feed/MediaFeedBackground.tsx

@@ -0,0 +1,127 @@
+import { Center, CenterProps } from '@chakra-ui/react'
+import { AnyObject, WithId } from '@chem-po/core'
+import { useObjectUrl } from '@chem-po/react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { LoadingLogo } from '../loading'
+import { GetBackgroundUrl, GetBackgroundValue } from './types'
+
+const emptyPng =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII='
+const FillBackground = ({
+  background,
+  ...props
+}: Omit<CenterProps, 'background'> & { background: string | null }) => (
+  <Center
+    position="absolute"
+    top="0"
+    left="0"
+    opacity={background ? 0.7 : 0}
+    transition="opacity 500ms"
+    right="0"
+    bottom="0"
+    zIndex={0}
+    transform="scale(1.075)"
+    pointerEvents="none"
+    backgroundImage={`url(${background ?? emptyPng})`}
+    backgroundSize="cover"
+    backgroundPosition="center"
+    {...props}
+    filter={props.filter ?? 'blur(15px) brightness(70%)'}
+  />
+)
+
+interface FileValueBackgroundProps<T extends AnyObject = AnyObject> {
+  getBackgroundValue: GetBackgroundValue<T>
+  item: WithId<T> | null
+  filter?: string
+}
+const FileValueBackground = <T extends AnyObject = AnyObject>({
+  getBackgroundValue,
+  item,
+  filter,
+}: FileValueBackgroundProps<T>) => {
+  const background = useMemo(
+    () => (item ? getBackgroundValue(item) : null),
+    [getBackgroundValue, item],
+  )
+  const { loading, url } = useObjectUrl(background)
+  const usedIndex = useRef(0)
+  const [index, setIndex] = useState(0)
+  const [url1, setUrl1] = useState<string | null>(null)
+  const [url2, setUrl2] = useState<string | null>(null)
+
+  useEffect(() => {
+    const usedIdx = usedIndex.current
+    if (usedIdx === 0) {
+      setUrl1(url)
+      usedIndex.current = 1
+      setIndex(0)
+    } else {
+      setUrl2(url)
+      usedIndex.current = 0
+      setIndex(1)
+    }
+  }, [url])
+
+  return (
+    <Center position="absolute" top="0" left="0" right="0" bottom="0" zIndex={0}>
+      <FillBackground filter={filter} opacity={index === 0 ? 1 : 0} background={url1} />
+      <FillBackground filter={filter} opacity={index === 1 ? 1 : 0} background={url2} />
+      <LoadingLogo isLoading={loading} />
+    </Center>
+  )
+}
+
+const UrlBackground = <T extends AnyObject = AnyObject>({
+  getBackgroundUrl,
+  item,
+  filter,
+}: {
+  getBackgroundUrl: GetBackgroundUrl<T>
+  item: T | null
+  filter?: string
+}) => {
+  const background = useMemo(() => (item ? getBackgroundUrl(item) : null), [getBackgroundUrl, item])
+  const usedIndex = useRef(0)
+  const [index, setIndex] = useState(0)
+  const [url1, setUrl1] = useState<string | null>(null)
+  const [url2, setUrl2] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!background) return
+    if (usedIndex.current === 0) {
+      setUrl1(background)
+      usedIndex.current = 1
+      setIndex(0)
+    } else {
+      setUrl2(background)
+      usedIndex.current = 0
+      setIndex(1)
+    }
+  }, [background])
+
+  return (
+    <Center position="absolute" top="0" left="0" right="0" bottom="0" zIndex={0}>
+      <FillBackground filter={filter} opacity={index === 0 ? 1 : 0} background={url1} />
+      <FillBackground filter={filter} opacity={index === 1 ? 1 : 0} background={url2} />
+    </Center>
+  )
+}
+
+interface MediaFeedBackgroundProps<T extends AnyObject = AnyObject> {
+  getBackgroundValue?: GetBackgroundValue<T>
+  getBackgroundUrl?: GetBackgroundUrl<T>
+  filter?: string
+  item: WithId<T> | null
+}
+
+export const MediaFeedBackground = <T extends AnyObject = AnyObject>({
+  getBackgroundValue,
+  getBackgroundUrl,
+  ...props
+}: MediaFeedBackgroundProps<T>) => {
+  if (getBackgroundValue)
+    return <FileValueBackground getBackgroundValue={getBackgroundValue} {...props} />
+  if (getBackgroundUrl) return <UrlBackground getBackgroundUrl={getBackgroundUrl} {...props} />
+  return null
+}

package/src/components/feed/MediaFeedRefresh.tsx

@@ -0,0 +1,78 @@
+import { RepeatIcon } from '@chakra-ui/icons'
+import { Center } from '@chakra-ui/react'
+import { motion, MotionValue, useSpring, useTransform } from 'framer-motion'
+import { useEffect } from 'react'
+import { CircularProgress } from '../loading/CircularProgress'
+import { REFRESH_THRESHOLD, SWIPE_THRESHOLD } from './constants'
+
+const WINDOW = REFRESH_THRESHOLD - SWIPE_THRESHOLD
+export const MediaFeedRefresh = ({
+  offsetY,
+  refreshing,
+  canRefresh,
+}: {
+  offsetY: MotionValue<number>
+  refreshing: boolean
+  canRefresh: boolean
+}) => {
+  const progress = useTransform(offsetY, v => {
+    const dist = Math.max(0, v - SWIPE_THRESHOLD)
+    return dist / WINDOW
+  })
+  const baseY = useSpring(0)
+  const isIn = useSpring(0)
+  useEffect(() => {
+    if (refreshing) {
+      baseY.set(50)
+    } else {
+      baseY.set(0)
+    }
+  }, [refreshing, baseY])
+
+  useEffect(() => {
+    if (canRefresh) {
+      isIn.set(1)
+    } else {
+      isIn.set(0)
+    }
+  }, [isIn, canRefresh])
+
+  const y = useTransform(
+    () => isIn.get() * Math.min(20, Math.max(0, baseY.get() + progress.get() ** 0.5 * 20)),
+  )
+  const scale = useTransform(y, v => isIn.get() * Math.min(1, Math.max(0, v / 30)))
+  const rotate = useTransform(() => isIn.get() * progress.get() * 180)
+  return (
+    <motion.div
+      style={{
+        opacity: scale,
+        pointerEvents: 'none',
+        y,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 'auto',
+        scale,
+        rotate,
+      }}>
+      <Center w="100%">
+        <RepeatIcon
+          opacity={refreshing ? 0 : 1}
+          transition={`opacity 300ms ease ${!refreshing ? 300 : 0}ms`}
+          w={8}
+          h={8}
+          color="white"
+          filter="drop-shadow(1px 1px 3px #000000aa)"
+        />
+        <CircularProgress
+          size={8}
+          position="absolute"
+          isIndeterminate
+          opacity={refreshing ? 1 : 0}
+          transition={`opacity 300ms ease ${refreshing ? 300 : 0}ms`}
+        />
+      </Center>
+    </motion.div>
+  )
+}

package/src/components/feed/MediaFeedSwipeUp.tsx

@@ -0,0 +1,34 @@
+import { ChevronUpIcon } from '@chakra-ui/icons'
+import { Center } from '@chakra-ui/react'
+import { motion, MotionValue, useTransform } from 'framer-motion'
+
+export const MediaFeedSwipeUp = ({ offsetY }: { offsetY: MotionValue<number> }) => {
+  const progress = useTransform(offsetY, v => {
+    if (v > -30) return 0
+    return Math.max(0, -(v + 30) / 20)
+  })
+  const y = useTransform(progress, v => -(v ** 0.5) * 10)
+  return (
+    <motion.div
+      style={{
+        opacity: progress,
+        pointerEvents: 'none',
+        y,
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: 'auto',
+        scale: progress,
+      }}>
+      <Center w="100%">
+        <ChevronUpIcon
+          w={8}
+          h={8}
+          color="whiteAlpha.700"
+          filter="drop-shadow(1px 1px 3px #000000aa)"
+        />
+      </Center>
+    </motion.div>
+  )
+}

package/src/components/feed/constants.ts

@@ -0,0 +1,11 @@
+import { SpringOptions } from 'framer-motion'
+
+export const springConfig: SpringOptions = {
+  damping: 25,
+  stiffness: 200,
+  bounce: 0.5,
+  // restSpeed: 0.1,
+}
+
+export const SWIPE_THRESHOLD = 75
+export const REFRESH_THRESHOLD = 100

package/src/components/feed/context.tsx

@@ -0,0 +1,19 @@
+import { AnyObject, WithId } from '@chem-po/core'
+import { createContext, PropsWithChildren, useContext, useMemo } from 'react'
+
+interface MediaFeedContextValue<T extends AnyObject = AnyObject> {
+  curr: WithId<T> | null
+}
+export const MediaFeedContext = createContext<MediaFeedContextValue<any>>(
+  {} as MediaFeedContextValue<any>,
+)
+
+export const MediaFeedProvider = <T extends AnyObject = AnyObject>({
+  curr,
+  children,
+}: PropsWithChildren<{ curr: WithId<T> | null }>) => {
+  const contextData = useMemo(() => ({ curr }), [curr])
+  return <MediaFeedContext.Provider value={contextData}>{children}</MediaFeedContext.Provider>
+}
+export const useMediaFeed = <T extends AnyObject = AnyObject>() =>
+  useContext(MediaFeedContext) as MediaFeedContextValue<T>