react-tether
Version:
A positioning engine to make overlays, tooltips and dropdowns better
3 lines (2 loc) • 5.15 kB
JavaScript
import e,{isValidElement as t,Component as n}from"react";import r from"react-dom";import o from"tether";function i(){return i=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},i.apply(this,arguments)}function s(e,t){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},s(e,t)}var a=["onUpdate","onRepositioned","renderElement","renderElementTag","renderElementTo","renderTarget","className","id","style"],l=/*#__PURE__*/function(n){var l,c;function h(){for(var t,r=arguments.length,o=new Array(r),i=0;i<r;i++)o[i]=arguments[i];return(t=n.call.apply(n,[this].concat(o))||this)._targetNode=e.createRef(),t._elementNode=e.createRef(),t._elementParentNode=null,t._tetherInstance=null,t}c=n,(l=h).prototype=Object.create(c.prototype),l.prototype.constructor=l,s(l,c);var p,d,u=h.prototype;return u.componentDidMount=function(){this._createContainer(),this.forceUpdate()},u.componentDidUpdate=function(e){if(e.renderElementTag===this.props.renderElementTag&&e.renderElementTo===this.props.renderElementTo||this._createContainer(),this._elementParentNode&&e.className!==this.props.className){var t,n,r=(e.className||"").split(" ").filter(function(e){return e.length>0}),o=(this.props.className||"").split(" ").filter(function(e){return e.length>0});(t=this._elementParentNode.classList).remove.apply(t,r),(n=this._elementParentNode.classList).add.apply(n,o)}this._update()},u.componentWillUnmount=function(){this._destroy()},u.getTetherInstance=function(){return this._tetherInstance},u.disable=function(){var e;null==(e=this._tetherInstance)||e.disable()},u.enable=function(){var e;null==(e=this._tetherInstance)||e.enable()},u.on=function(e,t,n){this._tetherInstance.on(e,t,n)},u.once=function(e,t,n){this._tetherInstance.once(e,t,n)},u.off=function(e,t){this._tetherInstance.off(e,t)},u.position=function(){var e;null==(e=this._tetherInstance)||e.position()},u._runRenders=function(){var e="function"==typeof this.props.renderTarget?this.props.renderTarget(this._targetNode):null,n="function"==typeof this.props.renderElement?this.props.renderElement(this._elementNode):null;return t(e)||(e=null),t(n)||(n=null),{targetComponent:e,elementComponent:n}},u._createTetherInstance=function(e){this._tetherInstance&&this._destroy(),this._tetherInstance=new o(e),this._registerEventListeners()},u._destroyTetherInstance=function(){this._tetherInstance&&(this._tetherInstance.destroy(),this._tetherInstance=null)},u._registerEventListeners=function(){var e=this;this.on("update",function(){return e.props.onUpdate&&e.props.onUpdate.apply(e,[].slice.call(arguments))}),this.on("repositioned",function(){return e.props.onRepositioned&&e.props.onRepositioned.apply(e,[].slice.call(arguments))})},u._destroy=function(){this._destroyTetherInstance(),this._removeContainer()},u._createContainer=function(){this._removeContainer();var e=this.props,t=e.renderElementTag,n=e.className;this._elementParentNode=document.createElement(void 0===t?"div":t),this._elementParentNode.className=n||""},u._addContainerToDOM=function(){this._elementParentNode&&this._renderNode&&this._elementParentNode.parentNode!==this._renderNode&&this._renderNode.append(this._elementParentNode)},u._removeContainer=function(){this._elementParentNode&&this._elementParentNode.parentNode&&this._elementParentNode.remove()},u._update=function(){this._elementNode.current&&this._targetNode.current?this._updateTether():this._destroy()},u._updateTether=function(){var e,t=this.props,n=t.id,r=t.style,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}(t,a),s=i({target:this._targetNode.current,element:this._elementParentNode},o),l=n||"";if(this._elementParentNode&&this._elementParentNode.id!==l&&(this._elementParentNode.id=l),this._elementParentNode&&r){var c=this._elementParentNode.style;for(var h in r)if(c[h]!==r[h]){var p=r[h];p&&(c[h]=p)}}this._addContainerToDOM(),this._tetherInstance?this._tetherInstance.setOptions(s):this._createTetherInstance(s),null==(e=this._tetherInstance)||e.position()},u.render=function(){var t=this._runRenders(),n=t.targetComponent,o=t.elementComponent;return n?e.createElement(e.Fragment,null,n,o&&this._elementParentNode&&r.createPortal(o,this._elementParentNode)):null},p=h,(d=[{key:"_renderNode",get:function(){var e=this.props.renderElementTo;return"string"==typeof e?document.querySelector(e):e||document.body}}])&&function(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,"symbol"==typeof(o=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(r.key))?o:String(o),r)}var o}(p.prototype,d),Object.defineProperty(p,"prototype",{writable:!1}),h}(n);export{l as default};
//# sourceMappingURL=react-tether.esm.js.map