Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
import { Component } from "resource://devtools/client/shared/vendor/react.mjs";
import * as dom from "resource://devtools/client/shared/vendor/react-dom-factories.mjs";
import PropTypes from "resource://devtools/client/shared/vendor/react-prop-types.mjs";
const { div, span } = dom;
const JSON_TYPES = ["object", "array", "string", "number", "boolean", "null"];
const defaultProps = {
items: [],
};
/**
* This template represents Bread-crumbs within 'JSON' panel.
*/
class JsonBreadcrumb extends Component {
static get propTypes() {
return {
items: PropTypes.arrayOf(
PropTypes.shape({
type: PropTypes.oneOf(JSON_TYPES).isRequired,
text: PropTypes.string.isRequired,
})
),
};
}
static get defaultProps() {
return defaultProps;
}
renderBreadCrumb() {
const { items } = this.props;
return items.map((item, index) => {
return [
div(
{ key: index, className: "breadcrumb-item" },
span({ className: `breadcrumb-icon breadcrumb-icon-${item.type}` }),
span({ className: "breadcrumb-value" }, item.text)
),
index !== items.length - 1 &&
div({ className: "breadcrumb-separator" }),
];
});
}
render() {
if (!Array.isArray(this.props.items) || this.props.items.length === 0) {
return null;
}
return div(
{ className: "json-breadcrumb toolbar" },
this.renderBreadCrumb()
);
}
}
// Exports from this module
export default { JsonBreadcrumb };