UNPKG

react-smooth-image

Version:

Smooth loading non-bouncing images for react that just work

1 lines 4.16 kB
module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=function(e){return e&&e.__esModule?e:{default:e}}(n(1));t.default=r.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=a(n(2)),i=a(n(3));function a(e){return e&&e.__esModule?e:{default:e}}var u={src:i.default.string.isRequired,alt:i.default.string.isRequired,placeholderImgUrl:i.default.string,containerStyles:i.default.object,imageStyles:i.default.object,transitionTime:i.default.number,transitionTimingFunction:i.default.string},l=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var n=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={loaded:{}},n.imageLoadHandler=n.imageLoadHandler.bind(n),n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,o.default.Component),r(t,[{key:"imageLoadHandler",value:function(){var e=this.props,t=e.transitionTime,n=e.transitionTimingFunction;this.setState({loaded:{opacity:"1",transitionProperty:"opacity",transitionDuration:t+"s",transitionTimingFunction:n}})}},{key:"render",value:function(){var e=this.props,t=e.placeholderImgUrl,n=e.containerStyles,r=e.imageStyles,i=e.src,a=e.alt,u=t&&"url("+t+")",l=this.state.loaded;return o.default.createElement("div",{style:Object.assign({},{position:"relative",width:"100%",height:0,opacity:0,overflow:"hidden",backgroundImage:u,paddingBottom:"100%",backgroundSize:"cover"},n,l)},o.default.createElement("img",{src:i,alt:a,style:Object.assign({position:"absolute",top:0,left:0,width:"100%"},r),onLoad:this.imageLoadHandler}))}}]),t}();t.default=l,l.propTypes=u,l.defaultProps={containerStyles:{},imageStyles:{},transitionTime:.3,transitionTimingFunction:"ease-in",placeholderImgUrl:""}},function(e,t){e.exports=require("react")},function(e,t,n){e.exports=n(4)()},function(e,t,n){"use strict";var r=n(5);function o(){}e.exports=function(){function e(e,t,n,o,i,a){if(a!==r){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=o,n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}]);