@tipp/ui 2.3.6 → 2.3.8

package/src/molecules/dynamic-field.tsx

@@ -22,6 +22,7 @@ export function DynamicFormField({
     setFieldValue,
     handleChange,
     handleBlur,
+    readonly,
   } = useDynamicForm();
   const { name, type } = field;
 
@@ -33,9 +34,10 @@ export function DynamicFormField({
   const commonProps = {
     name,
     value: String(value || ''),
-    onChange: handleChange,
-    onBlur: handleBlur,
+    onChange: readonly ? undefined : handleChange,
+    onBlur: readonly ? undefined : handleBlur,
     error: hasError,
+    disabled: readonly,
   };
 
   switch (type) {
@@ -64,10 +66,11 @@ export function DynamicFormField({
     case 'dropdown':
       return (
         <Select.Root
-          onValueChange={(newValue: string) => {
+          onValueChange={readonly ? undefined : (newValue: string) => {
             void setFieldValue(name, newValue);
           }}
           value={value as string}
+          disabled={readonly}
         >
           <Select.Trigger placeholder={field.placeholder} />
           <Select.Content>
@@ -83,11 +86,12 @@ export function DynamicFormField({
     case 'choice':
       return (
         <RadioGroup.Root
-          onValueChange={(newValue: string) => {
+          onValueChange={readonly ? undefined : (newValue: string) => {
             void setFieldValue(name, newValue);
           }}
           orientation={field.orientation}
           value={String(value || '')}
+          disabled={readonly}
         >
           {field.options.map((option) => (
             <RadioGroup.Item key={option.value} value={String(option.value)}>
@@ -100,11 +104,12 @@ export function DynamicFormField({
     case 'choices':
       return (
         <CheckboxGroup.Root
-          onValueChange={(newValue: string[]) => {
+          onValueChange={readonly ? undefined : (newValue: string[]) => {
             void setFieldValue(name, newValue);
           }}
           orientation={field.orientation}
           value={Array.isArray(value) ? value.map(String) : []}
+          disabled={readonly}
         >
           {field.options.map((option) => (
             <CheckboxGroup.Item key={option.value} value={String(option.value)}>
@@ -119,9 +124,10 @@ export function DynamicFormField({
         <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
           <Checkbox
             checked={Boolean(value)}
-            onCheckedChange={(checked: boolean) => {
+            onCheckedChange={readonly ? undefined : (checked: boolean) => {
               void setFieldValue(name, checked);
             }}
+            disabled={readonly}
           />
           {field.description ? (
             <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.4' }}>

package/src/molecules/dynamic-form.tsx

@@ -19,6 +19,7 @@ export interface DynamicFormProps {
   initialValues?: Record<string, unknown>;
   onSubmit: (values: Record<string, unknown>) => void | Promise<void>;
   children: React.ReactNode;
+  readonly?: boolean;
 }
 
 /**
@@ -54,6 +55,7 @@ function DynamicFormRoot({
   initialValues = {},
   onSubmit,
   children,
+  readonly = false,
 }: DynamicFormProps): React.ReactElement {
   const validationSchema = useMemo(() => {
     const schema: Record<string, Yup.Schema<unknown>> = {};
@@ -119,7 +121,7 @@ function DynamicFormRoot({
   }, [formik.submitCount, formik.errors, fields]);
 
   return (
-    <DynamicFormProvider fields={fields} formik={formik}>
+    <DynamicFormProvider fields={fields} formik={formik} readonly={readonly}>
       {children}
     </DynamicFormProvider>
   );
@@ -133,14 +135,14 @@ function DynamicFormFieldList({
   fields: fieldsProp,
   labelVariant,
 }: DynamicFormFieldListProps): React.ReactElement {
-  const { formik, fields: fieldsFromContext } = useDynamicForm();
+  const { formik, fields: fieldsFromContext, readonly } = useDynamicForm();
   const fields = fieldsProp || fieldsFromContext;
 
   return (
     <>
       {fields.map((field) => {
         const errorMessage =
-          formik.touched[field.name] && formik.errors[field.name]
+          !readonly && formik.touched[field.name] && formik.errors[field.name]
             ? String(formik.errors[field.name])
             : undefined;