Skip to content

Commit 1b43765

Browse files
oxyno-zetaoxyno-zeta
committed
[Web] Add before remove action
1 parent 5cdaeee commit 1b43765

File tree

5 files changed

+99
-59
lines changed

5 files changed

+99
-59
lines changed

‎README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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.

‎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/JsonArray.js‎

Lines changed: 37 additions & 29 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,37 +111,42 @@ 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

@@ -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: 38 additions & 30 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 = {
@@ -131,38 +132,43 @@ class JsonObject extends Component {
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)