@chem-po/react-native 0.0.4 → 0.0.6

package/lib/module/components/button/LoadingButton.js

@@ -0,0 +1,124 @@
+import { useTextColor, useToast } from '@chem-po/react';
+import { Ionicons } from '@expo/vector-icons';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+export const LoadingButton = ({
+  onPress,
+  children,
+  style,
+  textStyle,
+  color: colorProp,
+  icon,
+  disabled = false
+}) => {
+  const [loading, setLoading] = useState(false);
+  const isMounted = useRef(true);
+  const contentOpacity = useRef(new Animated.Value(1)).current;
+  const loaderOpacity = useRef(new Animated.Value(0)).current;
+  const {
+    showError
+  } = useToast();
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  const animateLoading = useCallback(isLoading => {
+    Animated.parallel([Animated.timing(contentOpacity, {
+      toValue: isLoading ? 0 : 1,
+      duration: 200,
+      useNativeDriver: true
+    }), Animated.timing(loaderOpacity, {
+      toValue: isLoading ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true
+    })]).start();
+  }, [contentOpacity, loaderOpacity]);
+  const handlePress = useCallback(async () => {
+    if (onPress) {
+      setLoading(true);
+      animateLoading(true);
+      try {
+        await onPress();
+      } catch (err) {
+        console.error(err);
+        showError(err.message ?? 'An error occurred');
+      }
+      if (isMounted.current) {
+        setLoading(false);
+        animateLoading(false);
+      }
+    }
+  }, [onPress, animateLoading, showError]);
+  const fallbackColor = useTextColor();
+  const color = useMemo(() => colorProp ?? fallbackColor, [colorProp, fallbackColor]);
+  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: [styles.button, {
+      borderColor: color,
+      backgroundColor: disabled ? '#f0f0f0' : 'transparent'
+    }, style],
+    onPress: e => {
+      e.stopPropagation();
+      handlePress();
+    },
+    disabled: loading || disabled
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.buttonContent, {
+      borderColor: disabled ? '#ccc' : color
+    }]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.contentContainer, {
+      opacity: contentOpacity
+    }]
+  }, icon && /*#__PURE__*/React.createElement(Ionicons, {
+    name: icon.name,
+    size: icon.size ?? 20,
+    color: disabled ? '#ccc' : color
+  }), typeof children === 'string' ? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.buttonText, {
+      color: disabled ? '#ccc' : color
+    }, textStyle]
+  }, children) : children), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.loaderContainer, {
+      opacity: loaderOpacity
+    }]
+  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
+    color: color,
+    size: "small"
+  }))));
+};
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'transparent'
+  },
+  buttonContent: {
+    flexDirection: 'row',
+    gap: 8,
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 40,
+    position: 'relative'
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8
+  },
+  loaderContainer: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  buttonText: {
+    fontWeight: 'bold'
+  }
+});
+//# sourceMappingURL=LoadingButton.js.map

package/lib/module/components/button/LoadingButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTextColor","useToast","Ionicons","React","useCallback","useEffect","useMemo","useRef","useState","ActivityIndicator","Animated","StyleSheet","Text","TouchableOpacity","View","LoadingButton","onPress","children","style","textStyle","color","colorProp","icon","disabled","loading","setLoading","isMounted","contentOpacity","Value","current","loaderOpacity","showError","animateLoading","isLoading","parallel","timing","toValue","duration","useNativeDriver","start","handlePress","err","console","error","message","fallbackColor","createElement","styles","button","borderColor","backgroundColor","e","stopPropagation","buttonContent","contentContainer","opacity","name","size","buttonText","loaderContainer","create","flexDirection","alignItems","gap","borderWidth","paddingHorizontal","paddingVertical","borderRadius","justifyContent","minHeight","position","absoluteFillObject","fontWeight"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/button/LoadingButton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/button/Toggle.js

