Translations

Eidos has multilingual support out of the box. You can set the locale and translation objects using the properties of the global EidosProvider. You have to register a translation object for each locale you want to support.

Property label translations

The property names you define in your eidos.ts probably are not those that you want to display to the user. The generated fields will make use of the translate function, which will search for the translation of that property for the current locale and use that as label with the property name as fallback.

For instance, the following is a snippet from a generated field:

export const GroupField : FieldComponent<Group> = ({ value, onChange, editable, label, name }) => {
	return (
		<div className={`Group`}>
			<StringField
				label={translate("Group.name")}
				name="name"
				value={value?.["name"]}
				onChange={(name) => onChange!({ name })}
				editable={editable}
			/>
		</div>
	);
}

So, to define the translation for the group name, the translation object should at least contain

{ "Group": { "name": "<your translation>" } }

String union translations

The more complex case is when you have a number of string literals in a union type. Say we have the union type type Status = "new" | "approved" | "rejected". The generated UnionField is as follows:

export const StatusField : FieldComponent<Status> = ({ value, onChange, editable, label, name }) => {
	return (
		<UnionField
			value={value}
			onChange={onChange as any}
			options={["new","approved","rejected"]}
			label={label ?? translate("Status.@label")}
			labels={translate("Status")}
			name={name}
			editable={editable}
		/>
	);
}

We define the following entry in our translation object:

{
	"Status" {
		"@label": "Status",
		"new": "New",
		"approved": "Approved",
		"rejected": "Rejected"
	}
}

The @label property is what is displayed as the label of the entire field. The rest of the labels are the labels for the options.

UI translations

Most UI components that eidos exports have translations available. Currently eidos has default UI translations for the locales "en-GB" and "nl-NL". Below is the default translation object for the locale "en-GB". It can be used as a reference for creating UI translations for a new locale, or to override UI translations for an existing one. If any of the below values are specified in the translation object registered in registerLanguage, it will override the default values in that locale.

{
	"AreYouSure": {
		"title": "Are you sure?"
	},
	"Button": {
		"save": "Save",
		"cancel": "Cancel",
		"yes": "Yes",
		"no": "No",
		"delete": "Delete",
		"edit": "Edit"
	},
	"DisplayTable": {
		"search": "Search...",
		"sort": "Sort",
		"MoreActions": {
			"title": "More actions"
		},
		"emptyText": "No results found.",
		"Pagination": {
			"LabelRowsPerPage": "Rows per page:",
			"of": "of",
			"more_than": "more than"
		}
	},
	"OrderedTable": {
		"RowActions": {
			"copy": "Duplicate this row below",
			"insert": "Insert empty row below"
		}
	},
	"ToolbarActions": {
		"new": "New row",
		"download": "Download",
		"filters": "Toggle filtering"
	},
	"EditDialog": {
		"title": "Editing row"
	},
	"ErrorBoundary": {
		"title": "Error",
		"message": "Something went wrong while loading this page. When reporting this error, make sure to include the following diagnostic information:"
	}
}