Merged branch develop into master

oxyno-zeta · oxyno-zeta · commit d8bb0a6706bd · 2016-11-03T23:56:04.000+01:00
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets":["es2015", "react"]
+  "presets":["es2015", "stage-0", "react"]
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,19 @@
+
+# 1.1.0
+## Bug
+- Fix reset to default in demo
+
+## Feature
+- Add possibility to give add, cancel, edit buttons and input by props
+
+## Code
+- Fix import : for js files, don't write '.js' in import
+- Add new babel plugin (stage-0)
+
+# 1.0.1
+## Bug
+- Fix filename extensions in dist
+- Fix eslint conf for filenames
+
+# 1.0.0
+First release !
diff --git a/README.md b/README.md
@@ -157,6 +157,35 @@ An example of return :
 }
 ```
 
+### addButtonElement
+|       Key        |                  Description              |     Type    | Required |        Default        |
+|:----------------:|:-----------------------------------------:|:-----------:|:--------:|:---------------------:|
+| addButtonElement | Add button Element to replace library one |   Element   |   False  |  <button>+</button>   |
+
+The library will add a `onClick` props on element.
+
+### cancelButtonElement
+|         Key         |                   Description                |     Type    | Required |        Default        |
+|:-------------------:|:--------------------------------------------:|:-----------:|:--------:|:---------------------:|
+| cancelButtonElement | Cancel button Element to replace library one |   Element   |   False  |  <button>c</button>   |
+
+The library will add a `onClick` props on element.
+
+### editButtonElement
+|        Key        |                 Description                |     Type    | Required |        Default        |
+|:-----------------:|:------------------------------------------:|:-----------:|:--------:|:---------------------:|
+| editButtonElement | Edit button Element to replace library one |   Element   |   False  |  <button>e</button>   |
+
+The library will add a `onClick` props on element.
+
+### inputElement
+|      Key     |                Description                |     Type    | Required |   Default    |
+|:------------:|:-----------------------------------------:|:-----------:|:--------:|:------------:|
+| inputElement | Input Text Element to replace library one |   Element   |   False  |  <input />   |
+
+The library will add a `placeholder`, `ref`, `defaultValue` props on element.
+
+
 ## Development
 ### Serve
 ```bash
diff --git a/dev/components/Body.jsx b/dev/components/Body.jsx
@@ -7,6 +7,7 @@
 /* ********       IMPORTS       ******** */
 /* ************************************* */
 import React, { Component } from 'react';
+import _ from 'lodash';
 import { JsonTree } from '../../src/JsonTree.js';
 
 /* ************************************* */
@@ -49,7 +50,7 @@ class Body extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            json: defaultJson,
+            json: _.cloneDeep(defaultJson),
             deltaUpdateString: '{}',
             globalUpdateString: '{}',
             textareaRef: null,