@@ -0,0 +1,82 @@
+import { useTheme, useToast } from '@chem-po/react';
+import { useCallback } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+const ToggleButton = ({
+  selected,
+  option: {
+    Render,
+    disabledMessage
+  },
+  size,
+  onPress
+}) => {
+  const {
+    showError
+  } = useToast();
+  const handlePress = useCallback(() => {
+    if (!disabledMessage) {
+      onPress();
+    } else {
+      showError(disabledMessage);
+    }
+  }, [onPress, disabledMessage, showError]);
+  const body = /*#__PURE__*/React.createElement(View, {
+    style: [styles.buttonContainer, {
+      width: size,
+      height: size,
+      opacity: !disabledMessage ? 1 : 0.6
+    }]
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: [styles.button, {
+      backgroundColor: selected ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.1)',
+      pointerEvents: selected ? 'none' : 'auto'
+    }],
+    onPress: handlePress,
+    disabled: !!disabledMessage
+  }, Render(selected)));
+  return body;
+};
+export const Toggle = ({
+  value,
+  onChange,
+  size = 28,
+  options
+}) => {
+  const {
+    theme: {
+      colors: {
+        background
+      }
+    }
+  } = useTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      borderColor: background[300]
+    }]
+  }, options.map(option => /*#__PURE__*/React.createElement(ToggleButton, {
+    key: option.id,
+    onPress: () => {
+      onChange(option.id);
+    },
+    option: option,
+    size: size,
+    selected: option.id === value
+  })));
+};
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderRadius: 3
+  },
+  buttonContainer: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 3
+  }
+});
+//# sourceMappingURL=Toggle.js.map

package/lib/module/components/button/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTheme","useToast","useCallback","StyleSheet","TouchableOpacity","View","ToggleButton","selected","option","Render","disabledMessage","size","onPress","showError","handlePress","body","React","createElement","style","styles","buttonContainer","width","height","opacity","button","backgroundColor","pointerEvents","disabled","Toggle","value","onChange","options","theme","colors","background","container","borderColor","map","key","id","create","flexDirection","borderWidth","borderRadius","justifyContent","alignItems"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/button/Toggle.tsx"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,QAAQ,QAAQ,gBAAgB;AACnD,SAAcC,WAAW,QAAQ,OAAO;AACxC,SAASC,UAAU,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,cAAc;AAejE,MAAMC,YAAY,GAAGA,CAAwB;EAC3CC,QAAQ;EACRC,MAAM,EAAE;IAAEC,MAAM;IAAEC;EAAgB,CAAC;EACnCC,IAAI;EACJC;AAMF,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAU,CAAC,GAAGZ,QAAQ,CAAC,CAAC;EAChC,MAAMa,WAAW,GAAGZ,WAAW,CAAC,MAAM;IACpC,IAAI,CAACQ,eAAe,EAAE;MACpBE,OAAO,CAAC,CAAC;IACX,CAAC,MAAM;MACLC,SAAS,CAACH,eAAe,CAAC;IAC5B;EACF,CAAC,EAAE,CAACE,OAAO,EAAEF,eAAe,EAAEG,SAAS,CAAC,CAAC;EACzC,MAAME,IAAI,gBACRC,KAAA,CAAAC,aAAA,CAACZ,IAAI;IACHa,KAAK,EAAE,CACLC,MAAM,CAACC,eAAe,EACtB;MAAEC,KAAK,EAAEV,IAAI;MAAEW,MAAM,EAAEX,IAAI;MAAEY,OAAO,EAAE,CAACb,eAAe,GAAG,CAAC,GAAG;IAAI,CAAC;EAClE,gBACFM,KAAA,CAAAC,aAAA,CAACb,gBAAgB;IACfc,KAAK,EAAE,CACLC,MAAM,CAACK,MAAM,EACb;MACEC,eAAe,EAAElB,QAAQ,GAAG,0BAA0B,GAAG,oBAAoB;MAC7EmB,aAAa,EAAEnB,QAAQ,GAAG,MAAM,GAAG;IACrC,CAAC,CACD;IACFK,OAAO,EAAEE,WAAY;IACrBa,QAAQ,EAAE,CAAC,CAACjB;EAAgB,GAC3BD,MAAM,CAACF,QAAQ,CACA,CACd,CACP;EAED,OAAOQ,IAAI;AACb,CAAC;AAED,OAAO,MAAMa,MAAM,GAAGA,CAAwB;EAC5CC,KAAK;EACLC,QAAQ;EACRnB,IAAI,GAAG,EAAE;EACToB;AACmB,CAAC,KAAK;EACzB,MAAM;IACJC,KAAK,EAAE;MACLC,MAAM,EAAE;QAAEC;MAAW;IACvB;EACF,CAAC,GAAGlC,QAAQ,CAAC,CAAC;EACd,oBACEgB,KAAA,CAAAC,aAAA,CAACZ,IAAI;IAACa,KAAK,EAAE,CAACC,MAAM,CAACgB,SAAS,EAAE;MAAEC,WAAW,EAAEF,UAAU,CAAC,GAAG;IAAE,CAAC;EAAE,GAC/DH,OAAO,CAACM,GAAG,CAAC7B,MAAM,iBACjBQ,KAAA,CAAAC,aAAA,CAACX,YAAY;IACXgC,GAAG,EAAE9B,MAAM,CAAC+B,EAAG;IACf3B,OAAO,EAAEA,CAAA,KAAM;MACbkB,QAAQ,CAACtB,MAAM,CAAC+B,EAAE,CAAC;IACrB,CAAE;IACF/B,MAAM,EAAEA,MAAO;IACfG,IAAI,EAAEA,IAAK;IACXJ,QAAQ,EAAEC,MAAM,CAAC+B,EAAE,KAAKV;EAAM,CAC/B,CACF,CACG,CAAC;AAEX,CAAC;AAED,MAAMV,MAAM,GAAGhB,UAAU,CAACqC,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,aAAa,EAAE,KAAK;IACpBC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAChB,CAAC;EACDvB,eAAe,EAAE;IACfwB,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd,CAAC;EACDrB,MAAM,EAAE;IACNoB,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBF,YAAY,EAAE;EAChB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/button/index.js

