kt-schema-creator
v1.7.1
Published
React Editable Json Tree
Downloads
5
Maintainers
Readme
React Editable Json Tree
Demo
Demo is available here : Demo
Features
- Json Viewer
- Collapse node possibility via function
- Add new node value
- Remove node value
- Update node value
- Implicit convert of new value ({} for object, [] for array, true for boolean, ...)
- Style via function
- Read only possibility
- Call for global update and delta update
- Possibility to give buttons, inputs, ... in parameters
- Possibility to authorize remove action
How to use
Install
npm install --save react-editable-json-tree
Example Usage
// Import
import { JsonTree, ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from 'react-editable-json-tree'
// Data
const data = {
error: new Error('error'),
text: 'text',
int: 100,
boolean: true,
null: null,
object: {
text: 'text',
int: 100,
boolean: true,
},
array: [
1,
{
string: 'test',
},
],
}
// Component
<JsonTree data={data} />
There is a screenshot of the result :
Props
data
| Key | Description | Type | Required | Default | |:----:|:---------------------------:|:------------:|:--------:|:--------:| | data | Data to be displayed/edited | Object/Array | True | None |
rootName
| Key | Description | Type | Required | Default | |:--------:|:--------------------------:|:------:|:---------:|:--------:| | rootName | Root name for first object | String | False | root |
isCollapsed
| Key | Description | Type | Required | Default |
|:-----------:|:--------------------------------------------:|:--------:|:---------:|:---------------------------------:|
| isCollapsed | Is node collapsed ? (For Array/Object/Error) | Function | False | (keyPath, deep) => (deep !== 0)
|
Function parameters :
| Key | Description | Type | Example | |:-----------:|:------------------------:|:------:|:---------------------------------------------------------------:| | keyPath | Key path of current node | Array | ['object'] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | data | data of current node/value | Any | { string: 'test' } for data: { object: { string: 'test' } } |
onFullyUpdate
| Key | Description | Type | Required | Default |
|:-------------:|:---------------------------------------------------------------------:|:--------:|:---------:|:----------:|
| onFullyUpdate | Function called each time an update is done and give the updated data | Function | False | () => {}
|
Function parameters :
| Key | Description | Type | |:--------:|:------------:|:-----------------------------:| | data | Updated data | Object/Array (Same as entry) |
onDeltaUpdate
| Key | Description | Type | Required | Default |
|:-------------:|:-----------------------------------------------------------------:|:--------:|:---------:|:----------:|
| onDeltaUpdate | Function called each time an update is done and give delta update | Function | False | () => {}
|
Function parameters :
| Key | Description | Type | |:--------:|:-----------:|:-------:| | data | Delta data | Object |
Delta data structure :
| Key | Description | Type | Example | |:--------:|:------------------------------:|:-------:|:--------------------------------------------------------------:| | type | Delta type | String | 'ADD_DELTA_TYPE' or 'REMOVE_DELTA_TYPE' or 'UPDATE_DELTA_TYPE' | | keyPath | key path | Array | ['object'] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | key | Modified/Created/Removed key | String | None | | newValue | New Value | Any | None | | oldValue | Old Value | Any | None |
readOnly
| Key | Description | Type | Required | Default |
|:--------:|:--------------------------------:|:-------:|:---------:|:---------:|
| readOnly | Read only boolean for all object when a boolean is provided, read only for specific keys when function is provided | Boolean | Function | False | (keyName, data, keyPath, deep, dataType) => false
|
This function must return a boolean.
Function parameters :
| Key | Description | Type | Example | |:-----------:|:-------------------------------:|:-------:|:---------------------------------------------------------------:| | keyName | Key name of current node/value | String | 'object' for data: { object: { string: 'test' } } | | data | data of current node/value | Any | { string: 'test' } for data: { object: { string: 'test' } } | | keyPath | key path | Array | ['object'] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | dataType | data type of current node/value | String | 'Object', 'Array', 'Null', 'Undefined', 'Error', 'Number', ... |
getStyle
| Key | Description | Type | Required | Default |
|:-----------:|:--------------------:|:--------:|:---------:|:---------------------------------------------------:|
| getStyle | Get style (CSS keys) | Function | False | (keyName, data, keyPath, deep, dataType) => {...}
|
Function parameters :
| Key | Description | Type | Example | |:-----------:|:-------------------------------:|:-------:|:---------------------------------------------------------------:| | keyName | Key name of current node/value | String | 'object' for data: { object: { string: 'test' } } | | data | data of current node/value | Any | { string: 'test' } for data: { object: { string: 'test' } } | | keyPath | key path | Array | ['object'] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | dataType | data type of current node/value | String | 'Object', 'Array', 'Null', 'Undefined', 'Error', 'Number', ... |
An example of return :
{
minus: {
color: 'red',
},
plus: {
color: 'green',
},
collapsed: {
color: 'grey',
},
delimiter: {},
ul: {
padding: '0px',
margin: '0 0 0 25px',
listStyle: 'none',
},
name: {
color: '#2287CD',
},
addForm: {},
}
You can see the actual used in src/utils/styles.js
.
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.
This item will be focus when possible.
textareaElement
| Key | Description | Type | Required | Default |
|:---------------:|:-----------------------------------------:|:-----------:|:--------:|:--------------:|
| textareaElement | Textarea Element to replace library one | Element | False | <textarea />
|
The library will add a ref
, defaultValue
props on element.
This item will be focus when possible.
minusMenuElement
| Key | Description | Type | Required | Default |
|:----------------:|:-----------------------------------------:|:-----------:|:--------:|:-------------------:|
| minusMenuElement | Minus Menu Element to replace library one | Element | False | <span> - </span>
|
The library will add a onClick
, className
and style
props on element.
plusMenuElement
| Key | Description | Type | Required | Default |
|:---------------:|:----------------------------------------:|:-----------:|:--------:|:-------------------:|
| plusMenuElement | Plus Menu Element to replace library one | Element | False | <span> + </span>
|
The library will add a onClick
, className
and style
props on element.
beforeRemoveAction
| Key | Description | Type | Required | Default |
|:------------------:|:------------------------------------------------------------:|:--------:|:---------:|:---------------------------------------------------------------------:|
| beforeRemoveAction | Function called before each remove action (with minus menu) | Function | False | (key, keyPath, deep, oldValue) => new Promise(resolve => resolve())
|
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.
Function parameters :
| Key | Description | Type | Example | |:-----------:|:-------------------------------:|:-------:|:----------------------------------------------------------------------------:| | key | Key of current node/value | String | 'object' for data: { object: { string: 'test' } } | | keyPath | key path | Array | [] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | oldValue | Old value of the key | Any | { string: 'test' } for data: { object: { string: 'test' } } on 'object' node |
beforeAddAction
| Key | Description | Type | Required | Default |
|:---------------:|:--------------------------------------------------------:|:--------:|:---------:|:---------------------------------------------------------------------:|
| beforeAddAction | Function called before each add action (with plus menu) | Function | False | (key, keyPath, deep, newValue) => new Promise(resolve => resolve())
|
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.
Function parameters :
| Key | Description | Type | Example | |:-----------:|:-------------------------------:|:-------:|:----------------------------------------------------------------------------:| | key | Key of current node/value | String | 'string' for data: { object: { string: 'test' } } | | keyPath | key path | Array | ['object'] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | newValue | New value of the key | Any | 'test' for data: { object: { string: 'test' } } on 'string' node |
beforeUpdateAction
| Key | Description | Type | Required | Default |
|:------------------:|:-----------------------------------------:|:--------:|:---------:|:-------------------------------------------------------------------------------:|
| beforeUpdateAction | Function called before each update action | Function | False | (key, keyPath, deep, oldValue, newValue) => new Promise(resolve => resolve())
|
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.
Function parameters :
| Key | Description | Type | Example | |:-----------:|:-------------------------------:|:-------:|:----------------------------------------------------------------------------:| | key | Key of current node/value | String | 'string' for data: { object: { string: 'test' } } | | keyPath | key path | Array | ['object'] for data: { object: { string: 'test' } } | | deep | Deep of current node | Number | 1 for data: { object: { string: 'test' } } on 'object' node | | oldValue | Old value of the key | Any | 'test' for data: { object: { string: 'test' } } on 'string' node | | newValue | New value of the key | Any | 'update' for data: { object: { string: 'update' } } on 'string' node |
Design
The library provide CSS class on elements. All are prefixed by "rejt" to avoid conflict. To avoid being linked with a CSS file, the library will use the inline style.
Here is the list of classes by element and by deep and with basic element (on which it's applied).
JsonTree
- rejt-tree (div)
JsonObject
Collapsed
- rejt-object-node (div)
- rejt-name (span)
- rejt-collapsed (span)
- rejt-collapsed-text (span)
- rejt-minus-menu (span)
Not Collapsed
- rejt-object-node (div)
- rejt-name (span)
- rejt-not-collapsed (span)
- rejt-not-collapsed-delimiter (span)
- rejt-not-collapsed-list (ul)
- rejt-not-collapsed-delimiter (span)
- rejt-add-form (span)
- rejt-plus-menu (span)
- rejt-minus-menu (span)
JsonArray
Collapsed
- rejt-array-node (div)
- rejt-name (span)
- rejt-collapsed (span)
- rejt-collapsed-text (span)
- rejt-minus-menu (span)
Not Collapsed
- rejt-array-node (div)
- rejt-name (span)
- rejt-not-collapsed (span)
- rejt-not-collapsed-delimiter (span)
- rejt-not-collapsed-list (ul)
- rejt-not-collapsed-delimiter (span)
- rejt-add-form (span)
- rejt-plus-menu (span)
- rejt-minus-menu (span)
JsonAddValue
- rejt-add-value-node (span)
JsonFunctionValue
- rejt-function-value-node (li)
- rejt-name (span)
- rejt-edit-form (span)
- rejt-value (span)
- rejt-minus-menu (span)
JsonValue
- rejt-value-node (li)
- rejt-name (span)
- rejt-edit-form (span)
- rejt-value (span)
- rejt-minus-menu (span)
Development
Serve
npm run serve
Release
npm run release
Inspired by
Thanks
- My wife BH to support me doing this
Author
- Oxyno-zeta (Havrileck Alexandre)
License
MIT (See in License.md)