feat(react-tinacms-github): Add WatchableFormValues argument to useGi…

…thubFileForm, useGithubJsonForm, useGithubMarkdownForm
tinacms · Mar 5, 2021 · 51ce6f3 · 51ce6f3
1 parent 0462e19
commit 51ce6f3
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 24 deletions.
diff --git a/packages/react-tinacms-github/src/form/useGithubFileForm.ts b/packages/react-tinacms-github/src/form/useGithubFileForm.ts
@@ -17,33 +17,37 @@ limitations under the License.
 */
 
 import { GitFile } from './useGitFileSha'
-import { useForm, FormOptions } from 'tinacms'
+import { useForm, FormOptions, WatchableFormValue } from 'tinacms'
 import { useGithubFile } from '../github-client'
 import { Form } from '@tinacms/forms'
 
-export interface GithubFormOptions <T = any> extends Partial<FormOptions<T>> {
+export interface GithubFormOptions<T = any> extends Partial<FormOptions<T>> {
   serialize: (data: any) => string
 }
 
 export const useGithubFileForm = <T = any>(
   file: GitFile<T>,
-  options: GithubFormOptions<T>
+  options: GithubFormOptions<T>,
+  watch?: Partial<WatchableFormValue>
 ): [T, Form] => {
   const githubFile = useGithubFile({
     path: file.fileRelativePath,
     serialize: options.serialize,
   })
 
-  const [formData, form] = useForm<T>({
-    id: file.fileRelativePath,
-    label: options.label || file.fileRelativePath,
-    initialValues: file.data,
-    fields: options.fields || [],
-    actions: options.actions || [],
-    onSubmit(formData) {
-      return githubFile.commit(formData)
+  const [formData, form] = useForm<T>(
+    {
+      id: file.fileRelativePath,
+      label: options.label || file.fileRelativePath,
+      initialValues: file.data,
+      fields: options.fields || [],
+      actions: options.actions || [],
+      onSubmit(formData) {
+        return githubFile.commit(formData)
+      },
     },
-  })
+    watch
+  )
 
   return [formData || file.data, form]
 }
diff --git a/packages/react-tinacms-github/src/form/useGithubJsonForm.ts b/packages/react-tinacms-github/src/form/useGithubJsonForm.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 */
 
-import { FormOptions, Field } from 'tinacms'
+import { FormOptions, Field, WatchableFormValue } from 'tinacms'
 import { GitFile } from './useGitFileSha'
 import { useGithubFileForm } from './useGithubFileForm'
 
@@ -31,9 +31,17 @@ const serialize = (formData: any) => {
   return JSON.stringify(formData, null, 2)
 }
 
-export function useGithubJsonForm<T = any>(jsonFile: GitFile<T>, formOptions?: Options<T>) {
-  return useGithubFileForm<T>(jsonFile, {
-    ...formOptions,
-    serialize,
-  })
+export function useGithubJsonForm<T = any>(
+  jsonFile: GitFile<T>,
+  formOptions?: Options<T>,
+  watch?: Partial<WatchableFormValue>
+) {
+  return useGithubFileForm<T>(
+    jsonFile,
+    {
+      ...formOptions,
+      serialize,
+    },
+    watch
+  )
 }
diff --git a/packages/react-tinacms-github/src/form/useGithubMarkdownForm.ts b/packages/react-tinacms-github/src/form/useGithubMarkdownForm.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 */
 
-import { FormOptions, Field } from 'tinacms'
+import { FormOptions, Field, WatchableFormValue } from 'tinacms'
 import { GitFile } from './useGitFileSha'
 import { toMarkdownString } from 'next-tinacms-markdown'
 import { useGithubFileForm } from './useGithubFileForm'
@@ -29,10 +29,15 @@ interface Options<T = any> {
 
 export function useGithubMarkdownForm<T = any>(
   markdownFile: GitFile<T>,
-  formOptions?: Options<T>
+  formOptions?: Options<T>,
+  watch?: Partial<WatchableFormValue>
 ) {
-  return useGithubFileForm<T>(markdownFile, {
-    ...formOptions,
-    serialize: toMarkdownString,
-  })
+  return useGithubFileForm<T>(
+    markdownFile,
+    {
+      ...formOptions,
+      serialize: toMarkdownString,
+    },
+    watch
+  )
 }