Merged branch develop into master

Author: oxyno-zeta

.travis.yml

@@ -4,6 +4,7 @@ language: node_js
 
 node_js:
   - 6
+  - 7
 
 before_script:
   - npm install -g gulp

CHANGELOG.md

@@ -1,4 +1,16 @@
 
+# 1.2.0
+## Feature
+- Add possibility to edit 'function'
+- Add CircleCI build
+- Add Node 7 in TravisCI
+- Add CSS class on components
+- Add 'clear' button on demo for updates
+
+## Fix
+- Fix render performance
+- Fix focus error on readOnly mode
+
 # 1.1.0
 ## Bug
 - Fix reset to default in demo

README.md

@@ -1,6 +1,6 @@
 React Editable Json Tree
 ========================
-[![Build Status](https://travis-ci.org/oxyno-zeta/react-editable-json-tree.svg?branch=master)](https://travis-ci.org/oxyno-zeta/react-editable-json-tree)[![npm](https://img.shields.io/npm/v/react-editable-json-tree.svg)]()
+[![Build Status](https://travis-ci.org/oxyno-zeta/react-editable-json-tree.svg?branch=master)](https://travis-ci.org/oxyno-zeta/react-editable-json-tree)[![Build Status](https://circleci.com/gh/oxyno-zeta/react-editable-json-tree.png)](https://circleci.com/gh/oxyno-zeta/react-editable-json-tree)[![npm](https://img.shields.io/npm/v/react-editable-json-tree.svg)]()
 
 ## Demo
 Demo is available here : [Demo](https://oxyno-zeta.github.io/react-editable-json-tree/)
@@ -16,11 +16,12 @@ Demo is available here : [Demo](https://oxyno-zeta.github.io/react-editable-json
 - Style via function
 - Read only possibility
 - Call for global update and delta update
+- Possibility to give buttons, inputs, ... in parameters
 
 ## How to use
 ### Install
 ```bash
-npm install react-editable-json-tree
+npm install --save react-editable-json-tree
 ```
 
 ### Example Usage
@@ -156,6 +157,7 @@ An example of return :
     addForm: {},
 }
 ```
+You can see the actual used in `src/utils/styles.js`. 
 
 ### addButtonElement
 |       Key        |                  Description              |     Type    | Required |        Default        |
@@ -185,6 +187,76 @@ The library will add a `onClick` props on element.
 
 The library will add a `placeholder`, `ref`, `defaultValue` props on element.
 
+### textareaElement
+|        Key      |                Description                |     Type    | Required |   Default    |
+|:---------------:|:-----------------------------------------:|:-----------:|:--------:|:------------:|
+| textareaElement |  Textarea Element to replace library one  |   Element   |   False  | <textarea /> |
+
+The library will add a `ref`, `defaultValue` props on element.
+
+## Design
+The library provide CSS class on elements. All are prefixed by "rejt" to avoid conflict. 
+To avoid being linked with a CSS file, the library will use the inline style.
+
+Here is the list of classes by element and by deep and with basic element (on which it's applied).
+
+### JsonTree
+* rejt-tree (div)
+
+### JsonObject
+#### Collapsed
+* rejt-object-node (div)
+    * rejt-name (span)
+    * rejt-collapsed (span)
+        * rejt-collapsed-text (span)
+        * rejt-minus-menu (span)
+
+#### Not Collapsed
+* rejt-object-node (div)
+    * rejt-name (span)
+    * rejt-not-collapsed (span)
+        * rejt-not-collapsed-delimiter (span)
+        * rejt-not-collapsed-list (ul)
+        * rejt-not-collapsed-delimiter (span)
+        * rejt-add-form (span)
+        * rejt-plus-menu (span)
+        * rejt-minus-menu (span)
+        
+### JsonArray
+#### Collapsed
+* rejt-array-node (div)
+    * rejt-name (span)
+    * rejt-collapsed (span)
+        * rejt-collapsed-text (span)
+        * rejt-minus-menu (span)
+
+#### Not Collapsed
+* rejt-array-node (div)
+    * rejt-name (span)
+    * rejt-not-collapsed (span)
+        * rejt-not-collapsed-delimiter (span)
+        * rejt-not-collapsed-list (ul)
+        * rejt-not-collapsed-delimiter (span)
+        * rejt-add-form (span)
+        * rejt-plus-menu (span)
+        * rejt-minus-menu (span)
+
+### JsonAddValue
+* rejt-add-value-node (span)
+
+### JsonFunctionValue
+* rejt-function-value-node (li)
+    * rejt-name (span)
+    * rejt-edit-form (span)
+    * rejt-value (span)
+    * rejt-minus-menu (span)
+
+### JsonValue
+* rejt-value-node (li)
+    * rejt-name (span)
+    * rejt-edit-form (span)
+    * rejt-value (span)
+    * rejt-minus-menu (span)
 
 ## Development
 ### Serve

circle.yml

@@ -0,0 +1,9 @@
+machine:
+  node:
+    version: 7.1.0
+
+
+test:
+  override:
+    - gulp release
+

dev/components/Body.jsx

@@ -65,6 +65,8 @@ class Body extends Component {
         this.handleSubmit = this.handleSubmit.bind(this);
         this.handleResetToDefault = this.handleResetToDefault.bind(this);
         this.handleChangeReadOnly = this.handleChangeReadOnly.bind(this);
+        this.handleClearGlobalUpdateString = this.handleClearGlobalUpdateString.bind(this);
+        this.handleClearDeltaUpdateString = this.handleClearDeltaUpdateString.bind(this);
     }
 
     onFullyUpdate(newJson) {
@@ -119,6 +121,18 @@ class Body extends Component {
         });
     }
 
+    handleClearGlobalUpdateString() {
+        this.setState({
+            globalUpdateString: '{}',
+        });
+    }
+
+    handleClearDeltaUpdateString() {
+        this.setState({
+            deltaUpdateString: '{}',
+        });
+    }
+
     render() {
         const { json, deltaUpdateString, globalUpdateString, readOnly } = this.state;
 
@@ -148,10 +162,22 @@ class Body extends Component {
                 <table style={style1}>
                     <thead>
                         <tr>
-                            <th>Result</th>
-                            <th>Global Update</th>
-                            <th>Delta Update</th>
-                            <th>Put Your Json</th>
+                            <th>
+                                <span>Result</span>
+                            </th>
+                            <th>
+                                <span>
+                                    Global Update <button onClick={this.handleClearGlobalUpdateString}>Clear</button>
+                                </span>
+                            </th>
+                            <th>
+                                <span>
+                                    Delta Update <button onClick={this.handleClearDeltaUpdateString}>Clear</button>
+                                </span>
+                            </th>
+                            <th>
+                                <span>Put Your Json</span>
+                            </th>
                         </tr>
                     </thead>
                     <tbody>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-editable-json-tree",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React Editable Json Tree",
   "main": "dist/JsonTree.js",
   "scripts": {

src/JsonTree.js

@@ -9,10 +9,8 @@
 import React, { Component, PropTypes } from 'react';
 import JsonNode from './components/JsonNode';
 import { value, object, array } from './utils/styles';
-import deltaTypes from './utils/deltaTypes';
-import objectTypes from './utils/objectTypes';
-
-const { getObjectType } = objectTypes;
+import { ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from './utils/deltaTypes';
+import { getObjectType } from './utils/objectTypes';
 
 /* ************************************* */
 /* ********      VARIABLES      ******** */
@@ -30,6 +28,7 @@ const propTypes = {
     cancelButtonElement: PropTypes.element,
     editButtonElement: PropTypes.element,
     inputElement: PropTypes.element,
+    textareaElement: PropTypes.element,
 };
 // Default props
 const defaultProps = {
@@ -94,6 +93,7 @@ class JsonTree extends Component {
             cancelButtonElement,
             editButtonElement,
             inputElement,
+            textareaElement,
             } = this.props;
 
         // Node type
@@ -114,12 +114,13 @@ class JsonTree extends Component {
                 cancelButtonElement={cancelButtonElement}
                 editButtonElement={editButtonElement}
                 inputElement={inputElement}
+                textareaElement={textareaElement}
             />);
         } else {
             node = 'Data must be an Array or Object';
         }
 
-        return (<div>{node}</div>);
+        return (<div className="rejt-tree">{node}</div>);
     }
 }
 
@@ -132,4 +133,6 @@ JsonTree.defaultProps = defaultProps;
 /* ********       EXPORTS       ******** */
 /* ************************************* */
 export { JsonTree };
-export { deltaTypes };
+export { ADD_DELTA_TYPE };
+export { REMOVE_DELTA_TYPE };
+export { UPDATE_DELTA_TYPE };

src/components/JsonAddValue.js

@@ -95,35 +95,29 @@ class JsonAddValue extends Component {
         const cancelButtonElementLayout = React.cloneElement(cancelButtonElement, {
             onClick: handleCancel,
         });
-        let result = null;
-        if (onlyValue) {
-            const inputElementValueLayout = React.cloneElement(inputElement, {
-                placeholder: 'Value',
-                ref: this.refInputValue,
-            });
-            result = (<span> {inputElementValueLayout} {cancelButtonElementLayout}{addButtonElementLayout}
-            </span>);
-        } else {
-            const inputElementValueLayout = React.cloneElement(inputElement, {
-                placeholder: 'Value',
-                ref: this.refInputValue,
-            });
-            const inputElementKeyLayout = React.cloneElement(inputElement, {
+        const inputElementValueLayout = React.cloneElement(inputElement, {
+            placeholder: 'Value',
+            ref: this.refInputValue,
+        });
+        let inputElementKeyLayout = null;
+        let separatorElement = null;
+
+        if (!onlyValue) {
+            inputElementKeyLayout = React.cloneElement(inputElement, {
                 placeholder: 'Key',
                 ref: this.refInputKey,
             });
-            result = (<span> {inputElementKeyLayout}: {inputElementValueLayout} {cancelButtonElementLayout}
-                {addButtonElementLayout}
-            </span>);
+            separatorElement = ':';
         }
 
         const handlers = {
             esc: handleCancel,
             enter: this.onSubmit,
         };
 
-        return (<HotKeys component={'span'} handlers={handlers}>
-            {result}
+        return (<HotKeys className="rejt-add-value-node" component={'span'} handlers={handlers}>
+            {inputElementKeyLayout} {separatorElement} {inputElementValueLayout} {cancelButtonElementLayout}
+            {addButtonElementLayout}
         </HotKeys>);
     }
 }