Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

translations #538

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+153 −15
Open

translations #538

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,15 @@
"babel-polyfill": "^6.26.0",
"core-js": "^3.32.0",
"eventemitter2": "^6.4.5",
"i18next": "^23.5.1",
"i18next-browser-languagedetector": "^7.1.0",
"lodash": "^4.17.21",
"prop-types": "^15.8.1"
"prop-types": "^15.8.1",
"react-i18next": "^13.2.2"
},
"devDependencies": {
"@babel/core": "^7.22.9",
"@types/react": "^18.2.25",
"ajv-pack": "^0.3.1",
"babel-cli": "^6.24.1",
"babel-core": "^6.26.3",
Expand Down
64 changes: 51 additions & 13 deletions src/components/FormEdit.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import FormBuilder from './FormBuilder';
import _set from 'lodash/set';
import _cloneDeep from 'lodash/cloneDeep';
import _camelCase from 'lodash/camelCase';
import {Trans, useTranslation} from 'react-i18next';

const reducer = (form, {type, value}) => {
const formCopy = _cloneDeep(form);
Expand Down Expand Up @@ -45,6 +46,33 @@ const FormEdit = (props) => {
ref,
} = props;

const {t, i18n} = useTranslation();
let language = undefined;
let i18nOption = undefined;
if (options) {
language = options.language;
i18nOption = options.i18n;
}
useEffect(() => {
if (i18nOption) {
for (const lang of Object.keys(i18nOption)) {
i18n.addResourceBundle(
lang,
'translations',
i18nOption[lang],
true,
true
);
}
}
}, [i18nOption]);

useEffect(() => {
if (language) {
i18n.changeLanguage(language);
}
}, [language]);

const [form, dispatchFormAction] = useReducer(reducer, _cloneDeep(propsForm));
useEffect(() => {
const {form: newForm} = props;
Expand Down Expand Up @@ -73,32 +101,38 @@ const FormEdit = (props) => {
<div className="row" ref={ref}>
<div className="col-lg-2 col-md-4 col-sm-4">
<div id="form-group-title" className="form-group">
<label htmlFor="title" className="control-label field-required">Title</label>
<label htmlFor="title" className="control-label field-required">
<Trans>Title</Trans>
</label>
<input
type="text"
className="form-control" id="title"
placeholder="Enter the form title"
placeholder={t('Enter the form title')}
value={form.title || ''}
onChange={event => handleChange('title', event)}
/>
</div>
</div>
<div className="col-lg-2 col-md-4 col-sm-4">
<div id="form-group-name" className="form-group">
<label htmlFor="name" className="control-label field-required">Name</label>
<label htmlFor="name" className="control-label field-required">
<Trans>Name</Trans>
</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter the form machine name"
placeholder={t('Enter the form machine name')}
value={form.name || ''}
onChange={event => handleChange('name', event)}
/>
</div>
</div>
<div className="col-lg-2 col-md-3 col-sm-3">
<div id="form-group-display" className="form-group">
<label htmlFor="name" className="control-label">Display as</label>
<label htmlFor="name" className="control-label">
<Trans>Display as</Trans>
</label>
<div className="input-group">
<select
className="form-control"
Expand All @@ -107,16 +141,18 @@ const FormEdit = (props) => {
value={form.display || ''}
onChange={event => handleChange('display', event)}
>
<option label="Form" value="form">Form</option>
<option label="Wizard" value="wizard">Wizard</option>
<option label="PDF" value="pdf">PDF</option>
<option label={t('Form')} value="form">Form</option>
<option label={t('Wizard')} value="wizard">Wizard</option>
<option label={t('PDF')} value="pdf">PDF</option>
</select>
</div>
</div>
</div>
<div className="col-lg-2 col-md-3 col-sm-3">
<div id="form-group-type" className="form-group">
<label htmlFor="form-type" className="control-label">Type</label>
<label htmlFor="form-type" className="control-label">
<Trans>Type</Trans>
</label>
<div className="input-group">
<select
className="form-control"
Expand All @@ -125,21 +161,23 @@ const FormEdit = (props) => {
value={form.type}
onChange={event => handleChange('type', event)}
>
<option label="Form" value="form">Form</option>
<option label="Resource" value="resource">Resource</option>
<option label={t('Form')} value="form">Form</option>
<option label={t('Resource')} value="resource">Resource</option>
</select>
</div>
</div>
</div>
<div className="col-lg-2 col-md-4 col-sm-4">
<div id="form-group-path" className="form-group">
<label htmlFor="path" className="control-label field-required">Path</label>
<label htmlFor="path" className="control-label field-required">
<Trans>Path</Trans>
</label>
<div className="input-group">
<input
type="text"
className="form-control"
id="path"
placeholder="example"
placeholder={t('example')}
style={{'textTransform': 'lowercase', width:'120px'}}
value={form.path || ''}
onChange={event => handleChange('path', event)}
Expand Down
23 changes: 23 additions & 0 deletions src/i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import {initReactI18next} from 'react-i18next';
import englishTranslation from './translations/en';

i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources: {
en: {
translations: englishTranslation
},
},
fallbackLng: 'en',
ns: 'translations',
keySeparator: false, // recommended when working with flat objects
interpolation: {
escapeValue: false
}
});

export default i18n;
1 change: 1 addition & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {Formio} from 'formiojs';
import './i18n';
const Webform = Formio.Webform;
const WebformBuilder = Formio.WebformBuilder;
const Wizard = Formio.Wizard;
Expand Down
14 changes: 14 additions & 0 deletions src/translations/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export default {
Title: 'Title',
Name: 'Name',
'Display as': 'Display as',
Type: 'Type',
Form: 'Form',
Resource: 'Resource',
Path: 'Path',
'Enter the form title': 'Enter the form title',
Wizard: 'Wizard',
PDF: 'PDF',
'Enter the form machine name': 'Enter the form machine name',
'example': 'example'
};
60 changes: 59 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==

"@babel/runtime@^7.20.6", "@babel/runtime@^7.9.2":
"@babel/runtime@^7.19.4", "@babel/runtime@^7.20.6", "@babel/runtime@^7.22.5", "@babel/runtime@^7.9.2":
version "7.23.1"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
Expand Down Expand Up @@ -513,6 +513,25 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.2.3.tgz#b31eb300610c3835ac008d690de6f87e28f9b878"
integrity sha512-pg9d0yC4rVNWQzX8U7xb4olIOFuuVL9za3bzMT2pu2SU0SNEi66i2qrvhE2qt0HvkhuCaWJu7pLNOt/Pj8BIrw==

"@types/prop-types@*":
version "15.7.8"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.8.tgz#805eae6e8f41bd19e88917d2ea200dc992f405d3"
integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==

"@types/react@^18.2.25":
version "18.2.25"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.25.tgz#99fa44154132979e870ff409dc5b6e67f06f0199"
integrity sha512-24xqse6+VByVLIr+xWaQ9muX1B4bXJKXBbjszbld/UEDslGLY53+ZucF44HCmLbMPejTzGG9XgR+3m2/Wqu1kw==
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"

"@types/scheduler@*":
version "0.16.4"
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.4.tgz#fedc3e5b15c26dc18faae96bf1317487cb3658cf"
integrity sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==

"@webassemblyjs/[email protected]", "@webassemblyjs/ast@^1.11.5":
version "1.11.6"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
Expand Down Expand Up @@ -2297,6 +2316,11 @@ cssstyle@^3.0.0:
dependencies:
rrweb-cssom "^0.6.0"

csstype@^3.0.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==

custom-event-polyfill@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
Expand Down Expand Up @@ -3826,6 +3850,13 @@ html-encoding-sniffer@^3.0.0:
dependencies:
whatwg-encoding "^2.0.0"

html-parse-stringify@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
dependencies:
void-elements "3.1.0"

htmlparser2@^8.0.1:
version "8.0.2"
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
Expand Down Expand Up @@ -3873,13 +3904,27 @@ https-proxy-agent@^5.0.1:
agent-base "6"
debug "4"

i18next-browser-languagedetector@^7.1.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.1.0.tgz#01876fac51f86b78975e79b48ccb62e2313a2d7d"
integrity sha512-cr2k7u1XJJ4HTOjM9GyOMtbOA47RtUoWRAtt52z43r3AoMs2StYKyjS3URPhzHaf+mn10hY9dZWamga5WPQjhA==
dependencies:
"@babel/runtime" "^7.19.4"

[email protected]:
version "22.4.12"
resolved "https://registry.yarnpkg.com/i18next/-/i18next-22.4.12.tgz#fde322c186501ea1adcdfac41b2d2552b26eab42"
integrity sha512-2lE+vRXxQ3lGLub1CVbwgO0IfkLHmUSDVOAVdPh22CsxttMXi+35n2qgxh2wZIkKl6t/NMzPfgFPRDiFQOmiCg==
dependencies:
"@babel/runtime" "^7.20.6"

i18next@^23.5.1:
version "23.5.1"
resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.5.1.tgz#7f7c35ffaa907618d9489f106d5006b09fbca3d3"
integrity sha512-JelYzcaCoFDaa+Ysbfz2JsGAKkrHiMG6S61+HLBUEIPaF40WMwW9hCPymlQGrP+wWawKxKPuSuD71WZscCsWHg==
dependencies:
"@babel/runtime" "^7.22.5"

[email protected]:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
Expand Down Expand Up @@ -5531,6 +5576,14 @@ react-dom@^18.1.0:
loose-envify "^1.1.0"
scheduler "^0.23.0"

react-i18next@^13.2.2:
version "13.2.2"
resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.2.2.tgz#b1e78ed66a54f4bc819616f68b98221e1b1a1936"
integrity sha512-+nFUkbRByFwnrfDcYqvzBuaeZb+nACHx+fAWN/pZMddWOCJH5hoc21+Sa/N/Lqi6ne6/9wC/qRGOoQhJa6IkEQ==
dependencies:
"@babel/runtime" "^7.22.5"
html-parse-stringify "^3.0.1"

"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
Expand Down Expand Up @@ -6670,6 +6723,11 @@ vary@^1:
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==

[email protected]:
version "3.1.0"
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==

void-elements@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
Expand Down