react-native-fit-image - npm Package Compare versions

Comparing version 1.4.0 to 1.4.1

dist/FitImage.js

@@ -1,30 +0,40 @@
-Object.defineProperty(exports,"__esModule",{value:true});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 _react=require('react');var _react2=_interopRequireDefault(_react);
+Object.defineProperty(exports,"__esModule",{value:true});var _jsxFileName='src/FitImage.js';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 _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 _react=require('react');var _react2=_interopRequireDefault(_react);
+var _reactNative=require('react-native');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}
 
 
 
-var _reactNative=require('react-native');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}
 
 
-
-var propTypes={
-height:_react.PropTypes.number,
-width:_react.PropTypes.number,
+var propTypes=_extends({},
+_reactNative.Image.propTypes,{
+indicator:_react.PropTypes.bool,
+indicatorColor:_react.PropTypes.string,
+indicatorSize:_reactNative.ActivityIndicator.propTypes.size,
 originalHeight:_react.PropTypes.number,
-originalWidth:_react.PropTypes.number,
-source:_react.PropTypes.object.isRequired,
-style:_reactNative.Image.propTypes.style};var 
+originalWidth:_react.PropTypes.number});
 
 
-FitImage=function(_Component){_inherits(FitImage,_Component);
+var styles=_reactNative.StyleSheet.create({
+container:{
+alignItems:'center',
+justifyContent:'center'}});var 
+
+
+
+FitImage=function(_Image){_inherits(FitImage,_Image);
 function FitImage(props){_classCallCheck(this,FitImage);var _this=_possibleConstructorReturn(this,Object.getPrototypeOf(FitImage).call(this,
 props));
 
-var size=[props.width,props.height];
-var originalSize=[props.originalWidth,props.originalHeight];
+_this.style=_reactNative.StyleSheet.flatten(props.style);
 
+if(_this.style){
+var size=[_this.style.width,_this.style.height];
+
 if(size.filter(function(e){return e;}).length===1){
 throw new Error('Props error: size props must be present '+
-'none or both of width and height.');}
+'none or both of width and height.');}}
 
 
+
+var originalSize=[props.originalWidth,props.originalHeight];
 if(originalSize.filter(function(e){return e;}).length===1){
@@ -37,35 +47,41 @@ throw new Error('Props error: originalSize props must be present '+
 height:0,
+isLoading:false,
 layoutWidth:undefined,
 originalWidth:undefined,
-originalHeight:undefined};return _this;}_createClass(FitImage,[{key:'componentDidMount',value:function componentDidMount()
+originalHeight:undefined};
 
 
+_this.getHeight=_this.getHeight.bind(_this);
+_this.getOriginalHeight=_this.getOriginalHeight.bind(_this);
+_this.getOriginalWidth=_this.getOriginalWidth.bind(_this);
+_this.getRatio=_this.getRatio.bind(_this);
+_this.getStyle=_this.getStyle.bind(_this);
+_this.renderChildren=_this.renderChildren.bind(_this);
+_this.resize=_this.resize.bind(_this);
+_this.setStateSize=_this.setStateSize.bind(_this);return _this;}_createClass(FitImage,[{key:'componentDidMount',value:function componentDidMount()
 
+
 {var _this2=this;
-if(!this.props.originalWidth||!this.props.originalHeight){
-_reactNative.Image.getSize(this.props.source.uri,function(width,height){
-var newHeight=_this2.state.layoutWidth/width;
+if(this.props.originalWidth&&this.props.originalHeight)return;
+if(!this.props.source.uri)return;
 
-_this2.setState({
-height:newHeight,
-originalWidth:width,
-originalHeight:height});});}}},{key:'getStyle',value:function getStyle()
+_reactNative.Image.getSize(this.props.source.uri,function(originalWidth,originalHeight){
+_this2.setStateSize(originalWidth,originalHeight);});}},{key:'getHeight',value:function getHeight(
 
 
 
+layoutWidth){
+if(this.style&&this.style.height){
+return this.style.height;}
 
 
-{
-if(this.props.width){
-return {width:this.props.width};}
+return this.getOriginalHeight()*this.getRatio(layoutWidth);}},{key:'getOriginalHeight',value:function getOriginalHeight()
 
-return {flex:1};}},{key:'getOriginalWidth',value:function getOriginalWidth()
 
-
 {
-return this.props.originalWidth||this.state.originalWidth;}},{key:'getOriginalHeight',value:function getOriginalHeight()
+return this.props.originalHeight||this.state.originalHeight;}},{key:'getOriginalWidth',value:function getOriginalWidth()
 
 
 {
-return this.props.originalHeight||this.state.originalHeight;}},{key:'getRatio',value:function getRatio(
+return this.props.originalWidth||this.state.originalWidth;}},{key:'getRatio',value:function getRatio(
 
@@ -76,10 +92,10 @@
 
-return layoutWidth/this.getOriginalWidth();}},{key:'getHeight',value:function getHeight(
+return layoutWidth/this.getOriginalWidth();}},{key:'getStyle',value:function getStyle()
 
 
-layoutWidth){
-if(this.props.height){
-return this.props.height;}
+{
+if(this.style&&this.style.width){
+return {width:this.style.width};}
 
-return this.getOriginalHeight()*this.getRatio(layoutWidth);}},{key:'resize',value:function resize(
+return {flex:1};}},{key:'resize',value:function resize(
 
@@ -93,6 +109,29 @@
 height:height,
-layoutWidth:width});}},{key:'render',value:function render()
+layoutWidth:width});}},{key:'setStateSize',value:function setStateSize(
 
 
 
+originalWidth,originalHeight){
+var height=this.state.layoutWidth/originalWidth;
+
+this.setState({
+height:height,
+originalHeight:originalHeight,
+originalWidth:originalWidth});}},{key:'renderChildren',value:function renderChildren()
+
+
+
+{
+if(this.state.isLoading&&this.props.indicator){
+return (
+_react2.default.createElement(_reactNative.ActivityIndicator,{
+color:this.props.indicatorColor,
+size:this.props.indicatorSize,__source:{fileName:_jsxFileName,lineNumber:124}}));}
+
+
+
+
+return this.props.children;}},{key:'render',value:function render()
+
+
 {var _this3=this;
@@ -103,8 +142,12 @@ return (
 style:[
+this.style,
+this.getStyle(),
 {height:this.state.height},
-this.props.style,
-this.getStyle()],
+styles.container],
 
-onLayout:function onLayout(event){return _this3.resize(event);}}));}}]);return FitImage;}(_react.Component);
+onLayout:this.resize,
+onLoad:function onLoad(){_this3.setState({isLoading:false});},
+onLoadStart:function onLoadStart(){_this3.setState({isLoading:true});},__source:{fileName:_jsxFileName,lineNumber:136}},
 
