kea-react/src/jsonview/logic.ts

Componentes comunes de react

import { Tree } from "../treeview/index";

export type JsonTreeView = Tree<JsonValue>;
export type SimpleValue = string | number | boolean;
export type JsonNodeType = "string" | "number" | "boolean" | "null" | "object" | "function" | "array";

/**Convierte un objeto a un arbol que se puede visualizar con el tree view */
export function valueToJsonTreeView(obj: any): JsonTreeView {
    function jsonTreeToView(tree: JsonTree): JsonTreeView {
        const { key, value, children } = tree;
        return { key, value, children: children.map(jsonTreeToView) };
    }
    return jsonTreeToView(valueToJsonTree(obj));
}

type ComplexValue = SimpleValue | null | undefined | {} | Function;
interface JsonTree {
    /**Nombre de la propiedad */
    key: string | number;
    value: JsonValue;
    /*Hijos*/
    children: JsonTree[];
}

export interface JsonValue {
    value: SimpleValue | null;
    type: JsonNodeType;
    /**Determina la naturaleza de los hijos de este elemento*/
    tree: "leaf" | "object" | "array";
    /**Cantidad de hijos */
    count: number;
}

function valueToJsonTree(value: ComplexValue): JsonTree {
    const jvalue = valueToJsonValue(value);

    const children: JsonTree[] = (() => {
        switch (jvalue.tree) {
            case "leaf":
                return [];
            case "object": {
                return Object.keys(value!).map(key => ({ ...valueToJsonTree((value as {})[key]), key: key }));
            }
            case "array": {
                const arr = value as ArrayLike<any>;
                const ret: JsonTree[] = [];
                for (let i = 0; i < arr.length; i++) {
                    ret.push({ ...valueToJsonTree(arr[i]), key: i });
                }
                return ret;
            }
        }
    })();

    return {
        value: jvalue,
        children,
        key: ""
    };
}

function valueToJsonValue(value: ComplexValue): JsonValue {
    if (value == null) {
        return { value: null, type: "null", tree: "leaf", count: 0 };
    };
    if (typeof value == "number" || typeof value == "string" || typeof value == "boolean") {
        return {
            value: value,
            type: typeof value as JsonNodeType,
            tree: "leaf",
            count: 0
        };
    } else if (typeof value == "function") {
        return { value: null, type: "function", tree: "leaf", count: 0 };
    } else if (isArray(value)) {
        return { value: null, type: "array", tree: "array", count: value.length }
    } else {
        const keys = Object.keys(value);
        return { value: null, type: "object", tree: "object", count: keys.length };
    }
}

function isArray(obj: any): obj is ArrayLike<any> {
    const arr = obj as ArrayLike<any>;
    return arr.length != null;
}