Skip to content

Commit 9c1b029

Browse files
oxyno-zetaoxyno-zeta
committed
[Web] Add way to pass plus and minus menu element
1 parent 4482c3c commit 9c1b029

File tree

7 files changed

+110
-22
lines changed

7 files changed

+110
-22
lines changed

‎README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,20 @@ The library will add a `placeholder`, `ref`, `defaultValue` props on element.
194194

195195
The library will add a `ref`, `defaultValue` props on element.
196196

197+
### minusMenuElement
198+
| Key | Description | Type | Required | Default |
199+
|:----------------:|:-----------------------------------------:|:-----------:|:--------:|:-------------------:|
200+
| minusMenuElement | Minus Menu Element to replace library one | Element | False | <span> - </span> |
201+
202+
The library will add a `onClick`, `className` and `style` props on element.
203+
204+
### plusMenuElement
205+
| Key | Description | Type | Required | Default |
206+
|:---------------:|:----------------------------------------:|:-----------:|:--------:|:-------------------:|
207+
| plusMenuElement | Plus Menu Element to replace library one | Element | False | <span> + </span> |
208+
209+
The library will add a `onClick`, `className` and `style` props on element.
210+
197211
## Design
198212
The library provide CSS class on elements. All are prefixed by "rejt" to avoid conflict.
199213
To avoid being linked with a CSS file, the library will use the inline style.

