Replies: 1 comment 1 reply
-
|
Hi @darbandi, Take a look at the i18n property https://formengine.io/documentation/api-reference/interfaces/react_form_builder_designer.FormBuilderProps#i18n. Example: import {
ltrCssLoader,
rsErrorMessage,
RsLocalizationWrapper,
rsTooltip,
rSuiteComponents,
rtlCssLoader
} from '@react-form-builder/components-rsuite'
import {BiDi, Language} from '@react-form-builder/core'
import {BuilderView, FormBuilder} from '@react-form-builder/designer'
import React from 'react'
import * as SampleForm from './SampleForm.json'
const builderComponents = rSuiteComponents.map(c => c.build())
const builderView = new BuilderView(builderComponents)
.withErrorMeta(rsErrorMessage.build())
.withTooltipMeta(rsTooltip.build())
.withViewerWrapper(RsLocalizationWrapper)
.withCssLoader(BiDi.LTR, ltrCssLoader)
.withCssLoader(BiDi.RTL, rtlCssLoader)
const getForm = (_?: string) => JSON.stringify(SampleForm)
const myLang = new Language('en-EN', 'EN', 'English (UK)', '')
const langData = {
"common": {
"apply": "Apply",
"name": "Name",
"save": "Save",
"cancel": "Cancel",
"clone": "Clone",
"close": "Close",
"edit": "Edit",
"remove": "Remove",
"test": "Test"
},
"annotation": {
"errorConfig": {
"show": "Show"
},
"htmlAttributes": {
"name": "HTML attributes",
"hint": "HTML attributes in React (camelCase) format"
},
"tooltipProps": {
"tooltip": "Tooltip",
"hint": "Use tooltip for this element"
},
"objectPosition": {
"name": "Position"
},
"justifyContent": {
"name": "Justify"
},
"objectFit": {
"name": "Fit"
},
"textAlign": {
"name": "Alignment"
},
"passwordMask": {
"name": "Password mask",
"hint": "Use password mask"
},
"allowLeadingZeros": {
"name": "Allow leading zeros",
"hint": "This allows enabling or disabling leading zeros in the input field. By default, on blur of an input, leading zeros are removed"
},
"allowNegative": {
"name": "Allow negative",
"hint": "If set to false, negative numbers will not be allowed"
},
"allowedDecimalSeparators": {
"name": "Allowed decimal separators",
"hint": "Characters which when pressed result in a decimal separator. When missing, decimal separator and '.' are used"
},
"decimalScale": {
"name": "Decimal scale",
"hint": "If defined, it limits the number of digits after the decimal point"
},
"decimalSeparator": {
"name": "Decimal separator",
"hint": "Defines the decimal character"
},
"fixedDecimalScale": {
"name": "Fixed decimal scale",
"hint": "If set to true, it adds trailing 0s after decimalSeparator to match given decimalScale"
},
"prefix": {
"name": "Prefix",
"hint": "Adds the prefix character before the input value"
},
"suffix": {
"name": "Suffix ",
"hint": "Adds the suffix after the input value"
},
"thousandsGroupStyle": {
"name": "Thousands group style",
"hint": "Thousand style (thousand) : 123,456,789, indian style (lakh) : 12,34,56,789, chinese style (wan) : 1,2345,6789"
},
"allowEmptyFormatting": {
"name": "Allow empty formatting ",
"hint": "By default PatternFormat component does not apply formatting when value is empty (null, undefined or ‘’)"
},
"format": {
"name": "Format",
"hint": "Format pattern using the # (or a Pattern char) character. # is the placeholder character for numbers. Example: '### ###'"
},
"mask": {
"name": "Mask",
"hint": "Used as mask character for numeric places, until any numeric character is provided for that position"
},
"patternChar": {
"name": "Pattern char",
"hint": "This helps define the format pattern character"
},
"bodyFill": {
"name": "Body fill",
"hint": "Content area filled with containers"
},
"eventKey": {
"name": "Event key",
"hint": "The event key corresponding to this element"
},
"action": {
"name": "Action",
"hint": "Uploading URL"
},
"accept": {
"name": "Accept",
"hint": "File types that can be accepted. See standard HTML attribute: accept"
},
"autoUpload": {
"name": "Auto upload",
"hint": "Automatically upload files after selecting them"
},
"disableMultipart": {
"name": "Disable multipart",
"hint": "If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form"
},
"draggable": {
"name": "Draggable",
"hint": "Enabled drag and drop to upload"
},
"method": {
"name": "Method",
"hint": "The HTTP method of upload request"
},
"name": {
"name": "Name",
"hint": "Upload the parameter name of the corresponding file"
},
"withCredentials": {
"name": "With credentials",
"hint": "Whether to carry cookies when uploading requests"
},
"block": {
"name": "Block",
"hint": "Blocking an entire row"
},
"cleanable": {
"name": "Cleanable",
"hint": "Whether the option can be emptied"
},
"creatable": {
"name": "Creatable",
"hint": "Settings can create new options"
},
"data": {
"name": "Data",
"hint": "Selectable data"
},
"disabled": {
"name": "Disabled",
"hint": "Whether or not component is disabled"
},
"placeholder": {
"name": "Placeholder",
"hint": "Setting placeholders"
},
"placement": {
"name": "Placement",
"hint": "The placement of component"
},
"size": {
"name": "Size",
"hint": "Component can have different sizes"
},
"label": {
"name": "Label",
"hint": "Setting label"
},
"groupBy": {
"name": "Group by",
"hint": "Set grouping criteria 'key' in 'data'"
},
"code": {
"name": "Code",
"hint": "Edit code"
},
"flexDirection": {
"name": "Direction",
"hint": "Flex direction of container children"
}
},
"leftMenu": {
"translation": "Translation",
"undo": "Undo",
"menu": "Menu",
"download": "Download",
"upload": "Upload",
"print": "Print",
"settings": "Settings",
"clear": "Clear",
"save": "Save",
"saveAs": "Save as...",
"validateForm": "Validate form",
"currentFormName": "The name of the current form",
"formSaved": "The form is saved",
"formSaveError": "Failed to save form! See the logs in the browser console",
"enterFormName": "Please enter form name",
"formNamePlaceholder": "My beautiful form",
"exportForms": "Export forms",
"exportFormsSuccess": "Forms exported",
"exportFormsError": "Failed to export forms! See the logs in the browser console",
"importForms": "Import forms",
"importFormsSuccess": "Forms imported",
"importFormsError": "Failed to import forms! See the logs in the browser console"
},
"formsList": {
"noFormsInFormStorage": "Save the form so that it appears in the list of forms.",
"addNewForm": "Add a new form"
},
"rightMenu": {
"toggleTheme": "Toggle theme",
"modes": {
"builder": "PREVIEW",
"viewer": "Edit",
"desktop": "Desktop",
"mobile": "Mobile",
"tablet": "Tablet"
}
},
"componentsModal": {
"clickToAdd": "Click to add control"
},
"componentsList": {
"categories": {
"fields": "Fields",
"static": "Static",
"structure": "Structure",
"templates": "Templates"
}
},
"componentToolbar": {
"add": "Add new element",
"before": "Before",
"after": "After",
"inside": "Inside"
},
"codeEditor": {
"codeActionHeader": "Code action editor",
"ok": "OK",
"compilationResult": "Compilation result:",
"codePlaceholder": "// enter your code here",
"compile": "Compile"
},
"propertiesEditor": {
"selectElementForEdit": "Select element on form for edit properties",
"sectionName": {
"main": "Main",
"style": "Style",
"actions": "Actions",
"rules": "Rules",
"withTarget": "With Target",
"withoutTarget": "Without Target",
"linkedProperty": "Linked property",
"expression": "Expression"
},
"subSection": {
"additionalProperties": "Additional properties"
},
"codeButton": {
"hintCalculable": "Make this property calculable",
"hintLocalizable": "Localize this property with Fluent",
"hintCalculableAndLocalizable": "Make this property calculable or localize with Fluent",
"editCalculable": "Edit calculable",
"editLocalizable": "Edit Fluent localization",
"neitherCalculableNorLocalizable": "Neither calculable nor localizable"
},
"setInputHint": "Press Enter to add a value",
"applyKey": "Apply key changes",
"keyMustBeUnique": "Key must be unique",
"keyMustNotBeEmpty": "Key must not be empty"
},
"toolbar": {
"elements": "Elements",
"notFound": "Not found",
"reset": "Reset",
"cloneComponent": "Clone component",
"removeComponent": "Remove component"
},
"errorsPanel": {
"data": "Data",
"errors": "Errors"
},
"searchForm": {
"search": "Search..."
},
"tree": {
"expand": "Expand all",
"collapse": "Collapse all"
},
"style": {
"other": "Other",
"forDevice": "For device",
"component": "Component",
"componentHint": "Styles that apply to the component",
"wrapper": "Wrapper",
"wrapperHint": "Styles that apply to the component wrapper",
"any": "Any",
"desktop": "Desktop",
"mobile": "Mobile",
"tablet": "Tablet"
},
"actions": {
"arguments": "Arguments",
"code": "Code",
"custom": "Custom",
"common": "Common",
"edit": "Edit",
"duplicate": "Duplicate",
"delete": "Delete",
"addCodeAction": "Add a code action",
"addAction": "Add an action",
"parameters": "Parameters",
"add": "Add",
"name": "Name",
"type": "Type"
},
"validation": {
"showFormErrors": "Show form errors",
"formErrors": "Form errors",
"chooseValidation": "Choose your type",
"addRule": "Add a validation rule",
"editCustomValidationCode": "Edit custom validation code for component",
"rule": {
"required": "Required",
"nonEmpty": "Non empty",
"length": "Length",
"min": "Min",
"max": "Max",
"regex": "Regex",
"email": "Email",
"url": "Url",
"uuid": "Uuid",
"ip": "Ip",
"datetime": "Datetime",
"includes": "Includes",
"startsWith": "Starts with",
"endsWith": "Ends with",
"code": "Code",
"custom": "Custom",
"truthy": "Truthy",
"falsy": "Falsy",
"lessThan": "Less than",
"moreThan": "More than",
"integer": "Integer",
"multipleOf": "Multiple of",
"finite": "Finite"
}
},
"promptDialog": {
"ok": "OK",
"cancel": "Cancel"
},
"localization": {
"messageNotFound": "Localization message not found",
"messageIsNull": "Localization message is null"
},
"leftPanel": {
"sectionName": {
"components": "Components",
"tree": "Tree",
"forms": "Forms",
"settings": "Settings"
},
"formSettings": {
"actions": "Actions",
"error": "Error settings",
"tooltip": "Tooltip",
"language": "Language settings"
}
},
"bottomPanel": {
"use": "Use",
"localization": "Fluent localization",
"function": "Calculable value",
"simpleValue": "Simple value",
"simpleValueHint": "Edit the property in the right panel",
"editProperty": "Edit property",
"editCodeAction": "Edit code action"
},
"codeActionEditor": {
"actionNameExists": "Action with this name already exists",
"nameIsRequired": "Action name is required",
"parameterNameExists": "Parameter with this name already exists",
"parameterNameIsRequired": "Parameter name is required",
"parameterNameIsNotValid": "Parameter name is not valid"
},
"testingEditor": {
"run": "Run",
"autorun": "Autorun",
"testFormData": "Test form data",
"hasNotReturnedValue": "Has not returned value",
"compilationOk": "Compilation result: OK"
},
"editJson": "Edit JSON"
}
export const FormBuilderExample = () => {
return <FormBuilder view={builderView} formName="SampleForm" getForm={getForm}
i18n={{
languages: [myLang],
getData: async languageFullCode => {
return {
data: langData
}
}
}}/>
}Lang filies: |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Thank you @optimajet |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi guys
I use the library you wrote
First of all, thank you
Next, I want to know if it is possible to localize the static content of the form builder?
For example, the parts shown in the image below:
Actually, I want to add a new language
Beta Was this translation helpful? Give feedback.
All reactions