mic-inspector
Version:
A react inspector which a most similar of Chorme DevTools inspector
42 lines (41 loc) • 2.2 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, { useState } from 'react';
import { renderValue } from './locale';
import { useStyles } from './use-styles';
import { isObjectOrFunction } from '../property-value/locale';
import { NamedDescriptor } from '../named-descriptor';
import { DescriptorValueType } from '../named-descriptor/types';
import { PropertyName } from '../property-name';
import { InlineComponent } from 'mic-global';
import { Properties } from '../properties';
/**
* Object Proeprty
* @param props PropertyProps
*/
export function Property(props) {
const _a = props, { className, preview, isNonenumerable, name, value, separator, defaultExpand = false } = _a, ps = __rest(_a, ["className", "preview", "isNonenumerable", "name", "value", "separator", "defaultExpand"]);
const [expand, setExpand] = useState(defaultExpand);
const _b = ps, { descriptor = new NamedDescriptor(null, name, value, DescriptorValueType.Normal, !isNonenumerable) } = _b, p = __rest(_b, ["descriptor"]);
const { fullname, nameType, value: descValue, enumerable } = descriptor;
const expandable = !preview && isObjectOrFunction(descValue);
const onToggle = () => {
setExpand(!expand);
};
return (React.createElement(InlineComponent, Object.assign({ className: useStyles(className), "data-expand": expand, "data-expandable": expandable }, p),
React.createElement("q", { onClick: onToggle },
React.createElement(PropertyName, { name: fullname, separator: separator, type: nameType, dimmed: !enumerable }),
renderValue(descriptor, preview)),
expandable && expand ?
React.createElement(Properties, { owner: descValue, preview: preview }) :
null));
}