+this.renderChildren()));}}]);return FitImage;}(_reactNative.Image);
 
@@ -114,4 +157,5 @@
 
+
 FitImage.propTypes=propTypes;exports.default=
 
 FitImage;

package.json

 {
   "name": "react-native-fit-image",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Responsive image component to fit perfectly itself.",
@@ -5,0 +5,0 @@ "main": "dist/FitImage.js",

README.md

@@ -17,2 +17,6 @@ # React Native Fit Image [![npm version](https://badge.fury.io/js/react-native-fit-image.svg)](https://badge.fury.io/js/react-native-fit-image)
   },
+  fitImageWithSize: {
+    height: 100,
+    width: 30,
+  },
 });
@@ -27,2 +31,11 @@
 
+// draws image to fit inherited space automatically and shows indicator while image is loading
+<FitImage
+  indicator
+  indicatorColor="white" // react native colors or color codes like #919191
+  indicatorSize="large" // (small | large) or integer
+  source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
+  style={styles.fitImage}
+/>
+
 // draws image to fit inherited space automatically, even when screen is rotated.
@@ -39,6 +52,10 @@ <FitImage
   source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
-  width={200}
-  height={200}
-  style={styles.fitImage}
+  style={styles.fitImageWithSize}
 />
+
+// draws local image (currently, it does not support responsive)
+<FitImage
+  source={require('fit-image.png')}
+  style={styles.fitImageWithSize}
+/>
 ```
@@ -45,0 +62,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10304

increased by26.49%

Lines of code

136

increased by28.3%

Number of lines in readme file

67

increased by34%

No dependency changes