diff --git a/docs/apis/StyleSheet.md b/docs/apis/StyleSheet.md index 1a0c09a5f..ec441c556 100644 --- a/docs/apis/StyleSheet.md +++ b/docs/apis/StyleSheet.md @@ -15,9 +15,9 @@ Each key of the object passed to `create` must define a style object. Flattens an array of styles into a single style object. -**render**: function +**renderToString**: function -Returns a React `<style>` element for use in server-side rendering. +Returns a string of the stylesheet for use in server-side rendering. ## Properties diff --git a/examples/.storybook/webpack.config.js b/examples/.storybook/webpack.config.js index 07c84129f..dbc85e369 100644 --- a/examples/.storybook/webpack.config.js +++ b/examples/.storybook/webpack.config.js @@ -1,6 +1,8 @@ const path = require('path') const webpack = require('webpack') +const DEV = process.env.NODE_ENV !== 'production'; + module.exports = { module: { loaders: [ @@ -19,7 +21,8 @@ module.exports = { }, plugins: [ new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), + 'process.env.__REACT_NATIVE_DEBUG_ENABLED__': DEV }), // https://github.com/animatedjs/animated/issues/40 new webpack.NormalModuleReplacementPlugin( diff --git a/package.json b/package.json index cfb19d268..7823a2a68 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "dependencies": { "animated": "^0.1.3", "array-find-index": "^1.0.2", + "asap": "^2.0.5", "babel-runtime": "^6.11.6", "debounce": "^1.0.0", "deep-assign": "^2.0.0", diff --git a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap new file mode 100644 index 000000000..60dcdd589 --- /dev/null +++ b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap @@ -0,0 +1,45 @@ +exports[`apis/AppRegistry/renderApplication getApplication 1`] = ` +"<style id=\"react-native-stylesheet\"> +html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)} +body{margin:0} +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} +.rn_pointerEvents\\:auto, .rn_pointerEvents\\:box-only, .rn_pointerEvents\\:box-none * {pointer-events:auto}.rn_pointerEvents\\:none, .rn_pointerEvents\\:box-only *, .rn_pointerEvents\\:box-none {pointer-events:none} +.rn-bottom\\:0px{bottom:0px;} +.rn-left\\:0px{left:0px;} +.rn-position\\:absolute{position:absolute;} +.rn-right\\:0px{right:0px;} +.rn-top\\:0px{top:0px;} +.rn-alignItems\\:stretch{-webkit-align-items:stretch;-ms-flex-align:stretch;-webkit-box-align:stretch;align-items:stretch;} +.rn-backgroundColor\\:transparent{background-color:transparent;} +.rn-borderTopStyle\\:solid{border-top-style:solid;} +.rn-borderRightStyle\\:solid{border-right-style:solid;} +.rn-borderBottomStyle\\:solid{border-bottom-style:solid;} +.rn-borderLeftStyle\\:solid{border-left-style:solid;} +.rn-borderTopWidth\\:0px{border-top-width:0px;} +.rn-borderRightWidth\\:0px{border-right-width:0px;} +.rn-borderBottomWidth\\:0px{border-bottom-width:0px;} +.rn-borderLeftWidth\\:0px{border-left-width:0px;} +.rn-boxSizing\\:border-box{-moz-box-sizing:border-box;box-sizing:border-box;} +.rn-color\\:inherit{color:inherit;} +.rn-display\\:flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;} +.rn-flexBasis\\:auto{-webkit-flex-basis:auto;-ms-preferred-size:auto;flex-basis:auto;} +.rn-flexDirection\\:column{-webkit-flex-direction:column;-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;} +.rn-font\\:inherit{font:inherit;} +.rn-listStyle\\:none{list-style:none;} +.rn-marginTop\\:0px{margin-top:0px;} +.rn-marginRight\\:0px{margin-right:0px;} +.rn-marginBottom\\:0px{margin-bottom:0px;} +.rn-marginLeft\\:0px{margin-left:0px;} +.rn-minHeight\\:0px{min-height:0px;} +.rn-minWidth\\:0px{min-width:0px;} +.rn-paddingTop\\:0px{padding-top:0px;} +.rn-paddingRight\\:0px{padding-right:0px;} +.rn-paddingBottom\\:0px{padding-bottom:0px;} +.rn-paddingLeft\\:0px{padding-left:0px;} +.rn-position\\:relative{position:relative;} +.rn-textAlign\\:inherit{text-align:inherit;} +.rn-textDecoration\\:none{text-decoration:none;} +.rn-flexShrink\\:0{-webkit-flex-shrink:0px;-ms-flex-negative:0px;flex-shrink:0;} +</style>" +`; diff --git a/src/apis/AppRegistry/__tests__/renderApplication-test.js b/src/apis/AppRegistry/__tests__/renderApplication-test.js index c307bf374..2a5f49abf 100644 --- a/src/apis/AppRegistry/__tests__/renderApplication-test.js +++ b/src/apis/AppRegistry/__tests__/renderApplication-test.js @@ -10,6 +10,6 @@ describe('apis/AppRegistry/renderApplication', () => { const { element, stylesheet } = getApplication(component, {}); expect(element).toBeTruthy(); - expect(stylesheet.type).toEqual('style'); + expect(stylesheet).toMatchSnapshot(); }); }); diff --git a/src/apis/AppRegistry/renderApplication.js b/src/apis/AppRegistry/renderApplication.js index 45cee16e3..47e9361c8 100644 --- a/src/apis/AppRegistry/renderApplication.js +++ b/src/apis/AppRegistry/renderApplication.js @@ -32,6 +32,6 @@ export function getApplication(RootComponent: Component, initialProps: Object): rootComponent={RootComponent} /> ); - const stylesheet = StyleSheet.render(); + const stylesheet = StyleSheet.renderToString(); return { element, stylesheet }; } diff --git a/src/apis/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap b/src/apis/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap new file mode 100644 index 000000000..9f8fc2312 --- /dev/null +++ b/src/apis/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap @@ -0,0 +1,15 @@ +exports[`apis/StyleSheet/createReactDOMStyle converts ReactNative style to ReactDOM style 1`] = ` +Object { + "borderBottomWidth": "1px", + "borderLeftWidth": "1px", + "borderRightWidth": "1px", + "borderTopWidth": "1px", + "borderWidthLeft": "2px", + "borderWidthRight": "3px", + "boxShadow": "1px 1px 1px 1px #000, 1px 2px 0px rgba(255,0,0,1)", + "display": "flex", + "marginBottom": "0px", + "marginTop": "0px", + "opacity": 0, +} +`; diff --git a/src/apis/StyleSheet/__tests__/__snapshots__/generateCss-test.js.snap b/src/apis/StyleSheet/__tests__/__snapshots__/generateCss-test.js.snap new file mode 100644 index 000000000..958b394e9 --- /dev/null +++ b/src/apis/StyleSheet/__tests__/__snapshots__/generateCss-test.js.snap @@ -0,0 +1 @@ +exports[`apis/StyleSheet/generateCss generates correct css 1`] = `"-webkit-transition-duration:0.1s;transition-duration:0.1s;position:absolute;border-width-right:3px;border-width-left:2px;box-shadow:1px 1px 1px 1px #000;"`; diff --git a/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap b/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap index 35bd0b8a9..95a485055 100644 --- a/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap +++ b/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap @@ -1,10 +1,14 @@ -exports[`apis/StyleSheet resolve 1`] = ` -Object { - "className": "test __style_df __style_pebn", - "style": Object { - "display": null, - "opacity": 1, - "pointerEvents": null, - }, -} +exports[`apis/StyleSheet renderToString 1`] = ` +"<style id=\"react-native-stylesheet\"> +.rn-borderTopColor\\:red{border-top-color:red;} +.rn-borderRightColor\\:red{border-right-color:red;} +.rn-borderBottomColor\\:red{border-bottom-color:red;} +.rn-borderLeftColor\\:red{border-left-color:red;} +.rn-borderTopWidth\\:0px{border-top-width:0px;} +.rn-borderRightWidth\\:0px{border-right-width:0px;} +.rn-borderBottomWidth\\:0px{border-bottom-width:0px;} +.rn-borderLeftWidth\\:0px{border-left-width:0px;} +.rn-left\\:50px{left:50px;} +.rn-position\\:absolute{position:absolute;} +</style>" `; diff --git a/src/apis/StyleSheet/__tests__/__snapshots__/registry-test.js.snap b/src/apis/StyleSheet/__tests__/__snapshots__/registry-test.js.snap new file mode 100644 index 000000000..db8ffeff3 --- /dev/null +++ b/src/apis/StyleSheet/__tests__/__snapshots__/registry-test.js.snap @@ -0,0 +1,179 @@ +exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to className 1`] = ` +Object { + "className": " +rn-borderTopColor:red +rn-borderRightColor:red +rn-borderBottomColor:red +rn-borderLeftColor:red +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-left:50px +rn-pointerEvents:box-only +rn-position:absolute +rn-width:100px", + "style": Object {}, +} +`; + +exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to className 2`] = ` +Object { + "className": " +rn-borderTopColor:red +rn-borderRightColor:red +rn-borderBottomColor:red +rn-borderLeftColor:red +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-left:50px +rn-pointerEvents:box-only +rn-position:absolute +rn-width:200px", + "style": Object {}, +} +`; + +exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to className 3`] = ` +Object { + "className": " +rn-borderTopColor:red +rn-borderRightColor:red +rn-borderBottomColor:red +rn-borderLeftColor:red +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-left:50px +rn-pointerEvents:box-only +rn-position:absolute +rn-width:100px", + "style": Object {}, +} +`; + +exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to mixed 1`] = ` +Object { + "className": " +rn-left:50px +rn-pointerEvents:box-only +rn-position:absolute", + "style": Object { + "borderBottomColor": "red", + "borderBottomWidth": "0px", + "borderLeftColor": "red", + "borderLeftWidth": "0px", + "borderRightColor": "red", + "borderRightWidth": "0px", + "borderTopColor": "red", + "borderTopWidth": "0px", + "width": "100px", + }, +} +`; + +exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to mixed 2`] = ` +Object { + "className": " +rn-left:50px +rn-pointerEvents:box-only +rn-position:absolute +rn-width:200px", + "style": Object { + "borderBottomColor": "red", + "borderBottomWidth": "0px", + "borderLeftColor": "red", + "borderLeftWidth": "0px", + "borderRightColor": "red", + "borderRightWidth": "0px", + "borderTopColor": "red", + "borderTopWidth": "0px", + }, +} +`; + +exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to mixed 3`] = ` +Object { + "className": " +rn-left:50px +rn-pointerEvents:box-only +rn-position:absolute", + "style": Object { + "borderBottomColor": "red", + "borderBottomWidth": "0px", + "borderLeftColor": "red", + "borderLeftWidth": "0px", + "borderRightColor": "red", + "borderRightWidth": "0px", + "borderTopColor": "red", + "borderTopWidth": "0px", + "width": "100px", + }, +} +`; + +exports[`apis/StyleSheet/registry resolve without stylesheet, resolves to inline styles 1`] = ` +Object { + "className": " +", + "style": Object { + "borderBottomColor": "red", + "borderBottomWidth": "0px", + "borderLeftColor": "red", + "borderLeftWidth": "0px", + "borderRightColor": "red", + "borderRightWidth": "0px", + "borderTopColor": "red", + "borderTopWidth": "0px", + "left": "50px", + "pointerEvents": "box-only", + "position": "absolute", + "width": "100px", + }, +} +`; + +exports[`apis/StyleSheet/registry resolve without stylesheet, resolves to inline styles 2`] = ` +Object { + "className": " +", + "style": Object { + "borderBottomColor": "red", + "borderBottomWidth": "0px", + "borderLeftColor": "red", + "borderLeftWidth": "0px", + "borderRightColor": "red", + "borderRightWidth": "0px", + "borderTopColor": "red", + "borderTopWidth": "0px", + "left": "50px", + "pointerEvents": "box-only", + "position": "absolute", + "width": "200px", + }, +} +`; + +exports[`apis/StyleSheet/registry resolve without stylesheet, resolves to inline styles 3`] = ` +Object { + "className": " +", + "style": Object { + "borderBottomColor": "red", + "borderBottomWidth": "0px", + "borderLeftColor": "red", + "borderLeftWidth": "0px", + "borderRightColor": "red", + "borderRightWidth": "0px", + "borderTopColor": "red", + "borderTopWidth": "0px", + "left": "50px", + "pointerEvents": "box-only", + "position": "absolute", + "width": "100px", + }, +} +`; diff --git a/src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js b/src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js index 55fd22572..7955be070 100644 --- a/src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js +++ b/src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js @@ -2,11 +2,27 @@ import createReactDOMStyle from '../createReactDOMStyle'; +const reactNativeStyle = { + boxShadow: '1px 1px 1px 1px #000', + borderWidthLeft: 2, + borderWidth: 1, + borderWidthRight: 3, + display: 'flex', + marginVertical: 0, + opacity: 0, + shadowColor: 'red', + shadowOffset: { width: 1, height: 2 }, + resizeMode: 'contain' +}; + describe('apis/StyleSheet/createReactDOMStyle', () => { test('converts ReactNative style to ReactDOM style', () => { - const reactNativeStyle = { display: 'flex', marginVertical: 0, opacity: 0 }; - const expectedStyle = { display: 'flex', marginTop: '0px', marginBottom: '0px', opacity: 0 }; + expect(createReactDOMStyle(reactNativeStyle)).toMatchSnapshot(); + }); - expect(createReactDOMStyle(reactNativeStyle)).toEqual(expectedStyle); + test('noop on DOM styles', () => { + const firstStyle = createReactDOMStyle(reactNativeStyle); + const secondStyle = createReactDOMStyle(firstStyle); + expect(firstStyle).toEqual(secondStyle); }); }); diff --git a/src/apis/StyleSheet/__tests__/generateCss-test.js b/src/apis/StyleSheet/__tests__/generateCss-test.js new file mode 100644 index 000000000..5be9ef4d0 --- /dev/null +++ b/src/apis/StyleSheet/__tests__/generateCss-test.js @@ -0,0 +1,16 @@ +/* eslint-env jasmine, jest */ + +import generateCss from '../generateCss'; + +describe('apis/StyleSheet/generateCss', () => { + test('generates correct css', () => { + const style = { + boxShadow: '1px 1px 1px 1px #000', + borderWidthLeft: 2, + borderWidthRight: 3, + position: 'absolute', + transitionDuration: '0.1s' + }; + expect(generateCss(style)).toMatchSnapshot(); + }); +}); diff --git a/src/apis/StyleSheet/__tests__/index-test.js b/src/apis/StyleSheet/__tests__/index-test.js index b1cff0bd1..e8166c398 100644 --- a/src/apis/StyleSheet/__tests__/index-test.js +++ b/src/apis/StyleSheet/__tests__/index-test.js @@ -1,7 +1,7 @@ /* eslint-env jasmine, jest */ -import { getDefaultStyleSheet } from '../css'; import StyleSheet from '..'; +import StyleRegistry from '../registry'; const isPlainObject = (x) => { const toString = Object.prototype.toString; @@ -16,7 +16,7 @@ const isPlainObject = (x) => { describe('apis/StyleSheet', () => { beforeEach(() => { - StyleSheet._reset(); + StyleRegistry.reset(); }); test('absoluteFill', () => { @@ -32,11 +32,6 @@ describe('apis/StyleSheet', () => { const style = StyleSheet.create({ root: { opacity: 1 } }); expect(Number.isInteger(style.root) === true).toBeTruthy(); }); - - test('renders a style sheet in the browser', () => { - StyleSheet.create({ root: { color: 'red' } }); - expect(document.getElementById('react-native-style__').textContent).toEqual(getDefaultStyleSheet()); - }); }); test('flatten', () => { @@ -47,18 +42,17 @@ describe('apis/StyleSheet', () => { expect(Number.isInteger(StyleSheet.hairlineWidth) === true).toBeTruthy(); }); - test('render', () => { - expect(StyleSheet.render().props.dangerouslySetInnerHTML.__html).toEqual(getDefaultStyleSheet()); - }); - - test('resolve', () => { - expect(StyleSheet.resolve({ - className: 'test', - style: { - display: 'flex', - opacity: 1, - pointerEvents: 'box-none' + test('renderToString', () => { + StyleSheet.create({ + a: { + borderWidth: 0, + borderColor: 'red' + }, + b: { + position: 'absolute', + left: 50 } - })).toMatchSnapshot(); + }); + expect(StyleSheet.renderToString()).toMatchSnapshot(); }); }); diff --git a/src/apis/StyleSheet/__tests__/injector.js b/src/apis/StyleSheet/__tests__/injector.js new file mode 100644 index 000000000..72cdbe019 --- /dev/null +++ b/src/apis/StyleSheet/__tests__/injector.js @@ -0,0 +1,22 @@ +/* eslint-env jasmine, jest */ + +import injector from '../injector'; + +describe('apis/StyleSheet', () => { + beforeEach(() => { + document.head.insertAdjacentHTML('afterbegin', ` + <style id="react-native-stylesheet"> + .rn-alignItems\\:stretch{align-items:stretch;} + .rn-position\\:top{position:top;} + </style> + `); + }); + + test('hydrates from SSR', () => { + const classList = injector.getAvailableClassNames(); + expect(classList).toEqual([ + 'rn-alignItems\\:stretch', + 'rn-position\\:top' + ]); + }); +}); diff --git a/src/apis/StyleSheet/__tests__/prefixeInlineStyles-test.js b/src/apis/StyleSheet/__tests__/prefixeInlineStyles-test.js new file mode 100644 index 000000000..48a1e31e7 --- /dev/null +++ b/src/apis/StyleSheet/__tests__/prefixeInlineStyles-test.js @@ -0,0 +1,13 @@ +/* eslint-env jasmine, jest */ + +import prefixInlineStyles from '../prefixInlineStyles'; + +describe('apis/StyleSheet/prefixInlineStyles', () => { + test('handles array values', () => { + const style = { + display: [ '-webkit-flex', 'flex' ] + }; + + expect(prefixInlineStyles(style)).toEqual({ display: 'flex' }); + }); +}); diff --git a/src/apis/StyleSheet/__tests__/registry-test.js b/src/apis/StyleSheet/__tests__/registry-test.js new file mode 100644 index 000000000..e89f29f6b --- /dev/null +++ b/src/apis/StyleSheet/__tests__/registry-test.js @@ -0,0 +1,54 @@ +/* eslint-env jasmine, jest */ + +import StyleRegistry from '../registry'; + +describe('apis/StyleSheet/registry', () => { + beforeEach(() => { + StyleRegistry.reset(); + }); + + test('register', () => { + const style = { opacity: 0 }; + const id = StyleRegistry.register(style); + expect(typeof id === 'number').toBe(true); + }); + + describe('resolve', () => { + const styleA = { borderWidth: 0, borderColor: 'red', width: 100 }; + const styleB = { position: 'absolute', left: 50, pointerEvents: 'box-only' }; + const styleC = { width: 200 }; + + const testResolve = (a, b, c) => { + // no common properties, different resolving order, same result + const resolve1 = StyleRegistry.resolve([ a, b ]); + expect(resolve1).toMatchSnapshot(); + const resolve2 = StyleRegistry.resolve([ b, a ]); + expect(resolve1).toEqual(resolve2); + + // common properties, different resolving order, different result + const resolve3 = StyleRegistry.resolve([ a, b, c ]); + expect(resolve3).toMatchSnapshot(); + const resolve4 = StyleRegistry.resolve([ c, a, b ]); + expect(resolve4).toMatchSnapshot(); + expect(resolve3).not.toEqual(resolve4); + }; + + test('with stylesheet, resolves to className', () => { + const a = StyleRegistry.register(styleA); + const b = StyleRegistry.register(styleB); + const c = StyleRegistry.register(styleC); + testResolve(a, b, c); + }); + + test('with stylesheet, resolves to mixed', () => { + const a = styleA; + const b = StyleRegistry.register(styleB); + const c = StyleRegistry.register(styleC); + testResolve(a, b, c); + }); + + test('without stylesheet, resolves to inline styles', () => { + testResolve(styleA, styleB, styleC); + }); + }); +}); diff --git a/src/apis/StyleSheet/__tests__/resolveVendorPrefixes-test.js b/src/apis/StyleSheet/__tests__/resolveVendorPrefixes-test.js deleted file mode 100644 index 077e63dd2..000000000 --- a/src/apis/StyleSheet/__tests__/resolveVendorPrefixes-test.js +++ /dev/null @@ -1,13 +0,0 @@ -/* eslint-env jasmine, jest */ - -import resolveVendorPrefixes from '../resolveVendorPrefixes'; - -describe('apis/StyleSheet/resolveVendorPrefixes', () => { - test('handles array values', () => { - const style = { - display: [ '-webkit-flex', 'flex' ] - }; - - expect(resolveVendorPrefixes(style)).toEqual({ display: 'flex' }); - }); -}); diff --git a/src/apis/StyleSheet/createReactDOMStyle.js b/src/apis/StyleSheet/createReactDOMStyle.js index a8bb47470..e173e6750 100644 --- a/src/apis/StyleSheet/createReactDOMStyle.js +++ b/src/apis/StyleSheet/createReactDOMStyle.js @@ -1,10 +1,6 @@ import expandStyle from './expandStyle'; -import flattenStyle from './flattenStyle'; import i18nStyle from './i18nStyle'; -import resolveVendorPrefixes from './resolveVendorPrefixes'; -const createReactDOMStyle = (reactNativeStyle) => resolveVendorPrefixes( - expandStyle(i18nStyle(flattenStyle(reactNativeStyle))) -); +const createReactDOMStyle = (flattenedReactNativeStyle) => expandStyle(i18nStyle(flattenedReactNativeStyle)); module.exports = createReactDOMStyle; diff --git a/src/apis/StyleSheet/css.js b/src/apis/StyleSheet/css.js deleted file mode 100644 index 326913a7b..000000000 --- a/src/apis/StyleSheet/css.js +++ /dev/null @@ -1,42 +0,0 @@ -const DISPLAY_FLEX_CLASSNAME = '__style_df'; -const POINTER_EVENTS_AUTO_CLASSNAME = '__style_pea'; -const POINTER_EVENTS_BOX_NONE_CLASSNAME = '__style_pebn'; -const POINTER_EVENTS_BOX_ONLY_CLASSNAME = '__style_pebo'; -const POINTER_EVENTS_NONE_CLASSNAME = '__style_pen'; - -/* eslint-disable max-len */ -const CSS_RESET = -// reset unwanted styles -'/* React Native */\n' + -'html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}\n' + -'body{margin:0}\n' + -'button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}\n' + -'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}'; - -const CSS_HELPERS = -// vendor prefix 'display:flex' until React supports fallback values for inline styles -`.${DISPLAY_FLEX_CLASSNAME} {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}\n` + -// implement React Native's pointer event values -`.${POINTER_EVENTS_AUTO_CLASSNAME}, .${POINTER_EVENTS_BOX_ONLY_CLASSNAME}, .${POINTER_EVENTS_BOX_NONE_CLASSNAME} * {pointer-events:auto}\n` + -`.${POINTER_EVENTS_NONE_CLASSNAME}, .${POINTER_EVENTS_BOX_ONLY_CLASSNAME} *, .${POINTER_EVENTS_NONE_CLASSNAME} {pointer-events:none}`; -/* eslint-enable max-len */ - -const styleAsClassName = { - display: { - 'flex': DISPLAY_FLEX_CLASSNAME - }, - pointerEvents: { - 'auto': POINTER_EVENTS_AUTO_CLASSNAME, - 'box-none': POINTER_EVENTS_BOX_NONE_CLASSNAME, - 'box-only': POINTER_EVENTS_BOX_ONLY_CLASSNAME, - 'none': POINTER_EVENTS_NONE_CLASSNAME - } -}; - -export const getDefaultStyleSheet = () => `${CSS_RESET}\n${CSS_HELPERS}`; - -export const getStyleAsHelperClassName = (prop, value) => { - return styleAsClassName[prop] && styleAsClassName[prop][value]; -}; diff --git a/src/apis/StyleSheet/flattenStyle.js b/src/apis/StyleSheet/flattenStyle.js index f9e2d64e9..ae914b446 100644 --- a/src/apis/StyleSheet/flattenStyle.js +++ b/src/apis/StyleSheet/flattenStyle.js @@ -1,4 +1,3 @@ -/* eslint-disable */ /** * Copyright (c) 2015-present, Facebook, Inc. * All rights reserved. @@ -10,10 +9,8 @@ * @providesModule flattenStyle * @flow */ -'use strict'; - -var ReactNativePropRegistry = require('../../modules/ReactNativePropRegistry'); -var invariant = require('fbjs/lib/invariant'); +import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry'; +import invariant from 'fbjs/lib/invariant'; function getStyle(style) { if (typeof style === 'number') { @@ -22,22 +19,26 @@ function getStyle(style) { return style; } -function flattenStyle(style: ?StyleObj): ?Object { +function flattenStyle(style) { if (!style) { return undefined; } - invariant(style !== true, 'style may be false but not true'); + + if (process.env.NODE !== 'production') { + invariant(style !== true, 'style may be false but not true'); + } if (!Array.isArray(style)) { return getStyle(style); } - var result = {}; - for (var i = 0, styleLength = style.length; i < styleLength; ++i) { - var computedStyle = flattenStyle(style[i]); + const result = {}; + for (let i = 0, styleLength = style.length; i < styleLength; ++i) { + const computedStyle = flattenStyle(style[i]); if (computedStyle) { - for (var key in computedStyle) { - result[key] = computedStyle[key]; + for (const key in computedStyle) { + const value = computedStyle[key]; + result[key] = value; } } } diff --git a/src/apis/StyleSheet/generateCss.js b/src/apis/StyleSheet/generateCss.js new file mode 100644 index 000000000..433f8fab6 --- /dev/null +++ b/src/apis/StyleSheet/generateCss.js @@ -0,0 +1,38 @@ +import hyphenate from './hyphenate'; +import mapKeyValue from '../../modules/mapKeyValue'; +import normalizeValue from './normalizeValue'; +import prefixAll from 'inline-style-prefixer/static'; + +const RE_VENDOR = /^-/; + +const sortVendorPrefixes = (a, b) => { + const vendorA = RE_VENDOR.test(a); + const vendorB = RE_VENDOR.test(b); + if (vendorA && vendorB || vendorA) { + return -1; + } else { + return 1; + } +}; + +const mapDeclaration = (prop, val) => { + const name = hyphenate(prop); + const value = normalizeValue(prop, val); + if (Array.isArray(val)) { + return val.map((v) => `${name}:${v};`).join(''); + } + return `${name}:${value};`; +}; + +/** + * Generates valid CSS rule body from a JS object + * + * generateCss({ width: 20, color: 'blue' }); + * // => 'width:20px;color:blue;' + */ +const generateCss = (style) => { + const prefixed = prefixAll(style); + return mapKeyValue(prefixed, mapDeclaration).sort(sortVendorPrefixes).join(''); +}; + +module.exports = generateCss; diff --git a/src/apis/StyleSheet/hyphenate.js b/src/apis/StyleSheet/hyphenate.js new file mode 100644 index 000000000..71fca3d41 --- /dev/null +++ b/src/apis/StyleSheet/hyphenate.js @@ -0,0 +1,3 @@ +const RE_1 = /([A-Z])/g; +const RE_2 = /^ms-/; +module.exports = (s) => s.replace(RE_1, '-$1').toLowerCase().replace(RE_2, '-ms-'); diff --git a/src/apis/StyleSheet/index.js b/src/apis/StyleSheet/index.js index 7269936ef..3e90789bb 100644 --- a/src/apis/StyleSheet/index.js +++ b/src/apis/StyleSheet/index.js @@ -1,89 +1,26 @@ -import * as css from './css'; -import createReactDOMStyle from './createReactDOMStyle'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; import flattenStyle from './flattenStyle'; -import React from 'react'; -import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry'; +import initialize from './initialize'; +import injector from './injector'; +import StyleRegistry from './registry'; -let styleElement; -let shouldInsertStyleSheet = ExecutionEnvironment.canUseDOM; - -const STYLE_SHEET_ID = 'react-native-style__'; +initialize(); const absoluteFillObject = { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }; -const defaultStyleSheet = css.getDefaultStyleSheet(); - -const insertStyleSheet = () => { - // check if the server rendered the style sheet - styleElement = document.getElementById(STYLE_SHEET_ID); - // if not, inject the style sheet - if (!styleElement) { - document.head.insertAdjacentHTML( - 'afterbegin', - `<style id="${STYLE_SHEET_ID}">${defaultStyleSheet}</style>` - ); - shouldInsertStyleSheet = false; - } -}; - module.exports = { - /** - * For testing - * @private - */ - _reset() { - if (styleElement) { - document.head.removeChild(styleElement); - styleElement = null; - shouldInsertStyleSheet = true; - } - }, - - absoluteFill: ReactNativePropRegistry.register(absoluteFillObject), - + absoluteFill: StyleRegistry.register(absoluteFillObject), absoluteFillObject, - create(styles) { - if (shouldInsertStyleSheet) { - insertStyleSheet(); - } - const result = {}; - for (const key in styles) { + Object.keys(styles).forEach((key) => { if (process.env.NODE_ENV !== 'production') { require('./StyleSheetValidation').validateStyle(key, styles); } - result[key] = ReactNativePropRegistry.register(styles[key]); - } + result[key] = StyleRegistry.register(styles[key]); + }); return result; }, - hairlineWidth: 1, - flatten: flattenStyle, - - /* @platform web */ - render() { - return <style dangerouslySetInnerHTML={{ __html: defaultStyleSheet }} id={STYLE_SHEET_ID} />; - }, - - /** - * Accepts React props and converts style declarations to classNames when necessary - * @platform web - */ - resolve(props) { - let className = props.className || ''; - const style = createReactDOMStyle(props.style); - for (const prop in style) { - const value = style[prop]; - const replacementClassName = css.getStyleAsHelperClassName(prop, value); - if (replacementClassName) { - className += ` ${replacementClassName}`; - style[prop] = null; - } - } - - return { className, style }; - } + renderToString: injector.getStyleSheetHtml }; diff --git a/src/apis/StyleSheet/initialize.js b/src/apis/StyleSheet/initialize.js new file mode 100644 index 000000000..bf42deb0a --- /dev/null +++ b/src/apis/StyleSheet/initialize.js @@ -0,0 +1,39 @@ +import injector from './injector'; +import StyleRegistry from './registry'; + +const initialize = () => { + injector.addRule( + 'html-reset', + 'html{' + + 'font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;' + + '-webkit-tap-highlight-color:rgba(0,0,0,0)' + + '}' + ); + + injector.addRule( + 'body-reset', + 'body{margin:0}' + ); + + injector.addRule( + 'button-reset', + 'button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}' + ); + + injector.addRule( + 'input-reset', + '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}' + ); + + injector.addRule( + 'pointer-events', + '.rn_pointerEvents\\:auto, .rn_pointerEvents\\:box-only, .rn_pointerEvents\\:box-none * {pointer-events:auto}' + + '.rn_pointerEvents\\:none, .rn_pointerEvents\\:box-only *, .rn_pointerEvents\\:box-none {pointer-events:none}' + ); + + StyleRegistry.initialize(); +}; + +export default initialize; diff --git a/src/apis/StyleSheet/injector.js b/src/apis/StyleSheet/injector.js new file mode 100644 index 000000000..d661e3532 --- /dev/null +++ b/src/apis/StyleSheet/injector.js @@ -0,0 +1,91 @@ +/** + * Based on + * https://github.com/lelandrichardson/react-primitives/blob/master/src/StyleSheet/injector.js + */ + +import asap from 'asap'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; + +const hasOwnProperty = Object.prototype.hasOwnProperty; + +const CLASSNAME_REXEP = /\.rn-([^{;\s]+)/g; +const STYLE_ELEMENT_ID = 'react-native-stylesheet'; +let registry = {}; +let isDirty = false; +let styleNode = null; + +const getStyleText = () => { + /* eslint prefer-template:0 */ + let result = '\n'; + for (const key in registry) { + if (hasOwnProperty.call(registry, key)) { + result += registry[key] + '\n'; + } + } + return result; +}; + +// TODO: SSR support +const getAvailableClassNames = () => { + if (ExecutionEnvironment.canUseDOM) { + if (!styleNode) { + styleNode = document.getElementById(STYLE_ELEMENT_ID); + } + if (styleNode) { + const text = styleNode.textContent; + return text.match(CLASSNAME_REXEP).map((name) => name.slice(1)); + } else { + return []; + } + } else { + return []; + } +}; + +const createStyleHTML = (text) => `<style id="${STYLE_ELEMENT_ID}">${text}</style>`; + +const frame = () => { + if (!isDirty || !ExecutionEnvironment.canUseDOM) { return; } + + isDirty = false; + styleNode = styleNode || document.getElementById(STYLE_ELEMENT_ID); + + if (!styleNode) { + document.head.insertAdjacentHTML('afterbegin', createStyleHTML()); + styleNode = document.getElementById(STYLE_ELEMENT_ID); + } + + const css = getStyleText(); + + if (styleNode.styleSheet) { + styleNode.styleSheet.cssText = css; + } else { + /* eslint no-cond-assign:0 */ + let last; + while (last = styleNode.lastChild) { + styleNode.removeChild(last); + } + styleNode.appendChild(document.createTextNode(css)); + } +}; + +const addRule = (key, rule) => { + if (!registry[key]) { + registry[key] = rule; + if (!isDirty) { + isDirty = true; + if (ExecutionEnvironment.canUseDOM) { + asap(frame); + } + } + } +}; + +const getStyleSheetHtml = () => createStyleHTML(getStyleText()); + +module.exports = { + addRule, + getAvailableClassNames, + getStyleSheetHtml, + reset: () => { registry = {}; } +}; diff --git a/src/apis/StyleSheet/resolveVendorPrefixes.js b/src/apis/StyleSheet/prefixInlineStyles.js similarity index 84% rename from src/apis/StyleSheet/resolveVendorPrefixes.js rename to src/apis/StyleSheet/prefixInlineStyles.js index dfdddbde6..5f24b9c2a 100644 --- a/src/apis/StyleSheet/resolveVendorPrefixes.js +++ b/src/apis/StyleSheet/prefixInlineStyles.js @@ -1,6 +1,6 @@ import prefixAll from 'inline-style-prefixer/static'; -const resolveVendorPrefixes = (style) => { +const prefixInlineStyles = (style) => { const prefixedStyles = prefixAll(style); // React@15 removed undocumented support for fallback values in @@ -15,4 +15,4 @@ const resolveVendorPrefixes = (style) => { return prefixedStyles; }; -module.exports = resolveVendorPrefixes; +module.exports = prefixInlineStyles; diff --git a/src/apis/StyleSheet/registry.js b/src/apis/StyleSheet/registry.js new file mode 100644 index 000000000..ed0ba7d0b --- /dev/null +++ b/src/apis/StyleSheet/registry.js @@ -0,0 +1,178 @@ +/** + * WARNING: changes to this file in particular can cause significant changes to + * the results of render performance benchmarks. + */ + +import createReactDOMStyle from './createReactDOMStyle'; +import flattenArray from '../../modules/flattenArray'; +import flattenStyle from './flattenStyle'; +import generateCss from './generateCss'; +import injector from './injector'; +import mapKeyValue from '../../modules/mapKeyValue'; +import prefixInlineStyles from './prefixInlineStyles'; +import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry'; + +const prefix = 'r'; +const SPACE_REGEXP = /\s/g; +const ESCAPE_SELECTOR_CHARS_REGEXP = /[(),":?.%\\$#]/g; + +/** + * Creates an HTML class name for use on elements + */ +const createClassName = (prop, value) => { + const val = `${value}`.replace(SPACE_REGEXP, '-'); + return `rn-${prop}:${val}`; +}; + +/** + * Inject a CSS rule for a given declaration and record the availability of the + * resulting class name. + */ +let injectedClassNames = {}; +const injectClassNameIfNeeded = (prop, value) => { + const className = createClassName(prop, value); + if (!injectedClassNames[className]) { + // create a valid CSS selector for a given HTML class name + const selector = className.replace(ESCAPE_SELECTOR_CHARS_REGEXP, '\\$&'); + const body = generateCss({ [prop]: value }); + const css = `.${selector}{${body}}`; + // this adds the rule to the buffer to be injected into the document + injector.addRule(className, css); + injectedClassNames[className] = true; + } + + return className; +}; + +/** + * Converts a React Native style object to HTML class names + */ +let resolvedPropsCache = {}; +const registerStyle = (id, flatStyle) => { + const style = createReactDOMStyle(flatStyle); + const className = mapKeyValue(style, (prop, value) => { + if (value != null) { + return injectClassNameIfNeeded(prop, value); + } + }).join(' ').trim(); + + const key = `${prefix}${id}`; + resolvedPropsCache[key] = { className }; + + return id; +}; + +/** + * Resolves a React Native style object to DOM props + */ +const resolveProps = (reactNativeStyle) => { + const flatStyle = flattenStyle(reactNativeStyle); + + if (process.env.__REACT_NATIVE_DEBUG_ENABLED__) { + console.groupCollapsed('[render] deoptimized: resolving uncached styles'); + console.log('source style\n', reactNativeStyle); + console.log('flattened style\n', flatStyle); + } + + const domStyle = createReactDOMStyle(flatStyle); + const style = {}; + + const _className = mapKeyValue(domStyle, (prop, value) => { + if (value != null) { + const singleClassName = createClassName(prop, value); + if (injectedClassNames[singleClassName]) { + return singleClassName; + } else { + style[prop] = value; + } + } + }) + // improves debugging in devtools and snapshots + .join('\n') + .trim(); + + const className = `\n${_className}`; + + const props = { + className, + style: prefixInlineStyles(style) + }; + + if (process.env.__REACT_NATIVE_DEBUG_ENABLED__) { + console.log('DOM props\n', props); + console.groupEnd(); + } + + return props; +}; + +/** + * Caching layer over 'resolveProps' + */ +const resolvePropsIfNeeded = (key, style) => { + if (!key || !resolvedPropsCache[key]) { + // slow: convert style object to props and cache + resolvedPropsCache[key] = resolveProps(style); + } + return resolvedPropsCache[key]; +}; + +/** + * Web style registry + */ +const StyleRegistry = { + initialize() { + const classNames = injector.getAvailableClassNames(); + classNames.forEach((className) => { injectedClassNames[className] = true; }); + }, + + reset() { + injectedClassNames = {}; + resolvedPropsCache = {}; + injector.reset(); + }, + + register(style) { + const id = ReactNativePropRegistry.register(style); + return registerStyle(id, style); + }, + + resolve(reactNativeStyle) { + if (!reactNativeStyle) { + return undefined; + } + + // fast and cachable + if (typeof reactNativeStyle === 'number') { + const key = `${prefix}${reactNativeStyle}`; + return resolvePropsIfNeeded(key, reactNativeStyle); + } + + // convert a RN style object to DOM props + if (!Array.isArray(reactNativeStyle)) { + return resolveProps(reactNativeStyle); + } + + // flatten the array + // [ 1, [ 2, 3 ], { prop: value }, 4, 5 ] => [ 1, 2, 3, { prop: value }, 4, 5 ]; + const flatArray = flattenArray(reactNativeStyle); + let isArrayOfNumbers = true; + for (let i = 0; i < flatArray.length; i++) { + if (typeof flatArray[i] !== 'number') { + isArrayOfNumbers = false; + break; + } + } + + if (isArrayOfNumbers) { + // cache resolved props + const key = `${prefix}${flatArray.join('-')}`; + return resolvePropsIfNeeded(key, flatArray); + } else { + // resolve + return resolveProps(flatArray); + } + } +}; + +module.exports = StyleRegistry; diff --git a/src/apis/StyleSheet/resolveBoxShadow.js b/src/apis/StyleSheet/resolveBoxShadow.js index 4840cd363..37b70239b 100644 --- a/src/apis/StyleSheet/resolveBoxShadow.js +++ b/src/apis/StyleSheet/resolveBoxShadow.js @@ -3,11 +3,13 @@ import normalizeValue from './normalizeValue'; const defaultOffset = { height: 0, width: 0 }; -const applyOpacity = (colorNumber, opacity) => { - const r = (colorNumber & 0xff000000) >>> 24; - const g = (colorNumber & 0x00ff0000) >>> 16; - const b = (colorNumber & 0x0000ff00) >>> 8; - const a = (((colorNumber & 0x000000ff) >>> 0) / 255).toFixed(2); +const applyOpacity = (color, opacity = 1) => { + const nullableColor = normalizeColor(color); + const colorInt = nullableColor === null ? 0x00000000 : nullableColor; + const r = Math.round(((colorInt & 0xff000000) >>> 24)); + const g = Math.round(((colorInt & 0x00ff0000) >>> 16)); + const b = Math.round(((colorInt & 0x0000ff00) >>> 8)); + const a = (((colorInt & 0x000000ff) >>> 0) / 255).toFixed(2); return `rgba(${r},${g},${b},${a * opacity})`; }; @@ -17,10 +19,7 @@ const resolveBoxShadow = (resolvedStyle, style) => { const offsetX = normalizeValue(null, width); const offsetY = normalizeValue(null, height); const blurRadius = normalizeValue(null, style.shadowRadius || 0); - // rgba color - const opacity = style.shadowOpacity != null ? style.shadowOpacity : 1; - const colorNumber = normalizeColor(style.shadowColor) || 0x00000000; - const color = applyOpacity(colorNumber, opacity); + const color = applyOpacity(style.shadowColor, style.shadowOpacity); const boxShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`; resolvedStyle.boxShadow = style.boxShadow ? `${style.boxShadow}, ${boxShadow}` : boxShadow; diff --git a/src/apis/StyleSheet/resolveTransform.js b/src/apis/StyleSheet/resolveTransform.js index 5db839424..7ce4e096f 100644 --- a/src/apis/StyleSheet/resolveTransform.js +++ b/src/apis/StyleSheet/resolveTransform.js @@ -19,7 +19,7 @@ const resolveTransform = (resolvedStyle, style) => { const transform = style.transform.map(mapTransform).join(' '); resolvedStyle.transform = transform; } else if (style.transformMatrix) { - const transform = convertTransformMatrix(style.transformMatrix) + const transform = convertTransformMatrix(style.transformMatrix); resolvedStyle.transform = transform; } }; diff --git a/src/apis/UIManager/index.js b/src/apis/UIManager/index.js index aea7e0538..1901d84a1 100644 --- a/src/apis/UIManager/index.js +++ b/src/apis/UIManager/index.js @@ -1,5 +1,7 @@ import createReactDOMStyle from '../StyleSheet/createReactDOMStyle'; +import flattenStyle from '../StyleSheet/flattenStyle'; import CSSPropertyOperations from 'react-dom/lib/CSSPropertyOperations'; +import prefixInlineStyles from '../StyleSheet/prefixInlineStyles'; const _measureLayout = (node, relativeToNativeNode, callback) => { const relativeNode = relativeToNativeNode || node.parentNode; @@ -41,14 +43,11 @@ const UIManager = { const value = props[prop]; switch (prop) { - case 'style': - // convert styles to DOM-styles - CSSPropertyOperations.setValueForStyles( - node, - createReactDOMStyle(value), - component._reactInternalInstance - ); + case 'style': { + const style = prefixInlineStyles(createReactDOMStyle(flattenStyle(value))); + CSSPropertyOperations.setValueForStyles(node, style, component._reactInternalInstance); break; + } case 'class': case 'className': { const nativeProp = 'class'; diff --git a/src/components/Image/__tests__/__snapshots__/index-test.js.snap b/src/components/Image/__tests__/__snapshots__/index-test.js.snap index 994f7f64a..8ca0ffee0 100644 --- a/src/components/Image/__tests__/__snapshots__/index-test.js.snap +++ b/src/components/Image/__tests__/__snapshots__/index-test.js.snap @@ -1,228 +1,168 @@ exports[`components/Image passes other props through to underlying View 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:cover +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" onResponderGrant={[Function]} role="img" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "cover", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + style={Object {}} /> `; exports[`components/Image prop "accessibilityLabel" 1`] = ` <div aria-label="accessibilityLabel" - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:cover +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "cover", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + style={Object {}} /> `; exports[`components/Image prop "accessible" 1`] = ` <div aria-hidden={true} - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:cover +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "cover", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + style={Object {}} /> `; exports[`components/Image prop "children" 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:cover +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "cover", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - }> + style={Object {}}> <div className="unique" /> </div> @@ -230,58 +170,48 @@ exports[`components/Image prop "children" 1`] = ` exports[`components/Image prop "defaultSource" does not override "height" and "width" styles 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent + +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:cover +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit + +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", "backgroundImage": "url(\"https://google.com/favicon.ico\")", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "cover", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", "height": "20px", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", "width": "40px", } } /> @@ -289,58 +219,48 @@ exports[`components/Image prop "defaultSource" does not override "height" and "w exports[`components/Image prop "defaultSource" sets "height" and "width" styles if missing 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent + +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:cover +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit + +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", "backgroundImage": "url(\"https://google.com/favicon.ico\")", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "cover", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", "height": "10px", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", "width": "20px", } } /> @@ -348,563 +268,421 @@ exports[`components/Image prop "defaultSource" sets "height" and "width" styles exports[`components/Image prop "defaultSource" sets background image when value is a string 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent + +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:cover +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", "backgroundImage": "url(\"https://google.com/favicon.ico\")", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "cover", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", } } /> `; exports[`components/Image prop "defaultSource" sets background image when value is an object 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent + +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:cover +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", "backgroundImage": "url(\"https://google.com/favicon.ico\")", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "cover", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", } } /> `; exports[`components/Image prop "resizeMode" value "contain" 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:contain +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "contain", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + style={Object {}} /> `; exports[`components/Image prop "resizeMode" value "cover" 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:cover +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "cover", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + style={Object {}} /> `; exports[`components/Image prop "resizeMode" value "none" 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:auto +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "auto", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + style={Object {}} /> `; exports[`components/Image prop "resizeMode" value "stretch" 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:100%-100% +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "100% 100%", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + style={Object {}} /> `; exports[`components/Image prop "resizeMode" value "undefined" 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:cover +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "cover", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + style={Object {}} /> `; exports[`components/Image prop "style" correctly supports "resizeMode" property 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:contain +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "contain", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + style={Object {}} /> `; exports[`components/Image prop "testID" 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:cover +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" data-testid="testID" role="img" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "cover", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + style={Object {}} /> `; exports[`components/Image sets correct accessibility role" 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-backgroundPosition:center +rn-backgroundRepeat:no-repeat +rn-backgroundSize:cover +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="img" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "backgroundPosition": "center", - "backgroundRepeat": "no-repeat", - "backgroundSize": "cover", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + style={Object {}} /> `; diff --git a/src/components/Image/index.js b/src/components/Image/index.js index cdcd24a3b..edad6a33d 100644 --- a/src/components/Image/index.js +++ b/src/components/Image/index.js @@ -131,8 +131,8 @@ class Image extends Component { styles.initial, imageSizeStyle, originalStyle, - backgroundImage && { backgroundImage }, - resizeModeStyles[finalResizeMode] + resizeModeStyles[finalResizeMode], + backgroundImage && { backgroundImage } ]); // View doesn't support 'resizeMode' as a style delete style.resizeMode; diff --git a/src/components/Switch/__tests__/__snapshots__/index-test.js.snap b/src/components/Switch/__tests__/__snapshots__/index-test.js.snap index f51ab46c3..08b0f8931 100644 --- a/src/components/Switch/__tests__/__snapshots__/index-test.js.snap +++ b/src/components/Switch/__tests__/__snapshots__/index-test.js.snap @@ -1,855 +1,705 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-cursor:pointer +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit + +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none +rn-userSelect:none" style={ Object { - "MozBoxSizing": "border-box", - "MozUserSelect": "none", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "WebkitUserSelect": "none", - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "cursor": "pointer", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", "height": "20px", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "msUserSelect": "none", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - "userSelect": "none", "width": "40px", } }> <div - className=" __style_df" + className=" + rn-alignItems:stretch + + + + + + rn-borderTopStyle:solid + rn-borderRightStyle:solid + rn-borderBottomStyle:solid + rn-borderLeftStyle:solid + rn-borderTopWidth:0px + rn-borderRightWidth:0px + rn-borderBottomWidth:0px + rn-borderLeftWidth:0px + rn-bottom:0px + rn-boxSizing:border-box + rn-color:inherit + rn-display:flex + rn-flexBasis:auto + rn-flexDirection:column + rn-flexShrink:0 + rn-font:inherit + rn-height:70% + rn-left:0px + rn-listStyle:none + rn-marginTop:auto + rn-marginRight:auto + rn-marginBottom:auto + rn-marginLeft:auto + rn-minHeight:0px + rn-minWidth:0px + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:absolute + rn-right:0px + rn-textAlign:inherit + rn-textDecoration:none + rn-top:0px + rn-transitionDuration:0.1s + rn-width:90%" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "WebkitTransitionDuration": "0.1s", - "alignItems": "stretch", "backgroundColor": "#939393", "borderBottomLeftRadius": "10px", "borderBottomRightRadius": "10px", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", "borderTopLeftRadius": "10px", "borderTopRightRadius": "10px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "bottom": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "height": "70%", - "left": "0px", - "listStyle": "none", - "marginBottom": "auto", - "marginLeft": "auto", - "marginRight": "auto", - "marginTop": "auto", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "absolute", - "right": "0px", - "textAlign": "inherit", - "textDecoration": "none", - "top": "0px", - "transitionDuration": "0.1s", - "width": "90%", } } /> <div - className=" __style_df" + className=" + rn-alignItems:stretch + rn-alignSelf:flex-start + + rn-borderTopLeftRadius:100% + rn-borderTopRightRadius:100% + rn-borderBottomRightRadius:100% + rn-borderBottomLeftRadius:100% + rn-borderTopStyle:solid + rn-borderRightStyle:solid + rn-borderBottomStyle:solid + rn-borderLeftStyle:solid + rn-borderTopWidth:0px + rn-borderRightWidth:0px + rn-borderBottomWidth:0px + rn-borderLeftWidth:0px + rn-boxShadow:0px-1px-3px-rgba(0,0,0,0.5) + rn-boxSizing:border-box + rn-color:inherit + rn-display:flex + rn-flexBasis:auto + rn-flexDirection:column + rn-flexShrink:0 + rn-font:inherit + + rn-listStyle:none + rn-marginTop:0px + rn-marginRight:0px + rn-marginBottom:0px + rn-marginLeft:0px + rn-minHeight:0px + rn-minWidth:0px + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:relative + rn-textAlign:inherit + rn-textDecoration:none + + rn-transitionDuration:0.1s" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitAlignSelf": "flex-start", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, "WebkitTransform": "translateX(0%)", - "WebkitTransitionDuration": "0.1s", - "alignItems": "stretch", - "alignSelf": "flex-start", "backgroundColor": "#FAFAFA", - "borderBottomLeftRadius": "100%", - "borderBottomRightRadius": "100%", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopLeftRadius": "100%", - "borderTopRightRadius": "100%", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxShadow": "0px 1px 3px rgba(0,0,0,0.5)", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", "height": "20px", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexItemAlign": "start", - "msFlexNegative": 0, - "msPreferredSize": "auto", "msTransform": "translateX(0%)", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", "transform": "translateX(0%)", - "transitionDuration": "0.1s", "width": "20px", } } /> <input checked={false} - className="" + className=" + rn-bottom:0px + rn-cursor:inherit + rn-height:100% + rn-left:0px + rn-marginTop:0px + rn-marginRight:0px + rn-marginBottom:0px + rn-marginLeft:0px + rn-opacity:0 + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:absolute + rn-right:0px + rn-top:0px + rn-width:100%" disabled={false} onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - style={ - Object { - "bottom": "0px", - "cursor": "inherit", - "height": "100%", - "left": "0px", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "opacity": 0, - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "absolute", - "right": "0px", - "top": "0px", - "width": "100%", - } - } + style={Object {}} type="checkbox" /> </div> `; exports[`components/Switch disabled when "true" a disabled checkbox is rendered 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-cursor:default +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit + +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none +rn-userSelect:none" style={ Object { - "MozBoxSizing": "border-box", - "MozUserSelect": "none", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "WebkitUserSelect": "none", - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "cursor": "default", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", "height": "20px", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "msUserSelect": "none", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - "userSelect": "none", "width": "40px", } }> <div - className=" __style_df" + className=" + rn-alignItems:stretch + rn-backgroundColor:#D5D5D5 + + + + + rn-borderTopStyle:solid + rn-borderRightStyle:solid + rn-borderBottomStyle:solid + rn-borderLeftStyle:solid + rn-borderTopWidth:0px + rn-borderRightWidth:0px + rn-borderBottomWidth:0px + rn-borderLeftWidth:0px + rn-bottom:0px + rn-boxSizing:border-box + rn-color:inherit + rn-display:flex + rn-flexBasis:auto + rn-flexDirection:column + rn-flexShrink:0 + rn-font:inherit + rn-height:70% + rn-left:0px + rn-listStyle:none + rn-marginTop:auto + rn-marginRight:auto + rn-marginBottom:auto + rn-marginLeft:auto + rn-minHeight:0px + rn-minWidth:0px + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:absolute + rn-right:0px + rn-textAlign:inherit + rn-textDecoration:none + rn-top:0px + rn-transitionDuration:0.1s + rn-width:90%" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "WebkitTransitionDuration": "0.1s", - "alignItems": "stretch", - "backgroundColor": "#D5D5D5", "borderBottomLeftRadius": "10px", "borderBottomRightRadius": "10px", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", "borderTopLeftRadius": "10px", "borderTopRightRadius": "10px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "bottom": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "height": "70%", - "left": "0px", - "listStyle": "none", - "marginBottom": "auto", - "marginLeft": "auto", - "marginRight": "auto", - "marginTop": "auto", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "absolute", - "right": "0px", - "textAlign": "inherit", - "textDecoration": "none", - "top": "0px", - "transitionDuration": "0.1s", - "width": "90%", } } /> <div - className=" __style_df" + className=" + rn-alignItems:stretch + rn-alignSelf:flex-start + rn-backgroundColor:#BDBDBD + rn-borderTopLeftRadius:100% + rn-borderTopRightRadius:100% + rn-borderBottomRightRadius:100% + rn-borderBottomLeftRadius:100% + rn-borderTopStyle:solid + rn-borderRightStyle:solid + rn-borderBottomStyle:solid + rn-borderLeftStyle:solid + rn-borderTopWidth:0px + rn-borderRightWidth:0px + rn-borderBottomWidth:0px + rn-borderLeftWidth:0px + rn-boxShadow:0px-1px-3px-rgba(0,0,0,0.5) + rn-boxSizing:border-box + rn-color:inherit + rn-display:flex + rn-flexBasis:auto + rn-flexDirection:column + rn-flexShrink:0 + rn-font:inherit + + rn-listStyle:none + rn-marginTop:0px + rn-marginRight:0px + rn-marginBottom:0px + rn-marginLeft:0px + rn-minHeight:0px + rn-minWidth:0px + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:relative + rn-textAlign:inherit + rn-textDecoration:none + + rn-transitionDuration:0.1s" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitAlignSelf": "flex-start", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, "WebkitTransform": "translateX(0%)", - "WebkitTransitionDuration": "0.1s", - "alignItems": "stretch", - "alignSelf": "flex-start", - "backgroundColor": "#BDBDBD", - "borderBottomLeftRadius": "100%", - "borderBottomRightRadius": "100%", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopLeftRadius": "100%", - "borderTopRightRadius": "100%", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxShadow": "0px 1px 3px rgba(0,0,0,0.5)", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", "height": "20px", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexItemAlign": "start", - "msFlexNegative": 0, - "msPreferredSize": "auto", "msTransform": "translateX(0%)", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", "transform": "translateX(0%)", - "transitionDuration": "0.1s", "width": "20px", } } /> <input checked={false} - className="" + className=" + rn-bottom:0px + rn-cursor:inherit + rn-height:100% + rn-left:0px + rn-marginTop:0px + rn-marginRight:0px + rn-marginBottom:0px + rn-marginLeft:0px + rn-opacity:0 + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:absolute + rn-right:0px + rn-top:0px + rn-width:100%" disabled={true} onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - style={ - Object { - "bottom": "0px", - "cursor": "inherit", - "height": "100%", - "left": "0px", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "opacity": 0, - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "absolute", - "right": "0px", - "top": "0px", - "width": "100%", - } - } + style={Object {}} type="checkbox" /> </div> `; exports[`components/Switch value when "false" an unchecked checkbox is rendered 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-cursor:pointer +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit + +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none +rn-userSelect:none" style={ Object { - "MozBoxSizing": "border-box", - "MozUserSelect": "none", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "WebkitUserSelect": "none", - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "cursor": "pointer", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", "height": "20px", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "msUserSelect": "none", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - "userSelect": "none", "width": "40px", } }> <div - className=" __style_df" + className=" + rn-alignItems:stretch + + + + + + rn-borderTopStyle:solid + rn-borderRightStyle:solid + rn-borderBottomStyle:solid + rn-borderLeftStyle:solid + rn-borderTopWidth:0px + rn-borderRightWidth:0px + rn-borderBottomWidth:0px + rn-borderLeftWidth:0px + rn-bottom:0px + rn-boxSizing:border-box + rn-color:inherit + rn-display:flex + rn-flexBasis:auto + rn-flexDirection:column + rn-flexShrink:0 + rn-font:inherit + rn-height:70% + rn-left:0px + rn-listStyle:none + rn-marginTop:auto + rn-marginRight:auto + rn-marginBottom:auto + rn-marginLeft:auto + rn-minHeight:0px + rn-minWidth:0px + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:absolute + rn-right:0px + rn-textAlign:inherit + rn-textDecoration:none + rn-top:0px + rn-transitionDuration:0.1s + rn-width:90%" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "WebkitTransitionDuration": "0.1s", - "alignItems": "stretch", "backgroundColor": "#939393", "borderBottomLeftRadius": "10px", "borderBottomRightRadius": "10px", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", "borderTopLeftRadius": "10px", "borderTopRightRadius": "10px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "bottom": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "height": "70%", - "left": "0px", - "listStyle": "none", - "marginBottom": "auto", - "marginLeft": "auto", - "marginRight": "auto", - "marginTop": "auto", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "absolute", - "right": "0px", - "textAlign": "inherit", - "textDecoration": "none", - "top": "0px", - "transitionDuration": "0.1s", - "width": "90%", } } /> <div - className=" __style_df" + className=" + rn-alignItems:stretch + rn-alignSelf:flex-start + + rn-borderTopLeftRadius:100% + rn-borderTopRightRadius:100% + rn-borderBottomRightRadius:100% + rn-borderBottomLeftRadius:100% + rn-borderTopStyle:solid + rn-borderRightStyle:solid + rn-borderBottomStyle:solid + rn-borderLeftStyle:solid + rn-borderTopWidth:0px + rn-borderRightWidth:0px + rn-borderBottomWidth:0px + rn-borderLeftWidth:0px + rn-boxShadow:0px-1px-3px-rgba(0,0,0,0.5) + rn-boxSizing:border-box + rn-color:inherit + rn-display:flex + rn-flexBasis:auto + rn-flexDirection:column + rn-flexShrink:0 + rn-font:inherit + + rn-listStyle:none + rn-marginTop:0px + rn-marginRight:0px + rn-marginBottom:0px + rn-marginLeft:0px + rn-minHeight:0px + rn-minWidth:0px + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:relative + rn-textAlign:inherit + rn-textDecoration:none + + rn-transitionDuration:0.1s" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitAlignSelf": "flex-start", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, "WebkitTransform": "translateX(0%)", - "WebkitTransitionDuration": "0.1s", - "alignItems": "stretch", - "alignSelf": "flex-start", "backgroundColor": "#FAFAFA", - "borderBottomLeftRadius": "100%", - "borderBottomRightRadius": "100%", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopLeftRadius": "100%", - "borderTopRightRadius": "100%", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxShadow": "0px 1px 3px rgba(0,0,0,0.5)", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", "height": "20px", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexItemAlign": "start", - "msFlexNegative": 0, - "msPreferredSize": "auto", "msTransform": "translateX(0%)", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", "transform": "translateX(0%)", - "transitionDuration": "0.1s", "width": "20px", } } /> <input checked={false} - className="" + className=" + rn-bottom:0px + rn-cursor:inherit + rn-height:100% + rn-left:0px + rn-marginTop:0px + rn-marginRight:0px + rn-marginBottom:0px + rn-marginLeft:0px + rn-opacity:0 + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:absolute + rn-right:0px + rn-top:0px + rn-width:100%" disabled={false} onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - style={ - Object { - "bottom": "0px", - "cursor": "inherit", - "height": "100%", - "left": "0px", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "opacity": 0, - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "absolute", - "right": "0px", - "top": "0px", - "width": "100%", - } - } + style={Object {}} type="checkbox" /> </div> `; exports[`components/Switch value when "true" a checked checkbox is rendered 1`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-cursor:pointer +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit + +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none +rn-userSelect:none" style={ Object { - "MozBoxSizing": "border-box", - "MozUserSelect": "none", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "WebkitUserSelect": "none", - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "cursor": "pointer", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", "height": "20px", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "msUserSelect": "none", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - "userSelect": "none", "width": "40px", } }> <div - className=" __style_df" + className=" + rn-alignItems:stretch + + + + + + rn-borderTopStyle:solid + rn-borderRightStyle:solid + rn-borderBottomStyle:solid + rn-borderLeftStyle:solid + rn-borderTopWidth:0px + rn-borderRightWidth:0px + rn-borderBottomWidth:0px + rn-borderLeftWidth:0px + rn-bottom:0px + rn-boxSizing:border-box + rn-color:inherit + rn-display:flex + rn-flexBasis:auto + rn-flexDirection:column + rn-flexShrink:0 + rn-font:inherit + rn-height:70% + rn-left:0px + rn-listStyle:none + rn-marginTop:auto + rn-marginRight:auto + rn-marginBottom:auto + rn-marginLeft:auto + rn-minHeight:0px + rn-minWidth:0px + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:absolute + rn-right:0px + rn-textAlign:inherit + rn-textDecoration:none + rn-top:0px + rn-transitionDuration:0.1s + rn-width:90%" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "WebkitTransitionDuration": "0.1s", - "alignItems": "stretch", "backgroundColor": "#A3D3CF", "borderBottomLeftRadius": "10px", "borderBottomRightRadius": "10px", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", "borderTopLeftRadius": "10px", "borderTopRightRadius": "10px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "bottom": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "height": "70%", - "left": "0px", - "listStyle": "none", - "marginBottom": "auto", - "marginLeft": "auto", - "marginRight": "auto", - "marginTop": "auto", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "absolute", - "right": "0px", - "textAlign": "inherit", - "textDecoration": "none", - "top": "0px", - "transitionDuration": "0.1s", - "width": "90%", } } /> <div - className=" __style_df" + className=" + rn-alignItems:stretch + rn-alignSelf:flex-start + + rn-borderTopLeftRadius:100% + rn-borderTopRightRadius:100% + rn-borderBottomRightRadius:100% + rn-borderBottomLeftRadius:100% + rn-borderTopStyle:solid + rn-borderRightStyle:solid + rn-borderBottomStyle:solid + rn-borderLeftStyle:solid + rn-borderTopWidth:0px + rn-borderRightWidth:0px + rn-borderBottomWidth:0px + rn-borderLeftWidth:0px + rn-boxShadow:0px-1px-3px-rgba(0,0,0,0.5) + rn-boxSizing:border-box + rn-color:inherit + rn-display:flex + rn-flexBasis:auto + rn-flexDirection:column + rn-flexShrink:0 + rn-font:inherit + + rn-listStyle:none + rn-marginTop:0px + rn-marginRight:0px + rn-marginBottom:0px + rn-marginLeft:0px + rn-minHeight:0px + rn-minWidth:0px + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:relative + rn-textAlign:inherit + rn-textDecoration:none + + rn-transitionDuration:0.1s" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitAlignSelf": "flex-start", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, "WebkitTransform": "translateX(100%)", - "WebkitTransitionDuration": "0.1s", - "alignItems": "stretch", - "alignSelf": "flex-start", "backgroundColor": "#009688", - "borderBottomLeftRadius": "100%", - "borderBottomRightRadius": "100%", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopLeftRadius": "100%", - "borderTopRightRadius": "100%", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxShadow": "0px 1px 3px rgba(0,0,0,0.5)", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", "height": "20px", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexItemAlign": "start", - "msFlexNegative": 0, - "msPreferredSize": "auto", "msTransform": "translateX(100%)", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", "transform": "translateX(100%)", - "transitionDuration": "0.1s", "width": "20px", } } /> <input checked={true} - className="" + className=" + rn-bottom:0px + rn-cursor:inherit + rn-height:100% + rn-left:0px + rn-marginTop:0px + rn-marginRight:0px + rn-marginBottom:0px + rn-marginLeft:0px + rn-opacity:0 + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:absolute + rn-right:0px + rn-top:0px + rn-width:100%" disabled={false} onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - style={ - Object { - "bottom": "0px", - "cursor": "inherit", - "height": "100%", - "left": "0px", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "opacity": 0, - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "absolute", - "right": "0px", - "top": "0px", - "width": "100%", - } - } + style={Object {}} type="checkbox" /> </div> `; diff --git a/src/components/Text/__tests__/__snapshots__/index-test.js.snap b/src/components/Text/__tests__/__snapshots__/index-test.js.snap index 1357cd611..58bff19e9 100644 --- a/src/components/Text/__tests__/__snapshots__/index-test.js.snap +++ b/src/components/Text/__tests__/__snapshots__/index-test.js.snap @@ -1,26 +1,14 @@ exports[`components/Text prop "children" 1`] = ` <span - className="" + className="rn-borderTopWidth:0px rn-borderRightWidth:0px rn-borderBottomWidth:0px rn-borderLeftWidth:0px rn-color:inherit rn-display:inline rn-font:inherit rn-marginTop:0px rn-marginRight:0px rn-marginBottom:0px rn-marginLeft:0px rn-paddingTop:0px rn-paddingRight:0px rn-paddingBottom:0px rn-paddingLeft:0px rn-textDecoration:none rn-whiteSpace:pre-wrap rn-wordWrap:break-word" style={ - Object { - "borderBottomWidth": "0px", - "borderLeftWidth": "0px", - "borderRightWidth": "0px", - "borderTopWidth": "0px", - "color": "inherit", - "display": "inline", - "font": "inherit", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "textDecoration": "none", - "wordWrap": "break-word", - } + Array [ + 3, + undefined, + false, + false, + undefined, + ] }> children </span> @@ -28,86 +16,67 @@ exports[`components/Text prop "children" 1`] = ` exports[`components/Text prop "onPress" 1`] = ` <span - className="" + className=" +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-color:inherit +rn-cursor:pointer +rn-display:inline +rn-font:inherit +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-textDecoration:none +rn-whiteSpace:pre-wrap +rn-wordWrap:break-word" onClick={[Function]} onKeyDown={[Function]} - style={ - Object { - "borderBottomWidth": "0px", - "borderLeftWidth": "0px", - "borderRightWidth": "0px", - "borderTopWidth": "0px", - "color": "inherit", - "cursor": "pointer", - "display": "inline", - "font": "inherit", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "textDecoration": "none", - "wordWrap": "break-word", - } - } + style={Object {}} tabIndex={0} /> `; exports[`components/Text prop "selectable" 1`] = ` <span - className="" + className="rn-borderTopWidth:0px rn-borderRightWidth:0px rn-borderBottomWidth:0px rn-borderLeftWidth:0px rn-color:inherit rn-display:inline rn-font:inherit rn-marginTop:0px rn-marginRight:0px rn-marginBottom:0px rn-marginLeft:0px rn-paddingTop:0px rn-paddingRight:0px rn-paddingBottom:0px rn-paddingLeft:0px rn-textDecoration:none rn-whiteSpace:pre-wrap rn-wordWrap:break-word" style={ - Object { - "borderBottomWidth": "0px", - "borderLeftWidth": "0px", - "borderRightWidth": "0px", - "borderTopWidth": "0px", - "color": "inherit", - "display": "inline", - "font": "inherit", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "textDecoration": "none", - "wordWrap": "break-word", - } + Array [ + 3, + undefined, + false, + false, + undefined, + ] } /> `; exports[`components/Text prop "selectable" 2`] = ` <span - className="" - style={ - Object { - "MozUserSelect": "none", - "WebkitUserSelect": "none", - "borderBottomWidth": "0px", - "borderLeftWidth": "0px", - "borderRightWidth": "0px", - "borderTopWidth": "0px", - "color": "inherit", - "display": "inline", - "font": "inherit", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "msUserSelect": "none", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "textDecoration": "none", - "userSelect": "none", - "wordWrap": "break-word", - } - } /> + className=" +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-color:inherit +rn-display:inline +rn-font:inherit +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-textDecoration:none +rn-userSelect:none +rn-whiteSpace:pre-wrap +rn-wordWrap:break-word" + style={Object {}} /> `; diff --git a/src/components/Text/index.js b/src/components/Text/index.js index 91bbde1e9..5f3957b79 100644 --- a/src/components/Text/index.js +++ b/src/components/Text/index.js @@ -78,6 +78,7 @@ const styles = StyleSheet.create({ margin: 0, padding: 0, textDecorationLine: 'none', + whiteSpace: 'pre-wrap', wordWrap: 'break-word' }, notSelectable: { diff --git a/src/components/View/__tests__/__snapshots__/index-test.js.snap b/src/components/View/__tests__/__snapshots__/index-test.js.snap index 47fe8c99c..a0ed7ad2e 100644 --- a/src/components/View/__tests__/__snapshots__/index-test.js.snap +++ b/src/components/View/__tests__/__snapshots__/index-test.js.snap @@ -1,525 +1,399 @@ exports[`components/View prop "children" 1`] = ` <div - className=" __style_df" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - }> + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" + style={Object {}}> <div - className=" __style_df" + className=" + rn-alignItems:stretch + rn-backgroundColor:transparent + rn-borderTopStyle:solid + rn-borderRightStyle:solid + rn-borderBottomStyle:solid + rn-borderLeftStyle:solid + rn-borderTopWidth:0px + rn-borderRightWidth:0px + rn-borderBottomWidth:0px + rn-borderLeftWidth:0px + rn-boxSizing:border-box + rn-color:inherit + rn-display:flex + rn-flexBasis:auto + rn-flexDirection:column + rn-flexShrink:0 + rn-font:inherit + rn-listStyle:none + rn-marginTop:0px + rn-marginRight:0px + rn-marginBottom:0px + rn-marginLeft:0px + rn-minHeight:0px + rn-minWidth:0px + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:relative + rn-textAlign:inherit + rn-textDecoration:none" data-testid="1" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + style={Object {}} /> </div> `; exports[`components/View prop "pointerEvents" 1`] = ` <div - className=" __style_df __style_pebo" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px + +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "pointerEvents": null, - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", + "pointerEvents": "box-only", } } /> `; exports[`components/View prop "style" 1`] = ` <div - className=" __style_df" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" + style={Object {}} /> `; exports[`components/View prop "style" 2`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex + + +rn-flexBasis:auto +rn-flexDirection:column +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", "WebkitFlexGrow": 1, "WebkitFlexShrink": 1, - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", "flexGrow": 1, "flexShrink": 1, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", "msFlexNegative": 1, "msFlexPositive": 1, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", } } /> `; exports[`components/View prop "style" 3`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column + +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", "WebkitFlexShrink": 1, - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", "flexShrink": 1, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", "msFlexNegative": 1, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", } } /> `; exports[`components/View prop "style" 4`] = ` <div - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex + + +rn-flexBasis:auto +rn-flexDirection:column +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" style={ Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", "WebkitFlexGrow": 1, "WebkitFlexShrink": 2, - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", "flexGrow": 1, "flexShrink": 2, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", "msFlexNegative": 2, "msFlexPositive": 1, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", } } /> `; exports[`components/View rendered element is a "div" by default 1`] = ` <div - className=" __style_df" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" + style={Object {}} /> `; exports[`components/View rendered element is a "span" when inside <View accessibilityRole="button" /> 1`] = ` <button - className=" __style_df" + className=" +rn-alignItems:stretch +rn-backgroundColor:transparent +rn-borderTopStyle:solid +rn-borderRightStyle:solid +rn-borderBottomStyle:solid +rn-borderLeftStyle:solid +rn-borderTopWidth:0px +rn-borderRightWidth:0px +rn-borderBottomWidth:0px +rn-borderLeftWidth:0px +rn-boxSizing:border-box +rn-color:inherit +rn-display:flex +rn-flexBasis:auto +rn-flexDirection:column +rn-flexShrink:0 +rn-font:inherit +rn-listStyle:none +rn-marginTop:0px +rn-marginRight:0px +rn-marginBottom:0px +rn-marginLeft:0px +rn-minHeight:0px +rn-minWidth:0px +rn-paddingTop:0px +rn-paddingRight:0px +rn-paddingBottom:0px +rn-paddingLeft:0px +rn-position:relative +rn-textAlign:inherit +rn-textDecoration:none" role="button" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } + style={Object {}} type="button"> <span - className=" __style_df" - style={ - Object { - "MozBoxSizing": "border-box", - "WebkitAlignItems": "stretch", - "WebkitBoxAlign": "stretch", - "WebkitBoxDirection": "normal", - "WebkitBoxOrient": "vertical", - "WebkitFlexBasis": "auto", - "WebkitFlexDirection": "column", - "WebkitFlexShrink": 0, - "alignItems": "stretch", - "backgroundColor": "transparent", - "borderBottomStyle": "solid", - "borderBottomWidth": "0px", - "borderLeftStyle": "solid", - "borderLeftWidth": "0px", - "borderRightStyle": "solid", - "borderRightWidth": "0px", - "borderTopStyle": "solid", - "borderTopWidth": "0px", - "boxSizing": "border-box", - "color": "inherit", - "display": null, - "flexBasis": "auto", - "flexDirection": "column", - "flexShrink": 0, - "font": "inherit", - "listStyle": "none", - "marginBottom": "0px", - "marginLeft": "0px", - "marginRight": "0px", - "marginTop": "0px", - "minHeight": "0px", - "minWidth": "0px", - "msFlexAlign": "stretch", - "msFlexDirection": "column", - "msFlexNegative": 0, - "msPreferredSize": "auto", - "paddingBottom": "0px", - "paddingLeft": "0px", - "paddingRight": "0px", - "paddingTop": "0px", - "position": "relative", - "textAlign": "inherit", - "textDecoration": "none", - } - } /> + className=" + rn-alignItems:stretch + rn-backgroundColor:transparent + rn-borderTopStyle:solid + rn-borderRightStyle:solid + rn-borderBottomStyle:solid + rn-borderLeftStyle:solid + rn-borderTopWidth:0px + rn-borderRightWidth:0px + rn-borderBottomWidth:0px + rn-borderLeftWidth:0px + rn-boxSizing:border-box + rn-color:inherit + rn-display:flex + rn-flexBasis:auto + rn-flexDirection:column + rn-flexShrink:0 + rn-font:inherit + rn-listStyle:none + rn-marginTop:0px + rn-marginRight:0px + rn-marginBottom:0px + rn-marginLeft:0px + rn-minHeight:0px + rn-minWidth:0px + rn-paddingTop:0px + rn-paddingRight:0px + rn-paddingBottom:0px + rn-paddingLeft:0px + rn-position:relative + rn-textAlign:inherit + rn-textDecoration:none" + style={Object {}} /> </button> `; diff --git a/src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap b/src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap index 415967432..2a0a6776b 100644 --- a/src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap +++ b/src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap @@ -1,75 +1,45 @@ exports[`modules/createDOMElement prop "accessibilityLabel" 1`] = ` <span - aria-label="accessibilityLabel" - className="" - style={Object {}} /> + aria-label="accessibilityLabel" /> `; exports[`modules/createDOMElement prop "accessibilityLiveRegion" 1`] = ` <span - aria-live="polite" - className="" - style={Object {}} /> + aria-live="polite" /> `; exports[`modules/createDOMElement prop "accessibilityRole" button 1`] = ` <button - className="" role="button" - style={Object {}} type="button" /> `; exports[`modules/createDOMElement prop "accessibilityRole" link and target="_blank" 1`] = ` <a - className="" rel=" noopener noreferrer" role="link" - style={Object {}} target="_blank" /> `; exports[`modules/createDOMElement prop "accessibilityRole" roles 1`] = ` <header - className="" - role="banner" - style={Object {}} /> + role="banner" /> `; -exports[`modules/createDOMElement prop "accessible" 1`] = ` -<span - className="" - style={Object {}} /> -`; +exports[`modules/createDOMElement prop "accessible" 1`] = `<span />`; -exports[`modules/createDOMElement prop "accessible" 2`] = ` -<span - className="" - style={Object {}} /> -`; +exports[`modules/createDOMElement prop "accessible" 2`] = `<span />`; exports[`modules/createDOMElement prop "accessible" 3`] = ` <span - aria-hidden={true} - className="" - style={Object {}} /> + aria-hidden={true} /> `; exports[`modules/createDOMElement prop "testID" 1`] = ` <span - className="" - data-testid="Example.testID" - style={Object {}} /> + data-testid="Example.testID" /> `; -exports[`modules/createDOMElement renders correct DOM element 1`] = ` -<span - className="" - style={Object {}} /> -`; +exports[`modules/createDOMElement renders correct DOM element 1`] = `<span />`; -exports[`modules/createDOMElement renders correct DOM element 2`] = ` -<main - className="" - style={Object {}} /> -`; +exports[`modules/createDOMElement renders correct DOM element 2`] = `<main />`; diff --git a/src/modules/createDOMElement/index.js b/src/modules/createDOMElement/index.js index 19565987a..f1fb35c70 100644 --- a/src/modules/createDOMElement/index.js +++ b/src/modules/createDOMElement/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import StyleSheet from '../../apis/StyleSheet'; +import StyleRegistry from '../../apis/StyleSheet/registry'; const emptyObject = {}; @@ -33,7 +33,7 @@ const createDOMElement = (component, rnProps = emptyObject) => { const accessibilityComponent = accessibilityRole && roleComponents[accessibilityRole]; const Component = accessibilityComponent || component; - Object.assign(domProps, StyleSheet.resolve(domProps)); + const { className, style } = StyleRegistry.resolve(domProps.style) || emptyObject; if (!accessible) { domProps['aria-hidden'] = true; } if (accessibilityLabel) { domProps['aria-label'] = accessibilityLabel; } @@ -47,6 +47,12 @@ const createDOMElement = (component, rnProps = emptyObject) => { domProps.rel = `${domProps.rel || ''} noopener noreferrer`; } } + if (className && className !== '') { + domProps.className = domProps.className ? `${domProps.className} ${className}` : className; + } + if (style) { + domProps.style = style; + } if (type) { domProps.type = type; } return ( diff --git a/src/modules/flattenArray/index.js b/src/modules/flattenArray/index.js new file mode 100644 index 000000000..353f99c4c --- /dev/null +++ b/src/modules/flattenArray/index.js @@ -0,0 +1,18 @@ +function flattenArray(array) { + function flattenDown(array, result) { + for (let i = 0; i < array.length; i++) { + const value = array[i]; + + if (Array.isArray(value)) { + flattenDown(value, result); + } else if (value != null && value !== false) { + result.push(value); + } + } + + return result; + } + return flattenDown(array, []); +} + +module.exports = flattenArray; diff --git a/src/modules/mapKeyValue/index.js b/src/modules/mapKeyValue/index.js new file mode 100644 index 000000000..6d6f8fae5 --- /dev/null +++ b/src/modules/mapKeyValue/index.js @@ -0,0 +1,13 @@ +const hasOwnProperty = Object.prototype.hasOwnProperty; + +const mapKeyValue = (obj, fn) => { + const result = []; + for (const key in obj) { + if (hasOwnProperty.call(obj, key)) { + result.push(fn(key, obj[key])); + } + } + return result; +}; + +module.exports = mapKeyValue; diff --git a/yarn.lock b/yarn.lock index dae328f7b..c34a879ec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -292,7 +292,7 @@ arrify@^1.0.0, arrify@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" -asap@~2.0.3: +asap@^2.0.5, asap@~2.0.3: version "2.0.5" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"