zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-31 17:53:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] pointerEvents CSS

Browse Source 
Fix #513
This commit is contained in:
Nicolas Gallagher
2017-06-11 14:04:30 -07:00
parent 6ae68e948f
commit d13f78622b
6 changed files with 82 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/View.md
+4 -4
View File
@@ -132,15 +132,15 @@ Controls whether the View can be the target of touch events. The enhanced
`box-none` is the equivalent of: `box-none` is the equivalent of:
```css ```css
.box-none { pointer-events: none } .box-none { pointer-events: none !important; }
.box-none * { pointer-events: auto } .box-none > * { pointer-events: auto; }
``` ```
`box-only` is the equivalent of: `box-only` is the equivalent of:
```css ```css
.box-only { pointer-events: auto } .box-only { pointer-events: auto !important; }
.box-only * { pointer-events: none } .box-only > * { pointer-events: none; }
``` ```
**style**: ?style **style**: ?style
docs/storybook/components/View/ViewExample.js
+47 -29
View File
@@ -1,5 +1,3 @@
/* eslint-disable react/prefer-es6-class */
/** /**
* Copyright (c) 2013-present, Facebook, Inc. * Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved. * All rights reserved.
@@ -23,12 +21,15 @@
* @flow * @flow
*/ */
import createReactClass from 'create-react-class';
import React from 'react'; import React from 'react';
import { storiesOf } from '@kadira/storybook'; import { storiesOf } from '@kadira/storybook';
import UIExplorer from '../../UIExplorer'; import UIExplorer from '../../UIExplorer';
import ViewTransformsExample from './ViewTransformsExample'; 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({ const styles = StyleSheet.create({
box: { box: {
@@ -55,12 +56,10 @@ const styles = StyleSheet.create({
} }
}); });
const ViewBorderStyleExample = createReactClass({ class ViewBorderStyleExample extends React.Component {
getInitialState() { state = {
return { showBorder: true
showBorder: true };
};
},
render() { render() {
return ( return (
@@ -93,19 +92,17 @@ const ViewBorderStyleExample = createReactClass({
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
); );
}, }
_handlePress() { _handlePress() {
this.setState({ showBorder: !this.state.showBorder }); this.setState({ showBorder: !this.state.showBorder });
} }
}); }
const ZIndexExample = createReactClass({ class ZIndexExample extends React.Component {
getInitialState() { state = {
return { flipped: false
flipped: false };
};
},
render() { render() {
const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1]; const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
@@ -148,17 +145,17 @@ const ZIndexExample = createReactClass({
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
); );
}, }
_handlePress() { _handlePress() {
this.setState({ flipped: !this.state.flipped }); this.setState({ flipped: !this.state.flipped });
} }
}); }
const examples = [ const examples = [
{ {
title: 'Background Color', title: 'Background Color',
render: function() { render() {
return ( return (
<View style={{ backgroundColor: '#527FE4', padding: 5 }}> <View style={{ backgroundColor: '#527FE4', padding: 5 }}>
<Text style={{ fontSize: 11 }}> <Text style={{ fontSize: 11 }}>
@@ -170,7 +167,7 @@ const examples = [
}, },
{ {
title: 'Border', title: 'Border',
render: function() { render() {
return ( return (
<View style={{ borderColor: '#527FE4', borderWidth: 5, padding: 10 }}> <View style={{ borderColor: '#527FE4', borderWidth: 5, padding: 10 }}>
<Text style={{ fontSize: 11 }}>5px blue border</Text> <Text style={{ fontSize: 11 }}>5px blue border</Text>
@@ -180,7 +177,7 @@ const examples = [
}, },
{ {
title: 'Padding/Margin', title: 'Padding/Margin',
render: function() { render() {
return ( return (
<View style={{ borderColor: '#bb0000', borderWidth: 0.5 }}> <View style={{ borderColor: '#bb0000', borderWidth: 0.5 }}>
<View style={[styles.box, { padding: 5 }]}> <View style={[styles.box, { padding: 5 }]}>
@@ -203,7 +200,7 @@ const examples = [
}, },
{ {
title: 'Border Radius', title: 'Border Radius',
render: function() { render() {
return ( return (
<View style={{ borderWidth: 0.5, borderRadius: 5, padding: 5 }}> <View style={{ borderWidth: 0.5, borderRadius: 5, padding: 5 }}>
<Text style={{ fontSize: 11 }}> <Text style={{ fontSize: 11 }}>
@@ -217,19 +214,19 @@ const examples = [
}, },
{ {
title: 'Border Style', title: 'Border Style',
render: function() { render() {
return <ViewBorderStyleExample />; return <ViewBorderStyleExample />;
} }
}, },
{ {
title: 'Circle with Border Radius', title: 'Circle with Border Radius',
render: function() { render() {
return <View style={{ borderRadius: 10, borderWidth: 1, width: 20, height: 20 }} />; return <View style={{ borderRadius: 10, borderWidth: 1, width: 20, height: 20 }} />;
} }
}, },
{ {
title: 'Overflow', title: 'Overflow',
render: function() { render() {
return ( return (
<View style={{ flexDirection: 'row' }}> <View style={{ flexDirection: 'row' }}>
<View <View
@@ -257,7 +254,7 @@ const examples = [
}, },
{ {
title: 'Opacity', title: 'Opacity',
render: function() { render() {
return ( return (
<View> <View>
<View style={{ opacity: 0 }}><Text>Opacity 0</Text></View> <View style={{ opacity: 0 }}><Text>Opacity 0</Text></View>
@@ -273,10 +270,31 @@ const examples = [
}, },
{ {
title: 'ZIndex', title: 'ZIndex',
render: function() { render() {
return <ZIndexExample />; 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', title: 'Basic shadow',
render() { render() {
src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap
+6 -6
View File
@@ -16,12 +16,12 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;} input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}} @keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}} @keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}}
.rn-pointerEvents-105ug2t{pointer-events:auto;} .rn-pointerEvents-105ug2t{pointer-events:auto !important;}
.rn-pointerEvents-12vffkv{pointer-events:none;} .rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
.rn-pointerEvents-12vffkv *{pointer-events:auto;} .rn-pointerEvents-633pao{pointer-events:none !important;}
.rn-pointerEvents-ah5dr5{pointer-events:auto;} .rn-pointerEvents-12vffkv{pointer-events:none !important;}
.rn-pointerEvents-ah5dr5 *{pointer-events:none;} .rn-pointerEvents-12vffkv > *{pointer-events:auto;}
.rn-pointerEvents-633pao{pointer-events:none;} .rn-pointerEvents-ah5dr5 > *{pointer-events:none;}
</style> </style>
<style id=\\"react-native-stylesheet\\"> <style id=\\"react-native-stylesheet\\">
.rn-bottom-1p0dtai{bottom:0px} .rn-bottom-1p0dtai{bottom:0px}
src/apis/StyleSheet/StyleManager.js
+7 -6
View File
@@ -25,13 +25,14 @@ const pointerEvents = {
none: createClassName('pointerEvents', 'none') none: createClassName('pointerEvents', 'none')
}; };
// See #513
const pointerEventsCss = const pointerEventsCss =
`.${pointerEvents.auto}{pointer-events:auto;}\n` + `.${pointerEvents.auto}{pointer-events:auto !important;}\n` +
`.${pointerEvents.boxNone}{pointer-events:none;}\n` + `.${pointerEvents.boxOnly}{pointer-events:auto !important;}\n` +
`.${pointerEvents.boxNone} *{pointer-events:auto;}\n` + `.${pointerEvents.none}{pointer-events:none !important;}\n` +
`.${pointerEvents.boxOnly}{pointer-events:auto;}\n` + `.${pointerEvents.boxNone}{pointer-events:none !important;}\n` +
`.${pointerEvents.boxOnly} *{pointer-events:none;}\n` + `.${pointerEvents.boxNone} > *{pointer-events:auto;}\n` +
`.${pointerEvents.none}{pointer-events:none;}`; `.${pointerEvents.boxOnly} > *{pointer-events:none;}`;
export default class StyleManager { export default class StyleManager {
constructor() { constructor() {
src/apis/StyleSheet/__tests__/__snapshots__/StyleManager-test.js.snap
+12 -12
View File
@@ -10,12 +10,12 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;} input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}} @keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}} @keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}}
.rn-pointerEvents-105ug2t{pointer-events:auto;} .rn-pointerEvents-105ug2t{pointer-events:auto !important;}
.rn-pointerEvents-12vffkv{pointer-events:none;} .rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
.rn-pointerEvents-12vffkv *{pointer-events:auto;} .rn-pointerEvents-633pao{pointer-events:none !important;}
.rn-pointerEvents-ah5dr5{pointer-events:auto;} .rn-pointerEvents-12vffkv{pointer-events:none !important;}
.rn-pointerEvents-ah5dr5 *{pointer-events:none;} .rn-pointerEvents-12vffkv > *{pointer-events:auto;}
.rn-pointerEvents-633pao{pointer-events:none;} .rn-pointerEvents-ah5dr5 > *{pointer-events:none;}
</style> </style>
<style id=\\"react-native-stylesheet\\"> <style id=\\"react-native-stylesheet\\">
@@ -30,12 +30,12 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;} input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}} @keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}} @keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}}
.rn-pointerEvents-105ug2t{pointer-events:auto;} .rn-pointerEvents-105ug2t{pointer-events:auto !important;}
.rn-pointerEvents-12vffkv{pointer-events:none;} .rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
.rn-pointerEvents-12vffkv *{pointer-events:auto;} .rn-pointerEvents-633pao{pointer-events:none !important;}
.rn-pointerEvents-ah5dr5{pointer-events:auto;} .rn-pointerEvents-12vffkv{pointer-events:none !important;}
.rn-pointerEvents-ah5dr5 *{pointer-events:none;} .rn-pointerEvents-12vffkv > *{pointer-events:auto;}
.rn-pointerEvents-633pao{pointer-events:none;} .rn-pointerEvents-ah5dr5 > *{pointer-events:none;}
</style> </style>
<style id=\\"react-native-stylesheet\\"> <style id=\\"react-native-stylesheet\\">
.rn-width-b8lwoo{width:100px} .rn-width-b8lwoo{width:100px}
src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap
+6 -6
View File
@@ -8,12 +8,12 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;} input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}} @keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}} @keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);}100%{-webkit-transform:translateX(400%);transform:translateX(400%);}}
.rn-pointerEvents-105ug2t{pointer-events:auto;} .rn-pointerEvents-105ug2t{pointer-events:auto !important;}
.rn-pointerEvents-12vffkv{pointer-events:none;} .rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
.rn-pointerEvents-12vffkv *{pointer-events:auto;} .rn-pointerEvents-633pao{pointer-events:none !important;}
.rn-pointerEvents-ah5dr5{pointer-events:auto;} .rn-pointerEvents-12vffkv{pointer-events:none !important;}
.rn-pointerEvents-ah5dr5 *{pointer-events:none;} .rn-pointerEvents-12vffkv > *{pointer-events:auto;}
.rn-pointerEvents-633pao{pointer-events:none;} .rn-pointerEvents-ah5dr5 > *{pointer-events:none;}
</style> </style>
<style id=\\"react-native-stylesheet\\"> <style id=\\"react-native-stylesheet\\">
.rn-bottom-1p0dtai{bottom:0px} .rn-bottom-1p0dtai{bottom:0px}