react-native-web - npm Package Compare versions

Comparing version 0.0.47 to 0.0.48

dist/components/Image/index.js

@@ -20,3 +20,5 @@ var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();
 _react.PropTypes.shape({
-uri:_react.PropTypes.string.isRequired}),
+height:_react.PropTypes.number,
+uri:_react.PropTypes.string.isRequired,
+width:_react.PropTypes.number}),
 
@@ -26,2 +28,9 @@ _react.PropTypes.string]);
 
+var resolveAssetDimensions=function resolveAssetDimensions(source){
+if(typeof source==='object'){var
+height=source.height;var width=source.width;
+return{height:height,width:width};
+}
+};
+
 var resolveAssetSource=function resolveAssetSource(source){
@@ -154,10 +163,15 @@ return(typeof source==='object'?source.uri:source)||null;
 
-_onError=function(e){var
-onError=_this.props.onError;
-var event={nativeEvent:e};
 
+_onError=function(){var _this$props=
+_this.props;var onError=_this$props.onError;var source=_this$props.source;
 _this._destroyImageLoader();
+_this._onLoadEnd();
 _this._updateImageState(STATUS_ERRORED);
-_this._onLoadEnd();
-if(onError){onError(event);}
+if(onError){
+onError({
+nativeEvent:{
+error:'Failed to load resource '+resolveAssetSource(source)+' (404)'}});
+
+
+}
 };_this.
@@ -173,10 +187,10 @@
 _this._onLoadEnd();
-};_this.state={isLoaded:false};var uri=resolveAssetSource(props.source);_this._imageState=uri?STATUS_PENDING:STATUS_IDLE;return _this;}_createClass(Image,[{key:'componentDidMount',value:function componentDidMount(){if(this._imageState===STATUS_PENDING){this._createImageLoader();}}},{key:'componentDidUpdate',value:function componentDidUpdate(){if(this._imageState===STATUS_PENDING&&!this.image){this._createImageLoader();}}},{key:'componentWillReceiveProps',value:function componentWillReceiveProps(nextProps){var nextUri=resolveAssetSource(nextProps.source);if(resolveAssetSource(this.props.source)!==nextUri){this._updateImageState(nextUri?STATUS_PENDING:STATUS_IDLE);}}},{key:'componentWillUnmount',value:function componentWillUnmount(){this._destroyImageLoader();}},{key:'render',value:function render(){var isLoaded=this.state.isLoaded;var _props=this.props;var accessibilityLabel=_props.accessibilityLabel;var accessible=_props.accessible;var children=_props.children;var defaultSource=_props.defaultSource;var onLayout=_props.onLayout;var source=_props.source;var testID=_props.testID;var displayImage=resolveAssetSource(!isLoaded?defaultSource:source);var backgroundImage=displayImage?'url("'+displayImage+'")':null;var style=_StyleSheet2.default.flatten(this.props.style);var resizeMode=this.props.resizeMode||style.resizeMode||_ImageResizeMode2.default.cover;// remove 'resizeMode' style, as it is not supported by View (N.B. styles are frozen in dev)
-style=process.env.NODE_ENV!=='production'?_extends({},style):style;delete style.resizeMode;/**
-     * Image is a non-stretching View. The image is displayed as a background
-     * image to support `resizeMode`. The HTML image is hidden but used to
-     * provide the correct responsive image dimensions, and to support the
-     * image context menu. Child content is rendered into an element absolutely
-     * positioned over the image.
-     */return _react2.default.createElement(_View2.default,{accessibilityLabel:accessibilityLabel,accessibilityRole:'img',accessible:accessible,onLayout:onLayout,style:[styles.initial,style,backgroundImage&&{backgroundImage:backgroundImage},resizeModeStyles[resizeMode]],testID:testID},(0,_createDOMElement2.default)('img',{src:displayImage,style:styles.img}),children?_react2.default.createElement(_View2.default,{children:children,pointerEvents:'box-none',style:styles.children}):null);}},{key:'_createImageLoader',value:function _createImageLoader(){var uri=resolveAssetSource(this.props.source);this._destroyImageLoader();this.image=new window.Image();this.image.onerror=this._onError;this.image.onload=this._onLoad;this.image.src=uri;this._onLoadStart();}},{key:'_destroyImageLoader',value:function _destroyImageLoader(){if(this.image){this.image.onerror=null;this.image.onload=null;this.image=null;}}},{key:'_onLoadEnd',value:function _onLoadEnd(){var onLoadEnd=this.props.onLoadEnd;if(onLoadEnd){onLoadEnd();}}},{key:'_onLoadStart',value:function _onLoadStart(){var
+};_this.state={isLoaded:false};var uri=resolveAssetSource(props.source);_this._imageState=uri?STATUS_PENDING:STATUS_IDLE;return _this;}_createClass(Image,[{key:'componentDidMount',value:function componentDidMount(){if(this._imageState===STATUS_PENDING){this._createImageLoader();}}},{key:'componentDidUpdate',value:function componentDidUpdate(){if(this._imageState===STATUS_PENDING&&!this.image){this._createImageLoader();}}},{key:'componentWillReceiveProps',value:function componentWillReceiveProps(nextProps){var nextUri=resolveAssetSource(nextProps.source);if(resolveAssetSource(this.props.source)!==nextUri){this._updateImageState(nextUri?STATUS_PENDING:STATUS_IDLE);}}},{key:'componentWillUnmount',value:function componentWillUnmount(){this._destroyImageLoader();}},{key:'render',value:function render(){var isLoaded=this.state.isLoaded;var _props=this.props;var accessibilityLabel=_props.accessibilityLabel;var accessible=_props.accessible;var children=_props.children;var defaultSource=_props.defaultSource;var onLayout=_props.onLayout;var source=_props.source;var testID=_props.testID;var displayImage=resolveAssetSource(!isLoaded?defaultSource:source);var imageSizeStyle=resolveAssetDimensions(!isLoaded?defaultSource:source);var backgroundImage=displayImage?'url("'+displayImage+'")':null;var originalStyle=_StyleSheet2.default.flatten(this.props.style);var resizeMode=this.props.resizeMode||originalStyle.resizeMode||_ImageResizeMode2.default.cover;var style=_StyleSheet2.default.flatten([styles.initial,imageSizeStyle,originalStyle,backgroundImage&&{backgroundImage:backgroundImage},resizeModeStyles[resizeMode]]);// View doesn't support 'resizeMode' as a style
+delete style.resizeMode;/**
+     * The image is displayed as a background image to support `resizeMode`.
+     * The HTML image is hidden but used to provide the correct responsive
+     * image dimensions, and to support the image context menu. Child content
+     * is rendered into an element absolutely positioned over the image.
+     */return _react2.default.createElement(_View2.default,{accessibilityLabel:accessibilityLabel,accessibilityRole:'img',accessible:accessible,onLayout:onLayout,style:style,testID:testID},(0,_createDOMElement2.default)('img',{src:displayImage,style:styles.img}),children?_react2.default.createElement(_View2.default,{children:children,pointerEvents:'box-none',style:styles.children}):null);}},{key:'_createImageLoader',value:function _createImageLoader(){var uri=resolveAssetSource(this.props.source);this._destroyImageLoader();this.image=new window.Image();this.image.onerror=this._onError;this.image.onload=this._onLoad;this.image.src=uri;this._onLoadStart();}},{key:'_destroyImageLoader',value:function _destroyImageLoader(){if(this.image){this.image.onerror=null;this.image.onload=null;this.image=null;}}},{key:'_onLoadEnd',value:function _onLoadEnd(){var onLoadEnd=this.props.onLoadEnd;if(onLoadEnd){onLoadEnd();}}},{key:'_onLoadStart',value:function _onLoadStart()
+{var
 onLoadStart=this.props.onLoadStart;
@@ -198,3 +212,2 @@ this._updateImageState(STATUS_LOADING);
 initial:{
-alignSelf:'flex-start',
 backgroundColor:'transparent',
@@ -201,0 +214,0 @@ backgroundPosition:'center',

dist/components/View/index.js

@@ -127,6 +127,6 @@ var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _applyLayout=require('../../modules/applyLayout');var _applyLayout2=_interopRequireDefault(_applyLayout);
 // Browsers fire mouse events after touch events. This causes the
-// ResponderEvents and their handlers to fire twice for Touchables.
+// 'onResponderRelease' handler to be called twice for Touchables.
 // Auto-fix this issue by calling 'preventDefault' to cancel the mouse
 // events.
-var shouldCancelEvent=handlerName.indexOf('onResponder')===0;
+var shouldCancelEvent=handlerName==='onResponderRelease';
 
@@ -133,0 +133,0 @@ return function(e){

dist/propTypes/LayoutPropTypes.js

@@ -39,3 +39,3 @@ var _react=require('react');var
 flex:number,
-flexBasis:string,
+flexBasis:numberOrString,
 flexDirection:oneOf(['column','column-reverse','row','row-reverse']),
@@ -42,0 +42,0 @@ flexGrow:number,

package.json

 {
   "name": "react-native-web",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "description": "React Native for Web",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

657600

increased by0.08%

Lines of code

7506

increased by0.15%

Number of low supply chain risk alerts

4

decreased by-20%

No dependency changes