tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Create Ticket Form - Fix TextEditor issues [skip ci]

This commit is contained in:
ivan 2016-08-18 17:49:52 -03:00
parent 99e9392c45
commit 9813dd0ebd
10 changed files with 68 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/package.json
View File

@ -56,6 +56,7 @@
"app-module-path": "^1.0.3",
"classnames": "^2.1.3",
"draft-js": "^0.8.1",
"draft-js-export-html": "^0.4.0",
"jquery": "^2.1.4",
"keycode": "^2.1.4",
"localStorage": "^1.0.3",

3
client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js
View File

@ -23,7 +23,8 @@ class CreateTicketForm extends React.Component {
{content: 'Department3'}
]} />
<Input label="Title" name="title" required />
<TextArea label="Content" name="content" required />
<TextArea label="Content" name="content" required validation="TEXT_AREA" />
<SubmitButton>Sumibtea ameo</SubmitButton>
</Form>
</div>
);

1
client/src/core-components/button.js
View File

@ -50,6 +50,7 @@ class Button extends React.Component {
props.className = this.getClass();
delete props.route;
delete props.iconName;
delete props.type;
return props;

23
client/src/core-components/form.js
View File

@ -1,17 +1,20 @@
import React from 'react';
import _ from 'lodash';
import classNames from 'classnames';
import {EditorState} from 'draft-js';
import {stateToHTML} from 'draft-js-export-html';
import {reactDFS, renderChildrenWithProps} from 'lib-core/react-dfs';
import ValidationFactory from 'lib-app/validations/validations-factory';
import Input from 'core-components/input';
import Checkbox from 'core-components/checkbox';
//import TextArea from 'core-components/text-area';
import TextArea from 'core-components/text-area';
const validFieldTypes = [
Input,
CheckBox
TextArea,
Checkbox
];
class Form extends React.Component {
@ -151,9 +154,9 @@ class Form extends React.Component {
else if (child.type === Checkbox) {
form[child.props.name] = child.props.checked || false;
}
// else if (child.type === TextArea) {
// DO SOMETHING
// }
else if (child.type === TextArea) {
form[child.props.name] = child.props.value || EditorState.createEmpty();
}
if (child.props.required) {
validations[child.props.name] = ValidationFactory.getValidator(child.props.validation || 'DEFAULT');
@ -170,10 +173,18 @@ class Form extends React.Component {
handleSubmit(event) {
event.preventDefault();
const form = _.mapValues(this.state.form, (field) => {
if (field instanceof EditorState) {
return stateToHTML(field.getCurrentContent());
} else {
return field;
}
});
if (this.hasFormErrors()) {
this.updateErrors(this.getAllFieldErrors(), this.focusFirstErrorField.bind(this));
} else if (this.props.onSubmit) {
this.props.onSubmit(this.state.form);
this.props.onSubmit(form);
}
}

5
client/src/core-components/text-area.js
View File

@ -11,7 +11,7 @@ class TextArea extends React.Component {
};
static propTypes = {
value: React.PropTypes.string,
value: React.PropTypes.object,
validation: React.PropTypes.string,
onChange: React.PropTypes.func,
required: React.PropTypes.bool,
@ -45,6 +45,9 @@ class TextArea extends React.Component {
props.className = 'text-area__input';
props.ref = 'nativeTextArea';
props.disabled = this.context.loading;
props.value = this.props.value;
props.onChange = this.props.onChange;
props.errored = !!this.props.error;
delete props.required;
delete props.validation;

34
client/src/core-components/text-editor.js
View File

@ -7,7 +7,9 @@ import Button from 'core-components/button';
class TextEditor extends React.Component {
static propTypes = {
error: React.PropTypes.bool
errored: React.PropTypes.bool,
onChange: React.PropTypes.func,
value: React.PropTypes.object
};
constructor(props) {
@ -23,8 +25,10 @@ class TextEditor extends React.Component {
return (
<div className={this.getClass()}>
{this.renderEditOptions()}
<div className="text-editor__editor" onClick={this.focus.bind(this)}>
<Editor {...this.getEditorProps()} />
<div className="text-editor__editor" onClick={this.focus.bind(this)} onMouseDown={(event) => event.preventDefault()}>
<span onMouseDown={(event) => event.stopPropagation()}>
<Editor {...this.getEditorProps()} />
</span>
</div>
</div>
);
@ -37,7 +41,7 @@ class TextEditor extends React.Component {
};
const onItalicsClick = (event) => {
event.preventDefault();
this.onEditorChange(RichUtils.toggleInlineStyle(this.state.editorState, 'ITALICS'));
this.onEditorChange(RichUtils.toggleInlineStyle(this.state.editorState, 'ITALIC'));
};
const onUnderlineClick = (event) => {
event.preventDefault();
@ -68,7 +72,7 @@ class TextEditor extends React.Component {
getEditorProps() {
return {
editorState: this.state.editorState,
editorState: this.props.value || this.state.editorState,
ref: 'editor',
onChange: this.onEditorChange.bind(this),
onFocus: this.onEditorFocus.bind(this),
@ -78,14 +82,30 @@ class TextEditor extends React.Component {
onEditorChange(editorState) {
this.setState({editorState});
if (this.props.onChange) {
this.props.onChange({
target: {
value: editorState
}
});
}
}
onEditorFocus() {
onEditorFocus(event) {
this.setState({focused: true});
if(this.props.onFocus) {
this.props.onFocus(event)
}
}
onBlur() {
onBlur(event) {
this.setState({focused: false});
if(this.props.onBlur) {
this.props.onBlur(event)
}
}
focus() {

1
client/src/data/languages/en.js
View File

@ -21,6 +21,7 @@ export default {
'ERROR_PASSWORD': 'Invalid password',
'ERROR_NAME': 'Invalid name',
'ERROR_EMAIL': 'Invalid email',
'ERROR_CONTENT_SHORT': 'Content too short',
'PASSWORD_NOT_MATCH': 'Password does not match',
'INVALID_RECOVER': 'Invalid recover data',

6
client/src/lib-app/validations/length-validator.js
View File

@ -1,3 +1,5 @@
import {EditorState} from 'draft-js';
import Validator from 'lib-app/validations/validator';
class LengthValidator extends Validator {
@ -9,6 +11,10 @@ class LengthValidator extends Validator {
}
validate(value, form) {
if (value instanceof EditorState) {
value = value.getCurrentContent().getPlainText();
}
if (value.length < this.minlength) return this.getError(this.errorKey);
}
}

1
client/src/lib-app/validations/validations-factory.js
View File

@ -8,6 +8,7 @@ let validators = {
'DEFAULT': new Validator(),
'NAME': new AlphaNumericValidator('ERROR_NAME', new LengthValidator(2, 'ERROR_NAME')),
'EMAIL': new EmailValidator(),
'TEXT_AREA': new LengthValidator(10, 'ERROR_CONTENT_SHORT'),
'PASSWORD': new LengthValidator(6, 'ERROR_PASSWORD'),
'REPEAT_PASSWORD': new RepeatPasswordValidator()
};

10
client/src/lib-app/validations/validator.js
View File

@ -1,4 +1,6 @@
const i18n = require('lib-app/i18n');
import {EditorState} from 'draft-js';
import i18n from 'lib-app/i18n';
class Validator {
constructor(validator = null) {
@ -18,7 +20,11 @@ class Validator {
}
validate(value, form) {
if (!value.length) return this.getError('ERROR_EMPTY');
if (value instanceof EditorState) {
value = value.getCurrentContent().getPlainText()
}
if (value.length === 0) return this.getError('ERROR_EMPTY');
}
getError(errorKey) {