fix: startPos may be undefined (#194)

* fix: startPos may be undefined

* feat: add multi-touch test case

Co-authored-by: afc163 <[email protected]>

Author: mufengfang

src/DrawerChild.tsx

@@ -25,6 +25,11 @@ interface IState {
   prevProps?: IDrawerChildProps;
 }
 
+interface Point {
+  x: number;
+  y: number;
+}
+
 class DrawerChild extends React.Component<IDrawerChildProps, IState> {
   public static getDerivedStateFromProps(
     props: IDrawerChildProps,
@@ -64,10 +69,7 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
 
   private passive: { passive: boolean } | boolean;
 
-  private startPos: {
-    x: number;
-    y: number;
-  };
+  private startPos: Point | null;
 
   constructor(props: IDrawerChildProps) {
     super(props);
@@ -158,6 +160,8 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
 
   private removeStartHandler = (e: React.TouchEvent | TouchEvent) => {
     if (e.touches.length > 1) {
+      // need clear the startPos when another touch event happens
+      this.startPos = null;
       return;
     }
     this.startPos = {
@@ -167,6 +171,7 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
   };
 
   private removeMoveHandler = (e: React.TouchEvent | TouchEvent) => {
+    // the startPos may be null or undefined
     if (e.changedTouches.length > 1 || !this.startPos) {
       return;
     }

tests/index.spec.tsx

@@ -3,6 +3,11 @@ import * as React from 'react';
 import toJson from 'enzyme-to-json';
 import Drawer from '../src';
 
+interface Point {
+  x: number;
+  y: number;
+}
+
 function Div(props) {
   const { show, ...otherProps } = props;
   return (
@@ -44,6 +49,18 @@ function createMoveTouchEventObject({ x = 0, y = 0 }) {
   };
 }
 
+function createMultiStartTouchEventObject(points: Point[]) {
+  return { touches: points.map(point => createClientXY(point.x, point.y)) };
+}
+
+function createMultiMoveTouchEventObject(points: Point[]) {
+  const touches = points.map(point => createClientXY(point.x, point.y));
+  return {
+    touches,
+    changedTouches: touches,
+  };
+}
+
 describe('rc-drawer-menu', () => {
   let instance;
   it('single drawer', () => {
@@ -90,6 +107,27 @@ describe('rc-drawer-menu', () => {
     content.simulate('touchStart', createStartTouchEventObject({ x: 0, y: 0 }));
     content.simulate('touchMove', createMoveTouchEventObject({ x: 0, y: 10 }));
     content.simulate('touchEnd', createMoveTouchEventObject({ x: 0, y: 10 }));
+    content.simulate(
+      'touchStart',
+      createMultiStartTouchEventObject([
+        { x: 0, y: 0 },
+        { x: 100, y: 100 },
+      ]),
+    );
+    content.simulate(
+      'touchMove',
+      createMultiMoveTouchEventObject([
+        { x: 0, y: 10 },
+        { x: 100, y: 120 },
+      ]),
+    );
+    content.simulate(
+      'touchEnd',
+      createMultiMoveTouchEventObject([
+        { x: 0, y: 10 },
+        { x: 100, y: 120 },
+      ]),
+    );
     console.log('transform is empty:', drawer.style.transform);
     expect(drawer.style.transform).toEqual('');
   });