json edit react
v.1.19.1
JSON/객체 데이터를 편집하거나보기위한 반응 구성 요소
중요한
변화를 깨기 :
theme 입력을 변경합니다. 내장 테마는 이제 테마를 문자열로 명명하지 않고 별도로 가져 와서 전달해야합니다. 이것은 나무를 흔들기에 더 좋으므로 사용하지 않은 테마는 빌드와 함께 번들지지 않습니다. 테마 및 스타일을 참조하십시오setData 소품을 제공하고 외부 데이터를 업데이트하는 데 onUpdate 사용하지 않는 것이 좋습니다. 상태 관리를 참조하십시오. npm i json-edit-react
또는
yarn add json-edit-react
import { JsonEditor } from 'json-edit-react'
// In your React component:
return
< JsonEditor
data = { jsonData }
setData = { setJsonData } // optional
{ ... otherProps } /> (최종 사용자의 경우)
꽤 자기 설명이지만 (편집 할 "편집"아이콘을 클릭하십시오.
Cmd/Ctrl/Shift-Enter 사용하여 새 줄을 추가하십시오 (입력 값을 Enter 하십시오).Enter 하고 Cmd/Ctrl/Shift-Enter 제출하십시오.EscapeCmd/Ctrl 누른 상태로 유지하면 값이 아닌 선택한 노드로 경로가 복사됩니다.jsonParse PROP를 참조하십시오. 필요한 유일한 값은 data 입니다 (데이터를 업데이트하기 위해 setData 메소드를 제공해야하지만).
| 소품 | 유형 | 기본 | 설명 |
|---|---|---|---|
data | object|array | 표시 / 편집 할 데이터 | |
setData | object|array => void | data 객체를 업데이트하는 방법. 추가 메모는 아래 상태 관리를 참조하십시오. | |
rootName | string | "data" | 편집기에 데이터 객체의 루트로 표시 할 이름입니다. |
onUpdate | UpdateFunction | 편집기에서 값이 업데이트 (편집, 삭제 또는 추가) 될 때마다 실행할 함수. 업데이트 기능을 참조하십시오. | |
onEdit | UpdateFunction | 값이 편집 될 때마다 실행할 함수. | |
onDelete | UpdateFunction | 값이 삭제 될 때마다 실행할 함수. | |
onAdd | UpdateFunction | 새 속성이 추가 될 때마다 실행할 함수. | |
onChange | OnChangeFunction | 입력 할 때 사용자 입력을 수정/제한하는 함수 - OnChange 함수를 참조하십시오. | |
onError | OnErrorFunction | 구성 요소가 오류를보고 할 때마다 실행할 함수 - OnErrorFunction을 참조하십시오. | |
showErrorMessages | boolean | true | 구성 요소에 자체 오류 메시지가 표시되어야하는지 여부 ( onError 기능을 제공 한 경우에만 비활성화하고 싶을 것입니다). |
enableClipboard | boolean|CopyFunction | true | UI에서 "클립 보드로 복사"버튼을 활성화할지 여부. 함수가 제공되면 true 가 가정되며 항목이 복사 될 때 마다이 기능이 실행됩니다. |
indent | number | 3 | 표시된 데이터에서 각 레벨의 중첩에 대한 압입 양을 지정하십시오. |
collapse | boolean|number|FilterFunction | false | JSON 트리의 노드가로드시 UI에 "열린"노드를 정의합니다. boolean 이라면 전부 또는 전혀 없을 것입니다. number 노드가 닫히는 후 중첩 깊이를 지정합니다. 보다 미세한 제어를 보려면 기능이 제공 될 수 있습니다. 필터 기능을 참조하십시오. |
collapseAnimationTime | number | 300 | 컬렉션 노드가 무너질 때 전환 애니메이션의 시간 (밀리 초). |
restrictEdit | boolean|FilterFunction | false | true 이라면 편집이 허용되지 않습니다. 보다 특이성을 위해 함수가 제공 될 수 있습니다 - 필터 기능 참조 |
restrictDelete | boolean|FilterFunction | false | restrictEdit 과 마찬가지로 삭제 |
restrictAdd | boolean|FilterFunction | false | restrictEdit 과 마찬가지로 새로운 속성을 추가하기위한 것입니다 |
restrictTypeSelection | boolean|DataType[]|TypeFilterFunction | true | 데이터 유형을 제한하려면 사용자가 선택할 수 있습니다. 데이터 유형 목록 (예 : [ 'string', 'number', 'boolean', 'array', 'object', 'null' ] ) 또는 부울 목록이 될 수 있습니다. 함수가 제공 될 수 있습니다. 위의 FilterFunction 과 동일한 입력을 가져야하지만 출력은 boolean | DataType[] . |
restrictDrag | boolean|FilterFunction | true | 드래그 앤 드롭 기능을 활성화하려면 false 로 설정하십시오. Drag-N-Drop을 참조하십시오 |
searchText | string | undefined | searchFilter 에서 아래에 정의 된 방법을 사용하여 값과 일치하여 데이터 가시성이 필터링됩니다. |
searchFilter | "key"|"value"|"all"|SearchFilterFunction | undefined | searchText 일치하는 방법을 정의하여 보이는 항목을 필터링하십시오. 검색/필터링을 참조하십시오 |
searchDebounceTime | number | 350 | searchText 변경 될 때 분해 시간 |
keySort | boolean|CompareFunction | false | true 인 경우 객체 키가 주문됩니다 (기본 js .sort() 사용). 분류 동작을 정의하기 위해 비교 함수를 제공 할 수도 있습니다. |
showArrayIndices | boolean | true | 배열 요소에 대한 인덱스 (속성 키)를 표시할지 여부. |
showStringQuotes | boolean | true | "인용문"에 문자열 값을 표시할지 여부. |
showCollectionCount | boolean|"when-closed" | true | 각 컬렉션의 항목 수를 표시할지 여부 (개체 또는 배열). |
defaultValue | any|DefaultValueFilterFunction | null | 새 속성이 추가되면이 값으로 초기화됩니다. 함수는 FilterFunction 기능과 거의 동일한 입력을 제공 할 수 있지만 값을 출력해야합니다. 이를 통해 데이터 상태에 따라 다른 기본값을 사용할 수 있습니다 (예 : 최상위의 기본값은 객체이지만 다른 곳은 문자열입니다.) |
stringTruncate | number | 250 | 이 많은 문자보다 더 긴 문자열 값은 ... 상태로 표시됩니다. 편집 할 때는 전체 문자열이 항상 표시됩니다. |
translations | LocalisedStrings 대상 | { } | UI 문자열 (예 : 오류 메시지)은 로컬로 된 문자열 값을 포함하는 객체를 전달하여 번역 할 수 있습니다 (단지 소수만). 현지화를 참조하십시오 |
theme | ThemeInput | default | 내장 테마 중 하나 (별도로 가져온) 또는 일부 또는 모든 테마 속성을 지정하는 객체. 테마를 참조하십시오. |
className | string | 구성 요소에 적용 할 CSS 클래스의 이름. 대부분의 경우 theme 속성을 지정하는 것이 더 간단합니다. | |
id | string | 기본 구성 요소 컨테이너의 HTML id 속성의 이름. | |
icons | {[iconName]: JSX.Element, ... } | { } | 여기에 지정하여 내장 아이콘을 교체하십시오. 테마를 참조하십시오. |
minWidth | number|string (CSS 값) | 250 | 편집기 컨테이너의 최소 너비. |
maxWidth | number|string (CSS 값) | 600 | 편집기 컨테이너의 최대 너비. |
rootFontSize | number|string (CSS 값) | 16px | "기본"글꼴 크기는 다른 모든 Sizings가 파생되는 ( em S). 이를 변경하면 전체 구성 요소가 확장됩니다. 컨테이너. |
customNodeDefinitions | CustomNodeDefinition[] | 조건 함수에 따라 데이터 트리의 특정 노드를 무시하기 위해 맞춤형 구성 요소를 제공 할 수 있습니다. 자세한 내용은 사용자 정의 노드를 참조하십시오. (URL 문자열을 활성 링크로 바꾸는 간단한 사용자 정의 구성 요소는 기본 패키지에 제공됩니다. 여기 참조). | |
customText | CustomTextDefinitions | 구성 요소 텍스트 문자열을 로컬로 만들뿐만 아니라 데이터에 따라 동적으로 변경할 수도 있습니다. 자세한 내용은 사용자 정의 텍스트를 참조하십시오. | |
customButtons | CustomButtonDefinition[] | [] | 데이터에서 사용자 정의 작업을 수행하려면 편집 버튼 패널에 자신의 버튼을 추가 할 수 있습니다. 사용자 정의 버튼을 참조하십시오 |
jsonParse | (input: string) => JsonData | JSON.parse | JSON 블록을 직접 편집 할 때는 "단일 따옴표 ', 트레일 링하는 쉼표 또는 인용되지 않은 필드 이름과 같은"느슨한 "입력을 허용 할 수 있습니다. 이 경우 타사 JSON 구문 분석 방법을 제공 할 수 있습니다. 데모에 사용되는 JSON5를 추천합니다. |
jsonStringify | (data: JsonData) => string | (data) => JSON.stringify(data, null, 2) | 마찬가지로 JSON 편집을 시작할 때 JSON 문자열의 기본 프리젠 테이션을 무시할 수 있습니다. 기본 JSON.stringify() 에 다른 형식 매개 변수를 제공하거나 위에서 언급 한 JSON5와 같은 타사 옵션을 제공 할 수 있습니다. |
errorMessageTimeout | number | 2500 | UI에 오류 메시지를 표시하는 시간 (밀리 초). |
keyboardControls | KeyboardControls | 위에서 설명한대로 | 키보드 컨트롤의 일부 또는 전부를 무시하십시오. 자세한 내용은 키보드 사용자 정의를 참조하십시오. |
insertAtTop | boolean| "object | "array" | false | true 이라면 맨 아래가 아닌 상단 에 새 값을 삽입하십시오. 각각 "object" 또는 "array" 으로 설정하여 배열이나 객체에 대한 동작을 설정할 수 있습니다. |
이 구성 요소 외부의 data 상태를 직접 관리하는 것이 좋습니다. data 업데이트하기 위해 내부적으로 호출되는 setData 메소드를 전달하십시오. 그러나 이것은 강제적이지 않습니다. setData 메소드를 제공하지 않으면 데이터가 내부적으로 관리되며 데이터를 사용하지 않으면 괜찮습니다. 대안은 업데이트 기능을 사용하여 data 외부로 업데이트하는 것이지만, 이는 내부 상태 (표시되는 내용) 및 불필요한 리 렌더와 동기화 된 문제를 해결할 수있는 특별한 상황을 제외하고는 권장되지 않습니다. 업데이트 기능은 setData 로 설정하기 전에 부작용을 구현하거나 오류를 확인하거나 데이터를 돌리는 데만 사용되어야합니다.
데이터 업데이트 (편집, 삭제 또는 추가)가 제공 될 때마다 실행되는 콜백을 제공 할 수 있습니다. 이것을 사용하여 외부 상태를 업데이트하거나, API 호출을하고, 저장하기 전에 데이터를 수정하거나, JSON 스키마에 대한 데이터 구조를 검증 할 수 있습니다. 모든 업데이트에 대해 동일한 기능을 원한다면 onUpdate 소품 만 충분합니다. 그러나 편집, 삭제 및 추가를 위해 다른 것이 필요한 경우 onEdit , onDelete 및 onAdd 소품을 통해 별도의 업데이트 기능을 제공 할 수 있습니다.
함수는 다음 객체를 매개 변수로 수신합니다.
{
newData , // data state after update
currentData , // data state before update
newValue , // the new value of the property being updated
currentValue , // the current value of the property being updated
name , // name of the property being updated
path // full path to the property being updated, as an array of property keys
// (e.g. [ "user", "friends", 1, "name" ] ) (equivalent to "user.friends[1].name")
}함수는 아무것도 반환 할 수 없거나 (이 경우 데이터가 정상적으로 업데이트 됨) 성공/실패, 오류 값 또는 수정 된 데이터를 나타내는 값을 반환 할 수 없습니다. 반환 값은 다음 중 하나 일 수 있으며 그에 따라 처리됩니다.
true / void / undefined : 데이터는 정상적으로 업데이트를 계속합니다.false : 업데이트가 오류로 간주되므로 데이터가 업데이트되지 않으며 (이전 값으로 이동) UI에 일반 오류 메시지가 표시됩니다.string : 오류로 간주되므로 데이터 업데이트는 없지만 UI 오류 메시지는 제공된 문자열입니다.[ "value", <value> ] : 구성 요소에 입력 데이터 대신 retureded <value> 사용하도록 지시합니다. 이를 사용하여 사용자 입력을 자동으로 수정하여 배열을 정렬하거나 타임 스탬프 필드를 객체에 삽입합니다.[ "error", <value> ] : string 과 동일하지만 더 긴 튜플 형식입니다. 업데이트 함수와 유사하게 onChange 함수는 사용자 입력 변경으로 실행됩니다. 이를 사용하여 사용자 입력을 제한하거나 제한 할 수 있습니다. 사용자 입력 필드를 업데이트하려면 함수가 값을 반환 해야하므로 변경 사항이 없으면 수정되지 않은 반환을 반환하십시오.
입력 객체는 업데이트 기능 입력과 유사하지만 newData 필드가 없음 (데이터가 업데이트되기 전에이 작업이 발생하기 때문에).
// in <JsonEditor /> props
onChange = ( { newValue , name } ) => {
if ( name === "age" && newValue < 0 ) return 0 ;
if ( name === "age" && newValue > 100 ) return 100 ;
return newValue
} onChange = ( { newValue , name } ) => {
if ( name === 'name' && typeof newValue === "string" )
return newValue . replace ( / [^a-zA-Zs]|n|r / gm , '' ) ;
return newValue ;
} 일반적으로 구성 요소는 오류 조건이 감지 될 때마다 간단한 오류 메시지를 표시합니다 (예 : 유효하지 않은 JSON 입력, 중복 키 또는 onUpdate 함수에 의해 리턴되는 사용자 정의 오류)). 그러나 자신의 오류 UI를 구현하거나 추가 부작용을 실행하기 위해 onError 콜백을 제공 할 수 있습니다. (전자의 경우 showErrorMessages 소품도 비활성화하고 싶을 것입니다.) 콜백에 대한 입력은 다른 콜백과 유사합니다.
{
currentData , // data state before update
currentValue , // the current value of the property being updated
errorValue , // the erroneous value that failed to update the property
name , // name of the property being updated
path , // full path to the property being updated, as an array of property keys
// (e.g. [ "user", "friends", 1, "name" ] ) (equivalent to "user.friends[1].name"),
error : {
code , // one of 'UPDATE_ERROR' | 'DELETE_ERROR' | 'ADD_ERROR' | 'INVALID_JSON' | 'KEY_EXISTS'
message // the (localised) error message that would be displayed
}
}(사용자 정의 오류의 예는 "사용자 정의 노드"데이터 세트와 함께 데모에서 볼 수 있습니다. 유효하지 않은 JSON 입력을 입력하면 "토스트"알림이 일반 구성 요소 오류 메시지 대신 표시됩니다.)
항목이 클립 보드에 복사 될 때마다 비슷한 콜백이 실행됩니다 ( enableClipboard Prop에 전달 된 경우).하지만 다른 입력 매개 변수가 있습니다.
key // name of the property being copied
path // path to the property
value // the value copied to the clipboard
type // Either "path" or "value" depending on whether "Cmd/Ctrl" was pressed
stringValue // A nicely stringified version of `value`
// (i.e. what the clipboard actually receives)"복사"를 클릭 할 때 사용자 피드백이 거의 없으므로이 콜백에 어떤 종류의 알림을 제시하는 것이 좋습니다.
각 값으로 나타나는 "복사", "편집"및 "삭제"버튼 외에도 데이터에서 사용자 정의 작업을 허용 해야하는 경우 자신의 버튼을 추가 할 수 있습니다. 다음 정의 구조에서 customButtons Prop에서 버튼 정의 배열을 제공합니다.
{
Element : React . FC ,
onClick : ( nodeData : NodeData , e : React . MouseEvent ) => void
} 여기서 NodeData 이전 "업데이트 기능"에서받은 동일한 데이터 구조입니다.
필터 기능을 전달하여 편집, 삭제 또는 추가 또는 데이터 유형을 변경하거나 데이터 유형을 변경할 수있는 데이터 구조의 노드를 제어 할 수 있습니다. 이들은 데이터의 각 속성에서 호출되며 속성은 함수가 true 또는 false 반환하는지 여부에 따라 시행됩니다 ( true 수단을 편집 할 수 없습니다 ).
함수는 다음 객체를 수신합니다.
{
key , // name of the property
path , // path to the property (as an array of property keys)
level , // depth of the property (with 0 being the root)
index , // index of the node within its collection (based on display order)
value , // value of the property
size , // if a collection (object, array), the number of items (null for non-collections)
parentData , // parent object containing the current node
fullData // the full (overall) data object
collapsed // whether or not the current node is in a
// "collapsed" state (only for Collection nodes)
} collapse 소품에 필터 기능도 사용할 수 있으므로 예를 들어 딥 네스트 컬렉션이 열린 상태에서 데이터가 나타날 수 있으며 예를 들어 다른 모든 내용을 무너 뜨릴 수 있습니다.
데이터 유형을 제한하기 위해 (유형) 필터 기능이 약간 더 정교합니다. 입력은 동일하지만 출력은 boolean (주어진 노드에 사용 가능한 유형을 모두 또는 없음 으로 제한) 또는 제한 될 일련의 데이터 유형 일 수 있습니다. 사용 가능한 값은 다음과 같습니다.
"string""number""boolean""null""object""array" 객체 키 이름을 편집 할 수있는 특정 제한 함수는 없지만 키 이름을 변경하는 것이 속성을 삭제하고 새 이름을 추가하는 것과 동일하기 때문에 restrictEdit 및 restrictDelete (및 컬렉션에 대한 restrictAdd ) 모두 에 대해 true 반환해야합니다.
필터 기능을 defaultValue Prop에 전달하여 동적 기본값을 설정할 수도 있습니다. 입력은 위와 동일하지만 새 key 값을 두 번째 매개 변수로 취하므로 새 값이 새 키에 따라 달라질 수 있습니다.
이러한 모든 제한 필터를 함께 사용하면 합리적으로 정교한 데이터 스키마를 시행 할 수 있습니다.
// in <JsonEditor /> props
restrictEdit = { ( { level } ) => level === 0 }id 필드를 편집하지 마십시오. restrictEdit = { ( { key } ) => key === "id" }
// You'd probably want to include this in `restrictDelete` as well restrictDelete = { ( { size } ) => size !== null } restrictAdd = { ( { key } ) => key !== "address" && key !== "users" }
// "Adding" is irrelevant for non-collection nodesstring 값은 문자열이나 물체로만 변경할 수 있습니다 (중첩의 경우)null 아무데도 허용되지 않습니다boolean 값은 부울 남아 있어야합니다 restrictTypeSelection = { ( { path , value } ) => {
if ( path . includes ( 'user' ) ) return [ 'string' , 'number' , 'boolean' ]
if ( typeof value === 'boolean' ) return false
if ( typeof value === 'string' ) return [ 'string' , 'object' ]
return [ 'string' , 'number' , 'boolean' , 'array' , 'object' ] // no "null"
} }위에서 설명한대로 다양한 편집 도구에 대한 액세스를 동적으로 제어 할뿐만 아니라 데이터를 제 3 자 스키마 검증 라이브러리 (예 : AJV)로 전달하는 업데이트 기능을 작성하여 전체 JSON 스키마 검증을 수행 할 수 있습니다. 그러면 유효하지 않은 입력을 거부하고 UI에 오류가 표시됩니다 (또는 사용자 정의 OnError 함수를 통해). "JSON 스키마 검증"데이터 세트 (및 "사용자 정의 노드"데이터 세트)를 사용하여 데모에서 이에 대한 예를 볼 수 있습니다.
onUpdate 유효성 검사 함수 (AJV 사용)는 다음과 같은 것일 수 있습니다.
import { JsonEditor } from 'json-edit-react'
import Ajv from 'ajv'
import schema from './my-json-schema.json'
const ajv = new Ajv ( )
const validate = ajv . compile ( schema )
/// Etc....
// In the React component:
return
< JsonEditor
data = { jsonData }
onUpdate = { ( { newData } ) => {
const valid = validate ( newData )
if ( ! valid ) {
console . log ( 'Errors' , validate . errors )
const errorMessage = validate . errors
?. map ( ( error ) => ` ${ error . instancePath } ${ error . instancePath ? ': ' : '' } ${ error . message } ` )
. join ( 'n' )
// Send detailed error message to an external UI element, such as a "Toast" notification
displayError ( {
title : 'Not compliant with JSON Schema' ,
description : errorMessage ,
status : 'error' ,
} )
// This string returned to and displayed in json-edit-react UI
return 'JSON Schema error'
}
} }
{ ... otherProps } />메모
이것은 새로운 기능이며 "실험적"으로 간주되어야합니다. 개선에 도움이되는 피드백이나 제안을 제공하십시오.
restrictDrag 조정 속성은 어떤 항목 (있는 경우)을 새 위치로 끌 수 있습니다. 기본적으로 이것은 꺼져 있으므로이 기능을 활성화하려면 restrictDrag = false 설정해야합니다. 위의 편집 제한과 마찬가지로이 속성은 세분화 된 제어를 위해 필터 기능을 수행 할 수도 있습니다. 그러나 몇 가지 추가 고려 사항이 있습니다.
jsonb (바이러스 JSON) 유형을 사용하여 Postgres 데이터베이스에 저장하면 키 순서가 의미가 없으므로 다음에 객체가로드되면 키가 알파벳순으로 나열됩니다.restrictDrag 필터는 대상이 아닌 소스 요소 (예 : 노드가 드래그되는)에 적용됩니다.restrictDelete 소품을 통해). 표시된 데이터는 사용자의 검색 입력에 따라 필터링 될 수 있습니다. 사용자 입력은 독립적으로 캡처되어야합니다 (여기서는 UI searchText 제공하지 않음). 이 입력은 내부적으로 고려됩니다 ( searchDebounceTime Prop으로 시간을 설정할 수 있음). searchText 테스트하는 값은 searchFilter Props로 지정됩니다. 기본적으로 ( searchFilter 정의되지 않음) 데이터 값 과 일치합니다 (사례에 민감하지 않은 부분 일치 (예 : 입력 "ILB")는 "빌보"값과 일치합니다).
searchFilter "key" (일치 속성 이름), "value" (위에서 설명한 기본값) 또는 "all" (속성 및 값 일치)로 설정하여 일치해야 할 사항을 지정할 수 있습니다. 이는 대부분의 사용 사례에 충분해야하지만 자신의 SearchFilterFunction 지정할 수 있습니다. 검색 기능은 위의 필터 팅과 동일한 서명이지만 searchText 에 대해 하나의 추가 인수를 취합니다.
( { key , path , level , value , ... etc } : FilterFunctionInput , searchText : string ) => boolean 검색 기능을보다 쉽게 만들 수있는 패키지와 함께 내보낸 두 가지 헬퍼 함수 ( matchNode() 및 matchNodeKey() )가 있습니다 (위에서 설명한 "key" 및 "value" 일치에 내부적으로 사용되는 기능입니다). 당신은 그들이 여기서 무엇을하는지 볼 수 있습니다.
"클라이언트 목록"데이터 세트와 함께 데모에서 예제의 사용자 정의 검색 기능을 볼 수 있습니다. 검색 기능은 이름과 사용자 이름별로 일치하고 해당 일치 중 하나가 일치 할 때 전체 "클라이언트"객체를 볼 수있게하므로 특정 사람을 찾고 특정 세부 정보를 편집하는 데 사용될 수 있습니다.
( { path , fullData } , searchText ) => {
// Matches *any* node that shares a path (i.e. a descendent) with a matching name/username
if ( path ?. length >= 2 ) {
const index = path ?. [ 0 ]
return (
matchNode ( { value : fullData [ index ] . name } , searchText ) ||
matchNode ( { value : fullData [ index ] . username } , searchText )
)
} else return false
} 데모 앱에서 볼 수 있듯이 작은 내장 테마가 있습니다. 이 중 하나를 사용하려면 패키지에서 가져 와서 테마 소품으로 전달하십시오.
import { JsonEditor , githubDarkTheme } from 'json-edit-react'
// ...other imports
const MyApp = ( ) => {
const [ data , setData ] = useState ( { one : 1 , two : 2 } )
return < JsonEditor
data = { data }
setData = { setData }
theme = { githubDarkTheme }
// other props...
/>
}다음 테마는 패키지에서 사용할 수 있습니다 (현실적으로는 기능을 보여주기 위해 더 많이 존재합니다. 더 나은 내장 테마에 열려 있으므로 제안과 관련하여 문제를 자유롭게 만들 수 있습니다).
githubDarkThemegithubLightThememonoDarkThememonoLightThemecandyWrapperThemepsychedelicTheme그러나 자신의 테마 개체 또는 그 일부를 전달할 수 있습니다. 테마 구조는 다음과 같습니다 (이것은 "기본"테마 정의입니다).
{
displayName : 'Default' ,
fragments : { edit : 'rgb(42, 161, 152)' } ,
styles : {
container : {
backgroundColor : '#f6f6f6' ,
fontFamily : 'monospace' ,
} ,
collection : { } ,
collectionInner : { } ,
collectionElement : { } ,
dropZone : { } ,
property : '#292929' ,
bracket : { color : 'rgb(0, 43, 54)' , fontWeight : 'bold' } ,
itemCount : { color : 'rgba(0, 0, 0, 0.3)' , fontStyle : 'italic' } ,
string : 'rgb(203, 75, 22)' ,
number : 'rgb(38, 139, 210)' ,
boolean : 'green' ,
null : { color : 'rgb(220, 50, 47)' , fontVariant : 'small-caps' , fontWeight : 'bold' } ,
input : [ '#292929' , { fontSize : '90%' } ] ,
inputHighlight : '#b3d8ff' ,
error : { fontSize : '0.8em' , color : 'red' , fontWeight : 'bold' } ,
iconCollection : 'rgb(0, 43, 54)' ,
iconEdit : 'edit' ,
iconDelete : 'rgb(203, 75, 22)' ,
iconAdd : 'edit' ,
iconCopy : 'rgb(38, 139, 210)' ,
iconOk : 'green' ,
iconCancel : 'rgb(203, 75, 22)' ,
} ,
} styles 속성은 초점을 맞추는 주요 속성입니다. 각 키 ( property , bracket , itemCount )는 UI의 일부를 나타냅니다. 각 키의 값은 다음 중 하나 입니다.
string ,이 경우 색상으로 해석됩니다 (또는 container 및 inputHighlight 의 경우 배경색)null )를 반환하는 "스타일 함수". 이를 통해 내용이나 구조에 따라 다양한 요소의 스타일을 동적으로 변경할 수 있습니다.null 반환 할 때마다 "폴백"스타일을 제공 할 수 있습니다. (배열에서 나중에 항목은 우선 순위가 높습니다)간단한 예를 들어, "githubdark"테마를 사용하려면 몇 가지 작은 것을 변경하려면 다음과 같은 것을 지정할 수 있습니다.
// in <JsonEditor /> props
theme = { [
githubDarkTheme ,
{
iconEdit : 'grey' ,
boolean : { color : 'red' , fontStyle : 'italic' , fontWeight : 'bold' , fontSize : '80%' } ,
} ,
] } "편집"아이콘과 부울 값을 이것으로 변경합니다. 
이것으로 : 
또는 처음부터 자신만의 테마를 만들고 전체 테마 객체를 덮어 쓸 수 있습니다.
따라서 요약하기 위해 theme 소품은 다음 중 하나 를 취할 수 있습니다.
"candyWrapperTheme"fragments , styles , displayName 등 또는 styles 부분 (루트 레벨)으로 위와 같이 구조화 할 수 있습니다.[ "<themeName>, {...overrides } ]"이 테마 편집"을 선택하여 데모 앱에서 테마의 라이브 편집으로 라운드를 재생할 수 있습니다. "데모 데이터"선택기에서 (JSON에서 기능을 만들 수는 없지만).
구성 요소를 스타일링하는 또 다른 방법은 CSS 클래스를 직접 타겟팅하는 것입니다. 구성 요소의 모든 요소에는 고유 한 클래스 이름이 있으므로 브라우저 검사관에 위치하여 그에 따라 재정의 할 수 있어야합니다. 모든 클래스 이름은 jer-collection-header-row , jer-value-string , 예를 들어 접두사 jer- 로 시작합니다.
위의 fragments 특성은 반복 된 스타일의 "조각"을 한 번 정의하고 별명을 사용하도록 지칭하는 편의성입니다. 예를 들어, 모든 아이콘이 파란색이고 약간 크고 간격이되기를 원한다면 다음과 같은 조각을 정의 할 수 있습니다.
fragments: { iconAdjust : { color : "blue" , fontSize : "110%" , marginRight : "0.6em" } }그런 다음 테마 객체에서 사용하십시오.
{
... ,
iconEdit : "iconAdjust" ,
iconDelete : "iconAdjust" ,
iconAdd : "iconAdjust" ,
iconCopy : "iconAdjust" ,
}그런 다음 나중에 조정하려면 한 곳에서만 업데이트하면됩니다!
단편은 또한 추가 특성 및 다른 조각과 같은 다른 조각과 혼합 될 수 있습니다.
iconEdit: [ "iconAdjust" , "anotherFragment" , { marginLeft : "1em" } ] 내부적으로 모든 크기 및 간격 rootFontSize em S px 수행됩니다. 이렇게하면 스케일링이 훨씬 쉬워집니다. rootFontSize 소품을 변경하거나 클래스를 타겟팅하거나 테마를 조정하여 기본 컨테이너에서 fontSize 설정하고 전체 구성 요소 스케일을 시청하십시오.
기본 아이콘을 대체 할 수 있지만 React/HTML 요소로 제공해야합니다. icons 소품 내에서 그 중 일부 또는 전부를 정의하고 다음과 같이 키워집니다.
icons = { {
add : < YourIcon />
edit : < YourIcon / >
delete : < YourIcon />
copy : < YourIcon / >
ok : < YourIcon / >
cancel : < YourIcon / >
chevron : < YourIcon / >
} }아이콘 구성 요소에는 테마 스타일이 사용자 정의 요소에 추가 되지 않으므로 자체 스타일이 정의되어 있어야합니다.
기본 문자열을 교체하기 위해 translations 객체를 전달하여 구현을 현지화하십시오. 키와 기본값 (영어) 값은 다음과 같습니다.
{
ITEM_SINGLE : '{{count}} item' ,
ITEMS_MULTIPLE : '{{count}} items' ,
KEY_NEW : 'Enter new key' ,
ERROR_KEY_EXISTS : 'Key already exists' ,
ERROR_INVALID_JSON : 'Invalid JSON' ,
ERROR_UPDATE : 'Update unsuccessful' ,
ERROR_DELETE : 'Delete unsuccessful' ,
ERROR_ADD : 'Adding node unsuccessful' ,
DEFAULT_STRING : 'New data!' ,
DEFAULT_NEW_KEY : 'key' ,
} 데이터 트리의 특정 노드를 고유 한 사용자 정의 구성 요소로 교체 할 수 있습니다. 예를 들어 이미지 디스플레이 또는 사용자 정의 날짜 편집기 또는 시각적 블링을 추가하는 것일 수 있습니다. 대화식 데모의 "사용자 정의 노드"데이터 세트를 참조하여이를 확인하십시오. (다른 데이터 세트에서 ISO 문자열을 편집 할 때 나타나는 사용자 정의 날짜 선택기도 있습니다.)
사용자 정의 노드는 customNodeDefinitions Prop에서 다음 구조의 다양한 객체로 제공됩니다.
{
condition , // a FilterFunction, as above
element , // React Component
customNodeProps , // object (optional)
hideKey , // boolean (optional)
defaultValue , // JSON value for a new instance of your component
showOnEdit // boolean, default false
showOnView // boolean, default true
showEditTools // boolean, default true
name // string (appears in Types selector)
showInTypesSelector , // boolean (optional), default false
// Only affects Collection nodes:
showCollectionWrapper // boolean (optional), default true
wrapperElement // React component (optional) to wrap *outside* the normal collection wrapper
wrapperProps // object (optional) -- props for the above wrapper component
} condition 동일한 입력 매개 변수 ( key , path , value 등)를 갖는 필터 기능 일 뿐이며 element React 구성 요소입니다. 데이터 구조의 모든 노드는 각 조건 기능을 통해 실행되며 일치하는 것은 사용자 정의 구성 요소로 대체됩니다. 노드가 여러 구성 요소에서 두 개 이상의 사용자 정의 정의 조건과 일치하면 첫 번째 노드가 사용되므로 배열에 우선 순위로 배치하십시오.
구성 요소는 표준 노드 구성 요소 (코드베이스 참조)와 동일한 소품을 모두 수신하지만 customNodeProps 객체를 통해 필요한 경우 구성 요소에 추가 소품을 전달할 수 있습니다. 맞춤형 날짜 선택기의 철저한 예는 데모에 사용되며 (다른 몇 가지 기본 프레젠테이션과 함께) 표준 소품과 몇 가지 사용자 정의 소품을 사용하는 방법을 확인할 수 있습니다. 여기에서 소스 코드를 봅니다
기본적으로 귀하의 구성 요소는 다른 값과 마찬가지로 속성 키의 오른쪽에 제시됩니다. 그러나 hideKey: true 설정하여 키 자체를 숨길 수 있으며 사용자 정의 구성 요소는 전체 행을 취합니다. (예를 들어 "사용자 정의 노드"데이터 세트의 "제공"상자를 참조하십시오.)
또한 기본적으로 구성 요소는 "디스플레이"요소로 취급됩니다. 즉, JSON 뷰어에 나타나지 만 편집 할 때 표준 편집 인터페이스로 되돌아갑니다. 그러나 이것은 showOnEdit , showOnView 및 showEditTools 소품으로 변경 될 수 있습니다. 예를 들어, 날짜 선택기는 편집 할 때만 필요할 수 있으며 디스플레이 용으로 남아 있습니다. showEditTools Prop는 호버의 각 값의 오른쪽에 나타나는 편집 아이콘 (복사, 추가, 편집, 삭제)을 나타냅니다. 이를 비활성화하기로 선택했지만 여전히 "편집"모드를 갖기 위해 구성 요소에 원하는 경우 편집을 전환하기 위해 자신의 UI 메커니즘을 제공해야합니다.
값을 편집/추가 할 때 유형 선택기에서 "유형"으로 선택하여 사용자가 특수 노드의 새 인스턴스를 만들 수 있습니다. showInTypesSelector: true . 그러나 이것이 활성화 된 경우 사용자 가이 "유형"을 선택할 때 삽입되는 데이터 인 name (사용자가 선택기에서 볼 수있는 이름)과 defaultValue 도 제공해야합니다. (사용자 정의 구성 요소를 사용하여 즉시 표시 되려면 condition 함수를 통과하면 defaultValue true 를 반환해야합니다.)
URL 문자열을 클릭 가능한 링크로 전환하기위한 간단한 사용자 정의 구성 요소 및 정의에는 상자 밖으로 사용할 수있는 기본 패키지가 제공됩니다. 그렇게 가져 와서 사용하십시오.
import { JsonEditor , LinkCustomNodeDefinition } from 'json-edit-react'
// ...Other stuff
return (
< JsonEditor
{ ... otherProps }
customNodeDefinitions = { [ LinkCustomNodeDefinition , ... otherCustomDefinitions ] }
/>
) 대부분의 경우 값 노드 (예 : array 또는 object 수집 노드)와 일치하는 사용자 정의 노드를 만드는 것이 바람직하고 간단합니다. 모든 데모 예제가 표시합니다. 그러나 전체 컬렉션 노드를 타겟팅 하려면 알아야 할 몇 가지 다른 사항이 있습니다.
children 속성을 사용하여 표시 될 수 있으며,이를 처리 할 수있는 구성 요소의 책임이됩니다.element 소품 (즉, 컬렉션의 내용 으로 나타납니다).wrapperElement (Props는 위에서 설명한대로 wrapperProps 와 함께 제공 될 수 있음). 다시, 내부 내용 (사용자 정의 element 포함)은 React children 사용하여 표시 할 수 있습니다. 이 예에서, 파란색 테두리는 wrapperElement 보여주고 빨간색 테두리는 내부 element 보여줍니다. 
showCollectionWrapper (기본적 true )이 있으며, false 으로 설정하면 주변 컬렉션 요소 (즉, Hide/Show Chevron 및 Brackets)를 숨 깁니다. 이 경우 원하는 경우 구성 요소에 자신의 숨기기/표시 메커니즘을 제공해야합니다. 구성 요소에 표시되는 다양한 텍스트 문자열을 변경할 수 있습니다. 현지화 할 수 있지만 특정 조건에 따라 표시된 텍스트를 무시하기 위해 함수를 지정할 수도 있습니다. 예를 들어, 속성 수 텍스트 (예 : 기본적으로 6 items )가 특정 유형의 노드를 요약하기를 원한다고 가정 해 봅시다. 예를 들어 (데모에서 가져온) :
customText 속성은 로컬리스 가능한 키를 키로 사용하는 객체를 사용하며 문자열 (또는 null , 로컬로 된 또는 기본 문자열로 떨어지게하는 함수). 이러한 함수에 대한 입력은 필터 함수와 동일 하므로이 예에서는 다음과 같이 정의됩니다.
// The function definition
const itemCountReplacement = ( { key , value , size } ) => {
// This returns "Steve Rogers (Marvel)" for the node summary
if ( value instanceof Object && 'name' in value )
return ` ${ value . name } ( ${ ( value ) ?. publisher ?? '' } )`
// This returns "X names" for the alias lists
if ( key === 'aliases' && Array . isArray ( value ) )
return ` ${ size } ${ size === 1 ? 'name' : 'names' } `
// Everything else as normal
return null
}
// And in component props...
. . . otherProps ,
customText = {
ITEM_SINGLE : itemCountReplacement ,
ITEMS_MULTIPLE : itemCountReplacement ,
} 기본 키보드 컨트롤은 위에 설명되어 있지만이를 사용자 정의/재정의 할 수 있습니다. 정의하려는 동작을 사용하여 keyboardControls 콘트로 소품을 전달하십시오. 기본 구성 객체는 다음과 같습니다.
{
confirm : 'Enter' , // default for all Value nodes, and key entry
cancel : 'Escape' ,
objectConfirm : { key : 'Enter' , modifier : [ 'Meta' , 'Shift' , 'Control' ] } ,
objectLineBreak : 'Enter' ,
stringConfirm : 'Enter' ,
stringLineBreak : { key : 'Enter' , modifier : 'Shift' } ,
numberConfirm : 'Enter' ,
numberUp : 'ArrowUp' ,
numberDown : 'ArrowDown' ,
booleanConfirm : 'Enter' ,
clipboardModifier : [ 'Meta' , 'Control' ] ,
collapseModifier : 'Alt' ,
}예를 들어 (예 :) 일반 "확인"조치를 "CMD-Enter"(Mac) 또는 "CTRL-Enter"로 변경하려면 다음과 같이 전달됩니다.
keyboardControls = {
confirm : {
key : "Enter" ,
modifier : [ "Meta" , "Control" ]
}
}고려 사항 :
confirm 값과 다른 경우 stringConfirm , numberConfirm 및 booleanConfirm 의 값 만 지정하면됩니다.clipboardModifier 로 수락). 대부분의 경우 실행 취소/레디 기능이 바람직하지만, 이는 두 가지 주요 이유로 구성 요소에 내장되어 있지 않습니다.
자체 구현에 유용 할 수있는 몇 가지 헬퍼 함수, 구성 요소 및 유형 (필터 또는 업데이트 기능 작성 또는 사용자 정의 구성 요소)이 패키지에서 내보내는 것입니다.
themes : 모든 내장 테마 정의가 포함 된 개체LinkCustomComponent : 하이퍼 링크를 렌더링하는 데 사용되는 구성 요소LinkCustomNodeDefinition : 하이퍼 링크에 대한 사용자 정의 노드 정의IconAdd , IconEdit , IconDelete , IconCopy , IconOk , IconCancel , IconChevron : 모든 내장 아이콘 구성 요소matchNode , matchNodeKey : 사용자 정의 검색 기능 정의를위한 도우미truncate : 함수는 지정된 길이로 문자열을 자릅니다. 여기를 참조하십시오extract : 스트링 경로에서 깊게 중첩 된 물체 값을 추출하는 기능. 여기를 참조하십시오assign : 문자열 경로에서 딥 객체 값을 설정하는 기능. 여기를 참조하십시오ThemeName : 내장 테마 이름의 문자열 리터럴 목록Theme : 전체 테마 개체ThemeInput : theme 소품의 입력 유형JsonEditorProps : JSON 편집기 구성 요소의 모든 입력 소품JsonData : 기본 data 객체 - 유효한 JSON 구조UpdateFunction , OnChangeFunction , OnErrorFunction FilterFunction , CopyFunction , SearchFilterFunction , CompareFunction , LocalisedString , TypeFilterFunction , CustomNodeDefinition , CUSTOLTEXTFUNCENS, CustomTextDefinitions , CustomTextFunction ,TranslateFunction : 현지화 키를 가져 와서 번역 된 문자열을 반환하는 함수IconReplacements : icons 의 입력 유형CollectionNodeProps : 모든 소품이 내부적으로 "Collection"노드 (즉, 객체/어레이)로 전달됩니다.ValueNodeProps : 모든 소품은 내부적으로 "value"노드 (즉, 객체/배열이 아님 )로 전달됩니다.CustomNodeProps : 모든 소품은 내부적으로 사용자 정의 노드로 전달되었습니다. 기본적으로 귀하의 구성 요소에 고유 한 소품을 전달하기위한 추가 customNodeProps 필드가있는 CollectionNodeProps 와 동일합니다.DataType : "string" | "number" | "boolean" | "null" | "object" | "array"KeyboardControls : 키보드 사용자 정의 소품 구조 https://github.com/carlosnz/json-edit-react/issues를 열어주십시오
내가 소개하고 싶은 주요 기능은 다음과 같습니다.
This component is heavily inspired by react-json-view, a great package that I've used in my own projects. However, it seems to have been abandoned now, and requires a few critical fixes, so I decided to create my own from scratch and extend the functionality while I was at it.
defaultValue function takes the new key as second parameteroverflow: clip setting based on animating statetrue to represent successsetData prop to discourage reliance on internal data state managementuseEffect hooksnull #90onError callback available for custom error handlingrootFontSize prop to set the "base" size for the componentonChange prop to allow validation/restriction of user input as they typedata if user hasn't actually changed a value (prevents Undo from being unnecessarily triggered)wrapperElement propid propindex in Filter (and other) function inputdefaultValue prop
