From 3253770ff6a14b87bc8b497945179927ca7ba283 Mon Sep 17 00:00:00 2001 From: ov Date: Tue, 11 Aug 2020 14:56:45 +0100 Subject: [PATCH] Spanish Translation Modals for Sketch Menu (#1538) * NewFileModal spanish transaltion translations.json (both languages EN - ES) changes in NewFileForm.jsx and NewFileModal.jsx to link the new keys. * NewFolderModal spanish translation translations.json (both languages EN - ES) changes in NewFileForm.jsx and NewFileModal.jsx to link the new keys. --- client/modules/IDE/components/NewFileForm.jsx | 10 +++++---- .../modules/IDE/components/NewFileModal.jsx | 17 ++++++++------- .../modules/IDE/components/NewFolderForm.jsx | 11 ++++++---- .../modules/IDE/components/NewFolderModal.jsx | 19 ++++++++++------- translations/locales/en-US/translations.json | 21 +++++++++++++++++++ translations/locales/es-419/translations.json | 21 +++++++++++++++++++ 6 files changed, 76 insertions(+), 23 deletions(-) diff --git a/client/modules/IDE/components/NewFileForm.jsx b/client/modules/IDE/components/NewFileForm.jsx index 9c0234f7..748bd3c2 100644 --- a/client/modules/IDE/components/NewFileForm.jsx +++ b/client/modules/IDE/components/NewFileForm.jsx @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { withTranslation } from 'react-i18next'; import { domOnlyProps } from '../../../utils/reduxFormUtils'; import Button from '../../../common/Button'; @@ -30,14 +31,14 @@ class NewFileForm extends React.Component { className="new-file-form__name-input" id="name" type="text" - placeholder="Name" + placeholder={this.props.t('NewFileForm.Placeholder')} maxLength="128" {...domOnlyProps(name)} ref={(element) => { this.fileName = element; }} /> {name.touched && name.error && {name.error}} @@ -52,7 +53,8 @@ NewFileForm.propTypes = { }).isRequired, handleSubmit: PropTypes.func.isRequired, createFile: PropTypes.func.isRequired, - focusOnModal: PropTypes.func.isRequired + focusOnModal: PropTypes.func.isRequired, + t: PropTypes.func.isRequired }; -export default NewFileForm; +export default withTranslation()(NewFileForm); diff --git a/client/modules/IDE/components/NewFileModal.jsx b/client/modules/IDE/components/NewFileModal.jsx index 412d9895..791cb0af 100644 --- a/client/modules/IDE/components/NewFileModal.jsx +++ b/client/modules/IDE/components/NewFileModal.jsx @@ -3,6 +3,8 @@ import React from 'react'; import { connect } from 'react-redux'; import { bindActionCreators, compose } from 'redux'; import { reduxForm } from 'redux-form'; +import { withTranslation } from 'react-i18next'; +import i18n from 'i18next'; import NewFileForm from './NewFileForm'; import { closeNewFileModal } from '../actions/ide'; import { createFile } from '../actions/files'; @@ -33,11 +35,11 @@ class NewFileModal extends React.Component {
{ this.modal = element; }}>
-

Create File

+

{this.props.t('NewFileModal.Title')}

