arch-editor/lib/CellSelector.js

Rich text editor with a high degree of customization.

/*! For license information please see CellSelector.js.LICENSE.txt */
!function(){"use strict";var e={n:function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,{a:n}),n},d:function(t,n){for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{default:function(){return v}});var n=require("react"),r=e.n(n),o=require("react-dom"),l=e.n(o),a=require("prop-types"),c=e.n(a),u=require("react-popper"),i=require("classnames/bind"),f=e.n(i),s=require("./Icon"),d=e.n(s);function p(){return(p=Object.assign||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}).apply(this,arguments)}function m(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,l=[],a=!0,c=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(l.push(r.value),!t||l.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(c)throw o}}return l}}(e,t)||function(e,t){if(e){if("string"==typeof e)return y(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?y(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var b=f().bind({"cell-selector":"ArchEditor-cell-selector",cellSelector:"ArchEditor-cell-selector",hidden:"ArchEditor-hidden",active:"ArchEditor-active"});function v(e){var t=e.onSelect,o=e.rows,a=e.cols,c=m((0,n.useState)([0,0]),2),i=c[0],f=c[1],s=m((0,n.useState)(!1),2),y=s[0],v=s[1],S=m((0,n.useState)(null),2),h=S[0],E=S[1],g=m((0,n.useState)(null),2),w=g[0],A=g[1],O=(0,u.usePopper)(h,w,{placement:"bottom",modifiers:[{name:"offset",options:{offset:[0,10]}},{name:"flip",enabled:!0},{name:"preventOverflow",options:{padding:5}},{name:"computeStyles",options:{adaptive:!1}}]}),P=O.styles,j=O.attributes,M=function(){f([0,0])},k=(0,n.useCallback)((function(){v(!1)}),[]);return(0,n.useEffect)((function(){return document.body.addEventListener("click",k),function(){document.body.removeEventListener("click",k)}}),[k]),r().createElement(r().Fragment,null,r().createElement("span",{onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation(),v((function(e){return!e}))},ref:E},r().createElement(d(),{name:"table"}),r().createElement(d(),{name:"chevron-down",style:{fontSize:12,verticalAlign:"middle"}})),l().createPortal(r().createElement("table",p({ref:A,style:P.popper,className:b("cellSelector",{hidden:!y}),border:1,cellPadding:5,cellSpacing:4,onMouseDown:function(){var e=m(i,2),n=e[0],r=e[1];t&&t([n+1,r+1])},onMouseLeave:M,onBlur:M},j.popper),r().createElement("tbody",null,new Array(o).fill().map((function(e,t){return r().createElement("tr",{key:t},new Array(a).fill().map((function(e,n){return r().createElement("td",{className:b({active:i[0]>=t&&i[1]>=n}),key:n,onMouseEnter:function(){return function(e,t){f([e,t])}(t,n)}})})))}))),r().createElement("tfoot",null,r().createElement("tr",null,r().createElement("td",{colSpan:a},"".concat(i[0]+1," × ").concat(i[1]+1))))),document.body))}v.propTypes={onSelect:c().func,rows:c().number,cols:c().number},module.exports=t}();