0.0.47

Mirrors behaviour of react-native

README.md

@@ -55,6 +55,7 @@ Exported modules:
   * [`ActivityIndicator`](docs/components/ActivityIndicator.md)
   * [`Image`](docs/components/Image.md)
   * [`ListView`](docs/components/ListView.md)
+  * [`ProgressBar`](docs/components/ProgressBar.md)
   * [`ScrollView`](docs/components/ScrollView.md)
   * [`Switch`](docs/components/Switch.md)
   * [`Text`](docs/components/Text.md)

docs/components/Image.md

@@ -46,7 +46,7 @@ Invoked when load either succeeds or fails,
 
 Invoked on load start.
 
-**resizeMode**: oneOf('center', 'contain', 'cover', 'none', 'repeat', 'stretch') = 'stretch'
+**resizeMode**: oneOf('center', 'contain', 'cover', 'none', 'repeat', 'stretch') = 'cover'
 
 Determines how to resize the image when the frame doesn't match the raw image
 dimensions.

package.json

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

src/apis/AsyncStorage/__tests__/index-test.js

@@ -1,5 +1,65 @@
 /* eslint-env mocha */
+import assert from 'assert';
+import AsyncStorage from '..';
+
+const waterfall = (fns, cb) => {
+  const _waterfall = (...args) => {
+    const fn = (fns || []).shift();
+    if (typeof fn === 'function') {
+      fn(...args, (err, ...nextArgs) => {
+        if (err) {
+          return cb(err);
+        } else {
+          return _waterfall(...nextArgs);
+        }
+      });
+    } else {
+      cb(null, ...args);
+    }
+  };
+  _waterfall();
+};
 
 suite('apis/AsyncStorage', () => {
-  test.skip('NO TEST COVERAGE', () => {});
+  suite('mergeLocalStorageItem', () => {
+    test('should have same behavior as react-native', (done) => {
+      // https://facebook.github.io/react-native/docs/asyncstorage.html
+      const UID123_object = {
+        name: 'Chris',
+        age: 30,
+        traits: { hair: 'brown', eyes: 'brown' }
+      };
+      const UID123_delta = {
+        age: 31,
+        traits: { eyes: 'blue', shoe_size: 10 }
+      };
+      waterfall([
+        (cb) => {
+          AsyncStorage.setItem('UID123', JSON.stringify(UID123_object))
+            .then(() => cb(null))
+            .catch(cb);
+        },
+        (cb) => {
+          AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta))
+            .then(() => cb(null))
+            .catch(cb);
+        },
+        (cb) => {
+          AsyncStorage.getItem('UID123')
+            .then((result) => {
+              cb(null, JSON.parse(result));
+            })
+            .catch(cb);
+        }
+      ], (err, result) => {
+        assert.equal(err, null);
+        assert.deepEqual(result, {
+          'name': 'Chris', 'age': 31, 'traits': {
+            'shoe_size': 10, 'hair': 'brown', 'eyes': 'blue'
+          }
+        });
+        done();
+      });
+    });
+  });
 });

src/apis/AsyncStorage/index.js

@@ -3,12 +3,13 @@
  * Copyright (c) 2015-present, Facebook, Inc.
  * All rights reserved.
  */
+import merge from 'lodash/merge';
 
 const mergeLocalStorageItem = (key, value) => {
   const oldValue = window.localStorage.getItem(key);
   const oldObject = JSON.parse(oldValue);
   const newObject = JSON.parse(value);
-  const nextValue = JSON.stringify({ ...oldObject, ...newObject });
+  const nextValue = JSON.stringify(merge({}, oldObject, newObject));
   window.localStorage.setItem(key, nextValue);
 };
 

src/apis/StyleSheet/css.js

@@ -11,7 +11,9 @@ const CSS_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)}\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 {display:none}';
+'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

src/components/Image/ImageResizeMode.js

@@ -1,12 +1,10 @@
-import keyMirror from 'fbjs/lib/keyMirror';
-
-const ImageResizeMode = keyMirror({
-  center: null,
-  contain: null,
-  cover: null,
-  none: null,
-  repeat: null,
-  stretch: null
-});
+const ImageResizeMode = {
+  center: 'center',
+  contain: 'contain',
+  cover: 'cover',
+  none: 'none',
+  repeat: 'repeat',
+  stretch: 'stretch'
+};
 
 module.exports = ImageResizeMode;