@@ -0,0 +1,4 @@
+export * from './DeleteButton';
+export * from './LoadingButton';
+export * from './Toggle';
+//# sourceMappingURL=index.js.map

package/lib/module/components/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/button/index.ts"],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB;AAC/B,cAAc,UAAU","ignoreList":[]}

package/lib/module/components/feed/FeedContentPane.js

@@ -0,0 +1,97 @@
+import { useDocument, useScreen } from '@chem-po/react';
+import { useEffect, useMemo, useRef } from 'react';
+// import { motion, MotionValue, useMotionValue, useSpring, useTransform } from 'framer-motion'
+import { Animated } from 'react-native';
+const getContentScale = status => {
+  // 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, contentSize) => {
+  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;
+};
+export const FeedContentPane = ({
+  id,
+  collectionPath,
+  onItemLoad,
+  RenderItem,
+  status,
+  offsetY,
+  enterStatus
+}) => {
+  const {
+    height,
+    width
+  } = useScreen();
+  const contentSize = useMemo(() => ({
+    height,
+    width
+  }), [height, width]);
+  const scale = useRef(new Animated.Value(0)).current;
+  const baseY = useRef(new Animated.Value(getContentY(enterStatus ?? 'next', contentSize))).current;
+  const y = Animated.add(baseY, offsetY);
+  const docPath = useMemo(() => `${collectionPath}/${id}`, [collectionPath, id]);
+  const {
+    data: item
+  } = useDocument(docPath, onItemLoad);
+
+  // const init = useRef<{
+  //   status: PanelStatus
+  //   contentSize: Size
+  //   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 updatedY = getContentY(status, contentSize);
+    baseY.setValue(updatedY);
+    scale.setValue(newScale);
+    // baseY.set(updatedY)
+    // scale.set(newScale)
+  }, [status, baseY, scale, contentSize]);
+  return (
+    /*#__PURE__*/
+    // <AnimatePresence>
+    React.createElement(Animated.View, {
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        transform: [{
+          translateY: y
+        }, {
+          scale
+        }],
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        opacity: scale,
+        width: '100%'
+      }
+    }, item ? RenderItem(item) : null)
+    // </AnimatePresence>
+  );
+};
+//# sourceMappingURL=FeedContentPane.js.map

