0.0.85

Fix #425

docs/components/View.md

@@ -213,6 +213,7 @@ Controls whether the View can be the target of touch events. The enhanced
 + `opacity`
 + `order`
 + `outline` ‡
++ `outlineColor` ‡
 + `overflow`
 + `overflowX` ‡
 + `overflowY` ‡

docs/guides/accessibility.md

@@ -39,7 +39,10 @@ using `aria-label`.
 
 In some cases, we also want to alert the end user of the type of selected
 component (i.e., that it is a “button”). To provide more context to screen
-readers, you should specify the `accessibilityRole` property.
+readers, you should specify the `accessibilityRole` property. (Note that React
+Native for Web provides a compatibility mapping of equivalent
+`accessibilityTraits` and `accessibilityComponentType` values to
+`accessibilityRole`).
 
 The `accessibilityRole` prop is used to infer an [analogous HTML
 element][html-aria-url] to use in addition to the resulting ARIA `role`, where

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.0.82",
+  "version": "0.0.85",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [
@@ -17,7 +17,7 @@
     "examples": "start-storybook -p 9001 -c ./examples/.storybook --dont-track",
     "fmt": "find performance src -name '*.js' | grep -v -E '(node_modules|dist)' | xargs prettier --print-width=100 --single-quote --write",
     "lint": "eslint performance src --ignore-path .gitignore",
-    "prepare": "npm run build && npm run build:umd",
+    "release": "npm run build && npm run build:umd && npm publish",
     "test": "npm run lint && npm run test:jest",
     "test:jest": "jest",
     "test:watch": "npm run test:jest -- --watch"

performance/README.md

@@ -22,18 +22,19 @@ Typical render timings*: mean ± two standard deviations
 
 | Implementation                       | Deep tree (ms)    | Wide tree (ms)    | Tweets (ms)       |
 | :--- | ---: | ---: | ---: |
-| `css-modules`                        |  `87.68` `±13.29` | `171.96` `±14.91` | |
-| `react-native-web/stylesheet@0.0.81` |  `90.59` `±12.03` | `190.37` `±19.65` | |
-| `react-native-web@0.0.81`            | `105.20` `±17.86` | `226.54` `±29.50` | `12.12` `±6.94ms` |
+| `css-modules`                        |  `87.67` `±15.22` | `170.85` `±16.87` | |
+| `react-native-web/stylesheet@0.0.84` |  `90.02` `±13.16` | `186.66` `±19.23` | |
+| `react-native-web@0.0.84`            | `102.72` `±19.26` | `222.35` `±18.95` | `12.81` `±5.45ms` |
 
 Other libraries
 
 | Implementation                       | Deep tree (ms)    | Wide tree (ms)    |
 | :--- | ---: | ---: |
-| `aphrodite@1.2.0`                    | `101.25` `±18.78` | `224.59` `±22.28` |
-| `glamor@3.0.0-1`                     | `143.39` `±23.05` | `275.21` `±21.10` |
-| `react-jss@5.4.1`                    | `142.27` `±16.62` | `318.62` `±26.19` |
-| `reactxp@0.34.3`                     | `221.36` `±23.35` | `472.61` `±40.86` |
-| `styled-components@2.0.0-7`          | `301.92` `±39.43` | `647.80` `±102.1` |
+| `styletron@2.5.1`                    |  `88.48` `±12.00` | `171.89` `±13.28` |
+| `aphrodite@1.2.0`                    | `101.32` `±20.33` | `220.33` `±31.41` |
+| `glamor@3.0.0-1`                     | `129.00` `±14.92` | `264.57` `±28.54` |
+| `react-jss@5.4.1`                    | `137.33` `±21.55` | `314.91` `±29.03` |
+| `reactxp@0.34.3`                     | `223.82` `±32.77` | `461.56` `±34.43` |
+| `styled-components@2.0.0-11`         | `277.53` `±28.83` | `627.91` `±43.13` |
 
 *MacBook Pro (13-inch, Early 2011); 2.7 GHz Intel Core i7; 16 GB 1600 MHz DDR3. Google Chrome 56.

performance/index.js

@@ -5,6 +5,7 @@ import jss from './src/jss';
 import reactNative from './src/react-native';
 import reactNativeStyleSheet from './src/react-native-stylesheet';
 import styledComponents from './src/styled-components';
+import styletron from './src/styletron';
 import xp from './src/reactxp';
 
 import renderDeepTree from './tests/renderDeepTree';
@@ -28,12 +29,14 @@ const coreTests = [
  * Optionally run tests using other libraries
  */
 const extraTests = [
+  () => renderDeepTree('styletron', styletron),
+  () => renderWideTree('styletron', styletron),
   () => renderDeepTree('aphrodite', aphrodite),
   () => renderWideTree('aphrodite', aphrodite),
   () => renderDeepTree('glamor', glamor),
   () => renderWideTree('glamor', glamor),
-  () => renderDeepTree('jss', jss),
-  () => renderWideTree('jss', jss),
+  () => renderDeepTree('react-jss', jss),
+  () => renderWideTree('react-jss', jss),
   () => renderDeepTree('reactxp', xp),
   () => renderWideTree('reactxp', xp),
   () => renderDeepTree('styled-components', styledComponents),

performance/package.json

@@ -8,7 +8,9 @@
     "marky": "^1.2.0",
     "react-jss": "^6.1.1",
     "reactxp": "^0.34.3",
-    "styled-components": "2.0.0-15"
+    "styled-components": "2.0.0-15",
+    "styletron-client": "^2.5.1",
+    "styletron-utils": "^2.5.4"
   },
   "devDependencies": {
     "css-loader": "^0.28.0",

performance/src/components/Box/styletron.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import { injectStylePrefixed } from 'styletron-utils';
+import React from 'react';
+import View, { styletron } from '../View/styletron';
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
+  <View
+    {...other}
+    style={[
+      styles[`color${color}`],
+      fixed && styles.fixed,
+      layout === 'row' && styles.row,
+      outer && styles.outer
+    ]}
+  />
+);
+
+const styles = {
+  outer: injectStylePrefixed(styletron, {
+    padding: '4px'
+  }),
+  row: injectStylePrefixed(styletron, {
+    flexDirection: 'row'
+  }),
+  color0: injectStylePrefixed(styletron, {
+    backgroundColor: '#222'
+  }),
+  color1: injectStylePrefixed(styletron, {
+    backgroundColor: '#666'
+  }),
+  color2: injectStylePrefixed(styletron, {
+    backgroundColor: '#999'
+  }),
+  color3: injectStylePrefixed(styletron, {
+    backgroundColor: 'blue'
+  }),
+  color4: injectStylePrefixed(styletron, {
+    backgroundColor: 'orange'
+  }),
+  color5: injectStylePrefixed(styletron, {
+    backgroundColor: 'red'
+  }),
+  fixed: injectStylePrefixed(styletron, {
+    width: '20px',
+    height: '20px'
+  })
+};
+
+module.exports = Box;

performance/src/components/View/aphrodite.js

@@ -17,14 +17,6 @@ const styles = StyleSheet.create({
     margin: 0,
     padding: 0,
     position: 'relative',
-    // button and anchor reset
-    backgroundColor: 'transparent',
-    color: 'inherit',
-    font: 'inherit',
-    textAlign: 'inherit',
-    textDecoration: 'none',
-    // list reset
-    listStyle: 'none',
     // fix flexbox bugs
     minHeight: 0,
     minWidth: 0

performance/src/components/View/glamor.js

@@ -16,14 +16,6 @@ const viewStyle = {
   margin: 0,
   padding: 0,
   position: 'relative',
-  // button and anchor reset
-  backgroundColor: 'transparent',
-  color: 'inherit',
-  font: 'inherit',
-  textAlign: 'inherit',
-  textDecorationLine: 'none',
-  // list reset
-  listStyle: 'none',
   // fix flexbox bugs
   minHeight: 0,
   minWidth: 0

performance/src/components/View/jss.js

@@ -20,14 +20,6 @@ const styles = {
     margin: 0,
     padding: 0,
     position: 'relative',
-    // button and anchor reset
-    backgroundColor: 'transparent',
-    color: 'inherit',
-    font: 'inherit',
-    textAlign: 'inherit',
-    textDecorationLine: 'none',
-    // list reset
-    listStyle: 'none',
     // fix flexbox bugs
     minHeight: 0,
     minWidth: 0

performance/src/components/View/react-native-stylesheet.js

@@ -21,14 +21,6 @@ const styles = StyleSheet.create({
     margin: 0,
     padding: 0,
     position: 'relative',
-    // button and anchor reset
-    backgroundColor: 'transparent',
-    color: 'inherit',
-    font: 'inherit',
-    textAlign: 'inherit',
-    textDecoration: 'none',
-    // list reset
-    listStyle: 'none',
     // fix flexbox bugs
     minHeight: 0,
     minWidth: 0

performance/src/components/View/styled-components.js

@@ -12,12 +12,6 @@ const View = styled.div`
   margin: 0;
   padding: 0;
   position: relative;
-  background-color: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: inherit;
-  text-decoration: none;
-  list-style: none;
   min-height: 0;
   min-width: 0;
 `;

performance/src/components/View/styles.css

@@ -10,12 +10,6 @@
   margin: 0;
   padding: 0;
   position: relative;
-  background-color: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: inherit;
-  text-decoration: none;
-  list-style: none;
   min-height: 0;
   min-width: 0;
 }

performance/src/components/View/styletron.js

@@ -0,0 +1,30 @@
+/* eslint-disable react/prop-types */
+import classnames from 'classnames';
+import Styletron from 'styletron-client';
+import { injectStylePrefixed } from 'styletron-utils';
+import React from 'react';
+
+export const styletron = new Styletron();
+
+const View = ({ style, ...other }) => (
+  <div {...other} className={classnames(viewStyle, ...style)} />
+);
+
+const viewStyle = injectStylePrefixed(styletron, {
+  alignItems: 'stretch',
+  borderWidth: '0px',
+  borderStyle: 'solid',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexBasis: 'auto',
+  flexDirection: 'column',
+  flexShrink: '0',
+  margin: '0px',
+  padding: '0px',
+  position: 'relative',
+  // fix flexbox bugs
+  minHeight: '0px',
+  minWidth: '0px'
+});
+
+export default View;

performance/src/styletron.js

@@ -0,0 +1,7 @@
+import Box from './components/Box/styletron';
+import View from './components/View/styletron';
+
+export default {
+  Box,
+  View
+};

performance/yarn.lock

@@ -408,7 +408,7 @@ inherits@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
 
-inline-style-prefixer@^2.0.5:
+inline-style-prefixer@^2.0.1, inline-style-prefixer@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz#c153c7e88fd84fef5c602e95a8168b2770671fe7"
   dependencies:
@@ -1028,6 +1028,22 @@ styled-components@2.0.0-15:
     stylis "^2.0.0"
     supports-color "^3.2.3"
 
+styletron-client@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/styletron-client/-/styletron-client-2.5.1.tgz#df0b6fd65965b035d2ff58df61b422aa80e23577"
+  dependencies:
+    styletron-core "^2.5.1"
+
+styletron-core@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/styletron-core/-/styletron-core-2.5.1.tgz#bf9e8aebc41461b81fdd22b1062f6e25862286fd"
+
+styletron-utils@^2.5.4:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/styletron-utils/-/styletron-utils-2.5.4.tgz#f08cca7d58ee0338ce85e408cb32900e65620240"
+  dependencies:
+    inline-style-prefixer "^2.0.1"
+
 stylis@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-2.0.3.tgz#054b0ad1f636181664246c103adf506c84b502e7"

src/components/ScrollView/index.js

@@ -143,11 +143,7 @@ const ScrollView = createReactClass({
         children={this.props.children}
         collapsable={false}
         ref={this._setInnerViewRef}
-        style={[
-          styles.contentContainer,
-          horizontal && styles.contentContainerHorizontal,
-          contentContainerStyle
-        ]}
+        style={[horizontal && styles.contentContainerHorizontal, contentContainerStyle]}
       />
     );
 
@@ -232,16 +228,17 @@ const styles = StyleSheet.create({
     flex: 1,
     overflowX: 'hidden',
     overflowY: 'auto',
-    WebkitOverflowScrolling: 'touch'
+    WebkitOverflowScrolling: 'touch',
+    // Enable hardware compositing in modern browsers.
+    // Creates a new layer with its own backing surface that can significantly
+    // improve scroll performance.
+    transform: [{ translateZ: 0 }]
   },
   baseHorizontal: {
     flexDirection: 'row',
     overflowX: 'auto',
     overflowY: 'hidden'
   },
-  contentContainer: {
-    transform: [{ translateZ: 0 }]
-  },
   contentContainerHorizontal: {
     flexDirection: 'row'
   }

src/components/StatusBar/index.js

@@ -0,0 +1,14 @@
+import { Component } from 'react';
+
+class StatusBar extends Component {
+  static setBackgroundColor() {}
+  static setBarStyle() {}
+  static setHidden() {}
+  static setNetworkActivityIndicatorVisible() {}
+  static setTranslucent() {}
+  render() {
+    return null;
+  }
+}
+
+module.exports = StatusBar;

src/components/TextInput/index.js

@@ -147,6 +147,7 @@ class TextInput extends Component {
       style,
       /* eslint-disable */
       blurOnSubmit,
+      caretHidden,
       clearButtonMode,
       clearTextOnFocus,
       dataDetectorTypes,
@@ -163,6 +164,8 @@ class TextInput extends Component {
       selection,
       selectionColor,
       selectTextOnFocus,
+      textBreakStrategy,
+      underlineColorAndroid,
       /* eslint-enable */
       ...otherProps
     } = this.props;

src/components/View/ViewStylePropTypes.js

@@ -31,6 +31,7 @@ module.exports = {
   boxShadow: string,
   cursor: string,
   outline: string,
+  outlineColor: ColorPropType,
   perspective: oneOfType([number, string]),
   perspectiveOrigin: string,
   transitionDelay: string,

src/index.js

@@ -32,6 +32,7 @@ import Image from './components/Image';
 import ListView from './components/ListView';
 import ProgressBar from './components/ProgressBar';
 import ScrollView from './components/ScrollView';
+import StatusBar from './components/StatusBar';
 import Switch from './components/Switch';
 import Text from './components/Text';
 import TextInput from './components/TextInput';
@@ -87,6 +88,7 @@ const ReactNative = {
   ListView,
   ProgressBar,
   ScrollView,
+  StatusBar,
   Switch,
   Text,
   TextInput,

src/modules/AccessibilityUtil/propsToAriaRole.js

@@ -6,6 +6,7 @@ const accessibilityComponentTypeToRole = {
 const accessibilityTraitsToRole = {
   adjustable: 'slider',
   button: 'button',
+  header: 'heading',
   image: 'img',
   link: 'link',
   none: 'presentation',

src/modules/createDOMProps/index.js

@@ -58,7 +58,6 @@ const createDOMProps = (rnProps, resolveStyle = resolver) => {
     ...domProps
   } = props;
 
-  // MOVE TEXT / VIEW BUTTON RESET HERE
   const role = AccessibilityUtil.propsToAriaRole(props);
   const pointerEventStyle = pointerEvents !== undefined && pointerEventStyles[pointerEvents];
   const reactNativeStyle = [