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

Merge branch 'master' into OS-65-table-pagination

This commit is contained in:
ivan 2016-09-20 21:14:33 -03:00
parent d39c6e0698 be9919baef
commit 36a8e77d8b
10 changed files with 53 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/package.json
View File

@ -70,6 +70,7 @@
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"react-router-redux": "^4.0.5",
"react-rte-browserify": "^0.5.0",
"redux": "^3.5.2",
"redux-promise-middleware": "^3.3.2"
}

4
client/src/core-components/__tests__/form-field-test.js
View File

@ -3,7 +3,7 @@ const Checkbox = ReactMock();
const DropDown = ReactMock();
const TextEditor = ReactMock();
const {EditorState} = require('draft-js');
const RichTextEditor = require('react-rte-browserify');
const FormField = requireUnit('core-components/form-field', {
'core-components/input': Input,
@ -35,7 +35,7 @@ describe('FormField component', function () {
expect(FormField.getDefaultValue('input')).to.equal('');
expect(FormField.getDefaultValue('checkbox')).to.equal(false);
expect(FormField.getDefaultValue('select')).to.equal(0);
expect(FormField.getDefaultValue('textarea') instanceof EditorState).to.equal(true);
expect(FormField.getDefaultValue('textarea') instanceof RichTextEditor.EditorValue).to.equal(true);
});
});

32
client/src/core-components/__tests__/form-test.js
View File

