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) • 12.6 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 ke=require("react"),x=require("@progress/kendo-react-buttons"),c=require("@progress/kendo-react-inputs"),g=require("@progress/kendo-react-dropdowns"),X=require("@progress/kendo-react-dialogs"),n=require("@progress/kendo-svg-icons"),o=require("../utils.js"),ee=require("@progress/kendo-react-common"),te=require("@progress/kendo-react-intl"),t=require("../../messages/index.js"),le=require("./cellPropsUtils.js");function ye(r){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const a in r)if(a!=="default"){const i=Object.getOwnPropertyDescriptor(r,a);Object.defineProperty(l,a,i.get?i:{enumerable:!0,get:()=>r[a]})}}return l.default=r,Object.freeze(l)}const e=ye(ke),be=r=>{const{view:l,...a}=r,[i,p]=e.useState(!1),f=te.useLocalization(),b=!!(l&&o.parentNode(l.state.selection.$from,m=>m.type.spec.tableRole==="table")),k=e.useCallback(()=>{p(!0)},[]),u=e.useCallback(()=>{p(!1),l==null||l.focus()},[l]),y=e.useCallback(m=>{if(l&&m){const d=le.applyCellsData(l.state,m);d.docChanged&&l.dispatch(d)}u()},[l,u]);return e.createElement(e.Fragment,null,e.createElement(x.Button,{type:"button",title:f.toLanguageString(t.keys.cellProperties,t.messages[t.keys.cellProperties]),icon:"table-cell-properties",svgIcon:n.tableCellPropertiesIcon,onClick:k,disabled:!b,...o.onDownPreventDefault,...a}),i&&l&&e.createElement(ve,{view:l,onCancel:u,onSave:y}))},Y=[{textKey:t.keys.cellPropertiesLeftTop,text:t.messages[t.keys.cellPropertiesLeftTop],icon:"table-align-top-left",svgIcon:n.tableAlignTopLeftIcon,value:{x:"left",y:"top"}},{textKey:t.keys.cellPropertiesCenterTop,text:t.messages[t.keys.cellPropertiesCenterTop],icon:"table-align-top-center",svgIcon:n.tableAlignTopCenterIcon,value:{x:"center",y:"top"}},{textKey:t.keys.cellPropertiesRightTop,text:t.messages[t.keys.cellPropertiesRightTop],icon:"table-align-top-right",svgIcon:n.tableAlignTopRightIcon,value:{x:"right",y:"top"}},{textKey:t.keys.cellPropertiesLeftMiddle,text:t.messages[t.keys.cellPropertiesLeftMiddle],icon:"table-align-middle-left",svgIcon:n.tableAlignMiddleLeftIcon,value:{x:"left",y:"middle"}},{textKey:t.keys.cellPropertiesCenterMiddle,text:t.messages[t.keys.cellPropertiesCenterMiddle],icon:"table-align-middle-center",svgIcon:n.tableAlignMiddleCenterIcon,value:{x:"center",y:"middle"}},{textKey:t.keys.cellPropertiesRightMiddle,text:t.messages[t.keys.cellPropertiesRightMiddle],icon:"table-align-middle-right",svgIcon:n.tableAlignMiddleRightIcon,value:{x:"right",y:"middle"}},{textKey:t.keys.cellPropertiesLeftBottom,text:t.messages[t.keys.cellPropertiesLeftBottom],icon:"table-align-bottom-left",svgIcon:n.tableAlignBottomLeftIcon,value:{x:"left",y:"bottom"}},{textKey:t.keys.cellPropertiesCenterBottom,text:t.messages[t.keys.cellPropertiesCenterBottom],icon:"table-align-bottom-center",svgIcon:n.tableAlignBottomCenterIcon,value:{x:"center",y:"bottom"}},{textKey:t.keys.cellPropertiesRightBottom,text:t.messages[t.keys.cellPropertiesRightBottom],icon:"table-align-bottom-right",svgIcon:n.tableAlignBottomRightIcon,value:{x:"right",y:"bottom"}},{textKey:t.keys.cellPropertiesNoAlignment,text:t.messages[t.keys.cellPropertiesNoAlignment],icon:"align-remove",svgIcon:n.tableAlignRemoveIcon,value:{x:"",y:""}}],Z=[{textKey:t.keys.cellPropertiesWrap,text:t.messages[t.keys.cellPropertiesWrap],value:"",icon:"text-wrap",svgIcon:n.textWrapIcon},{textKey:t.keys.cellPropertiesFitToCell,text:t.messages[t.keys.cellPropertiesFitToCell],value:"nowrap",icon:"parameter-string",svgIcon:n.parameterStringIcon}],P=(r,l)=>l?e.createElement(e.Fragment,null,e.createElement(c.InputPrefix,null,e.createElement(ee.IconWrap,{icon:l.svgIcon,name:l.icon})),r):r,E=(r,l)=>{const a=e.createElement(e.Fragment,null,e.createElement(c.InputPrefix,null,e.createElement(ee.IconWrap,{icon:l.dataItem.svgIcon,name:l.dataItem.icon})),r.props.children);return e.cloneElement(r,r.props,a)},ve=r=>{const l=e.useMemo(()=>le.cellsDefaultData(r.view.state),[r.view]),a=te.useLocalization(),i=e.useRef(null),p=l.applyToAll,f=e.useRef(null),b=l.cellWidth,k=e.useRef(null);l.widthUnit&&!o.units.includes(l.widthUnit)&&o.units.push(l.widthUnit);const u=l.widthUnit||"",y=e.useRef(null),m=l.cellHeight,d=e.useRef(null);l.heightUnit&&!o.units.includes(l.heightUnit)&&o.units.push(l.heightUnit);const ae=l.heightUnit||"",C=e.useRef(null),re=Y.find(s=>s.value.x!==void 0&&l.alignment&&s.value.x===l.alignment.x&&s.value.y===l.alignment.y)||null,N=e.useRef(null),se=Z.find(s=>s.value===l.textControl),S=e.useRef(null),oe=l.backgroundColor,v=e.useRef(null),ne=l.cellPadding,h=e.useRef(null),ce=l.borderWidth,I=e.useRef(null),ie=l.borderColor,w=e.useRef(null),me=o.borderStyles.find(s=>s.value===l.borderStyle),R=e.useRef(null),ue=l.id,L=e.useRef(null),de=l.className,ge=e.useCallback(()=>{var D,T,A,B,W,K,U,V,M,q,z,F,H,O,j,_,$,G,J,Q;const s={applyToAll:!!((T=(D=i.current)==null?void 0:D.element)!=null&&T.checked),cellWidth:((A=f.current)==null?void 0:A.value)||null,widthUnit:((B=k.current)==null?void 0:B.value)||"",cellHeight:((W=y.current)==null?void 0:W.value)||null,heightUnit:((K=d.current)==null?void 0:K.value)||"",alignment:(V=(U=C.current)==null?void 0:U.value)==null?void 0:V.value,textControl:(q=(M=N.current)==null?void 0:M.value)==null?void 0:q.value,backgroundColor:(z=S.current)==null?void 0:z.value,cellPadding:typeof((F=v.current)==null?void 0:F.value)=="number"?(H=v.current)==null?void 0:H.value:null,borderWidth:typeof((O=h.current)==null?void 0:O.value)=="number"?(j=h.current)==null?void 0:j.value:null,borderColor:(_=I.current)==null?void 0:_.value,borderStyle:((G=($=w.current)==null?void 0:$.value)==null?void 0:G.value)||null,id:String(((J=R.current)==null?void 0:J.value)||""),className:String(((Q=L.current)==null?void 0:Q.value)||"")};r.onSave.call(void 0,s)},[r.onSave]),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 k-grid-cols-4 k-gap-x-4"},e.createElement("div",{className:"k-form-field k-col-span-full"},e.createElement("div",{className:"k-form-field-wrap"},e.createElement("span",{className:"k-checkbox-wrap"},e.createElement(c.Checkbox,{ref:i,defaultChecked:p})),e.createElement("label",{className:"k-checkbox-label"},a.toLanguageString(t.keys.cellPropertiesApplyToAllCells,t.messages[t.keys.cellPropertiesApplyToAllCells])))),e.createElement("div",{className:"k-form-field k-col-span-1"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.cellPropertiesWidth,t.messages[t.keys.cellPropertiesWidth])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(c.NumericTextBox,{ref:f,defaultValue:b,min:0,placeholder:a.toLanguageString(t.keys.sizeAuto,t.messages[t.keys.sizeAuto])}),e.createElement("div",{className:"k-form-hint"},a.toLanguageString(t.keys.cellPropertiesApplyToColumn,t.messages[t.keys.cellPropertiesApplyToColumn])))),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(g.AutoComplete,{ref:k,defaultValue:u,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.cellPropertiesHeight,t.messages[t.keys.cellPropertiesHeight])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(c.NumericTextBox,{ref:y,defaultValue:m,min:0,placeholder:a.toLanguageString(t.keys.sizeAuto,t.messages[t.keys.sizeAuto])}),e.createElement("div",{className:"k-form-hint"},a.toLanguageString(t.keys.cellPropertiesApplyToRow,t.messages[t.keys.cellPropertiesApplyToRow])))),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(g.AutoComplete,{ref:d,defaultValue:ae,data:o.units,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.cellPropertiesAlignment,t.messages[t.keys.cellPropertiesAlignment])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(g.DropDownList,{ref:C,defaultValue:re,data:Y.map(s=>({...s,text:a.toLanguageString(s.textKey,s.text)})),textField:"text",dataItemKey:"text",popupSettings:o.popupSettings,valueRender:P,itemRender:E}))),e.createElement("div",{className:"k-form-field k-col-span-2"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.cellPropertiesTextControl,t.messages[t.keys.cellPropertiesTextControl])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(g.DropDownList,{ref:N,defaultValue:se,data:Z.map(s=>({...s,text:a.toLanguageString(s.textKey,s.text)})),textField:"text",dataItemKey:"value",popupSettings:o.popupSettings,valueRender:P,itemRender:E}))),e.createElement("div",{className:"k-form-field k-col-span-2"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.cellPropertiesCellPadding,t.messages[t.keys.cellPropertiesCellPadding])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(c.NumericTextBox,{ref:v,defaultValue:ne,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.cellPropertiesBackground,t.messages[t.keys.cellPropertiesBackground])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(c.ColorPicker,{ref:S,defaultValue:oe}))),e.createElement("div",{className:"k-form-field k-col-span-1"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.cellPropertiesBorderWidth,t.messages[t.keys.cellPropertiesBorderWidth])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(c.NumericTextBox,{ref:h,defaultValue:ce,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.cellPropertiesBorderColor,t.messages[t.keys.cellPropertiesBorderColor])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(c.ColorPicker,{ref:I,defaultValue:ie}))),e.createElement("div",{className:"k-form-field k-col-span-2"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.cellPropertiesBorderStyle,t.messages[t.keys.cellPropertiesBorderStyle])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(g.DropDownList,{ref:w,defaultValue:me,popupSettings:o.popupSettings,data:o.borderStyles,textField:"text",dataItemKey:"value"}))),e.createElement("div",{className:"k-form-field k-col-span-full"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.cellPropertiesId,t.messages[t.keys.cellPropertiesId])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(c.TextBox,{ref:R,defaultValue:ue}))),e.createElement("div",{className:"k-form-field k-col-span-full"},e.createElement("label",{className:"k-label k-form-label"},a.toLanguageString(t.keys.cellPropertiesCssClass,t.messages[t.keys.cellPropertiesCssClass])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(c.TextBox,{ref:L,defaultValue:de})))))),fe=[e.createElement(x.Button,{themeColor:"primary",key:"save",onClick:ge},a.toLanguageString(t.keys.cellPropertiesSave,t.messages[t.keys.cellPropertiesSave])),e.createElement(x.Button,{onClick:r.onCancel,key:"cancel"},a.toLanguageString(t.keys.cellPropertiesCancel,t.messages[t.keys.cellPropertiesCancel]))];return e.createElement(X.Window,{className:"k-editor-window k-editor-table-wizard-window",title:a.toLanguageString(t.keys.cellProperties,t.messages[t.keys.cellProperties]),onClose:r.onCancel,key:"dialog",style:{userSelect:"none"},width:408,height:587,modal:!0,minimizeButton:()=>null,maximizeButton:()=>null,resizable:!1},pe,e.createElement(X.WindowActionsBar,{layout:"start"},...fe))};exports.TableCellProperties=be;exports.itemRenderWithIcon=E;exports.valueRenderWithIcon=P;