@chem-po/react-native 0.0.5 → 0.0.7

package/src/components/button/DeleteButton.tsx

@@ -0,0 +1,294 @@
+import { useToast } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  ActivityIndicator,
+  Animated,
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native'
+import { Txt } from '../text/Txt'
+
+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
+}) => {
+  return (
+    <Modal
+      transparent={true}
+      visible={confirmActive}
+      onRequestClose={onCancel}
+      animationType="fade">
+      <View style={styles.overlay}>
+        <View style={styles.alertContainer}>
+          <Txt style={styles.alertTitle}>
+            {actionName} {itemName}?
+          </Txt>
+          {typeof body === 'string' ? <Txt style={styles.alertBody}>{body}</Txt> : body}
+          <View style={styles.buttonContainer}>
+            <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+              <Txt style={styles.cancelText}>Cancel</Txt>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={styles.confirmButton}
+              onPress={onConfirm}
+              disabled={actionLoading}>
+              {actionLoading ? (
+                <ActivityIndicator color="#fff" />
+              ) : (
+                <Txt style={[styles.buttonText, styles.confirmButtonText]}>{actionName}</Txt>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  )
+}
+
+export const DeleteButton: React.FC<{
+  onDelete: (() => Promise<any>) | (() => void)
+  itemName: string
+  actionName?: string
+  noConfirm?: boolean
+  text?: string
+  alertBody?: string | ReactNode
+  style?: ViewStyle
+}> = ({ onDelete, itemName, noConfirm, alertBody, text, actionName = 'Delete', style }) => {
+  const { showError } = useToast()
+  const [deleteLoading, setDeleteLoading] = useState(false)
+  const [confirmActive, setConfirmActive] = useState(false)
+  const confirmTimer = useRef<any>()
+  const isMounted = useRef(true)
+  const contentOpacity = useRef(new Animated.Value(1)).current
+  const loaderOpacity = useRef(new Animated.Value(0)).current
+
+  useEffect(() => {
+    isMounted.current = true
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  const animateLoading = useCallback(
+    (isLoading: boolean) => {
+      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 handleDelete = useCallback(async () => {
+    if (confirmTimer.current) clearTimeout(confirmTimer.current)
+    setConfirmActive(false)
+    if (onDelete) {
+      setDeleteLoading(true)
+      animateLoading(true)
+      try {
+        await onDelete()
+      } catch (err: any) {
+        console.error(err)
+        showError(err.message ?? 'An error occurred')
+      }
+      if (isMounted.current) {
+        setDeleteLoading(false)
+        animateLoading(false)
+      }
+    } else {
+      console.error('No delete function')
+    }
+  }, [onDelete, animateLoading])
+
+  return (
+    <>
+      {text ? (
+        <TouchableOpacity
+          style={[styles.button, style]}
+          onPress={e => {
+            e.stopPropagation()
+            if (noConfirm) handleDelete()
+            else setConfirmActive(true)
+          }}
+          disabled={deleteLoading}>
+          <View style={styles.buttonContent}>
+            <Animated.View style={[styles.contentContainer, { opacity: contentOpacity }]}>
+              <Ionicons name="trash" size={20} color="red" />
+              <Text style={styles.buttonText}>{text}</Text>
+            </Animated.View>
+
+            <Animated.View style={[styles.loaderContainer, { opacity: loaderOpacity }]}>
+              <ActivityIndicator color="#ff0000" size="small" />
+            </Animated.View>
+          </View>
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity
+          style={[styles.iconButton, style]}
+          onPress={e => {
+            e.stopPropagation()
+            if (noConfirm) handleDelete()
+            else setConfirmActive(true)
+          }}
+          disabled={deleteLoading}>
+          <View style={styles.buttonContent}>
+            <Animated.View style={[styles.contentContainer, { opacity: contentOpacity }]}>
+              <Ionicons name="trash" size={24} color="#ee0000" />
+            </Animated.View>
+
+            <Animated.View style={[styles.loaderContainer, { opacity: loaderOpacity }]}>
+              <ActivityIndicator color="#ff0000" size="small" />
+            </Animated.View>
+          </View>
+        </TouchableOpacity>
+      )}
+      {noConfirm ? null : (
+        <DeleteConfirmAlert
+          confirmActive={confirmActive}
+          onCancel={() => setConfirmActive(false)}
+          actionLoading={deleteLoading}
+          onConfirm={() => {
+            handleDelete()
+          }}
+          actionName={actionName}
+          body={alertBody}
+          itemName={itemName}
+        />
+      )}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  alertContainer: {
+    width: '80%',
+    maxWidth: 400,
+    backgroundColor: 'white',
+    borderRadius: 10,
+    padding: 20,
+    alignItems: 'center',
+  },
+  alertTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 10,
+  },
+  alertBody: {
+    fontSize: 16,
+    marginBottom: 20,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  cancelButton: {
+    padding: 10,
+    borderColor: 'gray',
+    borderWidth: 1,
+    borderRadius: 5,
+    flex: 1,
+    marginRight: 5,
+    alignItems: 'center',
+  },
+  cancelText: {
+    color: 'gray',
+    fontWeight: 'bold',
+  },
+  confirmButton: {
+    padding: 10,
+    backgroundColor: 'red',
+    borderRadius: 5,
+    flex: 1,
+    marginLeft: 5,
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: 'red',
+    fontWeight: 'bold',
+  },
+  confirmButtonText: {
+    color: 'white',
+    textShadowColor: 'rgba(0, 0, 0, 0.5)',
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 3,
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 10,
+    backgroundColor: 'transparent',
+  },
+  buttonContent: {
+    flexDirection: 'row',
+    gap: 3,
+    borderWidth: 1,
+    borderColor: 'red',
+    paddingHorizontal: 13,
+    paddingVertical: 5,
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 34,
+    position: 'relative',
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 3,
+  },
+  loaderContainer: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconButton: {
+    padding: 10,
+    backgroundColor: 'transparent',
+  },
+  loading: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 24,
+    width: 24,
+  },
+})

package/src/components/button/LoadingButton.tsx

@@ -0,0 +1,155 @@
+import { useTextColor, useToast } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  ActivityIndicator,
+  Animated,
+  StyleSheet,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native'
+
+export interface LoadingButtonProps {
+  onPress: (() => Promise<any>) | (() => void)
+  children: ReactNode
+  style?: ViewStyle
+  textStyle?: TextStyle
+  color?: string
+  icon?: {
+    name: React.ComponentProps<typeof Ionicons>['name']
+    size?: number
+  }
+  disabled?: boolean
+}
+
+export const LoadingButton: React.FC<LoadingButtonProps> = ({
+  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: boolean) => {
+      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: any) {
+        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 (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        { borderColor: color, backgroundColor: disabled ? '#f0f0f0' : 'transparent' },
+        style,
+      ]}
+      onPress={e => {
+        e.stopPropagation()
+        handlePress()
+      }}
+      disabled={loading || disabled}>
+      <View style={[styles.buttonContent, { borderColor: disabled ? '#ccc' : color }]}>
+        <Animated.View style={[styles.contentContainer, { opacity: contentOpacity }]}>
+          {icon && (
+            <Ionicons name={icon.name} size={icon.size ?? 20} color={disabled ? '#ccc' : color} />
+          )}
+          {typeof children === 'string' ? (
+            <Text style={[styles.buttonText, { color: disabled ? '#ccc' : color }, textStyle]}>
+              {children}
+            </Text>
+          ) : (
+            children
+          )}
+        </Animated.View>
+
+        <Animated.View style={[styles.loaderContainer, { opacity: loaderOpacity }]}>
+          <ActivityIndicator color={color} size="small" />
+        </Animated.View>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+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',
+  },
+})

package/src/components/button/Toggle.tsx

@@ -0,0 +1,104 @@
+import { useTheme, useToast } from '@chem-po/react'
+import { JSX, useCallback } from 'react'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+
+export interface ToggleOption<Option extends string = string> {
+  id: Option
+  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, disabledMessage },
+  size,
+  onPress,
+}: {
+  option: ToggleOption<Option>
+  size: number
+  selected: boolean
+  onPress: () => void
+}) => {
+  const { showError } = useToast()
+  const handlePress = useCallback(() => {
+    if (!disabledMessage) {
+      onPress()
+    } else {
+      showError(disabledMessage)
+    }
+  }, [onPress, disabledMessage, showError])
+  const body = (
+    <View
+      style={[
+        styles.buttonContainer,
+        { width: size, height: size, opacity: !disabledMessage ? 1 : 0.6 },
+      ]}>
+      <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)}
+      </TouchableOpacity>
+    </View>
+  )
+
+  return body
+}
+
+export const Toggle = <Option extends string>({
+  value,
+  onChange,
+  size = 28,
+  options,
+}: ToggleProps<Option>) => {
+  const {
+    theme: {
+      colors: { background },
+    },
+  } = useTheme()
+  return (
+    <View style={[styles.container, { borderColor: background[300] }]}>
+      {options.map(option => (
+        <ToggleButton<Option>
+          key={option.id}
+          onPress={() => {
+            onChange(option.id)
+          }}
+          option={option}
+          size={size}
+          selected={option.id === value}
+        />
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderRadius: 3,
+  },
+  buttonContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 3,
+  },
+})

package/src/components/button/index.ts

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

package/src/components/feed/FeedContentPane.tsx

@@ -0,0 +1,97 @@
+import { AnyObject, WithId } from '@chem-po/core'
+import { PanelStatus, useDocument, useScreen } from '@chem-po/react'
+import { JSX, useEffect, useMemo, useRef } from 'react'
+// import { motion, MotionValue, useMotionValue, useSpring, useTransform } from 'framer-motion'
+import { Animated } from 'react-native'
+
+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: Animated.Value
+}
+
+export const FeedContentPane = <T extends AnyObject = AnyObject>({
+  id,
+  collectionPath,
+  onItemLoad,
+  RenderItem,
+  status,
+  offsetY,
+  enterStatus,
+}: FeedContentPaneProps<T>) => {
+  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<T>(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 (
+    // <AnimatePresence>
+    <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}
+    </Animated.View>
+    // </AnimatePresence>
+  )
+}