uiwjs / react-json-view

A React component for displaying and editing javascript arrays and JSON objects.
https://uiwjs.github.io/react-json-view/
MIT License
188 stars 11 forks source link

Support of ObjectId #19

Open fberrez opened 10 months ago

fberrez commented 10 months ago

Currently, there is no support of bson ObjectId. The purpose would be to implement it so it cans look like:

image
jaywcjlove commented 10 months ago

@fberrez https://codesandbox.io/embed/https-github-com-uiwjs-react-json-view-issues-19-5rhzdj?fontsize=14&hidenavigation=1&theme=dark

import React from 'react';
import JsonView from '@uiw/react-json-view';

const object = {
  _id: "ObjectId('13212hakjdhajksd')",
  uid: "test1",
  attival_time: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
  __v: 0
}

export default function Demo() {
  return (
    <JsonView
      value={object}
      // keyName="root"
      displayObjectSize={false}
      style={{
        '--w-rjv-background-color': '#ffffff',
      }}
    >
      <JsonView.Quote render={() => <span />}/>
      <JsonView.String
        render={({ children, ...reset }, { type, value, keyName }) => {
          if (type === 'type') {
            return <span />
          }
          if (type === 'value' && /ObjectId\(['"](.*?)['"]\)/.test(value)) {
            return <span {...reset}>{children}</span>
          }
        }}
      />
      <JsonView.Date
        render={({ children, ...reset }, { type, value, keyName }) => {
          if (type === 'type') {
            return <span />
          }
        }}
      />
      <JsonView.Int
        render={({ children, ...reset }, { type, value, keyName }) => {
          if (type === 'type') {
            return <span />
          }
        }}
      />
    </JsonView>
  )
}
fberrez commented 10 months ago

Looks great but it seems that I have to convert first all the ObjectId I have in my mongo document. Thank you for the tip