@chem-po/react-native 0.0.5 → 0.0.7

package/src/components/feed/MediaFeed.tsx

@@ -0,0 +1,199 @@
+import { AnyObject, WithId } from '@chem-po/core'
+import {
+  MediaBackgroundRef,
+  MediaFeedProps,
+  PanelData,
+  UpdatePanelsArgs,
+  useScreen,
+  useTheme,
+} from '@chem-po/react'
+import React, { Dispatch, PropsWithChildren, useCallback, useMemo, useRef, useState } from 'react'
+import { Animated, StyleSheet, View, ViewStyle } from 'react-native'
+import {
+  Gesture,
+  GestureDetector,
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+  PanGestureHandlerEventPayload,
+} from 'react-native-gesture-handler'
+import { fill } from '../../styles/fill'
+import { Center } from '../box/Center'
+import { LoadingOverlay } from '../loading/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'
+
+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 } = useScreen()
+  const { theme } = useTheme()
+
+  const contentRef = useRef<View>(null)
+  const containerRef = useRef<View>(null)
+  // const panels = useRef<Array<FeedContentPaneRef>>([])
+  const [direction, setDirection] = useState<'next' | 'prev' | null>(null)
+  const [panels, setPanels] = useState<Array<PanelData>>([])
+
+  const offsetY = useRef(new Animated.Value(0)).current
+  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: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+      if (swipeDisabled) return
+      pointerDown.current = true
+      dragStart.current = { x: e.x, y: e.y }
+    },
+    [swipeDisabled],
+  )
+
+  const onDragEnd = useCallback(
+    (e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+      if (!pointerDown.current) return
+
+      const maxY = canGoPrev ? SWIPE_THRESHOLD : REFRESH_THRESHOLD
+      const minY = canGoNext ? -SWIPE_THRESHOLD : -REFRESH_THRESHOLD
+      const oY = Math.max(minY, Math.min(maxY, e.y - dragStart.current.y))
+
+      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)
+      }
+
+      offsetY.setValue(0)
+      pointerDown.current = false
+    },
+    [offsetY, goNext, goPrev, canGoNext, canGoPrev, refresh],
+  )
+
+  const onDragMove = useCallback(
+    (e: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
+      if (!pointerDown.current) return
+
+      const oX = Math.max(-10, Math.min(10, e.x - 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.y - dragStart.current.y))
+
+      const dist = Math.sqrt(oX ** 2 + oY ** 2)
+      if (dist > 10 && contentRef.current) {
+        // contentRef.current.style.setProperty('pointer-events', 'none')
+      }
+      offsetY.setValue(oY)
+    },
+    [offsetY, canGoNext, canGoPrev],
+  )
+
+  const panGesture = Gesture.Pan().onStart(onDragStart).onUpdate(onDragMove).onEnd(onDragEnd)
+
+  const containerStyle = useMemo<ViewStyle>(
+    () => ({
+      height,
+      width,
+      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}>
+      <GestureDetector gesture={panGesture}>
+        <Center
+          style={[
+            styles.container,
+            { backgroundColor: defaultBackground ?? theme.colors.background[100] },
+          ]}>
+          <MediaFeedBackground
+            item={curr}
+            getBackgroundValue={getBackgroundValue}
+            getBackgroundUrl={getBackgroundUrl}
+          />
+          <View style={containerStyle} ref={containerRef}>
+            <Center style={fill.relative} ref={contentRef}>
+              {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>
+          </View>
+          <MediaFeedRefresh canRefresh={!canGoPrev} refreshing={refreshing} offsetY={offsetY} />
+          {/* {onSwipeUp ? <MediaFeedSwipeUp offsetY={offsetY} /> : null} */}
+          <LoadingOverlay inFeed isLoading={loading} />
+          {children ? <Center style={[fill.absolute, { zIndex: 3 }]}>{children}</Center> : null}
+        </Center>
+      </GestureDetector>
+    </MediaFeedProvider>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...fill.relative,
+    overflow: 'hidden',
+  },
+})

package/src/components/feed/MediaFeedBackground.tsx

