UNPKG

toggler-react

Version:

This is a react toggler. It can be used to build dropdowns, popover, tooltips

1 lines 3.38 kB
module.exports=function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=1)}([function(e,t){e.exports=require("react")},function(e,t,o){"use strict";o.r(t);var n,r=o(0),i=o.n(r),u=(n=[],{subscribe:function(e){var t=Math.random();return n.push({id:t,callback:e}),{remove:function(){n=n.filter((function(e){return e.id!==t}))}}},publish:function(e){n.map((function(t){return t.callback(e)}))}});"undefined"!=typeof window&&window.addEventListener&&window.addEventListener("click",u.publish);var c=u;var l,p=function e(t,o){return!(!o||o===document.body)&&(o===t||e(t,o.parentElement))},s=(l=function(e,t){return(l=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])})(e,t)},function(e,t){function o(){this.constructor=e}l(e,t),e.prototype=null===t?Object.create(t):(o.prototype=t.prototype,new o)});function a(){return null}function d(){return null}var f={position:"relative"},v={position:"absolute",top:"100%",left:"0",right:"0",zIndex:1},h=function(e){function t(t){var o=e.call(this,t)||this;return o.onWindowClick=o.onWindowClick.bind(o),o.onFieldClick=o.onFieldClick.bind(o),o.windowClickSubscription={remove:function(){}},o.field=i.a.createRef(),o.state={showPopover:!1},o}return s(t,e),t.getDerivedStateFromProps=function(e,t){return e.popoverVisible!==t.showPopover?{showPopover:e.popoverVisible}:{}},t.prototype.componentDidMount=function(){this.windowClickSubscription=c.subscribe(this.onWindowClick)},t.prototype.componentWillUnmount=function(){this.windowClickSubscription.remove()},t.prototype.onWindowClick=function(e){this.state.showPopover&&!p(this.field.current,e.target)&&(this.props.onToggle(!1),this.setState({showPopover:!1}))},t.prototype.onFieldClick=function(){var e=this.state.showPopover;this.props.onToggle(!e)},t.prototype.render=function(){var e=this.props,o=e.children,n=void 0===o?[]:o,r=e.overrideClass,u=this.state.showPopover,c=n.find((function(e){return e.type===t.Field||e.type.displayName===t.Field.name})),l=n.find((function(e){return e.type===t.Popover||e.type.displayName===t.Popover.name}));return i.a.createElement("div",{style:f,className:"toggler-react "+r},c&&i.a.createElement("div",{className:"tr-field",onClick:this.onFieldClick,ref:this.field},c.props.children),u&&l&&i.a.createElement("div",{style:v,className:"tr-popover",onClick:function(e){return e.stopPropagation()}},l.props.children))},t.Field=a,t.Popover=d,t}(r.Component),y=h;h.defaultProps={overrideClass:""};t.default=y}]);