@react-typed-forms/schemas-html 2.3.2 → 2.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/adornments/optionalAdornment.d.ts +2 -2
- package/lib/components/CheckRenderer.d.ts +12 -2
- package/lib/components/ControlInput.d.ts +4 -2
- package/lib/components/DefaultAccordion.d.ts +2 -2
- package/lib/components/DefaultArrayRenderer.d.ts +1 -1
- package/lib/components/DefaultDisplay.d.ts +4 -3
- package/lib/components/DefaultDisplayOnly.d.ts +4 -3
- package/lib/components/DefaultGroupRenderer.d.ts +2 -2
- package/lib/components/DefaultLayout.d.ts +5 -3
- package/lib/components/DefaultVisibility.d.ts +4 -2
- package/lib/components/JsonataRenderer.d.ts +1 -2
- package/lib/components/MultilineTextfield.d.ts +1 -2
- package/lib/components/SelectDataRenderer.d.ts +1 -2
- package/lib/components/TabsRenderer.d.ts +7 -7
- package/lib/createDefaultRenderers.d.ts +4 -2
- package/lib/index.cjs +1913 -1
- package/lib/index.cjs.map +1 -1
- package/lib/index.js +1708 -1
- package/lib/index.js.map +1 -1
- package/lib/tailwind.d.ts +1 -1
- package/package.json +7 -7
package/lib/index.js
CHANGED
|
@@ -1,2 +1,1709 @@
|
|
|
1
|
-
import e,{useState as t,useMemo as n,useEffect as a,useRef as l}from"react";import r from"clsx";import{DisplayDataType as s,rendererClass as o,coerceToString as i,getOverrideClass as c,FieldType as d,createDataRenderer as u,fieldOptionAdornment as m,DataRenderType as p,createLayoutRenderer as f,renderLayoutParts as y,createGroupRenderer as v,GroupRenderType as C,isTabsRenderer as N,isSelectChildRenderer as h,isGridRenderer as x,isFlexRenderer as g,createVisibilityRenderer as b,getJsonPath as E,useJsonataExpression as O,getRootDataNode as w,getLastDefinedValue as k,getNullToggler as T,mergeObjects as _,isArrayRenderer as A,isCompoundField as I,nodeForControl as S,ControlDefinitionType as L,makeHookDepString as V,createArrayActions as P,getLengthRestrictions as F,lookupDataNode as R,applyArrayLengthRestrictions as q,buildSchema as D,stringField as M,schemaDataForFieldRef as B,schemaForFieldRef as j,rootSchemaNode as G,addMissingControlsForSchema as H,useControlRendererComponent as W,groupedControl as J,makeSchemaDataNode as z,createAdornmentRenderer as U,getIsEditing as Y,appendMarkupAt as $,AdornmentPlacement as K,wrapMarkup as Q,getAllValues as X,ControlAdornmentType as Z,getExternalEditData as ee,visitFormDataInContext as te,validationVisitor as ne,createActionRenderer as ae,isDataGroupRenderer as le,isDisplayOnlyRenderer as re,hasOptions as se,isTextfieldRenderer as oe,isOptionalAdornment as ie,isSetFieldAdornment as ce,useDynamicHooks as de,wrapLayout as ue,isIconAdornment as me,isAccordionAdornment as pe,LabelType as fe}from"@react-typed-forms/schemas";import{useComponentTracking as ye,formControlProps as ve,useControl as Ce,useControlEffect as Ne,RenderArrayElements as he,useComputed as xe,Fcheckbox as ge,useTrackedComponent as be,RenderElements as Ee,controlValues as Oe,removeElement as we,setFields as ke,newControl as Te}from"@react-typed-forms/core";import{useAutocomplete as _e}from"@mui/base";import{Modal as Ae,Dialog as Ie}from"@astroapps/aria-base";import{useOverlayTriggerState as Se}from"@react-stately/overlays";function Le(){return Le=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},Le.apply(null,arguments)}function Ve(e){if(null==e)throw new TypeError("Cannot destructure "+e)}function Pe(e,t){if(null==e)return{};var n={};for(var a in e)if({}.hasOwnProperty.call(e,a)){if(t.includes(a))continue;n[a]=e[a]}return n}const Fe=["data","display","className","style"];function Re(t={}){return{render:n=>/*#__PURE__*/e.createElement(qe,Le({},t,n)),type:"display"}}function qe(t){var n=ye();try{let{data:n,display:a,className:l,style:d}=t,u=Pe(t,Fe);switch(n.type){case s.Icon:/*#__PURE__*/return e.createElement("i",{style:d,className:r(c(l),a?a.value:n.iconClass)});case s.Text:/*#__PURE__*/return e.createElement("div",{style:d,className:o(l,u.textClassName)},a?i(a.value):n.text);case s.Html:/*#__PURE__*/return e.createElement("div",{style:d,className:o(l,u.htmlClassName),dangerouslySetInnerHTML:{__html:a?i(a.value):n.html}});case s.Custom:/*#__PURE__*/return e.createElement("div",null,/*#__PURE__*/e.createElement("b",null,"(",n.customId,")"));default:/*#__PURE__*/return e.createElement("h1",null,"Unknown display type: ",n.type)}}finally{n()}}const De=["control","convert"],Me=["errorText","value","onChange"];function Be(t){var n=ye();try{let{control:a,convert:l}=t,r=Pe(t,De);const s=ve(a),{value:o}=s,i=Pe(s,Me),c=Ce(()=>d(o));return Ne(()=>a.value,e=>c.value=d(e)),/*#__PURE__*/e.createElement("input",Le({},i,{type:l[0],value:c.value,onChange:e=>{c.value=e.target.value;const t=l[1](e.target.value);void 0!==t&&(a.value=t)}},r));function d(e){return null==e?"":l[2](e)}}finally{n()}}function je(e){switch(e){case d.String:return["text",e=>e,e=>e];case d.Bool:return["text",e=>"true"===e||"false"!==e&&void 0,e=>{var t;return null!=(t=null==e?void 0:e.toString())?t:""}];case d.Int:return["number",e=>""!==e?parseInt(e):null,e=>null==e?"":e];case d.DateTime:return["datetime-local",e=>e||null,e=>e];case d.Date:return["date",e=>e||null,e=>e];case d.Time:return["time",e=>{const t=e.length;return 5===t?e+":00":8===t?e:void 0},e=>e?e.substring(0,5):""];case d.Double:return["number",e=>""!==e?parseFloat(e):null,e=>null==e?"":e];default:return["text",e=>e,e=>e]}}const Ge=["state","options","className","convert","required","emptyText","requiredText","readonly"];function He(t={}){return u((n,a)=>{var l;/*#__PURE__*/return e.createElement(We,{className:o(n.className,t.className),state:n.control,id:n.id,readonly:n.readonly,options:null!=(l=n.options)?l:[],required:n.required,emptyText:t.emptyText,requiredText:t.requiredText,convert:Je(n.field.type)})},{options:!0})}function We(a){var l=ye();try{let{state:r,options:s,className:o,convert:i,required:c,emptyText:d="N/A",requiredText:u="<please select>",readonly:m}=a,p=Pe(a,Ge);const{value:f,disabled:y}=r,[v]=t(!c||null==f),C=n(()=>Object.fromEntries(s.map(e=>[i(e.value),e.value])),[s]),N=n(()=>new Set(s.filter(e=>e.group).map(e=>e.group)),[s]);/*#__PURE__*/return e.createElement("select",Le({},p,{className:o,onChange:e=>r.value=C[e.target.value],value:i(f),disabled:y||m}),v&&/*#__PURE__*/e.createElement("option",{value:""},c?u:d),[...N.keys()].map(t=>/*#__PURE__*/e.createElement("optgroup",{key:t,label:t},s.filter(e=>e.group===t).map(h))),s.filter(e=>!e.group).map(h));function h(t,n){/*#__PURE__*/return e.createElement("option",{key:n,value:i(t.value),disabled:!!t.disabled},t.name)}}finally{l()}}function Je(e){switch(e){case d.String:case d.Int:case d.Double:return e=>e;default:return e=>{var t;return null!=(t=null==e?void 0:e.toString())?t:""}}}function ze(t={}){return u(n=>/*#__PURE__*/e.createElement(Ye,Le({classes:t,controlClasses:n.renderOptions},n,{className:o(n.className,t.className),isChecked:(e,t)=>e.value==t.value,setChecked:(e,t)=>e.value=t.value,control:n.control,type:"radio",entryAdornment:m(n)})),{renderType:p.Radio})}function Ue(t={}){return u(n=>/*#__PURE__*/e.createElement(Ye,Le({classes:t,controlClasses:n.renderOptions},n,{className:o(n.className,t.className),isChecked:(e,t)=>{const n=e.value;return!!Array.isArray(n)&&n.includes(t.value)},setChecked:(e,t,n)=>{e.setValue(e=>$e(null!=e?e:[],t.value,n))},control:n.control,type:"checkbox",entryAdornment:m(n)})),{collection:!0,renderType:p.CheckList})}function Ye({control:t,options:n,readonly:a,className:l,id:s,type:i,isChecked:c,setChecked:d,entryAdornment:u,classes:m,controlClasses:p={}}){var f=ye();try{const{disabled:f}=t,y="r"+t.uniqueId;/*#__PURE__*/return e.createElement("div",{className:l,id:s},/*#__PURE__*/e.createElement(he,{array:null==n?void 0:n.filter(e=>null!=e.value)},(n,l)=>{const s=xe(()=>c(t,n)).value,v=s?o(null==p?void 0:p.selectedClass,m.selectedClass):o(null==p?void 0:p.notSelectedClass,m.notSelectedClass);/*#__PURE__*/return e.createElement("div",{className:r(o(null==p?void 0:p.entryWrapperClass,m.entryWrapperClass),v),onClick:()=>!a&&d(t,n,!s)},/*#__PURE__*/e.createElement("div",{className:m.entryClass},/*#__PURE__*/e.createElement("input",{id:y+"_"+l,className:m.checkClass,type:i,name:y,readOnly:a,disabled:f,checked:s,onChange:e=>{!a&&d(t,n,e.target.checked)}}),/*#__PURE__*/e.createElement("label",{className:m.labelClass,htmlFor:y+"_"+l},n.name)),null==u?void 0:u(n,l,s))}))}finally{f()}}function $e(e,t,n){return n===e.includes(t)?e:n?[...e,t]:e.filter(e=>e!==t)}function Ke(t={}){return u((n,a)=>l=>Le({},l,{label:void 0,children:/*#__PURE__*/e.createElement("div",{className:o(n.className,t.entryClass)},/*#__PURE__*/e.createElement(ge,{id:n.id,control:n.control.as(),style:n.style,className:t.checkClass}),l.label&&a.renderLabel(l.label,void 0,void 0))}),{renderType:p.Checkbox})}function Qe(t={}){return f((n,a)=>{const l=y(n,a);return{children:l.wrapLayout(/*#__PURE__*/e.createElement(Xe,Le({layout:l},t))),className:o(l.className,t.className),style:l.style,divRef:e=>e&&n.errorControl?n.errorControl.meta.scrollElement=e:void 0}})}function Xe({errorClass:t,renderError:n=n=>n&&/*#__PURE__*/e.createElement("div",{className:t},n),layout:{controlEnd:a,controlStart:l,label:r,children:s,errorControl:o}}){var i=ye();try{/*#__PURE__*/return e.createElement(e.Fragment,null,r,l,s,n(o&&o.touched?o.error:void 0),a)}finally{i()}}function Ze({control:t,className:n,emptyText:a,schemaInterface:l,field:r,style:s}){var o=ye();try{var i;const o=t.value,c=null!=(i=l.isEmptyValue(r,o)?a:l.textValue(r,o))?i:"";/*#__PURE__*/return e.createElement("div",{style:s,className:n},c)}finally{o()}}function et({children:t,accordion:n,contentStyle:a,contentClassName:l,designMode:s,iconOpenClass:o,iconClosedClass:i,className:c,renderTitle:d=e=>e,renderToggler:u,renderers:m,titleClass:p,useCss:f,dataContext:y}){var v=ye();try{var C;const v=(null!=(C=y.dataNode)?C:y.parentNode).control,N=Ce(!!n.defaultExpanded);v&&!v.meta.accordionState&&(v.meta.accordionState=N);const h=N.value,x=h||s?a:Le({},a,{display:"none"}),g=m.renderLabelText(d(n.title,N)),b=u?u(N,g):/*#__PURE__*/e.createElement("button",{className:c,onClick:()=>N.setValue(e=>!e)},/*#__PURE__*/e.createElement("label",{className:p},g),/*#__PURE__*/e.createElement("i",{className:r(h?o:i)}));/*#__PURE__*/return e.createElement(e.Fragment,null,b,(f||h||s)&&/*#__PURE__*/e.createElement("div",{style:x,className:l},t))}finally{v()}}function tt(e){return e.meta.accordionState}function nt({formNode:t,className:n,options:a,renderChild:l,designMode:s}){var i=ye();try{const c=Ce(0),{tabClass:d,labelClass:u,tabListClass:m,inactiveClass:p,activeClass:f,contentClass:y}=a,v=c.value;return s?/*#__PURE__*/e.createElement(e.Fragment,null,t.getChildNodes().map((e,t)=>C([e],t))):C(t.getChildNodes(),0);function C(t,s){/*#__PURE__*/return e.createElement("div",{key:s,className:o(n,a.className)},/*#__PURE__*/e.createElement("ul",{className:o(null,m)},t.map((t,n)=>/*#__PURE__*/e.createElement("li",{key:n,className:o(null,d),onClick:()=>c.value=n},/*#__PURE__*/e.createElement("span",{className:o(null,r(u,n==v?f:p))},t.definition.title?t.definition.title:"<untitled>")))),/*#__PURE__*/e.createElement("div",{className:o(null,y)},l(v,t[v])))}}finally{i()}}function at(t){const n=function(t={}){return v((n,a)=>/*#__PURE__*/e.createElement(nt,Le({},n,{options:t})),{renderType:C.Tabs})}(null==t?void 0:t.tabs),{className:a,gridStyles:l=m,defaultGridColumns:s=2,gridClassName:i,standardClassName:c,flexClassName:d,defaultFlexGap:u}=null!=t?t:{};function m({columns:e=s}){return{className:i,style:{display:"grid",gridTemplateColumns:`repeat(${e}, 1fr)`}}}return{type:"group",render:function(t,s){const{renderChild:i,renderOptions:m,formNode:p}=t;if(N(m))return n.render(t,s);if(h(m)&&!t.designMode)/*#__PURE__*/return e.createElement(lt,Le({},t,{renderOptions:m}));const{style:f,className:y}=x(m)?l(m):g(m)?function(e){return{className:d,style:{display:"flex",gap:e.gap?e.gap:u,flexDirection:e.direction?e.direction:void 0}}}(m):{className:c};/*#__PURE__*/return e.createElement("div",{className:o(t.className,r(a,y)),style:f},p.getChildNodes().map((e,t)=>i(t,e)))}}}function lt(t){var n=ye();try{const{useEvalExpression:n,renderOptions:a}=t,l=n(null==a?void 0:a.childIndexExpression,e=>"string"==e?parseInt(e):e),r=be(t=>{const n=l.runHook(t.dataContext,l.state),a=null==n?void 0:n.value,r=t.formNode.getChildNodes();/*#__PURE__*/return e.createElement("div",null,"number"==typeof a&&a<r.length&&a>=0&&t.renderChild(a,r[a]))},[l.deps]);/*#__PURE__*/return e.createElement(r,t)}finally{n()}}function rt(){return b(t=>/*#__PURE__*/e.createElement(st,t))}function st({visibility:t,children:n,className:l,style:s,divRef:o}){var i=ye();try{const i=t.value;return a(()=>{i&&t.setValue(e=>({visible:i.visible,showing:i.visible}))},[null==i?void 0:i.visible]),null!=i&&i.visible?/*#__PURE__*/e.createElement("div",{className:r(l),style:s,ref:o},n):/*#__PURE__*/e.createElement(e.Fragment,null)}finally{i()}}function ot(t){return u(n=>/*#__PURE__*/e.createElement(it,{renderOptions:n.renderOptions,className:o(n.className,t),dataNode:n.dataNode,dataContext:n.dataContext,control:n.control,readonly:n.readonly}),{renderType:p.Jsonata})}function it({control:t,renderOptions:n,readonly:a,className:l,dataContext:r,dataNode:s}){var o=ye();try{const o=null!=s.elementIndex?s:r.parentNode,c=xe(()=>({value:t.value,readonly:a,disabled:t.disabled,formData:r.formData,dataPath:E(s)})),d=O(n.expression,w(o).control,E(o),c,i);/*#__PURE__*/return e.createElement("div",{className:l,dangerouslySetInnerHTML:{__html:d.value}})}finally{o()}}const ct=["control","field","renderOptions"];function dt(){return u((e,t)=>{let{control:n,field:a}=e,l=Pe(e,ct);const r=k(n);null==r.current.value&&(r.value=l.definition.defaultValue);const s=T(n);return s.disabled=l.readonly,e=>t.renderData(Le({},l,{control:s,field:Le({},a,{type:d.Bool}),renderOptions:{type:p.Checkbox}}))(e)})}function ut(t){return u((n,a)=>/*#__PURE__*/e.createElement(mt,{dataProps:n,renderers:a,defaultActions:t}),{renderType:p.Array,collection:!0})}function mt({dataProps:t,renderers:n,defaultActions:a}){var l;const{renderOptions:r,control:s,field:o,readonly:i,designMode:c,required:d,renderChild:u,definition:m,className:f,style:y,useChildVisibility:v,dataContext:N,formNode:h}=t,{addText:x,noAdd:g,noRemove:b,removeText:E,editExternal:O}=_(A(r)?r:{},a),w=A(r)?r.childOptions:void 0,k=!I(o),T=S(k?{type:L.Data,field:m.field,children:m.children,renderOptions:null!=w?w:{type:p.Standard},hideTitle:!0}:{type:L.Group,children:m.children,groupOptions:{type:C.Standard,hideTitle:!0}},h.tree),R=(null!=(l=m.children)?l:[]).map(e=>[v(e,void 0,!0),e]),q=V(R,e=>e[0].deps),D=be(pt,[q]),M=Le({},P(s.as(),o,{addText:x,removeText:E,noAdd:g,noRemove:b,readonly:i,disabled:s.disabled,designMode:c,editExternal:O}),{required:d,renderElement:(t,n)=>/*#__PURE__*/e.createElement(D,{index:t,renderChildElement:B,dataContext:N,visibilities:R,wrap:n}),className:f||void 0,style:y},F(m));return n.renderArray(M);function B(e,t){var n,a;return u(null!=(n=null==(a=s.elements)?void 0:a[e].uniqueId)?n:e,T,k?{elementIndex:e}:{parentDataNode:t})}}function pt({index:e,renderChildElement:t,visibilities:n,wrap:a,dataContext:l}){const r=l.dataNode.getChildElement(e),s=n.map(([e,t])=>e.runHook(Le({},l,{parentNode:r,dataNode:R(t,r)}),e.state).value);if(0==s.length||s.some(e=>!0===e))return a(t(e,r))}function ft(t){return{render:(n,{renderAction:a})=>/*#__PURE__*/e.createElement(yt,Le({},n,t,{renderAction:a})),type:"array"}}function yt(t){var n=ye();try{const{renderElement:n,className:a,removableClass:l,childClass:s,removableChildClass:o,removeActionClass:i,addActionClass:c,arrayControl:d,renderAction:u,style:m,editAction:p}=t,{addAction:f,removeAction:y}=q(t);/*#__PURE__*/return e.createElement("div",{style:m},/*#__PURE__*/e.createElement("div",{className:r(a,y&&l)},/*#__PURE__*/e.createElement(Ee,{control:d},(t,a)=>n(a,t=>y||p?/*#__PURE__*/e.createElement(e.Fragment,null,/*#__PURE__*/e.createElement("div",{className:r(s,o)},t),/*#__PURE__*/e.createElement("div",{className:i},p&&u(p(a)),y&&u(y(a)))):/*#__PURE__*/e.createElement("div",{className:s},t)))),f&&/*#__PURE__*/e.createElement("div",{className:c},u(f)))}finally{n()}}const vt="leading-[1.5] text-surface-900 bg-[inherit] border-0 rounded-[inherit] px-3 py-2 outline-0 grow shrink-0 basis-auto focus:outline-0 focus:ring-0 focus:shadow-none";function Ct(t={}){return u(n=>{var a,l;return n.field.collection?/*#__PURE__*/e.createElement(ht,{options:null!=(a=n.options)?a:[],control:n.control,className:o(n.className,t.className),classes:t,controlClasses:n.renderOptions,readOnly:n.readonly,id:n.id}):/*#__PURE__*/e.createElement(Nt,{options:null!=(l=n.options)?l:[],control:n.control,className:o(n.className,t.className),classes:t,controlClasses:n.renderOptions,readOnly:n.readonly,id:n.id})},{renderType:p.Autocomplete})}function Nt(t){var n=ye();try{var a;let n=Le({},(Ve(t),t));const{id:l,control:s,className:i,readOnly:c,classes:d,controlClasses:u}=n,{disabled:m}=s,p=Ce(""),f=Ce(null),y=o(null==u?void 0:u.listContainerClass,d.listContainerClass),v=o(null==u?void 0:u.listEntryClass,d.listEntryClass);Ne(Oe(p,f),([e,t])=>{s.value=t?"string"==typeof t?t:t.value:e});const{getRootProps:C,getInputProps:N,getListboxProps:h,getOptionProps:x,groupedOptions:g,popupOpen:b,focused:E,getPopupIndicatorProps:O}=_e(Le({freeSolo:!0,multiple:!1,value:f.value,inputValue:p.value,getOptionLabel:e=>"string"==typeof e?e:e.name,filterOptions:(e,t)=>e.filter(e=>("string"==typeof e?e:e.name).toLowerCase().includes(t.inputValue.toLowerCase())),onInputChange:(e,t,n)=>{p.value=t,"input"===n&&(f.value=null)},onChange:(e,t,n)=>{"selectOption"===n&&(f.value=t)}},n));/*#__PURE__*/return e.createElement("div",Le({id:l,className:"relative"},C()),/*#__PURE__*/e.createElement("div",{className:r(i,E?"border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200":"shadow-[0_2px_2px_transparent] shadow-surface-50")},/*#__PURE__*/e.createElement("input",Le({type:"text"},N(),{placeholder:null!=(a=null==u?void 0:u.placeholder)?a:"",className:vt})),/*#__PURE__*/e.createElement("button",Le({},O(),{disabled:m||c,className:"outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]"}),/*#__PURE__*/e.createElement("li",{className:r("fa-solid fa-angle-down","text-primary-500",b&&"rotate-180")}))),g.length>0&&b&&/*#__PURE__*/e.createElement("ul",Le({},h(),{className:y}),g.map((t,n)=>{const a=x({option:t,index:n});/*#__PURE__*/return e.createElement("li",Le({},a,{key:a.key,className:v}),t.name)})))}finally{n()}}function ht(t){var n=ye();try{var a,l,s;let n=Le({},(Ve(t),t));const{id:i,control:c,className:d,readOnly:u,classes:m,controlClasses:p}=n,{disabled:f}=c,y=Ce(""),v=Ce(null),C=o(null==p?void 0:p.listContainerClass,m.listContainerClass),N=o(null==p?void 0:p.listEntryClass,m.listEntryClass),h=o(null==p?void 0:p.chipContainerClass,m.chipContainerClass),x=o(null==p?void 0:p.chipCloseButtonClass,m.chipCloseButtonClass);Ne(Oe(y,v),([e,t])=>{var n;const a=null!=(n=null==t?void 0:t.map(e=>"string"==typeof e?e:e.value))?n:[];c.value=e?a.concat(e):a});const{getRootProps:g,getInputProps:b,getListboxProps:E,getOptionProps:O,groupedOptions:w,popupOpen:k,focused:T,getPopupIndicatorProps:_}=_e(Le({value:null!=(a=v.value)?a:[],inputValue:y.value,freeSolo:!0,multiple:!0,getOptionLabel:e=>"string"==typeof e?e:e.name,filterOptions:(e,t)=>e.filter(e=>("string"==typeof e?e:e.name).toLowerCase().includes(t.inputValue.toLowerCase())),onInputChange:(e,t)=>{y.value=t},onChange:(e,t,n)=>{"selectOption"!==n&&"removeOption"!==n||(v.value=t)}},n));/*#__PURE__*/return e.createElement("div",Le({id:i,className:"relative"},g()),/*#__PURE__*/e.createElement("div",{className:r(d,T?"border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200":"shadow-[0_2px_2px_transparent] shadow-surface-50")},/*#__PURE__*/e.createElement("div",{className:"flex flex-1 flex-row flex-wrap"},null==(l=v.value)?void 0:l.map(t=>/*#__PURE__*/e.createElement(xt,{key:"string"==typeof t?t:t.name,text:"string"==typeof t?t:t.name,chipContainerClass:h,chipCloseButtonClass:x,onDeleteClick:()=>{const e=v.elements.find(e=>e.value==t);e&&we(v,e)}})),/*#__PURE__*/e.createElement("input",Le({type:"text"},b(),{placeholder:null!=(s=null==p?void 0:p.placeholder)?s:"",className:r(vt)}))),/*#__PURE__*/e.createElement("button",Le({},_(),{disabled:f||u,className:"outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]"}),/*#__PURE__*/e.createElement("i",{className:r("fa-solid fa-angle-down","text-primary-500",k&&"rotate-180")}))),w.length>0&&k&&/*#__PURE__*/e.createElement("ul",Le({},E(),{className:C}),w.map((t,n)=>{const a=O({option:t,index:n});/*#__PURE__*/return e.createElement("li",Le({},a,{key:a.key,className:N}),t.name)})))}finally{n()}}function xt({text:t,chipContainerClass:n,chipCloseButtonClass:a,onDeleteClick:l}){var r=ye();try{/*#__PURE__*/return e.createElement("div",{className:n},t,/*#__PURE__*/e.createElement("i",{className:a,onClick:()=>{null==l||l()}}))}finally{r()}}const gt="ValueForField",bt={RenderOptions:{value:gt,name:"Value For Field",fields:D({fieldRef:M("Field Reference")})}};function Et(t){return u((n,a)=>{var l;const{fieldRef:r}=n.renderOptions,s=r?null==(l=B(r,n.dataContext.parentNode))||null==(l=l.control)?void 0:l.value:void 0,o=s?j(s,t.schema):void 0;return o?/*#__PURE__*/e.createElement(Ot,{renderer:a,schema:o,control:n.control}):/*#__PURE__*/e.createElement(e.Fragment,null,s?"No schema node for "+s:"")},{renderType:gt})}function Ot({schema:t,renderer:a,control:l}){var r=ye();try{const r=Ce({default:void 0},void 0,e=>ke(e,{default:l})),[s,o]=n(()=>{const e=G([Le({},t.field,{field:"default",required:!1,notNullable:!1,onlyForTypes:null,defaultValue:void 0})]);return[H(e,[]),e]},[t]),i=W(J(s),a,{disabled:l.disabled},z(o,r));/*#__PURE__*/return e.createElement(i,null)}finally{r()}}function wt(t={}){return U((n,a)=>{var l,r;const{dataContext:s}=n,o=null!=(l=null==(r=s.dataNode)?void 0:r.control)?l:Te(void 0),i=n.adornment,c=Y(o),d=c.value,u=T(o);return void 0===d&&i.editSelectable&&(c.value=!1),o.disabled=!d||!(!i.allowNull||u.value),{apply:a=>{var l,r;if(n.formOptions.readonly)return a;!t.hideEdit&&i.editSelectable&&$(null!=(l=null!=(r=i.placement)?r:t.defaultPlacement)?l:K.LabelStart,/*#__PURE__*/e.createElement(ge,{control:c,className:t.checkClass}))(a),Q("children",n=>t.customRender?t.customRender({allValues:X(o),editing:c,children:n,adornment:i,nullToggler:u,dataContext:s,options:t}):/*#__PURE__*/e.createElement(kt,{children:n,options:t,editing:c.as(),adornment:i,dataControl:o}))(a)},priority:0,adornment:i}},{adornmentType:Z.Optional})}function kt({children:t,options:n,adornment:a,editing:l,dataControl:r}){var s=ye();try{var o,i;const s=T(r),c=X(r).value.length>1,d=a.allowNull?/*#__PURE__*/e.createElement("div",{className:n.nullWrapperClass},/*#__PURE__*/e.createElement(ge,{control:s,className:n.checkClass,notValue:!0}),/*#__PURE__*/e.createElement("span",null,null!=(o=n.setNullText)?o:"Null")):void 0;/*#__PURE__*/return e.createElement("div",{className:n.className},c&&!1===l.value?/*#__PURE__*/e.createElement("div",{className:n.multiValuesClass},null!=(i=n.multiValuesText)?i:"Differing values"):/*#__PURE__*/e.createElement("div",{className:n.childWrapperClass},d,t))}finally{s()}}function Tt({control:t,className:n}){var a=ye();try{const a=l(null);return Ne(()=>t.value,e=>{const t=a.current;t&&t.textContent!==e&&(t.textContent=e)},!0),/*#__PURE__*/e.createElement("code",{contentEditable:!t.disabled,className:n,onInput:e=>t.value=e.currentTarget.textContent,ref:a})}finally{a()}}function _t({dataProps:t,options:n,formRenderer:a,renderOptions:l}){var r=ye();try{const{control:s,formNode:i,renderChild:c,designMode:d}=t,u=ee(s),m=Se({isOpen:!0,onOpenChange:()=>{u.value=void 0}});if(d||void 0!==u.value){const p=z(t.dataNode.schema,u.fields.data),f=S({type:L.Group,children:i.definition.children,groupOptions:{type:C.Standard,hideTitle:!0}},i.tree),y=/*#__PURE__*/e.createElement("div",{className:o(t.className,n.className)},c("",f,{parentDataNode:p,elementIndex:0}),/*#__PURE__*/e.createElement("div",{className:n.actionsClass},/*#__PURE__*/e.createElement(Ee,{control:u.fields.actions},e=>a.renderAction(N(e.value)))));return l.showInline||d?y:/*#__PURE__*/e.createElement(Ae,{state:m},/*#__PURE__*/e.createElement(Ie,{children:y}));function v(e){let t=!1;te(p,f,ne(()=>{t=!0})),t||e()}function N({action:e,dontValidate:t}){return t?e:Le({},e,{onClick:()=>v(e.onClick)})}}/*#__PURE__*/return e.createElement(e.Fragment,null)}finally{r()}}function At(t,n={}){return ae(t,({onClick:t,actionText:a,className:l,style:r,actionId:s,actionData:i,disabled:c})=>{var d;/*#__PURE__*/return e.createElement("button",{className:o(l,n.className),disabled:c,style:r,onClick:t},null!=(d=null==n.renderContent?void 0:n.renderContent(a,s,i))?d:a)})}const It=[{name:"Yes",value:!0},{name:"No",value:!1}];function St(t={}){var n,a,l;const r=ot(t.jsonataClass),s=dt(),i=(c=t.multilineClass,u(t=>/*#__PURE__*/e.createElement(Tt,Le({},t,{className:o(t.className,c)}))));var c;const m=Ke(null!=(n=t.checkOptions)?n:t.checkboxOptions),f=He(t.selectOptions),y=ze(null!=(a=t.radioOptions)?a:t.checkOptions),v=Ue(null!=(l=t.checkListOptions)?l:t.checkOptions),C=function(t={}){return u((n,a)=>/*#__PURE__*/e.createElement(_t,{dataProps:n,options:t,formRenderer:a,renderOptions:n.renderOptions}),{renderType:p.ArrayElement})}(t.arrayElementOptions),{inputClass:N,booleanOptions:h,optionRenderer:x,displayOnlyClass:g,defaultEmptyText:b}=Le({optionRenderer:f,booleanOptions:It},t),E=ut(t.arrayOptions),O=Ct(t.autocompleteOptions);return u((t,n)=>{const{field:a}=t,l=a.type,c=t.renderOptions;let u=c.type;if(a.collection&&null==t.elementIndex&&(u==p.Standard||u==p.Array||u==p.ArrayElement))return u==p.ArrayElement?C.render(t,n):E.render(t,n);if(l===d.Compound){var w;const e=null!=(w=le(c)?c.groupOptions:void 0)?w:{type:"Standard",hideTitle:!0};return n.renderGroup(Le({},t,{renderOptions:e}))}if(t.displayOnly||re(c))return n=>Le({},n,{className:"@ "+o(n.className,g),children:/*#__PURE__*/e.createElement(Ze,{field:t.field,schemaInterface:t.dataContext.schemaInterface,control:t.control,className:t.className,style:t.style,emptyText:re(c)&&c.emptyText?c.emptyText:b})});if(null!=h&&l===d.Bool&&null==t.options)return n.renderData(Le({},t,{options:h}));if(u===p.Standard&&se(t))return x.render(t,n);switch(u){case p.NullToggle:return s.render(t,n);case p.CheckList:return v.render(t,n);case p.Dropdown:return f.render(t,n);case p.Radio:return y.render(t,n);case p.Checkbox:return m.render(t,n);case p.Jsonata:return r.render(t,n);case p.Autocomplete:return O.render(t,n)}var k;if(l==d.Any)/*#__PURE__*/return e.createElement(e.Fragment,null,"Can't render field: ",null!=(k=a.displayName)?k:a.field," (",u,")");if(oe(c)&&c.multiline)return i.render(t,n);const T=oe(c)?c.placeholder:void 0;/*#__PURE__*/return e.createElement(Be,{className:o(t.className,N),style:t.style,id:t.id,readOnly:t.readonly,control:t.control,placeholder:null!=T?T:void 0,convert:je(t.field.type)})})}function Lt(t={}){const n=wt(t.optional);return{type:"adornment",render:(a,l)=>{if(ie(a.adornment))return n.render(a,l);const{adornment:r,designMode:s,dataContext:o,useExpr:i}=a;return{apply:n=>{if(ce(r)&&i){const c=i(r.expression,e=>e),d=de({value:c}),u=be(m,[d]);return ue(t=>/*#__PURE__*/e.createElement(u,{children:t,parentContext:o,adornment:r}))(n);function m({children:e,adornment:t,parentContext:n}){const{value:a}=d(n),l=B(t.field,n.parentNode).control,r=!t.defaultOnly;return Ne(()=>[null==a?void 0:a.value,null==(null==l?void 0:l.value)],([e])=>{null==l||l.setValue(t=>r||null==t?e:t)},!0),e}}var a;return me(r)?$(null!=(a=r.placement)?a:K.ControlStart,/*#__PURE__*/e.createElement("i",{className:r.iconClass}))(n):pe(r)?ue(a=>/*#__PURE__*/e.createElement(et,Le({renderers:l,children:a,accordion:r,contentStyle:n.style,contentClassName:n.className,designMode:s,dataContext:o},t.accordion)))(n):void 0},priority:0,adornment:r}}}}function Vt(t){const{className:n,groupLabelClass:a,controlLabelClass:l,requiredElement:s,labelContainer:i}=Le({requiredElement:/*#__PURE__*/e.createElement("span",null," *"),labelContainer:e=>e},t);return{render:(t,c,d,u)=>t.type==fe.Text?t.label:i(/*#__PURE__*/e.createElement(e.Fragment,null,/*#__PURE__*/e.createElement("label",{htmlFor:t.forId,className:o(t.className,r(n,t.type===fe.Group&&a,t.type===fe.Control&&l))},c,u.renderLabelText(t.label),t.required&&s),d)),type:"label"}}function Pt(e={}){return{data:St(e.data),display:Re(e.display),action:At(void 0,e.action),array:ft(e.array),group:at(e.group),label:Vt(e.label),adornment:Lt(e.adornment),renderLayout:Qe(e.layout),visibility:rt()}}function Ft(){return Pt({layout:{className:"control"},group:{className:"group"},array:{className:"control-array"},action:{className:"action"},data:{inputClass:"data"},display:{htmlClassName:"html",textClassName:"text"}})}const Rt={label:{groupLabelClass:"font-bold",requiredElement:/*#__PURE__*/e.createElement("span",{className:"text-red-500"}," *")},array:{removableClass:"grid grid-cols-[1fr_auto] items-center gap-x-2",childClass:"grow my-2",addActionClass:"my-2",removeActionClass:"flex gap-2"},group:{standardClassName:"flex flex-col gap-4",gridClassName:"gap-x-2 gap-y-4",flexClassName:"gap-2",tabs:{className:"",tabListClass:"flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400",tabClass:"me-2",labelClass:"inline-flex items-center justify-center p-4 border-b-2 group",inactiveClass:"border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 cursor-pointer",activeClass:"text-blue-600 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500",contentClass:"my-2"}},action:{className:"bg-primary-500 rounded-lg p-3 text-white"},layout:{className:"flex flex-col",errorClass:"text-sm text-danger-500"},data:{displayOnlyClass:"flex flex-row items-center gap-2",checkOptions:{className:"flex items-center gap-4",entryClass:"flex gap-1 items-center"},selectOptions:{emptyText:"<select>"},arrayElementOptions:{actionsClass:"my-2 flex gap-2"},multilineClass:"border p-2 outline-0 whitespace-pre-wrap",autocompleteOptions:{className:"w-full flex gap-[5px] pr-[5px] overflow-hidden rounded-lg bg-white border border-solid border-gray-200 hover:border-primary-400 focus-visible:outline-0 shadow-[0_2px_4px_rgb(0_0_0_/_0.05)] min-h-[48px] py-1",listContainerClass:"absolute w-full text-sm box-border p-1.5 my-3 mx-0 min-w-[120px] rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] bg-white border border-solid border-surface-200 text-surface-900 shadow-[0_4px_30px_transparent] shadow-surface-200",listEntryClass:"list-none p-2 rounded-lg cursor-default last-of-type:border-b-0 hover:cursor-pointer hover:bg-primary-100 aria-selected:bg-primary-200 aria-selected:text-primary-900 focused:bg-surface-100 focus-visible:bg-surface-100 focused:text-surface-900 focus-visible:text-surface-900 focus-visible:shadow-[0_0_0_3px_transparent] focus-visible:shadow-primary-200 focused:aria-selected:bg-primary-200 focus-visible:aria-selected:bg-primary-200 focused:aria-selected:text-primary-900 focus-visible:aria-selected:text-primary-900",chipContainerClass:"flex flex-row items-center px-3 py-1 rounded-full bg-surface-100 m-1 gap-2 truncate",chipCloseButtonClass:"fa-solid fa-xmark p-1 bg-surface-300 rounded-full min-w-[24px] flex justify-center text-surface-50 hover:bg-surface-400 hover:text-surface-100 hover:cursor-pointer"}},adornment:{accordion:{className:"flex items-center gap-2 my-2",titleClass:"cursor-pointer",iconOpenClass:"fa fa-chevron-up",iconClosedClass:"fa fa-chevron-down"},optional:{checkClass:"m-2",className:"flex items-center gap-2 w-full",multiValuesClass:"italic",childWrapperClass:"grow"}}};export{Ye as CheckButtons,Be as ControlInput,mt as DataArrayRenderer,et as DefaultAccordion,yt as DefaultArrayRenderer,It as DefaultBoolOptions,qe as DefaultDisplay,Ze as DefaultDisplayOnly,Xe as DefaultLayout,st as DefaultVisibility,it as JsonataRenderer,kt as OptionalEditRenderer,We as SelectDataRenderer,bt as ValueForFieldExtension,Ct as createAutocompleteRenderer,At as createButtonActionRenderer,Ue as createCheckListRenderer,Ke as createCheckboxRenderer,Ft as createClassStyledRenderers,Lt as createDefaultAdornmentRenderer,ut as createDefaultArrayDataRenderer,ft as createDefaultArrayRenderer,St as createDefaultDataRenderer,Re as createDefaultDisplayRenderer,at as createDefaultGroupRenderer,Vt as createDefaultLabelRenderer,Qe as createDefaultLayoutRenderer,Pt as createDefaultRenderers,rt as createDefaultVisibilityRenderer,je as createInputConversion,ot as createJsonataRenderer,dt as createNullToggleRenderer,wt as createOptionalAdornment,ze as createRadioRenderer,Je as createSelectConversion,He as createSelectRenderer,Et as createValueForFieldRenderer,Rt as defaultTailwindTheme,tt as getAccordionState,$e as setIncluded};
|
|
1
|
+
import React, { createElement, useState, useMemo, Fragment, useEffect, useRef } from 'react';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { DisplayDataType, rendererClass, coerceToString, getOverrideClass, FieldType, createDataRenderer, fieldOptionAdornment, DataRenderType, createLayoutRenderer, renderLayoutParts, createGroupRenderer, GroupRenderType, isTabsRenderer, isSelectChildRenderer, isGridRenderer, isFlexRenderer, createVisibilityRenderer, getJsonPath, useJsonataExpression, getRootDataNode, getLastDefinedValue, getNullToggler, mergeObjects, isArrayRenderer, isCompoundField, nodeForControl, ControlDefinitionType, makeHookDepString, createArrayActions, getLengthRestrictions, lookupDataNode, applyArrayLengthRestrictions, buildSchema, stringField, schemaDataForFieldRef, schemaForFieldRef, rootSchemaNode, addMissingControlsForSchema, useControlRendererComponent, groupedControl, makeSchemaDataNode, createAdornmentRenderer, getIsEditing, appendMarkupAt, AdornmentPlacement, wrapMarkup, getAllValues, ControlAdornmentType, getExternalEditData, visitFormDataInContext, validationVisitor, createActionRenderer, isDataGroupRenderer, isDisplayOnlyRenderer, hasOptions, isTextfieldRenderer, isOptionalAdornment, isSetFieldAdornment, useDynamicHooks, wrapLayout, isIconAdornment, isAccordionAdornment, LabelType } from '@react-typed-forms/schemas';
|
|
4
|
+
import { useComponentTracking, formControlProps, useControl, useControlEffect, RenderArrayElements, useComputed, useTrackedComponent, RenderElements, controlValues, removeElement, setFields, newControl, Fcheckbox as Fcheckbox$1 } from '@react-typed-forms/core';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
import { useAutocomplete } from '@mui/base';
|
|
7
|
+
import { Modal, Dialog } from '@astroapps/aria-base';
|
|
8
|
+
import { useOverlayTriggerState } from '@react-stately/overlays';
|
|
9
|
+
|
|
10
|
+
function _extends() {
|
|
11
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
12
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
13
|
+
var t = arguments[e];
|
|
14
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
15
|
+
}
|
|
16
|
+
return n;
|
|
17
|
+
}, _extends.apply(null, arguments);
|
|
18
|
+
}
|
|
19
|
+
function _objectDestructuringEmpty(t) {
|
|
20
|
+
if (null == t) throw new TypeError("Cannot destructure " + t);
|
|
21
|
+
}
|
|
22
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
23
|
+
if (null == r) return {};
|
|
24
|
+
var t = {};
|
|
25
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
26
|
+
if (e.includes(n)) continue;
|
|
27
|
+
t[n] = r[n];
|
|
28
|
+
}
|
|
29
|
+
return t;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
const _excluded$4 = ["data", "display", "className", "style", "renderer"];
|
|
33
|
+
function createDefaultDisplayRenderer(options = {}) {
|
|
34
|
+
return {
|
|
35
|
+
render: (props, renderer) => createElement(DefaultDisplay, _extends({}, options, props, {
|
|
36
|
+
renderer: renderer
|
|
37
|
+
})),
|
|
38
|
+
type: "display"
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
function DefaultDisplay(_ref) {
|
|
42
|
+
var _effect = useComponentTracking();
|
|
43
|
+
try {
|
|
44
|
+
let {
|
|
45
|
+
data,
|
|
46
|
+
display,
|
|
47
|
+
className,
|
|
48
|
+
style,
|
|
49
|
+
renderer
|
|
50
|
+
} = _ref,
|
|
51
|
+
options = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
52
|
+
const h = renderer.h;
|
|
53
|
+
switch (data.type) {
|
|
54
|
+
case DisplayDataType.Icon:
|
|
55
|
+
return h("i", {
|
|
56
|
+
style: style,
|
|
57
|
+
className: clsx(getOverrideClass(className), display ? display.value : data.iconClass)
|
|
58
|
+
});
|
|
59
|
+
case DisplayDataType.Text:
|
|
60
|
+
return h("div", {
|
|
61
|
+
style: style,
|
|
62
|
+
className: rendererClass(className, options.textClassName)
|
|
63
|
+
}, display ? coerceToString(display.value) : data.text);
|
|
64
|
+
case DisplayDataType.Html:
|
|
65
|
+
return h("div", {
|
|
66
|
+
style: style,
|
|
67
|
+
className: rendererClass(className, options.htmlClassName),
|
|
68
|
+
dangerouslySetInnerHTML: {
|
|
69
|
+
__html: display ? coerceToString(display.value) : data.html
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
case DisplayDataType.Custom:
|
|
73
|
+
return h("div", null, h("b", null, "(", data.customId, ")"));
|
|
74
|
+
default:
|
|
75
|
+
return h("h1", null, "Unknown display type: ", data.type);
|
|
76
|
+
}
|
|
77
|
+
} finally {
|
|
78
|
+
_effect();
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const _excluded$3 = ["control", "convert", "renderer"],
|
|
83
|
+
_excluded2$1 = ["errorText", "value", "onChange"];
|
|
84
|
+
function ControlInput(_ref) {
|
|
85
|
+
var _effect = useComponentTracking();
|
|
86
|
+
try {
|
|
87
|
+
let {
|
|
88
|
+
control,
|
|
89
|
+
convert,
|
|
90
|
+
renderer
|
|
91
|
+
} = _ref,
|
|
92
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
93
|
+
const _formControlProps = formControlProps(control),
|
|
94
|
+
{
|
|
95
|
+
value
|
|
96
|
+
} = _formControlProps,
|
|
97
|
+
inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2$1);
|
|
98
|
+
const textValue = useControl(() => toText(value));
|
|
99
|
+
useControlEffect(() => control.value, v => textValue.value = toText(v));
|
|
100
|
+
// noinspection JSUnusedLocalSymbols
|
|
101
|
+
const h = renderer.h;
|
|
102
|
+
return h("input", _extends({}, inputProps, {
|
|
103
|
+
type: convert[0],
|
|
104
|
+
value: textValue.value,
|
|
105
|
+
onChange: e => {
|
|
106
|
+
textValue.value = e.target.value;
|
|
107
|
+
const converted = convert[1](e.target.value);
|
|
108
|
+
if (converted !== undefined) control.value = converted;
|
|
109
|
+
}
|
|
110
|
+
}, props));
|
|
111
|
+
function toText(value) {
|
|
112
|
+
return value == null ? "" : convert[2](value);
|
|
113
|
+
}
|
|
114
|
+
} finally {
|
|
115
|
+
_effect();
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
function createInputConversion(ft) {
|
|
119
|
+
switch (ft) {
|
|
120
|
+
case FieldType.String:
|
|
121
|
+
return ["text", a => a, a => a];
|
|
122
|
+
case FieldType.Bool:
|
|
123
|
+
return ["text", a => a === "true" ? true : a === "false" ? false : undefined, a => {
|
|
124
|
+
var _a$toString;
|
|
125
|
+
return (_a$toString = a == null ? void 0 : a.toString()) != null ? _a$toString : "";
|
|
126
|
+
}];
|
|
127
|
+
case FieldType.Int:
|
|
128
|
+
return ["number", a => a !== "" ? parseInt(a) : null, a => a == null ? "" : a];
|
|
129
|
+
case FieldType.DateTime:
|
|
130
|
+
return ["datetime-local", a => !a ? null : a, a => a];
|
|
131
|
+
case FieldType.Date:
|
|
132
|
+
return ["date", a => !a ? null : a, a => a];
|
|
133
|
+
case FieldType.Time:
|
|
134
|
+
return ["time", a => {
|
|
135
|
+
const l = a.length;
|
|
136
|
+
if (l === 5) return a + ":00";
|
|
137
|
+
if (l === 8) return a;
|
|
138
|
+
return undefined;
|
|
139
|
+
}, a => a ? a.substring(0, 5) : ""];
|
|
140
|
+
case FieldType.Double:
|
|
141
|
+
return ["number", a => a !== "" ? parseFloat(a) : null, a => a == null ? "" : a];
|
|
142
|
+
default:
|
|
143
|
+
return ["text", a => a, a => a];
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
const _excluded$2 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "readonly"];
|
|
148
|
+
function createSelectRenderer(options = {}) {
|
|
149
|
+
return createDataRenderer((props, asArray) => {
|
|
150
|
+
var _props$options;
|
|
151
|
+
return createElement(SelectDataRenderer, {
|
|
152
|
+
className: rendererClass(props.className, options.className),
|
|
153
|
+
state: props.control,
|
|
154
|
+
id: props.id,
|
|
155
|
+
readonly: props.readonly,
|
|
156
|
+
options: (_props$options = props.options) != null ? _props$options : [],
|
|
157
|
+
required: props.required,
|
|
158
|
+
emptyText: options.emptyText,
|
|
159
|
+
requiredText: options.requiredText,
|
|
160
|
+
convert: createSelectConversion(props.field.type)
|
|
161
|
+
});
|
|
162
|
+
}, {
|
|
163
|
+
options: true
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
function SelectDataRenderer(_ref) {
|
|
167
|
+
var _effect = useComponentTracking();
|
|
168
|
+
try {
|
|
169
|
+
let {
|
|
170
|
+
state,
|
|
171
|
+
options,
|
|
172
|
+
className,
|
|
173
|
+
convert,
|
|
174
|
+
required,
|
|
175
|
+
emptyText = "N/A",
|
|
176
|
+
requiredText = "<please select>",
|
|
177
|
+
readonly
|
|
178
|
+
} = _ref,
|
|
179
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
180
|
+
const {
|
|
181
|
+
value,
|
|
182
|
+
disabled
|
|
183
|
+
} = state;
|
|
184
|
+
const [showEmpty] = useState(!required || value == null);
|
|
185
|
+
const optionStringMap = useMemo(() => Object.fromEntries(options.map(x => [convert(x.value), x.value])), [options]);
|
|
186
|
+
const optionGroups = useMemo(() => new Set(options.filter(x => x.group).map(x => x.group)), [options]);
|
|
187
|
+
return createElement("select", _extends({}, props, {
|
|
188
|
+
className: className,
|
|
189
|
+
onChange: v => state.value = optionStringMap[v.target.value],
|
|
190
|
+
value: convert(value),
|
|
191
|
+
disabled: disabled || readonly
|
|
192
|
+
}), showEmpty && createElement("option", {
|
|
193
|
+
value: ""
|
|
194
|
+
}, required ? requiredText : emptyText), [...optionGroups.keys()].map(x => createElement("optgroup", {
|
|
195
|
+
key: x,
|
|
196
|
+
label: x
|
|
197
|
+
}, options.filter(o => o.group === x).map(renderOption))), options.filter(x => !x.group).map(renderOption));
|
|
198
|
+
function renderOption(x, i) {
|
|
199
|
+
return createElement("option", {
|
|
200
|
+
key: i,
|
|
201
|
+
value: convert(x.value),
|
|
202
|
+
disabled: !!x.disabled
|
|
203
|
+
}, x.name);
|
|
204
|
+
}
|
|
205
|
+
} finally {
|
|
206
|
+
_effect();
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
function createSelectConversion(ft) {
|
|
210
|
+
switch (ft) {
|
|
211
|
+
case FieldType.String:
|
|
212
|
+
case FieldType.Int:
|
|
213
|
+
case FieldType.Double:
|
|
214
|
+
return a => a;
|
|
215
|
+
default:
|
|
216
|
+
return a => {
|
|
217
|
+
var _a$toString;
|
|
218
|
+
return (_a$toString = a == null ? void 0 : a.toString()) != null ? _a$toString : "";
|
|
219
|
+
};
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
const _excluded$1 = ["control", "type", "notValue", "renderer"],
|
|
224
|
+
_excluded2 = ["value", "onChange", "errorText"];
|
|
225
|
+
function createRadioRenderer(options = {}) {
|
|
226
|
+
return createDataRenderer((p, renderer) => createElement(CheckButtons, _extends({
|
|
227
|
+
classes: options,
|
|
228
|
+
controlClasses: p.renderOptions
|
|
229
|
+
}, p, {
|
|
230
|
+
className: rendererClass(p.className, options.className),
|
|
231
|
+
isChecked: (control, o) => control.value == o.value,
|
|
232
|
+
setChecked: (c, o) => c.value = o.value,
|
|
233
|
+
control: p.control,
|
|
234
|
+
type: "radio",
|
|
235
|
+
entryAdornment: fieldOptionAdornment(p),
|
|
236
|
+
renderer: renderer
|
|
237
|
+
})), {
|
|
238
|
+
renderType: DataRenderType.Radio
|
|
239
|
+
});
|
|
240
|
+
}
|
|
241
|
+
function createCheckListRenderer(options = {}) {
|
|
242
|
+
return createDataRenderer((p, renderer) => createElement(CheckButtons, _extends({
|
|
243
|
+
classes: options,
|
|
244
|
+
controlClasses: p.renderOptions
|
|
245
|
+
}, p, {
|
|
246
|
+
className: rendererClass(p.className, options.className),
|
|
247
|
+
isChecked: (control, o) => {
|
|
248
|
+
const v = control.value;
|
|
249
|
+
return Array.isArray(v) ? v.includes(o.value) : false;
|
|
250
|
+
},
|
|
251
|
+
setChecked: (c, o, checked) => {
|
|
252
|
+
c.setValue(x => setIncluded(x != null ? x : [], o.value, checked));
|
|
253
|
+
},
|
|
254
|
+
control: p.control,
|
|
255
|
+
type: "checkbox",
|
|
256
|
+
entryAdornment: fieldOptionAdornment(p),
|
|
257
|
+
renderer: renderer
|
|
258
|
+
})), {
|
|
259
|
+
collection: true,
|
|
260
|
+
renderType: DataRenderType.CheckList
|
|
261
|
+
});
|
|
262
|
+
}
|
|
263
|
+
function CheckButtons({
|
|
264
|
+
control,
|
|
265
|
+
options,
|
|
266
|
+
readonly,
|
|
267
|
+
className,
|
|
268
|
+
id,
|
|
269
|
+
type,
|
|
270
|
+
isChecked,
|
|
271
|
+
setChecked,
|
|
272
|
+
entryAdornment,
|
|
273
|
+
classes,
|
|
274
|
+
controlClasses = {},
|
|
275
|
+
renderer
|
|
276
|
+
}) {
|
|
277
|
+
var _effect = useComponentTracking();
|
|
278
|
+
try {
|
|
279
|
+
const h = renderer.h;
|
|
280
|
+
const {
|
|
281
|
+
disabled
|
|
282
|
+
} = control;
|
|
283
|
+
const name = "r" + control.uniqueId;
|
|
284
|
+
return h("div", {
|
|
285
|
+
className: className,
|
|
286
|
+
id: id
|
|
287
|
+
}, h(RenderArrayElements, {
|
|
288
|
+
array: options == null ? void 0 : options.filter(x => x.value != null)
|
|
289
|
+
}, (o, i) => {
|
|
290
|
+
const checked = useComputed(() => isChecked(control, o)).value;
|
|
291
|
+
const selOrUnsel = checked ? rendererClass(controlClasses == null ? void 0 : controlClasses.selectedClass, classes.selectedClass) : rendererClass(controlClasses == null ? void 0 : controlClasses.notSelectedClass, classes.notSelectedClass);
|
|
292
|
+
return h("div", {
|
|
293
|
+
className: clsx(rendererClass(controlClasses == null ? void 0 : controlClasses.entryWrapperClass, classes.entryWrapperClass), selOrUnsel),
|
|
294
|
+
onClick: () => !readonly && setChecked(control, o, !checked)
|
|
295
|
+
}, h("div", {
|
|
296
|
+
className: classes.entryClass
|
|
297
|
+
}, h("input", {
|
|
298
|
+
id: name + "_" + i,
|
|
299
|
+
className: classes.checkClass,
|
|
300
|
+
type: type,
|
|
301
|
+
name: name,
|
|
302
|
+
readOnly: readonly,
|
|
303
|
+
disabled: disabled,
|
|
304
|
+
checked: checked,
|
|
305
|
+
onChange: x => {
|
|
306
|
+
!readonly && setChecked(control, o, x.target.checked);
|
|
307
|
+
}
|
|
308
|
+
}), h("label", {
|
|
309
|
+
className: classes.labelClass,
|
|
310
|
+
htmlFor: name + "_" + i
|
|
311
|
+
}, o.name)), entryAdornment == null ? void 0 : entryAdornment(o, i, checked));
|
|
312
|
+
}));
|
|
313
|
+
} finally {
|
|
314
|
+
_effect();
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
function setIncluded(array, elem, included) {
|
|
318
|
+
const already = array.includes(elem);
|
|
319
|
+
if (included === already) {
|
|
320
|
+
return array;
|
|
321
|
+
}
|
|
322
|
+
if (included) {
|
|
323
|
+
return [...array, elem];
|
|
324
|
+
}
|
|
325
|
+
return array.filter(e => e !== elem);
|
|
326
|
+
}
|
|
327
|
+
function createCheckboxRenderer(options = {}) {
|
|
328
|
+
return createDataRenderer((props, renderer) => p => _extends({}, p, {
|
|
329
|
+
label: undefined,
|
|
330
|
+
children: createElement(CheckBox, {
|
|
331
|
+
p: p,
|
|
332
|
+
renderer: renderer,
|
|
333
|
+
options: options,
|
|
334
|
+
props: props
|
|
335
|
+
})
|
|
336
|
+
}), {
|
|
337
|
+
renderType: DataRenderType.Checkbox
|
|
338
|
+
});
|
|
339
|
+
}
|
|
340
|
+
function CheckBox({
|
|
341
|
+
p,
|
|
342
|
+
props,
|
|
343
|
+
renderer,
|
|
344
|
+
options
|
|
345
|
+
}) {
|
|
346
|
+
var _effect2 = useComponentTracking();
|
|
347
|
+
try {
|
|
348
|
+
const h = renderer.h;
|
|
349
|
+
return h("div", {
|
|
350
|
+
className: rendererClass(props.className, options.entryClass)
|
|
351
|
+
}, h(Fcheckbox, {
|
|
352
|
+
id: props.id,
|
|
353
|
+
control: props.control.as(),
|
|
354
|
+
style: props.style,
|
|
355
|
+
className: options.checkClass,
|
|
356
|
+
renderer: renderer
|
|
357
|
+
}), p.label && renderer.renderLabel(p.label, undefined, undefined));
|
|
358
|
+
} finally {
|
|
359
|
+
_effect2();
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
function Fcheckbox(_ref) {
|
|
363
|
+
var _effect3 = useComponentTracking();
|
|
364
|
+
try {
|
|
365
|
+
let {
|
|
366
|
+
control,
|
|
367
|
+
type = "checkbox",
|
|
368
|
+
notValue = false,
|
|
369
|
+
renderer
|
|
370
|
+
} = _ref,
|
|
371
|
+
others = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
372
|
+
const h = renderer.h;
|
|
373
|
+
// Update the HTML5 custom validity whenever the error message is changed/cleared
|
|
374
|
+
// useControlEffect(
|
|
375
|
+
// () => control.error,
|
|
376
|
+
// (s) => (control.element as HTMLInputElement)?.setCustomValidity(s ?? ""),
|
|
377
|
+
// );
|
|
378
|
+
const _formControlProps = formControlProps(control),
|
|
379
|
+
{
|
|
380
|
+
value
|
|
381
|
+
} = _formControlProps,
|
|
382
|
+
theseProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2);
|
|
383
|
+
return h("input", _extends({}, theseProps, {
|
|
384
|
+
checked: !!value !== notValue,
|
|
385
|
+
ref: r => {
|
|
386
|
+
control.element = r;
|
|
387
|
+
// if (r) r.setCustomValidity(control.current.error ?? "");
|
|
388
|
+
},
|
|
389
|
+
onChange: e => control.value = e.target.checked !== notValue,
|
|
390
|
+
type: type
|
|
391
|
+
}, others));
|
|
392
|
+
} finally {
|
|
393
|
+
_effect3();
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
function createDefaultLayoutRenderer(options = {}) {
|
|
398
|
+
return createLayoutRenderer((props, renderers) => {
|
|
399
|
+
const layout = renderLayoutParts(props, renderers);
|
|
400
|
+
return {
|
|
401
|
+
children: layout.wrapLayout(createElement(DefaultLayout, _extends({
|
|
402
|
+
layout: layout
|
|
403
|
+
}, options, {
|
|
404
|
+
renderer: renderers
|
|
405
|
+
}))),
|
|
406
|
+
className: rendererClass(layout.className, options.className),
|
|
407
|
+
style: layout.style,
|
|
408
|
+
divRef: e => e && props.errorControl ? props.errorControl.meta.scrollElement = e : undefined
|
|
409
|
+
};
|
|
410
|
+
});
|
|
411
|
+
}
|
|
412
|
+
function DefaultLayout({
|
|
413
|
+
errorClass,
|
|
414
|
+
renderer: {
|
|
415
|
+
h,
|
|
416
|
+
renderText
|
|
417
|
+
},
|
|
418
|
+
renderError = e => e && h("div", null, h("span", {
|
|
419
|
+
className: errorClass
|
|
420
|
+
}, renderText(e))),
|
|
421
|
+
layout: {
|
|
422
|
+
controlEnd,
|
|
423
|
+
controlStart,
|
|
424
|
+
label,
|
|
425
|
+
children,
|
|
426
|
+
errorControl
|
|
427
|
+
}
|
|
428
|
+
}) {
|
|
429
|
+
var _effect = useComponentTracking();
|
|
430
|
+
try {
|
|
431
|
+
const ec = errorControl;
|
|
432
|
+
const errorText = ec && ec.touched ? ec.error : undefined;
|
|
433
|
+
return h(Fragment, null, label, controlStart, children, renderError(errorText), controlEnd);
|
|
434
|
+
} finally {
|
|
435
|
+
_effect();
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
function DefaultDisplayOnly({
|
|
440
|
+
control,
|
|
441
|
+
className,
|
|
442
|
+
emptyText,
|
|
443
|
+
schemaInterface,
|
|
444
|
+
field,
|
|
445
|
+
style,
|
|
446
|
+
renderer
|
|
447
|
+
}) {
|
|
448
|
+
var _effect = useComponentTracking();
|
|
449
|
+
try {
|
|
450
|
+
var _ref;
|
|
451
|
+
const v = control.value;
|
|
452
|
+
const text = (_ref = schemaInterface.isEmptyValue(field, v) ? emptyText : schemaInterface.textValue(field, v)) != null ? _ref : "";
|
|
453
|
+
// noinspection JSUnusedLocalSymbols
|
|
454
|
+
const h = renderer.h;
|
|
455
|
+
return h("div", {
|
|
456
|
+
style: style,
|
|
457
|
+
className: className
|
|
458
|
+
}, text);
|
|
459
|
+
} finally {
|
|
460
|
+
_effect();
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
function DefaultAccordion({
|
|
465
|
+
children,
|
|
466
|
+
accordion,
|
|
467
|
+
contentStyle,
|
|
468
|
+
contentClassName,
|
|
469
|
+
designMode,
|
|
470
|
+
iconOpenClass,
|
|
471
|
+
iconClosedClass,
|
|
472
|
+
className,
|
|
473
|
+
renderTitle = t => t,
|
|
474
|
+
renderToggler,
|
|
475
|
+
renderers,
|
|
476
|
+
titleClass,
|
|
477
|
+
useCss,
|
|
478
|
+
dataContext
|
|
479
|
+
}) {
|
|
480
|
+
var _effect = useComponentTracking();
|
|
481
|
+
try {
|
|
482
|
+
var _dataContext$dataNode;
|
|
483
|
+
const dataControl = ((_dataContext$dataNode = dataContext.dataNode) != null ? _dataContext$dataNode : dataContext.parentNode).control;
|
|
484
|
+
const open = useControl(!!accordion.defaultExpanded);
|
|
485
|
+
if (dataControl && !dataControl.meta.accordionState) {
|
|
486
|
+
dataControl.meta.accordionState = open;
|
|
487
|
+
}
|
|
488
|
+
const isOpen = open.value;
|
|
489
|
+
const fullContentStyle = isOpen || designMode ? contentStyle : _extends({}, contentStyle, {
|
|
490
|
+
display: "none"
|
|
491
|
+
});
|
|
492
|
+
const title = renderers.renderLabelText(renderTitle(accordion.title, open));
|
|
493
|
+
const toggler = renderToggler ? renderToggler(open, title) : createElement("button", {
|
|
494
|
+
className: className,
|
|
495
|
+
onClick: () => open.setValue(x => !x)
|
|
496
|
+
}, createElement("label", {
|
|
497
|
+
className: titleClass
|
|
498
|
+
}, title), createElement("i", {
|
|
499
|
+
className: clsx(isOpen ? iconOpenClass : iconClosedClass)
|
|
500
|
+
}));
|
|
501
|
+
return createElement(Fragment, null, toggler, (useCss || isOpen || designMode) && createElement("div", {
|
|
502
|
+
style: fullContentStyle,
|
|
503
|
+
className: contentClassName
|
|
504
|
+
}, children));
|
|
505
|
+
} finally {
|
|
506
|
+
_effect();
|
|
507
|
+
}
|
|
508
|
+
}
|
|
509
|
+
function getAccordionState(c) {
|
|
510
|
+
return c.meta.accordionState;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
function createTabsRenderer(options = {}) {
|
|
514
|
+
return createGroupRenderer((p, renderer) => createElement(TabsGroupRenderer, _extends({}, p, {
|
|
515
|
+
tabOptions: p.renderOptions,
|
|
516
|
+
options: options
|
|
517
|
+
})), {
|
|
518
|
+
renderType: GroupRenderType.Tabs
|
|
519
|
+
});
|
|
520
|
+
}
|
|
521
|
+
function TabsGroupRenderer({
|
|
522
|
+
formNode,
|
|
523
|
+
className,
|
|
524
|
+
options,
|
|
525
|
+
renderChild,
|
|
526
|
+
designMode,
|
|
527
|
+
tabOptions
|
|
528
|
+
}) {
|
|
529
|
+
var _effect = useComponentTracking();
|
|
530
|
+
try {
|
|
531
|
+
const tabIndex = useControl(0);
|
|
532
|
+
const {
|
|
533
|
+
tabClass,
|
|
534
|
+
labelClass,
|
|
535
|
+
tabListClass,
|
|
536
|
+
inactiveClass,
|
|
537
|
+
activeClass,
|
|
538
|
+
contentClass
|
|
539
|
+
} = options;
|
|
540
|
+
const currentTab = tabIndex.value;
|
|
541
|
+
return designMode ? createElement(Fragment, null, formNode.getChildNodes().map((x, i) => renderTabs([x], i))) : renderTabs(formNode.getChildNodes(), 0);
|
|
542
|
+
function renderTabs(tabs, key) {
|
|
543
|
+
return createElement("div", {
|
|
544
|
+
key: key,
|
|
545
|
+
className: rendererClass(className, options.className)
|
|
546
|
+
}, createElement("ul", {
|
|
547
|
+
className: rendererClass(null, tabListClass)
|
|
548
|
+
}, tabs.map((x, i) => createElement("li", {
|
|
549
|
+
key: i,
|
|
550
|
+
className: rendererClass(null, tabClass),
|
|
551
|
+
onClick: () => tabIndex.value = i
|
|
552
|
+
}, createElement("span", {
|
|
553
|
+
className: rendererClass(null, clsx(labelClass, i == currentTab ? activeClass : inactiveClass))
|
|
554
|
+
}, x.definition.title ? x.definition.title : "<untitled>")))), createElement("div", {
|
|
555
|
+
className: rendererClass(tabOptions.contentClass, contentClass)
|
|
556
|
+
}, renderChild(currentTab, tabs[currentTab])));
|
|
557
|
+
}
|
|
558
|
+
} finally {
|
|
559
|
+
_effect();
|
|
560
|
+
}
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
function createDefaultGroupRenderer(options) {
|
|
564
|
+
const tabsRenderer = createTabsRenderer(options == null ? void 0 : options.tabs);
|
|
565
|
+
const {
|
|
566
|
+
className,
|
|
567
|
+
gridStyles = defaultGridStyles,
|
|
568
|
+
defaultGridColumns = 2,
|
|
569
|
+
gridClassName,
|
|
570
|
+
standardClassName,
|
|
571
|
+
flexClassName,
|
|
572
|
+
defaultFlexGap
|
|
573
|
+
} = options != null ? options : {};
|
|
574
|
+
function defaultGridStyles({
|
|
575
|
+
columns = defaultGridColumns
|
|
576
|
+
}) {
|
|
577
|
+
return {
|
|
578
|
+
className: gridClassName,
|
|
579
|
+
style: {
|
|
580
|
+
display: "grid",
|
|
581
|
+
gridTemplateColumns: `repeat(${columns}, 1fr)`
|
|
582
|
+
}
|
|
583
|
+
};
|
|
584
|
+
}
|
|
585
|
+
function flexStyles(options) {
|
|
586
|
+
return {
|
|
587
|
+
className: flexClassName,
|
|
588
|
+
style: {
|
|
589
|
+
display: "flex",
|
|
590
|
+
gap: options.gap ? options.gap : defaultFlexGap,
|
|
591
|
+
flexDirection: options.direction ? options.direction : undefined
|
|
592
|
+
}
|
|
593
|
+
};
|
|
594
|
+
}
|
|
595
|
+
function render(props, renderer) {
|
|
596
|
+
const {
|
|
597
|
+
renderChild,
|
|
598
|
+
renderOptions,
|
|
599
|
+
formNode
|
|
600
|
+
} = props;
|
|
601
|
+
if (isTabsRenderer(renderOptions)) return tabsRenderer.render(props, renderer);
|
|
602
|
+
if (isSelectChildRenderer(renderOptions) && !props.designMode) {
|
|
603
|
+
return h(SelectChildGroupRenderer, _extends({}, props, {
|
|
604
|
+
renderOptions: renderOptions
|
|
605
|
+
}));
|
|
606
|
+
}
|
|
607
|
+
const {
|
|
608
|
+
style,
|
|
609
|
+
className: gcn
|
|
610
|
+
} = isGridRenderer(renderOptions) ? gridStyles(renderOptions) : isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : {
|
|
611
|
+
className: standardClassName
|
|
612
|
+
};
|
|
613
|
+
// noinspection JSUnusedLocalSymbols
|
|
614
|
+
const h = renderer.h;
|
|
615
|
+
return h("div", {
|
|
616
|
+
className: rendererClass(props.className, clsx(className, gcn)),
|
|
617
|
+
style: style
|
|
618
|
+
}, formNode.getChildNodes().map((c, i) => renderChild(i, c)));
|
|
619
|
+
}
|
|
620
|
+
return {
|
|
621
|
+
type: "group",
|
|
622
|
+
render
|
|
623
|
+
};
|
|
624
|
+
}
|
|
625
|
+
function SelectChildGroupRenderer(props) {
|
|
626
|
+
var _effect = useComponentTracking();
|
|
627
|
+
try {
|
|
628
|
+
const {
|
|
629
|
+
useEvalExpression,
|
|
630
|
+
renderOptions
|
|
631
|
+
} = props;
|
|
632
|
+
const dynHook = useEvalExpression(renderOptions == null ? void 0 : renderOptions.childIndexExpression, x => x == "string" ? parseInt(x) : x);
|
|
633
|
+
const Render = useTrackedComponent(p => {
|
|
634
|
+
const ctrl = dynHook.runHook(p.dataContext, dynHook.state);
|
|
635
|
+
const childIndex = ctrl == null ? void 0 : ctrl.value;
|
|
636
|
+
const childDefinitions = p.formNode.getChildNodes();
|
|
637
|
+
return createElement("div", null, typeof childIndex === "number" && childIndex < childDefinitions.length && childIndex >= 0 && p.renderChild(childIndex, childDefinitions[childIndex]));
|
|
638
|
+
}, [dynHook.deps]);
|
|
639
|
+
return createElement(Render, props);
|
|
640
|
+
} finally {
|
|
641
|
+
_effect();
|
|
642
|
+
}
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
function createDefaultVisibilityRenderer() {
|
|
646
|
+
const h = jsx;
|
|
647
|
+
return createVisibilityRenderer((props, renderer) => h(DefaultVisibility, _extends({}, props, {
|
|
648
|
+
renderer: renderer
|
|
649
|
+
})));
|
|
650
|
+
}
|
|
651
|
+
function DefaultVisibility({
|
|
652
|
+
visibility,
|
|
653
|
+
children,
|
|
654
|
+
className,
|
|
655
|
+
style,
|
|
656
|
+
divRef,
|
|
657
|
+
renderer
|
|
658
|
+
}) {
|
|
659
|
+
var _effect = useComponentTracking();
|
|
660
|
+
try {
|
|
661
|
+
const v = visibility.value;
|
|
662
|
+
useEffect(() => {
|
|
663
|
+
if (v) {
|
|
664
|
+
visibility.setValue(ex => ({
|
|
665
|
+
visible: v.visible,
|
|
666
|
+
showing: v.visible
|
|
667
|
+
}));
|
|
668
|
+
}
|
|
669
|
+
}, [v == null ? void 0 : v.visible]);
|
|
670
|
+
const h = renderer.h;
|
|
671
|
+
return v != null && v.visible ? h("div", {
|
|
672
|
+
className: className,
|
|
673
|
+
style: style,
|
|
674
|
+
ref: divRef,
|
|
675
|
+
children: children
|
|
676
|
+
}) : h(Fragment, null);
|
|
677
|
+
} finally {
|
|
678
|
+
_effect();
|
|
679
|
+
}
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
function createJsonataRenderer(className) {
|
|
683
|
+
return createDataRenderer(p => createElement(JsonataRenderer, {
|
|
684
|
+
renderOptions: p.renderOptions,
|
|
685
|
+
className: rendererClass(p.className, className),
|
|
686
|
+
dataNode: p.dataNode,
|
|
687
|
+
dataContext: p.dataContext,
|
|
688
|
+
control: p.control,
|
|
689
|
+
readonly: p.readonly
|
|
690
|
+
}), {
|
|
691
|
+
renderType: DataRenderType.Jsonata
|
|
692
|
+
});
|
|
693
|
+
}
|
|
694
|
+
function JsonataRenderer({
|
|
695
|
+
control,
|
|
696
|
+
renderOptions,
|
|
697
|
+
readonly,
|
|
698
|
+
className,
|
|
699
|
+
dataContext,
|
|
700
|
+
dataNode
|
|
701
|
+
}) {
|
|
702
|
+
var _effect = useComponentTracking();
|
|
703
|
+
try {
|
|
704
|
+
const sdn = dataNode.elementIndex != null ? dataNode : dataContext.parentNode;
|
|
705
|
+
const bindings = useComputed(() => ({
|
|
706
|
+
value: control.value,
|
|
707
|
+
readonly,
|
|
708
|
+
disabled: control.disabled,
|
|
709
|
+
formData: dataContext.formData,
|
|
710
|
+
dataPath: getJsonPath(dataNode)
|
|
711
|
+
}));
|
|
712
|
+
const rendered = useJsonataExpression(renderOptions.expression, getRootDataNode(sdn).control, getJsonPath(sdn), bindings, coerceToString);
|
|
713
|
+
return createElement("div", {
|
|
714
|
+
className: className,
|
|
715
|
+
dangerouslySetInnerHTML: {
|
|
716
|
+
__html: rendered.value
|
|
717
|
+
}
|
|
718
|
+
});
|
|
719
|
+
} finally {
|
|
720
|
+
_effect();
|
|
721
|
+
}
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
const _excluded = ["control", "field", "renderOptions"];
|
|
725
|
+
function createNullToggleRenderer() {
|
|
726
|
+
return createDataRenderer((_ref, renderers) => {
|
|
727
|
+
let {
|
|
728
|
+
control,
|
|
729
|
+
field
|
|
730
|
+
} = _ref,
|
|
731
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
732
|
+
const lastDefined = getLastDefinedValue(control);
|
|
733
|
+
if (lastDefined.current.value == null) lastDefined.value = props.definition.defaultValue;
|
|
734
|
+
const nullControl = getNullToggler(control);
|
|
735
|
+
nullControl.disabled = props.readonly;
|
|
736
|
+
return layout => {
|
|
737
|
+
return renderers.renderData(_extends({}, props, {
|
|
738
|
+
control: nullControl,
|
|
739
|
+
field: _extends({}, field, {
|
|
740
|
+
type: FieldType.Bool
|
|
741
|
+
}),
|
|
742
|
+
renderOptions: {
|
|
743
|
+
type: DataRenderType.Checkbox
|
|
744
|
+
}
|
|
745
|
+
}))(layout);
|
|
746
|
+
};
|
|
747
|
+
});
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
function createDefaultArrayDataRenderer(defaultActions) {
|
|
751
|
+
return createDataRenderer((props, renderers) => {
|
|
752
|
+
return createElement(DataArrayRenderer, {
|
|
753
|
+
dataProps: props,
|
|
754
|
+
renderers: renderers,
|
|
755
|
+
defaultActions: defaultActions
|
|
756
|
+
});
|
|
757
|
+
}, {
|
|
758
|
+
renderType: DataRenderType.Array,
|
|
759
|
+
collection: true
|
|
760
|
+
});
|
|
761
|
+
}
|
|
762
|
+
function DataArrayRenderer({
|
|
763
|
+
dataProps,
|
|
764
|
+
renderers,
|
|
765
|
+
defaultActions
|
|
766
|
+
}) {
|
|
767
|
+
var _definition$children;
|
|
768
|
+
const {
|
|
769
|
+
renderOptions,
|
|
770
|
+
control,
|
|
771
|
+
field,
|
|
772
|
+
readonly,
|
|
773
|
+
designMode,
|
|
774
|
+
required,
|
|
775
|
+
renderChild,
|
|
776
|
+
definition,
|
|
777
|
+
className,
|
|
778
|
+
style,
|
|
779
|
+
useChildVisibility,
|
|
780
|
+
dataContext,
|
|
781
|
+
formNode
|
|
782
|
+
} = dataProps;
|
|
783
|
+
const {
|
|
784
|
+
addText,
|
|
785
|
+
noAdd,
|
|
786
|
+
noRemove,
|
|
787
|
+
noReorder,
|
|
788
|
+
removeText,
|
|
789
|
+
editExternal
|
|
790
|
+
} = mergeObjects(isArrayRenderer(renderOptions) ? renderOptions : {}, defaultActions);
|
|
791
|
+
const childOptions = isArrayRenderer(renderOptions) ? renderOptions.childOptions : undefined;
|
|
792
|
+
const renderAsElement = !isCompoundField(field);
|
|
793
|
+
const childDefinition = nodeForControl(!renderAsElement ? {
|
|
794
|
+
type: ControlDefinitionType.Group,
|
|
795
|
+
children: definition.children,
|
|
796
|
+
groupOptions: {
|
|
797
|
+
type: GroupRenderType.Standard,
|
|
798
|
+
hideTitle: true
|
|
799
|
+
}
|
|
800
|
+
} : {
|
|
801
|
+
type: ControlDefinitionType.Data,
|
|
802
|
+
field: definition.field,
|
|
803
|
+
children: definition.children,
|
|
804
|
+
renderOptions: childOptions != null ? childOptions : {
|
|
805
|
+
type: DataRenderType.Standard
|
|
806
|
+
},
|
|
807
|
+
hideTitle: true
|
|
808
|
+
}, formNode.tree);
|
|
809
|
+
const visibilities = ((_definition$children = definition.children) != null ? _definition$children : []).map(x => [useChildVisibility(x, undefined, true), x]);
|
|
810
|
+
const deps = makeHookDepString(visibilities, x => x[0].deps);
|
|
811
|
+
const Entry = useTrackedComponent(RenderEntry, [deps]);
|
|
812
|
+
const arrayProps = _extends({}, createArrayActions(control.as(), field, {
|
|
813
|
+
addText,
|
|
814
|
+
removeText,
|
|
815
|
+
noAdd,
|
|
816
|
+
noRemove,
|
|
817
|
+
readonly,
|
|
818
|
+
disabled: control.disabled,
|
|
819
|
+
designMode,
|
|
820
|
+
editExternal
|
|
821
|
+
}), {
|
|
822
|
+
required,
|
|
823
|
+
renderElement: (i, wrap) => createElement(Entry, {
|
|
824
|
+
index: i,
|
|
825
|
+
renderChildElement: renderChildElement,
|
|
826
|
+
dataContext: dataContext,
|
|
827
|
+
visibilities: visibilities,
|
|
828
|
+
wrap: wrap
|
|
829
|
+
}),
|
|
830
|
+
className: className ? className : undefined,
|
|
831
|
+
style
|
|
832
|
+
}, getLengthRestrictions(definition));
|
|
833
|
+
return renderers.renderArray(arrayProps);
|
|
834
|
+
function renderChildElement(i, elementNode) {
|
|
835
|
+
var _control$elements$i$u, _control$elements;
|
|
836
|
+
return renderChild((_control$elements$i$u = (_control$elements = control.elements) == null ? void 0 : _control$elements[i].uniqueId) != null ? _control$elements$i$u : i, childDefinition, renderAsElement ? {
|
|
837
|
+
elementIndex: i
|
|
838
|
+
} : {
|
|
839
|
+
parentDataNode: elementNode
|
|
840
|
+
});
|
|
841
|
+
}
|
|
842
|
+
}
|
|
843
|
+
function RenderEntry({
|
|
844
|
+
index: i,
|
|
845
|
+
renderChildElement,
|
|
846
|
+
visibilities,
|
|
847
|
+
wrap,
|
|
848
|
+
dataContext
|
|
849
|
+
}) {
|
|
850
|
+
const elementNode = dataContext.dataNode.getChildElement(i);
|
|
851
|
+
const childVis = visibilities.map(([hook, def]) => hook.runHook(_extends({}, dataContext, {
|
|
852
|
+
parentNode: elementNode,
|
|
853
|
+
dataNode: lookupDataNode(def, elementNode)
|
|
854
|
+
}), hook.state).value);
|
|
855
|
+
const anyVisible = childVis.length == 0 || childVis.some(x => x === true);
|
|
856
|
+
if (!anyVisible) return undefined;
|
|
857
|
+
return wrap(renderChildElement(i, elementNode));
|
|
858
|
+
}
|
|
859
|
+
function createDefaultArrayRenderer(options) {
|
|
860
|
+
return {
|
|
861
|
+
render: (props, {
|
|
862
|
+
renderAction
|
|
863
|
+
}) => createElement(DefaultArrayRenderer, _extends({}, props, options, {
|
|
864
|
+
renderAction: renderAction
|
|
865
|
+
})),
|
|
866
|
+
type: "array"
|
|
867
|
+
};
|
|
868
|
+
}
|
|
869
|
+
function DefaultArrayRenderer(props) {
|
|
870
|
+
var _effect = useComponentTracking();
|
|
871
|
+
try {
|
|
872
|
+
const {
|
|
873
|
+
renderElement,
|
|
874
|
+
className,
|
|
875
|
+
removableClass,
|
|
876
|
+
childClass,
|
|
877
|
+
removableChildClass,
|
|
878
|
+
removeActionClass,
|
|
879
|
+
addActionClass,
|
|
880
|
+
arrayControl,
|
|
881
|
+
renderAction,
|
|
882
|
+
style,
|
|
883
|
+
editAction
|
|
884
|
+
} = props;
|
|
885
|
+
const {
|
|
886
|
+
addAction,
|
|
887
|
+
removeAction
|
|
888
|
+
} = applyArrayLengthRestrictions(props);
|
|
889
|
+
return createElement("div", {
|
|
890
|
+
style: style
|
|
891
|
+
}, createElement("div", {
|
|
892
|
+
className: clsx(className, removeAction && removableClass)
|
|
893
|
+
}, createElement(RenderElements, {
|
|
894
|
+
control: arrayControl
|
|
895
|
+
}, (_, x) => renderElement(x, children => removeAction || editAction ? createElement(Fragment, null, createElement("div", {
|
|
896
|
+
className: clsx(childClass, removableChildClass)
|
|
897
|
+
}, children), createElement("div", {
|
|
898
|
+
className: removeActionClass
|
|
899
|
+
}, editAction && renderAction(editAction(x)), removeAction && renderAction(removeAction(x)))) : createElement("div", {
|
|
900
|
+
className: childClass
|
|
901
|
+
}, children)))), addAction && createElement("div", {
|
|
902
|
+
className: addActionClass
|
|
903
|
+
}, renderAction(addAction)));
|
|
904
|
+
} finally {
|
|
905
|
+
_effect();
|
|
906
|
+
}
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
const inputClass = "leading-[1.5] text-surface-900 bg-[inherit] border-0 rounded-[inherit] px-3 py-2 outline-0 grow shrink-0 basis-auto focus:outline-0 focus:ring-0 focus:shadow-none";
|
|
910
|
+
function createAutocompleteRenderer(options = {}) {
|
|
911
|
+
return createDataRenderer(p => {
|
|
912
|
+
var _p$options, _p$options2;
|
|
913
|
+
return p.field.collection ? createElement(MultipleAutocomplete, {
|
|
914
|
+
options: (_p$options = p.options) != null ? _p$options : [],
|
|
915
|
+
control: p.control,
|
|
916
|
+
className: rendererClass(p.className, options.className),
|
|
917
|
+
classes: options,
|
|
918
|
+
controlClasses: p.renderOptions,
|
|
919
|
+
readOnly: p.readonly,
|
|
920
|
+
id: p.id
|
|
921
|
+
}) : createElement(SingleAutocomplete, {
|
|
922
|
+
options: (_p$options2 = p.options) != null ? _p$options2 : [],
|
|
923
|
+
control: p.control,
|
|
924
|
+
className: rendererClass(p.className, options.className),
|
|
925
|
+
classes: options,
|
|
926
|
+
controlClasses: p.renderOptions,
|
|
927
|
+
readOnly: p.readonly,
|
|
928
|
+
id: p.id
|
|
929
|
+
});
|
|
930
|
+
}, {
|
|
931
|
+
renderType: DataRenderType.Autocomplete
|
|
932
|
+
});
|
|
933
|
+
}
|
|
934
|
+
function SingleAutocomplete(_ref) {
|
|
935
|
+
var _effect = useComponentTracking();
|
|
936
|
+
try {
|
|
937
|
+
var _controlClasses$place;
|
|
938
|
+
let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
939
|
+
const {
|
|
940
|
+
id,
|
|
941
|
+
control,
|
|
942
|
+
className,
|
|
943
|
+
readOnly,
|
|
944
|
+
classes,
|
|
945
|
+
controlClasses
|
|
946
|
+
} = props;
|
|
947
|
+
const {
|
|
948
|
+
disabled
|
|
949
|
+
} = control;
|
|
950
|
+
const inputControl = useControl("");
|
|
951
|
+
const selectedOptionControl = useControl(null);
|
|
952
|
+
const listContainerClass = rendererClass(controlClasses == null ? void 0 : controlClasses.listContainerClass, classes.listContainerClass);
|
|
953
|
+
const listEntryClass = rendererClass(controlClasses == null ? void 0 : controlClasses.listEntryClass, classes.listEntryClass);
|
|
954
|
+
useControlEffect(controlValues(inputControl, selectedOptionControl), ([text, selected]) => {
|
|
955
|
+
control.value = selected ? typeof selected === "string" ? selected : selected.value : text;
|
|
956
|
+
});
|
|
957
|
+
const {
|
|
958
|
+
getRootProps,
|
|
959
|
+
getInputProps,
|
|
960
|
+
getListboxProps,
|
|
961
|
+
getOptionProps,
|
|
962
|
+
groupedOptions,
|
|
963
|
+
popupOpen,
|
|
964
|
+
focused,
|
|
965
|
+
getPopupIndicatorProps
|
|
966
|
+
} = useAutocomplete(_extends({
|
|
967
|
+
freeSolo: true,
|
|
968
|
+
multiple: false,
|
|
969
|
+
value: selectedOptionControl.value,
|
|
970
|
+
inputValue: inputControl.value,
|
|
971
|
+
getOptionLabel: v => typeof v === "string" ? v : v.name,
|
|
972
|
+
filterOptions: (o, s) => o.filter(o => {
|
|
973
|
+
const label = typeof o === "string" ? o : o.name;
|
|
974
|
+
return label.toLowerCase().includes(s.inputValue.toLowerCase());
|
|
975
|
+
}),
|
|
976
|
+
onInputChange: (_, v, reason) => {
|
|
977
|
+
inputControl.value = v;
|
|
978
|
+
if (reason === "input") selectedOptionControl.value = null;
|
|
979
|
+
},
|
|
980
|
+
onChange: (_, v, reason) => {
|
|
981
|
+
if (reason === "selectOption") {
|
|
982
|
+
selectedOptionControl.value = v;
|
|
983
|
+
}
|
|
984
|
+
}
|
|
985
|
+
}, props));
|
|
986
|
+
return createElement("div", _extends({
|
|
987
|
+
id: id,
|
|
988
|
+
className: "relative"
|
|
989
|
+
}, getRootProps()), createElement("div", {
|
|
990
|
+
className: clsx(className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50")
|
|
991
|
+
}, createElement("input", _extends({
|
|
992
|
+
type: "text"
|
|
993
|
+
}, getInputProps(), {
|
|
994
|
+
placeholder: (_controlClasses$place = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place : "",
|
|
995
|
+
className: inputClass
|
|
996
|
+
})), createElement("button", _extends({}, getPopupIndicatorProps(), {
|
|
997
|
+
disabled: disabled || readOnly,
|
|
998
|
+
className: "outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]"
|
|
999
|
+
}), createElement("li", {
|
|
1000
|
+
className: clsx("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
|
|
1001
|
+
}))), groupedOptions.length > 0 && popupOpen && createElement("ul", _extends({}, getListboxProps(), {
|
|
1002
|
+
className: listContainerClass
|
|
1003
|
+
}), groupedOptions.map((option, index) => {
|
|
1004
|
+
const optionProps = getOptionProps({
|
|
1005
|
+
option,
|
|
1006
|
+
index
|
|
1007
|
+
});
|
|
1008
|
+
return createElement("li", _extends({}, optionProps, {
|
|
1009
|
+
key: optionProps.key,
|
|
1010
|
+
className: listEntryClass
|
|
1011
|
+
}), option.name);
|
|
1012
|
+
})));
|
|
1013
|
+
} finally {
|
|
1014
|
+
_effect();
|
|
1015
|
+
}
|
|
1016
|
+
}
|
|
1017
|
+
function MultipleAutocomplete(_ref2) {
|
|
1018
|
+
var _effect2 = useComponentTracking();
|
|
1019
|
+
try {
|
|
1020
|
+
var _selectedOptionsContr, _selectedOptionsContr2, _controlClasses$place2;
|
|
1021
|
+
let props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
|
|
1022
|
+
const {
|
|
1023
|
+
id,
|
|
1024
|
+
control,
|
|
1025
|
+
className,
|
|
1026
|
+
readOnly,
|
|
1027
|
+
classes,
|
|
1028
|
+
controlClasses
|
|
1029
|
+
} = props;
|
|
1030
|
+
const {
|
|
1031
|
+
disabled
|
|
1032
|
+
} = control;
|
|
1033
|
+
const inputControl = useControl("");
|
|
1034
|
+
const selectedOptionsControl = useControl(null);
|
|
1035
|
+
const listContainerClass = rendererClass(controlClasses == null ? void 0 : controlClasses.listContainerClass, classes.listContainerClass);
|
|
1036
|
+
const listEntryClass = rendererClass(controlClasses == null ? void 0 : controlClasses.listEntryClass, classes.listEntryClass);
|
|
1037
|
+
const chipContainerClass = rendererClass(controlClasses == null ? void 0 : controlClasses.chipContainerClass, classes.chipContainerClass);
|
|
1038
|
+
const chipCloseButtonClass = rendererClass(controlClasses == null ? void 0 : controlClasses.chipCloseButtonClass, classes.chipCloseButtonClass);
|
|
1039
|
+
useControlEffect(controlValues(inputControl, selectedOptionsControl), ([text, selected]) => {
|
|
1040
|
+
var _selected$map;
|
|
1041
|
+
const selectedValues = (_selected$map = selected == null ? void 0 : selected.map(v => {
|
|
1042
|
+
return typeof v === "string" ? v : v.value;
|
|
1043
|
+
})) != null ? _selected$map : [];
|
|
1044
|
+
control.value = text ? selectedValues.concat(text) : selectedValues;
|
|
1045
|
+
});
|
|
1046
|
+
const {
|
|
1047
|
+
getRootProps,
|
|
1048
|
+
getInputProps,
|
|
1049
|
+
getListboxProps,
|
|
1050
|
+
getOptionProps,
|
|
1051
|
+
groupedOptions,
|
|
1052
|
+
popupOpen,
|
|
1053
|
+
focused,
|
|
1054
|
+
getPopupIndicatorProps
|
|
1055
|
+
} = useAutocomplete(_extends({
|
|
1056
|
+
value: (_selectedOptionsContr = selectedOptionsControl.value) != null ? _selectedOptionsContr : [],
|
|
1057
|
+
inputValue: inputControl.value,
|
|
1058
|
+
freeSolo: true,
|
|
1059
|
+
multiple: true,
|
|
1060
|
+
getOptionLabel: v => typeof v === "string" ? v : v.name,
|
|
1061
|
+
filterOptions: (o, s) => o.filter(o => {
|
|
1062
|
+
const label = typeof o === "string" ? o : o.name;
|
|
1063
|
+
return label.toLowerCase().includes(s.inputValue.toLowerCase());
|
|
1064
|
+
}),
|
|
1065
|
+
onInputChange: (_, v) => {
|
|
1066
|
+
inputControl.value = v;
|
|
1067
|
+
},
|
|
1068
|
+
onChange: (_, v, reason) => {
|
|
1069
|
+
if (reason === "selectOption" || reason === "removeOption") {
|
|
1070
|
+
selectedOptionsControl.value = v;
|
|
1071
|
+
}
|
|
1072
|
+
}
|
|
1073
|
+
}, props));
|
|
1074
|
+
return createElement("div", _extends({
|
|
1075
|
+
id: id,
|
|
1076
|
+
className: "relative"
|
|
1077
|
+
}, getRootProps()), createElement("div", {
|
|
1078
|
+
className: clsx(className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50")
|
|
1079
|
+
}, createElement("div", {
|
|
1080
|
+
className: "flex flex-1 flex-row flex-wrap"
|
|
1081
|
+
}, (_selectedOptionsContr2 = selectedOptionsControl.value) == null ? void 0 : _selectedOptionsContr2.map(v => createElement(Chip, {
|
|
1082
|
+
key: typeof v === "string" ? v : v.name,
|
|
1083
|
+
text: typeof v === "string" ? v : v.name,
|
|
1084
|
+
chipContainerClass: chipContainerClass,
|
|
1085
|
+
chipCloseButtonClass: chipCloseButtonClass,
|
|
1086
|
+
onDeleteClick: () => {
|
|
1087
|
+
const c = selectedOptionsControl.elements.find(x => x.value == v);
|
|
1088
|
+
if (c) removeElement(selectedOptionsControl, c);
|
|
1089
|
+
}
|
|
1090
|
+
})), createElement("input", _extends({
|
|
1091
|
+
type: "text"
|
|
1092
|
+
}, getInputProps(), {
|
|
1093
|
+
placeholder: (_controlClasses$place2 = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place2 : "",
|
|
1094
|
+
className: clsx(inputClass)
|
|
1095
|
+
}))), createElement("button", _extends({}, getPopupIndicatorProps(), {
|
|
1096
|
+
disabled: disabled || readOnly,
|
|
1097
|
+
className: "outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]"
|
|
1098
|
+
}), createElement("i", {
|
|
1099
|
+
className: clsx("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
|
|
1100
|
+
}))), groupedOptions.length > 0 && popupOpen && createElement("ul", _extends({}, getListboxProps(), {
|
|
1101
|
+
className: listContainerClass
|
|
1102
|
+
}), groupedOptions.map((option, index) => {
|
|
1103
|
+
const optionProps = getOptionProps({
|
|
1104
|
+
option,
|
|
1105
|
+
index
|
|
1106
|
+
});
|
|
1107
|
+
return createElement("li", _extends({}, optionProps, {
|
|
1108
|
+
key: optionProps.key,
|
|
1109
|
+
className: listEntryClass
|
|
1110
|
+
}), option.name);
|
|
1111
|
+
})));
|
|
1112
|
+
} finally {
|
|
1113
|
+
_effect2();
|
|
1114
|
+
}
|
|
1115
|
+
}
|
|
1116
|
+
function Chip({
|
|
1117
|
+
text,
|
|
1118
|
+
chipContainerClass,
|
|
1119
|
+
chipCloseButtonClass,
|
|
1120
|
+
onDeleteClick
|
|
1121
|
+
}) {
|
|
1122
|
+
var _effect3 = useComponentTracking();
|
|
1123
|
+
try {
|
|
1124
|
+
return createElement("div", {
|
|
1125
|
+
className: chipContainerClass
|
|
1126
|
+
}, text, createElement("i", {
|
|
1127
|
+
className: chipCloseButtonClass,
|
|
1128
|
+
onClick: () => {
|
|
1129
|
+
onDeleteClick == null || onDeleteClick();
|
|
1130
|
+
}
|
|
1131
|
+
}));
|
|
1132
|
+
} finally {
|
|
1133
|
+
_effect3();
|
|
1134
|
+
}
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
const RenderType = "ValueForField";
|
|
1138
|
+
const ValueForFieldExtension = {
|
|
1139
|
+
RenderOptions: {
|
|
1140
|
+
value: RenderType,
|
|
1141
|
+
name: "Value For Field",
|
|
1142
|
+
fields: buildSchema({
|
|
1143
|
+
fieldRef: stringField("Field Reference")
|
|
1144
|
+
})
|
|
1145
|
+
}
|
|
1146
|
+
};
|
|
1147
|
+
function createValueForFieldRenderer(options) {
|
|
1148
|
+
return createDataRenderer((o, renderer) => {
|
|
1149
|
+
var _schemaDataForFieldRe;
|
|
1150
|
+
const {
|
|
1151
|
+
fieldRef
|
|
1152
|
+
} = o.renderOptions;
|
|
1153
|
+
const actualFieldRef = fieldRef ? (_schemaDataForFieldRe = schemaDataForFieldRef(fieldRef, o.dataContext.parentNode)) == null || (_schemaDataForFieldRe = _schemaDataForFieldRe.control) == null ? void 0 : _schemaDataForFieldRe.value : undefined;
|
|
1154
|
+
const node = actualFieldRef ? schemaForFieldRef(actualFieldRef, options.schema) : undefined;
|
|
1155
|
+
return node ? createElement(ValueForField, {
|
|
1156
|
+
renderer: renderer,
|
|
1157
|
+
schema: node,
|
|
1158
|
+
control: o.control
|
|
1159
|
+
}) : createElement(Fragment, null, actualFieldRef ? "No schema node for " + actualFieldRef : "");
|
|
1160
|
+
}, {
|
|
1161
|
+
renderType: RenderType
|
|
1162
|
+
});
|
|
1163
|
+
}
|
|
1164
|
+
function ValueForField({
|
|
1165
|
+
schema,
|
|
1166
|
+
renderer,
|
|
1167
|
+
control
|
|
1168
|
+
}) {
|
|
1169
|
+
var _effect = useComponentTracking();
|
|
1170
|
+
try {
|
|
1171
|
+
const value = useControl({
|
|
1172
|
+
default: undefined
|
|
1173
|
+
}, undefined, e => setFields(e, {
|
|
1174
|
+
default: control
|
|
1175
|
+
}));
|
|
1176
|
+
const [controls, rootSchema] = useMemo(() => {
|
|
1177
|
+
const rootSchema = rootSchemaNode([_extends({}, schema.field, {
|
|
1178
|
+
field: "default",
|
|
1179
|
+
required: false,
|
|
1180
|
+
notNullable: false,
|
|
1181
|
+
onlyForTypes: null,
|
|
1182
|
+
defaultValue: undefined
|
|
1183
|
+
})]);
|
|
1184
|
+
return [addMissingControlsForSchema(rootSchema, []), rootSchema];
|
|
1185
|
+
}, [schema]);
|
|
1186
|
+
const Render = useControlRendererComponent(groupedControl(controls), renderer, {
|
|
1187
|
+
disabled: control.disabled
|
|
1188
|
+
}, makeSchemaDataNode(rootSchema, value));
|
|
1189
|
+
return createElement(Render, null);
|
|
1190
|
+
} finally {
|
|
1191
|
+
_effect();
|
|
1192
|
+
}
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
function createOptionalAdornment(options = {}) {
|
|
1196
|
+
return createAdornmentRenderer((props, renderers) => {
|
|
1197
|
+
var _dataContext$dataNode, _dataContext$dataNode2;
|
|
1198
|
+
const {
|
|
1199
|
+
dataContext
|
|
1200
|
+
} = props;
|
|
1201
|
+
const dataControl = (_dataContext$dataNode = (_dataContext$dataNode2 = dataContext.dataNode) == null ? void 0 : _dataContext$dataNode2.control) != null ? _dataContext$dataNode : newControl(undefined);
|
|
1202
|
+
const adornment = props.adornment;
|
|
1203
|
+
const editing = getIsEditing(dataControl);
|
|
1204
|
+
const isEditing = editing.value;
|
|
1205
|
+
const nullToggler = getNullToggler(dataControl);
|
|
1206
|
+
if (isEditing === undefined && adornment.editSelectable) editing.value = false;
|
|
1207
|
+
dataControl.disabled = !isEditing || !!(adornment.allowNull && !nullToggler.value);
|
|
1208
|
+
return {
|
|
1209
|
+
apply: rl => {
|
|
1210
|
+
var _ref, _adornment$placement;
|
|
1211
|
+
if (props.formOptions.readonly) return rl;
|
|
1212
|
+
if (!options.hideEdit && adornment.editSelectable) appendMarkupAt((_ref = (_adornment$placement = adornment.placement) != null ? _adornment$placement : options.defaultPlacement) != null ? _ref : AdornmentPlacement.LabelStart, createElement(Fcheckbox$1, {
|
|
1213
|
+
control: editing,
|
|
1214
|
+
className: options.checkClass
|
|
1215
|
+
}))(rl);
|
|
1216
|
+
wrapMarkup("children", children => options.customRender ? options.customRender({
|
|
1217
|
+
allValues: getAllValues(dataControl),
|
|
1218
|
+
editing,
|
|
1219
|
+
children,
|
|
1220
|
+
adornment,
|
|
1221
|
+
nullToggler,
|
|
1222
|
+
dataContext,
|
|
1223
|
+
options
|
|
1224
|
+
}) : createElement(OptionalEditRenderer, {
|
|
1225
|
+
children: children,
|
|
1226
|
+
options: options,
|
|
1227
|
+
editing: editing.as(),
|
|
1228
|
+
adornment: adornment,
|
|
1229
|
+
dataControl: dataControl
|
|
1230
|
+
}))(rl);
|
|
1231
|
+
},
|
|
1232
|
+
priority: 0,
|
|
1233
|
+
adornment
|
|
1234
|
+
};
|
|
1235
|
+
}, {
|
|
1236
|
+
adornmentType: ControlAdornmentType.Optional
|
|
1237
|
+
});
|
|
1238
|
+
}
|
|
1239
|
+
function OptionalEditRenderer({
|
|
1240
|
+
children,
|
|
1241
|
+
options,
|
|
1242
|
+
adornment,
|
|
1243
|
+
editing,
|
|
1244
|
+
dataControl
|
|
1245
|
+
}) {
|
|
1246
|
+
var _effect = useComponentTracking();
|
|
1247
|
+
try {
|
|
1248
|
+
var _options$setNullText, _options$multiValuesT;
|
|
1249
|
+
const nullToggler = getNullToggler(dataControl);
|
|
1250
|
+
const allValues = getAllValues(dataControl);
|
|
1251
|
+
const multipleValues = allValues.value.length > 1;
|
|
1252
|
+
const nullEdit = adornment.allowNull ? createElement("div", {
|
|
1253
|
+
className: options.nullWrapperClass
|
|
1254
|
+
}, createElement(Fcheckbox$1, {
|
|
1255
|
+
control: nullToggler,
|
|
1256
|
+
className: options.checkClass,
|
|
1257
|
+
notValue: true
|
|
1258
|
+
}), createElement("span", null, (_options$setNullText = options.setNullText) != null ? _options$setNullText : "Null")) : undefined;
|
|
1259
|
+
return createElement("div", {
|
|
1260
|
+
className: options.className
|
|
1261
|
+
}, multipleValues && editing.value === false ? createElement("div", {
|
|
1262
|
+
className: options.multiValuesClass
|
|
1263
|
+
}, (_options$multiValuesT = options.multiValuesText) != null ? _options$multiValuesT : "Differing values") : createElement("div", {
|
|
1264
|
+
className: options.childWrapperClass
|
|
1265
|
+
}, nullEdit, children));
|
|
1266
|
+
} finally {
|
|
1267
|
+
_effect();
|
|
1268
|
+
}
|
|
1269
|
+
}
|
|
1270
|
+
|
|
1271
|
+
function createMultilineFieldRenderer(className) {
|
|
1272
|
+
return createDataRenderer(p => createElement(MultilineTextfield, _extends({}, p, {
|
|
1273
|
+
className: rendererClass(p.className, className)
|
|
1274
|
+
})));
|
|
1275
|
+
}
|
|
1276
|
+
function MultilineTextfield({
|
|
1277
|
+
control,
|
|
1278
|
+
className
|
|
1279
|
+
}) {
|
|
1280
|
+
var _effect = useComponentTracking();
|
|
1281
|
+
try {
|
|
1282
|
+
const codeRef = useRef(null);
|
|
1283
|
+
useControlEffect(() => control.value, v => {
|
|
1284
|
+
const c = codeRef.current;
|
|
1285
|
+
if (c && c.textContent !== v) {
|
|
1286
|
+
c.textContent = v;
|
|
1287
|
+
}
|
|
1288
|
+
}, true);
|
|
1289
|
+
return createElement("code", {
|
|
1290
|
+
contentEditable: !control.disabled,
|
|
1291
|
+
className: className,
|
|
1292
|
+
onInput: t => control.value = t.currentTarget.textContent,
|
|
1293
|
+
ref: codeRef
|
|
1294
|
+
});
|
|
1295
|
+
} finally {
|
|
1296
|
+
_effect();
|
|
1297
|
+
}
|
|
1298
|
+
}
|
|
1299
|
+
|
|
1300
|
+
function createArrayElementRenderer(options = {}) {
|
|
1301
|
+
return createDataRenderer((props, formRenderer) => createElement(ArrayElementRenderer, {
|
|
1302
|
+
dataProps: props,
|
|
1303
|
+
options: options,
|
|
1304
|
+
formRenderer: formRenderer,
|
|
1305
|
+
renderOptions: props.renderOptions
|
|
1306
|
+
}), {
|
|
1307
|
+
renderType: DataRenderType.ArrayElement
|
|
1308
|
+
});
|
|
1309
|
+
}
|
|
1310
|
+
function ArrayElementRenderer({
|
|
1311
|
+
dataProps,
|
|
1312
|
+
options,
|
|
1313
|
+
formRenderer,
|
|
1314
|
+
renderOptions
|
|
1315
|
+
}) {
|
|
1316
|
+
var _effect = useComponentTracking();
|
|
1317
|
+
try {
|
|
1318
|
+
const {
|
|
1319
|
+
control,
|
|
1320
|
+
formNode,
|
|
1321
|
+
renderChild,
|
|
1322
|
+
designMode
|
|
1323
|
+
} = dataProps;
|
|
1324
|
+
const extData = getExternalEditData(control);
|
|
1325
|
+
const overlayState = useOverlayTriggerState({
|
|
1326
|
+
isOpen: true,
|
|
1327
|
+
onOpenChange: () => {
|
|
1328
|
+
extData.value = undefined;
|
|
1329
|
+
}
|
|
1330
|
+
});
|
|
1331
|
+
if (designMode || extData.value !== undefined) {
|
|
1332
|
+
const parentDataNode = makeSchemaDataNode(dataProps.dataNode.schema, extData.fields.data);
|
|
1333
|
+
const elementGroup = nodeForControl({
|
|
1334
|
+
type: ControlDefinitionType.Group,
|
|
1335
|
+
children: formNode.definition.children,
|
|
1336
|
+
groupOptions: {
|
|
1337
|
+
type: GroupRenderType.Standard,
|
|
1338
|
+
hideTitle: true
|
|
1339
|
+
}
|
|
1340
|
+
}, formNode.tree);
|
|
1341
|
+
const editContent = createElement("div", {
|
|
1342
|
+
className: rendererClass(dataProps.className, options.className)
|
|
1343
|
+
}, renderChild("", elementGroup, {
|
|
1344
|
+
parentDataNode,
|
|
1345
|
+
elementIndex: 0
|
|
1346
|
+
}), createElement("div", {
|
|
1347
|
+
className: options.actionsClass
|
|
1348
|
+
}, createElement(RenderElements, {
|
|
1349
|
+
control: extData.fields.actions
|
|
1350
|
+
}, c => formRenderer.renderAction(applyValidation(c.value)))));
|
|
1351
|
+
if (renderOptions.showInline || designMode) return editContent;
|
|
1352
|
+
return createElement(Modal, {
|
|
1353
|
+
state: overlayState
|
|
1354
|
+
}, createElement(Dialog, {
|
|
1355
|
+
children: editContent
|
|
1356
|
+
}));
|
|
1357
|
+
function runValidation(onClick) {
|
|
1358
|
+
let hasErrors = false;
|
|
1359
|
+
visitFormDataInContext(parentDataNode, elementGroup, validationVisitor(() => {
|
|
1360
|
+
hasErrors = true;
|
|
1361
|
+
}));
|
|
1362
|
+
if (!hasErrors) onClick();
|
|
1363
|
+
}
|
|
1364
|
+
function applyValidation({
|
|
1365
|
+
action,
|
|
1366
|
+
dontValidate
|
|
1367
|
+
}) {
|
|
1368
|
+
return dontValidate ? action : _extends({}, action, {
|
|
1369
|
+
onClick: () => runValidation(action.onClick)
|
|
1370
|
+
});
|
|
1371
|
+
}
|
|
1372
|
+
} else return createElement(Fragment, null);
|
|
1373
|
+
} finally {
|
|
1374
|
+
_effect();
|
|
1375
|
+
}
|
|
1376
|
+
}
|
|
1377
|
+
|
|
1378
|
+
function createButtonActionRenderer(actionId, options = {}) {
|
|
1379
|
+
return createActionRenderer(actionId, ({
|
|
1380
|
+
onClick,
|
|
1381
|
+
actionText,
|
|
1382
|
+
className,
|
|
1383
|
+
style,
|
|
1384
|
+
actionId,
|
|
1385
|
+
actionData,
|
|
1386
|
+
disabled
|
|
1387
|
+
}, renderer) => {
|
|
1388
|
+
var _options$renderConten;
|
|
1389
|
+
const h = renderer.h;
|
|
1390
|
+
return h("button", {
|
|
1391
|
+
className: rendererClass(className, options.className),
|
|
1392
|
+
disabled: disabled,
|
|
1393
|
+
style: style,
|
|
1394
|
+
onClick: onClick
|
|
1395
|
+
}, (_options$renderConten = options.renderContent == null ? void 0 : options.renderContent(actionText, actionId, actionData)) != null ? _options$renderConten : renderer.renderText(actionText));
|
|
1396
|
+
});
|
|
1397
|
+
}
|
|
1398
|
+
const DefaultBoolOptions = [{
|
|
1399
|
+
name: "Yes",
|
|
1400
|
+
value: true
|
|
1401
|
+
}, {
|
|
1402
|
+
name: "No",
|
|
1403
|
+
value: false
|
|
1404
|
+
}];
|
|
1405
|
+
function createDefaultDataRenderer(options = {}) {
|
|
1406
|
+
var _options$checkOptions, _options$radioOptions, _options$checkListOpt;
|
|
1407
|
+
const h = React.createElement;
|
|
1408
|
+
const jsonataRenderer = createJsonataRenderer(options.jsonataClass);
|
|
1409
|
+
const nullToggler = createNullToggleRenderer();
|
|
1410
|
+
const multilineRenderer = createMultilineFieldRenderer(options.multilineClass);
|
|
1411
|
+
const checkboxRenderer = createCheckboxRenderer((_options$checkOptions = options.checkOptions) != null ? _options$checkOptions : options.checkboxOptions);
|
|
1412
|
+
const selectRenderer = createSelectRenderer(options.selectOptions);
|
|
1413
|
+
const radioRenderer = createRadioRenderer((_options$radioOptions = options.radioOptions) != null ? _options$radioOptions : options.checkOptions);
|
|
1414
|
+
const checkListRenderer = createCheckListRenderer((_options$checkListOpt = options.checkListOptions) != null ? _options$checkListOpt : options.checkOptions);
|
|
1415
|
+
const arrayElementRenderer = createArrayElementRenderer(options.arrayElementOptions);
|
|
1416
|
+
const {
|
|
1417
|
+
inputClass,
|
|
1418
|
+
booleanOptions,
|
|
1419
|
+
optionRenderer,
|
|
1420
|
+
displayOnlyClass,
|
|
1421
|
+
defaultEmptyText
|
|
1422
|
+
} = _extends({
|
|
1423
|
+
optionRenderer: selectRenderer,
|
|
1424
|
+
booleanOptions: DefaultBoolOptions
|
|
1425
|
+
}, options);
|
|
1426
|
+
const arrayRenderer = createDefaultArrayDataRenderer(options.arrayOptions);
|
|
1427
|
+
const autocompleteRenderer = createAutocompleteRenderer(options.autocompleteOptions);
|
|
1428
|
+
return createDataRenderer((props, renderers) => {
|
|
1429
|
+
const {
|
|
1430
|
+
field
|
|
1431
|
+
} = props;
|
|
1432
|
+
const fieldType = field.type;
|
|
1433
|
+
const renderOptions = props.renderOptions;
|
|
1434
|
+
let renderType = renderOptions.type;
|
|
1435
|
+
if (field.collection && props.elementIndex == null && (renderType == DataRenderType.Standard || renderType == DataRenderType.Array || renderType == DataRenderType.ArrayElement)) {
|
|
1436
|
+
if (renderType == DataRenderType.ArrayElement) return arrayElementRenderer.render(props, renderers);
|
|
1437
|
+
return arrayRenderer.render(props, renderers);
|
|
1438
|
+
}
|
|
1439
|
+
if (fieldType === FieldType.Compound) {
|
|
1440
|
+
var _ref;
|
|
1441
|
+
const groupOptions = (_ref = isDataGroupRenderer(renderOptions) ? renderOptions.groupOptions : undefined) != null ? _ref : {
|
|
1442
|
+
type: "Standard",
|
|
1443
|
+
hideTitle: true
|
|
1444
|
+
};
|
|
1445
|
+
return renderers.renderGroup(_extends({}, props, {
|
|
1446
|
+
renderOptions: groupOptions
|
|
1447
|
+
}));
|
|
1448
|
+
}
|
|
1449
|
+
if (props.displayOnly || isDisplayOnlyRenderer(renderOptions)) return p => {
|
|
1450
|
+
return _extends({}, p, {
|
|
1451
|
+
className: "@ " + rendererClass(p.className, displayOnlyClass),
|
|
1452
|
+
children: h(DefaultDisplayOnly, {
|
|
1453
|
+
field: props.field,
|
|
1454
|
+
schemaInterface: props.dataContext.schemaInterface,
|
|
1455
|
+
control: props.control,
|
|
1456
|
+
className: props.className,
|
|
1457
|
+
style: props.style,
|
|
1458
|
+
renderer: renderers,
|
|
1459
|
+
emptyText: isDisplayOnlyRenderer(renderOptions) && renderOptions.emptyText ? renderOptions.emptyText : defaultEmptyText
|
|
1460
|
+
})
|
|
1461
|
+
});
|
|
1462
|
+
};
|
|
1463
|
+
const isBool = fieldType === FieldType.Bool;
|
|
1464
|
+
if (booleanOptions != null && isBool && props.options == null) {
|
|
1465
|
+
return renderers.renderData(_extends({}, props, {
|
|
1466
|
+
options: booleanOptions
|
|
1467
|
+
}));
|
|
1468
|
+
}
|
|
1469
|
+
if (renderType === DataRenderType.Standard && hasOptions(props)) {
|
|
1470
|
+
return optionRenderer.render(props, renderers);
|
|
1471
|
+
}
|
|
1472
|
+
switch (renderType) {
|
|
1473
|
+
case DataRenderType.NullToggle:
|
|
1474
|
+
return nullToggler.render(props, renderers);
|
|
1475
|
+
case DataRenderType.CheckList:
|
|
1476
|
+
return checkListRenderer.render(props, renderers);
|
|
1477
|
+
case DataRenderType.Dropdown:
|
|
1478
|
+
return selectRenderer.render(props, renderers);
|
|
1479
|
+
case DataRenderType.Radio:
|
|
1480
|
+
return radioRenderer.render(props, renderers);
|
|
1481
|
+
case DataRenderType.Checkbox:
|
|
1482
|
+
return checkboxRenderer.render(props, renderers);
|
|
1483
|
+
case DataRenderType.Jsonata:
|
|
1484
|
+
return jsonataRenderer.render(props, renderers);
|
|
1485
|
+
case DataRenderType.Autocomplete:
|
|
1486
|
+
return autocompleteRenderer.render(props, renderers);
|
|
1487
|
+
}
|
|
1488
|
+
if (fieldType == FieldType.Any) {
|
|
1489
|
+
var _field$displayName;
|
|
1490
|
+
return h(Fragment, null, "Can't render field: ", (_field$displayName = field.displayName) != null ? _field$displayName : field.field, " (", renderType, ")");
|
|
1491
|
+
}
|
|
1492
|
+
if (isTextfieldRenderer(renderOptions) && renderOptions.multiline) return multilineRenderer.render(props, renderers);
|
|
1493
|
+
const placeholder = isTextfieldRenderer(renderOptions) ? renderOptions.placeholder : undefined;
|
|
1494
|
+
return h(ControlInput, {
|
|
1495
|
+
className: rendererClass(props.className, inputClass),
|
|
1496
|
+
style: props.style,
|
|
1497
|
+
id: props.id,
|
|
1498
|
+
readOnly: props.readonly,
|
|
1499
|
+
control: props.control,
|
|
1500
|
+
placeholder: placeholder != null ? placeholder : undefined,
|
|
1501
|
+
convert: createInputConversion(props.field.type),
|
|
1502
|
+
renderer: renderers
|
|
1503
|
+
});
|
|
1504
|
+
});
|
|
1505
|
+
}
|
|
1506
|
+
function createDefaultAdornmentRenderer(options = {}) {
|
|
1507
|
+
const optional = createOptionalAdornment(options.optional);
|
|
1508
|
+
return {
|
|
1509
|
+
type: "adornment",
|
|
1510
|
+
render: (props, renderers) => {
|
|
1511
|
+
if (isOptionalAdornment(props.adornment)) {
|
|
1512
|
+
return optional.render(props, renderers);
|
|
1513
|
+
}
|
|
1514
|
+
const {
|
|
1515
|
+
adornment,
|
|
1516
|
+
designMode,
|
|
1517
|
+
dataContext,
|
|
1518
|
+
useExpr
|
|
1519
|
+
} = props;
|
|
1520
|
+
return {
|
|
1521
|
+
apply: rl => {
|
|
1522
|
+
if (isSetFieldAdornment(adornment) && useExpr) {
|
|
1523
|
+
const hook = useExpr(adornment.expression, x => x);
|
|
1524
|
+
const dynamicHooks = useDynamicHooks({
|
|
1525
|
+
value: hook
|
|
1526
|
+
});
|
|
1527
|
+
const SetFieldWrapper = useTrackedComponent(setFieldWrapper, [dynamicHooks]);
|
|
1528
|
+
return wrapLayout(x => createElement(SetFieldWrapper, {
|
|
1529
|
+
children: x,
|
|
1530
|
+
parentContext: dataContext,
|
|
1531
|
+
adornment: adornment
|
|
1532
|
+
}))(rl);
|
|
1533
|
+
function setFieldWrapper({
|
|
1534
|
+
children,
|
|
1535
|
+
adornment,
|
|
1536
|
+
parentContext
|
|
1537
|
+
}) {
|
|
1538
|
+
const {
|
|
1539
|
+
value
|
|
1540
|
+
} = dynamicHooks(parentContext);
|
|
1541
|
+
const fieldNode = schemaDataForFieldRef(adornment.field, parentContext.parentNode);
|
|
1542
|
+
const otherField = fieldNode.control;
|
|
1543
|
+
const always = !adornment.defaultOnly;
|
|
1544
|
+
useControlEffect(() => [value == null ? void 0 : value.value, (otherField == null ? void 0 : otherField.value) == null], ([v]) => {
|
|
1545
|
+
otherField == null || otherField.setValue(x => always || x == null ? v : x);
|
|
1546
|
+
}, true);
|
|
1547
|
+
return children;
|
|
1548
|
+
}
|
|
1549
|
+
}
|
|
1550
|
+
if (isIconAdornment(adornment)) {
|
|
1551
|
+
var _adornment$placement;
|
|
1552
|
+
return appendMarkupAt((_adornment$placement = adornment.placement) != null ? _adornment$placement : AdornmentPlacement.ControlStart, createElement("i", {
|
|
1553
|
+
className: adornment.iconClass
|
|
1554
|
+
}))(rl);
|
|
1555
|
+
}
|
|
1556
|
+
if (isAccordionAdornment(adornment)) {
|
|
1557
|
+
return wrapLayout(x => createElement(DefaultAccordion, _extends({
|
|
1558
|
+
renderers: renderers,
|
|
1559
|
+
children: x,
|
|
1560
|
+
accordion: adornment,
|
|
1561
|
+
contentStyle: rl.style,
|
|
1562
|
+
contentClassName: rl.className,
|
|
1563
|
+
designMode: designMode,
|
|
1564
|
+
dataContext: dataContext
|
|
1565
|
+
}, options.accordion)))(rl);
|
|
1566
|
+
}
|
|
1567
|
+
},
|
|
1568
|
+
priority: 0,
|
|
1569
|
+
adornment
|
|
1570
|
+
};
|
|
1571
|
+
}
|
|
1572
|
+
};
|
|
1573
|
+
}
|
|
1574
|
+
function createDefaultLabelRenderer(options) {
|
|
1575
|
+
const {
|
|
1576
|
+
className,
|
|
1577
|
+
groupLabelClass,
|
|
1578
|
+
controlLabelClass,
|
|
1579
|
+
labelContainer
|
|
1580
|
+
} = _extends({
|
|
1581
|
+
labelContainer: c => c
|
|
1582
|
+
}, options);
|
|
1583
|
+
return {
|
|
1584
|
+
render: (props, labelStart, labelEnd, renderers) => {
|
|
1585
|
+
var _options$requiredElem;
|
|
1586
|
+
const h = renderers.h;
|
|
1587
|
+
const requiredElement = (_options$requiredElem = options == null ? void 0 : options.requiredElement) != null ? _options$requiredElem : h => h("span", null, " *");
|
|
1588
|
+
if (props.type == LabelType.Text) return renderers.renderText(props.label);
|
|
1589
|
+
return labelContainer(h(Fragment, null, h("label", {
|
|
1590
|
+
htmlFor: props.forId,
|
|
1591
|
+
className: rendererClass(props.className, clsx(className, props.type === LabelType.Group && groupLabelClass, props.type === LabelType.Control && controlLabelClass))
|
|
1592
|
+
}, labelStart, renderers.renderLabelText(props.label), props.required && requiredElement(h)), labelEnd));
|
|
1593
|
+
},
|
|
1594
|
+
type: "label"
|
|
1595
|
+
};
|
|
1596
|
+
}
|
|
1597
|
+
function createDefaultRenderers(options = {}) {
|
|
1598
|
+
var _options$renderText, _options$h;
|
|
1599
|
+
return {
|
|
1600
|
+
data: createDefaultDataRenderer(options.data),
|
|
1601
|
+
display: createDefaultDisplayRenderer(options.display),
|
|
1602
|
+
action: createButtonActionRenderer(undefined, options.action),
|
|
1603
|
+
array: createDefaultArrayRenderer(options.array),
|
|
1604
|
+
group: createDefaultGroupRenderer(options.group),
|
|
1605
|
+
label: createDefaultLabelRenderer(options.label),
|
|
1606
|
+
adornment: createDefaultAdornmentRenderer(options.adornment),
|
|
1607
|
+
renderLayout: createDefaultLayoutRenderer(options.layout),
|
|
1608
|
+
visibility: createDefaultVisibilityRenderer(),
|
|
1609
|
+
renderText: (_options$renderText = options.renderText) != null ? _options$renderText : x => x,
|
|
1610
|
+
h: (_options$h = options.h) != null ? _options$h : createElement
|
|
1611
|
+
};
|
|
1612
|
+
}
|
|
1613
|
+
function createClassStyledRenderers() {
|
|
1614
|
+
return createDefaultRenderers({
|
|
1615
|
+
layout: {
|
|
1616
|
+
className: "control"
|
|
1617
|
+
},
|
|
1618
|
+
group: {
|
|
1619
|
+
className: "group"
|
|
1620
|
+
},
|
|
1621
|
+
array: {
|
|
1622
|
+
className: "control-array"
|
|
1623
|
+
},
|
|
1624
|
+
action: {
|
|
1625
|
+
className: "action"
|
|
1626
|
+
},
|
|
1627
|
+
data: {
|
|
1628
|
+
inputClass: "data"
|
|
1629
|
+
},
|
|
1630
|
+
display: {
|
|
1631
|
+
htmlClassName: "html",
|
|
1632
|
+
textClassName: "text"
|
|
1633
|
+
}
|
|
1634
|
+
});
|
|
1635
|
+
}
|
|
1636
|
+
|
|
1637
|
+
const defaultTailwindTheme = {
|
|
1638
|
+
label: {
|
|
1639
|
+
groupLabelClass: "font-bold",
|
|
1640
|
+
requiredElement: h => h("span", {
|
|
1641
|
+
className: "text-red-500"
|
|
1642
|
+
}, " *")
|
|
1643
|
+
},
|
|
1644
|
+
array: {
|
|
1645
|
+
removableClass: "grid grid-cols-[1fr_auto] items-center gap-x-2",
|
|
1646
|
+
childClass: "grow my-2",
|
|
1647
|
+
addActionClass: "my-2",
|
|
1648
|
+
removeActionClass: "flex gap-2"
|
|
1649
|
+
},
|
|
1650
|
+
group: {
|
|
1651
|
+
standardClassName: "flex flex-col gap-4",
|
|
1652
|
+
gridClassName: "gap-x-2 gap-y-4",
|
|
1653
|
+
flexClassName: "gap-2",
|
|
1654
|
+
tabs: {
|
|
1655
|
+
className: "",
|
|
1656
|
+
tabListClass: "flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400",
|
|
1657
|
+
tabClass: "me-2",
|
|
1658
|
+
labelClass: "inline-flex items-center justify-center p-4 border-b-2 group",
|
|
1659
|
+
inactiveClass: "border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 cursor-pointer",
|
|
1660
|
+
activeClass: "text-blue-600 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500",
|
|
1661
|
+
contentClass: "my-2"
|
|
1662
|
+
}
|
|
1663
|
+
},
|
|
1664
|
+
action: {
|
|
1665
|
+
className: "bg-primary-500 rounded-lg p-3 text-white"
|
|
1666
|
+
},
|
|
1667
|
+
layout: {
|
|
1668
|
+
className: "flex flex-col",
|
|
1669
|
+
errorClass: "text-sm text-red-500"
|
|
1670
|
+
},
|
|
1671
|
+
data: {
|
|
1672
|
+
displayOnlyClass: "flex flex-row items-center gap-2",
|
|
1673
|
+
checkOptions: {
|
|
1674
|
+
className: "flex items-center gap-4",
|
|
1675
|
+
entryClass: "flex gap-1 items-center"
|
|
1676
|
+
},
|
|
1677
|
+
selectOptions: {
|
|
1678
|
+
emptyText: "<select>"
|
|
1679
|
+
},
|
|
1680
|
+
arrayElementOptions: {
|
|
1681
|
+
actionsClass: "my-2 flex gap-2"
|
|
1682
|
+
},
|
|
1683
|
+
multilineClass: "border p-2 outline-0 whitespace-pre-wrap",
|
|
1684
|
+
autocompleteOptions: {
|
|
1685
|
+
className: "w-full flex gap-[5px] pr-[5px] overflow-hidden rounded-lg bg-white border border-solid border-gray-200 hover:border-primary-400 focus-visible:outline-0 shadow-[0_2px_4px_rgb(0_0_0_/_0.05)] min-h-[48px] py-1",
|
|
1686
|
+
listContainerClass: "absolute w-full text-sm box-border p-1.5 my-3 mx-0 min-w-[120px] rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] bg-white border border-solid border-surface-200 text-surface-900 shadow-[0_4px_30px_transparent] shadow-surface-200",
|
|
1687
|
+
listEntryClass: "list-none p-2 rounded-lg cursor-default last-of-type:border-b-0 hover:cursor-pointer hover:bg-primary-100 aria-selected:bg-primary-200 aria-selected:text-primary-900 focused:bg-surface-100 focus-visible:bg-surface-100 focused:text-surface-900 focus-visible:text-surface-900 focus-visible:shadow-[0_0_0_3px_transparent] focus-visible:shadow-primary-200 focused:aria-selected:bg-primary-200 focus-visible:aria-selected:bg-primary-200 focused:aria-selected:text-primary-900 focus-visible:aria-selected:text-primary-900",
|
|
1688
|
+
chipContainerClass: "flex flex-row items-center px-3 py-1 rounded-full bg-surface-100 m-1 gap-2 truncate",
|
|
1689
|
+
chipCloseButtonClass: "fa-solid fa-xmark p-1 bg-surface-300 rounded-full min-w-[24px] flex justify-center text-surface-50 hover:bg-surface-400 hover:text-surface-100 hover:cursor-pointer"
|
|
1690
|
+
}
|
|
1691
|
+
},
|
|
1692
|
+
adornment: {
|
|
1693
|
+
accordion: {
|
|
1694
|
+
className: "flex items-center gap-2 my-2",
|
|
1695
|
+
titleClass: "cursor-pointer",
|
|
1696
|
+
iconOpenClass: "fa fa-chevron-up",
|
|
1697
|
+
iconClosedClass: "fa fa-chevron-down"
|
|
1698
|
+
},
|
|
1699
|
+
optional: {
|
|
1700
|
+
checkClass: "m-2",
|
|
1701
|
+
className: "flex items-center gap-2 w-full",
|
|
1702
|
+
multiValuesClass: "italic",
|
|
1703
|
+
childWrapperClass: "grow"
|
|
1704
|
+
}
|
|
1705
|
+
}
|
|
1706
|
+
};
|
|
1707
|
+
|
|
1708
|
+
export { CheckButtons, ControlInput, DataArrayRenderer, DefaultAccordion, DefaultArrayRenderer, DefaultBoolOptions, DefaultDisplay, DefaultDisplayOnly, DefaultLayout, DefaultVisibility, Fcheckbox, JsonataRenderer, OptionalEditRenderer, SelectDataRenderer, ValueForFieldExtension, createAutocompleteRenderer, createButtonActionRenderer, createCheckListRenderer, createCheckboxRenderer, createClassStyledRenderers, createDefaultAdornmentRenderer, createDefaultArrayDataRenderer, createDefaultArrayRenderer, createDefaultDataRenderer, createDefaultDisplayRenderer, createDefaultGroupRenderer, createDefaultLabelRenderer, createDefaultLayoutRenderer, createDefaultRenderers, createDefaultVisibilityRenderer, createInputConversion, createJsonataRenderer, createNullToggleRenderer, createOptionalAdornment, createRadioRenderer, createSelectConversion, createSelectRenderer, createValueForFieldRenderer, defaultTailwindTheme, getAccordionState, setIncluded };
|
|
2
1709
|
//# sourceMappingURL=index.js.map
|