@@ -106,7 +107,7 @@ class Body extends Component {
 
     handleResetToDefault() {
         this.setState({
-            json: defaultJson,
+            json: _.cloneDeep(defaultJson),
         });
     }
 
diff --git a/gulp/bump.js b/gulp/bump.js
@@ -0,0 +1,49 @@
+/*
+ * Author: Alexandre Havrileck (Oxyno-zeta)
+ * Date: 03/11/16
+ * Licence: See Readme
+ */
+
+
+/* ************************************* */
+/* ********       REQUIRE       ******** */
+/* ************************************* */
+const gulp = require('gulp');
+const bump = require('gulp-bump');
+
+/* ************************************* */
+/* ********  PRIVATE FUNCTIONS  ******** */
+/* ************************************* */
+
+
+/* ************************************* */
+/* ********   PUBLIC FUNCTIONS  ******** */
+/* ************************************* */
+// MAJOR ('major') version when you make incompatible API changes
+// MINOR ('minor') version when you add functionality in a backwards-compatible manner
+// PATCH ('patch') version when you make backwards-compatible bug fixes.
+gulp.task('bump', ['bump:minor']);
+
+gulp.task('bump:major', () => (
+    gulp.src(['package.json'])
+        .pipe(bump({
+            type: 'major',
+        }))
+        .pipe(gulp.dest('./'))
+));
+
+gulp.task('bump:minor', () => (
+    gulp.src(['package.json'])
+        .pipe(bump({
+            type: 'minor',
+        }))
+        .pipe(gulp.dest('./'))
+));
+
+gulp.task('bump:patch', () => (
+    gulp.src(['package.json'])
+        .pipe(bump({
+            type: 'patch',
+        }))
+        .pipe(gulp.dest('./'))
+));
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-editable-json-tree",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "React Editable Json Tree",
   "main": "dist/JsonTree.js",
   "scripts": {
@@ -20,16 +20,19 @@
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
     "babel-preset-react-hmre": "^1.1.1",
+    "babel-preset-stage-0": "^6.16.0",
     "body-parser": "^1.15.2",
     "del": "^2.2.2",
     "eslint": "^3.8.1",
     "eslint-config-airbnb": "^12.0.0",
-    "eslint-plugin-import": "^2.0.1",
+    "eslint-plugin-import": "^2.1.0",
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.4.1",
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
+    "gulp-bump": "^2.5.0",
     "html-webpack-plugin": "^2.22.0",
+    "lodash": "^4.16.6",
     "progress-bar-webpack-plugin": "^1.9.0",
     "react-hot-loader": "^1.3.0",
     "run-sequence": "^1.2.2",
diff --git a/src/JsonTree.js b/src/JsonTree.js
@@ -7,7 +7,7 @@
 /* ********       IMPORTS       ******** */
 /* ************************************* */
 import React, { Component, PropTypes } from 'react';
-import JsonNode from './components/JsonNode.js';
+import JsonNode from './components/JsonNode';
 import { value, object, array } from './utils/styles';
 import deltaTypes from './utils/deltaTypes';
 import objectTypes from './utils/objectTypes';
@@ -26,6 +26,10 @@ const propTypes = {
     onDeltaUpdate: PropTypes.func,
     readOnly: PropTypes.bool,
     getStyle: PropTypes.func,
+    addButtonElement: PropTypes.element,
+    cancelButtonElement: PropTypes.element,
+    editButtonElement: PropTypes.element,
+    inputElement: PropTypes.element,
 };
 // Default props
 const defaultProps = {
@@ -81,7 +85,16 @@ class JsonTree extends Component {
 
     render() {
         const { data, rootName } = this.state;
-        const { isCollapsed, onDeltaUpdate, readOnly, getStyle } = this.props;
+        const {
+            isCollapsed,
+            onDeltaUpdate,
+            readOnly,
+            getStyle,
+            addButtonElement,
+            cancelButtonElement,
+            editButtonElement,
+            inputElement,
+            } = this.props;
 
         // Node type
         const dataType = getObjectType(data);
@@ -97,6 +110,10 @@ class JsonTree extends Component {
                 onDeltaUpdate={onDeltaUpdate}
                 readOnly={readOnly}
                 getStyle={getStyle}
+                addButtonElement={addButtonElement}
+                cancelButtonElement={cancelButtonElement}
+                editButtonElement={editButtonElement}
+                inputElement={inputElement}
             />);
         } else {
             node = 'Data must be an Array or Object';
diff --git a/src/components/JsonAddValue.js b/src/components/JsonAddValue.js
@@ -8,7 +8,7 @@
 /* ************************************* */
 import React, { Component, PropTypes } from 'react';
 import { HotKeys } from 'react-hotkeys';
-import parse from '../utils/parse.js';
+import parse from '../utils/parse';
 
 /* ************************************* */
 /* ********      VARIABLES      ******** */
@@ -18,10 +18,16 @@ const propTypes = {
     handleAdd: PropTypes.func.isRequired,
     handleCancel: PropTypes.func.isRequired,
     onlyValue: PropTypes.bool,
+    addButtonElement: PropTypes.element,
+    cancelButtonElement: PropTypes.element,
+    inputElement: PropTypes.element,
 };
 // Default props
 const defaultProps = {
     onlyValue: false,
+    addButtonElement: <button>+</button>,
+    cancelButtonElement: <button>c</button>,
+    inputElement: <input />,
 };
 
 /* ************************************* */
@@ -81,33 +87,41 @@ class JsonAddValue extends Component {
     }
 
     render() {
-        const { handleCancel, onlyValue } = this.props;
-
-        const handlers = {
-            esc: handleCancel,
-            enter: this.onSubmit,
-        };
+        const { handleCancel, onlyValue, addButtonElement, cancelButtonElement, inputElement } = this.props;
 
+        const addButtonElementLayout = React.cloneElement(addButtonElement, {
+            onClick: this.onSubmit,
+        });
+        const cancelButtonElementLayout = React.cloneElement(cancelButtonElement, {
+            onClick: handleCancel,
+        });
         let result = null;
         if (onlyValue) {
-            result = (<span> <input
-                placeholder="Value"
-                ref={this.refInputValue}
-            /> <button onClick={handleCancel}>c</button>
-                <button onClick={this.onSubmit}>+</button>
+            const inputElementValueLayout = React.cloneElement(inputElement, {
+                placeholder: 'Value',
+                ref: this.refInputValue,
+            });
+            result = (<span> {inputElementValueLayout} {cancelButtonElementLayout}{addButtonElementLayout}
             </span>);
         } else {
-            result = (<span> <input
-                placeholder="Key"
-                ref={this.refInputKey}
-            />: <input
-                placeholder="Value"
-                ref={this.refInputValue}
-            /> <button onClick={handleCancel}>c</button>
-                <button onClick={this.onSubmit}>+</button>
+            const inputElementValueLayout = React.cloneElement(inputElement, {
+                placeholder: 'Value',
+                ref: this.refInputValue,
+            });
+            const inputElementKeyLayout = React.cloneElement(inputElement, {
+                placeholder: 'Key',
+                ref: this.refInputKey,
+            });
+            result = (<span> {inputElementKeyLayout}: {inputElementValueLayout} {cancelButtonElementLayout}
+                {addButtonElementLayout}
             </span>);
         }
 
+        const handlers = {
+            esc: handleCancel,
+            enter: this.onSubmit,
+        };
+
         return (<HotKeys component={'span'} handlers={handlers}>
             {result}
         </HotKeys>);
diff --git a/src/components/JsonArray.js b/src/components/JsonArray.js
@@ -7,10 +7,10 @@
 /* ********       IMPORTS       ******** */
 /* ************************************* */
 import React, { Component, PropTypes } from 'react';
-import JsonNode from './JsonNode.js';
-import JsonAddValue from './JsonAddValue.js';
-import objectTypes from '../utils/objectTypes.js';
-import { ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from '../utils/deltaTypes.js';
+import JsonNode from './JsonNode';
+import JsonAddValue from './JsonAddValue';
+import objectTypes from '../utils/objectTypes';
+import { ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from '../utils/deltaTypes';
 
 const { getObjectType } = objectTypes;
 
@@ -30,12 +30,13 @@ const propTypes = {
     readOnly: PropTypes.bool.isRequired,
     dataType: PropTypes.string,
     getStyle: PropTypes.func.isRequired,
+    addButtonElement: PropTypes.element,
+    cancelButtonElement: PropTypes.element,
+    editButtonElement: PropTypes.element,
+    inputElement: PropTypes.element,
 };
 // Default props
 const defaultProps = {
-    collapsed: true,
-    name: 'root',
-    data: [],
     keyPath: [],
     deep: 0,
 };
@@ -219,7 +220,18 @@ class JsonArray extends Component {
 
     renderNotCollapsed() {
         const { name, data, keyPath, deep, addFormVisible } = this.state;
-        const { isCollapsed, handleRemove, onDeltaUpdate, readOnly, getStyle, dataType } = this.props;
+        const {
+            isCollapsed,
+            handleRemove,
+            onDeltaUpdate,
+            readOnly,
+            getStyle,
+            dataType,
+            addButtonElement,
+            cancelButtonElement,
+            editButtonElement,
+            inputElement,
+            } = this.props;
         const { minus, plus, delimiter, ul, addForm } = getStyle(name, data, keyPath, deep, dataType);
 
         let minusElement = (deep !== 0) ? (<span onClick={handleRemove} style={minus}> - </span>) : null;
@@ -242,6 +254,10 @@ class JsonArray extends Component {
                 onDeltaUpdate={onDeltaUpdate}
                 readOnly={readOnly}
                 getStyle={getStyle}
+                addButtonElement={addButtonElement}
+                cancelButtonElement={cancelButtonElement}
+                editButtonElement={editButtonElement}
+                inputElement={inputElement}
             />);
 
         const onlyValue = true;
@@ -250,6 +266,9 @@ class JsonArray extends Component {
                 handleAdd={this.handleAddValueAdd}
                 handleCancel={this.handleAddValueCancel}
                 onlyValue={onlyValue}
+                addButtonElement={addButtonElement}
+                cancelButtonElement={cancelButtonElement}
+                inputElement={inputElement}
             /></span>) :
             (<span><span onClick={this.handleAddMode} style={plus}> + </span> {minusElement}</span>);
         // Check if readOnly is activated
diff --git a/src/components/JsonNode.js b/src/components/JsonNode.js
diff --git a/src/components/JsonObject.js b/src/components/JsonObject.js
diff --git a/src/components/JsonValue.js b/src/components/JsonValue.js

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "presets":["es2015", "react"]`
	`2`	`+ "presets":["es2015", "stage-0", "react"]`
`3`	`3`	`}`