diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap index fceaa48c..bec1e11e 100644 --- a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap +++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap @@ -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} diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js index e5569b4b..8780a35b 100644 --- a/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js +++ b/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js @@ -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) { diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheetRegistry.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheetRegistry.js index f85f240c..8bc0e2af 100644 --- a/packages/react-native-web/src/exports/StyleSheet/StyleSheetRegistry.js +++ b/packages/react-native-web/src/exports/StyleSheet/StyleSheetRegistry.js @@ -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; diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetRegistry-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetRegistry-test.js index 4dd46638..dec64b11 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetRegistry-test.js +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetRegistry-test.js @@ -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', () => { diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap index 77ee7277..ff80d7da 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap @@ -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}", }, ] diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetRegistry-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetRegistry-test.js.snap index 93056970..f4ae0377 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetRegistry-test.js.snap +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetRegistry-test.js.snap @@ -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", }, diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/index-test.js.snap index 5b37efdb..7e37acd5 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/index-test.js.snap @@ -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}