react-native-for-web - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

COMPONENTS.md

@@ -96,3 +96,3 @@
    - [ ] minimumZoomScale
-   - [ ] onScroll
+   - [X] onScroll
    - [ ] onScrollAnimationEnd
@@ -102,3 +102,3 @@ - [ ] pagingEnabled
    - [ ] scrollEnabled
-   - [ ] scrollEventThrottle
+   - [X] scrollEventThrottle
    - [ ] scrollIndicatorInsets
@@ -105,0 +105,0 @@ - [ ] scrollsToTop

lib/components/Image/index.js

@@ -149,2 +149,3 @@ 'use strict';
       var resizeMode = _props3.resizeMode;
+      var capInsets = _props3.capInsets;
       var style = _props3.style;
@@ -158,3 +159,3 @@ var children = _props3.children;
 
-      var props = _objectWithoutProperties(_props3, ['source', 'defaultSource', 'resizeMode', 'style', 'children', 'onLoad', 'onLoadStart', 'onLoadEnd', 'onProgress', 'onError']);
+      var props = _objectWithoutProperties(_props3, ['source', 'defaultSource', 'resizeMode', 'capInsets', 'style', 'children', 'onLoad', 'onLoadStart', 'onLoadEnd', 'onProgress', 'onError']);
 
@@ -182,5 +183,13 @@ // default classNames
 
+      // WIP
+      // if image is loaded and capInsets is set
+      var insetEls = null;
+      if (this.state.loaded && capInsets) {
+        insetEls = [React.createElement('div', { key: 'tl', className: 'cap-insets-tl', style: { backgroundImage: backgroundImage, width: capInsets.left, height: capInsets.top } }), React.createElement('div', { key: 'tr', className: 'cap-insets-tr', style: { backgroundImage: backgroundImage, width: capInsets.right, height: capInsets.top } }), React.createElement('div', { key: 'bl', className: 'cap-insets-bl', style: { backgroundImage: backgroundImage, width: capInsets.left, height: capInsets.bottom } }), React.createElement('div', { key: 'br', className: 'cap-insets-br', style: { backgroundImage: backgroundImage, width: capInsets.right, height: capInsets.bottom } })];
+      }
+
       return React.createElement(
         'div',
         _extends({}, props, { className: classNames.join(' '), style: browserifyStyle({ backgroundImage: backgroundImage }, style) }),
+        insetEls,
         children
@@ -187,0 +196,0 @@ );

lib/components/ScrollView/index.js

@@ -21,9 +21,41 @@ 'use strict';
 
