[fix] pointerEvents CSS

Fix #513

docs/components/View.md

@@ -132,15 +132,15 @@ Controls whether the View can be the target of touch events. The enhanced
 `box-none` is the equivalent of:
 
 ```css
-.box-none { pointer-events: none }
-.box-none * { pointer-events: auto }
+.box-none { pointer-events: none !important; }
+.box-none > * { pointer-events: auto; }
 ```
 
 `box-only` is the equivalent of:
 
 ```css
-.box-only { pointer-events: auto }
-.box-only * { pointer-events: none }
+.box-only { pointer-events: auto !important; }
+.box-only > * { pointer-events: none; }
 ```
 
 **style**: ?style

docs/storybook/components/View/ViewExample.js

@@ -1,5 +1,3 @@
-/* eslint-disable react/prefer-es6-class */
-
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  * All rights reserved.
@@ -23,12 +21,15 @@
  * @flow
  */
 
-import createReactClass from 'create-react-class';
 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
 import UIExplorer from '../../UIExplorer';
 import ViewTransformsExample from './ViewTransformsExample';
-import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
+import { StyleSheet, Text, TouchableHighlight, TouchableWithoutFeedback, View } from 'react-native';
+
+const logger = e => {
+  console.log(e.nativeEvent);
+};
 
 const styles = StyleSheet.create({
   box: {
@@ -55,12 +56,10 @@ const styles = StyleSheet.create({
   }
 });
 
-const ViewBorderStyleExample = createReactClass({
-  getInitialState() {
-    return {
-      showBorder: true
-    };
-  },
+class ViewBorderStyleExample extends React.Component {
+  state = {
+    showBorder: true
+  };
 
   render() {
     return (
@@ -93,19 +92,17 @@ const ViewBorderStyleExample = createReactClass({
         </View>
       </TouchableWithoutFeedback>
     );
-  },
+  }
 
   _handlePress() {
     this.setState({ showBorder: !this.state.showBorder });
   }
-});
+}
 
-const ZIndexExample = createReactClass({
-  getInitialState() {
-    return {
-      flipped: false
-    };
-  },
+class ZIndexExample extends React.Component {
+  state = {
+    flipped: false
+  };
 
   render() {
     const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
@@ -148,17 +145,17 @@ const ZIndexExample = createReactClass({
         </View>
       </TouchableWithoutFeedback>
     );
-  },
+  }
 
   _handlePress() {
     this.setState({ flipped: !this.state.flipped });
   }
-});
+}
 
 const examples = [
   {
     title: 'Background Color',
-    render: function() {
+    render() {
       return (
         <View style={{ backgroundColor: '#527FE4', padding: 5 }}>
           <Text style={{ fontSize: 11 }}>
@@ -170,7 +167,7 @@ const examples = [
   },
   {
     title: 'Border',
-    render: function() {
+    render() {
       return (
         <View style={{ borderColor: '#527FE4', borderWidth: 5, padding: 10 }}>
           <Text style={{ fontSize: 11 }}>5px blue border</Text>
@@ -180,7 +177,7 @@ const examples = [
   },
   {
     title: 'Padding/Margin',
-    render: function() {
+    render() {
       return (
         <View style={{ borderColor: '#bb0000', borderWidth: 0.5 }}>
           <View style={[styles.box, { padding: 5 }]}>
@@ -203,7 +200,7 @@ const examples = [
   },
   {
     title: 'Border Radius',
-    render: function() {
+    render() {
       return (
         <View style={{ borderWidth: 0.5, borderRadius: 5, padding: 5 }}>
           <Text style={{ fontSize: 11 }}>
@@ -217,19 +214,19 @@ const examples = [
   },
   {
     title: 'Border Style',
-    render: function() {
+    render() {
       return <ViewBorderStyleExample />;
     }
   },
   {
     title: 'Circle with Border Radius',
-    render: function() {
+    render() {
       return <View style={{ borderRadius: 10, borderWidth: 1, width: 20, height: 20 }} />;
     }
   },
   {
     title: 'Overflow',
-    render: function() {
+    render() {
       return (
         <View style={{ flexDirection: 'row' }}>
           <View
@@ -257,7 +254,7 @@ const examples = [
   },
   {
     title: 'Opacity',
-    render: function() {
+    render() {
       return (
         <View>
           <View style={{ opacity: 0 }}><Text>Opacity 0</Text></View>
@@ -273,10 +270,31 @@ const examples = [
   },
   {
     title: 'ZIndex',
-    render: function() {
+    render() {
       return <ZIndexExample />;
     }
   },
+  {
+    title: 'Pointer Events',
+    render() {
+      return (
+        <View pointerEvents="box-none">
+          <View pointerEvents="box-none">
+            <View pointerEvents="none"><Text onPress={logger}>none</Text></View>
+            <TouchableHighlight onPress={logger} pointerEvents="auto">
+              <Text>auto</Text>
+            </TouchableHighlight>
+            <TouchableHighlight onPress={logger} pointerEvents="box-only">
+              <Text>box-only</Text>
+            </TouchableHighlight>
+            <TouchableHighlight onPress={logger} pointerEvents="box-none">
+              <Text>box-none</Text>
+            </TouchableHighlight>
+          </View>
+        </View>
+      );
+    }
+  },
   {
     title: 'Basic shadow',
     render() {