tix-react-ssr/dist/Img/index.js

Tiket.com React Project Scripts

'use strict';Object.defineProperty(exports,"__esModule",{value:true});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 _jsx=function(){var REACT_ELEMENT_TYPE=typeof Symbol==="function"&&Symbol.for&&Symbol.for("react.element")||0xeac7;return function createRawReactElement(type,props,key,children){var defaultProps=type&&type.defaultProps;var childrenLength=arguments.length-3;if(!props&&childrenLength!==0){props={};}if(props&&defaultProps){for(var propName in defaultProps){if(props[propName]===void 0){props[propName]=defaultProps[propName];}}}else if(!props){props=defaultProps||{};}if(childrenLength===1){props.children=children;}else if(childrenLength>1){var childArray=Array(childrenLength);for(var i=0;i<childrenLength;i++){childArray[i]=arguments[i+3];}props.children=childArray;}return{$$typeof:REACT_ELEMENT_TYPE,type:type,key:key===undefined?null:''+key,ref:null,props:props,_owner:null};};}();var _typeof=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(obj){return typeof obj;}:function(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};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);var _ExecutionEnvironment=require('fbjs/lib/ExecutionEnvironment');var _reactIntersectionObserver=require('@researchgate/react-intersection-observer');var _reactIntersectionObserver2=_interopRequireDefault(_reactIntersectionObserver);var _propTypes=require('prop-types');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}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 _ref3=_jsx('span',{});var Img=function(_PureComponent){_inherits(Img,_PureComponent);function Img(){var _ref;var _temp,_this,_ret;_classCallCheck(this,Img);for(var _len=arguments.length,args=Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}return _ret=(_temp=(_this=_possibleConstructorReturn(this,(_ref=Img.__proto__||Object.getPrototypeOf(Img)).call.apply(_ref,[this].concat(args))),_this),_this.state={isIntersecting:false,intersected:false,errorLoad:false,src:_this.props.src},_temp),_possibleConstructorReturn(_this,_ret);}_createClass(Img,[{key:'handleError',value:function handleError(e){e.preventDefault();this.setState({errorLoad:true});}},{key:'componentWillReceiveProps',value:function componentWillReceiveProps(nextProps){var src=this.state.src;var nextSrc=nextProps.src;if(src!==nextSrc){this.setState({src:nextSrc,errorLoad:false});}}},{key:'componentDidMount',value:function componentDidMount(){var _props=this.props,_props$src=_props.src,src=_props$src===undefined?'':_props$src,webp=_props.webp;var errorLoad=this.state.errorLoad;if(!webp||errorLoad){return;}var img=new Image();img.onerror=this.handleError.bind(this);img.src=src+'.webp';}},{key:'handleChange',value:function handleChange(_ref2){var isIntersecting=_ref2.isIntersecting;var intersected=this.state.intersected;if(intersected){return;}this.setState({isIntersecting:isIntersecting,intersected:isIntersecting===true});}},{key:'canUseWebP',value:function canUseWebP(src){if(!new RegExp(/\.(png|jpe?g)$/i).test(src)){return false;}if(!_ExecutionEnvironment.canUseDOM){return true;}var elem=(typeof document==='undefined'?'undefined':_typeof(document))==='object'?document.createElement('canvas'):{};if(elem.getContext&&elem.getContext('2d')){// was able or not to get WebP representation
return elem.toDataURL('image/webp').indexOf('data:image/webp')===0;}else{// very old browser like IE 8, canvas not supported
return false;}}},{key:'render',value:function render(){var _state=this.state,isIntersecting=_state.isIntersecting,errorLoad=_state.errorLoad;var _props2=this.props,_props2$src=_props2.src,src=_props2$src===undefined?'':_props2$src,webp=_props2.webp,restProps=_objectWithoutProperties(_props2,['src','webp']);var isAlreadyWebPsrc=new RegExp(/\.webp$/i).test(src);var WEBPSupport=this.canUseWebP(src);return _jsx(_reactIntersectionObserver2.default,{onChange:this.handleChange.bind(this)},void 0,isIntersecting?_react2.default.createElement('img',_extends({src:''+src+(webp&&WEBPSupport&&!isAlreadyWebPsrc&&!errorLoad?'.webp':'')},restProps)):_ref3);}}]);return Img;}(_react.PureComponent);exports.default=Img;