package/lib/module/components/feed/FeedContentPane.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useDocument","useScreen","useEffect","useMemo","useRef","Animated","getContentScale","status","getContentY","contentSize","height","cHeight","FeedContentPane","id","collectionPath","onItemLoad","RenderItem","offsetY","enterStatus","width","scale","Value","current","baseY","y","add","docPath","data","item","newScale","updatedY","setValue","React","createElement","View","style","position","top","left","transform","translateY","display","alignItems","justifyContent","opacity"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/feed/FeedContentPane.tsx"],"mappings":"AACA,SAAsBA,WAAW,EAAEC,SAAS,QAAQ,gBAAgB;AACpE,SAAcC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACvD;AACA,SAASC,QAAQ,QAAQ,cAAc;AAEvC,MAAMC,eAAe,GAAIC,MAAmB,IAAK;EAC/C;EACA,IAAIA,MAAM,KAAK,SAAS,EAAE,OAAO,CAAC;EAClC,OAAO,CAAC;AACV,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMC,WAAW,GAAGA,CAACD,MAAmB,EAAEE,WAA8C,KAAK;EAC3F,MAAM;IAAEC,MAAM,EAAEC;EAAQ,CAAC,GAAGF,WAAW;EACvC,IAAIF,MAAM,KAAK,SAAS,EAAE,OAAO,CAAC;EAClC,IAAIA,MAAM,KAAK,MAAM,EAAE,OAAOI,OAAO,GAAG,GAAG;EAC3C,IAAIJ,MAAM,KAAK,MAAM,EAAE,OAAO,CAACI,OAAO,GAAG,GAAG;EAC5C,OAAO,CAAC;AACV,CAAC;AAYD,OAAO,MAAMC,eAAe,GAAGA,CAAkC;EAC/DC,EAAE;EACFC,cAAc;EACdC,UAAU;EACVC,UAAU;EACVT,MAAM;EACNU,OAAO;EACPC;AACuB,CAAC,KAAK;EAC7B,MAAM;IAAER,MAAM;IAAES;EAAM,CAAC,GAAGlB,SAAS,CAAC,CAAC;EACrC,MAAMQ,WAAW,GAAGN,OAAO,CAAC,OAAO;IAAEO,MAAM;IAAES;EAAM,CAAC,CAAC,EAAE,CAACT,MAAM,EAAES,KAAK,CAAC,CAAC;EACvE,MAAMC,KAAK,GAAGhB,MAAM,CAAC,IAAIC,QAAQ,CAACgB,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EACnD,MAAMC,KAAK,GAAGnB,MAAM,CAAC,IAAIC,QAAQ,CAACgB,KAAK,CAACb,WAAW,CAACU,WAAW,IAAI,MAAM,EAAET,WAAW,CAAC,CAAC,CAAC,CAACa,OAAO;EACjG,MAAME,CAAC,GAAGnB,QAAQ,CAACoB,GAAG,CAACF,KAAK,EAAEN,OAAO,CAAC;EAEtC,MAAMS,OAAO,GAAGvB,OAAO,CAAC,MAAM,GAAGW,cAAc,IAAID,EAAE,EAAE,EAAE,CAACC,cAAc,EAAED,EAAE,CAAC,CAAC;EAC9E,MAAM;IAAEc,IAAI,EAAEC;EAAK,CAAC,GAAG5B,WAAW,CAAI0B,OAAO,EAAEX,UAAU,CAAC;;EAE1D;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAEAb,SAAS,CAAC,MAAM;IACd,MAAM2B,QAAQ,GAAGvB,eAAe,CAACC,MAAM,CAAC;IACxC,MAAMuB,QAAQ,GAAGtB,WAAW,CAACD,MAAM,EAAEE,WAAW,CAAC;IACjDc,KAAK,CAACQ,QAAQ,CAACD,QAAQ,CAAC;IACxBV,KAAK,CAACW,QAAQ,CAACF,QAAQ,CAAC;IACxB;IACA;EACF,CAAC,EAAE,CAACtB,MAAM,EAAEgB,KAAK,EAAEH,KAAK,EAAEX,WAAW,CAAC,CAAC;EAEvC;IAAA;IACE;IACAuB,KAAA,CAAAC,aAAA,CAAC5B,QAAQ,CAAC6B,IAAI;MACZC,KAAK,EAAE;QACLC,QAAQ,EAAE,UAAU;QACpBC,GAAG,EAAE,CAAC;QACNC,IAAI,EAAE,CAAC;QACPC,SAAS,EAAE,CAAC;UAAEC,UAAU,EAAEhB;QAAE,CAAC,EAAE;UAAEJ;QAAM,CAAC,CAAC;QACzCqB,OAAO,EAAE,MAAM;QACfC,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBjC,MAAM,EAAE,MAAM;QACdkC,OAAO,EAAExB,KAAK;QACdD,KAAK,EAAE;MACT;IAAE,GACDS,IAAI,GAAGZ,UAAU,CAACY,IAAI,CAAC,GAAG,IACd;IACf;EAAA;AAEJ,CAAC","ignoreList":[]}