‎src/JsonTree.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ const propTypes = {
2929
editButtonElement: PropTypes.element,
3030
inputElement: PropTypes.element,
3131
textareaElement: PropTypes.element,
32+
minusMenuElement: PropTypes.element,
33+
plusMenuElement: PropTypes.element,
3234
};
3335
// Default props
3436
const defaultProps = {
@@ -94,6 +96,8 @@ class JsonTree extends Component {
9496
editButtonElement,
9597
inputElement,
9698
textareaElement,
99+
minusMenuElement,
100+
plusMenuElement,
97101
} = this.props;
98102

99103
// Node type
@@ -115,6 +119,8 @@ class JsonTree extends Component {
115119
editButtonElement={editButtonElement}
116120
inputElement={inputElement}
117121
textareaElement={textareaElement}
122+
minusMenuElement={minusMenuElement}
123+
plusMenuElement={plusMenuElement}
118124
/>);
119125
} else {
120126
node = 'Data must be an Array or Object';

‎src/components/JsonArray.js‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,15 @@ const propTypes = {
3333
editButtonElement: PropTypes.element,
3434
inputElement: PropTypes.element,
3535
textareaElement: PropTypes.element,
36+
minusMenuElement: PropTypes.element,
37+
plusMenuElement: PropTypes.element,
3638
};
3739
// Default props
3840
const defaultProps = {
3941
keyPath: [],
4042
deep: 0,
43+
minusMenuElement: <span> - </span>,
44+
plusMenuElement: <span> + </span>,
4145
};
4246

4347
/* ************************************* */
@@ -196,16 +200,20 @@ class JsonArray extends Component {
196200

197201
renderCollapsed() {
198202
const { name, data, keyPath, deep } = this.state;
199-
const { handleRemove, readOnly, getStyle, dataType } = this.props;
203+
const { handleRemove, readOnly, getStyle, dataType, minusMenuElement } = this.props;
200204

201205
const { minus, collapsed } = getStyle(name, data, keyPath, deep, dataType);
202206
const collapseValue = ' [...]';
203207
const numberOfItems = data.length;
204208
let minusElement = null;
205209
// Check if readOnly is activated
206210
if (!readOnly) {
207-
minusElement = (deep !== 0) ?
208-
(<span className="rejt-minus-menu" onClick={handleRemove} style={minus}> - </span>) : null;
211+
const minusMenuLayout = React.cloneElement(minusMenuElement, {
212+
onClick: handleRemove,
213+
className: 'rejt-minus-menu',
214+
style: minus,
215+
});
216+
minusElement = (deep !== 0) ? minusMenuLayout : null;
209217
}
210218

211219
const itemName = (numberOfItems > 1) ? 'items' : 'item';
@@ -232,14 +240,20 @@ class JsonArray extends Component {
232240
editButtonElement,
233241
inputElement,
234242
textareaElement,
243+
minusMenuElement,
244+
plusMenuElement,
235245
} = this.props;
236246
const { minus, plus, delimiter, ul, addForm } = getStyle(name, data, keyPath, deep, dataType);
237247

238248
let minusElement = null;
239249
// Check if readOnly is activated
240250
if (!readOnly) {
241-
minusElement = (deep !== 0) ?
242-
(<span className="rejt-minus-menu" onClick={handleRemove} style={minus}> - </span>) : null;
251+
const minusMenuLayout = React.cloneElement(minusMenuElement, {
252+
onClick: handleRemove,
253+
className: 'rejt-minus-menu',
254+
style: minus,
255+
});
256+
minusElement = (deep !== 0) ? minusMenuLayout : null;
243257
}
244258

245259
const list = data
@@ -261,12 +275,19 @@ class JsonArray extends Component {
261275
editButtonElement={editButtonElement}
262276
inputElement={inputElement}
263277
textareaElement={textareaElement}
278+
minusMenuElement={minusMenuElement}
279+
plusMenuElement={plusMenuElement}
264280
/>);
265281

266282
const onlyValue = true;
267283
let menu = null;
268284
// Check if readOnly is activated
269285
if (!readOnly) {
286+
const plusMenuLayout = React.cloneElement(plusMenuElement, {
287+
onClick: this.handleAddMode,
288+
className: 'rejt-plus-menu',
289+
style: plus,
290+
});
270291
menu = addFormVisible ?
271292
(<span className="rejt-add-form" style={addForm}><JsonAddValue
272293
handleAdd={this.handleAddValueAdd}
@@ -277,7 +298,7 @@ class JsonArray extends Component {
277298
inputElement={inputElement}
278299
/></span>) :
279300
(<span>
280-
<span className="rejt-plus-menu" onClick={this.handleAddMode} style={plus}> + </span> {minusElement}
301+
{plusMenuLayout} {minusElement}
281302
</span>);
282303
}
283304

‎src/components/JsonFunctionValue.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const propTypes = {
2929
editButtonElement: PropTypes.element,
3030
cancelButtonElement: PropTypes.element,
3131
textareaElement: PropTypes.element,
32+
minusMenuElement: PropTypes.element,
3233
};
3334
// Default props
3435
const defaultProps = {
@@ -39,6 +40,7 @@ const defaultProps = {
3940
editButtonElement: <button>e</button>,
4041
cancelButtonElement: <button>c</button>,
4142
textareaElement: <textarea />,
43+
minusMenuElement: <span> - </span>,
4244
};
4345

4446
/* ************************************* */
@@ -129,6 +131,7 @@ class JsonValue extends Component {
129131
editButtonElement,
130132
cancelButtonElement,
131133
textareaElement,
134+
minusMenuElement,
132135
} = this.props;
133136

134137
const style = getStyle(name, value, keyPath, deep, dataType);
@@ -155,11 +158,12 @@ class JsonValue extends Component {
155158
result = (<span className="rejt-value" style={style.value} onClick={readOnly ? null : this.handleEditMode}>
156159
{value}
157160
</span>);
158-
minusElement = (readOnly) ? null : (<span
159-
className="rejt-minus-menu"
160-
onClick={handleRemove}
161-
style={style.minus}
162-
> - </span>);
161+
const minusMenuLayout = React.cloneElement(minusMenuElement, {
162+
onClick: handleRemove,
163+
className: 'rejt-minus-menu',
164+
style: style.minus,
165+
});
166+
minusElement = (readOnly) ? null : minusMenuLayout;
163167
}
164168

165169
const handlers = {

‎src/components/JsonNode.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ const propTypes = {
3434
editButtonElement: PropTypes.element,
3535
inputElement: PropTypes.element,
3636
textareaElement: PropTypes.element,
37+
minusMenuElement: PropTypes.element,
38+
plusMenuElement: PropTypes.element,
3739
};
3840
// Default props
3941
const defaultProps = {
@@ -76,6 +78,8 @@ class JsonNode extends Component {
7678
editButtonElement,
7779
inputElement,
7880
textareaElement,
81+
minusMenuElement,
82+
plusMenuElement,
7983
} = this.props;
8084
const readOnlyTrue = true;
8185

@@ -99,6 +103,8 @@ class JsonNode extends Component {
99103
editButtonElement={editButtonElement}
100104
inputElement={inputElement}
101105
textareaElement={textareaElement}
106+
minusMenuElement={minusMenuElement}
107+
plusMenuElement={plusMenuElement}
102108
/>);
103109
case 'Object':
104110
return (<JsonObject
@@ -118,6 +124,8 @@ class JsonNode extends Component {
118124
editButtonElement={editButtonElement}
119125
inputElement={inputElement}
120126
textareaElement={textareaElement}
127+
minusMenuElement={minusMenuElement}
128+
plusMenuElement={plusMenuElement}
121129
/>);
122130
case 'Array':
123131
return (<JsonArray
@@ -137,6 +145,8 @@ class JsonNode extends Component {
137145
editButtonElement={editButtonElement}
138146
inputElement={inputElement}
139147
textareaElement={textareaElement}
148+
minusMenuElement={minusMenuElement}
149+
plusMenuElement={plusMenuElement}
140150
/>);
141151
case 'String':
142152
return (<JsonValue
@@ -153,6 +163,7 @@ class JsonNode extends Component {
153163
cancelButtonElement={cancelButtonElement}
154164
editButtonElement={editButtonElement}
155165
inputElement={inputElement}
166+
minusMenuElement={minusMenuElement}
156167
/>);
157168
case 'Number':
158169
return (<JsonValue
@@ -169,6 +180,7 @@ class JsonNode extends Component {
169180
cancelButtonElement={cancelButtonElement}
170181
editButtonElement={editButtonElement}
171182
inputElement={inputElement}
183+
minusMenuElement={minusMenuElement}
172184
/>);
173185
case 'Boolean':
174186
return (<JsonValue
@@ -185,6 +197,7 @@ class JsonNode extends Component {
185197
cancelButtonElement={cancelButtonElement}
186198
editButtonElement={editButtonElement}
187199
inputElement={inputElement}
200+
minusMenuElement={minusMenuElement}
188201
/>);
189202
case 'Date':
190203
return (<JsonValue
@@ -201,6 +214,7 @@ class JsonNode extends Component {
201214
cancelButtonElement={cancelButtonElement}
202215
editButtonElement={editButtonElement}
203216
inputElement={inputElement}
217+
minusMenuElement={minusMenuElement}
204218
/>);
205219
case 'Null':
206220
return (<JsonValue
@@ -217,6 +231,7 @@ class JsonNode extends Component {
217231
cancelButtonElement={cancelButtonElement}
218232
editButtonElement={editButtonElement}
219233
inputElement={inputElement}
234+
minusMenuElement={minusMenuElement}
220235
/>);
221236
case 'Undefined':
222237
return (<JsonValue
@@ -233,6 +248,7 @@ class JsonNode extends Component {
233248
cancelButtonElement={cancelButtonElement}
234249
editButtonElement={editButtonElement}
235250
inputElement={inputElement}
251+
minusMenuElement={minusMenuElement}
236252
/>);
237253
case 'Function':
238254
return (<JsonFunctionValue
@@ -249,6 +265,7 @@ class JsonNode extends Component {
249265
cancelButtonElement={cancelButtonElement}
250266
editButtonElement={editButtonElement}
251267
textareaElement={textareaElement}
268+
minusMenuElement={minusMenuElement}
252269
/>);
253270
case 'Symbol':
254271
return (<JsonValue
@@ -265,6 +282,7 @@ class JsonNode extends Component {
265282
cancelButtonElement={cancelButtonElement}
266283
editButtonElement={editButtonElement}
267284
inputElement={inputElement}
285+
minusMenuElement={minusMenuElement}
268286
/>);
269287
default:
270288
return null;

‎src/components/JsonObject.js‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,15 @@ const propTypes = {
3333
editButtonElement: PropTypes.element,
3434
inputElement: PropTypes.element,
3535
textareaElement: PropTypes.element,
36+
minusMenuElement: PropTypes.element,
37+
plusMenuElement: PropTypes.element,
3638
};
3739
// Default props
3840
const defaultProps = {
3941
keyPath: [],
4042
deep: 0,
43+
minusMenuElement: <span> - </span>,
44+
plusMenuElement: <span> + </span>,
4145
};
4246

4347
/* ************************************* */
@@ -193,7 +197,7 @@ class JsonObject extends Component {
193197

194198
renderCollapsed() {
195199
const { name, keyPath, deep, data } = this.state;
196-
const { handleRemove, readOnly, dataType, getStyle } = this.props;
200+
const { handleRemove, readOnly, dataType, getStyle, minusMenuElement } = this.props;
197201

198202
const { minus, collapsed } = getStyle(name, data, keyPath, deep, dataType);
199203
const keyList = Object.getOwnPropertyNames(data);
@@ -203,8 +207,12 @@ class JsonObject extends Component {
203207
let minusElement = null;
204208
// Check if readOnly is activated
205209
if (!readOnly) {
206-
minusElement = (deep !== 0) ?
207-
(<span className="rejt-minus-menu" onClick={handleRemove} style={minus}> - </span>) : null;
210+
const minusMenuLayout = React.cloneElement(minusMenuElement, {
211+
onClick: handleRemove,
212+
className: 'rejt-minus-menu',
213+
style: minus,
214+
});
215+
minusElement = (deep !== 0) ? minusMenuLayout : null;
208216
}
209217

210218
return (<span className="rejt-collapsed">
@@ -229,15 +237,21 @@ class JsonObject extends Component {
229237
editButtonElement,
230238
inputElement,
231239
textareaElement,
240+
minusMenuElement,
241+
plusMenuElement,
232242
} = this.props;
233243

234244
const { minus, plus, addForm, ul, delimiter } = getStyle(name, data, keyPath, deep, dataType);
235245
const keyList = Object.getOwnPropertyNames(data);
236246
let minusElement = null;
237247
// Check if readOnly is activated
238248
if (!readOnly) {
239-
minusElement = (deep !== 0) ?
240-
(<span className="rejt-minus-menu" onClick={handleRemove} style={minus}> - </span>) : null;
249+
const minusMenuLayout = React.cloneElement(minusMenuElement, {
250+
onClick: handleRemove,
251+
className: 'rejt-minus-menu',
252+
style: minus,
253+
});
254+
minusElement = (deep !== 0) ? minusMenuLayout : null;
241255
}
242256

243257
const list = keyList
@@ -259,6 +273,8 @@ class JsonObject extends Component {
259273
editButtonElement={editButtonElement}
260274
inputElement={inputElement}
261275
textareaElement={textareaElement}
276+
minusMenuElement={minusMenuElement}
277+
plusMenuElement={plusMenuElement}
262278
/>);
263279

264280
const startObject = '{';
@@ -267,6 +283,11 @@ class JsonObject extends Component {
267283
let menu = null;
268284
// Check if readOnly is activated
269285
if (!readOnly) {
286+
const plusMenuLayout = React.cloneElement(plusMenuElement, {
287+
onClick: this.handleAddMode,
288+
className: 'rejt-plus-menu',
289+
style: plus,
290+
});
270291
menu = addFormVisible ?
271292
(<span className="rejt-add-form" style={addForm}><JsonAddValue
272293
handleAdd={this.handleAddValueAdd}
@@ -276,7 +297,7 @@ class JsonObject extends Component {
276297
inputElement={inputElement}
277298
/></span>) :
278299
(<span>
279-
<span className="rejt-plus-menu" onClick={this.handleAddMode} style={plus}> + </span> {minusElement}
300+
{plusMenuLayout} {minusElement}
280301
</span>);
281302
}
282303

0 commit comments

Comments
 (0)