diff --git a/packages/react-tinacms-github/src/form/useGithubFileForm.ts b/packages/react-tinacms-github/src/form/useGithubFileForm.ts index 58c0d531db..e79dba5047 100644 --- 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 extends Partial> { +export interface GithubFormOptions extends Partial> { serialize: (data: any) => string } export const useGithubFileForm = ( file: GitFile, - options: GithubFormOptions + options: GithubFormOptions, + watch?: Partial ): [T, Form] => { const githubFile = useGithubFile({ path: file.fileRelativePath, serialize: options.serialize, }) - const [formData, form] = useForm({ - 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( + { + 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 index 1d11d8b1e4..dd59e18b25 100644 --- 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(jsonFile: GitFile, formOptions?: Options) { - return useGithubFileForm(jsonFile, { - ...formOptions, - serialize, - }) +export function useGithubJsonForm( + jsonFile: GitFile, + formOptions?: Options, + watch?: Partial +) { + return useGithubFileForm( + jsonFile, + { + ...formOptions, + serialize, + }, + watch + ) } diff --git a/packages/react-tinacms-github/src/form/useGithubMarkdownForm.ts b/packages/react-tinacms-github/src/form/useGithubMarkdownForm.ts index 2c9f27a48c..70deca837a 100644 --- 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 { export function useGithubMarkdownForm( markdownFile: GitFile, - formOptions?: Options + formOptions?: Options, + watch?: Partial ) { - return useGithubFileForm(markdownFile, { - ...formOptions, - serialize: toMarkdownString, - }) + return useGithubFileForm( + markdownFile, + { + ...formOptions, + serialize: toMarkdownString, + }, + watch + ) }