zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-23 14:57:13 +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:
```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
+47 -29
View File
@@ -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() {
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;}
@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%);}}
.rn-pointerEvents-105ug2t{pointer-events:auto;}
.rn-pointerEvents-12vffkv{pointer-events:none;}
.rn-pointerEvents-12vffkv *{pointer-events:auto;}
.rn-pointerEvents-ah5dr5{pointer-events:auto;}
.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
.rn-pointerEvents-633pao{pointer-events:none;}
.rn-pointerEvents-105ug2t{pointer-events:auto !important;}
.rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
.rn-pointerEvents-633pao{pointer-events:none !important;}
.rn-pointerEvents-12vffkv{pointer-events:none !important;}
.rn-pointerEvents-12vffkv > *{pointer-events:auto;}
.rn-pointerEvents-ah5dr5 > *{pointer-events:none;}
</style>
<style id=\\"react-native-stylesheet\\">
.rn-bottom-1p0dtai{bottom:0px}
src/apis/StyleSheet/StyleManager.js
+7 -6
View File
@@ -25,13 +25,14 @@ const pointerEvents = {
none: createClassName('pointerEvents', 'none')
};
// See #513
const pointerEventsCss =
`.${pointerEvents.auto}{pointer-events:auto;}\n` +
`.${pointerEvents.boxNone}{pointer-events:none;}\n` +
`.${pointerEvents.boxNone} *{pointer-events:auto;}\n` +
`.${pointerEvents.boxOnly}{pointer-events:auto;}\n` +
`.${pointerEvents.boxOnly} *{pointer-events:none;}\n` +
`.${pointerEvents.none}{pointer-events:none;}`;
`.${pointerEvents.auto}{pointer-events:auto !important;}\n` +
`.${pointerEvents.boxOnly}{pointer-events:auto !important;}\n` +
`.${pointerEvents.none}{pointer-events:none !important;}\n` +
`.${pointerEvents.boxNone}{pointer-events:none !important;}\n` +
`.${pointerEvents.boxNone} > *{pointer-events:auto;}\n` +
`.${pointerEvents.boxOnly} > *{pointer-events:none;}`;
export default class StyleManager {
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;}
@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%);}}
.rn-pointerEvents-105ug2t{pointer-events:auto;}
.rn-pointerEvents-12vffkv{pointer-events:none;}
.rn-pointerEvents-12vffkv *{pointer-events:auto;}
.rn-pointerEvents-ah5dr5{pointer-events:auto;}
.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
.rn-pointerEvents-633pao{pointer-events:none;}
.rn-pointerEvents-105ug2t{pointer-events:auto !important;}
.rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
.rn-pointerEvents-633pao{pointer-events:none !important;}
.rn-pointerEvents-12vffkv{pointer-events:none !important;}
.rn-pointerEvents-12vffkv > *{pointer-events:auto;}
.rn-pointerEvents-ah5dr5 > *{pointer-events:none;}
</style>
<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;}
@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%);}}
.rn-pointerEvents-105ug2t{pointer-events:auto;}
.rn-pointerEvents-12vffkv{pointer-events:none;}
.rn-pointerEvents-12vffkv *{pointer-events:auto;}
.rn-pointerEvents-ah5dr5{pointer-events:auto;}
.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
.rn-pointerEvents-633pao{pointer-events:none;}
.rn-pointerEvents-105ug2t{pointer-events:auto !important;}
.rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
.rn-pointerEvents-633pao{pointer-events:none !important;}
.rn-pointerEvents-12vffkv{pointer-events:none !important;}
.rn-pointerEvents-12vffkv > *{pointer-events:auto;}
.rn-pointerEvents-ah5dr5 > *{pointer-events:none;}
</style>
<style id=\\"react-native-stylesheet\\">
.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;}
@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%);}}
.rn-pointerEvents-105ug2t{pointer-events:auto;}
.rn-pointerEvents-12vffkv{pointer-events:none;}
.rn-pointerEvents-12vffkv *{pointer-events:auto;}
.rn-pointerEvents-ah5dr5{pointer-events:auto;}
.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
.rn-pointerEvents-633pao{pointer-events:none;}
.rn-pointerEvents-105ug2t{pointer-events:auto !important;}
.rn-pointerEvents-ah5dr5{pointer-events:auto !important;}
.rn-pointerEvents-633pao{pointer-events:none !important;}
.rn-pointerEvents-12vffkv{pointer-events:none !important;}
.rn-pointerEvents-12vffkv > *{pointer-events:auto;}
.rn-pointerEvents-ah5dr5 > *{pointer-events:none;}
</style>
<style id=\\"react-native-stylesheet\\">
.rn-bottom-1p0dtai{bottom:0px}