Get current object path with custom button

[olavim]

I'm trying to add a button next to the copy button which would get me the current object path. For example, if I have the object

{
  "id": "1",
  "data": {
    "foo": "bar"
  }
}

and I clicked the button on the "foo": "bar" row, I want to return "data.foo". Similarly, if I clicked the button on the "data": { row, I want to return "data".

Here's an image with the button for reference (fake data)

My first attempt was using the JsonView.Copied component renderer to just throw the button next to the copy button, but I don't have access to the current path in the object there. The renderer only knows the key and value of the row. I don't see how I would achieve what I want with the other available component renderers either.

Is there a method with the current functionality? If not, would it be possible to add support for this use-case?

[jaywcjlove]

@olavim Now it returns 4 parameters: value, keyName, keys, parentValue. Could you give it a try?

<Copied
  as="span"
  render={({ 'data-copied': copied, style, onClick, ...props }, { value, keyName, keys, parentValue }) => {
    const styl = { whiteSpace: 'nowrap' }
    if (copied) {
      return <span style={{ ...style, ...styl }}>复制成功</span>
    }
    return <span style={{ ...style, ...styl }} onClick={onClick}>复制</span>
  }}
/>

[jaywcjlove]

@olavim upgrade v2.0.0-alpha.17

[olavim]

Thanks for the quick response! The change is working well for me.

[nnurmano]

This does not return the json path as the author intended. I am on ^2.0.0-alpha.23 and parentValue returns { "foo": "bar" }, which does not have data key.

[olavim]

@nnurmano the keys prop is the JSON path array. Or did I misunderstand what you meant?

[nnurmano]

Indeed! Sorry, I was looking at the wrong place.

[lsst25]

Hi, I also have a similar use case, thank you a lot for handling it!

It would be even better to have something like JsonView.Extra. It can be placed after the value and before the copy icon (because the copy icon is mingling and will cause the extra to jump left and right).

Current solution is coupled with the copy feature and will not work with enableClipboard={false}. Also, it's not straightforward to display an "extra" button permanently (it is hiding when not hovered as well as the copy icon).

Example:

      <JsonView value={data}>
        <JsonView.Extra render={({ keys }) => <button onClick={() => hanleCustomAction(keys)}>Custom Button</button>} />
      </JsonView>

[jaywcjlove]

@lsst25 You can achieve it using JsonView.Copied

<JsonView.Copied
  render={({ 'data-copied': copied, style, onClick, ...props }, { value }) => {
    const styl = { whiteSpace: 'nowrap' }
    return (
      <div>
        <button onClick={() => hanleCustomAction(keys)}>Custom Button</button>} />
        <span style={{ ...style, ...styl }} onClick={onClick}>
          {copied ? "复制成功" : "复制"}
        </span>
      </div>
    )
  }}
/>