package/lib/module/components/feed/MediaFeed.js

@@ -0,0 +1,170 @@
+import { useScreen, useTheme } from '@chem-po/react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } 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 => useCallback(data => {
+  const updated = [];
+  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 = ({
+  fetch,
+  collection: collectionPath,
+  RenderItem,
+  authRequired,
+  getBackgroundUrl,
+  getBackgroundValue,
+  limit,
+  defaultBackground,
+  swipeDisabled,
+  children
+}) => {
+  const {
+    width,
+    height
+  } = useScreen();
+  const {
+    theme
+  } = useTheme();
+  const contentRef = useRef(null);
+  const containerRef = useRef(null);
+  // const panels = useRef<Array<FeedContentPaneRef>>([])
+  const [direction, setDirection] = useState(null);
+  const [panels, setPanels] = useState([]);
+  const offsetY = useRef(new Animated.Value(0)).current;
+  const onNewData = useUpdatePanels(setPanels);
+  const backgroundRef = useRef(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 => {
+    if (swipeDisabled) return;
+    pointerDown.current = true;
+    dragStart.current = {
+      x: e.x,
+      y: e.y
+    };
+  }, [swipeDisabled]);
+  const onDragEnd = useCallback(e => {
+    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 => {
+    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(() => ({
+    height,
+    width,
+    overflow: 'hidden',
+    pointerEvents: swipeDisabled ? 'none' : 'auto'
+  }), [width, height, swipeDisabled]);
+  const [curr, setCurr] = useState(null);
+  const handleItemLoad = useCallback(data => {
+    var _panels$find;
+    const isCurr = ((_panels$find = panels.find(p => p.status === 'current')) === null || _panels$find === void 0 ? void 0 : _panels$find.id) === (data === null || data === void 0 ? void 0 : data._id);
+    if (isCurr) setCurr(data);
+  }, [panels]);
+  return /*#__PURE__*/React.createElement(MediaFeedProvider, {
+    curr: curr
+  }, /*#__PURE__*/React.createElement(GestureDetector, {
+    gesture: panGesture
+  }, /*#__PURE__*/React.createElement(Center, {
+    style: [styles.container, {
+      backgroundColor: defaultBackground ?? theme.colors.background[100]
+    }]
+  }, /*#__PURE__*/React.createElement(MediaFeedBackground, {
+    item: curr,
+    getBackgroundValue: getBackgroundValue,
+    getBackgroundUrl: getBackgroundUrl
+  }), /*#__PURE__*/React.createElement(View, {
+    style: containerStyle,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(Center, {
+    style: fill.relative,
+    ref: contentRef
+  }, panels.map(panel => /*#__PURE__*/React.createElement(FeedContentPane, {
+    key: panel.id,
+    id: panel.id,
+    collectionPath: collectionPath,
+    RenderItem: RenderItem,
+    onItemLoad: handleItemLoad,
+    status: panel.status,
+    enterStatus: direction,
+    offsetY: offsetY
+  })))), /*#__PURE__*/React.createElement(MediaFeedRefresh, {
+    canRefresh: !canGoPrev,
+    refreshing: refreshing,
+    offsetY: offsetY
+  }), /*#__PURE__*/React.createElement(LoadingOverlay, {
+    inFeed: true,
+    isLoading: loading
+  }), children ? /*#__PURE__*/React.createElement(Center, {
+    style: [fill.absolute, {
+      zIndex: 3
+    }]
+  }, children) : null)));
+};
+const styles = StyleSheet.create({
+  container: {
+    ...fill.relative,
+    overflow: 'hidden'
+  }
+});
+//# sourceMappingURL=MediaFeed.js.map

package/lib/module/components/feed/MediaFeed.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useScreen","useTheme","React","useCallback","useMemo","useRef","useState","Animated","StyleSheet","View","Gesture","GestureDetector","fill","Center","LoadingOverlay","REFRESH_THRESHOLD","SWIPE_THRESHOLD","MediaFeedProvider","FeedContentPane","useMediaFeed","MediaFeedBackground","MediaFeedRefresh","useUpdatePanels","setItems","data","updated","prev","push","status","id","curr","next","MediaFeed","fetch","collection","collectionPath","RenderItem","authRequired","getBackgroundUrl","getBackgroundValue","limit","defaultBackground","swipeDisabled","children","width","height","theme","contentRef","containerRef","direction","setDirection","panels","setPanels","offsetY","Value","current","onNewData","backgroundRef","goNext","goPrev","loading","canGoNext","canGoPrev","refresh","refreshing","pointerDown","dragStart","x","y","onDragStart","e","onDragEnd","maxY","minY","oY","Math","max","min","setValue","onDragMove","oX","dist","sqrt","panGesture","Pan","onStart","onUpdate","onEnd","containerStyle","overflow","pointerEvents","setCurr","handleItemLoad","_panels$find","isCurr","find","p","_id","createElement","gesture","style","styles","container","backgroundColor","colors","background","item","ref","relative","map","panel","key","onItemLoad","enterStatus","canRefresh","inFeed","isLoading","absolute","zIndex","create"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/feed/MediaFeed.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/feed/MediaFeedBackground.js

@@ -0,0 +1,118 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { useObjectUrl } from '@chem-po/react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { ImageBackground, StyleSheet, View } 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
+    }]
+  }
+});
+const FillBackground = ({
+  background,
+  opacity = 0.7,
+  style,
+  ...props
+}) => /*#__PURE__*/React.createElement(View, _extends({
+  style: [fill.absolute, style]
+}, props), /*#__PURE__*/React.createElement(ImageBackground, {
+  source: {
+    uri: background ?? emptyPng
+  },
+  style: [backgroundStyle.imageBackground, {
+    opacity
+  }],
+  resizeMode: "cover"
+}));
+const FileValueBackground = ({
+  getBackgroundValue,
+  item
+}) => {
+  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(null);
+  const [url2, setUrl2] = useState(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 /*#__PURE__*/React.createElement(Center, {
+    style: fill.absolute
+  }, /*#__PURE__*/React.createElement(FillBackground, {
+    opacity: index === 0 ? 1 : 0,
+    background: url1
+  }), /*#__PURE__*/React.createElement(FillBackground, {
+    opacity: index === 1 ? 1 : 0,
+    background: url2
+  }), /*#__PURE__*/React.createElement(LoadingLogo, {
+    isLoading: loading
+  }));
+};
+const UrlBackground = ({
+  getBackgroundUrl,
+  item
+}) => {
+  const background = useMemo(() => item ? getBackgroundUrl(item) : null, [getBackgroundUrl, item]);
+  const usedIndex = useRef(0);
+  const [index, setIndex] = useState(0);
+  const [url1, setUrl1] = useState(null);
+  const [url2, setUrl2] = useState(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 /*#__PURE__*/React.createElement(Center, {
+    style: fill.absolute
+  }, /*#__PURE__*/React.createElement(FillBackground
+  //filter={filter}
+  , {
+    opacity: index === 0 ? 1 : 0,
+    background: url1
+  }), /*#__PURE__*/React.createElement(FillBackground
+  //filter={filter}
+  , {
+    opacity: index === 1 ? 1 : 0,
+    background: url2
+  }));
+};
+export const MediaFeedBackground = ({
+  getBackgroundValue,
+  getBackgroundUrl,
+  ...props
+}) => {
+  if (getBackgroundValue) return /*#__PURE__*/React.createElement(FileValueBackground, _extends({
+    getBackgroundValue: getBackgroundValue
+  }, props));
+  if (getBackgroundUrl) return /*#__PURE__*/React.createElement(UrlBackground, _extends({
+    getBackgroundUrl: getBackgroundUrl
+  }, props));
+  return null;
+};
+//# sourceMappingURL=MediaFeedBackground.js.map

package/lib/module/components/feed/MediaFeedBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useObjectUrl","React","useEffect","useMemo","useRef","useState","ImageBackground","StyleSheet","View","fill","Center","LoadingLogo","emptyPng","backgroundStyle","create","imageBackground","flex","transform","scale","FillBackground","background","opacity","style","props","createElement","_extends","absolute","source","uri","resizeMode","FileValueBackground","getBackgroundValue","item","loading","url","usedIndex","index","setIndex","url1","setUrl1","url2","setUrl2","usedIdx","current","isLoading","UrlBackground","getBackgroundUrl","MediaFeedBackground"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/feed/MediaFeedBackground.tsx"],"mappings":"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","ignoreList":[]}