@kbgarcia8/react-dynamic-form 1.1.27 → 1.1.29
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NestedEditableOption.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/NestedEditableOption/NestedEditableOption.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGzE,QAAA,MAAM,oBAAoB,GAAI,uIAS5B,yBAAyB,
|
|
1
|
+
{"version":3,"file":"NestedEditableOption.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/NestedEditableOption/NestedEditableOption.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGzE,QAAA,MAAM,oBAAoB,GAAI,uIAS5B,yBAAyB,4CA8B1B,CAAA;AAED,eAAe,oBAAoB,CAAC"}
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
display: flex;
|
|
40
40
|
align-items: center;
|
|
41
41
|
justify-content: center;
|
|
42
|
-
`,f=({onClick:a,id:
|
|
42
|
+
`,f=({onClick:a,id:i,buttonType:s,source:o,svg:m,alt:r="alt-button-icon",text:d="",className:b="",dataAttributes:h={}})=>e.jsx(J,{onClick:a,id:i,type:s,className:b,...h,children:e.jsxs(K,{className:"button-icon-text-space",children:[o?e.jsx(Q,{src:o,alt:r}):m||"",d&&e.jsx(V,{id:i,children:d})]})}),X=c.div`
|
|
43
43
|
display: flex;
|
|
44
44
|
flex-direction: column;
|
|
45
45
|
align-items: left;
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
align-items: center;
|
|
82
82
|
`,ae=c.span`
|
|
83
83
|
font-weight: ${t.fontWeight.light};
|
|
84
|
-
`,R=({htmlFor:a,textLabel:
|
|
84
|
+
`,R=({htmlFor:a,textLabel:i,additionalInfo:s,$labelFlexDirection:o,source:m,svg:r,className:d,children:b})=>e.jsxs(Z,{htmlFor:a,className:d,$labelFlexDirection:o,children:[(m||r)&&e.jsx(te,{className:"label-icon-container",children:m?e.jsx("img",{src:m,alt:`${a}-label-icon`}):r||""}),e.jsxs(_,{className:"label-text-container",children:[e.jsx(ee,{className:"main-label",children:i}),s&&e.jsx(ae,{className:"additional-info",children:s})]}),b]}),B=c.input`
|
|
85
85
|
display: flex;
|
|
86
86
|
place-content: center;
|
|
87
87
|
font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
max-width: 100%;
|
|
112
112
|
resize: none;
|
|
113
113
|
overflow-y: auto;
|
|
114
|
-
`,A=F.forwardRef((a,
|
|
114
|
+
`,A=F.forwardRef((a,i)=>{const{type:s,id:o,onChange:m,isRequired:r,dataAttributes:d,disabled:b,className:h}=a;if(s==="textarea"){const{rows:y=5,cols:N=30,value:E,...v}=a;return e.jsx(ne,{id:o,onChange:m,value:E,rows:y,cols:N,...d,className:h,ref:i,disabled:b,required:r})}if(s==="radio"||s==="checkbox"){const{checked:y,...N}=a;return e.jsx(B,{ref:i,type:"checkbox",id:o,checked:y,onChange:m,disabled:b,className:h,...d})}const u=a,{value:j,pattern:$,placeholderText:k,...C}=u;return e.jsx(B,{id:o,name:o,placeholder:k,onChange:m,value:j,type:s,required:r,...d,className:h,ref:i,disabled:b,pattern:$})}),w=a=>{const{className:i,type:s,id:o,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,labelClass:h,onChange:u,isRequired:j,dataAttributes:$,inputClass:k,ref:C,disabled:y,isEditable:N,editIcon:E,onClickEdit:v,deleteIcon:D,onClickDelete:S,idx:T,children:q}=a;return e.jsxs(X,{className:`${i} ${o.replace("#","")}-label-input-container`,children:[s!=="radio"&&s!=="checkbox"&&e.jsx(R,{htmlFor:o,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h}),s!=="radio"&&s!=="checkbox"&&s==="textarea"&&(()=>{const{rows:n=5,cols:g=30,value:l,...p}=a;return e.jsx(A,{id:o,name:o,type:"textarea",isRequired:j,onChange:u,value:l,rows:n,cols:g,dataAttributes:$,className:k,ref:C,disabled:y})})(),s!=="radio"&&s!=="checkbox"&&s!=="textarea"&&(()=>{const n=a,{value:g,pattern:l,placeholderText:p,...z}=n;return e.jsx(A,{id:o,name:o,placeholderText:p,onChange:u,value:g,type:s,isRequired:j,dataAttributes:$,className:k,ref:C,disabled:y,pattern:l})})(),(s==="radio"||s==="checkbox")&&(()=>{const{checked:n,...g}=a;return e.jsxs(e.Fragment,{children:[e.jsx(A,{ref:C,type:"checkbox",name:o,id:o,isRequired:j,checked:n,onChange:u,disabled:y,className:k,dataAttributes:$}),e.jsx(R,{htmlFor:o,textLabel:m,additionalInfo:r,$labelFlexDirection:d,svg:b,className:h})]})})(),N&&e.jsxs(Y,{className:"input-edit-buttons",children:[e.jsx(f,{id:`editable-${o}-edit-btn`,svg:E,buttonType:"button",onClick:v,className:`edit-radio-${T}`,dataAttributes:$}),e.jsx(f,{id:`editable-${o}-delete-btn`,svg:D,buttonType:"button",onClick:S,className:`delete-radio-${T}`,dataAttributes:$})]}),q]})},se=c.fieldset`
|
|
115
115
|
padding: 0;
|
|
116
116
|
height: auto;
|
|
117
117
|
width: 100%;
|
|
@@ -121,21 +121,21 @@
|
|
|
121
121
|
margin: 0 auto ${t.spacing.small} auto;
|
|
122
122
|
text-align: center;
|
|
123
123
|
font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
|
|
124
|
-
`,
|
|
124
|
+
`,ie=c.div`
|
|
125
125
|
display: flex;
|
|
126
126
|
flex-direction: column;
|
|
127
127
|
align-items: flex-start;
|
|
128
128
|
width: 100%;
|
|
129
129
|
margin-bottom: ${t.spacing.small};
|
|
130
|
-
`,
|
|
130
|
+
`,le=c.div`
|
|
131
131
|
display: flex;
|
|
132
132
|
justify-content: space-between;
|
|
133
133
|
width: 100%;
|
|
134
|
-
`,P=({legend:a,fieldsetIndex:
|
|
134
|
+
`,P=({legend:a,fieldsetIndex:i=null,idx:s,editableInformation:o,onChangeOfEditableOption:m,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:b})=>e.jsxs(se,{className:"editable-option-fieldset",children:[e.jsx(oe,{children:`${a} ${s+1}`}),o?.map((h,u)=>e.jsx(ie,{className:"editable-option-container",children:e.jsx(A,{id:`editable-option-${u}`,name:`editable-option-${u}`,placeholderText:h.name.charAt(0).toUpperCase()+h.name.slice(1),onChange:m,value:h.info,type:h.type,isRequired:!0,className:"editable-option",dataAttributes:{"data-index":u,"data-fieldsetidx":i,"data-key":h.info}})},`${h.name}-${u}`)),e.jsxs(le,{className:"editable-option-button-space",children:[e.jsx(f,{id:`editable-option-${s}-submit`,buttonType:"button",text:"Save",onClick:r,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetIndex":i}}),e.jsx(f,{id:`editable-option-${s}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetIndex":i}}),e.jsx(f,{id:`editable-option-${s}-delete`,buttonType:"button",text:"Delete",onClick:b,className:"editable-option-btn",dataAttributes:{"data-index":s,"data-fieldsetIndex":i}})]})]}),ce=c.div`
|
|
135
135
|
display: flex;
|
|
136
136
|
justify-content: space-between;
|
|
137
137
|
max-width: 100%;
|
|
138
|
-
`,re=({id:a,hasSubmit:
|
|
138
|
+
`,re=({id:a,hasSubmit:i,submitText:s,handleSubmit:o,hasReset:m,resetText:r,handleReset:d,hasCancel:b,cancelText:h,handleCancel:u})=>e.jsxs(ce,{className:"form-main-button-container",children:[i&&e.jsx(f,{id:`form-${a}-submit`,buttonType:"submit",text:s??"Submit",onClick:o,className:"submit-form-btn"}),m&&e.jsx(f,{id:`form-${a}-edit`,buttonType:"button",text:r??"Reset",onClick:d,className:"reset-form-btn"}),b&&e.jsx(f,{id:`form-${a}-cancel`,buttonType:"button",text:h??"Cancel",onClick:u,className:"cancel-form-btn"})]}),W=c.legend`
|
|
139
139
|
font-size: ${t.spacing.medium};
|
|
140
140
|
font-weight: 500;
|
|
141
141
|
margin-bottom: ${t.spacing.small};
|
|
@@ -174,4 +174,4 @@
|
|
|
174
174
|
flex-direction: column;
|
|
175
175
|
align-items: center;
|
|
176
176
|
justify-content: center;
|
|
177
|
-
`,xe=({fieldsets:a=null,legendText:
|
|
177
|
+
`,xe=({fieldsets:a=null,legendText:i,isExpandable:s,id:o,formInputs:m,labelAndInputContainerClass:r,labelClass:d,inputClass:b,onChangeOfEditableOption:h,handleAddingInputEntry:u,hasSubmit:j=!1,submitText:$,handleSubmit:k,hasReset:C=!1,resetText:y,handleReset:N,hasCancel:E=!1,cancelText:v,handleCancel:D,handleSubmitForm:S,className:T,children:q})=>e.jsxs(de,{id:`${o}-form`,className:T,onSubmit:S,children:[a?a.map((n,g)=>e.jsxs(U,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${o}-form-fieldset-${g}`,className:`${n.legend}-fieldset`,children:[n.legend&&e.jsx(W,{className:`${n.legend}-legend`,children:n.legend}),n.inputs.length!==0?n.inputs.map((l,p)=>e.jsxs(F.Fragment,{children:[l.type==="textarea"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${l?.uniqueClass}`}),l.type!=="textarea"&&l.type!=="radio"&&l.type!=="checkbox"&&e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${l?.uniqueClass}`}),(l.type==="radio"||l.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...l,id:l.id??`${n.legend}-input`,labelClass:d,inputClass:b,idx:p,className:`${r} ${l?.uniqueClass}`}),l.editing&&l.isEditable&&e.jsx(P,{legend:`${n.legend}`,fieldsetIndex:g,idx:p,editableInformation:l?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:l?.onClickSave||(z=>{}),onClickCancelEdit:l?.onClickCancel||(z=>{}),onClickDeleteEntry:l?.onClickDelete||(z=>{})})]})]},`form-${o}-${p}`)):n.isExpandable?e.jsx(O,{children:`No entry yet on ${n.legend}. Click "+" button to add entry.`}):""]}),n.isExpandable&&e.jsx(H,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${n.legend}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry",dataAttributes:{"data-fieldsetidx":g}})})]},`${n.legend}-${g}`)):e.jsxs(U,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(M,{id:`${o}-form-fieldset`,className:`${i}-fieldset`,children:[i&&e.jsx(W,{className:`${i}-legend`,children:i}),!a&&m&&m.length!==0?m.map((n,g)=>e.jsxs(F.Fragment,{children:[n.type==="textarea"&&e.jsx(w,{...n,id:n.id??`${i}-input`,labelClass:d,inputClass:b,idx:g,className:`${r} ${n?.uniqueClass}`}),n.type!=="textarea"&&n.type!=="radio"&&n.type!=="checkbox"&&e.jsx(w,{...n,id:n.id??`${i}-input`,labelClass:d,inputClass:b,idx:g,className:`${r} ${n?.uniqueClass}`}),(n.type==="radio"||n.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(w,{...n,id:n.id??`${i}-input`,labelClass:d,inputClass:b,idx:g,className:`${r} ${n?.uniqueClass}`}),n.editing&&n.isEditable&&e.jsx(P,{legend:`${i}`,idx:g,editableInformation:n?.editableInformation,onChangeOfEditableOption:h,onClickSaveEdit:n?.onClickSave||(l=>{}),onClickCancelEdit:n?.onClickCancel||(l=>{}),onClickDeleteEntry:n?.onClickDelete||(l=>{})})]})]},`form-${o}-${g}`)):s?e.jsx(O,{children:`No entry yet on ${i}. Please click "+" button to add`}):""]}),s&&e.jsx(H,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${i}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry"})})]}),e.jsx(re,{id:o,hasSubmit:j,submitText:$,handleSubmit:k,hasReset:C,resetText:y,handleReset:N,hasCancel:E,cancelText:v,handleCancel:D}),e.jsx(me,{className:"children-container",children:q})]}),be=a=>{const i=/^#([0-9A-Fa-f]{3}){1,2}$/,s=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return i.test(a)||s.test(a)||CSS.supports("color",a)},x=a=>{if(!be(a))throw new Error(`Invalid color: ${a}`);return a},he={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},G={name:"light",colors:{text:x("#333446"),bg:x("#EEEEEE"),blue:x("#7F8CAA"),blue2:x("#80A6FF"),teal:x("#5b8280ff"),teal2:x("#AEEAE7"),gray:x("#AEAEAE"),information:x("#202234"),success:x("#123524"),warning:x("#F2C265"),error:x("#990000")}},I={name:"dark",colors:{bg:x("#333446"),text:x("#EEEEEE"),blue:x("#80A6FF"),blue2:x("#7F8CAA"),teal:x("#AEEAE7"),teal2:x("#5b8280ff"),gray:x("#D0D0DD"),information:x("#C9E6F0"),success:x("#9EDF9C"),warning:x("#FCFFC1"),error:x("#FAD4D4")}},L=F.createContext({}),ue=({children:a,initialTheme:i=G,secondTheme:s=I})=>{const[o,m]=F.useState(i),r=()=>{m(d=>d===i?s:i)};return e.jsx(L.Provider,{value:{currentTheme:o,toggleTheme:r},children:e.jsx(c.ThemeProvider,{theme:o,children:a})})},ge=()=>F.useContext(L);exports.DynamicForm=xe;exports.ThemeContext=L;exports.ThemeContextProvider=ue;exports.breakpoints=he;exports.darkTheme=I;exports.lightTheme=G;exports.useTheme=ge;
|
|
@@ -375,6 +375,7 @@ const e = {
|
|
|
375
375
|
className: "editable-option",
|
|
376
376
|
dataAttributes: {
|
|
377
377
|
"data-index": g,
|
|
378
|
+
"data-fieldsetidx": i,
|
|
378
379
|
"data-key": f.info
|
|
379
380
|
}
|
|
380
381
|
}
|
|
@@ -418,7 +419,7 @@ const e = {
|
|
|
418
419
|
padding: ${e.spacing.small};
|
|
419
420
|
height: auto;
|
|
420
421
|
width: 100%;
|
|
421
|
-
`,
|
|
422
|
+
`, O = c.div`
|
|
422
423
|
display: flex;
|
|
423
424
|
justify-content: center;
|
|
424
425
|
align-items: center;
|
|
@@ -432,7 +433,7 @@ const e = {
|
|
|
432
433
|
flex-direction: column;
|
|
433
434
|
align-items: center;
|
|
434
435
|
width: 100%;
|
|
435
|
-
`,
|
|
436
|
+
`, G = c.div`
|
|
436
437
|
display: flex;
|
|
437
438
|
justify-content: space-between;
|
|
438
439
|
width: 100%;
|
|
@@ -521,9 +522,9 @@ const e = {
|
|
|
521
522
|
}
|
|
522
523
|
)
|
|
523
524
|
] })
|
|
524
|
-
] }, `form-${l}-${k}`)) : n.isExpandable ? /* @__PURE__ */ a(
|
|
525
|
+
] }, `form-${l}-${k}`)) : n.isExpandable ? /* @__PURE__ */ a(O, { children: `No entry yet on ${n.legend}. Click "+" button to add entry.` }) : ""
|
|
525
526
|
] }),
|
|
526
|
-
n.isExpandable && /* @__PURE__ */ a(
|
|
527
|
+
n.isExpandable && /* @__PURE__ */ a(G, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${n.legend}-inputs`, buttonType: "button", text: "+", onClick: g, className: "add-input-entry", dataAttributes: { "data-fieldsetidx": $ } }) })
|
|
527
528
|
] }, `${n.legend}-${$}`)) : /* @__PURE__ */ u(H, { className: `${l}-fieldset-wrapper`, children: [
|
|
528
529
|
/* @__PURE__ */ u(U, { id: `${l}-form-fieldset`, className: `${i}-fieldset`, children: [
|
|
529
530
|
i && /* @__PURE__ */ a(M, { className: `${i}-legend`, children: i }),
|
|
@@ -578,9 +579,9 @@ const e = {
|
|
|
578
579
|
}
|
|
579
580
|
)
|
|
580
581
|
] })
|
|
581
|
-
] }, `form-${l}-${$}`)) : o ? /* @__PURE__ */ a(
|
|
582
|
+
] }, `form-${l}-${$}`)) : o ? /* @__PURE__ */ a(O, { children: `No entry yet on ${i}. Please click "+" button to add` }) : ""
|
|
582
583
|
] }),
|
|
583
|
-
o && /* @__PURE__ */ a(
|
|
584
|
+
o && /* @__PURE__ */ a(G, { className: "add-input-button-space", children: /* @__PURE__ */ a(x, { id: `expand-${i}-inputs`, buttonType: "button", text: "+", onClick: g, className: "add-input-entry" }) })
|
|
584
585
|
] }),
|
|
585
586
|
/* @__PURE__ */ a(
|
|
586
587
|
fe,
|
|
@@ -643,7 +644,7 @@ const e = {
|
|
|
643
644
|
warning: b("#FCFFC1"),
|
|
644
645
|
error: b("#FAD4D4")
|
|
645
646
|
}
|
|
646
|
-
},
|
|
647
|
+
}, I = K({}), Fe = ({
|
|
647
648
|
children: t,
|
|
648
649
|
initialTheme: i = xe,
|
|
649
650
|
secondTheme: o = pe
|
|
@@ -651,11 +652,11 @@ const e = {
|
|
|
651
652
|
const [l, m] = Q(i), r = () => {
|
|
652
653
|
m((d) => d === i ? o : i);
|
|
653
654
|
};
|
|
654
|
-
return /* @__PURE__ */ a(
|
|
655
|
-
}, Ee = () => V(
|
|
655
|
+
return /* @__PURE__ */ a(I.Provider, { value: { currentTheme: l, toggleTheme: r }, children: /* @__PURE__ */ a(X, { theme: l, children: t }) });
|
|
656
|
+
}, Ee = () => V(I);
|
|
656
657
|
export {
|
|
657
658
|
Ce as DynamicForm,
|
|
658
|
-
|
|
659
|
+
I as ThemeContext,
|
|
659
660
|
Fe as ThemeContextProvider,
|
|
660
661
|
we as breakpoints,
|
|
661
662
|
pe as darkTheme,
|