@ -1,15 +1,11 @@
// MOCKS
const ValidationFactoryMock = require('lib-app/__mocks__/validations/validation-factory-mock');
const FormField = ReactMock();
const {EditorState} = require('draft-js');
const draftJsExportHTML = {
stateToHTML: stub().returns('HTML_CODE')
};
const RichTextEditor = require('react-rte-browserify');
// COMPONENT
const Form = requireUnit('core-components/form', {
'lib-app/validations/validations-factory': ValidationFactoryMock,
'draft-js-export-html': draftJsExportHTML,
'core-components/form-field': FormField
});
@ -176,19 +172,6 @@ describe('Form component', function () {
expect(form.props.onSubmit).to.have.been.calledWith(form.state.form);
});
it('should tranform EditorState to HTML usign draft-js-export-html library', function () {
draftJsExportHTML.stateToHTML.reset();
form.state.form.first = EditorState.createEmpty();
TestUtils.Simulate.submit(ReactDOM.findDOMNode(form));
expect(draftJsExportHTML.stateToHTML).to.have.been.calledWith(form.state.form.first.getCurrentContent());
expect(form.props.onSubmit).to.have.been.calledWith({
first: 'HTML_CODE',
second: 'value2',
third: 'value3'
});
});
it('should validate all fields and not call onSubmit if there are errors', function () {
ValidationFactoryMock.validators.defaultValidatorMock.performValidation = stub().returns('MOCK_ERROR');
ValidationFactoryMock.validators.customValidatorMock.performValidation = stub().returns('MOCK_ERROR_2');
@ -203,6 +186,19 @@ describe('Form component', function () {
expect(form.props.onSubmit).to.not.have.been.called;
});
it('should tranform RichTextEditor value to HTML', function () {
form.state.form.first = RichTextEditor.createEmptyValue();
form.state.form.first.toString = stub().returns('HTML_CODE');
TestUtils.Simulate.submit(ReactDOM.findDOMNode(form));
expect(form.state.form.first.toString).to.have.been.called;
expect(form.props.onSubmit).to.have.been.calledWith({
first: 'HTML_CODE',
second: 'value2',
third: 'value3'
});
});
it('should focus the first field with error', function () {
ValidationFactoryMock.validators.defaultValidatorMock.performValidation = stub().returns('MOCK_ERROR');
ValidationFactoryMock.validators.customValidatorMock.performValidation = stub().returns('MOCK_ERROR_2');

4
client/src/core-components/form-field.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import {EditorState} from 'draft-js';
import RichTextEditor from 'react-rte-browserify';
import classNames from 'classnames';
import _ from 'lodash';
@ -36,7 +36,7 @@ class FormField extends React.Component {
return false;
}
else if (field === 'textarea') {
return EditorState.createEmpty();
return RichTextEditor.createEmptyValue();
}
else if (field === 'select') {
return 0;

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

@ -1,8 +1,7 @@
import React from 'react';
import _ from 'lodash';
import classNames from 'classnames';
import {EditorState} from 'draft-js';
import {stateToHTML} from 'draft-js-export-html';
import RichTextEditor from 'react-rte-browserify';
import {reactDFS, renderChildrenWithProps} from 'lib-core/react-dfs';
import ValidationFactory from 'lib-app/validations/validations-factory';
@ -158,8 +157,8 @@ class Form extends React.Component {
event.preventDefault();
const form = _.mapValues(this.state.form, (field) => {
if (field instanceof EditorState) {
return stateToHTML(field.getCurrentContent());
if (field instanceof RichTextEditor.EditorValue) {
return field.toString('html');
} else {
return field;
}

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

@ -1,9 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import _ from 'lodash';
import {Editor, EditorState, RichUtils} from 'draft-js';
import Button from 'core-components/button';
import RichTextEditor from 'react-rte-browserify';
class TextEditor extends React.Component {
static propTypes = {
@ -12,52 +9,19 @@ class TextEditor extends React.Component {
value: React.PropTypes.object
};
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
focused: false
};
}
state = {
value: RichTextEditor.createEmptyValue(),
focused: false
};
render() {
return (
<div className={this.getClass()}>
{this.renderEditOptions()}
<div className="text-editor__editor" onClick={this.focus.bind(this)} onMouseDown={(event) => event.preventDefault()}>
<span onMouseDown={(event) => event.stopPropagation()}>
<Editor {...this.getEditorProps()} />
</span>
</div>
<RichTextEditor {...this.getEditorProps()} />
</div>
);
}
renderEditOptions() {
const onBoldClick = (event) => {
event.preventDefault();
this.onEditorChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
};
const onItalicsClick = (event) => {
event.preventDefault();
this.onEditorChange(RichUtils.toggleInlineStyle(this.state.editorState, 'ITALIC'));
};
const onUnderlineClick = (event) => {
event.preventDefault();
this.onEditorChange(RichUtils.toggleInlineStyle(this.state.editorState, 'UNDERLINE'));
};
return (
<div className="text-editor__options">
<Button type="primary" size="auto" iconName="bold" onClick={onBoldClick.bind(this)} onMouseDown={(e) => {e.preventDefault()}} />
<Button type="primary" size="auto" iconName="italic" onClick={onItalicsClick.bind(this)} onMouseDown={(e) => {e.preventDefault()}} />
<Button type="primary" size="auto" iconName="underline" onClick={onUnderlineClick.bind(this)} onMouseDown={(e) => {e.preventDefault()}} />
</div>
)
}
getClass() {
let classes = {
'text-editor': true,
@ -72,7 +36,8 @@ class TextEditor extends React.Component {
getEditorProps() {
return {
editorState: this.props.value || this.state.editorState,
className: 'text-editor__editor',
value: this.state.value,
ref: 'editor',
onChange: this.onEditorChange.bind(this),
onFocus: this.onEditorFocus.bind(this),
@ -80,15 +45,11 @@ class TextEditor extends React.Component {
};
}
onEditorChange(editorState) {
this.setState({editorState});
onEditorChange(value) {
this.setState({value});
if (this.props.onChange) {
this.props.onChange({
target: {
value: editorState
}
});
this.props.onChange({target: {value}});
}
}
@ -110,7 +71,7 @@ class TextEditor extends React.Component {
focus() {
if (this.refs.editor) {
this.refs.editor.focus();
this.refs.editor._focus();
}
}
}

21
client/src/core-components/text-editor.scss
View File

@ -2,27 +2,12 @@
.text-editor {
&__editor {
background-color: white;
.text-editor__editor {
border: 1px solid $grey;
border-radius: 3px;
padding: 8px;
width: 100%;
height: 200px;
text-align: left;
overflow: auto;
&:hover {
border-color: $medium-grey;
}
}
&__options {
text-align: left;
margin-bottom: 5px;
.button {
margin-right: 3px;
.DraftEditor-root {
height: 200px;
}
}

10
client/src/data/fixtures/ticket-fixtures.js
View File

@ -21,5 +21,15 @@ module.exports = [
return response;
}
},
{
path: '/ticket/comment',
time: 1000,
response: function () {
return {
status: 'success',
data: {}
};
}
}
];

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

@ -1,4 +1,4 @@
import {EditorState} from 'draft-js';
import RichTextEditor from 'react-rte-browserify';
import Validator from 'lib-app/validations/validator';
@ -11,8 +11,8 @@ class LengthValidator extends Validator {
}
validate(value, form) {
if (value instanceof EditorState) {
value = value.getCurrentContent().getPlainText();
if (value instanceof RichTextEditor.EditorValue) {
value = value.getEditorState().getCurrentContent().getPlainText();
}
if (value.length < this.minlength) return this.getError(this.errorKey);

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

@ -1,4 +1,4 @@
import {EditorState} from 'draft-js';
import RichTextEditor from 'react-rte-browserify';
import i18n from 'lib-app/i18n';
@ -20,8 +20,8 @@ class Validator {
}
validate(value, form) {
if (value instanceof EditorState) {
value = value.getCurrentContent().getPlainText()
if (value instanceof RichTextEditor.EditorValue) {
value = value.getEditorState().getPlainText()
}
if (value.length === 0) return this.getError('ERROR_EMPTY');