@svar-ui/react-editor/dist/index.cjs

React component for building inline, popup, or sidebar forms to edit structured data

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),j=require("@svar-ui/react-core"),h=require("react"),W=require("@svar-ui/lib-state"),le=require("@svar-ui/lib-react"),ae=require("@svar-ui/react-toolbar"),J=require("@svar-ui/lib-dom"),Z={};function X(t){return typeof t<"u"?Z[t]||t:Z.text}function O(t,e){Z[t]=e}const ne={editor:{}};function L(t){const{editors:e,data:s,css:a="",errors:o,focus:u=!1,onClick:n,children:i,onChange:l}=t,d=h.useRef(null);h.useEffect(()=>{if(u){const f=document.activeElement;if(f&&d.current&&d.current.contains(f))return;const x=d.current?d.current.querySelector("input:not([disabled]), textarea:not([disabled]), select:not([disabled])"):null;x&&setTimeout(()=>{typeof x.select=="function"&&x.select(),typeof x.focus=="function"&&x.focus()},300)}},[]);const c=h.useContext(j.context.i18n),w=h.useMemo(()=>c.getGroup("editor"),[c]),g=h.useMemo(()=>e.config[0].comp==="readonly"&&e.config.every(f=>!Object.keys(s).includes(f.key)),[e,s]);return r.jsxs("div",{className:"wx-s2aE1xdZ wx-sections "+a,ref:d,children:[i,g?r.jsx("div",{className:"wx-s2aE1xdZ wx-overlay",children:w("No data")}):null,e.config.map(f=>{if(!f.hidden){const{key:x,onChange:C,...v}=f;if(f.comp==="readonly"||f.comp==="section"){const k=X(f.comp);return r.jsx(k,{fieldKey:x,label:f.label,value:s[x],...v,onClick:n},x)}else{const k=X(f.comp);return r.jsxs("div",{children:[r.jsx(j.Field,{label:f.labelTemplate?f.labelTemplate(s[x]):f.label??"",required:f.required,children:({id:D})=>r.jsx(k,{fieldKey:x,...v,onChange:C||(y=>{l&&l({value:y.value,key:x,input:y.input})}),id:D,label:void 0,error:o&&o[x],value:s[x]},x)}),o&&o[x]&&f.validationMessage?r.jsx("div",{className:"wx-s2aE1xdZ wx-message",children:f.validationMessage}):null]},x)}}return null})]})}function ue(t){if(typeof t=="string"&&t.includes(".")){const e=t.split(".");return s=>{let a=s;return e.forEach(o=>{a=a[o]}),a}}return e=>e[t]}function fe(t){if(typeof t=="string"&&t.includes(".")){const e=t.split(".");return(s,a)=>{let o=s;e.forEach((u,n)=>{n===e.length-1?o[u]=a:o=o[u]})}}return(e,s)=>e[t]=s}function de(t){const e=t.map(n=>{const i={...n};return n.config&&Object.assign(i,n.config),i.key=n.key||W.uid(),i.setter=n.setter||fe(n.key),i.getter=n.getter||ue(n.key),i}),s=n=>{const i={};return e.forEach(l=>{l.comp!=="section"&&(l.getter?i[l.key]=l.getter(n):i[l.key]=n[l.key])}),i},a=(n,i,l)=>((l.length?l.map(c=>e.find(w=>w.key===c)):e).forEach(c=>{c.setter?c.setter(n,i[c.key]):n[c.key]=i[c.key]}),n),o=(n,i)=>{const l=s(n),d=[];return e.forEach(c=>{const w=l[c.key],g=i[c.key];!W.isSame(w,g)&&(w!==void 0||g)&&d.push(c.key)}),d},u=(n,i,l)=>{let d=0;const c={};return(i?.length?i.map(g=>e.find(f=>f.key===g)):e).forEach(g=>{g.required&&!n[g.key]?(c[g.key]={errorType:"required"},g.validationMessage=g.validationMessage??l("This field is required"),d++):g.validation&&!g.validation(n[g.key])&&(c[g.key]={errorType:"validation"},g.validationMessage=g.validationMessage??l("Invalid value"),d++)}),d>0?c:null};return{config:e.filter(n=>n.comp!=="hidden"),getValues:s,setValues:a,diff:o,validateValues:u}}function oe({values:t,items:e,css:s,activeBatch:a,autoSave:o,focus:u,readonly:n,topBar:i=!0,bottomBar:l=!0,layout:d="default",placement:c="inline",view:w,children:g,onChange:f,onSave:x,onAction:C,onValidation:v}){const D=h.useContext(j.context.i18n).getGroup("editor"),[y,A]=le.useWritableProp(t),[T,R]=h.useState(null),b=h.useMemo(()=>{const p=de(e);T&&p.config.forEach(m=>{m.comp==="section"&&m.key===T&&(m.sectionMode==="accordion"?m.activeSection||(p.config.forEach(V=>{V.comp==="section"&&V.key!==m.key&&(V.activeSection=!1)}),m.activeSection=!0):m.activeSection=!m.activeSection)});let S=new Set,N=null;return p.config.forEach(m=>{m.sectionMode==="exclusive"&&m.activeSection&&(N=m.key),m.activeSection&&S.add(m.key)}),p.config.forEach(m=>{m.hidden=m.hidden||a&&a!==m.batch||N&&m.key!=N&&m.section!==N||m.section&&!S.has(m.section)}),n?{...p,config:p.config.map(m=>({...m,comp:"readonly"})),diff:()=>[]}:p},[e,T,a,n]),[E,M]=h.useState({}),[$,_]=h.useState({});h.useEffect(()=>{y!==void 0&&(M(W.deepCopy(y)),_(W.deepCopy(y)))},[y]);const q=y,[I,z]=h.useState([]);h.useEffect(()=>{y&&z([])},[y]);function Q(p){return[...new Set(p)]}function G(p){const S=b.validateValues(E,p,D);return W.isSame(S,q.errors)||v&&v({errors:S,values:E}),S}function se(p,S){if(o&&!q.errors){const N=b.setValues(y,S??$,p);A(N),x&&x({changes:p,values:N})}else z(p)}function ie({value:p,key:S,input:N}){let m={...$||{},[S]:p};const V={key:S,value:p,update:m};if(N&&(V.input=N),f&&f(V),!y)return;m=V.update,_(m);const B=b.diff(y,m),ce=b.setValues({...E||{}},m,Q([...B,S]));if(M(ce),B.length){const F=o?[]:Q([...B,...Object.keys(q.errors??{}),S]);q.errors=G(F),se(B,m)}else{const F=Object.keys(q.errors??{});F.length&&(q.errors=G(F)),z([])}}function re(){if(I.length&&(o||(q.errors=G()),!q.errors)){x&&x({changes:I,values:E});const p=b.setValues(y,$,I);A(p),z([]),A({...E})}}function Y({item:p}){p.id==="save"?re():p.id==="toggle-section"&&R(p.key),C&&C({item:p,values:E,changes:I})}return r.jsx(w,{topBar:i,bottomBar:l,placement:c,layout:d,readonly:n,autoSave:o,css:s,data:$,editors:b,focus:u,errors:q.errors,onClick:Y,onKeyDown:Y,onChange:ie,children:g})}function me({values:t={},items:e=[],css:s="",activeBatch:a=null,focus:o=!1,autoSave:u=!0,readonly:n=!1,children:i,...l}){const d={};for(const c in l){if(/^on[a-z]/.test(c)){const w="on"+c.charAt(2).toUpperCase()+c.slice(3);if(w in l)continue;d[w]=l[c];continue}d[c]=l[c]}return r.jsx(j.Locale,{words:ne,optional:!0,children:r.jsx("div",{className:"wx-H902AF2Y wx-content",children:r.jsx(oe,{view:L,values:t,items:e,css:s,focus:o,activeBatch:a,autoSave:u,readonly:n,...d,children:i})})})}function xe(t,{keys:e,action:s}){function a(o){let u=o.code.replace("Key","").toLowerCase();const n=`${o.ctrlKey||o.metaKey?"ctrl+":""}${u}`,i=e[n];if(!i)return;const l=o.target.closest(".wx-combo")||o.target.closest(".wx-multicombo")||o.target.closest(".wx-richselect");l&&l.querySelector(".wx-list")||(o.preventDefault(),s(i))}return t.addEventListener("keydown",a),{destroy:()=>{t.removeEventListener("keydown",a)}}}function pe(t){const{editors:e,data:s,layout:a,errors:o,focus:u,onClick:n,onChange:i}=t,l=h.useMemo(()=>{let d=[];if(a==="columns"&&(d=[{...e,config:[]},{...e,config:[]}],e.config.forEach(c=>{const w=c.column==="left"?0:1;d[w].config.push(c)}),d[0].config.length)){const c=d[0].config[0];c.comp==="text"&&(d[0][0]={...c,css:"title",label:""})}return d},[a,e]);return a==="columns"?r.jsxs("div",{className:"wx-bNrSbszs wx-cols",children:[r.jsx("div",{className:"wx-bNrSbszs wx-left",children:r.jsx(L,{editors:l[0],data:s,errors:o,onClick:n,onChange:i})}),r.jsx("div",{className:"wx-bNrSbszs wx-right",children:r.jsx(L,{editors:l[1],data:s,focus:u,errors:o,onClick:n,onChange:i})})]}):r.jsx(L,{editors:e,data:s,focus:u,errors:o,onClick:n,onChange:i})}function ee({items:t,values:e=null,top:s=!0,onClick:a,onChange:o}){const u=h.useCallback(({item:n,value:i})=>{o&&o({key:n.key,value:i})},[o]);return t.length?r.jsx("div",{className:`wx-66OW1j0R wx-editor-toolbar ${s?"wx-topbar":"wx-bottom"}`,children:r.jsx(ae.Toolbar,{items:t,values:e,onClick:a,onChange:u})}):null}const K=()=>({comp:"spacer"}),H=t=>({comp:"button",text:t("Cancel"),id:"cancel"}),P=t=>({type:"primary",comp:"button",text:t("Save"),id:"save"}),te=()=>({comp:"icon",icon:"wxi-close",id:"close"});function U(t){const{data:e,editors:s,focus:a,css:o,topBar:u,bottomBar:n,layout:i,placement:l,errors:d,readonly:c,autoSave:w,children:g,onClick:f,onKeyDown:x,onChange:C}=t,v=h.useContext(j.context.i18n),k=h.useMemo(()=>v.getGroup("editor"),[v]),D=h.useMemo(()=>u===!0&&n===!0,[u,n]),y=h.useMemo(()=>{let b=u&&u.items?u.items.map(E=>({...E})):[];return D&&(c?b=[K(),te()]:(w?b=[K(),te()]:l!=="modal"&&(b=[K(),H(k),P(k)]),i==="columns"&&!b.length&&(b=[K(),P(k),H(k)]))),b},[u,D,c,w,l,i,k]),A=h.useMemo(()=>{let b=n&&n.items?n.items.map(E=>({...E})):[];return D&&(c||(l==="modal"&&!w&&(b=[K(),P(k),H(k)]),i==="columns"&&y.length&&(b=[]))),b},[n,D,c,l,w,i,y,k]),T=h.useMemo(()=>[...y,...A],[y,A]),R=h.useRef(null);return h.useEffect(()=>{const b=R.current;if(!b)return;const E=xe(b,{keys:{"ctrl+s":T.find(M=>M.id==="save"),escape:T.find(M=>M.id==="cancel"||M.id==="close"),"ctrl+d":T.find(M=>M.id==="delete")},action:M=>{x&&x({item:M})}});return()=>{typeof E=="function"&&E()}},[T,x]),r.jsxs("div",{className:o?"wx-85HDaNoA "+o:"wx-85HDaNoA",ref:R,children:[r.jsx(ee,{...u&&typeof u=="object"?u:{},items:y,values:e,onClick:f,onChange:C}),r.jsxs("div",{className:`wx-85HDaNoA wx-content${i==="columns"?" wx-layout-columns":""}`,children:[g,r.jsx(pe,{editors:s,layout:i,data:e,focus:a,errors:d,onClick:f,onChange:C}),r.jsx(ee,{...n&&typeof n=="object"?n:{},items:A,values:e,top:!1,onClick:f,onChange:C})]})]})}function he(t){const{css:e,onClick:s,placement:a,...o}=t;function u(){s&&s({item:{id:"close"}})}return a==="modal"?r.jsx(j.ModalArea,{children:r.jsx(U,{css:`wx-panel ${e}`,onClick:s,placement:a,...o})}):a==="sidebar"?r.jsx(j.SideArea,{onCancel:u,children:r.jsx(U,{css:`wx-panel ${e}`,onClick:s,placement:a,...o})}):r.jsx(U,{css:`wx-inline-form ${e}`,onClick:s,placement:a,...o})}function ge(t){const{values:e={},items:s=[],css:a="",activeBatch:o=null,topBar:u=!0,bottomBar:n=!0,focus:i=!1,autoSave:l=!1,layout:d="default",readonly:c=!1,placement:w="inline",children:g,...f}=t,x=Object.keys(f).reduce((C,v)=>{if(/^on[a-z]/.test(v)){const k="on"+v.charAt(2).toUpperCase()+v.slice(3);k in f?C[v]=f[v]:C[k]=f[v]}else C[v]=f[v];return C},{});return r.jsx(j.Locale,{words:ne,optional:!0,children:r.jsx(oe,{view:he,values:e,items:s,css:a,activeBatch:o,topBar:u,bottomBar:n,focus:i,autoSave:l,layout:d,readonly:c,placement:w,...x,children:g})})}function we({fonts:t=!0,children:e}){return e?r.jsx(j.Material,{fonts:t,children:e}):r.jsx(j.Material,{fonts:t})}function ye({fonts:t=!0,children:e}){return e?r.jsx(j.Willow,{fonts:t,children:e}):r.jsx(j.Willow,{fonts:t})}function be(t){const{fonts:e=!0,children:s}=t;return s?r.jsx(j.WillowDark,{fonts:e,children:s}):r.jsx(j.WillowDark,{fonts:e})}function je({value:t,options:e,label:s}){const o=h.useContext(j.context.i18n).getGroup("editor"),u=h.useMemo(()=>{let n=t;if(typeof t=="boolean"&&(n=o(t?"Yes":"No")),e){const i=e.find(l=>l.id===t);i&&(n=i.label)}return n},[t,e,o]);return u||u===0?r.jsx(j.Field,{label:s,children:u}):null}function ve({fieldKey:t,label:e,activeSection:s,onClick:a}){return r.jsxs("div",{className:`wx-OmgQq65I wx-section${s?" wx-section-active":""}`,onClick:()=>a&&a({item:{id:"toggle-section",key:s?null:t}}),children:[r.jsx("h3",{children:e}),r.jsx("i",{className:`wx-OmgQq65I wxi-angle-${s?"down":"right"} wx-icon`})]})}O("text",j.Text);O("textarea",j.TextArea);O("checkbox",j.Checkbox);O("readonly",je);O("section",ve);J.setEnv(J.env);exports.Editor=ge;exports.Form=me;exports.Material=we;exports.Willow=ye;exports.WillowDark=be;exports.registerEditorItem=O;