79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
|
import { TreeNodeInArray } from "react-simple-tree-menu";
|
||
|
|
import React from "react";
|
||
|
|
import styled from "styled-components";
|
||
|
|
|
||
|
|
const Key = styled.span`
|
||
|
|
color: #768896;
|
||
|
|
padding-right: 5px;
|
||
|
|
`;
|
||
|
|
const Value = styled.span<{ type: string }>`
|
||
|
|
color: ${props => {
|
||
|
|
switch (props.type) {
|
||
|
|
case "string":
|
||
|
|
return "#2E3D49";
|
||
|
|
case "number":
|
||
|
|
return props.theme.colors.error;
|
||
|
|
case "boolean":
|
||
|
|
return props.theme.colors.primary;
|
||
|
|
default:
|
||
|
|
return "#2E3D49";
|
||
|
|
}
|
||
|
|
}};
|
||
|
|
`;
|
||
|
|
|
||
|
|
export const transformToTreeStructure = (
|
||
|
|
dataTree: Record<string, any>,
|
||
|
|
names: string[],
|
||
|
|
parentPath?: string,
|
||
|
|
): TreeNodeInArray[] => {
|
||
|
|
return names.map(name => {
|
||
|
|
const currentPath = parentPath ? `${parentPath}.${name}` : name;
|
||
|
|
let nodes: TreeNodeInArray["nodes"] = [];
|
||
|
|
const child = dataTree[name];
|
||
|
|
let childType: string = typeof child;
|
||
|
|
let labelRender: React.ReactNode = name;
|
||
|
|
if (childType === "object") {
|
||
|
|
if (!Array.isArray(child)) {
|
||
|
|
nodes = transformToTreeStructure(
|
||
|
|
child,
|
||
|
|
Object.keys(child),
|
||
|
|
currentPath,
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
nodes = child.map((c, i) => ({
|
||
|
|
key: `[${i}]`,
|
||
|
|
path: `${currentPath}[${i}]`,
|
||
|
|
label: "",
|
||
|
|
labelRender: i.toString(),
|
||
|
|
nodes: transformToTreeStructure(
|
||
|
|
c,
|
||
|
|
Object.keys(c),
|
||
|
|
`${currentPath}[${i}]`,
|
||
|
|
),
|
||
|
|
}));
|
||
|
|
childType = "Array";
|
||
|
|
labelRender = `${name} {${child.length}}`;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
labelRender = (
|
||
|
|
<div>
|
||
|
|
<Key>{name}: </Key>
|
||
|
|
<Value type={childType}>
|
||
|
|
{childType === "string"
|
||
|
|
? `"${dataTree[name]}"`
|
||
|
|
: String(dataTree[name])}
|
||
|
|
</Value>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
key: name,
|
||
|
|
path: currentPath,
|
||
|
|
label: "",
|
||
|
|
labelRender,
|
||
|
|
nodes,
|
||
|
|
type: childType,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
};
|