-  function ScrollView() {
+  function ScrollView(props) {
     _classCallCheck(this, ScrollView);
 
-    _get(Object.getPrototypeOf(ScrollView.prototype), 'constructor', this).apply(this, arguments);
+    _get(Object.getPrototypeOf(ScrollView.prototype), 'constructor', this).call(this, props);
+
+    // autobinding
+    this.onScroll = this.onScroll.bind(this);
+    this.handleOnScroll = this.handleOnScroll.bind(this);
   }
 
   _createClass(ScrollView, [{
+    key: 'onScroll',
+    value: function onScroll() {
+      // if there is a timeout, stop
+      if (this.scrollTimeout) return;
+      // deconstruct
+      var _props = this.props;
+      var onScroll = _props.onScroll;
+      var _props$scrollEventThrottle = _props.scrollEventThrottle;
+      var scrollEventThrottle = _props$scrollEventThrottle === undefined ? 0 : _props$scrollEventThrottle;
+
+      // else, setup it
+      this.scrollTimeout = setTimeout(this.handleOnScroll, scrollEventThrottle);
+    }
+  }, {
+    key: 'handleOnScroll',
+    value: function handleOnScroll() {
+      // reset the timeout
+      this.scrollTimeout = null;
+      // deconstruct
+      var _props2 = this.props;
+      var onScroll = _props2.onScroll;
+      var _props2$scrollEventThrottle = _props2.scrollEventThrottle;
+      var scrollEventThrottle = _props2$scrollEventThrottle === undefined ? 0 : _props2$scrollEventThrottle;
+
+      // if there is on scroll, call it
+      if (onScroll) onScroll();
+    }
+  }, {
     key: 'render',
@@ -35,9 +67,10 @@ value: function render() {
       // descructuring utility data
-      var _props = this.props;
-      var horizontal = _props.horizontal;
-      var contentContainerStyle = _props.contentContainerStyle;
-      var style = _props.style;
-      var children = _props.children;
+      var _props3 = this.props;
+      var horizontal = _props3.horizontal;
+      var contentContainerStyle = _props3.contentContainerStyle;
+      var style = _props3.style;
+      var children = _props3.children;
+      var onScroll = _props3.onScroll;
 
-      var props = _objectWithoutProperties(_props, ['horizontal', 'contentContainerStyle', 'style', 'children']);
+      var props = _objectWithoutProperties(_props3, ['horizontal', 'contentContainerStyle', 'style', 'children', 'onScroll']);
 
@@ -50,3 +83,3 @@ // apply style to correct scroll direction
         'div',
-        { className: classNames.join(' '), style: browserifyStyle(style) },
+        { onScroll: this.onScroll, className: classNames.join(' '), style: browserifyStyle(style) },
         React.createElement(
@@ -53,0 +86,0 @@ View,

lib/index.js

@@ -14,2 +14,6 @@ 'use strict';
 	AsyncStorage: require('./classes/AsyncStorage'),
+	DeviceEventEmitter: require('./classes/DeviceEventEmitter'),
+	Animated: require('./classes/Animated'),
+	Easing: require('./classes/Animated/lib/Easing'),
+	Platform: require('./classes/Platform'),
 
@@ -16,0 +20,0 @@ // export the components

package.json

 {
   "name": "react-native-for-web",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A set of classes and react components to make work your react-native app in a browser. (with some limitations obviously)",
@@ -31,7 +31,8 @@ "main": "lib/index.js",
     "eventemitter3": "^1.1.1",
+    "fbjs": "^0.2.1",
     "radium": "^0.13.8"
   },
   "peerDependencies": {
-    "react": "^0.14.0-beta3",
-    "react-dom": "^0.14.0-beta3"
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0"
   },
@@ -38,0 +39,0 @@ "devDependencies": {

README.md

@@ -9,7 +9,11 @@ React Native for Web
  - [Supported components list](http://mattiamanzati.gitbooks.io/react-native-for-web/content/docs/supported_components_&_props.html)
+ 
+### Why use react-native-for-web?
+ - To **reuse your dumb components and your styles** in the web admin version of your app (you can them rewrite or extend them after, when you have spread time to spend on them and the deadline is passed)
+ - To **target react-native unsupported platforms** with no code changes via cordova; smart tvs, windows phone, desktop apps, chromebook, firefox os, etc...
+ - To have a **temporary non-iOS version for other platforms** of your app, and then refine and extend the generated views after the app deadline
+ - For **low-budget projects with multiple platforms as target**, you can choose iOS as a "master platform" and roll out the other version as webapp, when the client will have funds, you can enanche them 
+ - To **develop using non-OSX PCs**, like Windows or Linux, since the majority of the debug or coding error of your app will be in the data-controller layer or in view data binding
+ - **Browsers are a more friendly environment** for standard apps that does'nt require too much mobile-device features
 
-### WARNING!
-This package is in beta version! API will not change (as we are emulating the react-native ones) but lots of components or properties could be missing at the moment.
-We encourage you to help us by reporting those errors or PR implementation of the missing ones! :D
-
 ### What limitations?
@@ -55,2 +59,9 @@ Since it is all plain JavaScript, any native binary module won't be supported.
 npm run build
-```
+```
+
+### WARNING!
+This package is in beta version! API will not change (as we are emulating the react-native ones) but lots of components or properties could be missing at the moment.
+We encourage you to help us by reporting those errors or PR implementation of the missing ones! :D
+
+### Thanks
+Thanks to the Facebook team for it's awesome React-Native framework!

src/components/Image/index.js

@@ -103,3 +103,3 @@ var React = require('react');
     // deconstruct supported properties
-    var {source: {uri}, defaultSource, resizeMode, style, children, 
+    var {source: {uri}, defaultSource, resizeMode, capInsets, style, children, 
       onLoad, onLoadStart, onLoadEnd, onProgress, onError, ...props} = this.props;
@@ -128,4 +128,17 @@
     // TODO: handle tintColor via canvas image manipulation if setted
+    
+    // WIP
+    // if image is loaded and capInsets is set
+    var insetEls = null;
+    if(this.state.loaded && capInsets){
+      insetEls = [
+        <div key="tl" className="cap-insets-tl" style={{backgroundImage, width: capInsets.left, height: capInsets.top}} />,
+        <div key="tr" className="cap-insets-tr" style={{backgroundImage, width: capInsets.right, height: capInsets.top}} />,
+        <div key="bl" className="cap-insets-bl" style={{backgroundImage, width: capInsets.left, height: capInsets.bottom}} />,
+        <div key="br" className="cap-insets-br" style={{backgroundImage, width: capInsets.right, height: capInsets.bottom}} />
+      ]
+    }
 
     return <div {...props} className={classNames.join(' ')} style={browserifyStyle({backgroundImage}, style)}>
+      {insetEls}
       {children}
@@ -132,0 +145,0 @@ </div>;

src/components/ScrollView/index.js

@@ -7,2 +7,28 @@ var React = require('react');
 class ScrollView extends React.Component{
+  constructor(props){
+    super(props);
+    
+    // autobinding
+    this.onScroll = this.onScroll.bind(this);
+    this.handleOnScroll = this.handleOnScroll.bind(this);
+  }
+  
+  onScroll(){
+    // if there is a timeout, stop
+    if(this.scrollTimeout) return;
+    // deconstruct
+    var {onScroll, scrollEventThrottle = 0} = this.props;
+    // else, setup it
+    this.scrollTimeout = setTimeout(this.handleOnScroll, scrollEventThrottle);
+  }
+  
+  handleOnScroll(){
+    // reset the timeout
+    this.scrollTimeout = null;    
+    // deconstruct
+    var {onScroll, scrollEventThrottle = 0} = this.props;
+    // if there is on scroll, call it
+    if(onScroll) onScroll();
+  }
+  
   render(){
@@ -13,3 +39,3 @@ // set of classNames
     // descructuring utility data
-    var {horizontal, contentContainerStyle, style, children, ...props} = this.props;
+    var {horizontal, contentContainerStyle, style, children, onScroll, ...props} = this.props;
 
@@ -20,3 +46,3 @@ // apply style to correct scroll direction
     // return the component, use a View as a wrapper
-    return <div className={classNames.join(' ')} style={browserifyStyle(style)}>
+    return <div onScroll={this.onScroll} className={classNames.join(' ')} style={browserifyStyle(style)}>
       <View style={browserifyStyle(contentContainerStyle)}>
@@ -23,0 +49,0 @@ {children}

src/index.js

@@ -12,2 +12,6 @@ var React = require('react');
 	AsyncStorage: require('./classes/AsyncStorage'),
+	DeviceEventEmitter: require('./classes/DeviceEventEmitter'),
+	Animated: require('./classes/Animated'),
+	Easing: require('./classes/Animated/lib/Easing'),
+    Platform: require('./classes/Platform'),
 	
@@ -14,0 +18,0 @@ // export the components

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

304516

increased by87.05%

Number of package files

99

increased by37.5%

Lines of code

7364

increased by104.9%

Number of lines in readme file

65

increased by20.37%

Worsened metrics

Dependency count

5

increased by25%

Number of low supply chain risk alerts

12

increased byInfinity%

Dependency changes

• + Addedfbjs@^0.2.1

• + Addedfbjs@0.2.1(transitive)