react-highlight-pop/dist/react-highlight-pop-es.js

React component for 'medium-like' text highlight

import e,{createRef as t,Component as n}from"react";function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".h-popover {\n  padding: 6px 10px;\n  background: #333;\n  border-radius: 3px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 50;\n  transform: translate(-50%, -100%);\n  transition: 0.2s all;\n  display: flex;\n  align-items: center;\n}\n\n.h-popover:after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  bottom: -5px;\n  transform: translateX(-50%);\n  width: 0;\n  height: 0;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-top: 6px solid #333;\n}\n\n.h-popover-item {\n  color: #fff;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n}\n\n.h-popover-item + .h-popover-item {\n  margin-left: 10px;\n}\n");var l=function(l){function s(e){var n,o,a;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),o=this,a=i(s).call(this,e),n=!a||"object"!=typeof a&&"function"!=typeof a?p(o):a,r(p(p(n)),"hidePopover",function(){n.setState({showPopover:!1})}),r(p(p(n)),"onMouseUp",function(){var e=window.getSelection(),t=e.toString().trim();if(t){var o=e.getRangeAt(0),r=o.startContainer.parentNode,i=o.endContainer.parentNode,a=n.highlight.current,p=a.querySelector(".h-popable");if(p){if(!p.contains(r)||!p.contains(i))return void n.hidePopover()}else if(!a.contains(r)||!a.contains(i))return void n.hidePopover();if(r.isSameNode(i)){var l=o.getBoundingClientRect(),s=l.x,u=l.y,c=l.width;if(c){n.setState({x:s+c/2,y:u+window.scrollY-10,selectedText:t,showPopover:!0});var d=n.props.onHighlightPop;(void 0===d?function(){}:d)(t)}else n.hidePopover()}else n.hidePopover()}else n.hidePopover()}),n.state={showPopover:!1,x:0,y:0,selectedText:""},n.highlight=t(),n}var u,c,d;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&a(e,t)}(s,n),u=s,(c=[{key:"componentDidMount",value:function(){window.addEventListener("mouseup",this.onMouseUp)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("mouseup",this.onMouseUp)}},{key:"render",value:function(){var t=this.state,n=t.showPopover,o=t.x,r=t.y,i=this.props,a=i.children,p=i.popoverItems;return e.createElement("div",{ref:this.highlight},n&&e.createElement("div",{className:"h-popover",style:{left:"".concat(o,"px"),top:"".concat(r,"px")},role:"presentation",onMouseDown:function(e){return e.preventDefault()}},p?p("h-popover-item"):e.createElement("span",{role:"button",className:"h-popover-item"},"Add yours")),a)}}])&&o(u.prototype,c),d&&o(u,d),s}();l.defaultProps={onHighlightComment:null,onExitHighlight:null,popoverItems:null,children:null};export default l;
//# sourceMappingURL=react-highlight-pop-es.js.map