@skele/components/dist/es5/viewport/aware/index.js

Skele custom components for React and React Native.

'use strict';Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var Utils=_interopRequireWildcard(require("../utils"));var _jsxFileName="/Users/bevkoski/code/skele/packages/components/src/viewport/aware/index.js";function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key)){var desc=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):{};if(desc.get||desc.set){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}}newObj.default=obj;return newObj;}}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default: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 _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 _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);}var _default=function _default(WrappedComponent){var _class,_temp;return _temp=_class=function(_React$Component){_inherits(_class,_React$Component);function _class(props,context){var _this;_classCallCheck(this,_class);_this=_possibleConstructorReturn(this,_getPrototypeOf(_class).call(this,props,context));_this._onViewportChange=function(info){_this._lastInfo=info;if(!_this.nodeHandle)return;if(info.shouldMeasureLayout||_this.state.componentOffsetX==null||_this.state.componentOffsetY==null||_this.state.componentWidth==null||_this.state.componentHeight==null){if(!_this._isMounted)return;_reactNative.UIManager.measureLayout(_this.nodeHandle,info.parentHandle,function(){},function(offsetX,offsetY,width,height){if(!_this._isMounted)return;var inVerticalViewport=Utils.isInViewport(info.viewportOffsetY,info.viewportHeight,offsetY,height,_this.props.preTriggerRatio);var inHorizontalViewport=Utils.isInViewport(info.viewportOffsetX,info.viewportWidth,offsetX,width,_this.props.preTriggerRatio);var inViewport=inVerticalViewport&&inHorizontalViewport;_this._checkViewportEnterOrLeave(inViewport);_this.setState({componentOffsetY:offsetY,componentOffsetX:offsetX,componentHeight:height,componentWidth:width,inViewport:inViewport});});}else{var inVerticalViewport=Utils.isInViewport(info.viewportOffsetY,info.viewportHeight,_this.state.componentOffsetY,_this.state.componentHeight,_this.props.preTriggerRatio);var inHorizontalViewport=Utils.isInViewport(info.viewportOffsetX,info.viewportWidth,_this.state.componentOffsetX,_this.state.componentWidth,_this.props.preTriggerRatio);var inViewport=inVerticalViewport&&inHorizontalViewport;if(_this._checkViewportEnterOrLeave(inViewport)){_this.setState({inViewport:inViewport});}}};_this._checkViewportEnterOrLeave=function(inViewport){if(!_this.state.inViewport&&inViewport){_this.props.onViewportEnter&&_this.props.onViewportEnter();return true;}else if(_this.state.inViewport&&!inViewport){_this.props.onViewportLeave&&_this.props.onViewportLeave();return true;}return false;};_this.state={componentOffsetX:null,componentOffsetY:null,componentWidth:null,componentHeight:null,inViewport:false};return _this;}_createClass(_class,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this.context.addViewportListener&&this.context.addViewportListener(this._onViewportChange);this._isMounted=true;this._lastInfo&&setTimeout(function(){return _this2._onViewportChange(_this2._lastInfo);},50);}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.context.removeViewportListener&&this.context.removeViewportListener(this._onViewportChange);this._isMounted=false;}},{key:"render",value:function render(){var _this3=this;return _react.default.createElement(WrappedComponent,_extends({},this.props,{inViewport:this.state.inViewport,ref:function ref(_ref){_this3.nodeHandle=(0,_reactNative.findNodeHandle)(_ref);_this3.props.innerRef&&_this3.props.innerRef(_ref);},__source:{fileName:_jsxFileName,lineNumber:112}}));}}]);return _class;}(_react.default.Component),_class.propTypes={preTriggerRatio:_propTypes.default.number,onViewportEnter:_propTypes.default.func,onViewportLeave:_propTypes.default.func,innerRef:_propTypes.default.func},_class.contextTypes={addViewportListener:_propTypes.default.func,removeViewportListener:_propTypes.default.func},_class.displayName="ViewportAware("+(WrappedComponent.displayName||WrappedComponent.name||'Component')+")",_temp;};exports.default=_default;