Skip to content

Commit d8c4cba

Browse files
oxyno-zetaoxyno-zeta
committed
[Library] Issue #7 part 1 : Add inputElement function possibility
1 parent eab1000 commit d8c4cba

17 files changed

+203
-71
lines changed

‎docs/app-23b3e.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎docs/app-23b3e.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/app-e8567.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/app-e8567.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@
88

99
<div id="app"></div>
1010

11-
<script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="app-23b3e.js"></script></body>
11+
<script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="app-e8567.js"></script></body>
1212
</html>

‎docs/vendor.bundle.js

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/vendor.bundle.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/JsonTree.js

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@ import React, { Component } from 'react';
1010
import PropTypes from 'prop-types';
1111
import JsonNode from './components/JsonNode';
1212
import { value, object, array } from './utils/styles';
13-
import { ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from './utils/deltaTypes';
13+
import { ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from './types/deltaTypes';
1414
import { getObjectType } from './utils/objectTypes';
15+
import DATA_TYPES from './types/dataTypes';
16+
import INPUT_USAGE_TYPES from './types/inputUsageTypes';
1517

1618
/* ************************************* */
1719
/* ******** VARIABLES ******** */
@@ -31,8 +33,14 @@ const propTypes = {
3133
addButtonElement: PropTypes.element,
3234
cancelButtonElement: PropTypes.element,
3335
editButtonElement: PropTypes.element,
34-
inputElement: PropTypes.element,
35-
textareaElement: PropTypes.element,
36+
inputElement: PropTypes.oneOfType([
37+
PropTypes.element,
38+
PropTypes.func,
39+
]),
40+
textareaElement: PropTypes.oneOfType([
41+
PropTypes.element,
42+
PropTypes.func,
43+
]),
3644
minusMenuElement: PropTypes.element,
3745
plusMenuElement: PropTypes.element,
3846
beforeRemoveAction: PropTypes.func,
@@ -65,6 +73,8 @@ const defaultProps = {
6573
beforeAddAction: (key, keyPath, deep, newValue) => new Promise(resolve => resolve()),
6674
beforeUpdateAction: (key, keyPath, deep, oldValue, newValue) => new Promise(resolve => resolve()),
6775
logger: { error: () => {} },
76+
// inputElement : (usage, keyPath, deep, keyName, data, dataType)
77+
// textareaElement : (usage, keyPath, deep, keyName, data, dataType)
6878
/* eslint-enable */
6979
};
7080

@@ -125,6 +135,14 @@ class JsonTree extends Component {
125135
if (getObjectType(readOnly) === 'Boolean') {
126136
readOnlyFunction = () => (readOnly);
127137
}
138+
let inputElementFunction = inputElement;
139+
if (inputElement && getObjectType(inputElement) !== 'Function') {
140+
inputElementFunction = () => inputElement;
141+
}
142+
let textareaElementFunction = textareaElement;
143+
if (textareaElement && getObjectType(textareaElement) !== 'Function') {
144+
textareaElementFunction = () => textareaElement;
145+
}
128146

129147
if (dataType === 'Object' || dataType === 'Array') {
130148
node = (<JsonNode
@@ -140,8 +158,8 @@ class JsonTree extends Component {
140158
addButtonElement={addButtonElement}
141159
cancelButtonElement={cancelButtonElement}
142160
editButtonElement={editButtonElement}
143-
inputElement={inputElement}
144-
textareaElement={textareaElement}
161+
inputElementGenerator={inputElementFunction}
162+
textareaElementGenerator={textareaElementFunction}
145163
minusMenuElement={minusMenuElement}
146164
plusMenuElement={plusMenuElement}
147165
beforeRemoveAction={beforeRemoveAction}
@@ -169,3 +187,5 @@ export { JsonTree };
169187
export { ADD_DELTA_TYPE };
170188
export { REMOVE_DELTA_TYPE };
171189
export { UPDATE_DELTA_TYPE };
190+
export { DATA_TYPES };
191+
export { INPUT_USAGE_TYPES };

‎src/components/JsonAddValue.js

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import React, { Component } from 'react';
1010
import PropTypes from 'prop-types';
1111
import { HotKeys } from 'react-hotkeys';
1212
import parse from '../utils/parse';
13+
import inputUsageTypes from '../types/inputUsageTypes';
1314

1415
/* ************************************* */
1516
/* ******** VARIABLES ******** */
@@ -21,14 +22,16 @@ const propTypes = {
2122
onlyValue: PropTypes.bool,
2223
addButtonElement: PropTypes.element,
2324
cancelButtonElement: PropTypes.element,
24-
inputElement: PropTypes.element,
25+
inputElementGenerator: PropTypes.func,
26+
keyPath: PropTypes.array,
27+
deep: PropTypes.number,
2528
};
2629
// Default props
2730
const defaultProps = {
2831
onlyValue: false,
2932
addButtonElement: <button>+</button>,
3033
cancelButtonElement: <button>c</button>,
31-
inputElement: <input />,
34+
inputElementGenerator: () => <input />,
3235
};
3336

3437
/* ************************************* */
@@ -88,23 +91,32 @@ class JsonAddValue extends Component {
8891
}
8992

9093
render() {
91-
const { handleCancel, onlyValue, addButtonElement, cancelButtonElement, inputElement } = this.props;
92-
94+
const {
95+
handleCancel,
96+
onlyValue,
97+
addButtonElement,
98+
cancelButtonElement,
99+
inputElementGenerator,
100+
keyPath,
101+
deep,
102+
} = this.props;
93103
const addButtonElementLayout = React.cloneElement(addButtonElement, {
94104
onClick: this.onSubmit,
95105
});
96106
const cancelButtonElementLayout = React.cloneElement(cancelButtonElement, {
97107
onClick: handleCancel,
98108
});
99-
const inputElementValueLayout = React.cloneElement(inputElement, {
109+
const inputElementValue = inputElementGenerator(inputUsageTypes.VALUE, keyPath, deep);
110+
const inputElementValueLayout = React.cloneElement(inputElementValue, {
100111
placeholder: 'Value',
101112
ref: this.refInputValue,
102113
});
103114
let inputElementKeyLayout = null;
104115
let separatorElement = null;
105116

106117
if (!onlyValue) {
107-
inputElementKeyLayout = React.cloneElement(inputElement, {
118+
const inputElementKey = inputElementGenerator(inputUsageTypes.KEY, keyPath, deep);
119+
inputElementKeyLayout = React.cloneElement(inputElementKey, {
108120
placeholder: 'Key',
109121
ref: this.refInputKey,
110122
});

‎src/components/JsonArray.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
1111
import JsonNode from './JsonNode';
1212
import JsonAddValue from './JsonAddValue';
1313
import { getObjectType } from '../utils/objectTypes';
14-
import { ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from '../utils/deltaTypes';
14+
import { ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from '../types/deltaTypes';
1515

1616
/* ************************************* */
1717
/* ******** VARIABLES ******** */
@@ -32,8 +32,8 @@ const propTypes = {
3232
addButtonElement: PropTypes.element,
3333
cancelButtonElement: PropTypes.element,
3434
editButtonElement: PropTypes.element,
35-
inputElement: PropTypes.element,
36-
textareaElement: PropTypes.element,
35+
inputElementGenerator: PropTypes.func,
36+
textareaElementGenerator: PropTypes.func,
3737
minusMenuElement: PropTypes.element,
3838
plusMenuElement: PropTypes.element,
3939
beforeRemoveAction: PropTypes.func,
@@ -260,8 +260,8 @@ class JsonArray extends Component {
260260
addButtonElement,
261261
cancelButtonElement,
262262
editButtonElement,
263-
inputElement,
264-
textareaElement,
263+
inputElementGenerator,
264+
textareaElementGenerator,
265265
minusMenuElement,
266266
plusMenuElement,
267267
beforeRemoveAction,
@@ -300,8 +300,8 @@ class JsonArray extends Component {
300300
addButtonElement={addButtonElement}
301301
cancelButtonElement={cancelButtonElement}
302302
editButtonElement={editButtonElement}
303-
inputElement={inputElement}
304-
textareaElement={textareaElement}
303+
inputElementGenerator={inputElementGenerator}
304+
textareaElementGenerator={textareaElementGenerator}
305305
minusMenuElement={minusMenuElement}
306306
plusMenuElement={plusMenuElement}
307307
beforeRemoveAction={beforeRemoveAction}
@@ -326,7 +326,9 @@ class JsonArray extends Component {
326326
onlyValue={onlyValue}
327327
addButtonElement={addButtonElement}
328328
cancelButtonElement={cancelButtonElement}
329-
inputElement={inputElement}
329+
inputElementGenerator={inputElementGenerator}
330+
keyPath={keyPath}
331+
deep={deep}
330332
/></span>) :
331333
(<span>
332334
{plusMenuLayout} {minusElement}

0 commit comments

Comments
 (0)