Merge pull request #516 from nullptr-z/dev

ChenlingasMx · web-flow · commit a64f4ac1db51 · 2023-02-20T16:56:44.000+08:00
refactor(Drawer): 使用Function组件重构 Class组件
diff --git a/packages/core/src/Drawer/index.tsx b/packages/core/src/Drawer/index.tsx
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import {
   Animated,
   StyleSheet,
@@ -32,129 +32,10 @@ export interface DrawerState {
   isOpen: boolean;
 }
 
-export default class Drawer extends Component<DrawerProps, DrawerState> {
-  static defaultProps = {
-    placement: 'left',
-    drawerBackgroundColor: '#fff',
-    drawerWidth: 300,
-    drawerHeight: 500,
-    maskClosable: true,
-    isOpen: false,
-    onChange: () => null,
-    openDrawer: () => null,
-    closeDrawer: () => null,
-  };
-  constructor(props: DrawerProps) {
-    super(props);
-
-    this.state = {
-      zIndexValue: 0,
-      overlayValue: new Animated.Value(0),
-      drawerValue: new Animated.ValueXY({ ...this.getInitPosition() }),
-      isOpen: !!props.isOpen,
-    };
-  }
-  handleDrawer = debounce((isOpen: boolean) => {
-    isOpen ? this.openDrawer() : this.closeDrawer();
-  }, 100);
-
-  componentDidUpdate(prevProps: DrawerProps, prevState: DrawerState) {
-    if (prevState.isOpen !== this.state.isOpen) {
-      this.handleDrawer(this.state.isOpen);
-    }
-    if (prevProps.isOpen !== this.props.isOpen) {
-      this.handleDrawer(!!this.props.isOpen);
-    }
-  }
-  componentDidMount() {
-    if (this.props.isOpen) {
-      this.openDrawer();
-    }
-  }
-
-  onOverlayClick = (e: GestureResponderEvent) => {
-    const { maskClosable } = this.props;
-    if (!maskClosable) {
-      return false;
-    }
-    e.stopPropagation();
-    this.closeDrawer();
-  };
-  render() {
-    const { style, drawerWidth, drawerBackgroundColor, maskProps, placement, drawerHeight } = this.props;
-    const { isOpen, drawerValue, overlayValue, zIndexValue } = this.state;
-    const isTopOrBottom = placement === 'top' || placement === 'bottom';
-    const changeStyle = isTopOrBottom ? 'height' : 'width';
-    const dynamicDrawerStyles: any = {
-      backgroundColor: drawerBackgroundColor,
-    };
-
-    if (isTopOrBottom) {
-      dynamicDrawerStyles.top = placement === 'top' ? 0 : null;
-      dynamicDrawerStyles.bottom = placement === 'bottom' ? 0 : null;
-      dynamicDrawerStyles.height = drawerWidth;
-      dynamicDrawerStyles.width = '100%';
-    } else {
-      dynamicDrawerStyles.left = placement === 'left' ? 0 : null;
-      dynamicDrawerStyles.right = placement === 'right' ? 0 : null;
-      dynamicDrawerStyles.width = drawerWidth;
-    }
-
-    const overlayOpacity = overlayValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 0.3],
-      extrapolate: 'clamp',
-    });
-    return (
-      <Fragment>
-        <Animated.View
-          style={[
-            styles.drawer,
-            dynamicDrawerStyles,
-            style,
-            // eslint-disable-next-line
-            {
-              [changeStyle]: isOpen ? (isTopOrBottom ? drawerHeight : drawerWidth) : 0,
-              transform: [
-                { translateX: drawerValue.x }, // x轴移动
-                { translateY: drawerValue.y }, // y轴移动
-              ],
-            },
-          ]}
-        >
-          {this.props.children}
-        </Animated.View>
-        <Animated.View
-          pointerEvents={isOpen ? 'auto' : 'none'}
-          style={[
-            styles.overlay,
-            styles.positionFull,
-            maskProps,
-            {
-              // opacity: overlayValue,
-              opacity: overlayOpacity,
-              zIndex: zIndexValue,
-            },
-          ]}
-        >
-          <TouchableOpacity
-            style={[
-              styles.positionFull,
-              // eslint-disable-next-line
-              {
-                zIndex: 3003,
-                position: 'absolute',
-              },
-            ]}
-            onPress={this.onOverlayClick.bind(this)}
-          />
-        </Animated.View>
-      </Fragment>
-    );
-  }
-
-  getInitPosition() {
-    const { drawerWidth, placement, drawerHeight } = this.props;
+export default function Drawer(props: DrawerProps) {
+  console.log(333);
+  const getInitPosition = () => {
+    const { drawerWidth, placement, drawerHeight } = props;
     const xy = { x: 0, y: 0 };
     if (placement === 'left') {
       xy.x = -(drawerWidth || 0);
@@ -169,30 +50,38 @@ export default class Drawer extends Component<DrawerProps, DrawerState> {
       xy.y = DEVICE_HEIGHT || 0;
     }
     return xy;
-  }
-  openDrawer() {
-    this.setState({ zIndexValue: 3002, isOpen: true });
+  };
+
+  const [state, setState] = useState({
+    zIndexValue: 0,
+    overlayValue: new Animated.Value(0),
+    drawerValue: new Animated.ValueXY({ ...getInitPosition() }),
+    isOpen: !!props.isOpen,
+  });
+
+  const openDrawer = () => {
+    setState({ ...state, zIndexValue: 3002, isOpen: true });
     Animated.parallel([
-      Animated.spring(this.state.drawerValue, {
+      Animated.spring(state.drawerValue, {
         toValue: { x: 0, y: 0 },
         overshootClamping: true,
         useNativeDriver: true,
       }),
-      Animated.spring(this.state.overlayValue, {
+      Animated.spring(state.overlayValue, {
         toValue: 0.7,
         overshootClamping: true,
         useNativeDriver: true,
       }),
     ]).start(() => {
-      this.props.openDrawer!(true);
-      this.props.onChange!(true);
+      props.openDrawer!(true);
+      props.onChange!(true);
     });
-  }
-  closeDrawer() {
-    const { drawerValue, overlayValue } = this.state;
+  };
+  const closeDrawer = () => {
+    const { drawerValue, overlayValue } = state;
     Animated.parallel([
       Animated.spring(drawerValue, {
-        toValue: { ...this.getInitPosition() },
+        toValue: { ...getInitPosition() },
         overshootClamping: true,
         useNativeDriver: true,
       }),
@@ -202,13 +91,124 @@ export default class Drawer extends Component<DrawerProps, DrawerState> {
         useNativeDriver: true,
       }),
     ]).start(() => {
-      this.props.closeDrawer!(false);
-      this.props.onChange!(false);
-      this.setState({ zIndexValue: 0, isOpen: false });
+      props.closeDrawer!(false);
+      props.onChange!(false);
+      setState({ ...state, zIndexValue: 0, isOpen: false });
     });
+  };
+
+  const handleDrawer = debounce((isOpen: boolean) => {
+    isOpen ? openDrawer() : closeDrawer();
+  }, 100);
+
+  useEffect(() => {
+    handleDrawer(state.isOpen);
+  }, [state.isOpen]);
+
+  useEffect(() => {
+    handleDrawer(!!props.isOpen);
+  }, [props.isOpen]);
+
+  useEffect(() => {
+    if (props.isOpen) {
+      openDrawer();
+    }
+  }, []);
+
+  const onOverlayClick = (e: GestureResponderEvent) => {
+    const { maskClosable } = props;
+    if (!maskClosable) {
+      return false;
+    }
+    e.stopPropagation();
+    closeDrawer();
+  };
+
+  const { style, drawerWidth, drawerBackgroundColor, maskProps, placement, drawerHeight } = props;
+  const { isOpen, drawerValue, overlayValue, zIndexValue } = state;
+  const isTopOrBottom = placement === 'top' || placement === 'bottom';
+  const changeStyle = isTopOrBottom ? 'height' : 'width';
+  const dynamicDrawerStyles: any = {
+    backgroundColor: drawerBackgroundColor,
+  };
+
+  if (isTopOrBottom) {
+    dynamicDrawerStyles.top = placement === 'top' ? 0 : null;
+    dynamicDrawerStyles.bottom = placement === 'bottom' ? 0 : null;
+    dynamicDrawerStyles.height = drawerWidth;
+    dynamicDrawerStyles.width = '100%';
+  } else {
+    dynamicDrawerStyles.left = placement === 'left' ? 0 : null;
+    dynamicDrawerStyles.right = placement === 'right' ? 0 : null;
+    dynamicDrawerStyles.width = drawerWidth;
   }
+
+  const overlayOpacity = overlayValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 0.3],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <Fragment>
+      <Animated.View
+        style={[
+          styles.drawer,
+          dynamicDrawerStyles,
+          style,
+          // eslint-disable-next-line
+          {
+            [changeStyle]: isOpen ? (isTopOrBottom ? drawerHeight : drawerWidth) : 0,
+            transform: [
+              { translateX: drawerValue.x }, // x轴移动
+              { translateY: drawerValue.y }, // y轴移动
+            ],
+          },
+        ]}
+      >
+        {props.children}
+      </Animated.View>
+      <Animated.View
+        pointerEvents={isOpen ? 'auto' : 'none'}
+        style={[
+          styles.overlay,
+          styles.positionFull,
+          maskProps,
+          {
+            // opacity: overlayValue,
+            opacity: overlayOpacity,
+            zIndex: zIndexValue,
+          },
+        ]}
+      >
+        <TouchableOpacity
+          style={[
+            styles.positionFull,
+            // eslint-disable-next-line
+            {
+              zIndex: 3003,
+              position: 'absolute',
+            },
+          ]}
+          onPress={onOverlayClick}
+        />
+      </Animated.View>
+    </Fragment>
+  );
 }
 
+Drawer.defaultProps = {
+  placement: 'left',
+  drawerBackgroundColor: '#fff',
+  drawerWidth: 300,
+  drawerHeight: 500,
+  maskClosable: true,
+  isOpen: false,
+  onChange: () => null,
+  openDrawer: () => null,
+  closeDrawer: () => null,
+} as DrawerProps;
+
 const styles = StyleSheet.create({
   drawer: {
     position: 'absolute',
