Merge pull request marmelab#56 from marmelab/add_json_field

[RFR] Add JSON field

Author: jeromemacias

app/Component/Column/BooleanColumn.js

@@ -2,22 +2,17 @@ import React from 'react';
 
 class BooleanColumn extends React.Component {
     render() {
-        const {value, detailAction} = this.props;
+        const {value} = this.props;
         const className = !!value ? 'boolean-true' : 'boolean-false';
 
-        if (detailAction) {
-            return <a onClick={detailAction} className={className}>{value}</a>;
-        }
-
         return (
             <span className={className}></span>
         );
     }
 }
 
 BooleanColumn.propTypes = {
-    value: React.PropTypes.any.isRequired,
-    detailAction: React.PropTypes.func
+    value: React.PropTypes.any.isRequired
 };
 
 require('../../autoloader')('BooleanColumn', BooleanColumn);

app/Component/Column/StringColumn.js

@@ -12,4 +12,6 @@ StringColumn.propTypes = {
     value: React.PropTypes.any
 };
 
+require('../../autoloader')('StringColumn', StringColumn);
+
 export default StringColumn;

app/Component/Compile.js

@@ -5,12 +5,12 @@ import objectAssign from 'object-assign';
 
 import { MaBackButton, MaCreateButton, MaShowButton, MaEditButton, MaDeleteButton, MaListButton } from './Button';
 import { StringColumn, BooleanColumn, DateColumn, NumberColumn, ReferenceColumn, ReferenceManyColumn, TemplateColumn, JsonColumn, ReferencedList, WysiwygColumn } from './Column';
-import { InputField, CheckboxField, ButtonField } from './Field';
+import { InputField, CheckboxField, ButtonField, JsonField, DateField, SelectField, TextField, WysiwygField } from './Field';
 
 const Components = {
     MaBackButton, MaCreateButton, MaShowButton, MaEditButton, MaDeleteButton, MaListButton,
     StringColumn, BooleanColumn, DateColumn, NumberColumn, ReferenceColumn, ReferenceManyColumn, TemplateColumn, JsonColumn, ReferencedList, WysiwygColumn,
-    InputField, CheckboxField, ButtonField,
+    InputField, CheckboxField, ButtonField, JsonField, DateField, SelectField, TextField, WysiwygField,
     Link, React
 };
 

app/Component/Field/DateField.js

@@ -51,4 +51,6 @@ DateField.propTypes = {
     updateField: React.PropTypes.func
 };
 
+require('../../autoloader')('DateField', DateField);
+
 export default DateField;

app/Component/Field/JsonField.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import formatJson from 'format-json';
+import Codemirror from 'react-codemirror';
+
+class JsonField extends React.Component {
+    onChange(code) {
+        if (code && typeof(code) === 'string') {
+            try {
+                code = JSON.parse(code);
+            } catch (e) {
+                /* Invalid JSON*/
+            }
+        }
+
+        this.props.updateField(this.props.name, code);
+    }
+
+    render() {
+        let {value} = this.props;
+        const onChange = this.onChange.bind(this);
+        const options = {
+            lineNumbers: true,
+            matchBrackets: true,
+            autoCloseBrackets: true,
+            lineWrapping: true,
+            tabSize: true,
+            mode: 'javascript',
+            gutters: ["CodeMirror-lint-markers"],
+            stylesheet: "css/jscolors.css",
+            lint: true,
+            styleActiveLine: true
+        };
+
+        if (value && typeof(value) === 'object') {
+            value = formatJson.plain(value);
+        }
+
+        return <Codemirror value={value} onChange={onChange} options={options} />;
+    }
+}
+
+JsonField.propTypes = {
+    name: React.PropTypes.string.isRequired,
+    value: React.PropTypes.any,
+    updateField: React.PropTypes.func
+};
+
+require('../../autoloader')('JsonField', JsonField);
+
+export default JsonField;

app/Component/Field/SelectField.js

@@ -29,4 +29,6 @@ SelectField.propTypes = {
     updateField: React.PropTypes.func
 };
 
+require('../../autoloader')('SelectField', SelectField);
+
 export default SelectField;

app/Component/Field/WysiwygField.js

@@ -27,4 +27,6 @@ WysiwygField.propTypes = {
     updateField: React.PropTypes.func
 };
 
+require('../../autoloader')('WysiwygField', WysiwygField);
+
 export default WysiwygField;

app/Component/Field/__tests__/JsonFieldTest.js

@@ -0,0 +1,29 @@
+jest.autoMockOff();
+
+describe('JsonField', () => {
+    let React, TestUtils, JsonField, Codemirror, values = {};
+    const onChange = (name, value) => { values[name] = value; };
+
+    beforeEach(() => {
+        React = require('react/addons');
+        TestUtils = React.addons.TestUtils;
+        JsonField = require('../JsonField');
+        Codemirror = require('react-codemirror');
+    });
+
+    it('should get a code mirror field with correct props and state', () => {
+        const value = 'var code;';
+        const instance = TestUtils.renderIntoDocument(<JsonField name="my_field" value={value} updateField={onChange}/>);
+        const editor = TestUtils.findRenderedComponentWithType(instance, Codemirror);
+
+        expect(editor.props.value).toBe(value);
+
+        editor.codemirrorValueChanged({
+            getValue: () => {
+                return 'var code = 1;';
+            }
+        });
+
+        expect(values).toEqual({ 'my_field': 'var code = 1;' });
+    });
+});

app/Component/Field/index.js

@@ -1,9 +1,19 @@
-import InputField from './InputField';
+import ButtonField from './ButtonField';
 import CheckboxField from './CheckboxField';
+import DateField from './DateField';
+import InputField from './InputField';
+import JsonField from './JsonField';
 import SelectField from './SelectField';
+import TextField from './TextField';
+import WysiwygField from './WysiwygField';
 
 export {
-    InputField,
+    ButtonField,
     CheckboxField,
-    SelectField
+    DateField,
+    InputField,
+    JsonField,
+    SelectField,
+    TextField,
+    WysiwygField
 };

app/Field/JsonFieldView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import JsonColumn from '../Component/Column/JsonColumn';
-import InputField from '../Component/Field/InputField';
+import JsonField from '../Component/Field/JsonField';
 
 class JsonFieldView {
     static getReadWidget() {
@@ -17,8 +17,7 @@ class JsonFieldView {
     }
 
     static getWriteWidget() {
-        // @TODO : use json input when implemented
-        return <InputField type={"text"} name={this.props.fieldName} value={this.props.value} updateField={this.props.updateField} />;
+        return <JsonField name={this.props.fieldName} value={this.props.value} updateField={this.props.updateField} />;
     }
 }