src/components/Image/index.js

@@ -4,7 +4,6 @@ import BaseComponentPropTypes from '../../propTypes/BaseComponentPropTypes';
 import createDOMElement from '../../modules/createDOMElement';
 import ImageResizeMode from './ImageResizeMode';
 import ImageStylePropTypes from './ImageStylePropTypes';
-import resolveAssetSource from './resolveAssetSource';
 import StyleSheet from '../../apis/StyleSheet';
 import StyleSheetPropType from '../../propTypes/StyleSheetPropType';
 import View from '../View';
@@ -23,6 +22,10 @@ const ImageSourcePropType = PropTypes.oneOfType([
   PropTypes.string
 ]);
 
+const resolveAssetSource = (source) => {
+  return ((typeof source === 'object') ? source.uri : source) || null;
+};
+
 class Image extends Component {
   static displayName = 'Image';
 
@@ -35,7 +38,7 @@ class Image extends Component {
     onLoad: PropTypes.func,
     onLoadEnd: PropTypes.func,
     onLoadStart: PropTypes.func,
-    resizeMode: PropTypes.oneOf([ 'center', 'contain', 'cover', 'none', 'repeat', 'stretch' ]),
+    resizeMode: PropTypes.oneOf(Object.keys(ImageResizeMode)),
     source: ImageSourcePropType,
     style: StyleSheetPropType(ImageStylePropTypes)
   };
@@ -49,9 +52,9 @@ class Image extends Component {
 
   constructor(props, context) {
     super(props, context);
+    this.state = { isLoaded: false };
     const uri = resolveAssetSource(props.source);
     this._imageState = uri ? STATUS_PENDING : STATUS_IDLE;
-    this.state = { isLoaded: false };
   }
 
   componentDidMount() {

src/components/Image/resolveAssetSource.js

@@ -1,5 +0,0 @@
-function resolveAssetSource(source) {
-  return ((typeof source === 'object') ? source.uri : source) || null;
-}
-
-module.exports = resolveAssetSource;

src/components/ListView/index.js

@@ -6,6 +6,8 @@ import ScrollView from '../ScrollView';
 import View from '../View';
 import React, { Component } from 'react';
 
+const scrollViewProps = Object.keys(ScrollView.propTypes);
+
 class ListView extends Component {
   static propTypes = ListViewPropTypes;
 
@@ -88,14 +90,14 @@ class ListView extends Component {
       }
     }
 
-    const props = pick(ScrollView.propTypes, this.props);
+    const props = pick(this.props, scrollViewProps);
 
     return React.cloneElement(this.props.renderScrollComponent(props), {
       ref: this._setScrollViewRef
     }, header, children, footer);
   }
 
-  _setScrollViewRef(component) {
+  _setScrollViewRef = (component) => {
     this._scrollViewRef = component;
   }
 }

src/components/ScrollView/index.js

@@ -171,9 +171,11 @@ const ScrollView = React.createClass({
       return React.cloneElement(
         refreshControl,
         { style: props.style },
-        <ScrollViewClass {...props} ref={this._setScrollViewRef} style={styles.base}>
-          {contentContainer}
-        </ScrollViewClass>
+        (
+          <ScrollViewClass {...props} ref={this._setScrollViewRef} style={styles.base}>
+            {contentContainer}
+          </ScrollViewClass>
+        )
       );
     }
 

src/components/Text/index.js

@@ -55,6 +55,7 @@ class Text extends Component {
 
 const styles = StyleSheet.create({
   initial: {
+    borderWidth: 0,
     color: 'inherit',
     display: 'inline',
     font: 'inherit',

src/components/TextInput/index.js

@@ -255,6 +255,7 @@ const styles = StyleSheet.create({
   input: {
     appearance: 'none',
     backgroundColor: 'transparent',
+    borderRadius: 0,
     borderWidth: 0,
     boxSizing: 'border-box',
     color: 'inherit',