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

React component for 'medium-like' text highlight

"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=require("react"),React__default=_interopDefault(React);function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(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 _createClass(e,t,n){return t&&_defineProperties(e.prototype,t),n&&_defineProperties(e,n),e}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _inherits(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&&_setPrototypeOf(e,t)}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _possibleConstructorReturn(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?_assertThisInitialized(e):t}function styleInject(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))}}var css=".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";styleInject(css);var HighlightPop=function(e){function t(e){var n;return _classCallCheck(this,t),_defineProperty(_assertThisInitialized(_assertThisInitialized(n=_possibleConstructorReturn(this,_getPrototypeOf(t).call(this,e)))),"hidePopover",function(){n.setState({showPopover:!1})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(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,s=n.highlight.current,a=s.querySelector(".h-popable");if(a){if(!a.contains(r)||!a.contains(i))return void n.hidePopover()}else if(!s.contains(r)||!s.contains(i))return void n.hidePopover();if(r.isSameNode(i)){var l=o.getBoundingClientRect(),p=l.x,c=l.y,u=l.width;if(u){n.setState({x:p+u/2,y:c+window.scrollY-10,selectedText:t,showPopover:!0});var f=n.props.onHighlightPop;(void 0===f?function(){}:f)(t)}else n.hidePopover()}else n.hidePopover()}else n.hidePopover()}),n.state={showPopover:!1,x:0,y:0,selectedText:""},n.highlight=React.createRef(),n}return _inherits(t,React.Component),_createClass(t,[{key:"componentDidMount",value:function(){window.addEventListener("mouseup",this.onMouseUp)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("mouseup",this.onMouseUp)}},{key:"render",value:function(){var e=this.state,t=e.showPopover,n=e.x,o=e.y,r=this.props,i=r.children,s=r.popoverItems;return React__default.createElement("div",{ref:this.highlight},t&&React__default.createElement("div",{className:"h-popover",style:{left:"".concat(n,"px"),top:"".concat(o,"px")},role:"presentation",onMouseDown:function(e){return e.preventDefault()}},s?s("h-popover-item"):React__default.createElement("span",{role:"button",className:"h-popover-item"},"Add yours")),i)}}]),t}();HighlightPop.defaultProps={onHighlightComment:null,onExitHighlight:null,popoverItems:null,children:null},module.exports=HighlightPop;
//# sourceMappingURL=react-highlight-pop.js.map