arch-editor/lib/AtomicTable.js

Rich text editor with a high degree of customization.

/*! For license information please see AtomicTable.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 P}});var n=require("react"),r=e.n(n),o=require("prop-types"),a=e.n(o),c=require("classnames/bind"),u=e.n(c),l=require("draft-js"),i=require("uuid"),m=require("./draftUtils"),s=require("./default"),f=require("./atomic"),d=require("./Tooltip"),b=e.n(d),y=require("./Icon"),p=e.n(y),E={"table-bar-hover":"ArchEditor-table-bar-hover",tableBarHover:"ArchEditor-table-bar-hover","atomic-table":"ArchEditor-atomic-table",atomicTable:"ArchEditor-atomic-table",readonly:"ArchEditor-readonly","column-bar":"ArchEditor-column-bar",columnBar:"ArchEditor-column-bar",last:"ArchEditor-last","row-bar":"ArchEditor-row-bar",rowBar:"ArchEditor-row-bar","edit-toolbar":"ArchEditor-edit-toolbar",editToolbar:"ArchEditor-edit-toolbar"},v="ArchEditor-popover-button-group",h="ArchEditor-large",k="ArchEditor-popover-button",g="ArchEditor-popover-divider";function O(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function S(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?O(Object(n),!0).forEach((function(t){w(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function w(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function C(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,a=[],c=!0,u=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(u)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return j(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)?j(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 j(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 A=u().bind(E),N=l.EditorState.createEmpty().getCurrentContent(),T=l.EditorState.createWithContent(N,s.defaultDecorator);function P(e){var t=e.block,o=e.data,a=void 0===o?{}:o,c=e.readOnly,u=e.editorState,d=e.setEditorState,y=e.editing,O=e.setEditing,w=e.Editor,j=(0,n.useRef)(null),N=C((0,n.useState)([]),2),P=N[0],q=N[1];(0,n.useEffect)((function(){var e;return a.initial&&O(!0,(function(){e=setTimeout((function(){j.current&&j.current.scrollIntoView()}),0)})),function(){e&&clearTimeout(e)}}),[a,O]),(0,n.useEffect)((function(){var e=function(e){return e.map((function(e){return{key:e.key,columns:e.columns.map((function(e){var t=(0,l.convertFromRaw)(e.rawContentState),n=l.EditorState.createWithContent(t,s.defaultDecorator);return{key:e.key,editorState:n}}))}}))}(a.rows);q(e)}),[a,y]);var D=(0,n.useCallback)((function(){var e=function(e){return e.map((function(e){return{key:e.key,columns:e.columns.map((function(e){var t=e.editorState.getCurrentContent(),n=(0,l.convertToRaw)(t);return{key:e.key,rawContentState:n}}))}}))}(P),n=(0,m.updateBlockEntityData)(t,u,{rows:e,initial:!1});d(n)}),[t,u,P,d]),B=(0,n.useCallback)((function(){var e=(0,m.removeBlockEntity)(t,u);d(e)}),[t,u,d]),I=(0,n.useCallback)((function(e,t){var n=C(t,2),r=n[0],o=n[1],a=P.concat();a[r].columns[o].editorState=e,q(a)}),[P]),M=(0,n.useCallback)((function(){O(!0)}),[O]),_=(0,n.useCallback)((function(){O(!1)}),[O]),R=(0,n.useCallback)((function(){O(!1,(function(){D()}))}),[D,O]),x=(0,n.useCallback)((function(){y?O(!1,(function(){B()})):B()}),[y,B,O]),F=function(e){q((function(t){return t.map((function(t){var n=t.columns.concat();return n.splice(e,0,{key:(0,i.v4)(),editorState:T}),S(S({},t),{},{columns:n})}))}))},U=function(e){return r().createElement("span",{className:"".concat(v," ").concat(h)},r().createElement("button",{type:"button",className:k,onClick:function(){return function(e){F(e)}(e)}},r().createElement(p(),{name:"insert-column-left"})),r().createElement("span",{className:g}),r().createElement("button",{type:"button",className:k,onClick:function(){return function(e){F(e+1)}(e)}},r().createElement(p(),{name:"insert-column-right"})),P[0].columns.length>1&&r().createElement(r().Fragment,null,r().createElement("span",{className:g}),r().createElement("button",{type:"button",className:k,onClick:function(){return function(e){q((function(t){return t.map((function(t){return S(S({},t),{},{columns:t.columns.filter((function(t,n){return n!==e}))})}))}))}(e)}},r().createElement(p(),{name:"delete-column"}))))},W=function(e){var t=P[0].columns;q((function(n){var r={key:(0,i.v4)(),columns:t.map((function(){return{key:(0,i.v4)(),editorState:T}}))},o=n.concat();return o.splice(e,0,r),o}))},H=function(e){return r().createElement("span",{className:"".concat(v," ").concat(h)},r().createElement("button",{type:"button",className:k,onClick:function(){return function(e){W(e)}(e)}},r().createElement(p(),{name:"insert-row-above"})),r().createElement("span",{className:g}),r().createElement("button",{type:"button",className:k,onClick:function(){return function(e){W(e+1)}(e)}},r().createElement(p(),{name:"insert-row-below"})),r().createElement("span",{className:g}),r().createElement("button",{type:"button",className:k,onClick:function(){return function(e){q((function(t){return t.filter((function(t,n){return n!==e}))}))}(e)}},r().createElement(p(),{name:"delete-row"})))},K=(0,f.useToolbar)({editing:!1,onEdit:M,onDelete:x}),V=r().createElement("table",{className:A({readonly:!y})},r().createElement("tbody",null,y&&r().createElement("tr",{className:E.columnBar},P[0]&&P[0].columns.map((function(e,t){var n=e.key;return r().createElement(b(),{content:U(t),key:n},r().createElement("td",null))})),r().createElement("td",{className:E.last})),P.map((function(e,t){var n=e.key,o=e.columns;return r().createElement("tr",{key:n},o.map((function(e,n){return r().createElement("td",{key:e.key},r().createElement(w,{editorKey:e.key,editorState:e.editorState,onChange:function(e){return I(e,[t,n])},readOnly:!y}))})),y&&r().createElement(b(),{content:H(t),placement:"right"},r().createElement("td",{className:E.rowBar})))}))));return c?r().createElement("div",{className:E.atomicTable},V):y?r().createElement("div",{className:E.atomicTable,ref:j},V,r().createElement(f.EditToolbar,{className:E.editToolbar,onCancel:_,onOk:R,onDelete:x})):r().createElement(b(),{content:K},r().createElement("div",{className:E.atomicTable},V))}P.propTypes={block:a().object,data:a().any,readOnly:a().bool,editorState:a().object,setEditorState:a().func,editing:a().bool,setEditing:a().func,Editor:a().elementType},module.exports=t}();