react-tether/lib/react-tether.modern.js

A positioning engine to make overlays, tooltips and dropdowns better

import e,{Component as t,isValidElement as n}from"react";import r from"react-dom";import s from"tether";function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o.apply(this,arguments)}const i=["onUpdate","onRepositioned","renderElement","renderElementTag","renderElementTo","renderTarget","className","id","style"];class a extends t{constructor(...t){super(...t),this._targetNode=e.createRef(),this._elementNode=e.createRef(),this._elementParentNode=null,this._tetherInstance=null}componentDidMount(){this._createContainer(),this.forceUpdate()}componentDidUpdate(e){if(e.renderElementTag===this.props.renderElementTag&&e.renderElementTo===this.props.renderElementTo||this._createContainer(),this._elementParentNode&&e.className!==this.props.className){const t=(e.className||"").split(" ").filter(e=>e.length>0),n=(this.props.className||"").split(" ").filter(e=>e.length>0);this._elementParentNode.classList.remove(...t),this._elementParentNode.classList.add(...n)}this._update()}componentWillUnmount(){this._destroy()}getTetherInstance(){return this._tetherInstance}disable(){var e;null==(e=this._tetherInstance)||e.disable()}enable(){var e;null==(e=this._tetherInstance)||e.enable()}on(e,t,n){this._tetherInstance.on(e,t,n)}once(e,t,n){this._tetherInstance.once(e,t,n)}off(e,t){this._tetherInstance.off(e,t)}position(){var e;null==(e=this._tetherInstance)||e.position()}_runRenders(){let e="function"==typeof this.props.renderTarget?this.props.renderTarget(this._targetNode):null,t="function"==typeof this.props.renderElement?this.props.renderElement(this._elementNode):null;return n(e)||(e=null),n(t)||(t=null),{targetComponent:e,elementComponent:t}}_createTetherInstance(e){this._tetherInstance&&this._destroy(),this._tetherInstance=new s(e),this._registerEventListeners()}_destroyTetherInstance(){this._tetherInstance&&(this._tetherInstance.destroy(),this._tetherInstance=null)}_registerEventListeners(){this.on("update",(...e)=>this.props.onUpdate&&this.props.onUpdate.apply(this,e)),this.on("repositioned",(...e)=>this.props.onRepositioned&&this.props.onRepositioned.apply(this,e))}get _renderNode(){const{renderElementTo:e}=this.props;return"string"==typeof e?document.querySelector(e):e||document.body}_destroy(){this._destroyTetherInstance(),this._removeContainer()}_createContainer(){this._removeContainer();const{renderElementTag:e="div",className:t}=this.props;this._elementParentNode=document.createElement(e),this._elementParentNode.className=t||""}_addContainerToDOM(){this._elementParentNode&&this._renderNode&&this._elementParentNode.parentNode!==this._renderNode&&this._renderNode.append(this._elementParentNode)}_removeContainer(){this._elementParentNode&&this._elementParentNode.parentNode&&this._elementParentNode.remove()}_update(){this._elementNode.current&&this._targetNode.current?this._updateTether():this._destroy()}_updateTether(){var e;const t=this.props,{id:n,style:r}=t,s=function(e,t){if(null==e)return{};var n,r,s={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(s[n]=e[n]);return s}(t,i),a=o({target:this._targetNode.current,element:this._elementParentNode},s),h=n||"";if(this._elementParentNode&&this._elementParentNode.id!==h&&(this._elementParentNode.id=h),this._elementParentNode&&r){const e=this._elementParentNode.style;for(const t in r)if(e[t]!==r[t]){let n=r[t];n&&(e[t]=n)}}this._addContainerToDOM(),this._tetherInstance?this._tetherInstance.setOptions(a):this._createTetherInstance(a),null==(e=this._tetherInstance)||e.position()}render(){const{targetComponent:t,elementComponent:n}=this._runRenders();return t?e.createElement(e.Fragment,null,t,n&&this._elementParentNode&&r.createPortal(n,this._elementParentNode)):null}}export{a as default};
//# sourceMappingURL=react-tether.modern.js.map