@@ -54,16 +56,17 @@ class NewFileModal extends React.Component { NewFileModal.propTypes = { createFile: PropTypes.func.isRequired, - closeNewFileModal: PropTypes.func.isRequired + closeNewFileModal: PropTypes.func.isRequired, + t: PropTypes.func.isRequired }; function validate(formProps) { const errors = {}; if (!formProps.name) { - errors.name = 'Please enter a name'; + errors.name = i18n.t('NewFileModal.EnterName'); } else if (!formProps.name.match(CREATE_FILE_REGEX)) { - errors.name = 'Invalid file type. Valid extensions are .js, .css, .json, .txt, .csv, .tsv, .frag, and .vert.'; + errors.name = i18n.t('NewFileModal.InvalidType'); } return errors; @@ -77,11 +80,11 @@ function mapDispatchToProps(dispatch) { return bindActionCreators({ createFile, closeNewFileModal }, dispatch); } -export default compose( +export default withTranslation()(compose( connect(mapStateToProps, mapDispatchToProps), reduxForm({ form: 'new-file', fields: ['name'], validate }) -)(NewFileModal); +)(NewFileModal)); diff --git a/client/modules/IDE/components/NewFolderForm.jsx b/client/modules/IDE/components/NewFolderForm.jsx index c5e0b564..ca45d527 100644 --- a/client/modules/IDE/components/NewFolderForm.jsx +++ b/client/modules/IDE/components/NewFolderForm.jsx @@ -1,9 +1,11 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { withTranslation } from 'react-i18next'; import { domOnlyProps } from '../../../utils/reduxFormUtils'; import Button from '../../../common/Button'; + class NewFolderForm extends React.Component { constructor(props) { super(props); @@ -32,13 +34,13 @@ class NewFolderForm extends React.Component { id="name" type="text" maxLength="128" - placeholder="Name" + placeholder={this.props.t('NewFolderForm.Placeholder')} ref={(element) => { this.fileName = element; }} {...domOnlyProps(name)} />
{name.touched && name.error && {name.error}} @@ -55,10 +57,11 @@ NewFolderForm.propTypes = { createFolder: PropTypes.func.isRequired, closeModal: PropTypes.func.isRequired, submitting: PropTypes.bool, - pristine: PropTypes.bool + pristine: PropTypes.bool, + t: PropTypes.func.isRequired }; NewFolderForm.defaultProps = { submitting: false, pristine: true }; -export default NewFolderForm; +export default withTranslation()(NewFolderForm); diff --git a/client/modules/IDE/components/NewFolderModal.jsx b/client/modules/IDE/components/NewFolderModal.jsx index 13029d6c..bf897afa 100644 --- a/client/modules/IDE/components/NewFolderModal.jsx +++ b/client/modules/IDE/components/NewFolderModal.jsx @@ -1,6 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import { reduxForm } from 'redux-form'; +import { withTranslation } from 'react-i18next'; +import i18n from 'i18next'; import NewFolderForm from './NewFolderForm'; import ExitIcon from '../../../images/exit.svg'; @@ -15,11 +17,11 @@ class NewFolderModal extends React.Component {
{ this.newFolderModal = element; }} >
-

Create Folder

+

{this.props.t('NewFolderModal.Title')}

@@ -32,23 +34,24 @@ class NewFolderModal extends React.Component { } NewFolderModal.propTypes = { - closeModal: PropTypes.func.isRequired + closeModal: PropTypes.func.isRequired, + t: PropTypes.func.isRequired }; function validate(formProps) { const errors = {}; if (!formProps.name) { - errors.name = 'Please enter a name'; + errors.name = i18n.t('NewFolderModal.EnterName'); } else if (formProps.name.trim().length === 0) { - errors.name = 'Folder name cannot contain only spaces'; + errors.name = i18n.t('NewFolderModal.EmptyName'); } else if (formProps.name.match(/\.+/i)) { - errors.name = 'Folder name cannot contain an extension'; + errors.name = i18n.t('NewFolderModal.InvalidExtension'); } return errors; } -export default reduxForm({ +export default withTranslation()(reduxForm({ form: 'new-folder', fields: ['name'], validate -})(NewFolderModal); +})(NewFolderModal)); diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index 56a898f5..d0868580 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -173,5 +173,26 @@ }, "IDEView": { "SubmitFeedback": "Submit Feedback" + }, + "NewFileModal": { + "Title": "Create File", + "CloseButtonARIA": "Close New File Modal", + "EnterName": "Please enter a name", + "InvalidType": "Invalid file type. Valid extensions are .js, .css, .json, .txt, .csv, .tsv, .frag, and .vert." + }, + "NewFileForm": { + "AddFileSubmit": "Add File", + "Placeholder": "Name" +}, + "NewFolderModal": { + "Title": "Create Folder", + "CloseButtonARIA": "Close New Folder Modal", + "EnterName": "Please enter a name", + "EmptyName": "Folder name cannot contain only spaces", + "InvalidExtension": "Folder name cannot contain an extension" + }, + "NewFolderForm": { + "AddFolderSubmit": "Add Folder", + "Placeholder": "Name" } } diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json index 8b8d8f87..398da8dc 100644 --- a/translations/locales/es-419/translations.json +++ b/translations/locales/es-419/translations.json @@ -172,6 +172,27 @@ }, "IDEView": { "SubmitFeedback": "Enviar retroalimentación" + }, + "NewFileModal": { + "Title": "Crear Archivo", + "CloseButtonARIA": "Cerrar diálogo de crear archivo", + "EnterName": "Por favor introduce un nombre", + "InvalidType": "Tipo de archivo inválido. Las extensiones válidas son .js, .css, .json, .txt, .csv, .tsv, .frag y .vert." + }, + "NewFileForm": { + "AddFileSubmit": "Agregar Archivo", + "Placeholder": "Nombre" + }, + "NewFolderModal": { + "Title": "Crear Directorio", + "CloseButtonARIA": "Cerrar Diálogo de Nuevo Directorio", + "EnterName": "Por favor introduce un nombre", + "EmptyName": " El nombre del directorio no debe contener solo espacios vacíos", + "InvalidExtension": "El nombre del directorio no debe contener una extensión" +}, + "NewFolderForm": { + "AddFolderSubmit": "Agregar Directorio", + "Placeholder": "Nombre" } }