Skip to content

Commit 7398ed2

Browse files
oxyno-zetaoxyno-zeta
committed
Merged branch develop into master
2 parents 93c1770 + 0db0218 commit 7398ed2

File tree

8 files changed

+111
-69
lines changed

8 files changed

+111
-69
lines changed

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,3 +202,4 @@ gulpfile.js
202202
.babelrc
203203
.eslintrc.json
204204
yarn.lock
205+
circle.yml

‎README.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ npm install --save react-editable-json-tree
2727
### Example Usage
2828
```jsx
2929
// Import
30-
import { JsonTree, deltaTypes } from 'react-editable-json-tree'
30+
import { JsonTree, ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from 'react-editable-json-tree'
3131

3232
// Data
3333
const data = {
@@ -210,6 +210,21 @@ The library will add a `onClick`, `className` and `style` props on element.
210210

211211
The library will add a `onClick`, `className` and `style` props on element.
212212

213+
### beforeRemoveAction
214+
| Key | Description | Type | Required | Default |
215+
|:------------------:|:------------------------------------------------------------:|:--------:|:---------:|:-----------------------------------------------------------:|
216+
| beforeRemoveAction | Function called before each remove action (with minus menu) | Function | False | `(key, keyPath, deep) => new Promise(resolve => resolve())` |
217+
218+
This function must return a `Promise`. In case of resolve of this one, the remove will be done. Otherwise, in reject, nothing will be done.
219+
220+
Function parameters :
221+
222+
| Key | Description | Type | Example |
223+
|:-----------:|:-------------------------------:|:-------:|:---------------------------------------------------------------:|
224+
| key | Key of current node/value | String | 'object' for data: { object: { string: 'test' } } |
225+
| keyPath | key path | Array | ['object'] for data: { object: { string: 'test' } } |
226+
| deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node |
227+
213228
## Design
214229
The library provide CSS class on elements. All are prefixed by "rejt" to avoid conflict.
215230
To avoid being linked with a CSS file, the library will use the inline style.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1",
88
"serve": "gulp serve",
9-
"release": "gulp release"
9+
"release": "gulp release",
10+
"start": "gulp serve"
1011
},
1112
"keywords": [
1213
"React",
@@ -32,7 +33,7 @@
3233
"eslint": "^3.10.2",
3334
"eslint-config-airbnb": "^13.0.0",
3435
"eslint-plugin-import": "^2.2.0",
35-
"eslint-plugin-jsx-a11y": "^3.0.1",
36+
"eslint-plugin-jsx-a11y": "^2.2.3",
3637
"eslint-plugin-react": "^6.7.1",
3738
"gulp": "^3.9.1",
3839
"gulp-babel": "^6.1.2",

‎src/JsonTree.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const propTypes = {
3131
textareaElement: PropTypes.element,
3232
minusMenuElement: PropTypes.element,
3333
plusMenuElement: PropTypes.element,
34+
beforeRemoveAction: PropTypes.func,
3435
};
3536
// Default props
3637
const defaultProps = {
@@ -52,6 +53,7 @@ const defaultProps = {
5253
return value;
5354
}
5455
},
56+
beforeRemoveAction: (key, keyPath, deep) => new Promise(resolve => resolve()),
5557
};
5658

5759
/* ************************************* */
@@ -98,6 +100,7 @@ class JsonTree extends Component {
98100
textareaElement,
99101
minusMenuElement,
100102
plusMenuElement,
103+
beforeRemoveAction,
101104
} = this.props;
102105

103106
// Node type
@@ -121,6 +124,7 @@ class JsonTree extends Component {
121124
textareaElement={textareaElement}
122125
minusMenuElement={minusMenuElement}
123126
plusMenuElement={plusMenuElement}
127+
beforeRemoveAction={beforeRemoveAction}
124128
/>);
125129
} else {
126130
node = 'Data must be an Array or Object';

‎src/components/JsonAddValue.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ class JsonAddValue extends Component {
6363
const { handleAdd, onlyValue } = this.props;
6464
const { inputRefKey, inputRefValue } = this.state;
6565
const result = {
66-
value: parse(inputRefValue.value),
66+
newValue: parse(inputRefValue.value),
6767
};
6868
// Check if we have the key
6969
if (!onlyValue) {

‎src/components/JsonArray.js‎

Lines changed: 40 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const propTypes = {
3535
textareaElement: PropTypes.element,
3636
minusMenuElement: PropTypes.element,
3737
plusMenuElement: PropTypes.element,
38+
beforeRemoveAction: PropTypes.func,
3839
};
3940
// Default props
4041
const defaultProps = {
@@ -110,46 +111,51 @@ class JsonArray extends Component {
110111

111112
handleRemoveItem(index) {
112113
return () => {
114+
const { beforeRemoveAction } = this.props;
113115
const { data, keyPath, deep } = this.state;
114-
const objType = getObjectType(data[index]);
115-
let deltaUpdateResult = null;
116-
if (objType === 'Object' || objType === 'Array') {
117-
deltaUpdateResult = {
118-
type: UPDATE_DELTA_TYPE,
119-
keyPath,
120-
deep,
121-
key: index,
122-
oldValue: data[index],
123-
newValue: null,
124-
};
125-
data[index] = null;
126-
} else {
127-
deltaUpdateResult = {
128-
type: REMOVE_DELTA_TYPE,
129-
keyPath,
130-
deep,
131-
key: index,
132-
oldValue: data[index],
133-
};
134-
data.splice(index, 1);
135-
}
136-
this.setState({
137-
data,
116+
// Before Remove Action
117+
beforeRemoveAction(index, keyPath, deep).then(() => {
118+
const objType = getObjectType(data[index]);
119+
let deltaUpdateResult = null;
120+
if (objType === 'Object' || objType === 'Array') {
121+
deltaUpdateResult = {
122+
type: UPDATE_DELTA_TYPE,
123+
keyPath,
124+
deep,
125+
key: index,
126+
oldValue: data[index],
127+
newValue: null,
128+
};
129+
data[index] = null;
130+
} else {
131+
deltaUpdateResult = {
132+
type: REMOVE_DELTA_TYPE,
133+
keyPath,
134+
deep,
135+
key: index,
136+
oldValue: data[index],
137+
};
138+
data.splice(index, 1);
139+
}
140+
this.setState({
141+
data,
142+
});
143+
// Spread new update
144+
const { onUpdate, onDeltaUpdate } = this.props;
145+
onUpdate(keyPath[keyPath.length - 1], data);
146+
// Spread delta update
147+
onDeltaUpdate(deltaUpdateResult);
148+
}).catch(() => {
138149
});
139-
// Spread new update
140-
const { onUpdate, onDeltaUpdate } = this.props;
141-
onUpdate(keyPath[keyPath.length - 1], data);
142-
// Spread delta update
143-
onDeltaUpdate(deltaUpdateResult);
144150
};
145151
}
146152

147-
handleAddValueAdd({ value }) {
153+
handleAddValueAdd({ newValue }) {
148154
const { data, keyPath, deep } = this.state;
149155
// Update data
150156
const newData = [
151157
...data,
152-
value,
158+
newValue,
153159
];
154160
this.setState({
155161
data: newData,
@@ -165,7 +171,7 @@ class JsonArray extends Component {
165171
keyPath,
166172
deep,
167173
key: newData.length - 1,
168-
newValue: value,
174+
newValue,
169175
});
170176
}
171177

@@ -242,6 +248,7 @@ class JsonArray extends Component {
242248
textareaElement,
243249
minusMenuElement,
244250
plusMenuElement,
251+
beforeRemoveAction,
245252
} = this.props;
246253
const { minus, plus, delimiter, ul, addForm } = getStyle(name, data, keyPath, deep, dataType);
247254

@@ -277,6 +284,7 @@ class JsonArray extends Component {
277284
textareaElement={textareaElement}
278285
minusMenuElement={minusMenuElement}
279286
plusMenuElement={plusMenuElement}
287+
beforeRemoveAction={beforeRemoveAction}
280288
/>);
281289

282290
const onlyValue = true;

‎src/components/JsonNode.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const propTypes = {
3636
textareaElement: PropTypes.element,
3737
minusMenuElement: PropTypes.element,
3838
plusMenuElement: PropTypes.element,
39+
beforeRemoveAction: PropTypes.func,
3940
};
4041
// Default props
4142
const defaultProps = {
@@ -80,6 +81,7 @@ class JsonNode extends Component {
8081
textareaElement,
8182
minusMenuElement,
8283
plusMenuElement,
84+
beforeRemoveAction,
8385
} = this.props;
8486
const readOnlyTrue = true;
8587

@@ -105,6 +107,7 @@ class JsonNode extends Component {
105107
textareaElement={textareaElement}
106108
minusMenuElement={minusMenuElement}
107109
plusMenuElement={plusMenuElement}
110+
beforeRemoveAction={beforeRemoveAction}
108111
/>);
109112
case 'Object':
110113
return (<JsonObject
@@ -126,6 +129,7 @@ class JsonNode extends Component {
126129
textareaElement={textareaElement}
127130
minusMenuElement={minusMenuElement}
128131
plusMenuElement={plusMenuElement}
132+
beforeRemoveAction={beforeRemoveAction}
129133
/>);
130134
case 'Array':
131135
return (<JsonArray
@@ -147,6 +151,7 @@ class JsonNode extends Component {
147151
textareaElement={textareaElement}
148152
minusMenuElement={minusMenuElement}
149153
plusMenuElement={plusMenuElement}
154+
beforeRemoveAction={beforeRemoveAction}
150155
/>);
151156
case 'String':
152157
return (<JsonValue

‎src/components/JsonObject.js‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const propTypes = {
3535
textareaElement: PropTypes.element,
3636
minusMenuElement: PropTypes.element,
3737
plusMenuElement: PropTypes.element,
38+
beforeRemoveAction: PropTypes.func,
3839
};
3940
// Default props
4041
const defaultProps = {
@@ -108,10 +109,10 @@ class JsonObject extends Component {
108109
});
109110
}
110111

111-
handleAddValueAdd({ key, value }) {
112+
handleAddValueAdd({ key, newValue }) {
112113
const { data, keyPath, deep } = this.state;
113114
// Update data
114-
data[key] = value;
115+
data[key] = newValue;
115116
this.setState({
116117
data,
117118
});
@@ -126,43 +127,48 @@ class JsonObject extends Component {
126127
keyPath,
127128
deep,
128129
key,
129-
value,
130+
newValue,
130131
});
131132
}
132133

133134
handleRemoveValue(key) {
134-
const { data, keyPath, deep } = this.state;
135135
return () => {
136-
const objType = getObjectType(data[key]);
137-
let deltaUpdateResult = null;
138-
if (objType === 'Object' || objType === 'Array') {
139-
deltaUpdateResult = {
140-
type: UPDATE_DELTA_TYPE,
141-
keyPath,
142-
deep,
143-
key,
144-
oldValue: data[key],
145-
newValue: null,
146-
};
147-
data[key] = null;
148-
} else {
149-
deltaUpdateResult = {
150-
type: REMOVE_DELTA_TYPE,
151-
keyPath,
152-
deep,
153-
key,
154-
oldValue: data[key],
155-
};
156-
delete data[key];
157-
}
158-
this.setState({
159-
data,
136+
const { beforeRemoveAction } = this.props;
137+
const { data, keyPath, deep } = this.state;
138+
// Before Remove Action
139+
beforeRemoveAction(key, keyPath, deep).then(() => {
140+
const objType = getObjectType(data[key]);
141+
let deltaUpdateResult = null;
142+
if (objType === 'Object' || objType === 'Array') {
143+
deltaUpdateResult = {
144+
type: UPDATE_DELTA_TYPE,
145+
keyPath,
146+
deep,
147+
key,
148+
oldValue: data[key],
149+
newValue: null,
150+
};
151+
data[key] = null;
152+
} else {
153+
deltaUpdateResult = {
154+
type: REMOVE_DELTA_TYPE,
155+
keyPath,
156+
deep,
157+
key,
158+
oldValue: data[key],
159+
};
160+
delete data[key];
161+
}
162+
this.setState({
163+
data,
164+
});
165+
// Spread new update
166+
const { onUpdate, onDeltaUpdate } = this.props;
167+
onUpdate(keyPath[keyPath.length - 1], data);
168+
// Spread delta update
169+
onDeltaUpdate(deltaUpdateResult);
170+
}).catch(() => {
160171
});
161-
// Spread new update
162-
const { onUpdate, onDeltaUpdate } = this.props;
163-
onUpdate(keyPath[keyPath.length - 1], data);
164-
// Spread delta update
165-
onDeltaUpdate(deltaUpdateResult);
166172
};
167173
}
168174

@@ -239,6 +245,7 @@ class JsonObject extends Component {
239245
textareaElement,
240246
minusMenuElement,
241247
plusMenuElement,
248+
beforeRemoveAction,
242249
} = this.props;
243250

244251
const { minus, plus, addForm, ul, delimiter } = getStyle(name, data, keyPath, deep, dataType);
@@ -275,6 +282,7 @@ class JsonObject extends Component {
275282
textareaElement={textareaElement}
276283
minusMenuElement={minusMenuElement}
277284
plusMenuElement={plusMenuElement}
285+
beforeRemoveAction={beforeRemoveAction}
278286
/>);
279287

280288
const startObject = '{';

0 commit comments

Comments
 (0)