@@ -0,0 +1,136 @@
+import { AnyObject, WithId } from '@chem-po/core'
+import { GetBackgroundUrl, GetBackgroundValue, useObjectUrl } from '@chem-po/react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { ImageBackground, StyleSheet, View, ViewProps } from 'react-native'
+import { fill } from '../../styles/fill'
+import { Center } from '../box/Center'
+import { LoadingLogo } from '../loading'
+
+const emptyPng =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII='
+export const backgroundStyle = StyleSheet.create({
+  imageBackground: {
+    flex: 1,
+    transform: [{ scale: 1.075 }],
+  },
+})
+
+interface FillBackgroundProps extends ViewProps {
+  background: string | null
+  opacity?: number
+}
+
+const FillBackground: React.FC<FillBackgroundProps> = ({
+  background,
+  opacity = 0.7,
+  style,
+  ...props
+}) => (
+  <View style={[fill.absolute, style]} {...props}>
+    <ImageBackground
+      source={{ uri: background ?? emptyPng }}
+      style={[backgroundStyle.imageBackground, { opacity }]}
+      resizeMode="cover"></ImageBackground>
+  </View>
+)
+
+interface FileValueBackgroundProps<T extends AnyObject = AnyObject> {
+  getBackgroundValue: GetBackgroundValue<T>
+  item: WithId<T> | null
+  filter?: string
+}
+const FileValueBackground = <T extends AnyObject = AnyObject>({
+  getBackgroundValue,
+  item,
+}: 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 style={fill.absolute}>
+      <FillBackground opacity={index === 0 ? 1 : 0} background={url1} />
+      <FillBackground opacity={index === 1 ? 1 : 0} background={url2} />
+      <LoadingLogo isLoading={loading} />
+    </Center>
+  )
+}
+
+const UrlBackground = <T extends AnyObject = AnyObject>({
+  getBackgroundUrl,
+  item,
+}: {
+  getBackgroundUrl: GetBackgroundUrl<T>
+  item: T | null
+}) => {
+  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 style={fill.absolute}>
+      <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,113 @@
+import Icon from '@expo/vector-icons/MaterialCommunityIcons' // or your preferred icon set
+import { useEffect, useRef } from 'react'
+import { Animated, StyleSheet, View } from 'react-native'
+import { DropShadow } from '../box/DropShadow'
+import { CircularProgress } from '../loading'
+import { REFRESH_THRESHOLD, SWIPE_THRESHOLD } from './constants'
+
+const WINDOW = REFRESH_THRESHOLD - SWIPE_THRESHOLD
+
+export const MediaFeedRefresh = ({
+  offsetY,
+  refreshing,
+  canRefresh,
+}: {
+  offsetY: Animated.Value
+  refreshing: boolean
+  canRefresh: boolean
+}) => {
+  // Create animated values
+  const baseY = useRef(new Animated.Value(0)).current
+  const isIn = useRef(new Animated.Value(0)).current
+
+  const dist = Animated.subtract(offsetY, SWIPE_THRESHOLD)
+  const baseProgress = Animated.divide(dist, WINDOW)
+  const progress = Animated.diffClamp(baseProgress, 0, 1)
+
+  // Handle refreshing state
+  useEffect(() => {
+    Animated.spring(baseY, {
+      toValue: refreshing ? 50 : 0,
+      useNativeDriver: true,
+    }).start()
+  }, [refreshing, baseY])
+
+  // Handle canRefresh state
+  useEffect(() => {
+    Animated.spring(isIn, {
+      toValue: canRefresh ? 1 : 0,
+      useNativeDriver: true,
+    }).start()
+  }, [canRefresh, isIn])
+
+  // Create complex animations
+  const progressRoot = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, Math.sqrt(1) * 20],
+  })
+
+  const yBase = Animated.add(baseY, progressRoot)
+  const yConstrained = yBase.interpolate({
+    inputRange: [0, 20],
+    outputRange: [0, 20],
+    extrapolate: 'clamp',
+  })
+
+  const y = Animated.multiply(isIn, yConstrained)
+
+  const scale = y.interpolate({
+    inputRange: [0, 30],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  })
+  const finalScale = Animated.multiply(isIn, scale)
+
+  const rotate = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg'],
+  })
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          opacity: finalScale,
+          transform: [{ translateY: y }, { scale: finalScale }, { rotate }],
+        },
+      ]}>
+      <View style={styles.centerContainer}>
+        <DropShadow
+          style={[
+            {
+              opacity: refreshing ? 0 : 1,
+            },
+          ]}>
+          <Icon name="refresh" size={32} color="white" />
+        </DropShadow>
+
+        <DropShadow
+          style={{
+            opacity: refreshing ? 1 : 0,
+          }}>
+          <CircularProgress animating size="large" color="white" />
+        </DropShadow>
+      </View>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    pointerEvents: 'none',
+  },
+  centerContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
+})

package/src/components/feed/constants.ts

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