flipper-plugin
Version:
Flipper Desktop plugin SDK and components
119 lines • 4.63 kB
JavaScript
;
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InspectorName = void 0;
const DataDescription_1 = require("./DataDescription");
const styled_1 = __importDefault(require("@emotion/styled"));
const utils_1 = require("./utils");
const react_1 = require("react");
const react_2 = __importDefault(require("react"));
const theme_1 = require("../theme");
exports.InspectorName = styled_1.default.span({
color: theme_1.theme.textColorPrimary,
});
exports.InspectorName.displayName = 'DataInspector:InspectorName';
const PreviewContainer = styled_1.default.span({
fontStyle: 'italic',
color: theme_1.theme.textColorSecondary,
[`${exports.InspectorName}`]: {
color: theme_1.theme.textColorSecondary,
},
});
PreviewContainer.displayName = 'DataPreview:PreviewContainer';
function intersperse(arr, sep) {
if (arr.length === 0) {
return [];
}
return arr.slice(1).reduce((xs, x) => {
return xs.concat([sep, x]);
}, [arr[0]]);
}
class DataPreview extends react_1.PureComponent {
previewSimpleValue(propValue) {
let propValueElement = null;
switch (typeof propValue) {
case 'object':
if (propValue === null)
propValueElement = react_2.default.createElement(DataDescription_1.NullValue, null, "null");
break;
case 'boolean':
propValueElement = react_2.default.createElement(DataDescription_1.BooleanValue, null, `${propValue}`);
break;
case 'number':
propValueElement = react_2.default.createElement(DataDescription_1.NumberValue, null, `${propValue}`);
break;
case 'bigint':
propValueElement = react_2.default.createElement(DataDescription_1.NumberValue, null, `${propValue}`);
break;
case 'string':
if (propValue.length <= 20) {
propValueElement = react_2.default.createElement(DataDescription_1.StringValue, null, propValue);
}
break;
}
return propValueElement;
}
render() {
const { depth, extractValue, path, type, value } = this.props;
if (type === 'array') {
return (react_2.default.createElement(PreviewContainer, null,
'[',
intersperse(value.map((element, index) => {
const res = extractValue(element, depth + 1, path);
if (!res) {
return null;
}
const { type, value } = res;
return (react_2.default.createElement(DataDescription_1.DataDescription, { key: index, type: type, value: value, setValue: null }));
}), ', '),
']'));
}
else if (type === 'date') {
return react_2.default.createElement("span", null, value.toString());
}
else if (type === 'object') {
const propertyNodes = [];
const keys = (0, utils_1.getSortedKeys)(value);
let i = 0;
for (const key of keys) {
let ellipsis;
i++;
if (i >= this.props.maxProperties) {
ellipsis = react_2.default.createElement("span", { key: 'ellipsis' }, "\u2026");
}
const propValueElement = this.previewSimpleValue(value[key]?.value ?? value[key]);
propertyNodes.push(react_2.default.createElement("span", { key: key },
react_2.default.createElement(exports.InspectorName, null,
key,
propValueElement ? `: ` : null,
propValueElement),
ellipsis));
if (ellipsis) {
break;
}
}
return (react_2.default.createElement(PreviewContainer, null,
'{',
intersperse(propertyNodes, ', '),
'}'));
}
else {
return null;
}
}
}
DataPreview.defaultProps = {
maxProperties: 5,
};
exports.default = DataPreview;
//# sourceMappingURL=DataPreview.js.map