feat: add editorRef

Author: jianxiaoBai

README.md

@@ -20,15 +20,22 @@ npm i react-json-editor-ui -S
 | onChange   | Callback the data                                 | true     | null    |
 | optionsMap | When a match for auto-complete on the input value | false    | null    |
 
+### Ref Methods
+
+| method     | description                                       | params                      |
+| ---------- | ------------------------------------------------- | --------------------------- |
+| updateData | Update the editor data programmatically           | data: Record<string, any>   |
+
 ### Example:
 
 ```jsx
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import JsonEditor from 'react-json-editor-ui'
+import JsonEditor, { JsonEditorRef } from 'react-json-editor-ui'
 import 'react-json-editor-ui/dist/react-json-editor-ui.cjs.development.css'
 
 const App = () => {
+  const editorRef = React.useRef<JsonEditorRef>(null)
   const [editObject, setEditObject] = React.useState<any>({
     name: 'may',
     age: null,
@@ -45,9 +52,21 @@ const App = () => {
       description: 'another',
     },
   })
+  
+  // Example of updating data programmatically using ref
+  const updateEditorData = () => {
+    if (editorRef.current) {
+      editorRef.current.updateData({
+        name: 'updated name',
+        age: 25,
+        // ... other properties
+      })
+    }
+  }
 
   return (
     <JsonEditor
+      ref={editorRef}
       data={editObject}
       onChange={data => {
         setEditObject(data)

example/index.tsx

@@ -5,26 +5,28 @@ import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import ReactJsonSyntaxHighlighter from 'react-json-syntax-highlighter'
 
-import JsonEditor from '../'
+import JsonEditor, { JsonEditorRef } from '../'
 
 const App = () => {
+  const editorRef = React.useRef<JsonEditorRef>(null)
+  // editorRef.current.updateData(newData)
   const [editObject, setEditObject] = React.useState<any>({
-    name: 'may',
-    age: null,
-    address: [
-      'Panyu Shiqiao on Canton',
-      'Tianhe',
-      {
-        city: 'forida meta 11',
-      },
-    ],
-    others: {
-      id: 1246,
-      joinTime: '2017-08-20. 10:20',
-      description: 'another',
-    },
+        name: 'may',
+        age: null,
+        address: [
+          'Panyu Shiqiao on Canton',
+          'Tianhe',
+          {
+            city: 'forida meta 11',
+          },
+        ],
+        others: {
+          id: 1246,
+          joinTime: '2017-08-20. 10:20',
+          description: 'another',
+        },
   })
-
+  
   return (
     <div>
       <h1 style={{ textAlign: 'center', padding: '50px 0' }}>
@@ -42,6 +44,7 @@ const App = () => {
           }}
         >
           <JsonEditor
+            ref={editorRef}
             data={editObject}
             onChange={data => {
               setEditObject(data)

src/components/AddItem.tsx

@@ -83,7 +83,9 @@ const AddItem = (props: {
           <InputNumber
             size="small"
             style={{ width: '100px' }}
-            onBlur={event => changeInputValue(uniqueKey, +event.target.value)}
+             onChange={value => {
+              changeInputValue(uniqueKey, +value)
+            }}
           />
         )
       case DataType.BOOLEAN:

src/components/JsonView.tsx

@@ -141,8 +141,8 @@ function JsonView(props: JsonViewProps) {
             style={{ width: '100px' }}
             placeholder={fieldValue}
             value={fieldValue}
-            onBlur={event => {
-              onChangeValue(+event.target.value, fieldKey, sourceData)
+            onChange={value => {
+              onChangeValue(+value, fieldKey, sourceData)
             }}
           />
         )

src/index.tsx

@@ -1,6 +1,6 @@
 import './styles/index.less'
 import './ui/styles.css'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
 import JsonView from './components/JsonView'
 
 export type JsonEditorProps = {
@@ -16,12 +16,23 @@ export type JsonEditorProps = {
   onChange: (data: any) => void
 }
 
-function JsonEditor(props: JsonEditorProps) {
+export type JsonEditorRef = {
+  updateData: (data: Record<string, any>) => void
+}
+
+const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>((props, ref) => {
   const [editObject, setEditObject] = useState<any>(JSON.parse(JSON.stringify(props.data)))
+  
   useEffect(() => {
-    props.onChange(editObject)
+      props.onChange(editObject)
   }, [editObject])
 
+  useImperativeHandle(ref, () => ({
+    updateData: (data: Record<string, any>) => {
+      setEditObject(JSON.parse(JSON.stringify(data)))
+    }
+  }))
+
   return (
     <div className="jsonEditorContainer" style={{ width: props.width ?? 500 }}>
       <JsonView
@@ -33,6 +44,6 @@ function JsonEditor(props: JsonEditorProps) {
       />
     </div>
   )
-}
+})
 
 export default JsonEditor

src/ui/index.tsx

@@ -37,26 +37,34 @@ export const InputNumber = ({
   style = {},
   placeholder,
   value,
-  onBlur,
+  onChange,
   ...props
 }: {
   size?: 'small' | 'default' | 'large'
   style?: React.CSSProperties
   placeholder?: any
   value?: number
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
+  onChange?: (value: number) => void
   [key: string]: any
 }) => {
   const sizeClass = size === 'small' ? 'ui-input-sm' : size === 'large' ? 'ui-input-lg' : 'ui-input-default'
 
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      // 将输入值转换为数字类型
+      const numValue = e.target.value === '' ? undefined : Number(e.target.value);
+      onChange(numValue as number);
+    }
+  };
+  
   return (
     <input
       type="number"
       className={`ui-input ui-input-number ${sizeClass}`}
       style={style}
       placeholder={String(placeholder)}
       value={value}
-      onBlur={onBlur}
+      onChange={handleChange}
       {...props}
     />
   )