From cc4858715d0d36221d8bebdd365e56d42efd42d5 Mon Sep 17 00:00:00 2001 From: ivan Date: Thu, 13 Oct 2016 17:58:48 -0300 Subject: [PATCH] Ivan - Add language selector using FormField [skip ci] --- client/src/app-components/language-selector.js | 13 +++++++++---- .../tickets/admin-panel-custom-responses.js | 18 +++++++++++++++--- client/src/app/main/main-layout-header.js | 6 +++--- client/src/core-components/form-field.js | 7 ++++++- client/src/data/languages/en.js | 1 + .../validations/alphanumeric-validator.js | 2 +- 6 files changed, 35 insertions(+), 12 deletions(-) diff --git a/client/src/app-components/language-selector.js b/client/src/app-components/language-selector.js index 5ee64a17..6f28c686 100644 --- a/client/src/app-components/language-selector.js +++ b/client/src/app-components/language-selector.js @@ -16,7 +16,7 @@ const languageCodes = Object.values(codeLanguages).concat(['en']); class LanguageSelector extends React.Component { static propTypes = { - language: React.PropTypes.oneOf(languageCodes) + value: React.PropTypes.oneOf(languageCodes) }; render() { @@ -30,7 +30,8 @@ class LanguageSelector extends React.Component { className: this.getClass(), items: this.getLanguageList(), selectedIndex: this.getSelectedIndex(), - onChange: this.changeLanguage.bind(this) + onChange: this.changeLanguage.bind(this), + size: this.props.size }; } @@ -60,7 +61,7 @@ class LanguageSelector extends React.Component { } getPropLanguage() { - let language = this.props.language; + let language = this.props.value; if (language === 'en') { language = 'us'; @@ -77,7 +78,11 @@ class LanguageSelector extends React.Component { } if (this.props.onChange) { - this.props.onChange(language); + this.props.onChange({ + target: { + value: language + } + }); } } } diff --git a/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js index 3a400595..4e4f8bf8 100644 --- a/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js +++ b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js @@ -8,6 +8,7 @@ import API from 'lib-app/api-call'; import AdminDataActions from 'actions/admin-data-actions'; import AreYouSure from 'app-components/are-you-sure'; +import LanguageSelector from 'app-components/language-selector'; import Icon from 'core-components/icon'; import Button from 'core-components/button'; @@ -28,7 +29,11 @@ class AdminPanelCustomResponses extends React.Component { selectedIndex: -1, edited: false, errors: {}, - form: {} + form: { + title: '', + content: RichTextEditor.createEmptyValue(), + language: 'en' + } }; componentDidMount() { @@ -54,7 +59,14 @@ class AdminPanelCustomResponses extends React.Component {
- +
+
+ +
+
+ +
+
@@ -154,7 +166,6 @@ class AdminPanelCustomResponses extends React.Component { API.call({ path: '/ticket/add-custom-response', data: { - id: this.state.selectedIndex, name: form.title, content: form.content, language: form.language @@ -188,6 +199,7 @@ class AdminPanelCustomResponses extends React.Component { form.title = (this.props.items[index] && this.props.items[index].name) || ''; form.content = RichTextEditor.createValueFromString((this.props.items[index] && this.props.items[index].content) || '', 'html'); + form.language = (this.props.items[index] && this.props.items[index].language) || 'en'; this.setState({ selectedIndex: index, diff --git a/client/src/app/main/main-layout-header.js b/client/src/app/main/main-layout-header.js index 00ff3f41..3744ab66 100644 --- a/client/src/app/main/main-layout-header.js +++ b/client/src/app/main/main-layout-header.js @@ -43,13 +43,13 @@ class MainLayoutHeader extends React.Component { getLanguageSelectorProps() { return { className: 'main-layout-header__languages', - language: this.props.config.language, + value: this.props.config.language, onChange: this.changeLanguage.bind(this) }; } - changeLanguage(language) { - this.props.dispatch(ConfigActions.changeLanguage(language)); + changeLanguage(event) { + this.props.dispatch(ConfigActions.changeLanguage(event.target.value)); } } diff --git a/client/src/core-components/form-field.js b/client/src/core-components/form-field.js index 2e2e7efb..ad93729a 100644 --- a/client/src/core-components/form-field.js +++ b/client/src/core-components/form-field.js @@ -14,6 +14,7 @@ class FormField extends React.Component { }; static propTypes = { + decorator: React.PropTypes.func, validation: React.PropTypes.string, onChange: React.PropTypes.func, onBlur: React.PropTypes.func, @@ -62,13 +63,17 @@ class FormField extends React.Component { } renderField() { - const Field = { + let Field = { 'input': Input, 'textarea': TextEditor, 'select': DropDown, 'checkbox': Checkbox }[this.props.field]; + if(this.props.decorator) { + Field = this.props.decorator; + } + return ; } diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 8517c52d..733b36e7 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -59,6 +59,7 @@ export default { 'SAVE': 'Save', 'DISCARD_CHANGES': 'Discard changes', 'DELETE': 'Delete', + 'LANGUAGE': 'Language', //VIEW DESCRIPTIONS 'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.', diff --git a/client/src/lib-app/validations/alphanumeric-validator.js b/client/src/lib-app/validations/alphanumeric-validator.js index c579ea85..01914b5c 100644 --- a/client/src/lib-app/validations/alphanumeric-validator.js +++ b/client/src/lib-app/validations/alphanumeric-validator.js @@ -8,7 +8,7 @@ class AlphaNumericValidator extends Validator { } validate(value, form) { - let alphaMatch = /^[ A-Za-z0-9_@./#&+-]*$/; + let alphaMatch = /^[ A-Za-z0-9_@./#&+-äöüÄÖÜß]*$/; if (!alphaMatch.test(value)) return this.getError(this.errorKey); }