zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-06-08 20:35:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] resolve inline-style pointerEvents to classNames

Browse Source 
pointerEvents styles are now always resolved to classNames, even if
working with dynamic styles. In practice, inline-style pointerEvents
have always resolved to classNames as an accident of 'createElement'
registering each pointerEvent style. However, this patch ensures that
the style resolver produces correct output, and introduces the basic
mechanism by which 'placeholderTextColor' (for which classNames cannot
be precomputed) could function similarly.
This commit is contained in:
Nicolas Gallagher
2018-01-21 18:25:29 -08:00
parent a53dba8c62
commit 083769d642
7 changed files with 62 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap
+6 -6
View File
@@ -15,12 +15,6 @@ body{margin:0;}
@media all{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-ah5dr5 > *{pointer-events:none}
.rn-pointerEvents-ah5dr5{pointer-events:auto !important}
.rn-pointerEvents-12vffkv > *{pointer-events:auto}
.rn-pointerEvents-12vffkv{pointer-events:none !important}
.rn-pointerEvents-105ug2t{pointer-events:auto !important}
.rn-pointerEvents-633pao{pointer-events:none !important}
.rn-bottom-1p0dtai{bottom:0px}
.rn-left-1d2f490{left:0px}
.rn-position-u8s1d{position:absolute}
@@ -34,6 +28,12 @@ body{margin:0;}
.rn-textAlign-1ttztb7{text-align:inherit}
.rn-textDecoration-bauka4{text-decoration:none}
.rn-listStyle-1ebb2ja{list-style:none}
.rn-pointerEvents-105ug2t{pointer-events:auto !important}
.rn-pointerEvents-12vffkv > *{pointer-events:auto}
.rn-pointerEvents-12vffkv{pointer-events:none !important}
.rn-pointerEvents-ah5dr5 > *{pointer-events:none}
.rn-pointerEvents-ah5dr5{pointer-events:auto !important}
.rn-pointerEvents-633pao{pointer-events:none !important}
.rn-alignItems-1oszu61{-ms-flex-align:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
.rn-borderTopStyle-1efd50x{border-top-style:solid}
.rn-borderRightStyle-14skgim{border-right-style:solid}
packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js
Vendored
-7
View File
@@ -63,13 +63,6 @@ export default class StyleSheetManager {
initialRules.forEach(rule => {
this._webStyleSheet.insertRuleOnce(rule);
});
// need to pre-register pointerEvents as they have no inline-style equivalent
// TODO: make it so inline style can register pointerEvents when needed. might need
// this for placeholder text color implementation, and keyframes too
['box-only', 'box-none', 'auto', 'none'].forEach(v => {
this.setDeclaration('pointerEvents', v);
});
}
getClassName(prop, value) {
packages/react-native-web/src/exports/StyleSheet/StyleSheetRegistry.js
Vendored
+14 -4
View File
@@ -162,11 +162,21 @@ export default class StyleSheetRegistry {
if (className) {
props.classList.push(className);
} else {
if (!props.style) {
props.style = {};
// Certain properties and values are not transformed by 'createReactDOMStyle' as they
// require more complex transforms into multiple CSS rules. Here we make sure the styles
// can be represented by a className and don't end up as invalid inline-styles.
if (styleProp === 'pointerEvents') {
const className = this.styleSheetManager.setDeclaration(styleProp, value);
props.classList.push(className);
// } else if (styleProp ==='placeholderTextColor') {
// } else if (styleProp ==='animationName') {
} else {
if (!props.style) {
props.style = {};
}
// 4x slower render
props.style[styleProp] = value;
}
// 4x slower render
props.style[styleProp] = value;
}
}
return props;
packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetRegistry-test.js
Vendored
+5 -1
View File
@@ -21,7 +21,7 @@ describe('apis/StyleSheet/StyleSheetRegistry', () => {
const styleB = {
position: 'absolute',
left: 50,
pointerEvents: 'box-only'
opacity: 0.5
};
const styleC = { width: 200 };
@@ -67,6 +67,10 @@ describe('apis/StyleSheet/StyleSheetRegistry', () => {
test('without register, resolves to inline styles', () => {
testResolve(styleA, styleB, styleC);
});
test('resolves inline-style pointerEvents to classname', () => {
expect(styleSheetRegistry.resolve({ pointerEvents: 'box-none' })).toMatchSnapshot();
});
});
describe('resolveStateful', () => {
packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap
+1 -7
View File
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`apis/StyleSheet/StyleSheetManager getClassName 1`] = `"rn-pointerEvents-ah5dr5"`;
exports[`apis/StyleSheet/StyleSheetManager getClassName 1`] = `undefined`;
exports[`apis/StyleSheet/StyleSheetManager getStyleSheets 1`] = `
Array [
@@ -12,12 +12,6 @@ body{margin:0;}
@media all{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-ah5dr5 > *{pointer-events:none}
.rn-pointerEvents-ah5dr5{pointer-events:auto !important}
.rn-pointerEvents-12vffkv > *{pointer-events:auto}
.rn-pointerEvents-12vffkv{pointer-events:none !important}
.rn-pointerEvents-105ug2t{pointer-events:auto !important}
.rn-pointerEvents-633pao{pointer-events:none !important}
.rn---test-property-ax3bxi{--test-property:test-value}",
},
]
packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetRegistry-test.js.snap
+30 -24
View File
@@ -1,5 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`apis/StyleSheet/StyleSheetRegistry resolve resolves inline-style pointerEvents to classname 1`] = `
Object {
"classList": Array [
"rn-pointerEvents-12vffkv",
],
"className": "rn-pointerEvents-12vffkv",
}
`;
exports[`apis/StyleSheet/StyleSheetRegistry resolve with register before RTL, resolves to className 1`] = `
Object {
"classList": Array [
@@ -23,11 +32,11 @@ Object {
"rn-borderBottomWidth-ndvcnb",
"rn-borderLeftWidth-gxnn5r",
"rn-left-1tsx3h3",
"rn-pointerEvents-ah5dr5",
"rn-opacity-icoktb",
"rn-position-u8s1d",
"rn-width-b8lwoo",
],
"className": "rn-borderTopColor-1gxhl28 rn-borderRightColor-knoah9 rn-borderBottomColor-1ani3fp rn-borderLeftColor-ribj9x rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d rn-width-b8lwoo",
"className": "rn-borderTopColor-1gxhl28 rn-borderRightColor-knoah9 rn-borderBottomColor-1ani3fp rn-borderLeftColor-ribj9x rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-b8lwoo",
}
`;
@@ -43,11 +52,11 @@ Object {
"rn-borderBottomWidth-ndvcnb",
"rn-borderLeftWidth-gxnn5r",
"rn-left-1tsx3h3",
"rn-pointerEvents-ah5dr5",
"rn-opacity-icoktb",
"rn-position-u8s1d",
"rn-width-l0gwng",
],
"className": "rn-borderTopColor-1gxhl28 rn-borderRightColor-knoah9 rn-borderBottomColor-1ani3fp rn-borderLeftColor-ribj9x rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d rn-width-l0gwng",
"className": "rn-borderTopColor-1gxhl28 rn-borderRightColor-knoah9 rn-borderBottomColor-1ani3fp rn-borderLeftColor-ribj9x rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-l0gwng",
}
`;
@@ -63,11 +72,11 @@ Object {
"rn-borderBottomWidth-ndvcnb",
"rn-borderLeftWidth-gxnn5r",
"rn-left-1tsx3h3",
"rn-pointerEvents-ah5dr5",
"rn-opacity-icoktb",
"rn-position-u8s1d",
"rn-width-b8lwoo",
],
"className": "rn-borderTopColor-1gxhl28 rn-borderRightColor-knoah9 rn-borderBottomColor-1ani3fp rn-borderLeftColor-ribj9x rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d rn-width-b8lwoo",
"className": "rn-borderTopColor-1gxhl28 rn-borderRightColor-knoah9 rn-borderBottomColor-1ani3fp rn-borderLeftColor-ribj9x rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-b8lwoo",
}
`;
@@ -75,10 +84,10 @@ exports[`apis/StyleSheet/StyleSheetRegistry resolve with register, resolves to m
Object {
"classList": Array [
"rn-left-1tsx3h3",
"rn-pointerEvents-ah5dr5",
"rn-opacity-icoktb",
"rn-position-u8s1d",
],
"className": "rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d",
"className": "rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d",
"style": Object {
"borderBottomColor": "red",
"borderBottomWidth": "0px",
@@ -97,11 +106,11 @@ exports[`apis/StyleSheet/StyleSheetRegistry resolve with register, resolves to m
Object {
"classList": Array [
"rn-left-1tsx3h3",
"rn-pointerEvents-ah5dr5",
"rn-opacity-icoktb",
"rn-position-u8s1d",
"rn-width-l0gwng",
],
"className": "rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d rn-width-l0gwng",
"className": "rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-l0gwng",
"style": Object {
"borderBottomColor": "red",
"borderBottomWidth": "0px",
@@ -119,10 +128,10 @@ exports[`apis/StyleSheet/StyleSheetRegistry resolve with register, resolves to m
Object {
"classList": Array [
"rn-left-1tsx3h3",
"rn-pointerEvents-ah5dr5",
"rn-opacity-icoktb",
"rn-position-u8s1d",
],
"className": "rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d",
"className": "rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d",
"style": Object {
"borderBottomColor": "red",
"borderBottomWidth": "0px",
@@ -139,10 +148,8 @@ Object {
exports[`apis/StyleSheet/StyleSheetRegistry resolve without register, resolves to inline styles 1`] = `
Object {
"classList": Array [
"rn-pointerEvents-ah5dr5",
],
"className": "rn-pointerEvents-ah5dr5",
"classList": Array [],
"className": "",
"style": Object {
"borderBottomColor": "red",
"borderBottomWidth": "0px",
@@ -153,6 +160,7 @@ Object {
"borderTopColor": "red",
"borderTopWidth": "0px",
"left": "50px",
"opacity": 0.5,
"position": "absolute",
"width": "100px",
},
@@ -161,10 +169,8 @@ Object {
exports[`apis/StyleSheet/StyleSheetRegistry resolve without register, resolves to inline styles 2`] = `
Object {
"classList": Array [
"rn-pointerEvents-ah5dr5",
],
"className": "rn-pointerEvents-ah5dr5",
"classList": Array [],
"className": "",
"style": Object {
"borderBottomColor": "red",
"borderBottomWidth": "0px",
@@ -175,6 +181,7 @@ Object {
"borderTopColor": "red",
"borderTopWidth": "0px",
"left": "50px",
"opacity": 0.5,
"position": "absolute",
"width": "200px",
},
@@ -183,10 +190,8 @@ Object {
exports[`apis/StyleSheet/StyleSheetRegistry resolve without register, resolves to inline styles 3`] = `
Object {
"classList": Array [
"rn-pointerEvents-ah5dr5",
],
"className": "rn-pointerEvents-ah5dr5",
"classList": Array [],
"className": "",
"style": Object {
"borderBottomColor": "red",
"borderBottomWidth": "0px",
@@ -197,6 +202,7 @@ Object {
"borderTopColor": "red",
"borderTopWidth": "0px",
"left": "50px",
"opacity": 0.5,
"position": "absolute",
"width": "100px",
},
packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/index-test.js.snap
+6 -6
View File
@@ -10,12 +10,6 @@ body{margin:0;}
@media all{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-ah5dr5 > *{pointer-events:none}
.rn-pointerEvents-ah5dr5{pointer-events:auto !important}
.rn-pointerEvents-12vffkv > *{pointer-events:auto}
.rn-pointerEvents-12vffkv{pointer-events:none !important}
.rn-pointerEvents-105ug2t{pointer-events:auto !important}
.rn-pointerEvents-633pao{pointer-events:none !important}
.rn-bottom-1p0dtai{bottom:0px}
.rn-left-1d2f490{left:0px}
.rn-position-u8s1d{position:absolute}
@@ -29,6 +23,12 @@ body{margin:0;}
.rn-textAlign-1ttztb7{text-align:inherit}
.rn-textDecoration-bauka4{text-decoration:none}
.rn-listStyle-1ebb2ja{list-style:none}
.rn-pointerEvents-105ug2t{pointer-events:auto !important}
.rn-pointerEvents-12vffkv > *{pointer-events:auto}
.rn-pointerEvents-12vffkv{pointer-events:none !important}
.rn-pointerEvents-ah5dr5 > *{pointer-events:none}
.rn-pointerEvents-ah5dr5{pointer-events:auto !important}
.rn-pointerEvents-633pao{pointer-events:none !important}
.rn-alignItems-1oszu61{-ms-flex-align:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
.rn-borderTopStyle-1efd50x{border-top-style:solid}
.rn-borderRightStyle-14skgim{border-right-style:solid}