carlosnz / json-edit-react Goto Github PK

Would like to extend it to have more potential control (e.g. being able to specify font weights and styles for each token), but without over-complicating the system.

I actually don't want to add any additional UI to the component itself, but I think it would be good to accept a "search" prop and then filter accordingly. I'd even handle the debouncing, so the external Search input can be pretty simple.

Accept another "Filter function" prop defining which elements should be hidden from display.

And.... also specify custom text (so we can display the operator for Fig Tree)

They should all share the same, even if not used -- it's simpler that way

Getting this upon saving edited value

Uncaught (in promise) TypeError: Object(...) is not a function
    le index.esm.js:1
    onEdit index.esm.js:1
    v index.esm.js:1
    v index.esm.js:1
    onEdit index.esm.js:1
    L index.esm.js:1
    React 14
    unstable_runWithPriority scheduler.development.js:468
    React 4

the implementation

<JsonEditor
                   data={{ test: 1, test2: 2, test3: 3 }}
                    // enableClipboard={true}
                    // restrictEdit={false}
                    // restrictDelete={true}
                    // restrictAdd={true}
                    // restrictTypeSelection={true}
                    onEdit={(data)=>{
                             console.log(TAG,"OnEdit...");
                    }}
                    onUpdate={(data) => {
                           console.log(TAG, "OnUpdate :", data);
                    }}
 />

Keep it simple, but should be able to pass a localised strings object to the component so English strings can be replaced.

Rather than this:

Something like this would look better:

>hoursSchedule: [ 24 items
  0, 1, 2, 3, 4, 5, 6, 
  7, 8, 9, 10, 11, 12,
  13, 14, 15, 16, 17,
  18, 19, 20, 21, 22,
  23
]

Would affect both the collection layout and the JSON.stringify() display when editing, so not trivial to do nicely.

Similarly for "small" arrays, it would look nicer if they were all on one line.

Currently, if you pass a custom node, it can no longer be edited using json-edit-react (you would have to integrate your own editor). We should make this an option, and when editing the contents will just be interpreted normally (i.e. as a string, boolean, etc.)

Currently you have to just delete one, then make a new one with the same value. Direct editing of keys might be useful.

This is mainly just so I can build a UI for FigTreeEvaluator without having to start from scratch.

Idea is for this component to accept an additional prop, customNodes, which is an array of:

{
  condition: FilterFunction,
  component: React.Component
}

Then for any field in the json-edit-react data object, if the "condition" criteria is met, we return the "component", which handles its own internal logic for how to render and process the data field.

Maybe other states, too. For example, a "disabled" state at which time it can't be edited.