Function ConfigFormDrawer

apps/web/src/components/ConfigFormModal.tsx:121–531

({
  ref,
  opened,
  onClose,
}: {
  ref?: React.Ref<ConfigFormModalRef>
  opened: boolean
  onClose: () => void
})

}

export function ConfigFormDrawer({
  ref,
  opened,
  onClose,
}: {
  ref?: React.Ref<ConfigFormModalRef>
  opened: boolean
  onClose: () => void
}) {
  const { t } = useTranslation()
  const [editingID, setEditingID] = useState<string>()
  const [origins, setOrigins] = useState<FormValues>()

  const {
    handleSubmit,
    setValue: setValueOriginal,
    reset,
    control,
    formState: { errors, isDirty },
  } = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues,
    mode: 'all',
  })

  const setValue = useSetValue(setValueOriginal)
  const formValues = useWatch({ control })

  const initOrigins = (origins: FormValues) => {
    reset(origins)
    setOrigins(origins)
  }

  const resetForm = useCallback(() => {
    reset(defaultValues)
  }, [reset])

  useImperativeHandle(ref, () => ({
    form: {
      setValues: (values: FormValues) => reset(values),
      reset: resetForm,
    },
    setEditingID,
    initOrigins,
  }))

  const handleOpenChange = useCallback(
    (open: boolean) => {
      if (!open) {
        onClose()
        // Delay reset until after dialog close animation completes
        setTimeout(() => {
          resetForm()
          setEditingID(undefined)
          setOrigins(undefined)
        }, 200)
      }
    },