feat: Enhance VariableEditor to support BigNumber type handling

Suntgr · Kikobeats · commit 98d2d1e508f7 · 2025-02-12T09:42:30.000+01:00
diff --git a/README.md b/README.md
@@ -51,7 +51,8 @@ import ReactJsonView from '@microlink/react-json-view'
     'last-child': null
     },
   string_number: '1234',
-  date: new Date()
+  date: new Date(),
+  bigNumber: new BigNumber('0.0060254656709730629123')
 }} />
 ```
 
@@ -81,7 +82,8 @@ import ReactJsonView from '@microlink/react-json-view'
 | `quotesOnKeys`               | `boolean`                                        | `true`                   | Set to `false` to remove quotes from keys (e.g., `"name":` vs. `name:`).                                                                                                                                                                                                  |
 | `validationMessage`          | `string`                                         | "Validation Error"       | Custom message for validation failures to `onEdit`, `onAdd`, or `onDelete` callbacks.                                                                                                                                                                                     |
 | `displayArrayKey`            | `boolean`                                        | `true`                   | When set to `true`, the index of the elements prefix values.                                                                                                                                                                                                              |
-| `escapeStrings`              | `boolean`                                        | `true`                   | When set to `true`, strings sequences such as \n, \t, \r, \f will be escaped.                                                                                                                                                                                                              |
+| `escapeStrings`              | `boolean`                                        | `true`                   | When set to `true`, strings sequences such as \n, \t, \r, \f will be escaped.                                                                                                                                                                                                          |
+| `bigNumber`                  | `BigNumber \| Decimal \| Big`                      | `null`                   | When set to a BigNumber class (from `bignumber.js`, `decimal.js` or `big.js`), numbers will be parsed and displayed using that class for high precision decimal handling.                                                                                                                |
 
 #### Callbacks
 
diff --git a/src/js/components/DataTypes/BigNumber.js b/src/js/components/DataTypes/BigNumber.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import DataTypeLabel from './DataTypeLabel'
+
+// theme
+import Theme from './../../themes/getStyle'
+
+export default class extends React.PureComponent {
+  render () {
+    const type_name = 'bigNumber'
+    const { props } = this
+    return (
+      <div {...Theme(props.theme, 'bigNumber')}>
+        <DataTypeLabel type_name={type_name} {...props} />
+        {this.props.value.toString()}
+      </div>
+    )
+  }
+}
diff --git a/src/js/components/DataTypes/DataTypes.js b/src/js/components/DataTypes/DataTypes.js
@@ -9,3 +9,4 @@ export { default as JsonObject } from './Object'
 export { default as JsonRegexp } from './Regexp'
 export { default as JsonString } from './String'
 export { default as JsonUndefined } from './Undefined'
+export { default as JsonBigNumber } from './BigNumber'
diff --git a/src/js/components/DataTypes/Object.js b/src/js/components/DataTypes/Object.js
@@ -245,12 +245,12 @@ class RjvObject extends React.PureComponent {
     }
 
     keys.forEach(name => {
-      variable = new JsonVariable(name, variables[name])
+      variable = new JsonVariable(name, variables[name], props.bigNumber)
 
       if (parent_type === 'array_group' && index_offset) {
         variable.name = parseInt(variable.name) + index_offset
       }
-      if (!variables.hasOwnProperty(name)) {
+      if (!Object.prototype.hasOwnProperty.call(variables, name)) {
       } else if (variable.type === 'object') {
         elements.push(
           <JsonObject
@@ -286,6 +286,7 @@ class RjvObject extends React.PureComponent {
           />
         )
       } else {
+        // include bigNumber
         elements.push(
           <VariableEditor
             key={variable.name + '_' + namespace}
@@ -305,10 +306,10 @@ class RjvObject extends React.PureComponent {
 
 // just store name, value and type with a variable
 class JsonVariable {
-  constructor (name, value) {
+  constructor (name, value, bigNumber) {
     this.name = name
     this.value = value
-    this.type = toType(value)
+    this.type = toType(value, bigNumber)
   }
 }
 
diff --git a/src/js/components/VariableEditor.js b/src/js/components/VariableEditor.js
@@ -18,7 +18,8 @@ import {
   JsonNull,
   JsonRegexp,
   JsonString,
-  JsonUndefined
+  JsonUndefined,
+  JsonBigNumber
 } from './DataTypes/DataTypes'
 
 // clibboard icon
@@ -166,8 +167,8 @@ class VariableEditor extends React.PureComponent {
 
   prepopInput = variable => {
     if (this.props.onEdit !== false) {
-      const stringifiedValue = stringifyVariable(variable.value)
-      const detected = parseInput(stringifiedValue)
+      const stringifiedValue = stringifyVariable(variable.value, this.props.bigNumber)
+      const detected = parseInput(stringifiedValue, this.props.bigNumber)
       this.setState({
         editMode: true,
         editValue: stringifiedValue,
@@ -236,6 +237,8 @@ class VariableEditor extends React.PureComponent {
         return <JsonDate value={variable.value} {...props} />
       case 'regexp':
         return <JsonRegexp value={variable.value} {...props} />
+      case 'bigNumber':
+        return <JsonBigNumber value={variable.value} {...props} />
       default:
         // catch-all for types that weren't anticipated
         return <div class='object-value'>{JSON.stringify(variable.value)}</div>
@@ -259,7 +262,7 @@ class VariableEditor extends React.PureComponent {
           class='variable-editor'
           onChange={event => {
             const value = event.target.value
-            const detected = parseInput(value)
+            const detected = parseInput(value, this.props.bigNumber)
             this.setState({
               editValue: value,
               parsedInput: {
@@ -320,12 +323,15 @@ class VariableEditor extends React.PureComponent {
   }
 
   submitEdit = submit_detected => {
-    const { variable, namespace, rjvId } = this.props
+    const { variable, namespace, rjvId, bigNumber: BigNumber } = this.props
     const { editValue, parsedInput } = this.state
     let new_value = editValue
     if (submit_detected && parsedInput.type) {
       new_value = parsedInput.value
-    }
+      if (BigNumber && parsedInput.type === 'bigNumber') {
+        new_value = new BigNumber(new_value)
+      }
+    } 
     this.setState({
       editMode: false
     })
@@ -456,6 +462,8 @@ class VariableEditor extends React.PureComponent {
           return <JsonUndefined {...props} />
         case 'date':
           return <JsonDate value={new Date(value)} {...props} />
+        case 'bignumber':
+          return <JsonBigNumber value={value} {...props} />
       }
     }
   }
diff --git a/src/js/helpers/parseInput.js b/src/js/helpers/parseInput.js
@@ -1,11 +1,11 @@
-export default function parseInput (input) {
+export default function parseInput (input, bigNumber) {
   // following code is to make a best guess at
   // the type for a variable being submitted.
 
   // we are working with a serialized data representation
   input = input.trim()
   try {
-    input = JSON.stringify(JSON.parse(input))
+    input = structuredClone(input)
     if (input[0] === '[') {
       // array
       return formatResponse('array', JSON.parse(input))
@@ -16,6 +16,9 @@ export default function parseInput (input) {
       input.match(/\-?\d+\.\d+/) &&
       input.match(/\-?\d+\.\d+/)[0] === input
     ) {
+      if (bigNumber && parseFloat(input).toString() !== input) {
+        return formatResponse('bigNumber', input)
+      }
       // float
       return formatResponse('float', parseFloat(input))
     } else if (
@@ -25,6 +28,9 @@ export default function parseInput (input) {
       // scientific float
       return formatResponse('float', Number(input))
     } else if (input.match(/\-?\d+/) && input.match(/\-?\d+/)[0] === input) {
+      if (bigNumber && parseInt(input).toString() !== input) {
+        return formatResponse('bigNumber', input)
+      }
       // integer
       return formatResponse('integer', parseInt(input))
     } else if (
diff --git a/src/js/helpers/stringifyVariable.js b/src/js/helpers/stringifyVariable.js
@@ -1,7 +1,7 @@
 import { toType } from './util'
 
-export default value => {
-  const type = toType(value)
+export default (value, bigNumber) => {
+  const type = toType(value, bigNumber)
   let string_value
   switch (type) {
     case 'undefined': {
@@ -14,6 +14,9 @@ export default value => {
     case 'string':
       string_value = value
       break
+    case 'bigNumber':
+      string_value = value.toString()
+      break
     case 'date':
       string_value = value.toString()
       break
diff --git a/src/js/helpers/util.js b/src/js/helpers/util.js
@@ -1,5 +1,8 @@
 // returns a string "type" of input object
-export function toType (obj) {
+export function toType (obj, bigNumber) {
+  if (bigNumber && obj?.constructor?.name === bigNumber?.name) {
+    return 'bigNumber'
+  }
   let type = getType(obj)
   // some extra disambiguation for numbers
   if (type === 'number') {
diff --git a/src/js/index.js b/src/js/index.js
@@ -59,7 +59,8 @@ class ReactJsonView extends React.PureComponent {
     defaultValue: null,
     displayArrayKey: true,
     selectOnFocus: false,
-    keyModifier: e => e.metaKey || e.ctrlKey
+    keyModifier: e => e.metaKey || e.ctrlKey,
+    bigNumber: null
   }
 
   // will trigger whenever setState() is called, or parent passes in new props.
diff --git a/src/js/themes/getStyle.js b/src/js/themes/getStyle.js
@@ -25,7 +25,8 @@ const colorMap = theme => ({
     null: theme.base0A,
     undefined: theme.base05,
     regexp: theme.base0A,
-    background: theme.base02
+    background: theme.base02,
+    bigNumber: theme.base09
   },
   editVariable: {
     editIcon: theme.base0E,
@@ -182,6 +183,10 @@ const getDefaultThemeStyling = theme => {
       display: 'inline-block',
       color: colors.dataTypes.integer
     },
+    bigNumber: {
+      display: 'inline-block',
+      color: colors.dataTypes.bigNumber
+    },
     string: {
       display: 'inline-block',
       color: colors.dataTypes.string

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,8 @@ class ReactJsonView extends React.PureComponent {`
`59`	`59`	`defaultValue: null,`
`60`	`60`	`displayArrayKey: true,`
`61`	`61`	`selectOnFocus: false,`
`62`		`- keyModifier: e => e.metaKey \|\| e.ctrlKey`
	`62`	`+ keyModifier: e => e.metaKey \|\| e.ctrlKey,`
	`63`	`+ bigNumber: null`
`63`	`64`	`}`
`64`	`65`
`65`	`66`	`// will trigger whenever setState() is called, or parent passes in new props.`