UNPKG

@progress/kendo-react-editor

Version:

React Editor enables users to create rich text content through a WYSIWYG interface. KendoReact Editor package

www.telerik.com/kendo-react-ui

telerik/kendo-react

9 lines (8 loc) • 16.8 kB
1
2
3
4
5
6
7
8
9
/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const be=require("react"),A=require("@progress/kendo-react-buttons"),n=require("@progress/kendo-react-inputs"),m=require("@progress/kendo-react-dropdowns"),oe=require("@progress/kendo-react-dialogs"),L=require("@progress/kendo-react-layout"),i=require("@progress/kendo-svg-icons"),o=require("../utils.js"),u=require("./tableCellProperties.js"),ue=require("@progress/kendo-react-intl"),t=require("../../messages/index.js"),E=require("./tablePropsUtils.js");function ve(r){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const a in r)if(a!=="default"){const g=Object.getOwnPropertyDescriptor(r,a);Object.defineProperty(s,a,g.get?g:{enumerable:!0,get:()=>r[a]})}}return s.default=r,Object.freeze(s)}const e=ve(be),ye=r=>{const{view:s,...a}=r,g=ue.useLocalization(),[P,f]=e.useState(!1),b=!!(s&&o.parentNode(s.state.selection.$from,c=>c.type.spec.tableRole==="table")),v=e.useCallback(()=>{f(!0)},[]),d=e.useCallback(()=>{f(!1),s==null||s.focus()},[s]),k=e.useCallback(c=>{if(s&&c){const p=E.applyTableData(s.state,c);p&&s.dispatch(p)}d()},[s,d]);return e.createElement(e.Fragment,null,e.createElement(A.Button,{type:"button",title:g.toLanguageString(t.keys.tableProperties,t.messages[t.keys.tableProperties]),icon:"table-properties",svgIcon:i.tablePropertiesIcon,onClick:v,disabled:!b,...o.onDownPreventDefault,...a}),P&&e.createElement(Ee,{onClose:d,onSave:k,view:s}))},y=[{textKey:t.keys.tablePropertiesAlignLeft,text:t.messages[t.keys.tablePropertiesAlignLeft],value:"left",icon:"table-align-middle-left",svgIcon:i.tableAlignMiddleLeftIcon},{textKey:t.keys.tablePropertiesAlignCenter,text:t.messages[t.keys.tablePropertiesAlignCenter],value:"center",icon:"table-align-middle-center",svgIcon:i.tableAlignMiddleCenterIcon},{textKey:t.keys.tablePropertiesAlignRight,text:t.messages[t.keys.tablePropertiesAlignRight],value:"right",icon:"table-align-middle-right",svgIcon:i.tableAlignMiddleRightIcon},{textKey:t.keys.tablePropertiesNoAlignment,text:t.messages[t.keys.tablePropertiesNoAlignment],value:"",icon:"align-remove",svgIcon:i.tableAlignRemoveIcon}],ie=[{textKey:t.keys.tablePropertiesLeft,text:t.messages[t.keys.tablePropertiesLeft],value:"left",style:{},icon:"table-position-left",svgIcon:i.tablePositionStartIcon},{textKey:t.keys.tablePropertiesCenter,text:t.messages[t.keys.tablePropertiesCenter],value:"center",style:{},icon:"table-position-center",svgIcon:i.tablePositionCenterIcon},{textKey:t.keys.tablePropertiesRight,text:t.messages[t.keys.tablePropertiesRight],value:"right",style:{},icon:"table-position-right",svgIcon:i.tablePositionEndIcon}].map(r=>({...r,style:E.tablePositionStyles[r.value]})),ce=[{textKey:t.keys.tablePropertiesTop,text:t.messages[t.keys.tablePropertiesTop],value:"top",icon:"position-top",svgIcon:i.positionTopIcon},{textKey:t.keys.tablePropertiesBottom,text:t.messages[t.keys.tablePropertiesBottom],value:"bottom",icon:"position-bottom",svgIcon:i.positionBottomIcon}],me=[{textKey:t.keys.tablePropertiesNone,text:t.messages[t.keys.tablePropertiesNone],value:"none"},{textKey:t.keys.tablePropertiesUsingScopeAttribute,text:t.messages[t.keys.tablePropertiesUsingScopeAttribute],value:"scope"},{textKey:t.keys.tablePropertiesUsingIdAttributes,text:t.messages[t.keys.tablePropertiesUsingIdAttributes],value:"id"}],Ee=r=>{const s=e.useMemo(()=>{const l=r.view&&r.view.state;return l?E.tableDefaultData(l):E.initialTableData},[r.view]),a=ue.useLocalization(),[g,P]=e.useState(0),f=e.useCallback(l=>{P(l.selected)},[]),b=e.useRef(null),v=e.useRef(null),d=e.useRef(null),k=e.useRef(null),c=e.useRef(null),p=e.useRef(null),N=e.useRef(null),I=e.useRef(null),B=e.useRef(null),T=e.useRef(null),S=e.useRef(null),x=e.useRef(null),D=e.useRef(null),K=e.useRef(null),V=e.useRef(null),W=e.useRef(null),z=e.useRef(null),q=e.useRef(null),H=e.useRef(null),U=e.useRef(null),h=e.useRef(null),w=e.useRef(null),R=e.useRef(null),de=e.useCallback(()=>{var C,F,M,O,j,_,G,$,J,Q,X,Y,Z,ee,te,ae,le,se,re,ne;const l={rows:((C=b.current)==null?void 0:C.value)||0,columns:((F=v.current)==null?void 0:F.value)||0,width:d.current?d.current.value:null,height:k.current?k.current.value:null,cellSpacing:c.current?c.current.value:null,cellPadding:p.current?p.current.value:null,borderWidth:N.current?N.current.value:null,widthUnit:((M=I.current)==null?void 0:M.value)||"",heightUnit:((O=B.current)==null?void 0:O.value)||"",position:((_=(j=T.current)==null?void 0:j.value)==null?void 0:_.value)||null,textAlign:(G=S.current)!=null&&G.value?S.current.value.value:null,borderStyle:($=x.current)!=null&&$.value?x.current.value.value:null,backgroundColor:(J=D.current)==null?void 0:J.value,borderColor:(Q=K.current)==null?void 0:Q.value,collapseBorders:!!((Y=(X=V.current)==null?void 0:X.element)!=null&&Y.checked),id:String(((Z=W.current)==null?void 0:Z.value)||""),className:String(((ee=z.current)==null?void 0:ee.value)||""),caption:String(((te=q.current)==null?void 0:te.value)||""),headerRows:((ae=H.current)==null?void 0:ae.value)||0,headerColumns:((le=U.current)==null?void 0:le.value)||0,captionAlignment:(se=h.current)!=null&&se.value?h.current.value.value:null,captionPosition:(re=w.current)!=null&&re.value?w.current.value.value:null,associateHeaders:(ne=R.current)!=null&&ne.value?R.current.value.value:"none"};r.onSave.call(void 0,l)},[r.onSave]),ge=e.createElement("div",{className:"k-form k-form-md"},e.createElement("fieldset",{className:"k-form-fieldset"},e.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-4 k-gap-x-4"},e.createElement("div",{className:"k-form-field k-col-span-2"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesRows,t.messages[t.keys.tablePropertiesRows])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.NumericTextBox,{ref:b,defaultValue:s.rows,min:1}))),e.createElement("div",{className:"k-form-field k-col-span-2"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesColumns,t.messages[t.keys.tablePropertiesColumns])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.NumericTextBox,{ref:v,defaultValue:s.columns,min:1}))),e.createElement("div",{className:"k-form-field k-col-span-1"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesWidth,t.messages[t.keys.tablePropertiesWidth])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.NumericTextBox,{ref:d,defaultValue:s.width,min:0,placeholder:a.toLanguageString(t.keys.sizeAuto,t.messages[t.keys.sizeAuto])}))),e.createElement("div",{className:"k-form-field k-col-span-1"},e.createElement("label",{className:"k-label k-form-label"}," "),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(m.AutoComplete,{ref:I,defaultValue:s.widthUnit,data:o.units,popupSettings:o.popupSettings}))),e.createElement("div",{className:"k-form-field k-col-span-1"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesHeight,t.messages[t.keys.tablePropertiesHeight])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.NumericTextBox,{ref:k,defaultValue:s.height,min:0,placeholder:a.toLanguageString(t.keys.sizeAuto,t.messages[t.keys.sizeAuto])}))),e.createElement("div",{className:"k-form-field k-col-span-1"},e.createElement("label",{className:"k-label k-form-label"}," "),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(m.AutoComplete,{ref:B,defaultValue:s.heightUnit,data:o.units.filter(l=>l!=="%"),popupSettings:o.popupSettings}))),e.createElement("div",{className:"k-form-field k-col-span-2"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesPosition,t.messages[t.keys.tablePropertiesPosition])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(m.DropDownList,{ref:T,defaultValue:ie.find(l=>l.value===s.position),popupSettings:o.popupSettings,data:ie.map(l=>({...l,text:a.toLanguageString(l.textKey,l.text)})),textField:"text",dataItemKey:"value",valueRender:u.valueRenderWithIcon,itemRender:u.itemRenderWithIcon}))),e.createElement("div",{className:"k-form-field k-col-span-2"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesAlignment,t.messages[t.keys.tablePropertiesAlignment])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(m.DropDownList,{ref:S,defaultValue:y.find(l=>l.value===s.textAlign),data:y.map(l=>({...l,text:a.toLanguageString(l.textKey,l.text)})),textField:"text",dataItemKey:"value",popupSettings:o.popupSettings,valueRender:u.valueRenderWithIcon,itemRender:u.itemRenderWithIcon}))),e.createElement("div",{className:"k-form-field k-col-span-2"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesCellSpacing,t.messages[t.keys.tablePropertiesCellSpacing])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.NumericTextBox,{ref:c,defaultValue:s.cellSpacing,placeholder:a.toLanguageString(t.keys.sizeAuto,t.messages[t.keys.sizeAuto]),min:0}))),e.createElement("div",{className:"k-form-field k-col-span-2"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesCellPadding,t.messages[t.keys.tablePropertiesCellPadding])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.NumericTextBox,{ref:p,defaultValue:s.cellPadding,placeholder:a.toLanguageString(t.keys.sizeAuto,t.messages[t.keys.sizeAuto]),min:0}))),e.createElement("div",{className:"k-form-field k-col-span-full"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesTableBackground,t.messages[t.keys.tablePropertiesTableBackground])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.ColorPicker,{ref:D,defaultValue:s.backgroundColor}))),e.createElement("div",{className:"k-form-field k-col-span-1"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesBorderWidth,t.messages[t.keys.tablePropertiesBorderWidth])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.NumericTextBox,{ref:N,defaultValue:s.borderWidth,min:0}))),e.createElement("div",{className:"k-form-field k-col-span-1"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesBorderColor,t.messages[t.keys.tablePropertiesBorderColor])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.ColorPicker,{ref:K,defaultValue:s.borderColor}))),e.createElement("div",{className:"k-form-field k-col-span-2"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesBorderStyle,t.messages[t.keys.tablePropertiesBorderStyle])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(m.DropDownList,{ref:x,defaultValue:o.borderStyles.find(l=>l.value===s.borderStyle),popupSettings:o.popupSettings,data:o.borderStyles.map(l=>({...l,text:a.toLanguageString(l.textKey,l.text)})),textField:"text",dataItemKey:"value"}))),e.createElement("div",{className:"k-form-field k-col-span-full"},e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.Checkbox,{ref:V,className:"k-checkbox-wrap",label:a.toLanguageString(t.keys.tablePropertiesCollapseBorders,t.messages[t.keys.tablePropertiesCollapseBorders]),defaultChecked:s.collapseBorders})))))),pe=e.createElement("div",{className:"k-form k-form-md"},e.createElement("fieldset",{className:"k-form-fieldset"},e.createElement("div",{className:"k-form-layout k-d-grid"},e.createElement("div",{className:"k-form-field"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesId,t.messages[t.keys.tablePropertiesId])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.TextBox,{ref:W,defaultValue:s.id}))),e.createElement("div",{className:"k-form-field"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesCssClass,t.messages[t.keys.tablePropertiesCssClass])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.TextBox,{ref:z,defaultValue:s.className}))),e.createElement("fieldset",{className:"k-form-fieldset"},e.createElement("legend",{className:"k-form-legend"},a.toLanguageString(t.keys.tablePropertiesAccessibility,t.messages[t.keys.tablePropertiesAccessibility])),e.createElement("div",{className:"k-d-grid k-grid-cols-4 k-gap-x-4"},e.createElement("div",{className:"k-form-field k-col-span-full"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesCaption,t.messages[t.keys.tablePropertiesCaption])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.TextBox,{ref:q,defaultValue:s.caption}))),e.createElement("div",{className:"k-form-field k-col-span-2"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesCaptionPosition,t.messages[t.keys.tablePropertiesCaptionPosition])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(m.DropDownList,{ref:w,defaultValue:ce.find(l=>l.value===s.captionPosition),data:ce.map(l=>({...l,text:a.toLanguageString(l.textKey,l.text)})),popupSettings:o.popupSettings,textField:"text",dataItemKey:"value",valueRender:u.valueRenderWithIcon,itemRender:u.itemRenderWithIcon}))),e.createElement("div",{className:"k-form-field k-col-span-2"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesCaptionAlignment,t.messages[t.keys.tablePropertiesCaptionAlignment])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(m.DropDownList,{ref:h,defaultValue:y.find(l=>l.value===s.captionAlignment),data:y.map(l=>({...l,text:a.toLanguageString(l.textKey,l.text)})),popupSettings:o.popupSettings,textField:"text",dataItemKey:"value",valueRender:u.valueRenderWithIcon,itemRender:u.itemRenderWithIcon}))),e.createElement("div",{className:"k-form-field k-col-span-1"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesHeaderRows,t.messages[t.keys.tablePropertiesHeaderRows])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.NumericTextBox,{ref:H,defaultValue:s.headerRows,min:0}))),e.createElement("div",{className:"k-form-field k-col-span-1"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesHeaderCols,t.messages[t.keys.tablePropertiesHeaderCols])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(n.NumericTextBox,{ref:U,defaultValue:s.headerColumns,min:0}))),e.createElement("div",{className:"k-form-field k-col-span-2"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.tablePropertiesAssociateHeaders,t.messages[t.keys.tablePropertiesAssociateHeaders])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(m.DropDownList,{ref:R,defaultValue:me.find(l=>l.value===s.associateHeaders),data:me.map(l=>({...l,text:a.toLanguageString(l.textKey,l.text)})),popupSettings:o.popupSettings,textField:"text",dataItemKey:"value"})))))))),ke=e.createElement(L.TabStrip,{selected:g,onSelect:f,animation:!1,keepTabsMounted:!0},e.createElement(L.TabStripTab,{title:a.toLanguageString(t.keys.tablePropertiesGeneral,t.messages[t.keys.tablePropertiesGeneral])},ge),e.createElement(L.TabStripTab,{title:a.toLanguageString(t.keys.tablePropertiesAdvanced,t.messages[t.keys.tablePropertiesAdvanced])},pe)),fe=[e.createElement(A.Button,{themeColor:"primary",key:"save",onClick:de},a.toLanguageString(t.keys.tablePropertiesSave,t.messages[t.keys.tablePropertiesSave])),e.createElement(A.Button,{onClick:r.onClose,key:"cancel"},a.toLanguageString(t.keys.tablePropertiesCancel,t.messages[t.keys.tablePropertiesCancel]))];return e.createElement(oe.Window,{className:"k-editor-window k-editor-table-wizard-window",title:a.toLanguageString(t.keys.tableProperties,t.messages[t.keys.tableProperties]),onClose:r.onClose,key:"dialog",style:{userSelect:"none"},width:480,height:630,modal:!0,minimizeButton:()=>null,maximizeButton:()=>null,resizable:!1},ke,e.createElement(oe.WindowActionsBar,{layout:"start"},...fe))};exports.TableProperties=ye;