1.2.0 #251

oblador · Oct 7, 2018 · a642c66 · a642c66
2 parents 082c77b + 482e0c0
commit a642c66
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 6 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+8.11.3
diff --git a/Collapsible.js b/Collapsible.js
@@ -10,6 +10,7 @@ export default class Collapsible extends Component {
     align: PropTypes.oneOf(['top', 'center', 'bottom']),
     collapsed: PropTypes.bool,
     collapsedHeight: PropTypes.number,
+    enablePointerEvents: PropTypes.bool,
     duration: PropTypes.number,
     easing: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     style: ViewPropTypes.style,
@@ -21,6 +22,7 @@ export default class Collapsible extends Component {
     align: 'top',
     collapsed: true,
     collapsedHeight: 0,
+    enablePointerEvents: false,
     duration: 300,
     easing: 'easeOutCubic',
     onAnimationEnd: () => null,
@@ -47,6 +49,10 @@ export default class Collapsible extends Component {
     }
   }
 
+  componentWillUnmount() {
+    this.unmounted = true;
+  }
+
   _componentDidUpdate(prevProps) {
     if (prevProps.collapsed !== this.props.collapsed) {
       this._toggleCollapsed(this.props.collapsed);
@@ -144,9 +150,17 @@ export default class Collapsible extends Component {
       toValue: height,
       duration,
       easing,
-    }).start(() =>
-      this.setState({ animating: false }, this.props.onAnimationEnd)
-    );
+    }).start(() => {
+      if (this.unmounted) {
+        return;
+      }
+      this.setState({ animating: false }, () => {
+        if (this.unmounted) {
+          return;
+        }
+        this.props.onAnimationEnd();
+      });
+    });
   }
 
   _handleLayoutChange = event => {
@@ -165,7 +179,7 @@ export default class Collapsible extends Component {
   };
 
   render() {
-    const { collapsed } = this.props;
+    const { collapsed, enablePointerEvents } = this.props;
     const { height, contentHeight, measuring, measured } = this.state;
     const hasKnownHeight = !measuring && (measured || collapsed);
     const style = hasKnownHeight && {
@@ -196,7 +210,10 @@ export default class Collapsible extends Component {
       ];
     }
     return (
-      <Animated.View style={style} pointerEvents={collapsed ? 'none' : 'auto'}>
+      <Animated.View
+        style={style}
+        pointerEvents={!enablePointerEvents && collapsed ? 'none' : 'auto'}
+      >
         <Animated.View
           ref={this._handleRef}
           style={[this.props.style, contentStyle]}

diff --git a/README.md b/README.md
@@ -26,6 +26,7 @@ import Collapsible from 'react-native-collapsible';
 | **`align`**           | Alignment of the content when transitioning, can be `top`, `center` or `bottom`                                                                                                                                                                                                                                         | `top`          |
 | **`collapsed`**       | Whether to show the child components or not                                                                                                                                                                                                                                                                             | `true`         |
 | **`collapsedHeight`** | Which height should the component collapse to                                                                                                                                                                                                                                                                           | `0`            |
+| **`enablePointerEvents`** | Enable pointer events on collapsed view                                                                                                                                                                                                                                                                              | `false`        |
 | **`duration`**        | Duration of transition in milliseconds                                                                                                                                                                                                                                                                                  | `300`          |
 | **`easing`**          | Function or function name from [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) (or [`tween-functions`](https://github.com/chenglou/tween-functions) if < RN 0.8). Collapsible will try to combine `Easing` functions for you if you name them like `tween-functions`. | `easeOutCubic` |
 | **`style`**           | Optional styling for the container                                                                                                                                                                                                                                                                                      |                |

diff --git a/index.d.ts b/index.d.ts
@@ -63,6 +63,13 @@ export interface CollapsibleProps {
    */
   duration?: number;
 
+  /**
+   * Enable pointer events on collapsed view
+   * 
+   * @default false
+   */
+  enablePointerEvents?: boolean;
+
   /**
    * Function or function name from Easing (or tween-functions if < RN 0.8). Collapsible will try to combine Easing functions for you if you name them like tween-functions
    *

diff --git a/package.json b/package.json
@@ -1,12 +1,15 @@
 {
   "name": "react-native-collapsible",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Animated collapsible component for React Native using the Animated API. Good for accordions, toggles etc",
   "main": "Collapsible.js",
   "types": "index.d.ts",
   "scripts": {
     "test": "eslint *.js"
   },
+  "engines": {
+    "node": "^6.14.0 || ^8.10.0 || >=9.10.0"
+  },
   "keywords": [
     "react-native",
     "react-component",