u

code/allapp/allapp-rn/src/components/common/ao/Drawer.tsx

@@ -0,0 +1,261 @@
+import type { ReactNode } from 'react'
+import type { DimensionValue, ViewStyle } from 'react-native'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  Animated,
+  Dimensions,
+  Modal,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+import LucideIcon from './LucideIcon'
+
+const WINDOW = Dimensions.get('window')
+
+interface DrawerMenuProps {
+  visible: boolean
+  duration?: number
+  menuPosition?: 'left' | 'right' | 'top' | 'bottom'
+  Height?: DimensionValue
+  hideModal: () => void
+  children?: ReactNode
+  isCircle?: boolean
+  CircleNum?: number
+  isShadowHideModal?: boolean
+  title?: string
+}
+
+export default function Drawer({
+  visible,
+  Height,
+  hideModal,
+  duration = 300,
+  isCircle,
+  menuPosition = 'bottom',
+  children,
+  CircleNum,
+  isShadowHideModal = true,
+  title,
+}: DrawerMenuProps) {
+  const [menuPositionStyle, setMenuPositionStyle] = useState<ViewStyle>()
+  const [drawerMenuBox, setDrawerMenuBox] = useState<ViewStyle>()
+  const [innerVisible, setInnerVisible] = useState(false)
+
+  const anim = useRef(new Animated.Value(0)).current
+
+  /* ================== 同步外部 visible ================== */
+  useEffect(() => {
+    if (visible) {
+      setInnerVisible(true)
+      open()
+    }
+    else {
+      close()
+    }
+  }, [visible])
+
+  /* ================== 布局样式 ================== */
+  useEffect(() => {
+    switch (menuPosition) {
+      case 'left':
+        setMenuPositionStyle({
+          flex: 1,
+          backgroundColor: '#fff',
+          borderTopRightRadius: isCircle ? CircleNum : 0,
+          borderBottomRightRadius: isCircle ? CircleNum : 0,
+        })
+        setDrawerMenuBox({
+          width: Height,
+          height: WINDOW.height,
+          position: 'absolute',
+          left: 0,
+          top: 0,
+        })
+        break
+
+      case 'right':
+        setMenuPositionStyle({
+          flex: 1,
+          backgroundColor: '#fff',
+          borderTopLeftRadius: isCircle ? CircleNum : 0,
+          borderBottomLeftRadius: isCircle ? CircleNum : 0,
+        })
+        setDrawerMenuBox({
+          width: Height,
+          height: WINDOW.height,
+          position: 'absolute',
+          right: 0,
+          top: 0,
+        })
+        break
+
+      case 'top':
+        setMenuPositionStyle({
+          flex: 1,
+          backgroundColor: '#fff',
+          borderBottomLeftRadius: isCircle ? CircleNum : 0,
+          borderBottomRightRadius: isCircle ? CircleNum : 0,
+        })
+        setDrawerMenuBox({
+          width: WINDOW.width,
+          height: Height,
+          position: 'absolute',
+          top: 0,
+          right: 0,
+        })
+        break
+
+      case 'bottom':
+      default:
+        setMenuPositionStyle({
+          flex: 1,
+          backgroundColor: '#fff',
+          borderTopLeftRadius: isCircle ? CircleNum : 0,
+          borderTopRightRadius: isCircle ? CircleNum : 0,
+        })
+        setDrawerMenuBox({
+          width: WINDOW.width,
+          height: Height,
+          position: 'absolute',
+          bottom: 0,
+          right: 0,
+        })
+        break
+    }
+  }, [menuPosition, Height, isCircle, CircleNum])
+
+  /* ================== 动画 ================== */
+  const open = () => {
+    Animated.timing(anim, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+    }).start()
+  }
+
+  const close = () => {
+    Animated.timing(anim, {
+      toValue: 0,
+      duration,
+      useNativeDriver: true,
+    }).start(({ finished }) => {
+      if (finished) {
+        setInnerVisible(false)
+        hideModal()
+      }
+    })
+  }
+
+  /* ================== 位移 ================== */
+  const getTransform = useCallback(() => {
+    switch (menuPosition) {
+      case 'left':
+        return {
+          translateX: anim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [-WINDOW.width, 0],
+          }),
+        }
+      case 'right':
+        return {
+          translateX: anim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [WINDOW.width, 0],
+          }),
+        }
+      case 'top':
+        return {
+          translateY: anim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [-WINDOW.height, 0],
+          }),
+        }
+      case 'bottom':
+      default:
+        return {
+          translateY: anim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [WINDOW.height, 0],
+          }),
+        }
+    }
+  }, [menuPosition])
+
+  if (!innerVisible)
+    return null
+
+  return (
+    <Modal transparent visible animationType="none">
+      {/* 遮罩 */}
+      <TouchableWithoutFeedback onPress={() => isShadowHideModal && close()}>
+        <Animated.View
+          style={[
+            styles.mask,
+            {
+              opacity: anim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, 0.5],
+              }),
+            },
+          ]}
+        />
+      </TouchableWithoutFeedback>
+
+      {/* Drawer */}
+      <View style={drawerMenuBox}>
+        <Animated.View
+          style={[
+            styles.container,
+            {
+              transform: [getTransform()],
+            },
+          ]}
+        >
+          <View style={menuPositionStyle}>
+            {menuPosition !== 'bottom' && (
+              <View style={{ paddingTop: Platform.OS === 'ios' ? 50 : 0 }} />
+            )}
+
+            <View style={styles.headTitle}>
+              <Text style={styles.title}>{title}</Text>
+              <LucideIcon
+                icon="X"
+                size={24}
+                color="black"
+                style={{ position: 'absolute', right: 15, top: 11 }}
+                onPress={close}
+              />
+            </View>
+
+            {children}
+          </View>
+        </Animated.View>
+      </View>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  mask: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#000',
+  },
+  container: {
+    height: '100%',
+    width: '100%',
+    position: 'absolute',
+  },
+  headTitle: {
+    height: 40,
+    width: '100%',
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+  },
+})