Added data tree component.
This commit is contained in:
parent
537aa35e34
commit
f3839b278f
17
assets/icons/jsonarrayicon.svg
Normal file
17
assets/icons/jsonarrayicon.svg
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g transform="matrix(0.786027,0,0,0.786027,-0.159276,6.23774)">
|
||||||
|
<path d="M55.68,37.394C58.27,37.394 60.374,35.29 60.374,32.726C60.374,30.136 58.27,28.026 55.68,28.026C53.09,28.026 50.986,30.136 50.986,32.726C50.986,35.29 53.09,37.394 55.68,37.394Z" style="fill-rule:nonzero;"/>
|
||||||
|
<path d="M41.007,37.394C43.597,37.394 45.707,35.29 45.707,32.726C45.707,30.136 43.597,28.026 41.007,28.026C38.443,28.026 36.339,30.136 36.339,32.726C36.339,35.29 38.443,37.394 41.007,37.394Z" style="fill-rule:nonzero;"/>
|
||||||
|
<path d="M26.366,37.394C28.956,37.394 31.061,35.29 31.061,32.726C31.061,30.136 28.931,28.026 26.366,28.026C23.776,28.026 21.672,30.136 21.672,32.726C21.672,35.29 23.776,37.394 26.366,37.394Z" style="fill-rule:nonzero;"/>
|
||||||
|
<g transform="matrix(1.3198,0,0,1.3198,-2.17489,-9.45821)">
|
||||||
|
<g transform="matrix(1,0,0,1,0,0.0751136)">
|
||||||
|
<path d="M19.323,6.766L10.395,6.766C9.015,6.766 7.895,7.885 7.895,9.266L7.895,54.584C7.895,55.965 9.015,57.084 10.395,57.084L20.82,57.084C22.2,57.084 23.32,55.964 23.32,54.584C23.32,53.204 22.2,52.084 20.82,52.084L12.895,52.084C12.895,52.084 12.895,11.766 12.895,11.766C12.895,11.766 19.323,11.766 19.323,11.766C20.703,11.766 21.823,10.646 21.823,9.266C21.823,7.886 20.703,6.766 19.323,6.766Z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-1,0,0,1,65.2958,0.0751136)">
|
||||||
|
<path d="M19.323,11.766L12.895,11.766C12.895,11.766 12.895,52.084 12.895,52.084C12.895,52.084 20.82,52.084 20.82,52.084C22.2,52.084 23.32,53.204 23.32,54.584C23.32,55.964 22.2,57.084 20.82,57.084L10.395,57.084C9.015,57.084 7.895,55.965 7.895,54.584L7.895,9.266C7.895,7.885 9.015,6.766 10.395,6.766L19.323,6.766C20.703,6.766 21.823,7.886 21.823,9.266C21.823,10.646 20.703,11.766 19.323,11.766Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
19
assets/icons/jsonboolicon.svg
Normal file
19
assets/icons/jsonboolicon.svg
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g transform="matrix(0.537732,0,0,0.537732,3.45345,3.98971)">
|
||||||
|
<rect x="0" y="0" width="57.875" height="56.688" style="fill-opacity:0;"/>
|
||||||
|
<g transform="matrix(0.90281,0,0,0.90281,53.0869,52.9925)">
|
||||||
|
<path d="M22.484,56.688C24.609,56.688 26.281,55.859 27.422,54.141L56.516,9.609C57.344,8.359 57.688,7.188 57.688,6.109C57.688,3.188 55.484,1.063 52.5,1.063C50.438,1.063 49.172,1.781 47.906,3.75L22.359,44.094L9.375,28C8.234,26.594 6.969,25.969 5.219,25.969C2.188,25.969 0,28.141 0,31.078C0,32.375 0.406,33.531 1.516,34.828L17.656,54.375C18.984,55.953 20.5,56.688 22.484,56.688Z" style="fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1,0,0,1,6.05665,8.7167)">
|
||||||
|
<rect x="0" y="0" width="51.887" height="51.762" style="fill-opacity:0;"/>
|
||||||
|
<g transform="matrix(0.450214,0,0,0.450214,-2.06221,-4.74859)">
|
||||||
|
<path d="M1.342,50.412C3.17,52.209 6.311,52.162 8.014,50.459L25.857,32.615L43.67,50.443C45.436,52.209 48.514,52.209 50.326,50.397C52.139,48.568 52.154,45.522 50.389,43.74L32.576,25.897L50.389,8.084C52.154,6.318 52.154,3.256 50.326,1.443C48.498,-0.385 45.436,-0.4 43.67,1.381L25.857,19.193L8.014,1.365C6.311,-0.338 3.154,-0.416 1.342,1.428C-0.455,3.256 -0.408,6.365 1.295,8.068L19.139,25.897L1.295,43.772C-0.408,45.459 -0.471,48.6 1.342,50.412Z" style="fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(0.962144,0.0378562,0.0378562,0.962144,-4.91275,-9.82292)">
|
||||||
|
<path d="M4.936,62.562L60.127,7.371C61.183,6.315 61.248,4.666 60.272,3.69C59.296,2.715 57.647,2.78 56.592,3.835L1.401,59.026C0.345,60.082 0.28,61.731 1.256,62.706C2.232,63.682 3.881,63.617 4.936,62.562Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
7
assets/icons/jsonnumbericon.svg
Normal file
7
assets/icons/jsonnumbericon.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g transform="matrix(0.948653,0,0,0.948653,5.29485,2.93181)">
|
||||||
|
<path d="M11.694,61.211C13.582,61.211 14.878,60.219 15.269,58.266L26.147,4.125C26.221,3.87 26.289,3.374 26.289,2.939C26.289,1.144 25.017,0.072 23.169,0.072C21.07,0.072 20.004,1.198 19.639,3.1L8.761,57.189C8.688,57.553 8.625,58.023 8.625,58.375C8.625,60.171 9.851,61.211 11.694,61.211ZM32.046,61.211C33.965,61.211 35.236,60.219 35.633,58.266L46.53,4.125C46.573,3.87 46.641,3.374 46.641,2.939C46.641,1.144 45.369,0.072 43.552,0.072C41.422,0.072 40.393,1.209 40.022,3.1L29.119,57.189C29.051,57.553 29.008,58.023 29.008,58.375C29.008,60.171 30.228,61.211 32.046,61.211ZM7.086,22.466L52.675,22.466C54.861,22.466 56.301,20.979 56.301,18.887C56.301,17.203 55.15,15.931 53.356,15.931L7.772,15.931C5.606,15.931 4.14,17.458 4.14,19.576C4.14,21.286 5.322,22.466 7.086,22.466ZM2.946,43.97L48.518,43.97C50.689,43.97 52.15,42.512 52.15,40.419C52.15,38.735 50.973,37.453 49.21,37.453L3.626,37.453C1.435,37.453 0,38.973 0,41.091C0,42.807 1.146,43.97 2.946,43.97Z" style="fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
10
assets/icons/jsonobjecticon.svg
Normal file
10
assets/icons/jsonobjecticon.svg
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g transform="matrix(0.782134,0,0,0.782134,-7.10543e-15,6.36533)">
|
||||||
|
<path d="M0,32.731C0,34.898 1.251,36.421 3.609,36.861C7.591,37.561 9.134,39.524 9.134,44.432L9.134,52.409C9.134,61.409 13.296,65.494 22.245,65.494C22.886,65.494 23.529,65.394 24.011,65.258C25.464,64.784 26.175,63.761 26.175,62.466C26.175,60.994 25.52,60.2 24.184,59.851C23.844,59.772 23.492,59.704 23.083,59.667C18.081,59.281 16.276,57.109 16.276,51.581L16.276,41.926C16.276,36.561 13.224,33.471 8.079,32.935C7.873,32.918 7.862,32.647 8.079,32.624C13.224,32.094 16.276,29.004 16.276,23.639L16.276,13.975C16.276,8.421 18.081,6.301 23.083,5.915C23.6,5.872 24.06,5.799 24.406,5.674C25.582,5.294 26.175,4.449 26.175,3.085C26.175,1.761 25.466,0.786 24.021,0.321C23.434,0.136 22.782,0.057 21.977,0.057C13.27,0.057 9.134,4.198 9.134,13.148L9.134,21.133C9.134,25.995 7.569,27.984 3.609,28.679C1.251,29.129 0,30.596 0,32.731ZM81.827,32.731C81.827,30.596 80.551,29.129 78.192,28.679C74.253,27.984 72.662,25.995 72.662,21.133L72.662,13.148C72.662,4.198 68.532,0.057 59.819,0.057C59.019,0.057 58.393,0.136 57.806,0.321C56.356,0.786 55.627,1.761 55.627,3.085C55.627,4.449 56.245,5.294 57.421,5.674C57.767,5.799 58.202,5.872 58.719,5.915C63.716,6.301 65.552,8.421 65.552,13.975L65.552,23.639C65.552,29.004 68.577,32.094 73.722,32.624C73.94,32.647 73.929,32.918 73.722,32.935C68.577,33.471 65.552,36.561 65.552,41.926L65.552,51.581C65.552,57.109 63.716,59.281 58.719,59.667C58.31,59.704 57.984,59.772 57.643,59.851C56.307,60.2 55.627,60.994 55.627,62.466C55.627,63.761 56.364,64.784 57.816,65.258C58.298,65.394 58.916,65.494 59.557,65.494C68.501,65.494 72.662,61.409 72.662,52.409L72.662,44.432C72.662,39.524 74.236,37.561 78.192,36.861C80.551,36.421 81.827,34.898 81.827,32.731Z" style="fill-rule:nonzero;"/>
|
||||||
|
<path d="M55.68,37.394C58.27,37.394 60.374,35.29 60.374,32.726C60.374,30.136 58.27,28.026 55.68,28.026C53.09,28.026 50.986,30.136 50.986,32.726C50.986,35.29 53.09,37.394 55.68,37.394Z" style="fill-rule:nonzero;"/>
|
||||||
|
<path d="M41.007,37.394C43.597,37.394 45.707,35.29 45.707,32.726C45.707,30.136 43.597,28.026 41.007,28.026C38.443,28.026 36.339,30.136 36.339,32.726C36.339,35.29 38.443,37.394 41.007,37.394Z" style="fill-rule:nonzero;"/>
|
||||||
|
<path d="M26.366,37.394C28.956,37.394 31.061,35.29 31.061,32.726C31.061,30.136 28.931,28.026 26.366,28.026C23.776,28.026 21.672,30.136 21.672,32.726C21.672,35.29 23.776,37.394 26.366,37.394Z" style="fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
10
assets/icons/jsonstringicon.svg
Normal file
10
assets/icons/jsonstringicon.svg
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g transform="matrix(1.23625,0,0,1.23625,7.42576,3)">
|
||||||
|
<rect x="0" y="0" width="39.756" height="46.916" style="fill-opacity:0;"/>
|
||||||
|
<g transform="matrix(0.93194,0,0,0.93194,1.44027,1.6178)">
|
||||||
|
<path d="M3.457,46.871C5.558,46.871 6.641,46.021 7.319,43.804L10.799,34.089L28.646,34.089L32.131,43.804C32.804,46.021 33.886,46.871 35.967,46.871C38.157,46.871 39.569,45.556 39.569,43.515C39.569,42.764 39.447,42.112 39.141,41.271L25.305,3.91C24.362,1.289 22.591,0 19.748,0C17.034,0 15.249,1.269 14.325,3.884L0.417,41.431C0.127,42.234 0,42.914 0,43.58C0,45.615 1.321,46.871 3.457,46.871ZM12.589,28.281L19.659,7.976L19.838,7.976L26.903,28.281L12.589,28.281Z" style="fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
design_files/jsonarrayicon.afdesign
Normal file
BIN
design_files/jsonarrayicon.afdesign
Normal file
Binary file not shown.
BIN
design_files/jsonboolicon.afdesign
Normal file
BIN
design_files/jsonboolicon.afdesign
Normal file
Binary file not shown.
BIN
design_files/jsonnumbericon.afdesign
Normal file
BIN
design_files/jsonnumbericon.afdesign
Normal file
Binary file not shown.
BIN
design_files/jsonobjecticon.afdesign
Normal file
BIN
design_files/jsonobjecticon.afdesign
Normal file
Binary file not shown.
BIN
design_files/jsonstringicon.afdesign
Normal file
BIN
design_files/jsonstringicon.afdesign
Normal file
Binary file not shown.
238
src/components/Dashboard/common/DataTree.jsx
Normal file
238
src/components/Dashboard/common/DataTree.jsx
Normal file
@ -0,0 +1,238 @@
|
|||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import { Tree, Typography, Space, Tag } from 'antd'
|
||||||
|
import { useState, useMemo } from 'react'
|
||||||
|
import XMarkIcon from '../../Icons/XMarkIcon'
|
||||||
|
import QuestionCircleIcon from '../../Icons/QuestionCircleIcon'
|
||||||
|
import JsonStringIcon from '../../Icons/JsonStringIcon'
|
||||||
|
import JsonArrayIcon from '../../Icons/JsonArrayIcon'
|
||||||
|
import JsonObjectIcon from '../../Icons/JsonObjectIcon'
|
||||||
|
import JsonBoolIcon from '../../Icons/JsonBoolIcon'
|
||||||
|
import JsonNumberIcon from '../../Icons/JsonNumberIcon'
|
||||||
|
import CopyButton from './CopyButton'
|
||||||
|
|
||||||
|
const { Text } = Typography
|
||||||
|
|
||||||
|
const DataTree = ({
|
||||||
|
data,
|
||||||
|
showLine = true,
|
||||||
|
showValueCopy = true,
|
||||||
|
showKeyCopy = false,
|
||||||
|
defaultExpandAll = false,
|
||||||
|
onNodeSelect,
|
||||||
|
style = {}
|
||||||
|
}) => {
|
||||||
|
const [expandedKeys, setExpandedKeys] = useState([])
|
||||||
|
const [selectedKeys, setSelectedKeys] = useState([])
|
||||||
|
|
||||||
|
// Function to get data type and format value
|
||||||
|
const getDataTypeInfo = (value) => {
|
||||||
|
if (value === null)
|
||||||
|
return { type: 'null', color: 'default', icon: <XMarkIcon /> }
|
||||||
|
if (value === undefined)
|
||||||
|
return {
|
||||||
|
type: 'undefined',
|
||||||
|
color: 'default',
|
||||||
|
icon: <QuestionCircleIcon />
|
||||||
|
}
|
||||||
|
if (typeof value === 'boolean')
|
||||||
|
return { type: 'boolean', color: 'blue', icon: <JsonBoolIcon /> }
|
||||||
|
if (typeof value === 'number')
|
||||||
|
return { type: 'number', color: 'green', icon: <JsonNumberIcon /> }
|
||||||
|
if (typeof value === 'string')
|
||||||
|
return { type: 'string', color: 'orange', icon: <JsonStringIcon /> }
|
||||||
|
if (Array.isArray(value))
|
||||||
|
return { type: 'array', color: 'purple', icon: <JsonArrayIcon /> }
|
||||||
|
if (typeof value === 'object')
|
||||||
|
return { type: 'object', color: 'cyan', icon: <JsonObjectIcon /> }
|
||||||
|
return { type: 'unknown', color: 'default', icon: <QuestionCircleIcon /> }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to format value for display
|
||||||
|
const formatValue = (value) => {
|
||||||
|
if (value === null) return 'null'
|
||||||
|
if (value === undefined) return 'undefined'
|
||||||
|
if (typeof value === 'boolean') return value.toString()
|
||||||
|
if (typeof value === 'number') return value.toString()
|
||||||
|
if (typeof value === 'string') {
|
||||||
|
// Truncate long strings
|
||||||
|
return value.length > 50 ? `${value.substring(0, 50)}...` : value
|
||||||
|
}
|
||||||
|
if (Array.isArray(value)) return `Array (${value.length} items)`
|
||||||
|
if (typeof value === 'object') {
|
||||||
|
const keys = Object.keys(value)
|
||||||
|
return `Object (${keys.length} properties)`
|
||||||
|
}
|
||||||
|
return String(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to get raw value for copying
|
||||||
|
const getCopyValue = (value) => {
|
||||||
|
if (value === null) return 'null'
|
||||||
|
if (value === undefined) return 'undefined'
|
||||||
|
if (typeof value === 'boolean') return value.toString()
|
||||||
|
if (typeof value === 'number') return value.toString()
|
||||||
|
if (typeof value === 'string') return value
|
||||||
|
if (Array.isArray(value)) return JSON.stringify(value, null, 2)
|
||||||
|
if (typeof value === 'object') return JSON.stringify(value, null, 2)
|
||||||
|
return String(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Recursive function to convert JSON to tree data
|
||||||
|
const convertToTreeData = (obj, key = 'root', path = '') => {
|
||||||
|
const currentPath = path ? `${path}.${key}` : key
|
||||||
|
const dataInfo = getDataTypeInfo(obj)
|
||||||
|
|
||||||
|
const node = {
|
||||||
|
title: (
|
||||||
|
<Space size='small'>
|
||||||
|
<Tag color={dataInfo.color} size='small' style={{ margin: 0 }}>
|
||||||
|
{dataInfo.icon}
|
||||||
|
</Tag>
|
||||||
|
<Text strong>{key}</Text>
|
||||||
|
{showKeyCopy && (
|
||||||
|
<CopyButton text={key} tooltip={`Copy key: ${key}`} />
|
||||||
|
)}
|
||||||
|
<Text type='secondary'>({dataInfo.type})</Text>
|
||||||
|
{dataInfo.type !== 'object' && dataInfo.type !== 'array' && (
|
||||||
|
<>
|
||||||
|
<Text code>{formatValue(obj)}</Text>
|
||||||
|
{showValueCopy && (
|
||||||
|
<CopyButton
|
||||||
|
text={getCopyValue(obj)}
|
||||||
|
tooltip={`Copy ${dataInfo.type} value`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{(dataInfo.type === 'object' || dataInfo.type === 'array') &&
|
||||||
|
showValueCopy && (
|
||||||
|
<CopyButton
|
||||||
|
text={getCopyValue(obj)}
|
||||||
|
tooltip={`Copy ${dataInfo.type} as JSON`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
key: currentPath,
|
||||||
|
value: obj,
|
||||||
|
path: currentPath
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add children for objects and arrays
|
||||||
|
if (typeof obj === 'object' && obj !== null) {
|
||||||
|
if (Array.isArray(obj)) {
|
||||||
|
node.children = obj.map((item, index) =>
|
||||||
|
convertToTreeData(item, `[${index}]`, currentPath)
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
node.children = Object.entries(obj).map(([childKey, childValue]) =>
|
||||||
|
convertToTreeData(childValue, childKey, currentPath)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return node
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convert data to tree structure
|
||||||
|
const treeData = useMemo(() => {
|
||||||
|
if (!data) return []
|
||||||
|
|
||||||
|
if (typeof data === 'object' && data !== null) {
|
||||||
|
if (Array.isArray(data)) {
|
||||||
|
return [convertToTreeData(data, 'root')]
|
||||||
|
} else {
|
||||||
|
return [convertToTreeData(data, 'root')]
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Handle primitive values
|
||||||
|
const dataInfo = getDataTypeInfo(data)
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<Space size='small'>
|
||||||
|
<Tag color={dataInfo.color} size='small' style={{ margin: 0 }}>
|
||||||
|
{dataInfo.icon}
|
||||||
|
</Tag>
|
||||||
|
<Text strong>Value</Text>
|
||||||
|
<Text type='secondary'>({dataInfo.type})</Text>
|
||||||
|
<Text code>{formatValue(data)}</Text>
|
||||||
|
{showValueCopy && (
|
||||||
|
<CopyButton
|
||||||
|
text={getCopyValue(data)}
|
||||||
|
tooltip={`Copy ${dataInfo.type} value`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
key: 'root',
|
||||||
|
value: data,
|
||||||
|
path: 'root'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}, [data])
|
||||||
|
|
||||||
|
// Handle node selection
|
||||||
|
const handleSelect = (selectedKeys, { selected, selectedNodes }) => {
|
||||||
|
setSelectedKeys(selectedKeys)
|
||||||
|
if (onNodeSelect && selected && selectedNodes.length > 0) {
|
||||||
|
const node = selectedNodes[0]
|
||||||
|
onNodeSelect({
|
||||||
|
key: node.key,
|
||||||
|
value: node.value,
|
||||||
|
path: node.path
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle expand/collapse
|
||||||
|
const handleExpand = (keys) => {
|
||||||
|
setExpandedKeys(keys)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-expand all if requested
|
||||||
|
const getExpandedKeys = () => {
|
||||||
|
if (defaultExpandAll) {
|
||||||
|
return treeData.length > 0 ? getAllKeys(treeData[0]) : []
|
||||||
|
}
|
||||||
|
return expandedKeys
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to get all keys for auto-expand
|
||||||
|
const getAllKeys = (node) => {
|
||||||
|
let keys = [node.key]
|
||||||
|
if (node.children) {
|
||||||
|
node.children.forEach((child) => {
|
||||||
|
keys = keys.concat(getAllKeys(child))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return keys
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tree
|
||||||
|
rootStyle={{ background: 'transparent', ...style }}
|
||||||
|
treeData={treeData}
|
||||||
|
expandedKeys={getExpandedKeys()}
|
||||||
|
selectedKeys={selectedKeys}
|
||||||
|
onExpand={handleExpand}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
showLine={showLine}
|
||||||
|
showIcon={false}
|
||||||
|
blockNode
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
DataTree.propTypes = {
|
||||||
|
data: PropTypes.any.isRequired,
|
||||||
|
showLine: PropTypes.bool,
|
||||||
|
showValueCopy: PropTypes.bool,
|
||||||
|
showKeyCopy: PropTypes.bool,
|
||||||
|
defaultExpandAll: PropTypes.bool,
|
||||||
|
onNodeSelect: PropTypes.func,
|
||||||
|
style: PropTypes.object
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DataTree
|
||||||
Loading…
x
Reference in New Issue
Block a user