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-EnterEscape เพื่อยกเลิกการแก้ไขCmd/Ctrl จะคัดลอก พา ธ ไปยังโหนดที่เลือกแทนที่จะเป็นค่าของมันjsonParse ค่า ที่ต้องการ เพียงอย่างเดียวคือ 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 on load ถ้า 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 | Debounce Time เมื่อ searchText เปลี่ยนไป |
keySort | boolean|CompareFunction | false | ถ้า true คีย์วัตถุจะถูกสั่งซื้อ (โดยใช้ js .sort() ) ฟังก์ชั่นการเปรียบเทียบยังสามารถจัดเตรียมไว้เพื่อกำหนดพฤติกรรมการเรียงลำดับ |
showArrayIndices | boolean | true | ไม่ว่าจะแสดงดัชนี (เป็นคีย์คุณสมบัติ) สำหรับองค์ประกอบอาร์เรย์หรือไม่ |
showStringQuotes | boolean | true | ไม่ว่าจะแสดงค่าสตริงใน "เครื่องหมายคำพูด" หรือไม่ |
showCollectionCount | boolean|"when-closed" | true | ไม่ว่าจะแสดงจำนวนรายการในแต่ละคอลเลกชัน (วัตถุหรืออาร์เรย์) หรือไม่ |
defaultValue | any|DefaultValueFilterFunction | null | เมื่อมีการเพิ่มคุณสมบัติใหม่จะมีการกำหนดค่าเริ่มต้นด้วยค่านี้ ฟังก์ชั่นสามารถให้กับอินพุตเกือบเหมือนกันกับ FilterFunction S แต่ควรส่งออกค่า สิ่งนี้อนุญาตให้ใช้ค่าเริ่มต้นที่แตกต่างกันขึ้นอยู่กับสถานะข้อมูล (เช่นค่าเริ่มต้นสำหรับระดับบนสุดเป็นวัตถุ แต่เป็นสตริงที่อื่น) |
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 | ขนาดตัวอักษร "ฐาน" ซึ่งได้มาจากการใช้งานอื่น ๆ ทั้งหมด (เป็น em s) โดยการเปลี่ยนสิ่งนี้คุณจะขยายส่วนประกอบทั้งหมด คอนเทนเนอร์. |
customNodeDefinitions | CustomNodeDefinition[] | คุณสามารถให้ส่วนประกอบที่กำหนดเองเพื่อแทนที่โหนดเฉพาะในแผนผังข้อมูลตามฟังก์ชันเงื่อนไข ดูดูโหนดที่กำหนดเองสำหรับรายละเอียดเพิ่มเติม (องค์ประกอบที่กำหนดเองอย่างง่ายเพื่อเปลี่ยนสตริง URL เป็นลิงค์ที่ใช้งานอยู่มีอยู่ในแพ็คเกจหลัก - ดูที่นี่) | |
customText | CustomTextDefinitions | นอกเหนือจากการแปลสตริงข้อความส่วนประกอบแล้วคุณยังสามารถเปลี่ยนแปลง ได้แบบไดนามิก ขึ้นอยู่กับข้อมูล ดูข้อความที่กำหนดเองสำหรับรายละเอียดเพิ่มเติม | |
customButtons | CustomButtonDefinition[] | [] | คุณสามารถเพิ่มปุ่มของคุณเองลงในแผงปุ่มแก้ไขหากคุณต้องการดำเนินการที่กำหนดเองบนข้อมูล ดูปุ่มที่กำหนดเอง |
jsonParse | (input: string) => JsonData | JSON.parse | เมื่อแก้ไขบล็อกของ JSON โดยตรงคุณอาจต้องการให้อินพุต "looser" บางอย่าง - เช่น 'คำพูดเดียว', เครื่องหมายจุลภาคต่อท้ายหรือชื่อฟิลด์ที่ไม่ได้เสนอราคา ในกรณีนี้คุณสามารถให้วิธีการแยกวิเคราะห์ 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 ด้วยตัวเองนอกส่วนประกอบนี้ - เพียงแค่ผ่านวิธี setData ซึ่งเรียกว่าภายในเพื่ออัปเดต data ของคุณ อย่างไรก็ตามนี่ไม่ใช่ข้อบังคับ - หากคุณไม่ได้ให้วิธี 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 : พิจารณาว่าการอัปเดตเป็นข้อผิดพลาดดังนั้นข้อมูลจึงไม่ได้รับการอัปเดต (เปลี่ยนเป็นค่าก่อนหน้า) และข้อความแสดงข้อผิดพลาดทั่วไปจะปรากฏใน UIstring : ถือว่าเป็นข้อผิดพลาดดังนั้นจึงไม่มีการอัปเดตข้อมูล แต่ข้อความแสดงข้อผิดพลาด UI จะเป็นสตริงที่คุณให้ไว้[ "value", <value> ] : บอกส่วนประกอบให้ใช้ <value> ที่ส่งคืนแทนข้อมูลอินพุต คุณอาจใช้สิ่งนี้เพื่อแก้ไขอินพุตของผู้ใช้โดยอัตโนมัติ - ตัวอย่างเช่นการเรียงลำดับอาร์เรย์หรือแทรกฟิลด์การประทับเวลาลงในวัตถุ[ "error", <value> ] : เหมือนกับ string แต่ในรูปแบบ tuple ที่ยาวขึ้น เช่นเดียวกับฟังก์ชั่นการอัปเดตฟังก์ชัน 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 ) อย่างไรก็ตามคุณสามารถให้การโทรกลับ onError ของคุณเองเพื่อใช้ UI ข้อผิดพลาดของคุณเองหรือเรียกใช้ผลข้างเคียงเพิ่มเติม (ในกรณีก่อนหน้านี้คุณอาจต้องการปิดการใช้งาน prop prop 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
}
}(ตัวอย่างของข้อผิดพลาดที่กำหนดเอง UI สามารถเห็นได้ในการสาธิตด้วยชุดข้อมูล "โหนดที่กำหนดเอง" - เมื่อคุณป้อนการแจ้งเตือน "ขนมปังปิ้ง" ที่ไม่ถูกต้องจะปรากฏขึ้นแทนข้อความแสดงข้อผิดพลาดส่วนประกอบปกติ)
การโทรกลับที่คล้ายกันจะถูกดำเนินการเมื่อใดก็ตามที่รายการถูกคัดลอกไปยังคลิปบอร์ด (หากส่งผ่านไปยังเสา enableClipboard ) แต่มีพารามิเตอร์อินพุตที่แตกต่างกัน:
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)เนื่องจากมีความคิดเห็นของผู้ใช้น้อยมากเมื่อคลิก "คัดลอก" ความคิดที่ดีคือการนำเสนอการแจ้งเตือนบางอย่างในการโทรกลับนี้
นอกเหนือจากปุ่ม "คัดลอก", "แก้ไข" และ "ลบ" ที่ปรากฏโดยแต่ละค่าคุณสามารถเพิ่มปุ่มของคุณเองได้หากคุณต้องการอนุญาตให้มีการดำเนินการที่กำหนดเองบนข้อมูล ระบุอาร์เรย์ของคำจำกัดความของปุ่มใน prop customButtons ในโครงสร้างคำจำกัดความต่อไปนี้:
{
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" ไม่มีฟังก์ชั่นการ จำกัด เฉพาะสำหรับการแก้ไขชื่อคีย์วัตถุ แต่พวกเขาจะต้องส่งคืน true สำหรับ ทั้ง restrictEdit และ restrictDelete (และ restrictAdd สำหรับคอลเลกชัน) เนื่องจากการเปลี่ยนชื่อคีย์เทียบเท่ากับการลบคุณสมบัติและเพิ่มใหม่
นอกจากนี้คุณยังสามารถตั้งค่าค่าเริ่มต้นแบบไดนามิกโดยผ่านฟังก์ชั่นตัวกรองไปยังเสา defaultValue - ค่าอินพุตนั้นเหมือนกับข้างต้น แต่ยังใช้ค่า 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"
} }เช่นเดียวกับการควบคุมการ เข้าถึง เครื่องมือแก้ไขต่างๆตามที่อธิบายไว้ข้างต้นเป็นไปได้ที่จะทำการตรวจสอบความถูกต้องของ JSON แบบเต็มโดยการสร้างฟังก์ชั่นการอัปเดตที่ส่งผ่านข้อมูลไปยังไลบรารีการตรวจสอบสคีมาของบุคคลที่ 3 (เช่น AJV) สิ่งนี้จะปฏิเสธอินพุตที่ไม่ถูกต้องใด ๆ และแสดงข้อผิดพลาดใน UI (หรือผ่านฟังก์ชั่น OnERROR ที่กำหนดเอง) คุณสามารถดูตัวอย่างของสิ่งนี้ในการสาธิตด้วยชุดข้อมูล "JSON Schema Validation" (และชุดข้อมูล "โหนดที่กำหนดเอง")
ตัวอย่างฟังก์ชั่นการตรวจสอบความถูก 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 (Binary JSON) ลำดับคีย์ไม่มีความหมายดังนั้นในครั้งต่อไปที่วัตถุถูกโหลดคีย์จะถูกระบุตัวอักษรrestrictDrag ใช้กับองค์ประกอบ ต้นทาง (เช่นโหนดที่ถูกลาก) ไม่ใช่ปลายทางrestrictDelete ) เนื่องจากการลากโหนดไปยังปลายทางใหม่นั้นเป็นเพียงการลบและเพิ่มกลับไปที่อื่น ข้อมูลที่แสดงสามารถกรองได้ตามอินพุตการค้นหาจากผู้ใช้ การป้อนข้อมูลผู้ใช้ควรได้รับการจับอย่างอิสระ (เราไม่ได้ให้ UI ที่นี่) และส่งผ่านด้วย prop searchText อินพุตนี้จะถูก deboanned ภายใน (สามารถตั้งค่าเวลาด้วยเสา searchDebounceTime ) ดังนั้นจึงไม่จำเป็นต้องทำเช่นนั้น ค่าที่ใช้ในการทดสอบกับ searchText นั้นถูกระบุด้วย Prop searchFilter โดยค่าเริ่มต้น (ไม่มีการกำหนด searchFilter ) มันจะตรงกับ ค่า ข้อมูล (ที่มีการจับคู่บางส่วนที่ไม่ได้รับการตอบสนอง-เช่นอินพุต "ILB" จะตรงกับค่า "Bilbo")
คุณสามารถระบุสิ่งที่ควรจับคู่โดยการตั้งค่า searchFilter เป็น "key" (ชื่อคุณสมบัติจับคู่), "value" (ค่าเริ่มต้นที่อธิบายไว้ข้างต้น) หรือ "all" (จับคู่ทั้งคุณสมบัติและค่า) สิ่งนี้น่าจะเพียงพอสำหรับกรณีการใช้งานส่วนใหญ่ แต่คุณสามารถระบุ SearchFilterFunction ของคุณเองได้ ฟังก์ชั่นการค้นหาเป็นลายเซ็นเดียวกับ FilterFunctions ข้างต้น แต่ใช้อาร์กิวเมนต์เพิ่มเติมอีกหนึ่งข้อสำหรับ 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- เช่น jer-collection-header-row , jer-value-string
คุณสมบัติ fragments ด้านบนเป็นเพียงความสะดวกในการอนุญาตให้มีการกำหนด "แฟรกเมนต์" สไตล์ซ้ำ ๆ ครั้งเดียวและอ้างถึงการใช้นามแฝง ตัวอย่างเช่นหากคุณต้องการให้ไอคอนทั้งหมดของคุณเป็นสีน้ำเงินและใหญ่ขึ้นเล็กน้อยและเว้นระยะห่างคุณอาจกำหนดชิ้นส่วนเช่นนั้น:
fragments: { iconAdjust : { color : "blue" , fontSize : "110%" , marginRight : "0.6em" } }จากนั้นในวัตถุธีมเพียงแค่ใช้:
{
... ,
iconEdit : "iconAdjust" ,
iconDelete : "iconAdjust" ,
iconAdd : "iconAdjust" ,
iconCopy : "iconAdjust" ,
}จากนั้นเมื่อคุณต้องการปรับแต่งในภายหลังคุณจะต้องอัปเดตในที่เดียวเท่านั้น!
ชิ้นส่วนยังสามารถผสมกับคุณสมบัติเพิ่มเติมและแม้แต่ชิ้นส่วนอื่น ๆ เช่น:
iconEdit: [ "iconAdjust" , "anotherFragment" , { marginLeft : "1em" } ] ภายในการปรับขนาดและระยะห่างทั้งหมดทำใน em S ไม่เคย px (นอกเหนือจาก rootFontSize ซึ่งกำหนดขนาด "ฐาน") สิ่งนี้ทำให้การปรับขนาดง่ายขึ้นมากเพียงแค่เปลี่ยน prop 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 ในชุดข้อมูลอื่น ๆ )
โหนดที่กำหนดเองมีให้ใน Prop customNodeDefinitions เป็นอาร์เรย์ของวัตถุของโครงสร้างต่อไปนี้:
{
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 เป็นองค์ประกอบที่ตอบสนอง ทุกโหนดในโครงสร้างข้อมูลจะถูกเรียกใช้ผ่านฟังก์ชั่นเงื่อนไขแต่ละรายการและการจับคู่ใด ๆ ที่ตรงกันจะถูกแทนที่ด้วยองค์ประกอบที่กำหนดเองของคุณ โปรดทราบว่าหากโหนดตรงกับเงื่อนไขนิยามที่กำหนดเองมากกว่าหนึ่งเงื่อนไข (จากหลาย ๆ ส่วนประกอบ) ไฟล์ แรก จะถูกใช้ดังนั้นวางไว้ในอาร์เรย์ตามลำดับความสำคัญ
ส่วนประกอบจะได้รับอุปกรณ์ประกอบฉากเดียวกัน ทั้งหมด เป็นส่วนประกอบโหนดมาตรฐาน (ดู Codebase) แต่คุณสามารถส่งอุปกรณ์ประกอบฉากเพิ่มเติมไปยังส่วนประกอบของคุณได้หากจำเป็นผ่านวัตถุ customNodeProps ตัวอย่างอย่างละเอียดของตัวเลือกวันที่ที่กำหนดเองใช้ในการสาธิต (พร้อมกับงานนำเสนอพื้นฐานอื่น ๆ อีกสองสามอัน) ซึ่งคุณสามารถตรวจสอบเพื่อดูวิธีการใช้อุปกรณ์ประกอบฉากมาตรฐานและอุปกรณ์ประกอบฉากที่กำหนดเอง ดูซอร์สโค้ดที่นี่
โดยค่าเริ่มต้นส่วนประกอบของคุณจะถูกนำเสนอทางด้านขวาของคีย์คุณสมบัติที่เป็นของค่าอื่น ๆ อย่างไรก็ตามคุณสามารถซ่อนคีย์เองได้โดยการตั้ง hideKey: true และส่วนประกอบที่กำหนดเองจะใช้เวลาทั้งแถว (ดูกล่อง "นำเสนอโดย" ในชุดข้อมูล "โหนดที่กำหนดเอง" สำหรับตัวอย่าง)
นอกจากนี้โดยค่าเริ่มต้นส่วนประกอบของคุณจะได้รับการปฏิบัติเป็นองค์ประกอบ "แสดง" นั่นคือมันจะปรากฏในตัวชม JSON แต่เมื่อแก้ไขมันจะกลับไปเป็นอินเทอร์เฟซการแก้ไขมาตรฐาน อย่างไรก็ตามสิ่งนี้สามารถเปลี่ยนแปลงได้ด้วยการแสดงของ showOnEdit , showOnView และ showEditTools ตัวอย่างเช่นตัวเลือกวันที่อาจจำเป็นเมื่อ แก้ไข และทิ้งไว้ตามที่เป็นเพื่อการแสดงผล Prop showEditTools หมายถึงไอคอนการแก้ไข (คัดลอกเพิ่ม, แก้ไข, ลบ) ที่ปรากฏทางด้านขวาของแต่ละค่าในโฮเวอร์ หากคุณเลือกที่จะปิดการใช้งานสิ่งเหล่านี้ แต่คุณยังต้องการให้ส่วนประกอบของคุณมีโหมด "แก้ไข" คุณจะต้องให้กลไก UI ของคุณเองเพื่อสลับการแก้ไข
คุณสามารถอนุญาตให้ผู้ใช้สร้างอินสแตนซ์ใหม่ของโหนดพิเศษของคุณโดยเลือกเป็น "ประเภท" ในประเภทตัวเลือกเมื่อแก้ไข/เพิ่มค่า SET showInTypesSelector: true เพื่อเปิดใช้งานสิ่งนี้ อย่างไรก็ตามหากเปิดใช้งานสิ่งนี้คุณต้องระบุ name (ซึ่งเป็นสิ่งที่ผู้ใช้จะเห็นในตัวเลือก) และค่า defaultValue ซึ่งเป็นข้อมูลที่แทรกเมื่อผู้ใช้เลือก "ประเภท" นี้ ( defaultValue จะต้องส่งคืน true ถ้าส่งผ่านฟังก์ชั่น condition เพื่อให้มันแสดงทันทีโดยใช้องค์ประกอบที่กำหนดเองของคุณ)
ส่วนประกอบและคำจำกัดความที่กำหนดเองอย่างง่ายเพื่อเปลี่ยนสตริง URL เป็นลิงค์ที่คลิกได้นั้นมีแพ็คเกจหลักเพื่อให้คุณใช้นอกกรอบ เพียงแค่นำเข้าและใช้เช่นนั้น:
import { JsonEditor , LinkCustomNodeDefinition } from 'json-edit-react'
// ...Other stuff
return (
< JsonEditor
{ ... otherProps }
customNodeDefinitions = { [ LinkCustomNodeDefinition , ... otherCustomDefinitions ] }
/>
) ในกรณีส่วนใหญ่มันจะดีกว่า (และง่ายกว่า) ในการสร้างโหนดที่กำหนดเองเพื่อจับคู่โหนด ค่า (เช่นไม่ใช่ array หรือโหนด การรวบรวม object ) ซึ่งเป็นสิ่งที่ตัวอย่างตัวอย่างทั้งหมดแสดง อย่างไรก็ตามหากคุณ ต้องการ กำหนดเป้าหมายโหนดคอลเลกชันทั้งหมดมีอีกสองสิ่งที่ต้องรู้:
children มันจะกลายเป็นความรับผิดชอบขององค์ประกอบของคุณในการจัดการelement ปกติซึ่งจะปรากฏ ใน วงเล็บคอลเลกชัน (เช่นปรากฏเป็น เนื้อหา ของคอลเลกชัน)wrapperElement เสริมซึ่งแสดง อยู่นอก คอลเลกชัน (อุปกรณ์ประกอบฉากสามารถจัดหาได้ตามที่อธิบายไว้ข้างต้นด้วย wrapperProps ) อีกครั้งเนื้อหาภายใน (รวมถึง element ที่กำหนดเองของคุณ) สามารถแสดงโดยใช้ react children ในตัวอย่างนี้เส้นขอบ สีน้ำเงิน แสดง wrapperElement และเส้นขอบ สีแดง แสดง element ภายใน: 
showCollectionWrapper (ค่าเริ่มต้น true ) ซึ่งเมื่อตั้งค่าเป็น false ซ่อนองค์ประกอบการรวบรวมโดยรอบ (คือซ่อน/แสดงเชฟรอนและวงเล็บ) ในกรณีนี้คุณจะต้องให้กลไกการซ่อน/แสดงของคุณเองในองค์ประกอบของคุณหากคุณต้องการ เป็นไปได้ที่จะเปลี่ยนสตริงข้อความต่าง ๆ ที่แสดงโดยส่วนประกอบ คุณสามารถ จำกัด วงได้ แต่คุณสามารถระบุฟังก์ชั่นเพื่อแทนที่ข้อความที่แสดงตามเงื่อนไขบางประการ ตัวอย่างเช่นสมมติว่าเราต้องการข้อความนับคุณสมบัติ (เช่น 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 prop prop กับการกระทำที่คุณต้องการแทนที่กำหนด วัตถุกำหนดค่าเริ่มต้นคือ:
{
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-Enters" คุณจะผ่าน:
keyboardControls = {
confirm : {
key : "Enter" ,
modifier : [ "Meta" , "Control" ]
}
}ข้อควรพิจารณา :
stringConfirm , numberConfirm และ booleanConfirm หากพวกเขาควร แตกต่าง จากค่า confirm ของคุณclipboardModifier คลิกจะไม่ทำงาน แม้ว่าฟังก์ชั่นการเลิกทำ/ทำซ้ำอาจเป็นที่ต้องการในกรณีส่วนใหญ่ แต่ก็ไม่ได้ถูกสร้างขึ้นในส่วนประกอบด้วยเหตุผลหลักสองประการ:
ฟังก์ชั่นผู้ช่วยส่วนประกอบและประเภทที่อาจเป็นประโยชน์ในการใช้งานของคุณเอง (จากการสร้างฟังก์ชั่นตัวกรองหรืออัปเดตหรือส่วนประกอบที่กำหนดเอง) จะถูกส่งออกจากแพ็คเกจ:
themes : วัตถุที่มีคำจำกัดความชุดรูปแบบทั้งหมดในตัวLinkCustomComponent : ส่วนประกอบที่ใช้ในการสร้างไฮเปอร์ลิงก์LinkCustomNodeDefinition : นิยามโหนดที่กำหนดเองสำหรับไฮเปอร์ลิงก์IconAdd , IconEdit , IconDelete , IconCopy , IconOk , IconCancel , IconChevron : ส่วนประกอบไอคอนทั้งหมดในตัวทั้งหมดmatchNode , matchNodeKey : ผู้ช่วยสำหรับการกำหนดฟังก์ชั่นการค้นหาที่กำหนดเองtruncate : ฟังก์ชั่นเพื่อตัดทอนสตริงให้มีความยาวที่ระบุ ดูที่นี่extract : ฟังก์ชั่นเพื่อแยกค่าวัตถุที่ซ้อนกันลึกออกไปจากเส้นทางสตริง ดูที่นี่assign : ฟังก์ชั่นเพื่อตั้งค่าวัตถุลึกจากเส้นทางสตริง ดูที่นี่ThemeName : String รายการตามตัวอักษรของชื่อธีมในตัวTheme : วัตถุธีมเต็มรูปแบบThemeInput : ประเภทอินพุตสำหรับชุด theme แบบเสาJsonEditorProps : อุปกรณ์ประกอบฉากอินพุตทั้งหมดสำหรับองค์ประกอบตัวแก้ไข JSONJsonData : วัตถุ data หลัก - โครงสร้าง JSON ที่ถูกต้องใด ๆUpdateFunction , OnChangeFunction , OnErrorFunction FilterFunction CustomTextDefinitions CopyFunction , SearchFilterFunction , CompareFunction CustomNodeDefinition TypeFilterFunction LocalisedString , CustomTextFunctionTranslateFunction : ฟังก์ชั่นที่ใช้คีย์การแปลและส่งคืนสตริงแปลIconReplacements : ประเภทอินพุตสำหรับ icons propCollectionNodeProps : อุปกรณ์ประกอบฉากทั้งหมดผ่านไปภายในไปยังโหนด "คอลเลกชัน" (เช่นวัตถุ/อาร์เรย์)ValueNodeProps : อุปกรณ์ประกอบฉากทั้งหมดผ่านไปภายในไปยังโหนด "ค่า" (เช่น ไม่ใช่ วัตถุ/อาร์เรย์)CustomNodeProps : อุปกรณ์ประกอบฉากทั้งหมดผ่านไปยังโหนดที่กำหนดเอง โดยทั่วไปเหมือนกับ CollectionNodeProps ที่มีฟิลด์ customNodeProps พิเศษสำหรับการผ่านอุปกรณ์ประกอบฉากที่ไม่ซ้ำกับส่วนประกอบของคุณ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
