diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleManager.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js similarity index 99% rename from packages/react-native-web/src/exports/StyleSheet/StyleManager.js rename to packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js index 88eeb02d..19a45ca4 100644 --- a/packages/react-native-web/src/exports/StyleSheet/StyleManager.js +++ b/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js @@ -43,7 +43,7 @@ const pointerEventsCss = `.${pointerEvents.boxNone} > *{pointer-events:auto;}\n` + `.${pointerEvents.boxOnly} > *{pointer-events:none;}`; -export default class StyleManager { +export default class StyleSheetManager { cache = null; mainSheet = null; diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleRegistry.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheetRegistry.js similarity index 91% rename from packages/react-native-web/src/exports/StyleSheet/StyleRegistry.js rename to packages/react-native-web/src/exports/StyleSheet/StyleSheetRegistry.js index 5d0de128..f85f240c 100644 --- a/packages/react-native-web/src/exports/StyleSheet/StyleRegistry.js +++ b/packages/react-native-web/src/exports/StyleSheet/StyleSheetRegistry.js @@ -18,7 +18,7 @@ import I18nManager from '../I18nManager'; import i18nStyle from './i18nStyle'; import { prefixInlineStyles } from '../../modules/prefixStyles'; import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry'; -import StyleManager from './StyleManager'; +import StyleSheetManager from './StyleSheetManager'; const emptyObject = {}; @@ -29,12 +29,12 @@ const createCacheKey = id => { const classListToString = list => list.join(' ').trim(); -export default class StyleRegistry { +export default class StyleSheetRegistry { cache = { ltr: {}, rtl: {} }; - styleManager = new StyleManager(); + styleSheetManager = new StyleSheetManager(); getStyleSheets() { - return this.styleManager.getStyleSheets(); + return this.styleSheetManager.getStyleSheets(); } /** @@ -54,7 +54,7 @@ export default class StyleRegistry { Object.keys(domStyle).forEach(styleProp => { const value = domStyle[styleProp]; if (value != null) { - this.styleManager.setDeclaration(styleProp, value); + this.styleSheetManager.setDeclaration(styleProp, value); } }); this.cache[dir][id] = true; @@ -112,7 +112,7 @@ export default class StyleRegistry { // Preserves unrecognized class names. const { classList: rnClassList, style: rnStyle } = rdomClassList.reduce( (styleProps, className) => { - const { prop, value } = this.styleManager.getDeclaration(className); + const { prop, value } = this.styleSheetManager.getDeclaration(className); if (prop) { styleProps.style[prop] = value; } else { @@ -132,7 +132,7 @@ export default class StyleRegistry { // Next class names take priority over current inline styles const style = { ...rdomStyle }; rdomClassListNext.forEach(className => { - const { prop } = this.styleManager.getDeclaration(className); + const { prop } = this.styleSheetManager.getDeclaration(className); if (style[prop]) { style[prop] = ''; } @@ -158,7 +158,7 @@ export default class StyleRegistry { (props, styleProp) => { const value = domStyle[styleProp]; if (value != null) { - const className = this.styleManager.getClassName(styleProp, value); + const className = this.styleSheetManager.getClassName(styleProp, value); if (className) { props.classList.push(className); } else { diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleManager-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleManager-test.js deleted file mode 100644 index dda015a8..00000000 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleManager-test.js +++ /dev/null @@ -1,39 +0,0 @@ -/* eslint-env jasmine, jest */ - -import StyleManager from '../StyleManager'; - -let styleManager; - -describe('apis/StyleSheet/StyleManager', () => { - beforeEach(() => { - styleManager = new StyleManager(); - }); - - test('getClassName', () => { - expect(styleManager.getClassName('pointerEvents', 'box-only')).toMatchSnapshot(); - const className = styleManager.setDeclaration('width', '100px'); - expect(styleManager.getClassName('width', '100px')).toEqual(className); - }); - - test('getDeclaration', () => { - const className = styleManager.setDeclaration('width', '100px'); - expect(styleManager.getDeclaration(className)).toEqual({ - prop: 'width', - value: '100px' - }); - }); - - test('getStyleSheetHtml', () => { - expect(styleManager.getStyleSheetHtml()).toMatchSnapshot(); - styleManager.setDeclaration('width', '100px'); - expect(styleManager.getStyleSheetHtml()).toMatchSnapshot(); - }); - - test('setDeclaration', () => { - styleManager.mainSheet.sheet.insertRule = (rule, position) => { - // check for regressions in CSS write path (e.g., 0 => 0px) - expect(rule.indexOf('-webkit-flex-shrink:0;')).not.toEqual(-1); - }; - styleManager.setDeclaration('flexShrink', 0); - }); -}); diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetManager-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetManager-test.js new file mode 100644 index 00000000..0cb99230 --- /dev/null +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetManager-test.js @@ -0,0 +1,39 @@ +/* eslint-env jasmine, jest */ + +import StyleSheetManager from '../StyleSheetManager'; + +let styleSheetManager; + +describe('apis/StyleSheet/StyleSheetManager', () => { + beforeEach(() => { + styleSheetManager = new StyleSheetManager(); + }); + + test('getClassName', () => { + expect(styleSheetManager.getClassName('pointerEvents', 'box-only')).toMatchSnapshot(); + const className = styleSheetManager.setDeclaration('width', '100px'); + expect(styleSheetManager.getClassName('width', '100px')).toEqual(className); + }); + + test('getDeclaration', () => { + const className = styleSheetManager.setDeclaration('width', '100px'); + expect(styleSheetManager.getDeclaration(className)).toEqual({ + prop: 'width', + value: '100px' + }); + }); + + test('getStyleSheetHtml', () => { + expect(styleSheetManager.getStyleSheetHtml()).toMatchSnapshot(); + styleSheetManager.setDeclaration('width', '100px'); + expect(styleSheetManager.getStyleSheetHtml()).toMatchSnapshot(); + }); + + test('setDeclaration', () => { + styleSheetManager.mainSheet.sheet.insertRule = (rule, position) => { + // check for regressions in CSS write path (e.g., 0 => 0px) + expect(rule.indexOf('-webkit-flex-shrink:0;')).not.toEqual(-1); + }; + styleSheetManager.setDeclaration('flexShrink', 0); + }); +}); diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleRegistry-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetRegistry-test.js similarity index 63% rename from packages/react-native-web/src/exports/StyleSheet/__tests__/StyleRegistry-test.js rename to packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetRegistry-test.js index c9ec76d1..4dd46638 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleRegistry-test.js +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/StyleSheetRegistry-test.js @@ -1,18 +1,18 @@ /* eslint-env jasmine, jest */ import I18nManager from '../../I18nManager'; -import StyleRegistry from '../StyleRegistry'; +import StyleSheetRegistry from '../StyleSheetRegistry'; -let styleRegistry; +let styleSheetRegistry; -describe('apis/StyleSheet/StyleRegistry', () => { +describe('apis/StyleSheet/StyleSheetRegistry', () => { beforeEach(() => { - styleRegistry = new StyleRegistry(); + styleSheetRegistry = new StyleSheetRegistry(); }); test('register', () => { const style = { opacity: 0 }; - const id = styleRegistry.register(style); + const id = styleSheetRegistry.register(style); expect(typeof id === 'number').toBe(true); }); @@ -27,40 +27,40 @@ describe('apis/StyleSheet/StyleRegistry', () => { const testResolve = (a, b, c) => { // no common properties, different resolving order, same result - const resolve1 = styleRegistry.resolve([a, b]); + const resolve1 = styleSheetRegistry.resolve([a, b]); expect(resolve1).toMatchSnapshot(); - const resolve2 = styleRegistry.resolve([b, a]); + const resolve2 = styleSheetRegistry.resolve([b, a]); expect(resolve1).toEqual(resolve2); // common properties, different resolving order, different result - const resolve3 = styleRegistry.resolve([a, b, c]); + const resolve3 = styleSheetRegistry.resolve([a, b, c]); expect(resolve3).toMatchSnapshot(); - const resolve4 = styleRegistry.resolve([c, a, b]); + const resolve4 = styleSheetRegistry.resolve([c, a, b]); expect(resolve4).toMatchSnapshot(); expect(resolve3).not.toEqual(resolve4); }; test('with register, resolves to className', () => { - const a = styleRegistry.register(styleA); - const b = styleRegistry.register(styleB); - const c = styleRegistry.register(styleC); + const a = styleSheetRegistry.register(styleA); + const b = styleSheetRegistry.register(styleB); + const c = styleSheetRegistry.register(styleC); testResolve(a, b, c); }); test('with register before RTL, resolves to className', () => { - const a = styleRegistry.register({ left: '12.34%' }); - const b = styleRegistry.register({ textAlign: 'left' }); - const c = styleRegistry.register({ marginLeft: 10 }); + const a = styleSheetRegistry.register({ left: '12.34%' }); + const b = styleSheetRegistry.register({ textAlign: 'left' }); + const c = styleSheetRegistry.register({ marginLeft: 10 }); I18nManager.forceRTL(true); - const resolved = styleRegistry.resolve([a, b, c]); + const resolved = styleSheetRegistry.resolve([a, b, c]); I18nManager.forceRTL(false); expect(resolved).toMatchSnapshot(); }); test('with register, resolves to mixed', () => { const a = styleA; - const b = styleRegistry.register(styleB); - const c = styleRegistry.register(styleC); + const b = styleSheetRegistry.register(styleB); + const c = styleSheetRegistry.register(styleC); testResolve(a, b, c); }); @@ -72,20 +72,20 @@ describe('apis/StyleSheet/StyleRegistry', () => { describe('resolveStateful', () => { test('preserves unrelated class names', () => { const domStyleProps = { classList: ['unknown-class-1', 'unknown-class-2'], style: {} }; - const domStyleNextProps = styleRegistry.resolveStateful({}, domStyleProps); + const domStyleNextProps = styleSheetRegistry.resolveStateful({}, domStyleProps); expect(domStyleNextProps).toMatchSnapshot(); }); test('preserves unrelated inline styles', () => { const domStyleProps = { classList: [], style: { fontSize: '20px' } }; - const domStyleNextProps = styleRegistry.resolveStateful({ opacity: 1 }, domStyleProps); + const domStyleNextProps = styleSheetRegistry.resolveStateful({ opacity: 1 }, domStyleProps); expect(domStyleNextProps).toMatchSnapshot(); }); test('next class names have priority over current inline styles', () => { const domStyleProps = { classList: [], style: { opacity: 0.5 } }; - const nextStyle = styleRegistry.register({ opacity: 1 }); - const domStyleNextProps = styleRegistry.resolveStateful(nextStyle, domStyleProps); + const nextStyle = styleSheetRegistry.register({ opacity: 1 }); + const domStyleNextProps = styleSheetRegistry.resolveStateful(nextStyle, domStyleProps); expect(domStyleNextProps).toMatchSnapshot(); }); @@ -95,7 +95,7 @@ describe('apis/StyleSheet/StyleRegistry', () => { classList: [], style: { opacity: 0.5, WebkitTransform: 'scale(1)', transform: 'scale(1)' } }; - const domStyleNextProps = styleRegistry.resolveStateful( + const domStyleNextProps = styleSheetRegistry.resolveStateful( { opacity: 1, transform: [{ scale: 2 }] }, domStyleProps ); diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleManager-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap similarity index 91% rename from packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleManager-test.js.snap rename to packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap index 29db5612..030ac00b 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleManager-test.js.snap +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/StyleSheetManager-test.js.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`apis/StyleSheet/StyleManager getClassName 1`] = `"rn-pointerEvents-ah5dr5"`; +exports[`apis/StyleSheet/StyleSheetManager getClassName 1`] = `"rn-pointerEvents-ah5dr5"`; -exports[`apis/StyleSheet/StyleManager getStyleSheetHtml 1`] = ` +exports[`apis/StyleSheet/StyleSheetManager getStyleSheetHtml 1`] = ` "" `; -exports[`apis/StyleSheet/StyleManager getStyleSheetHtml 2`] = ` +exports[`apis/StyleSheet/StyleSheetManager getStyleSheetHtml 2`] = ` "