@kbgarcia8/react-dynamic-form 1.0.1 → 1.0.2
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.
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
display: flex;
|
|
40
40
|
align-items: center;
|
|
41
41
|
justify-content: center;
|
|
42
|
-
`,
|
|
42
|
+
`,u=({onClick:n,id:o,buttonType:l,source:s,svg:r,alt:h="alt-button-icon",text:d="",className:i="",dataAttributes:b={}})=>e.jsx(Q,{onClick:n,id:o,type:l,className:i,...b,children:e.jsxs(V,{className:"button-icon-text-space",children:[s?e.jsx(X,{src:s,alt:h}):r||"",d&&e.jsx(Y,{id:o,children:d})]})}),Z=c.div`
|
|
43
43
|
display: flex;
|
|
44
44
|
flex-direction: column;
|
|
45
45
|
align-items: left;
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
max-width: 100%;
|
|
106
106
|
resize: none;
|
|
107
107
|
overflow-y: auto;
|
|
108
|
-
`,z=v.forwardRef((n,o)=>{const{type:l,id:s,onChange:r,isRequired:h,dataAttributes:d,disabled:i,className:b}=n;if(l==="textarea"){const{rows:j=5,cols:w=30,value:T,...D}=n;return e.jsx(oe,{id:s,onChange:r,value:T,rows:j,cols:w,...d,className:b,ref:o,disabled:i,required:h})}if(l==="radio"||l==="checkbox"){const{checked:j,...w}=n;return e.jsx(W,{ref:o,type:"checkbox",id:s,checked:j,onChange:r,disabled:i,className:b,...d})}const g=n,{value:y,pattern:
|
|
108
|
+
`,z=v.forwardRef((n,o)=>{const{type:l,id:s,onChange:r,isRequired:h,dataAttributes:d,disabled:i,className:b}=n;if(l==="textarea"){const{rows:j=5,cols:w=30,value:T,...D}=n;return e.jsx(oe,{id:s,onChange:r,value:T,rows:j,cols:w,...d,className:b,ref:o,disabled:i,required:h})}if(l==="radio"||l==="checkbox"){const{checked:j,...w}=n;return e.jsx(W,{ref:o,type:"checkbox",id:s,checked:j,onChange:r,disabled:i,className:b,...d})}const g=n,{value:y,pattern:f,placeholderText:p,...C}=g;return e.jsx(W,{id:s,name:s,placeholder:p,onChange:r,value:y,type:l,required:h,...d,className:b,ref:o,disabled:i,pattern:f})}),E=n=>{const{className:o,type:l,id:s,textLabel:r,additionalInfo:h,$labelFlexDirection:d,svg:i,labelClass:b,onChange:g,isRequired:y,dataAttributes:f,inputClass:p,ref:C,disabled:j,isEditable:w,editIcon:T,onClickEdit:D,deleteIcon:R,onClickDelete:B,idx:S,children:q}=n;return e.jsxs(Z,{className:`${o} ${s.replace("#","")}-label-input-container`,children:[l!=="radio"&&l!=="checkbox"&&e.jsx(P,{htmlFor:s,textLabel:r,additionalInfo:h,$labelFlexDirection:d,svg:i,className:b}),l!=="radio"&&l!=="checkbox"&&l==="textarea"&&(()=>{const{rows:k=5,cols:F=30,value:A,...a}=n;return e.jsx(z,{id:s,name:s,type:"textarea",isRequired:y,onChange:g,value:A,rows:k,cols:F,...f,className:p,ref:C,disabled:j})})(),l!=="radio"&&l!=="checkbox"&&l!=="textarea"&&(()=>{const k=n,{value:F,pattern:A,placeholderText:a,...$}=k;return e.jsx(z,{id:s,name:s,placeholderText:a,onChange:g,value:F,type:l,isRequired:y,...f,className:p,ref:C,disabled:j,pattern:A})})(),(l==="radio"||l==="checkbox")&&(()=>{const{checked:k,...F}=n;return e.jsxs(e.Fragment,{children:[e.jsx(z,{ref:C,type:"checkbox",name:s,id:s,isRequired:y,checked:k,onChange:g,disabled:j,className:p,...f}),e.jsx(P,{htmlFor:s,textLabel:r,additionalInfo:h,$labelFlexDirection:d,svg:i,className:b})]})})(),w&&e.jsxs(_,{className:"input-edit-buttons",children:[e.jsx(u,{id:`editable-${s}-edit-btn`,svg:T,buttonType:"button",onClick:D,className:`edit-radio-${S}`,dataAttributes:f}),e.jsx(u,{id:`editable-${s}-delete-btn`,svg:R,buttonType:"button",onClick:B,className:`delete-radio-${S}`,dataAttributes:f})]}),q]})},se=c.fieldset`
|
|
109
109
|
padding: 0;
|
|
110
110
|
height: auto;
|
|
111
111
|
width: 100%;
|
|
@@ -125,11 +125,11 @@
|
|
|
125
125
|
display: flex;
|
|
126
126
|
justify-content: space-between;
|
|
127
127
|
width: 100%;
|
|
128
|
-
`,I=({legend:n,idx:o,editableInformation:l,onChangeOfEditableOption:s,onClickSaveEdit:r,onClickCancelEdit:h,onClickDeleteEntry:d})=>e.jsxs(se,{className:"editable-selection-fieldset",children:[e.jsx(le,{children:`${n} ${o+1}`}),l.map((i,b)=>e.jsx(ie,{className:"editable-selection-container",children:e.jsx(z,{id:`editable-selection-${b}`,name:`editable-selection-${b}`,placeholderText:i.name.charAt(0).toUpperCase()+i.name.slice(1),onChange:s,value:i.info,type:i.type,isRequired:!0,className:"editable-selection",dataAttributes:{"data-index":b,"data-key":i.info}})},`${i.name}-${b}`)),e.jsxs(ce,{className:"editable-selection-button-space",children:[e.jsx(
|
|
128
|
+
`,I=({legend:n,idx:o,editableInformation:l,onChangeOfEditableOption:s,onClickSaveEdit:r,onClickCancelEdit:h,onClickDeleteEntry:d})=>e.jsxs(se,{className:"editable-selection-fieldset",children:[e.jsx(le,{children:`${n} ${o+1}`}),l.map((i,b)=>e.jsx(ie,{className:"editable-selection-container",children:e.jsx(z,{id:`editable-selection-${b}`,name:`editable-selection-${b}`,placeholderText:i.name.charAt(0).toUpperCase()+i.name.slice(1),onChange:s,value:i.info,type:i.type,isRequired:!0,className:"editable-selection",dataAttributes:{"data-index":b,"data-key":i.info}})},`${i.name}-${b}`)),e.jsxs(ce,{className:"editable-selection-button-space",children:[e.jsx(u,{id:`editable-selection-${o}-submit`,buttonType:"submit",text:"Save",onClick:r,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx(u,{id:`editable-selection-${o}-cancel`,buttonType:"button",text:"Cancel",onClick:h,className:"editable-selection-btn",dataAttributes:{"data-index":o}}),e.jsx(u,{id:`editable-selection-${o}-delete`,buttonType:"button",text:"Delete",onClick:d,className:"editable-selection-btn",dataAttributes:{"data-index":o}})]})]}),re=c.div`
|
|
129
129
|
display: flex;
|
|
130
130
|
justify-content: space-between;
|
|
131
131
|
max-width: 100%;
|
|
132
|
-
`,de=({id:n,hasSubmit:o,submitText:l,handleSubmit:s,hasEdit:r,editText:h,handleEdit:d,hasCancel:i,cancelText:b,handleCancel:g,hasDelete:y,deleteText:
|
|
132
|
+
`,de=({id:n,hasSubmit:o,submitText:l,handleSubmit:s,hasEdit:r,editText:h,handleEdit:d,hasCancel:i,cancelText:b,handleCancel:g,hasDelete:y,deleteText:f,handleDelete:p})=>e.jsxs(re,{className:"form-main-button-container",children:[o&&e.jsx(u,{id:`form-${n}-submit`,buttonType:"submit",text:l??"Submit",onClick:s,className:"submit-form-btn"}),r&&e.jsx(u,{id:`form-${n}-edit`,buttonType:"button",text:h??"Edit",onClick:d,className:"edit-form-btn"}),i&&e.jsx(u,{id:`form-${n}-cancel`,buttonType:"button",text:b??"Cancel",onClick:g,className:"cancel-form-btn"}),y&&e.jsx(u,{id:`form-${n}-delete`,buttonType:"button",text:f??"Delete",onClick:p,className:"delete-form-btn"})]}),M=c.legend`
|
|
133
133
|
font-size: ${t.spacing.medium};
|
|
134
134
|
font-weight: 500;
|
|
135
135
|
margin-bottom: ${t.spacing.small};
|
|
@@ -168,4 +168,4 @@
|
|
|
168
168
|
flex-direction: column;
|
|
169
169
|
align-items: center;
|
|
170
170
|
justify-content: center;
|
|
171
|
-
`,xe=({fieldsets:n=null,legendText:o,isExpandable:l=!1,id:s,formInputs:r,labelAndInputContainerClass:h,labelClass:d,inputClass:i,handleEditableInputEntryChange:b,handleAddingInputEntry:g,hasSubmit:y=!1,hasCancel:
|
|
171
|
+
`,xe=({fieldsets:n=null,legendText:o,isExpandable:l=!1,id:s,formInputs:r,labelAndInputContainerClass:h,labelClass:d,inputClass:i,handleEditableInputEntryChange:b,handleAddingInputEntry:g,hasSubmit:y=!1,hasCancel:f=!1,hasDelete:p=!1,hasEdit:C=!1,submitText:j,handleSubmitForm:w,handleSubmit:T,cancelText:D,handleCancel:R,deleteText:B,handleDelete:S,editText:q,handleEdit:k,className:F,children:A})=>e.jsxs(me,{id:`${s}-form`,className:F,onSubmit:w,children:[n?n.map((a,$)=>e.jsxs(H,{children:[e.jsxs(U,{id:`${s}-form-fieldset-${$}`,className:"form-fieldset",children:[a.legend&&e.jsx(M,{children:a.legend}),a.inputs.length!==0?a.inputs.map((x,N)=>e.jsxs(v.Fragment,{children:[x.type==="textarea"&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),(x.type==="radio"||x.type==="checkbox")&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),x.type!=="textarea"&&x.type!=="radio"&&x.type!=="checkbox"&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),x.editable&&x.editing&&e.jsx(I,{legend:`${a.legend} ${N+1}`,idx:N,editableInformation:x?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:x?.onClickSave,onClickCancelEdit:x?.onClickCancel,onClickDeleteEntry:x?.onClickDelete})]},`form-${s}-${N}`)):a.expandable?e.jsx(G,{children:`No entry yet on ${a.legend}. Click "+" button to add entry.`}):""]}),a.expandable&&e.jsx(J,{className:"add-input-button-space",children:e.jsx(u,{id:`expand-${a.legend}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]},`${a.legend}-${$}`)):e.jsxs(H,{children:[e.jsxs(U,{id:`${s}-form-fieldset`,className:"form-fieldset",children:[o&&e.jsx(M,{children:o}),r.length!==0?r.map((a,$)=>e.jsxs(v.Fragment,{children:[a.type==="textarea"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),(a.type==="radio"||a.type==="checkbox")&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),a.type!=="textarea"&&a.type!=="radio"&&a.type!=="checkbox"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),a.editable&&a.editing&&e.jsx(I,{legend:`${o} ${$+1}`,idx:$,editableInformation:a?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:a?.onClickSave,onClickCancelEdit:a?.onClickEdit,onClickDeleteEntry:a?.onClickDelete})]},`form-${s}-${$}`)):l?e.jsx(G,{children:`No entry yet on ${o}. Please click "+" button to add`}):""]}),l&&e.jsx(J,{className:"add-input-button-space",children:e.jsx(u,{id:`expand-${o}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]}),e.jsx(de,{id:s,hasSubmit:y,submitText:j,handleSubmit:T,hasEdit:C,editText:q,handleEdit:k,hasCancel:f,cancelText:D,handleCancel:R,hasDelete:p,deleteText:B,handleDelete:S}),e.jsx(be,{className:"children-container",children:A})]}),he=n=>{const o=/^#([0-9A-Fa-f]{3}){1,2}$/,l=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return o.test(n)||l.test(n)||CSS.supports("color",n)},m=n=>{if(!he(n))throw new Error(`Invalid color: ${n}`);return n},fe={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},L={name:"light",colors:{text:m("#333446"),bg:m("#EEEEEE"),blue:m("#7F8CAA"),blue2:m("#80A6FF"),teal:m("#5b8280ff"),teal2:m("#AEEAE7"),gray:m("#AEAEAE"),information:m("#202234"),success:m("#123524"),warning:m("#F2C265"),error:m("#990000")}},K={name:"dark",colors:{bg:m("#333446"),text:m("#EEEEEE"),blue:m("#80A6FF"),blue2:m("#7F8CAA"),teal:m("#AEEAE7"),teal2:m("#5b8280ff"),gray:m("#D0D0DD"),information:m("#C9E6F0"),success:m("#9EDF9C"),warning:m("#FCFFC1"),error:m("#FAD4D4")}},O=v.createContext(void 0),ue=({children:n})=>{const[o,l]=v.useState(L),s=()=>{l(r=>r===L?K:L)};return e.jsx(O.Provider,{value:{currentTheme:o,toggleTheme:s},children:e.jsx(c.ThemeProvider,{theme:o,children:n})})},ge=()=>v.useContext(O);exports.DynamicForm=xe;exports.ThemeContext=O;exports.ThemeContextProvider=ue;exports.breakpoints=fe;exports.darkTheme=K;exports.lightTheme=L;exports.useTheme=ge;
|
|
@@ -250,9 +250,9 @@ const t = {
|
|
|
250
250
|
editIcon: T,
|
|
251
251
|
onClickEdit: S,
|
|
252
252
|
deleteIcon: L,
|
|
253
|
-
onClickDelete:
|
|
253
|
+
onClickDelete: B,
|
|
254
254
|
idx: z,
|
|
255
|
-
children:
|
|
255
|
+
children: R
|
|
256
256
|
} = n;
|
|
257
257
|
return /* @__PURE__ */ u(oe, { className: `${o} ${l.replace("#", "")}-label-input-container`, children: [
|
|
258
258
|
i !== "radio" && i !== "checkbox" && /* @__PURE__ */ e(P, { htmlFor: l, textLabel: r, additionalInfo: f, $labelFlexDirection: d, svg: s, className: b }),
|
|
@@ -317,12 +317,11 @@ const t = {
|
|
|
317
317
|
/* @__PURE__ */ e(P, { htmlFor: l, textLabel: r, additionalInfo: f, $labelFlexDirection: d, svg: s, className: b })
|
|
318
318
|
] });
|
|
319
319
|
})(),
|
|
320
|
-
"// * Radio inputs usually have labels next to them",
|
|
321
320
|
F && /* @__PURE__ */ u(le, { className: "input-edit-buttons", children: [
|
|
322
321
|
/* @__PURE__ */ e(x, { id: `editable-${l}-edit-btn`, svg: T, buttonType: "button", onClick: S, className: `edit-radio-${z}`, dataAttributes: g }),
|
|
323
|
-
/* @__PURE__ */ e(x, { id: `editable-${l}-delete-btn`, svg: L, buttonType: "button", onClick:
|
|
322
|
+
/* @__PURE__ */ e(x, { id: `editable-${l}-delete-btn`, svg: L, buttonType: "button", onClick: B, className: `delete-radio-${z}`, dataAttributes: g })
|
|
324
323
|
] }),
|
|
325
|
-
|
|
324
|
+
R
|
|
326
325
|
] });
|
|
327
326
|
}, me = c.fieldset`
|
|
328
327
|
padding: 0;
|
|
@@ -464,9 +463,9 @@ const t = {
|
|
|
464
463
|
handleSubmit: T,
|
|
465
464
|
cancelText: S,
|
|
466
465
|
handleCancel: L,
|
|
467
|
-
deleteText:
|
|
466
|
+
deleteText: B,
|
|
468
467
|
handleDelete: z,
|
|
469
|
-
editText:
|
|
468
|
+
editText: R,
|
|
470
469
|
handleEdit: w,
|
|
471
470
|
className: E,
|
|
472
471
|
children: D
|
|
@@ -579,13 +578,13 @@ const t = {
|
|
|
579
578
|
submitText: C,
|
|
580
579
|
handleSubmit: T,
|
|
581
580
|
hasEdit: N,
|
|
582
|
-
editText:
|
|
581
|
+
editText: R,
|
|
583
582
|
handleEdit: w,
|
|
584
583
|
hasCancel: g,
|
|
585
584
|
cancelText: S,
|
|
586
585
|
handleCancel: L,
|
|
587
586
|
hasDelete: k,
|
|
588
|
-
deleteText:
|
|
587
|
+
deleteText: B,
|
|
589
588
|
handleDelete: z
|
|
590
589
|
}
|
|
591
590
|
),
|