CarlosNZ / json-edit-react

React component for editing/viewing JSON/object data
https://carlosnz.github.io/json-edit-react/
MIT License
183 stars 18 forks source link

Feature request: Object property / key selection #95

Open acidMyke opened 4 months ago

acidMyke commented 4 months ago

Hi CarlosNZ,

To provide easier selection of object properties.

I'm proposing a new prop restrictAddSelection, similar to restrictTypeSelection, where the user is given a dropdown, if prop is provided and if the data is object, to be able to select the appropriate key to add, instead of requiring user to type out the prop key.

My original plan is for this feature to merge with the existing restrictAdd prop but, after thinking it through, it will conflict with existing usage. In order for the dropdown to appear, restrictAddSelection needs to be called when the add input field is rendered, whereas restrictAdd is only called after the new key is added for validation. Do let me your opinion on this.

Possible Syntax:

type AddFilterFunction = (input: NodeData) => boolean | string[]
interface JsonEditorProps {
  //...
  restrictAddSelection?: boolean | string[] | AddFilterFunction
}

Mock-up: add-dropdown-mockup

I could try to implement the feature if you don't mind.

Look forward to your response.

CarlosNZ commented 4 months ago

Hey, this sounds like a good idea. My only concern would be that it could be quite tedious to define a function to handle all the different possible options for different parts of the data structure if it's a reasonably complex one, but I guess it would be handy for smaller data sets.

I think I'd call it addPropertyOptions, or something like that, not totally sure yet.

I'll try and do this in the next couple of weeks, but feel free to make a start or post a PR if I haven't got to it soon enough.

(That reminds me, I should probably update the README with some info about setting up a dev environment -- let me know if you have any trouble with it)

dreglad commented 5 days ago

It’d be even better to work this by providing a JSON Schema instead of manual definitions. That way, it’d address @CarlosNZ’s concern about handling complex data structures and also add cool benefits like autocompletion.