good-idea/sanity-localization-demo

Better way to use the built-in Field component?

Opened this issue · 0 comments

The function localizeField (see here) takes a standard field config and "localizes" it. (See it in use in the post schema)

usage:

	fields: [
		localizeField({
			name: 'title',
			title: 'Title',
			type: 'string',
		}),
		...
	]

It turns this field into an object with translations for each language. The above example turns into:

	fields: [
		{
			name: 'title',
			title: 'Title',
			type: 'object',
			fields: [
				{
					name: 'en',
					title: 'English',
					type: 'string',
				},
				{
					name: 'es',
					title: 'Spanish',
					type: 'string',
				},
				// ... and so on for other languages
			]
		}
		...
	]

This is done by copying the implementation of the core ObjectInput component, with the only difference being that it hides the input if it is not the current language.

As you can see in the function, it is literally just copied and pasted.

Question

Is there an easier way to render the child fields without needing to re-implement handleFieldChange and all of the other props?