bump 0.5.0, remove onTouchEnd

Author: jljsj33

README.md

@@ -64,9 +64,11 @@ ReactDom.render(
 | level     | string or array | `all` | With the drawer level element. `all`/ null / className / id / tagName / array |
 | levelTransition | string | `transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level css transition |
 | parent    | string | `body` | parent element. if is `null` use React.creactElement  | 
-| onChange  | function | null | change callback(open) |
-| onSwitch | function | null | icon or bg click function |
+| onChange  | func | null | change callback(open) |
+| onMaskClick | func | null | mask close click function |
+| onIconClick | func | nul  | icon click function |
 
+> 0.5 onSwitch split into `onMaskClick` `onIconClick`;
 
 ## Development
 

examples/change.js

@@ -27,6 +27,11 @@ class Demo extends React.Component {
     console.log(bool);
   }
   onTouchEnd = () => {
+    this.setState({
+      open: false,
+    });
+  }
+  onSwitch = () => {
     this.setState({
       open: !this.state.open,
     });
@@ -38,7 +43,7 @@ class Demo extends React.Component {
           width="240px"
           onChange={this.onChange}
           open={this.state.open}
-          onSwitch={this.onTouchEnd}
+          onMaskClick={this.onTouchEnd}
           iconChild={false}
           level={null}
         >
@@ -91,7 +96,7 @@ class Demo extends React.Component {
         >
           内容区块
           <button
-            onClick={this.onTouchEnd}
+            onClick={this.onSwitch}
             style={{ height: 24, width: 100, marginLeft: 20, color: '#000', lineHeight: '24px' }}
           >
             {!this.state.open ? '打开' : '关闭'}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-drawer-menu",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "drawer menu animation component for react",
   "keywords": [
     "react",

src/Drawer.jsx

@@ -20,7 +20,8 @@ class Drawer extends React.PureComponent {
     openClassName: PropTypes.string,
     iconChild: PropTypes.any,
     onChange: PropTypes.func,
-    onSwitch: PropTypes.func,
+    onMaskClick: PropTypes.func,
+    onIconClick: PropTypes.func,
   }
   static defaultProps = {
     className: 'drawer',
@@ -31,7 +32,8 @@ class Drawer extends React.PureComponent {
     level: 'all',
     levelTransition: 'transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86)',
     onChange: () => { },
-    onSwitch: () => { },
+    onMaskClick: () => { },
+    onIconClick: () => { },
     iconChild: (<i className="drawer-button-icon" />),
   }
 
@@ -109,7 +111,6 @@ class Drawer extends React.PureComponent {
   }
 
   onTouchEnd = (e, close) => {
-    this.props.onSwitch(e);
     if (this.props.open !== undefined) {
       return;
     }
@@ -123,7 +124,17 @@ class Drawer extends React.PureComponent {
     });
   }
 
-  touchStart = (e) => {
+  onMaskTouchEnd = (e) => {
+    this.props.onMaskClick(e);
+    this.onTouchEnd(e, true);
+  }
+
+  onIconTouchEnd = (e) => {
+    this.props.onSwitch(e);
+    this.onTouchEnd(e);
+  }
+
+  onScrollTouchStart = (e) => {
     if (e.touches.length > 1) {
       return;
     }
@@ -133,7 +144,8 @@ class Drawer extends React.PureComponent {
       y: touchs.pageY,
     };
   }
-  touchEnd = () => {
+
+  onScrollTouchEnd = () => {
     this.mousePos = null;
   }
 
@@ -234,7 +246,7 @@ class Drawer extends React.PureComponent {
 
   getChildToRender = () => {
     const open = this.props.open !== undefined ? this.props.open : this.state.open;
-    const { className, openClassName, placement, children, width, iconChild } = this.props;
+    const { className, style, openClassName, placement, children, width, iconChild } = this.props;
     const wrapperClassname = classnames(this.props.className, {
       [`${className}-${placement}`]: true,
       [openClassName]: open,
@@ -262,11 +274,10 @@ class Drawer extends React.PureComponent {
       }
     }
     return (
-      <div className={wrapperClassname}>
+      <div className={wrapperClassname} style={style}>
         <div
           className={`${className}-bg`}
-          onTouchEnd={(e) => { this.onTouchEnd(e, true); }}
-          onClick={(e) => { this.onTouchEnd(e, true); }}
+          onClick={this.onMaskTouchEnd}
         />
         <div
           className={`${className}-content-wrapper`}
@@ -277,8 +288,8 @@ class Drawer extends React.PureComponent {
         >
           <div
             className={`${className}-content`}
-            onTouchStart={this.touchStart}
-            onTouchEnd={this.touchEnd}
+            onTouchStart={this.onScrollTouchStart}
+            onTouchEnd={this.onScrollTouchEnd}
             ref={(c) => {
               this.contextDom = c;
             }}
@@ -288,7 +299,7 @@ class Drawer extends React.PureComponent {
           {iconChildToRender && (
             <div
               className={`${className}-button`}
-              onClick={(e) => { this.onTouchEnd(e); }}
+              onClick={this.onIconTouchEnd}
             >
               {iconChildToRender}
             </div>