Add/Delete functionality

[nirh1989]

Hi Team,

As mentioned in the README:

This package is originally based on mac-s-g/react-json-view.

In the older "react-json-view" package there was ability to "add" and "delete" raws (keys) to existing objects, I don't see this feature in the current new package.

Is it possible to add both features?

Thanks :)

[pionxzh]

I imagine there will be enableAdd and enableDelete, and their corresponding callback. I'm not very sure if it fits into the current model well; will look into it.

[nirh1989]

Hi @pionxzh

Thank you for the quick respond. Looking forward to your update :)

[nirh1989]

Hi @pionxzh

Can you give a time estimation to when this will be available? days, weeks, months...?

Thanks, Nir

[pionxzh]

Sure, I can prioritize this up. Should be in 3 days.

[nirh1989]

Thank you @pionxzh ! Looking forward to it :)

[pionxzh]

Hi, please check the PR. These APIs are not the same as what mac-s-g/react-json-view has, but I believe they are much more powerful for advanced users.

For add, you can implement your own UI or user flow to achieve things like validation and auto-completion.

For delete, you can filter protected value from being deleted by passing a custom enableDelete.

[nirh1989]

Hi @pionxzh Thank you! That looks great. Can you merge it so it will be available when installing new version via npm?

[pionxzh]

Released 3.3.0

[nirh1989]

Thank you @pionxzh I installed version 3.3.0, i can see the new properties now enableAdd and enableDelete also with onAdd and onDelete

I set both enableAdd and enableDelete with true, but the icons for these actions are not shown in the UI Any idea?

[pionxzh]

@nirh1989 Did you also provide onAdd and onDelete?

[nirh1989]

@pionxzh yes i did

[pionxzh]

Could you use the stackblitz or something else to create a minimal reproduction?

[pionxzh]

Map and Set's children will not show these icons

[nirh1989]

@pionxzh i used your stackblitz i added the following just to see if the icons shown (the logic not really important right now)

this is the Stackblitz i created from yours https://stackblitz.com/edit/textea-json-viewer-v3-b4wgxq-mapyqx?file=package.json

<JsonViewer
        value={src}
        editable={true}
        enableAdd={true}
        enableDelete={true}
        theme={theme}
        indentWidth={indent}
        highlightUpdates={true}
        onChange={handleChange}
        onAdd={(e) => e}
        onDelete={(e) => e}
        keyRenderer={KeyRenderer}
        valueTypes={[imageType]}
      />

i can see the icons are added. I did the same in my code and the icons are not added which is weird. My component is a class component, unlike your example which is a functional component, but this shouldn't be an issue

edit this is my code

<JsonViewer
            value={this.state.request}
            editable={true}
            enableAdd={true}
            enableDelete={true}
            highlightUpdates={true}
            onChange={this.handleJsonChange}
            onAdd={e => e}
            onDelete={e => e}
            defaultInspectDepth={100}
            rootName='request'
          />

any thoughts?

[pionxzh]

Can you see copy icon?

[nirh1989]

@pionxzh yes, i can see both copy and edit icons, but not the new icons of add and delete

[pionxzh]

🤔 Your code looks ok. What is the data type of your data?

[nirh1989]

@pionxzh this is my structure:

{
  "request": [
    {
      "handler": "session_info",
      "customer_session_id": "v7zwh3s06skp6a6aeq7us8",
      "remote_addr": "203.0.113.15",
      "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Ap…",
      "result": "pass",
      "channel": "online",
      "new_account_data": {
        "new_account": true,
        "first_name": "Terry",
        "last_name": "Smith",
        "phone_number": "<mobile phone number>",
        "email": "terry.smith@example.com"
      }
    },
    {
      "handler": "pinpoint_eval",
      "customer_session_id": "v7zwh3s06skp6a6aeq7us8",
      "remote_addr": "203.0.113.15",
      "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Ap…",
      "activity": "new_account",
      "url": "/account-pages/v9_0/index.php?code=6660003&page=mu…",
      "timestamp": "2024-01-16 08:27:22",
    }
  ]
}

so in the original package, i was able to add new keys to each object in the main array, and also to the object called new_account_data

[pionxzh]

is it possible that you forgot to run npm install? I kind of have no idea about the reason why it might disappear. You can try to simplify the setup or reproduce it in the demo. I feel like it was impacted by something in your project.

[nirh1989]

i did run npm install but i will try to figure it out. i implemented class component similar to what i have https://stackblitz.com/edit/textea-json-viewer-v3-b4wgxq-mapyqx?file=pages%2Findex.js,package.json and it works, i will try to understand what is wrong in my project

Thank you very much :)

[nirh1989]

@pionxzh My page, the one that use <JsonViewer> used in 2 of my apps, one is using NextJS the other one is using Vite The project using NextJS works fine, but the project with Vite is the one that doesn't show the new add and delete icons... any idea on that one?

[nirh1989]

@pionxzh i also noticed that when clicking on the add icon, there is no input field shown (to enter the new key) In the original library, once the user clicks the add button, an input shows up next to it, allowing the user to type the name of the key he wants to add

[pionxzh]

The library actually does not provide any default behavior on add and delete. It will depend on the users' use case. I have provided the basic implementation and utils to help ppl build their own logic.

https://github.com/TexteaInc/json-viewer/blob/375f16624814e9756bf53160a2a6913d9bedd9c8/docs/pages/full/index.tsx#L353-L377

[nirh1989]

Thank you for the input @pionxzh Any idea why it does not work on Vite but does work on NextJS?

[pionxzh]

I just created a Vite project with json-viewer. https://stackblitz.com/edit/vitejs-vite-gp8nve?file=src%2FApp.jsx&terminal=dev

Looks ok on my end 👀

[nirh1989]

That is so strange... Thank you for the demo @pionxzh i will try to dig and find out what is the issue on my side

[nirh1989]

@pionxzh FYI upgrading the Vite and MUI packages solved it Thank you for all your support :)

[pionxzh]

Glad you made it work. 👍