fix #291: Drawer 主动关闭模态框的时候, 黑色蒙层并没有关掉也没有动画

Author: cuilanxin

example/examples/src/routes/Drawer/index.tsx

@@ -1,5 +1,5 @@
 import React, {useState, Fragment} from 'react';
-import {View, Text, Bott} from 'react-native';
+import {View, Text} from 'react-native';
 import {Button, Drawer, Spacing, WingBlank} from '@uiw/react-native';
 import Layout, {Container} from '../../Layout';
 import {ComProps} from '../../routes';

packages/core/src/Drawer/index.tsx

@@ -28,8 +28,6 @@ export interface DrawerState {
   drawerValue: Animated.ValueXY;
   overlayValue: Animated.Value;
   zIndexValue: number;
-  handleDrawer: (isOpen: boolean) => void;
-  control: 'props' | 'state';
   isOpen: boolean;
 }
 
@@ -45,35 +43,26 @@ export default class Drawer extends Component<DrawerProps, DrawerState> {
     openDrawer: () => null,
     closeDrawer: () => null,
   };
-  private handleDrawer: (isOpen: boolean) => void;
   constructor(props: DrawerProps) {
     super(props);
-    this.handleDrawer = (isOpen: boolean) => {
-      isOpen ? this.openDrawer() : this.closeDrawer();
-    };
+
     this.state = {
       zIndexValue: 0,
       overlayValue: new Animated.Value(0),
       drawerValue: new Animated.ValueXY({ ...this.getInitPosition() }),
-      handleDrawer: this.handleDrawer,
-      control: 'state',
       isOpen: !!props.isOpen,
     };
   }
-  static getDerivedStateFromProps(props: DrawerProps, state: DrawerState) {
-    if (state.control === 'state') {
-      return {
-        control: 'props',
-      };
+  handleDrawer = (isOpen: boolean) => {
+    isOpen ? this.openDrawer() : this.closeDrawer();
+  };
+  componentDidUpdate(prevProps: DrawerProps, prevState: DrawerState) {
+    if (prevState.isOpen !== this.state.isOpen) {
+      this.handleDrawer(this.state.isOpen);
     }
-    if (props.isOpen !== state.isOpen) {
-      state.handleDrawer(!!props.isOpen);
-      return {
-        isOpen: props.isOpen,
-        control: 'props',
-      };
+    if (prevProps.isOpen !== this.props.isOpen) {
+      this.handleDrawer(!!this.props.isOpen);
     }
-    return null;
   }
   componentDidMount() {
     if (this.props.isOpen) {
@@ -90,8 +79,8 @@ export default class Drawer extends Component<DrawerProps, DrawerState> {
     this.closeDrawer();
   };
   render() {
-    const { isOpen, style, drawerWidth, drawerBackgroundColor, maskProps, placement, drawerHeight } = this.props;
-    const { drawerValue, overlayValue, zIndexValue } = this.state;
+    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 = {
@@ -180,7 +169,7 @@ export default class Drawer extends Component<DrawerProps, DrawerState> {
     return xy;
   }
   openDrawer() {
-    this.setState({ zIndexValue: 3002, control: 'state' });
+    this.setState({ zIndexValue: 3002, isOpen: true });
     Animated.parallel([
       Animated.spring(this.state.drawerValue, {
         toValue: { x: 0, y: 0 },
@@ -213,7 +202,7 @@ export default class Drawer extends Component<DrawerProps, DrawerState> {
     ]).start(() => {
       this.props.closeDrawer!(false);
       this.props.onChange!(false);
-      this.setState({ zIndexValue: 0, control: 'state' });
+      this.setState({ zIndexValue: 0, isOpen: false });
     });
   }
 }

packages/core/src/Typography/README.md

@@ -5,7 +5,9 @@ Typography 排版
 
 [`H1~H6`](#标题) · [`<Del>`](#删除线) · [`<S>`](#删除线) · [`<U>`](#下划线) · [`<Strong>`](#加粗) · [`<P />`](#段落) · [`<Br />`](#换行) · [`<Hr />`](#水平线) · [`<Div />`](#div)
 
-## 标题
+### 基础示例
+
+### 标题
 
 ```jsx
 import { Fragment } from 'react';
@@ -25,7 +27,7 @@ function Demo() {
 }
 ```
 
-## 删除线
+### 删除线
 
 `<s>` 标签是 `<strike>` 标签的缩写版本
 
@@ -43,7 +45,7 @@ function Demo() {
 }
 ```
 
-## 下划线
+### 下划线
 
 ```jsx
 import { U } from '@uiw/react-native';
@@ -55,7 +57,7 @@ function Demo() {
 }
 ```
 
-## 加粗
+### 加粗
 
 ```jsx
 import { Strong } from '@uiw/react-native';
@@ -67,7 +69,7 @@ function Demo() {
 }
 ```
 
-## 换行
+### 换行
 
 ```jsx
 import { Text } from 'react-native';
@@ -80,7 +82,7 @@ function Demo() {
 }
 ```
 
-## 段落
+### 段落
 
 ```jsx
 import { Br } from '@uiw/react-native';
@@ -92,7 +94,7 @@ function Demo() {
 }
 ```
 
-## Div
+### Div
 
 ```jsx
 import { View, Text } from 'react-native';
@@ -112,7 +114,7 @@ function Demo() {
 }
 ```
 
-## 水平线
+### 水平线
 
 ```jsx
 import { View, Text } from 'react-native';