Skip to content

Commit 4d8aa5b

Browse files
committed
Merge pull request marmelab#56 from marmelab/add_json_field
[RFR] Add JSON field
2 parents e7f02ba + 97e3dbf commit 4d8aa5b

File tree

12 files changed

+122
-20
lines changed

12 files changed

+122
-20
lines changed

app/Component/Column/BooleanColumn.js

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,17 @@ import React from 'react';
22

33
class BooleanColumn extends React.Component {
44
render() {
5-
const {value, detailAction} = this.props;
5+
const {value} = this.props;
66
const className = !!value ? 'boolean-true' : 'boolean-false';
77

8-
if (detailAction) {
9-
return <a onClick={detailAction} className={className}>{value}</a>;
10-
}
11-
128
return (
139
<span className={className}></span>
1410
);
1511
}
1612
}
1713

1814
BooleanColumn.propTypes = {
19-
value: React.PropTypes.any.isRequired,
20-
detailAction: React.PropTypes.func
15+
value: React.PropTypes.any.isRequired
2116
};
2217

2318
require('../../autoloader')('BooleanColumn', BooleanColumn);

app/Component/Column/StringColumn.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,6 @@ StringColumn.propTypes = {
1212
value: React.PropTypes.any
1313
};
1414

15+
require('../../autoloader')('StringColumn', StringColumn);
16+
1517
export default StringColumn;

app/Component/Compile.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import objectAssign from 'object-assign';
55

66
import { MaBackButton, MaCreateButton, MaShowButton, MaEditButton, MaDeleteButton, MaListButton } from './Button';
77
import { StringColumn, BooleanColumn, DateColumn, NumberColumn, ReferenceColumn, ReferenceManyColumn, TemplateColumn, JsonColumn, ReferencedList, WysiwygColumn } from './Column';
8-
import { InputField, CheckboxField, ButtonField } from './Field';
8+
import { InputField, CheckboxField, ButtonField, JsonField, DateField, SelectField, TextField, WysiwygField } from './Field';
99

1010
const Components = {
1111
MaBackButton, MaCreateButton, MaShowButton, MaEditButton, MaDeleteButton, MaListButton,
1212
StringColumn, BooleanColumn, DateColumn, NumberColumn, ReferenceColumn, ReferenceManyColumn, TemplateColumn, JsonColumn, ReferencedList, WysiwygColumn,
13-
InputField, CheckboxField, ButtonField,
13+
InputField, CheckboxField, ButtonField, JsonField, DateField, SelectField, TextField, WysiwygField,
1414
Link, React
1515
};
1616

app/Component/Field/DateField.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,6 @@ DateField.propTypes = {
5151
updateField: React.PropTypes.func
5252
};
5353

54+
require('../../autoloader')('DateField', DateField);
55+
5456
export default DateField;

app/Component/Field/JsonField.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import formatJson from 'format-json';
3+
import Codemirror from 'react-codemirror';
4+
5+
class JsonField extends React.Component {
6+
onChange(code) {
7+
if (code && typeof(code) === 'string') {
8+
try {
9+
code = JSON.parse(code);
10+
} catch (e) {
11+
/* Invalid JSON*/
12+
}
13+
}
14+
15+
this.props.updateField(this.props.name, code);
16+
}
17+
18+
render() {
19+
let {value} = this.props;
20+
const onChange = this.onChange.bind(this);
21+
const options = {
22+
lineNumbers: true,
23+
matchBrackets: true,
24+
autoCloseBrackets: true,
25+
lineWrapping: true,
26+
tabSize: true,
27+
mode: 'javascript',
28+
gutters: ["CodeMirror-lint-markers"],
29+
stylesheet: "css/jscolors.css",
30+
lint: true,
31+
styleActiveLine: true
32+
};
33+
34+
if (value && typeof(value) === 'object') {
35+
value = formatJson.plain(value);
36+
}
37+
38+
return <Codemirror value={value} onChange={onChange} options={options} />;
39+
}
40+
}
41+
42+
JsonField.propTypes = {
43+
name: React.PropTypes.string.isRequired,
44+
value: React.PropTypes.any,
45+
updateField: React.PropTypes.func
46+
};
47+
48+
require('../../autoloader')('JsonField', JsonField);
49+
50+
export default JsonField;

app/Component/Field/SelectField.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,6 @@ SelectField.propTypes = {
2929
updateField: React.PropTypes.func
3030
};
3131

32+
require('../../autoloader')('SelectField', SelectField);
33+
3234
export default SelectField;

app/Component/Field/WysiwygField.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,6 @@ WysiwygField.propTypes = {
2727
updateField: React.PropTypes.func
2828
};
2929

30+
require('../../autoloader')('WysiwygField', WysiwygField);
31+
3032
export default WysiwygField;
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
jest.autoMockOff();
2+
3+
describe('JsonField', () => {
4+
let React, TestUtils, JsonField, Codemirror, values = {};
5+
const onChange = (name, value) => { values[name] = value; };
6+
7+
beforeEach(() => {
8+
React = require('react/addons');
9+
TestUtils = React.addons.TestUtils;
10+
JsonField = require('../JsonField');
11+
Codemirror = require('react-codemirror');
12+
});
13+
14+
it('should get a code mirror field with correct props and state', () => {
15+
const value = 'var code;';
16+
const instance = TestUtils.renderIntoDocument(<JsonField name="my_field" value={value} updateField={onChange}/>);
17+
const editor = TestUtils.findRenderedComponentWithType(instance, Codemirror);
18+
19+
expect(editor.props.value).toBe(value);
20+
21+
editor.codemirrorValueChanged({
22+
getValue: () => {
23+
return 'var code = 1;';
24+
}
25+
});
26+
27+
expect(values).toEqual({ 'my_field': 'var code = 1;' });
28+
});
29+
});

app/Component/Field/index.js

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
1-
import InputField from './InputField';
1+
import ButtonField from './ButtonField';
22
import CheckboxField from './CheckboxField';
3+
import DateField from './DateField';
4+
import InputField from './InputField';
5+
import JsonField from './JsonField';
36
import SelectField from './SelectField';
7+
import TextField from './TextField';
8+
import WysiwygField from './WysiwygField';
49

510
export {
6-
InputField,
11+
ButtonField,
712
CheckboxField,
8-
SelectField
13+
DateField,
14+
InputField,
15+
JsonField,
16+
SelectField,
17+
TextField,
18+
WysiwygField
919
};

app/Field/JsonFieldView.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import JsonColumn from '../Component/Column/JsonColumn';
3-
import InputField from '../Component/Field/InputField';
3+
import JsonField from '../Component/Field/JsonField';
44

55
class JsonFieldView {
66
static getReadWidget() {
@@ -17,8 +17,7 @@ class JsonFieldView {
1717
}
1818

1919
static getWriteWidget() {
20-
// @TODO : use json input when implemented
21-
return <InputField type={"text"} name={this.props.fieldName} value={this.props.value} updateField={this.props.updateField} />;
20+
return <JsonField name={this.props.fieldName} value={this.props.value} updateField={this.props.updateField} />;
2221
}
2322
}
2423

0 commit comments

Comments
 (0)