mic-inspector
Version:
A react inspector which a most similar of Chorme DevTools inspector
40 lines (39 loc) • 1.75 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useMemo } from 'react';
import { useStyles } from './use-styles';
import { renderObjectSubs, useArrayInfo, Node, getObjectName } from './locale';
import { PropertyValue } from '../property-value';
/**
* Object value
* @param param0 ObjectValueProps
*/
export function ObjectValue(_a) {
var { className, value, preview, maxPropertyLength } = _a, props = __rest(_a, ["className", "value", "preview", "maxPropertyLength"]);
const [arraylike, length] = useArrayInfo(value);
const isNode = value ? value instanceof Node : false;
const name = useMemo(() => {
return getObjectName(value, isNode);
}, [value]);
return (React.createElement(PropertyValue, Object.assign({ className: useStyles(className), "data-node": isNode, "data-preview": !!preview, "data-arraylike": arraylike, "data-array-length": length }, props),
React.createElement("span", null,
name,
arraylike ? React.createElement("i", null,
"(",
length,
")") : null),
React.createElement("q", null, preview || isNode ?
(arraylike || isNode ?
'' :
'...') :
renderObjectSubs(value, arraylike, maxPropertyLength))));
}