0.0.36

First patch: 41159bcb10

@chriskjaer mentioned that changing from 'div' to 'span' introduces
different validation errors, e.g., <span><form>a</form></span>.

This patch uses 'context' to switch to a 'span' element if a 'View' is
being rendered within a 'button' element.

README.md

@@ -121,6 +121,7 @@ Exported modules:
   * [`PixelRatio`](docs/apis/PixelRatio.md)
   * [`Platform`](docs/apis/Platform.md)
   * [`StyleSheet`](docs/apis/StyleSheet.md)
+  * [`Vibration`](docs/apis/Vibration.md)
 
 ## License
 

docs/apis/Platform.md

@@ -20,7 +20,7 @@ const styles = StyleSheet.create({
 
 ## Methods
 
-**select**: any
+**select**(object): any
 
 `Platform.select` takes an object containing `Platform.OS` as keys and returns
 the value for the platform you are currently running on.

docs/apis/Vibration.md

@@ -0,0 +1,35 @@
+# Vibration
+
+Vibration is described as a pattern of on-off pulses, which may be of varying
+lengths. The pattern may consist of either a single integer, describing the
+number of milliseconds to vibrate, or an array of integers describing a pattern
+of vibrations and pauses. Vibration is controlled with a single method:
+`Vibration.vibrate()`.
+
+The vibration is asynchronous so this method will return immediately. There
+will be no effect on devices that do not support vibration.
+
+## Methods
+
+static **cancel**()
+
+Stop the vibration.
+
+static **vibrate**(pattern)
+
+Start the vibration pattern.
+
+## Examples
+
+Vibrate once for 200ms:
+
+```js
+Vibration.vibrate(200);
+Vibration.vibrate([200]);
+```
+
+Vibrate for 200ms, pause for 100ms, vibrate for 200ms:
+
+```js
+Vibration.vibrate([200, 100, 200]);
+```

docs/components/Text.md

@@ -32,7 +32,7 @@ Note: Avoid changing `accessibilityRole` values over time or after user
 actions. Generally, accessibility APIs do not provide a means of notifying
 assistive technologies of a `role` value change.
 
-(web) **accessible**: bool = true
+**accessible**: bool = true
 
 When `false`, the text is hidden from assistive technologies. (This is
 implemented using `aria-hidden`.)
@@ -54,6 +54,10 @@ height } } }`, where `x` and `y` are the offsets from the parent node.
 
 This function is called on press.
 
+**selectable**: bool = true
+
+Lets the user select the text.
+
 **style**: style
 
 + ...[View#style](View.md)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "description": "React Native for Web",
   "main": "dist/index.js",
   "files": [

src/apis/Vibration/index.js

@@ -0,0 +1,20 @@
+const vibrate = (pattern) => {
+  if ('vibrate' in window.navigator) {
+    if (typeof pattern === 'number' || Array.isArray(pattern)) {
+      window.navigator.vibrate(pattern)
+    } else {
+      throw new Error('Vibration pattern should be a number or array')
+    }
+  }
+}
+
+const Vibration = {
+  cancel() {
+    vibrate(0)
+  },
+  vibrate(pattern) {
+    vibrate(pattern)
+  }
+}
+
+module.exports = Vibration

src/components/Text/__tests__/index-test.js

@@ -31,4 +31,11 @@ suite('components/Text', () => {
       done()
     }
   })
+
+  test('prop "selectable"', () => {
+    let text = shallow(<Text />)
+    assert.equal(text.prop('style').userSelect, undefined)
+    text = shallow(<Text selectable={false} />)
+    assert.equal(text.prop('style').userSelect, 'none')
+  })
 })

src/components/Text/index.js

@@ -11,18 +11,20 @@ class Text extends Component {
 
   static propTypes = {
     accessibilityLabel: createReactDOMComponent.propTypes.accessibilityLabel,
-    accessibilityRole: createReactDOMComponent.propTypes.accessibilityRole,
+    accessibilityRole: PropTypes.oneOf([ 'heading', 'link' ]),
     accessible: createReactDOMComponent.propTypes.accessible,
     children: PropTypes.any,
     numberOfLines: PropTypes.number,
     onLayout: PropTypes.func,
     onPress: PropTypes.func,
+    selectable: PropTypes.bool,
     style: StyleSheetPropType(TextStylePropTypes),
     testID: createReactDOMComponent.propTypes.testID
   };
 
   static defaultProps = {
-    accessible: true
+    accessible: true,
+    selectable: true
   };
 
   render() {
@@ -30,6 +32,7 @@ class Text extends Component {
       numberOfLines,
       onLayout, // eslint-disable-line
       onPress, // eslint-disable-line
+      selectable,
       style,
       ...other
     } = this.props
@@ -41,6 +44,7 @@ class Text extends Component {
       style: [
         styles.initial,
         style,
+        !selectable && styles.notSelectable,
         numberOfLines === 1 && styles.singleLineStyle
       ]
     })
@@ -63,6 +67,9 @@ const styles = StyleSheet.create({
     textDecorationLine: 'none',
     wordWrap: 'break-word'
   },
+  notSelectable: {
+    userSelect: 'none'
+  },
   singleLineStyle: {
     maxWidth: '100%',
     overflow: 'hidden',

src/components/Touchable/TouchableHighlight.js

@@ -247,7 +247,7 @@ var TouchableHighlight = React.createClass({
         onResponderRelease={this.touchableHandleResponderRelease}
         onResponderTerminate={this.touchableHandleResponderTerminate}
         ref={UNDERLAY_REF}
-        style={this.state.underlayStyle}
+        style={[ styles.root, this.state.underlayStyle ]}
         tabIndex='0'
         testID={this.props.testID}>
         {React.cloneElement(

src/components/Touchable/TouchableWithoutFeedback.js

@@ -19,6 +19,7 @@ var Touchable = require('./Touchable');
 var View = require('../View');
 var ensurePositiveDelayProps = require('./ensurePositiveDelayProps');
 var warning = require('fbjs/lib/warning');
+var StyleSheet = require('../../apis/StyleSheet');
 
 type Event = Object;
 
@@ -160,8 +161,8 @@ const TouchableWithoutFeedback = React.createClass({
       children.push(Touchable.renderDebugView({color: 'red', hitSlop: this.props.hitSlop}));
     }
     const style = (Touchable.TOUCH_TARGET_DEBUG && child.type && child.type.displayName === 'Text') ?
-      [child.props.style, {color: 'red'}] :
-      child.props.style;
+      [styles.root, child.props.style, {color: 'red'}] :
+      [styles.root, child.props.style];
     return (React: any).cloneElement(child, {
       accessible: this.props.accessible !== false,
       accessibilityLabel: this.props.accessibilityLabel,
@@ -182,4 +183,10 @@ const TouchableWithoutFeedback = React.createClass({
   }
 });
 
+var styles = StyleSheet.create({
+  root: {
+    cursor: 'pointer'
+  }
+});
+
 module.exports = TouchableWithoutFeedback;

src/components/View/__tests__/index-test.js

@@ -7,8 +7,20 @@ import View from '../'
 import { mount, shallow } from 'enzyme'
 
 suite('components/View', () => {
+  suite('rendered element', () => {
+    test('is a "div" by default', () => {
+      const view = shallow(<View />)
+      assert.equal(view.is('div'), true)
+    })
+
+    test('is a "span" when inside <View accessibilityRole="button" />', () => {
+      const view = mount(<View accessibilityRole='button'><View /></View>)
+      assert.equal(view.find('span').length, 1)
+    })
+  })
+
   test('prop "children"', () => {
-    const children = 'children'
+    const children = <View testID='1' />
     const view = shallow(<View>{children}</View>)
     assert.equal(view.prop('children'), children)
   })

src/components/View/index.js

@@ -50,9 +50,18 @@ class View extends Component {
     style: {}
   };
 
-  constructor(props, context) {
-    super(props, context)
-    this._normalizeEventForHandler = this._normalizeEventForHandler.bind(this)
+  static childContextTypes = {
+    isInAButtonView: PropTypes.bool
+  };
+
+  static contextTypes = {
+    isInAButtonView: PropTypes.bool
+  };
+
+  getChildContext() {
+    return {
+      isInAButtonView: this.props.accessibilityRole === 'button'
+    }
   }
 
   render() {
@@ -72,6 +81,7 @@ class View extends Component {
 
     const props = {
       ...other,
+      component: this.context.isInAButtonView ? 'span' : 'div',
       onClick: this._normalizeEventForHandler(this.props.onClick),
       onClickCapture: this._normalizeEventForHandler(this.props.onClickCapture),
       onTouchCancel: this._normalizeEventForHandler(this.props.onTouchCancel),

src/index.js

@@ -18,6 +18,7 @@ import PixelRatio from './apis/PixelRatio'
 import Platform from './apis/Platform'
 import StyleSheet from './apis/StyleSheet'
 import UIManager from './apis/UIManager'
+import Vibration from './apis/Vibration'
 
 // components
 import ActivityIndicator from './components/ActivityIndicator'
@@ -65,6 +66,7 @@ const ReactNative = {
   Platform,
   StyleSheet,
   UIManager,
+  Vibration,
 
   // components
   ActivityIndicator,

src/modules/createReactDOMComponent/__tests__/index-test.js

@@ -43,7 +43,9 @@ suite('modules/createReactDOMComponent', () => {
 
   test('prop "component"', () => {
     const component = 'main'
-    const element = shallow(createReactDOMComponent({ component }))
+    let element = shallow(createReactDOMComponent({}))
+    assert.equal(element.is('span'), true, 'Default element must be a "span"')
+    element = shallow(createReactDOMComponent({ component }))
     assert.equal(element.is('main'), true)
   })
 

src/modules/createReactDOMComponent/index.js

@@ -22,7 +22,7 @@ const createReactDOMComponent = ({
   accessibilityLiveRegion,
   accessibilityRole,
   accessible = true,
-  component = 'div',
+  component = 'span',
   testID,
   type,
   ...other