diff --git a/devbench/src/component/modal.jsx b/devbench/src/component/modal.jsx index 51f8f9b..5da98b0 100644 --- a/devbench/src/component/modal.jsx +++ b/devbench/src/component/modal.jsx @@ -39,6 +39,40 @@ export function ModalTest() { return props; }); + // Radio element example. Toggle `useRadio` to preview the new `radio` + // input type (single-selection group, value is the chosen option). + const useRadio = true; + const radioElements = [ + { + type: 'text', + name: 'fullName', + placeholder: 'Full Name', + amount: 1 + }, + { + type: 'radio', + name: 'plan', + placeholder: 'Choose a plan', + options: ['Free', 'Pro', 'Enterprise'], + amount: 1 + } + ]; + + if (useRadio) { + return ( + console.log('submitted', data)} + onChange={(data) => console.log(data)} + /> + ); + } + return ( e.type); export const validRules = validationData.map((e) => e.preset); @@ -388,12 +389,11 @@ function Modal({ ariaAttributes['aria-required'] = ariaProps['aria-required']; } - const options = - Tag === 'select' || elementDef.tag === 'DyvixSelect' - ? Array.isArray(field.options[0]) - ? field.options[j] - : field.options - : []; + const options = elementDef['requires-options'] + ? Array.isArray(field.options[0]) + ? field.options[j] + : field.options + : []; const fieldError = errors[name]; const ErrorId = `${id && id !== '!/' ? id : field.placeholder[j]}-error` @@ -474,6 +474,36 @@ function Modal({ ))} + ) : field.type === 'radio' ? ( +
+ {field.placeholder?.[j] && + field.placeholder[j] !== '!/' && ( + + {field.placeholder[j]} + + )} + {options.map((opt, index) => ( + + handleInputChange(name, opt)} + {...(id && + id !== '!/' && { id: `${id}-${index}` })} + /> + {opt} + + ))} +
) : field.type === 'checkbox' ? (