react-json-formatter
Version:
Formatting json data to JSX of React
140 lines (139 loc) • 5.76 kB
JavaScript
(function(global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory(require("react")) : typeof define === "function" && define.amd ? define(["react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, global["react-json-formatter"] = factory(global.React));
})(this, function(React) {
"use strict";
function JsonFormatter({
json,
jsonClassName: {
booleanClassName = "",
braceClassName = "",
bracketClassName = "",
className = "",
commaClassName = "",
falseClassName = "",
nullClassName = "",
numberClassName = "",
propertyClassName = "",
stringClassName = "",
tabSpaceClassName = "",
trueClassName = ""
} = {},
jsonStyle: {
booleanStyle = {},
braceStyle = {},
bracketStyle = {},
commaStyle = {},
falseStyle = {},
nullStyle = {},
numberStyle = {},
propertyStyle = {},
stringStyle = {},
style = {},
tabSpaceStyle = {},
trueStyle = {}
} = {},
tabWith = 2
}) {
const jsonObject = React.useMemo(() => {
if (typeof json === "string") {
try {
return JSON.parse(json);
} catch (error) {
return json;
}
}
return json;
}, [json]);
const repeatTabSpace = React.useCallback(
(times) => /* @__PURE__ */ React.createElement("span", { className: tabSpaceClassName, style: tabSpaceStyle }, " ".repeat(tabWith * times)),
[tabSpaceClassName, tabSpaceStyle, tabWith]
);
const categorize = React.useCallback(
(data, tabSpaceRepeatTimes) => {
switch (Object.prototype.toString.call(data)) {
case "[object Number]": {
return /* @__PURE__ */ React.createElement("span", { className: numberClassName, style: numberStyle }, data);
}
case "[object String]": {
return /* @__PURE__ */ React.createElement(
"span",
{
className: stringClassName,
style: stringStyle
},
`"${data}"`
);
}
case "[object Boolean]": {
const dataJSX = data ? /* @__PURE__ */ React.createElement(
"span",
{
className: `${booleanClassName} ${trueClassName}`,
style: { ...booleanStyle, ...trueStyle }
},
"true"
) : /* @__PURE__ */ React.createElement(
"span",
{
className: `${booleanClassName} ${falseClassName}`,
style: { ...booleanStyle, ...falseStyle }
},
"false"
);
return dataJSX;
}
case "[object Object]": {
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: braceClassName, style: braceStyle }, "{"), /* @__PURE__ */ React.createElement("br", null), Object.entries(data).map(
([key, value], index, list) => /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, repeatTabSpace(tabSpaceRepeatTimes + 1), /* @__PURE__ */ React.createElement(
"span",
{
className: propertyClassName,
style: propertyStyle
},
`"${key}": `
), categorize(value, tabSpaceRepeatTimes + 1), index !== list.length - 1 && /* @__PURE__ */ React.createElement("span", { className: commaClassName, style: commaStyle }, ","), /* @__PURE__ */ React.createElement("br", null))
), repeatTabSpace(tabSpaceRepeatTimes), /* @__PURE__ */ React.createElement("span", { className: braceClassName, style: braceStyle }, "}"));
}
case "[object Array]": {
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: bracketClassName, style: bracketStyle }, "["), /* @__PURE__ */ React.createElement("br", null), data.map((value, index, list) => /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, repeatTabSpace(tabSpaceRepeatTimes + 1), categorize(value, tabSpaceRepeatTimes + 1), index !== list.length - 1 && /* @__PURE__ */ React.createElement("span", { className: commaClassName, style: commaStyle }, ","), /* @__PURE__ */ React.createElement("br", null))), repeatTabSpace(tabSpaceRepeatTimes), /* @__PURE__ */ React.createElement("span", { className: bracketClassName, style: bracketStyle }, "]"));
}
case "[object Null]": {
return /* @__PURE__ */ React.createElement("span", { className: nullClassName, style: nullStyle }, "null");
}
default:
return /* @__PURE__ */ React.createElement("span", null, "type error");
}
},
[
booleanClassName,
booleanStyle,
braceClassName,
braceStyle,
bracketClassName,
bracketStyle,
commaClassName,
commaStyle,
falseClassName,
falseStyle,
nullClassName,
nullStyle,
numberClassName,
numberStyle,
propertyClassName,
propertyStyle,
repeatTabSpace,
stringClassName,
stringStyle,
trueClassName,
trueStyle
]
);
const result = React.useMemo(
() => categorize(jsonObject, 0),
[categorize, jsonObject]
);
return /* @__PURE__ */ React.createElement("div", { className, style }, /* @__PURE__ */ React.createElement("div", null, result));
}
return JsonFormatter;
});
//# sourceMappingURL=index.umd.cjs.map