@shopgate/engage/components/IntersectionVisibility/index.js

Shopgate's ENGAGE library.

var _IntersectionVisibility;function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_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;};return _extends.apply(this,arguments);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a 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);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import{Component}from'react';import PropTypes from'prop-types';import'intersection-observer';/**
 * The IntersectionVisibility component.
 * @example
 *    <IntersectionVisibility>
 *       {({ visible, ratio, setRef }) => (
           <Video autoPlay={visible && ratio > 0.8} ref={setRef} />}
        )}
 *     </IntersectionVisibility>
 */var IntersectionVisibility=/*#__PURE__*/function(_Component){function IntersectionVisibility(){var _this2;_classCallCheck(this,IntersectionVisibility);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,IntersectionVisibility,[].concat(args));_defineProperty(_this2,"state",{visible:true,ratio:1,entries:null});/**
   * @param {Object} ref ref
   */_defineProperty(_this2,"setRef",function(ref){if(!ref){return;}_this2.node=ref;if(_this2.io){_this2.io.observe(_this2.node);}});/**
   * @param {IntersectionObserverEntry[]} entries first entry
   */_defineProperty(_this2,"handleIntersectionEvent",function(entries){var _entries=_slicedToArray(entries,1),intersectionRatio=_entries[0].intersectionRatio;_this2.setState({visible:intersectionRatio>0,ratio:intersectionRatio,entries:entries});});return _this2;}_inherits(IntersectionVisibility,_Component);return _createClass(IntersectionVisibility,[{key:"componentDidMount",value:/**
   * Start the observer when the component is mounted
   */function componentDidMount(){this.io=new IntersectionObserver(this.handleIntersectionEvent,{threshold:this.props.thresholds});if(this.node){this.io.observe(this.node);}}/**
   * @inheritDoc
   */},{key:"componentWillUnmount",value:function componentWillUnmount(){if(this.io){this.io.disconnect();}}},{key:"render",value:/**
   * @returns {JSX.Element}
   */function render(){return this.props.children(_extends({},this.state,{setRef:this.setRef}));}}]);}(Component);_IntersectionVisibility=IntersectionVisibility;/**
   * Calculate threshold by number of steps
   * Ex: 5 steps will be [0.20, 0.40, 0.60, 0.80, 1.00]
   * @param {number} steps .
   * @returns {number[]}
   */_defineProperty(IntersectionVisibility,"buildThresholdList",function(steps){return Array(steps).fill(0).map(function(v,i){return(i+1)/steps;});});_defineProperty(IntersectionVisibility,"defaultProps",{thresholds:_IntersectionVisibility.buildThresholdList(10)});export default IntersectionVisibility;