react-inspector - npm Package Compare versions

.prettierrc.json

lib/styles/index.js

lib/styles/styles.js

lib/tree-view/ExpandedPathsContext.js

lib/utils/objectPrototype.js

180

lib/dom-inspector/DOMInspector.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,156 +6,64 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _extends2 = require('babel-runtime/helpers/extends');
		var _react = _interopRequireDefault(require("react"));

		var _extends3 = _interopRequireDefault(_extends2);
		var _propTypes = _interopRequireDefault(require("prop-types"));

		var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
		var _DOMNodePreview = _interopRequireDefault(require("./DOMNodePreview"));

		var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
		var _TreeView = _interopRequireDefault(require("../tree-view/TreeView"));

		var _createClass2 = require('babel-runtime/helpers/createClass');
		var _shouldInline = _interopRequireDefault(require("./shouldInline"));

		var _createClass3 = _interopRequireDefault(_createClass2);
		var _styles = require("../styles");

		var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

		var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

		var _inherits2 = require('babel-runtime/helpers/inherits');

		var _inherits3 = _interopRequireDefault(_inherits2);

		var _regenerator = require('babel-runtime/regenerator');

		var _regenerator2 = _interopRequireDefault(_regenerator);

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _DOMNodePreview = require('./DOMNodePreview');

		var _DOMNodePreview2 = _interopRequireDefault(_DOMNodePreview);

		var _TreeView = require('../tree-view/TreeView');

		var _TreeView2 = _interopRequireDefault(_TreeView);

		var _shouldInline = require('./shouldInline');

		var _shouldInline2 = _interopRequireDefault(_shouldInline);

		var _ThemeProvider = require('../styles/ThemeProvider');

		var _ThemeProvider2 = _interopRequireDefault(_ThemeProvider);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var domIterator = /#__PURE__/_regenerator2.default.mark(function domIterator(data) {
		var textInlined, i, node;
		return _regenerator2.default.wrap(function domIterator$(_context) {
		while (1) {
		switch (_context.prev = _context.next) {
		case 0:
		if (!(data && data.childNodes)) {
		_context.next = 17;
		break;
		}
		function _extends() { _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		textInlined = (0, _shouldInline2.default)(data);
		const domIterator = function* domIterator(data) {
		if (data && data.childNodes) {
		const textInlined = (0, _shouldInline.default)(data);

		if (!textInlined) {
		_context.next = 4;
		break;
		}
		if (textInlined) {
		return;
		}

		return _context.abrupt('return');
		for (let i = 0; i < data.childNodes.length; i++) {
		const node = data.childNodes[i];
		if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().length === 0) continue;
		yield {
		name: `${node.tagName}[${i}]`,
		data: node
		};
		} // at least 1 child node

		case 4:
		i = 0;

		case 5:
		if (!(i < data.childNodes.length)) {
		_context.next = 14;
		break;
		}

		node = data.childNodes[i];

		if (!(node.nodeType === Node.TEXT_NODE && node.textContent.trim().length === 0)) {
		_context.next = 9;
		break;
		}

		return _context.abrupt('continue', 11);

		case 9:
		_context.next = 11;
		return {
		name: node.tagName + '[' + i + ']',
		data: node
		};

		case 11:
		i++;
		_context.next = 5;
		break;

		case 14:
		if (!data.tagName) {
		_context.next = 17;
		break;
		}

		_context.next = 17;
		return {
		name: 'CLOSE_TAG',
		data: {
		tagName: data.tagName
		},
		isCloseTag: true
		};

		case 17:
		case 'end':
		return _context.stop();
		}
		if (data.tagName) {
		yield {
		name: 'CLOSE_TAG',
		data: {
		tagName: data.tagName
		},
		isCloseTag: true
		};
		}
		}, domIterator, this);
		});

		var DOMInspector = function (_Component) {
		(0, _inherits3.default)(DOMInspector, _Component);

		function DOMInspector() {
		(0, _classCallCheck3.default)(this, DOMInspector);
		return (0, _possibleConstructorReturn3.default)(this, (DOMInspector.__proto__ \|\| Object.getPrototypeOf(DOMInspector)).apply(this, arguments));
		}
		};

		(0, _createClass3.default)(DOMInspector, [{
		key: 'render',
		value: function render() {
		var nodeRenderer = _DOMNodePreview2.default;
		const DOMInspector = props => {
		return _react.default.createElement(_TreeView.default, _extends({
		nodeRenderer: _DOMNodePreview.default,
		dataIterator: domIterator
		}, props));
		};

		return _react2.default.createElement(
		_ThemeProvider2.default,
		{ theme: this.props.theme },
		_react2.default.createElement(_TreeView2.default, (0, _extends3.default)({ nodeRenderer: nodeRenderer, dataIterator: domIterator }, this.props))
		);
		}
		}]);
		return DOMInspector;
		}(_react.Component);

		DOMInspector.propTypes = {
		/** The DOM Node to inspect */
		data: _propTypes2.default.object.isRequired
		// The DOM Node to inspect
		data: _propTypes.default.object.isRequired
		};
		DOMInspector.defaultProps = {
		theme: 'chromeLight'
		};
		exports.default = DOMInspector;

		var _default = (0, _styles.themeAcceptor)(DOMInspector);

		exports.default = _default;

231

lib/dom-inspector/DOMNodePreview.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,85 +6,58 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _propTypes = _interopRequireDefault(require("prop-types"));

		var _propTypes = require('prop-types');
		var _styles = require("../styles");

		var _propTypes2 = _interopRequireDefault(_propTypes);
		var _shouldInline = _interopRequireDefault(require("./shouldInline"));

		var _createStyles = require('../styles/createStyles');
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var _createStyles2 = _interopRequireDefault(_createStyles);
		function _extends() { _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var _shouldInline = require('./shouldInline');

		var _shouldInline2 = _interopRequireDefault(_shouldInline);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var OpenTag = function OpenTag(_ref) {
		var tagName = _ref.tagName,
		const OpenTag = (_ref) => {
		let tagName = _ref.tagName,
		attributes = _ref.attributes,
		styles = _ref.styles;
		return _react.default.createElement("span", {
		style: styles.base
		}, '<', _react.default.createElement("span", {
		style: styles.tagName
		}, tagName), (() => {
		if (attributes) {
		let attributeNodes = [];

		return _react2.default.createElement(
		'span',
		{ style: styles.base },
		'<',
		_react2.default.createElement(
		'span',
		{ style: styles.tagName },
		tagName
		),
		function () {
		if (attributes) {
		var attributeNodes = [];
		for (var i = 0; i < attributes.length; i++) {
		var attribute = attributes[i];
		attributeNodes.push(_react2.default.createElement(
		'span',
		{ key: i },
		' ',
		_react2.default.createElement(
		'span',
		{ style: styles.htmlAttributeName },
		attribute.name
		),
		'="',
		_react2.default.createElement(
		'span',
		{ style: styles.htmlAttributeValue },
		attribute.value
		),
		'"'
		));
		}
		return attributeNodes;
		for (let i = 0; i < attributes.length; i++) {
		const attribute = attributes[i];
		attributeNodes.push(_react.default.createElement("span", {
		key: i
		}, ' ', _react.default.createElement("span", {
		style: styles.htmlAttributeName
		}, attribute.name), '="', _react.default.createElement("span", {
		style: styles.htmlAttributeValue
		}, attribute.value), '"'));
		}
		}(),
		'>'
		);
		};

		// isChildNode style={{ marginLeft: -12 /* hack: offset placeholder */ }}
		var CloseTag = function CloseTag(_ref2) {
		var tagName = _ref2.tagName,
		return attributeNodes;
		}
		})(), '>');
		}; // isChildNode style={{ marginLeft: -12 /* hack: offset placeholder */ }}


		const CloseTag = (_ref2) => {
		let tagName = _ref2.tagName,
		_ref2$isChildNode = _ref2.isChildNode,
		isChildNode = _ref2$isChildNode === undefined ? false : _ref2$isChildNode,
		isChildNode = _ref2$isChildNode === void 0 ? false : _ref2$isChildNode,
		styles = _ref2.styles;
		return _react2.default.createElement(
		'span',
		{ style: Object.assign({}, styles.base, isChildNode && styles.offsetLeft) },
		'</',
		_react2.default.createElement(
		'span',
		{ style: styles.tagName },
		tagName
		),
		'>'
		);
		return _react.default.createElement("span", {
		style: _extends({}, styles.base, isChildNode && styles.offsetLeft)
		}, '</', _react.default.createElement("span", {
		style: styles.tagName
		}, tagName), '>');
		};

		var nameByNodeType = {
		const nameByNodeType = {
		1: 'ELEMENT_NODE',
		@@ -95,16 +68,19 @@ 3: 'TEXT_NODE',
		9: 'DOCUMENT_NODE',
		10: 'DOCUMENT_TYPE_NODE', // http://stackoverflow.com/questions/6088972/get-doctype-of-an-html-as-string-with-javascript
		10: 'DOCUMENT_TYPE_NODE',
		// http://stackoverflow.com/questions/6088972/get-doctype-of-an-html-as-string-with-javascript
		11: 'DOCUMENT_FRAGMENT_NODE'
		};

		var DOMNodePreview = function DOMNodePreview(_ref3, _ref4) {
		var isCloseTag = _ref3.isCloseTag,
		const DOMNodePreview = (_ref3) => {
		let isCloseTag = _ref3.isCloseTag,
		data = _ref3.data,
		expanded = _ref3.expanded;
		var theme = _ref4.theme;
		const styles = (0, _styles.useStyles)('DOMNodePreview');

		var styles = (0, _createStyles2.default)('DOMNodePreview', theme);

		if (isCloseTag) {
		return _react2.default.createElement(CloseTag, { styles: styles.htmlCloseTag, isChildNode: true, tagName: data.tagName });
		return _react.default.createElement(CloseTag, {
		styles: styles.htmlCloseTag,
		isChildNode: true,
		tagName: data.tagName
		});
		}
		@@ -114,68 +90,38 @@
		case Node.ELEMENT_NODE:
		return _react2.default.createElement(
		'span',
		null,
		_react2.default.createElement(OpenTag, {
		tagName: data.tagName,
		attributes: data.attributes,
		styles: styles.htmlOpenTag
		}),
		(0, _shouldInline2.default)(data) ? data.textContent : !expanded && '…',
		!expanded && _react2.default.createElement(CloseTag, { tagName: data.tagName, styles: styles.htmlCloseTag })
		);
		return _react.default.createElement("span", null, _react.default.createElement(OpenTag, {
		tagName: data.tagName,
		attributes: data.attributes,
		styles: styles.htmlOpenTag
		}), (0, _shouldInline.default)(data) ? data.textContent : !expanded && '…', !expanded && _react.default.createElement(CloseTag, {
		tagName: data.tagName,
		styles: styles.htmlCloseTag
		}));

		case Node.TEXT_NODE:
		return _react2.default.createElement(
		'span',
		null,
		data.textContent
		);
		return _react.default.createElement("span", null, data.textContent);

		case Node.CDATA_SECTION_NODE:
		return _react2.default.createElement(
		'span',
		null,
		'<![CDATA[' + data.textContent + ']]>'
		);
		return _react.default.createElement("span", null, '<![CDATA[' + data.textContent + ']]>');

		case Node.COMMENT_NODE:
		return _react2.default.createElement(
		'span',
		{ style: styles.htmlComment },
		'<!--',
		data.textContent,
		'-->'
		);
		return _react.default.createElement("span", {
		style: styles.htmlComment
		}, '<!--', data.textContent, '-->');

		case Node.PROCESSING_INSTRUCTION_NODE:
		return _react2.default.createElement(
		'span',
		null,
		data.nodeName
		);
		return _react.default.createElement("span", null, data.nodeName);

		case Node.DOCUMENT_TYPE_NODE:
		return _react2.default.createElement(
		'span',
		{ style: styles.htmlDoctype },
		'<!DOCTYPE ',
		data.name,
		data.publicId ? ' PUBLIC "' + data.publicId + '"' : '',
		!data.publicId && data.systemId ? ' SYSTEM' : '',
		data.systemId ? ' "' + data.systemId + '"' : '',
		'>'
		);
		return _react.default.createElement("span", {
		style: styles.htmlDoctype
		}, '<!DOCTYPE ', data.name, data.publicId ? ` PUBLIC "${data.publicId}"` : '', !data.publicId && data.systemId ? ' SYSTEM' : '', data.systemId ? ` "${data.systemId}"` : '', '>');

		case Node.DOCUMENT_NODE:
		return _react2.default.createElement(
		'span',
		null,
		data.nodeName
		);
		return _react.default.createElement("span", null, data.nodeName);

		case Node.DOCUMENT_FRAGMENT_NODE:
		return _react2.default.createElement(
		'span',
		null,
		data.nodeName
		);
		return _react.default.createElement("span", null, data.nodeName);

		default:
		return _react2.default.createElement(
		'span',
		null,
		nameByNodeType[data.nodeType]
		);
		return _react.default.createElement("span", null, nameByNodeType[data.nodeType]);
		}
		@@ -186,15 +132,14 @@ };
		/** If true, just render a close tag */
		isCloseTag: _propTypes2.default.bool,
		isCloseTag: _propTypes.default.bool,

		/** */
		name: _propTypes2.default.string,
		name: _propTypes.default.string,

		/** The DOM Node */
		data: _propTypes2.default.object.isRequired,
		data: _propTypes.default.object.isRequired,

		/** Whether the DOM node has been expanded. */
		expanded: _propTypes2.default.bool.isRequired
		expanded: _propTypes.default.bool.isRequired
		};

		DOMNodePreview.contextTypes = {
		theme: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired
		};

		exports.default = DOMNodePreview;
		var _default = DOMNodePreview;
		exports.default = _default;

10

lib/dom-inspector/shouldInline.js

		@@ -6,8 +6,8 @@ "use strict";
		});
		var TEXT_NODE_MAX_INLINE_CHARS = 80;
		exports.default = void 0;
		const TEXT_NODE_MAX_INLINE_CHARS = 80;

		var shouldInline = function shouldInline(data) {
		return data.childNodes.length === 0 \|\| data.childNodes.length === 1 && data.childNodes[0].nodeType === Node.TEXT_NODE && data.textContent.length < TEXT_NODE_MAX_INLINE_CHARS;
		};
		const shouldInline = data => data.childNodes.length === 0 \|\| data.childNodes.length === 1 && data.childNodes[0].nodeType === Node.TEXT_NODE && data.textContent.length < TEXT_NODE_MAX_INLINE_CHARS;

		exports.default = shouldInline;
		var _default = shouldInline;
		exports.default = _default;

146

lib/index.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,15 +6,3 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.Inspector = exports.ObjectName = exports.ObjectValue = exports.ObjectRootLabel = exports.ObjectLabel = exports.DOMInspector = exports.TableInspector = exports.ObjectInspector = exports.chromeDark = exports.chromeLight = undefined;

		var _extends2 = require('babel-runtime/helpers/extends');

		var _extends3 = _interopRequireDefault(_extends2);

		var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

		var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

		var _themes = require('./styles/themes');

		Object.defineProperty(exports, 'chromeLight', {
		Object.defineProperty(exports, "chromeLight", {
		enumerable: true,
		@@ -25,3 +13,3 @@ get: function get() {
		});
		Object.defineProperty(exports, 'chromeDark', {
		Object.defineProperty(exports, "chromeDark", {
		enumerable: true,
		@@ -32,77 +20,103 @@ get: function get() {
		});
		Object.defineProperty(exports, "ObjectInspector", {
		enumerable: true,
		get: function get() {
		return _ObjectInspector2.default;
		}
		});
		Object.defineProperty(exports, "TableInspector", {
		enumerable: true,
		get: function get() {
		return _TableInspector2.default;
		}
		});
		Object.defineProperty(exports, "DOMInspector", {
		enumerable: true,
		get: function get() {
		return _DOMInspector2.default;
		}
		});
		Object.defineProperty(exports, "ObjectLabel", {
		enumerable: true,
		get: function get() {
		return _ObjectLabel2.default;
		}
		});
		Object.defineProperty(exports, "ObjectRootLabel", {
		enumerable: true,
		get: function get() {
		return _ObjectRootLabel2.default;
		}
		});
		Object.defineProperty(exports, "ObjectValue", {
		enumerable: true,
		get: function get() {
		return _ObjectValue2.default;
		}
		});
		Object.defineProperty(exports, "ObjectName", {
		enumerable: true,
		get: function get() {
		return _ObjectName2.default;
		}
		});
		exports.default = exports.Inspector = void 0;

		var _ObjectInspector2 = require('./object-inspector/ObjectInspector');
		var _themes = require("./styles/themes");

		var _ObjectInspector3 = _interopRequireDefault(_ObjectInspector2);
		var _ObjectInspector2 = _interopRequireDefault(require("./object-inspector/ObjectInspector"));

		var _TableInspector2 = require('./table-inspector/TableInspector');
		var _TableInspector2 = _interopRequireDefault(require("./table-inspector/TableInspector"));

		var _TableInspector3 = _interopRequireDefault(_TableInspector2);
		var _DOMInspector2 = _interopRequireDefault(require("./dom-inspector/DOMInspector"));

		var _DOMInspector2 = require('./dom-inspector/DOMInspector');
		var _ObjectLabel2 = _interopRequireDefault(require("./object-inspector/ObjectLabel"));

		var _DOMInspector3 = _interopRequireDefault(_DOMInspector2);
		var _ObjectRootLabel2 = _interopRequireDefault(require("./object-inspector/ObjectRootLabel"));

		var _ObjectLabel2 = require('./object-inspector/ObjectLabel');
		var _ObjectValue2 = _interopRequireDefault(require("./object/ObjectValue"));

		var _ObjectLabel3 = _interopRequireDefault(_ObjectLabel2);
		var _ObjectName2 = _interopRequireDefault(require("./object/ObjectName"));

		var _ObjectRootLabel2 = require('./object-inspector/ObjectRootLabel');
		var _react = _interopRequireDefault(require("react"));

		var _ObjectRootLabel3 = _interopRequireDefault(_ObjectRootLabel2);
		var _propTypes = _interopRequireDefault(require("prop-types"));

		var _ObjectValue2 = require('./object/ObjectValue');
		var _isDom = _interopRequireDefault(require("is-dom"));

		var _ObjectValue3 = _interopRequireDefault(_ObjectValue2);
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var _ObjectName2 = require('./object/ObjectName');
		function _extends() { _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var _ObjectName3 = _interopRequireDefault(_ObjectName2);
		function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

		var _react = require('react');
		function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _isDom = require('is-dom');

		var _isDom2 = _interopRequireDefault(_isDom);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		exports.ObjectInspector = _ObjectInspector3.default;
		exports.TableInspector = _TableInspector3.default;
		exports.DOMInspector = _DOMInspector3.default;
		exports.ObjectLabel = _ObjectLabel3.default;
		exports.ObjectRootLabel = _ObjectRootLabel3.default;
		exports.ObjectValue = _ObjectValue3.default;
		exports.ObjectName = _ObjectName3.default;

		// Wrapping the inspectors

		var Inspector = function Inspector(_ref) {
		var _ref$table = _ref.table,
		table = _ref$table === undefined ? false : _ref$table,
		const Inspector = (_ref) => {
		let _ref$table = _ref.table,
		table = _ref$table === void 0 ? false : _ref$table,
		data = _ref.data,
		rest = (0, _objectWithoutProperties3.default)(_ref, ['table', 'data']);
		rest = _objectWithoutProperties(_ref, ["table", "data"]);

		if (table) {
		return _react2.default.createElement(_TableInspector3.default, (0, _extends3.default)({ data: data }, rest));
		return _react.default.createElement(_TableInspector2.default, _extends({
		data: data
		}, rest));
		}

		if ((0, _isDom2.default)(data)) return _react2.default.createElement(_DOMInspector3.default, (0, _extends3.default)({ data: data }, rest));

		return _react2.default.createElement(_ObjectInspector3.default, (0, _extends3.default)({ data: data }, rest));
		if ((0, _isDom.default)(data)) return _react.default.createElement(_DOMInspector2.default, _extends({
		data: data
		}, rest));
		return _react.default.createElement(_ObjectInspector2.default, _extends({
		data: data
		}, rest));
		};

		exports.Inspector = Inspector;
		Inspector.propTypes = {
		data: _propTypes2.default.any,
		name: _propTypes2.default.string,
		table: _propTypes2.default.bool
		data: _propTypes.default.any,
		name: _propTypes.default.string,
		table: _propTypes.default.bool
		};

		exports.Inspector = Inspector;
		exports.default = Inspector;
		var _default = Inspector;
		exports.default = _default;

435

lib/object-inspector/ObjectInspector.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,304 +6,113 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _extends2 = require('babel-runtime/helpers/extends');
		var _react = _interopRequireDefault(require("react"));

		var _extends3 = _interopRequireDefault(_extends2);
		var _propTypes = _interopRequireDefault(require("prop-types"));

		var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
		var _TreeView = _interopRequireDefault(require("../tree-view/TreeView"));

		var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
		var _ObjectRootLabel = _interopRequireDefault(require("./ObjectRootLabel"));

		var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
		var _ObjectLabel = _interopRequireDefault(require("./ObjectLabel"));

		var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
		var _objectPrototype = require("../utils/objectPrototype");

		var _createClass2 = require('babel-runtime/helpers/createClass');
		var _styles = require("../styles");

		var _createClass3 = _interopRequireDefault(_createClass2);

		var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

		var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

		var _inherits2 = require('babel-runtime/helpers/inherits');

		var _inherits3 = _interopRequireDefault(_inherits2);

		var _regenerator = require('babel-runtime/regenerator');

		var _regenerator2 = _interopRequireDefault(_regenerator);

		var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

		var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

		var _typeof2 = require('babel-runtime/helpers/typeof');

		var _typeof3 = _interopRequireDefault(_typeof2);

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _TreeView = require('../tree-view/TreeView');

		var _TreeView2 = _interopRequireDefault(_TreeView);

		var _ObjectRootLabel = require('./ObjectRootLabel');

		var _ObjectRootLabel2 = _interopRequireDefault(_ObjectRootLabel);

		var _ObjectLabel = require('./ObjectLabel');

		var _ObjectLabel2 = _interopRequireDefault(_ObjectLabel);

		var _ThemeProvider = require('../styles/ThemeProvider');

		var _ThemeProvider2 = _interopRequireDefault(_ThemeProvider);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var createIterator = function createIterator(showNonenumerable, sortObjectKeys) {
		var objectIterator = /#__PURE__/_regenerator2.default.mark(function objectIterator(data) {
		var shouldIterate, dataIsArray, i, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, entry, _entry, k, v, keys, _iteratorNormalCompletion2, _didIteratorError2, _iteratorError2, _iterator2, _step2, propertyName, propertyValue, _propertyValue;
		function _extends() { _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		return _regenerator2.default.wrap(function objectIterator$(_context) {
		while (1) {
		switch (_context.prev = _context.next) {
		case 0:
		shouldIterate = (typeof data === 'undefined' ? 'undefined' : (0, _typeof3.default)(data)) === 'object' && data !== null \|\| typeof data === 'function';
		function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

		if (shouldIterate) {
		_context.next = 3;
		break;
		}
		function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

		return _context.abrupt('return');
		function _slicedToArray(arr, i) { return _arrayWithHoles(arr) \|\| _iterableToArrayLimit(arr, i) \|\| _nonIterableRest(); }

		case 3:
		dataIsArray = Array.isArray(data);
		function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

		// iterable objects (except arrays)
		function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

		if (!(!dataIsArray && data[Symbol.iterator])) {
		_context.next = 41;
		break;
		}
		function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

		i = 0;
		_iteratorNormalCompletion = true;
		_didIteratorError = false;
		_iteratorError = undefined;
		_context.prev = 9;
		_iterator = data[Symbol.iterator]();
		const createIterator = (showNonenumerable, sortObjectKeys) => {
		const objectIterator = function* objectIterator(data) {
		const shouldIterate = typeof data === 'object' && data !== null \|\| typeof data === 'function';
		if (!shouldIterate) return;
		const dataIsArray = Array.isArray(data); // iterable objects (except arrays)

		case 11:
		if (_iteratorNormalCompletion = (_step = _iterator.next()).done) {
		_context.next = 25;
		break;
		}
		if (!dataIsArray && data[Symbol.iterator]) {
		let i = 0;

		entry = _step.value;
		for (let entry of data) {
		if (Array.isArray(entry) && entry.length === 2) {
		const _entry = _slicedToArray(entry, 2),
		k = _entry[0],
		v = _entry[1];

		if (!(Array.isArray(entry) && entry.length === 2)) {
		_context.next = 19;
		break;
		}
		yield {
		name: k,
		data: v
		};
		} else {
		yield {
		name: i.toString(),
		data: entry
		};
		}

		_entry = (0, _slicedToArray3.default)(entry, 2), k = _entry[0], v = _entry[1];
		_context.next = 17;
		return {
		name: k,
		data: v
		};
		i++;
		}
		} else {
		const keys = Object.getOwnPropertyNames(data);

		case 17:
		_context.next = 21;
		break;
		if (sortObjectKeys === true && !dataIsArray) {
		// Array keys should not be sorted in alphabetical order
		keys.sort();
		} else if (typeof sortObjectKeys === 'function') {
		keys.sort(sortObjectKeys);
		}

		case 19:
		_context.next = 21;
		return {
		name: i.toString(),
		data: entry
		};
		for (let propertyName of keys) {
		if (_objectPrototype.propertyIsEnumerable.call(data, propertyName)) {
		const propertyValue = data[propertyName];
		yield {
		name: propertyName \|\| `""`,
		data: propertyValue
		};
		} else if (showNonenumerable) {
		// To work around the error (happens some time when propertyName === 'caller' \|\| propertyName === 'arguments')
		// 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context
		// http://stackoverflow.com/questions/31921189/caller-and-arguments-are-restricted-function-properties-and-cannot-be-access
		let propertyValue;

		case 21:
		i++;

		case 22:
		_iteratorNormalCompletion = true;
		_context.next = 11;
		break;

		case 25:
		_context.next = 31;
		break;

		case 27:
		_context.prev = 27;
		_context.t0 = _context['catch'](9);
		_didIteratorError = true;
		_iteratorError = _context.t0;

		case 31:
		_context.prev = 31;
		_context.prev = 32;

		if (!_iteratorNormalCompletion && _iterator.return) {
		_iterator.return();
		}

		case 34:
		_context.prev = 34;

		if (!_didIteratorError) {
		_context.next = 37;
		break;
		}

		throw _iteratorError;

		case 37:
		return _context.finish(34);

		case 38:
		return _context.finish(31);

		case 39:
		_context.next = 82;
		break;

		case 41:
		keys = Object.getOwnPropertyNames(data);

		if (sortObjectKeys === true && !dataIsArray) {
		// Array keys should not be sorted in alphabetical order
		keys.sort();
		} else if (typeof sortObjectKeys === 'function') {
		keys.sort(sortObjectKeys);
		}

		_iteratorNormalCompletion2 = true;
		_didIteratorError2 = false;
		_iteratorError2 = undefined;
		_context.prev = 46;
		_iterator2 = keys[Symbol.iterator]();

		case 48:
		if (_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done) {
		_context.next = 65;
		break;
		}

		propertyName = _step2.value;

		if (!data.propertyIsEnumerable(propertyName)) {
		_context.next = 56;
		break;
		}

		try {
		propertyValue = data[propertyName];
		_context.next = 54;
		return {
		name: propertyName \|\| '""',
		data: propertyValue
		};
		} catch (e) {// console.warn(e)
		}

		case 54:
		_context.next = 62;
		break;

		case 56:
		if (!showNonenumerable) {
		_context.next = 62;
		break;
		}

		// To work around the error (happens some time when propertyName === 'caller' \|\| propertyName === 'arguments')
		// 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context
		// http://stackoverflow.com/questions/31921189/caller-and-arguments-are-restricted-function-properties-and-cannot-be-access
		_propertyValue = void 0;

		try {
		_propertyValue = data[propertyName];
		} catch (e) {
		// console.warn(e)
		}

		if (!(_propertyValue !== undefined)) {
		_context.next = 62;
		break;
		}

		_context.next = 62;
		return {
		if (propertyValue !== undefined) {
		yield {
		name: propertyName,
		data: _propertyValue,
		data: propertyValue,
		isNonenumerable: true
		};
		}
		}
		} // [[Prototype]] of the object: `Object.getPrototypeOf(data)`
		// the property name is shown as "__proto__"

		case 62:
		_iteratorNormalCompletion2 = true;
		_context.next = 48;
		break;

		case 65:
		_context.next = 71;
		break;

		case 67:
		_context.prev = 67;
		_context.t1 = _context['catch'](46);
		_didIteratorError2 = true;
		_iteratorError2 = _context.t1;

		case 71:
		_context.prev = 71;
		_context.prev = 72;

		if (!_iteratorNormalCompletion2 && _iterator2.return) {
		_iterator2.return();
		}

		case 74:
		_context.prev = 74;

		if (!_didIteratorError2) {
		_context.next = 77;
		break;
		}

		throw _iteratorError2;

		case 77:
		return _context.finish(74);

		case 78:
		return _context.finish(71);

		case 79:
		if (!(showNonenumerable && data !== Object.prototype /* already added */)) {
		_context.next = 82;
		break;
		}

		_context.next = 82;
		return {
		name: '__proto__',
		data: Object.getPrototypeOf(data),
		isNonenumerable: true
		};

		case 82:
		case 'end':
		return _context.stop();
		if (showNonenumerable && data !== Object.prototype
		/* already added */
		) {
		yield {
		name: '__proto__',
		data: Object.getPrototypeOf(data),
		isNonenumerable: true
		};
		}
		}
		}, objectIterator, this, [[9, 27, 31, 39], [32,, 34, 38], [46, 67, 71, 79], [72,, 74, 78]]);
		});
		}
		};

		@@ -313,10 +122,16 @@ return objectIterator;

		var defaultNodeRenderer = function defaultNodeRenderer(_ref) {
		var depth = _ref.depth,
		const defaultNodeRenderer = (_ref) => {
		let depth = _ref.depth,
		name = _ref.name,
		data = _ref.data,
		isNonenumerable = _ref.isNonenumerable;
		return depth === 0 ? _react2.default.createElement(_ObjectRootLabel2.default, { name: name, data: data }) : _react2.default.createElement(_ObjectLabel2.default, { name: name, data: data, isNonenumerable: isNonenumerable });
		return depth === 0 ? _react.default.createElement(_ObjectRootLabel.default, {
		name: name,
		data: data
		}) : _react.default.createElement(_ObjectLabel.default, {
		name: name,
		data: data,
		isNonenumerable: isNonenumerable
		});
		};

		/**
		@@ -326,59 +141,41 @@ * Tree-view for objects

		var ObjectInspector = function (_Component) {
		(0, _inherits3.default)(ObjectInspector, _Component);

		function ObjectInspector() {
		(0, _classCallCheck3.default)(this, ObjectInspector);
		return (0, _possibleConstructorReturn3.default)(this, (ObjectInspector.__proto__ \|\| Object.getPrototypeOf(ObjectInspector)).apply(this, arguments));
		}
		const ObjectInspector = (_ref2) => {
		let _ref2$showNonenumerab = _ref2.showNonenumerable,
		showNonenumerable = _ref2$showNonenumerab === void 0 ? false : _ref2$showNonenumerab,
		sortObjectKeys = _ref2.sortObjectKeys,
		nodeRenderer = _ref2.nodeRenderer,
		treeViewProps = _objectWithoutProperties(_ref2, ["showNonenumerable", "sortObjectKeys", "nodeRenderer"]);

		(0, _createClass3.default)(ObjectInspector, [{
		key: 'render',
		value: function render() {
		var _props = this.props,
		showNonenumerable = _props.showNonenumerable,
		sortObjectKeys = _props.sortObjectKeys,
		nodeRenderer = _props.nodeRenderer,
		rest = (0, _objectWithoutProperties3.default)(_props, ['showNonenumerable', 'sortObjectKeys', 'nodeRenderer']);
		const dataIterator = createIterator(showNonenumerable, sortObjectKeys);
		const renderer = nodeRenderer ? nodeRenderer : defaultNodeRenderer;
		return _react.default.createElement(_TreeView.default, _extends({
		nodeRenderer: renderer,
		dataIterator: dataIterator
		}, treeViewProps));
		};

		var dataIterator = createIterator(showNonenumerable, sortObjectKeys);

		var renderer = nodeRenderer ? nodeRenderer : defaultNodeRenderer;

		return _react2.default.createElement(
		_ThemeProvider2.default,
		{ theme: this.props.theme },
		_react2.default.createElement(_TreeView2.default, (0, _extends3.default)({ nodeRenderer: renderer, dataIterator: dataIterator }, rest))
		);
		}
		}]);
		return ObjectInspector;
		}(_react.Component);

		ObjectInspector.defaultProps = {
		showNonenumerable: false,

		theme: 'chromeLight'
		};
		ObjectInspector.propTypes = {
		/** An integer specifying to which level the tree should be initially expanded. */
		expandLevel: _propTypes2.default.number,
		expandLevel: _propTypes.default.number,

		/** An array containing all the paths that should be expanded when the component is initialized, or a string of just one path */
		expandPaths: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
		expandPaths: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
		name: _propTypes.default.string,

		name: _propTypes2.default.string,
		/** Not required prop because we also allow undefined value */
		data: _propTypes2.default.any,
		data: _propTypes.default.any,

		/** A known theme or theme object */
		theme: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
		/** Show non-enumerable properties */
		showNonenumerable: _propTypes.default.bool,

		/** Show non-enumerable properties */
		showNonenumerable: _propTypes2.default.bool,
		/** Sort object keys with optional compare function. */
		sortObjectKeys: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.func]),
		sortObjectKeys: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func]),

		/** Provide a custom nodeRenderer */
		nodeRenderer: _propTypes2.default.func
		nodeRenderer: _propTypes.default.func
		};
		exports.default = ObjectInspector;

		var _default = (0, _styles.themeAcceptor)(ObjectInspector);

		exports.default = _default;

43

lib/object-inspector/ObjectInspector.spec.js

		@@ -1,45 +0,26 @@
		'use strict';
		"use strict";

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));

		var _shallow = require('react-test-renderer/shallow');
		var _ObjectInspector = _interopRequireDefault(require("./ObjectInspector"));

		var _shallow2 = _interopRequireDefault(_shallow);

		var _ObjectInspector = require('./ObjectInspector');

		var _ObjectInspector2 = _interopRequireDefault(_ObjectInspector);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var TestRenderer = new _shallow2.default();
		describe('ObjectInspector', () => {
		it('should render', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectInspector.default, null));

		describe('ObjectInspector', function () {
		it('should render', function () {
		var tree = TestRenderer.render(_react2.default.createElement(_ObjectInspector2.default, { theme: 'testvalue' }));

		expect(tree).toMatchSnapshot();

		expect(tree.type).toBeInstanceOf(Function);
		expect(tree.props.theme).toEqual('testvalue');
		});
		it('passes `nodeRenderer` prop to <TreeView/>', () => {
		const nodeRenderer = () => _react.default.createElement("span", null, "unit test");

		it('passes `nodeRenderer` prop to <TreeView/>', function () {
		// Test that a custom `nodeRenderer` props is passed to <TreeView/>
		var nodeRenderer = function nodeRenderer() {
		return _react2.default.createElement(
		'span',
		null,
		'unit test'
		);
		};
		var tree = TestRenderer.render(_react2.default.createElement(_ObjectInspector2.default, { nodeRenderer: nodeRenderer }));
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectInspector.default, {
		nodeRenderer: nodeRenderer
		}));

		expect(tree).toMatchSnapshot();

		expect(tree.props.children.type).toBeInstanceOf(Function);
		expect(tree.props.children.props.nodeRenderer).toEqual(nodeRenderer);
		});
		});

57

lib/object-inspector/ObjectLabel.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,19 +6,12 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _propTypes = _interopRequireDefault(require("prop-types"));

		var _propTypes = require('prop-types');
		var _ObjectName = _interopRequireDefault(require("../object/ObjectName"));

		var _propTypes2 = _interopRequireDefault(_propTypes);
		var _ObjectValue = _interopRequireDefault(require("../object/ObjectValue"));

		var _ObjectName = require('../object/ObjectName');

		var _ObjectName2 = _interopRequireDefault(_ObjectName);

		var _ObjectValue = require('../object/ObjectValue');

		var _ObjectValue2 = _interopRequireDefault(_ObjectValue);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		@@ -29,20 +22,14 @@
		*/
		var ObjectLabel = function ObjectLabel(_ref) {
		var name = _ref.name,
		const ObjectLabel = (_ref) => {
		let name = _ref.name,
		data = _ref.data,
		isNonenumerable = _ref.isNonenumerable;

		var object = data;

		return _react2.default.createElement(
		'span',
		null,
		_react2.default.createElement(_ObjectName2.default, { name: name, dimmed: isNonenumerable }),
		_react2.default.createElement(
		'span',
		null,
		': '
		),
		_react2.default.createElement(_ObjectValue2.default, { object: object })
		);
		_ref$isNonenumerable = _ref.isNonenumerable,
		isNonenumerable = _ref$isNonenumerable === void 0 ? false : _ref$isNonenumerable;
		const object = data;
		return _react.default.createElement("span", null, _react.default.createElement(_ObjectName.default, {
		name: name,
		dimmed: isNonenumerable
		}), _react.default.createElement("span", null, ": "), _react.default.createElement(_ObjectValue.default, {
		object: object
		}));
		};
		@@ -52,9 +39,5 @@
		/** Non enumerable object property will be dimmed */
		isNonenumerable: _propTypes2.default.bool
		isNonenumerable: _propTypes.default.bool
		};

		ObjectLabel.defaultProps = {
		isNonenumerable: false
		};

		exports.default = ObjectLabel;
		var _default = ObjectLabel;
		exports.default = _default;

141

lib/object-inspector/ObjectPreview.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,32 +6,16 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _typeof2 = require('babel-runtime/helpers/typeof');
		var _react = _interopRequireDefault(require("react"));

		var _typeof3 = _interopRequireDefault(_typeof2);
		var _ObjectValue = _interopRequireDefault(require("../object/ObjectValue"));

		var _react = require('react');
		var _ObjectName = _interopRequireDefault(require("../object/ObjectName"));

		var _react2 = _interopRequireDefault(_react);
		var _styles = require("../styles");

		var _propTypes = require('prop-types');
		var _objectPrototype = require("../utils/objectPrototype");

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _ObjectValue = require('../object/ObjectValue');

		var _ObjectValue2 = _interopRequireDefault(_ObjectValue);

		var _ObjectName = require('../object/ObjectName');

		var _ObjectName2 = _interopRequireDefault(_ObjectName);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		/* NOTE: Chrome console.log is italic */
		var styles = {
		preview: {
		fontStyle: 'italic'
		}
		};

		/* intersperse arr with separator */
		@@ -43,51 +27,62 @@ function intersperse(arr, sep) {

		return arr.slice(1).reduce(function (xs, x) {
		return xs.concat([sep, x]);
		}, [arr[0]]);
		return arr.slice(1).reduce((xs, x) => xs.concat([sep, x]), [arr[0]]);
		}

		/**
		* A preview of the object
		*/
		var ObjectPreview = function ObjectPreview(_ref) {
		var data = _ref.data,
		maxProperties = _ref.maxProperties;

		var object = data;

		if ((typeof object === 'undefined' ? 'undefined' : (0, _typeof3.default)(object)) !== 'object' \|\| object === null \|\| object instanceof Date \|\| object instanceof RegExp) {
		return _react2.default.createElement(_ObjectValue2.default, { object: object });
		const ObjectPreview = (_ref) => {
		let data = _ref.data;
		const styles = (0, _styles.useStyles)('ObjectPreview');
		const object = data;

		if (typeof object !== 'object' \|\| object === null \|\| object instanceof Date \|\| object instanceof RegExp) {
		return _react.default.createElement(_ObjectValue.default, {
		object: object
		});
		}

		if (Array.isArray(object)) {
		return _react2.default.createElement(
		'span',
		{ style: styles.preview },
		'[',
		intersperse(object.map(function (element, index) {
		return _react2.default.createElement(_ObjectValue2.default, { key: index, object: element });
		}), ', '),
		']'
		);
		const maxProperties = styles.arrayMaxProperties;
		const previewArray = object.slice(0, maxProperties).map((element, index) => _react.default.createElement(_ObjectValue.default, {
		key: index,
		object: element
		}));

		if (object.length > maxProperties) {
		previewArray.push(_react.default.createElement("span", {
		key: "ellipsis"
		}, "\u2026"));
		}

		const arrayLength = object.length;
		return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
		style: styles.objectDescription
		}, arrayLength === 0 ? `` : `(${arrayLength})\xa0`), _react.default.createElement("span", {
		style: styles.preview
		}, "[", intersperse(previewArray, ', '), "]"));
		} else {
		var propertyNodes = [];
		for (var propertyName in object) {
		var propertyValue = object[propertyName];
		if (object.hasOwnProperty(propertyName)) {
		var ellipsis = void 0;
		const maxProperties = styles.objectMaxProperties;
		let propertyNodes = [];

		for (let propertyName in object) {
		const propertyValue = object[propertyName];

		if (_objectPrototype.hasOwnProperty.call(object, propertyName)) {
		let ellipsis;

		if (propertyNodes.length === maxProperties - 1 && Object.keys(object).length > maxProperties) {
		ellipsis = _react2.default.createElement(
		'span',
		{ key: 'ellipsis' },
		'\u2026'
		);
		ellipsis = _react.default.createElement("span", {
		key: 'ellipsis'
		}, "\u2026");
		}
		propertyNodes.push(_react2.default.createElement(
		'span',
		{ key: propertyName },
		_react2.default.createElement(_ObjectName2.default, { name: propertyName \|\| '""' }),
		':\xA0',
		_react2.default.createElement(_ObjectValue2.default, { object: propertyValue }),
		ellipsis
		));

		propertyNodes.push(_react.default.createElement("span", {
		key: propertyName
		}, _react.default.createElement(_ObjectName.default, {
		name: propertyName \|\| `""`
		}), ":\xA0", _react.default.createElement(_ObjectValue.default, {
		object: propertyValue
		}), ellipsis));
		if (ellipsis) break;
		@@ -97,22 +92,12 @@ }

		return _react2.default.createElement(
		'span',
		{ style: styles.preview },
		object.constructor.name + ' {',
		intersperse(propertyNodes, ', '),
		'}'
		);
		const objectConstructorName = object.constructor ? object.constructor.name : 'Object';
		return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
		style: styles.objectDescription
		}, objectConstructorName === 'Object' ? '' : `${objectConstructorName} `), _react.default.createElement("span", {
		style: styles.preview
		}, '{', intersperse(propertyNodes, ', '), '}'));
		}
		};

		ObjectPreview.propTypes = {
		/**
		* max number of properties shown in the property view
		*/
		maxProperties: _propTypes2.default.number
		};
		ObjectPreview.defaultProps = {
		maxProperties: 5
		};

		exports.default = ObjectPreview;
		var _default = ObjectPreview;
		exports.default = _default;

42

lib/object-inspector/ObjectRootLabel.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,38 +6,30 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _ObjectName = _interopRequireDefault(require("../object/ObjectName"));

		var _ObjectName = require('../object/ObjectName');
		var _ObjectPreview = _interopRequireDefault(require("./ObjectPreview"));

		var _ObjectName2 = _interopRequireDefault(_ObjectName);

		var _ObjectPreview = require('./ObjectPreview');

		var _ObjectPreview2 = _interopRequireDefault(_ObjectPreview);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var ObjectRootLabel = function ObjectRootLabel(_ref) {
		var name = _ref.name,
		const ObjectRootLabel = (_ref) => {
		let name = _ref.name,
		data = _ref.data;

		if (typeof name === 'string') {
		return _react2.default.createElement(
		'span',
		null,
		_react2.default.createElement(_ObjectName2.default, { name: name }),
		_react2.default.createElement(
		'span',
		null,
		': '
		),
		_react2.default.createElement(_ObjectPreview2.default, { data: data })
		);
		return _react.default.createElement("span", null, _react.default.createElement(_ObjectName.default, {
		name: name
		}), _react.default.createElement("span", null, ": "), _react.default.createElement(_ObjectPreview.default, {
		data: data
		}));
		} else {
		return _react2.default.createElement(_ObjectPreview2.default, { data: data });
		return _react.default.createElement(_ObjectPreview.default, {
		data: data
		});
		}
		};

		exports.default = ObjectRootLabel;
		var _default = ObjectRootLabel;
		exports.default = _default;

61

lib/object/ObjectName.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,21 +6,16 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _extends2 = require('babel-runtime/helpers/extends');
		var _react = _interopRequireDefault(require("react"));

		var _extends3 = _interopRequireDefault(_extends2);
		var _propTypes = _interopRequireDefault(require("prop-types"));

		var _react = require('react');
		var _styles = require("../styles");

		var _react2 = _interopRequireDefault(_react);
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var _propTypes = require('prop-types');
		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

		var _propTypes2 = _interopRequireDefault(_propTypes);
		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		var _createStyles = require('../styles/createStyles');

		var _createStyles2 = _interopRequireDefault(_createStyles);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		/**
		@@ -35,16 +30,15 @@ * A view for object property names.
		*/
		var ObjectName = function ObjectName(_ref, _ref2) {
		var name = _ref.name,
		dimmed = _ref.dimmed,
		styles = _ref.styles;
		var theme = _ref2.theme;
		const ObjectName = (_ref) => {
		let name = _ref.name,
		_ref$dimmed = _ref.dimmed,
		dimmed = _ref$dimmed === void 0 ? false : _ref$dimmed,
		_ref$styles = _ref.styles,
		styles = _ref$styles === void 0 ? {} : _ref$styles;
		const themeStyles = (0, _styles.useStyles)('ObjectName');

		var themeStyles = (0, _createStyles2.default)('ObjectName', theme);
		var appliedStyles = (0, _extends3.default)({}, themeStyles.base, dimmed ? themeStyles['dimmed'] : {}, styles);
		const appliedStyles = _objectSpread({}, themeStyles.base, dimmed ? themeStyles['dimmed'] : {}, styles);

		return _react2.default.createElement(
		'span',
		{ style: appliedStyles },
		name
		);
		return _react.default.createElement("span", {
		style: appliedStyles
		}, name);
		};
		@@ -54,15 +48,8 @@
		/** Property name */
		name: _propTypes2.default.string,
		name: _propTypes.default.string,

		/** Should property name be dimmed */
		dimmed: _propTypes2.default.bool
		dimmed: _propTypes.default.bool
		};

		ObjectName.defaultProps = {
		dimmed: false
		};

		ObjectName.contextTypes = {
		theme: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object])
		};

		exports.default = ObjectName;
		var _default = ObjectName;
		exports.default = _default;

50

lib/object/ObjectName.spec.js

		@@ -1,43 +0,47 @@
		'use strict';
		"use strict";

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));

		var _reactTestRenderer = require('react-test-renderer');
		var _ObjectName = _interopRequireDefault(require("./ObjectName"));

		var _reactTestRenderer2 = _interopRequireDefault(_reactTestRenderer);

		var _ObjectName = require('./ObjectName');

		var _ObjectName2 = _interopRequireDefault(_ObjectName);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		describe('ObjectName', function () {
		it('should render', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectName2.default, { name: 'testvalue' }));
		describe('ObjectName', () => {
		it('should render', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectName.default, {
		name: "testvalue"
		}));

		expect(tree).toMatchSnapshot();
		});
		it('should apply dimming if `dimmed` prop is true', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectName.default, {
		name: "testvalue",
		dimmed: true
		}));

		it('should apply dimming if `dimmed` prop is true', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectName2.default, { name: 'testvalue', dimmed: true }));

		expect(tree).toMatchSnapshot();
		});
		it('should not apply dimming if `dimmed` prop is false', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectName.default, {
		name: "testvalue",
		dimmed: false
		}));

		it('should not apply dimming if `dimmed` prop is false', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectName2.default, { name: 'testvalue', dimmed: false }));

		expect(tree).toMatchSnapshot();
		});

		it('Accepts and applies additional `style` prop', function () {
		it('Accepts and applies additional `style` prop', () => {
		// Test that a custom `style` props is passed and applied to <span/>
		var style = { color: 'hotpink' };
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectName2.default, { styles: style }));
		const style = {
		color: 'hotpink'
		};

		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectName.default, {
		styles: style
		}));

		expect(tree).toMatchSnapshot();
		});
		});

174

lib/object/ObjectValue.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,25 +6,16 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _typeof2 = require('babel-runtime/helpers/typeof');
		var _react = _interopRequireDefault(require("react"));

		var _typeof3 = _interopRequireDefault(_typeof2);
		var _propTypes = _interopRequireDefault(require("prop-types"));

		var _extends2 = require('babel-runtime/helpers/extends');
		var _styles = require("../styles");

		var _extends3 = _interopRequireDefault(_extends2);
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var _react = require('react');
		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

		var _react2 = _interopRequireDefault(_react);
		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _createStyles = require('../styles/createStyles');

		var _createStyles2 = _interopRequireDefault(_createStyles);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		/**
		@@ -35,114 +26,75 @@ * A short description of the object values.
		*/
		var ObjectValue = function ObjectValue(_ref, _ref2) {
		var object = _ref.object,
		const ObjectValue = (_ref) => {
		let object = _ref.object,
		styles = _ref.styles;
		var theme = _ref2.theme;
		const themeStyles = (0, _styles.useStyles)('ObjectValue');

		var themeStyles = (0, _createStyles2.default)('ObjectValue', theme);
		const mkStyle = key => _objectSpread({}, themeStyles[key], styles);

		var mkStyle = function mkStyle(key) {
		return (0, _extends3.default)({}, themeStyles[key], styles);
		};
		switch (typeof object) {
		case 'number':
		return _react.default.createElement("span", {
		style: mkStyle('objectValueNumber')
		}, String(object));

		switch (typeof object === 'undefined' ? 'undefined' : (0, _typeof3.default)(object)) {
		case 'number':
		return _react2.default.createElement(
		'span',
		{ style: mkStyle('objectValueNumber') },
		String(object)
		);
		case 'string':
		return _react2.default.createElement(
		'span',
		{ style: mkStyle('objectValueString') },
		'"',
		object,
		'"'
		);
		return _react.default.createElement("span", {
		style: mkStyle('objectValueString')
		}, "\"", object, "\"");

		case 'boolean':
		return _react2.default.createElement(
		'span',
		{ style: mkStyle('objectValueBoolean') },
		String(object)
		);
		return _react.default.createElement("span", {
		style: mkStyle('objectValueBoolean')
		}, String(object));

		case 'undefined':
		return _react2.default.createElement(
		'span',
		{ style: mkStyle('objectValueUndefined') },
		'undefined'
		);
		return _react.default.createElement("span", {
		style: mkStyle('objectValueUndefined')
		}, "undefined");

		case 'object':
		if (object === null) {
		return _react2.default.createElement(
		'span',
		{ style: mkStyle('objectValueNull') },
		'null'
		);
		return _react.default.createElement("span", {
		style: mkStyle('objectValueNull')
		}, "null");
		}

		if (object instanceof Date) {
		return _react2.default.createElement(
		'span',
		null,
		object.toString()
		);
		return _react.default.createElement("span", null, object.toString());
		}

		if (object instanceof RegExp) {
		return _react2.default.createElement(
		'span',
		{ style: mkStyle('objectValueRegExp') },
		object.toString()
		);
		return _react.default.createElement("span", {
		style: mkStyle('objectValueRegExp')
		}, object.toString());
		}

		if (Array.isArray(object)) {
		return _react2.default.createElement(
		'span',
		null,
		'Array[' + object.length + ']'
		);
		return _react.default.createElement("span", null, `Array(${object.length})`);
		}

		if (!object.constructor) {
		return _react2.default.createElement(
		'span',
		null,
		'Object'
		);
		return _react.default.createElement("span", null, "Object");
		}

		if (typeof object.constructor.isBuffer === 'function' && object.constructor.isBuffer(object)) {
		return _react2.default.createElement(
		'span',
		null,
		'Buffer[' + object.length + ']'
		);
		return _react.default.createElement("span", null, `Buffer[${object.length}]`);
		}

		return _react2.default.createElement(
		'span',
		null,
		object.constructor.name
		);
		return _react.default.createElement("span", null, object.constructor.name);

		case 'function':
		return _react2.default.createElement(
		'span',
		null,
		_react2.default.createElement(
		'span',
		{ style: mkStyle('objectValueFunctionKeyword') },
		'function'
		),
		_react2.default.createElement(
		'span',
		{ style: mkStyle('objectValueFunctionName') },
		'\xA0',
		object.name,
		'()'
		)
		);
		return _react.default.createElement("span", null, _react.default.createElement("span", {
		style: mkStyle('objectValueFunctionPrefix')
		}, "\u0192\xA0"), _react.default.createElement("span", {
		style: mkStyle('objectValueFunctionName')
		}, object.name, "()"));

		case 'symbol':
		return _react2.default.createElement(
		'span',
		{ style: mkStyle('objectValueSymbol') },
		object.toString()
		);
		return _react.default.createElement("span", {
		style: mkStyle('objectValueSymbol')
		}, object.toString());

		default:
		return _react2.default.createElement('span', null);
		return _react.default.createElement("span", null);
		}
		@@ -152,10 +104,6 @@ };
		ObjectValue.propTypes = {
		/** the object to describe */
		object: _propTypes2.default.any
		// the object to describe
		object: _propTypes.default.any
		};

		ObjectValue.contextTypes = {
		theme: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object])
		};

		exports.default = ObjectValue;
		var _default = ObjectValue;
		exports.default = _default;

120

lib/object/ObjectValue.spec.js

		@@ -1,85 +0,104 @@
		'use strict';
		"use strict";

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));

		var _reactTestRenderer = require('react-test-renderer');
		var _ObjectValue = _interopRequireDefault(require("./ObjectValue"));

		var _reactTestRenderer2 = _interopRequireDefault(_reactTestRenderer);
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var _ObjectValue = require('./ObjectValue');
		describe('ObjectValue', () => {
		it('should render', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		object: 0
		}));

		var _ObjectValue2 = _interopRequireDefault(_ObjectValue);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		describe('ObjectValue', function () {
		it('should render', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { object: 0 }));
		expect(tree).toMatchSnapshot();
		});
		it('should render number', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		object: 0
		})).toJSON();

		it('should render number', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { object: 0 })).toJSON();
		expect(tree.type).toBe('span');
		expect(tree.children).toEqual(['0']);
		});
		it('should render string with quotes', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		object: 'octocat'
		})).toJSON();

		it('should render string with quotes', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { object: 'octocat' })).toJSON();
		expect(tree.type).toBe('span');
		expect(tree.children).toEqual(['"', 'octocat', '"']);
		});
		it('should render boolean', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		object: true
		})).toJSON();

		it('should render boolean', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { object: true })).toJSON();
		expect(tree.type).toBe('span');
		expect(tree.children).toEqual(['true']);
		});
		it('should render undefined', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		object: undefined
		})).toJSON();

		it('should render undefined', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { object: undefined })).toJSON();
		expect(tree.type).toBe('span');
		expect(tree.children).toEqual(['undefined']);
		});
		it('should render null', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		object: null
		})).toJSON();

		it('should render null', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { object: null })).toJSON();
		expect(tree.type).toBe('span');
		expect(tree.children).toEqual(['null']);
		});
		it('should display date correctly', () => {
		const dateString = 'December 17, 1995 03:24:00';
		const date = new Date(dateString);

		it('should display date correctly', function () {
		var dateString = 'December 17, 1995 03:24:00';
		var date = new Date(dateString);
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { object: date })).toJSON();
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		object: date
		})).toJSON();

		expect(tree.type).toBe('span');
		expect(tree.children).toEqual([date.toString()]);
		});
		it('should render array with length information', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		object: [1, 2, 3, 4, 5]
		})).toJSON();

		it('should render array with length information', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { object: [1, 2, 3, 4, 5] })).toJSON();
		expect(tree.type).toBe('span');
		expect(tree.children).toEqual(['Array[5]']);
		expect(tree.children).toEqual(['Array(5)']);
		});
		it('should render an empty object', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		object: {}
		})).toJSON();

		it('should render an empty object', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { object: {} })).toJSON();
		expect(tree.type).toBe('span');
		expect(tree.children).toEqual(['Object']);
		});
		it('should render a simple object', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		object: {
		k: 'v'
		}
		})).toJSON();

		it('should render a simple object', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { object: { k: 'v' } })).toJSON();
		expect(tree.type).toBe('span');
		expect(tree.children).toEqual(['Object']);
		});
		it('should render a null prototyped object', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		object: Object.create(null)
		})).toJSON();

		it('should render a null prototyped object', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { object: Object.create(null) })).toJSON();
		expect(tree.type).toBe('span');
		expect(tree.children).toEqual(['Object']);
		});

		/*
		@@ -111,20 +130,31 @@ it('should render an anonymous function', () => {

		it('should render a symbol', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { object: Symbol() })).toJSON();
		it('should render a symbol', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		object: Symbol()
		})).toJSON();

		expect(tree.type).toBe('span');
		expect(tree.children).toEqual(['Symbol()']);
		});
		it('should render a symbol foo', () => {
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		object: Symbol('foo')
		})).toJSON();

		it('should render a symbol foo', function () {
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { object: Symbol('foo') })).toJSON();
		expect(tree.type).toBe('span');
		expect(tree.children).toEqual(['Symbol(foo)']);
		});
		it('accepts and applies style from `styles` prop', () => {
		// Custom `styles` prop gets applied to the element
		const style = {
		color: 'blue'
		};

		it('accepts and applies style from `styles` prop', function () {
		// Custom `styles` prop gets applied to the element
		var style = { color: 'blue' };
		var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ObjectValue2.default, { styles: style, object: '' })).toJSON();
		const tree = _reactTestRenderer.default.create(_react.default.createElement(_ObjectValue.default, {
		styles: style,
		object: ''
		})).toJSON();

		expect(tree.props.style.color).toEqual('blue');
		});
		});

493

lib/styles/base.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,273 +6,274 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _extends2 = require('babel-runtime/helpers/extends');
		var _unselectable = _interopRequireDefault(require("./unselectable"));

		var _extends3 = _interopRequireDefault(_extends2);
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var _unselectable = require('./unselectable');
		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

		var _unselectable2 = _interopRequireDefault(_unselectable);
		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		exports.default = function (theme) {
		return {
		DOMNodePreview: {
		htmlOpenTag: {
		base: {
		color: theme.HTML_TAG_COLOR
		},
		tagName: {
		color: theme.HTML_TAGNAME_COLOR,
		textTransform: theme.HTML_TAGNAME_TEXT_TRANSFORM
		},
		htmlAttributeName: {
		color: theme.HTML_ATTRIBUTE_NAME_COLOR
		},
		htmlAttributeValue: {
		color: theme.HTML_ATTRIBUTE_VALUE_COLOR
		}
		var _default = theme => ({
		DOMNodePreview: {
		htmlOpenTag: {
		base: {
		color: theme.HTML_TAG_COLOR
		},
		htmlCloseTag: {
		base: {
		color: theme.HTML_TAG_COLOR
		},
		offsetLeft: {
		/* hack: offset placeholder */
		marginLeft: -theme.TREENODE_PADDING_LEFT
		},
		tagName: {
		color: theme.HTML_TAGNAME_COLOR,
		textTransform: theme.HTML_TAGNAME_TEXT_TRANSFORM
		}
		tagName: {
		color: theme.HTML_TAGNAME_COLOR,
		textTransform: theme.HTML_TAGNAME_TEXT_TRANSFORM
		},
		htmlComment: {
		color: theme.HTML_COMMENT_COLOR
		htmlAttributeName: {
		color: theme.HTML_ATTRIBUTE_NAME_COLOR
		},
		htmlDoctype: {
		color: theme.HTML_DOCTYPE_COLOR
		htmlAttributeValue: {
		color: theme.HTML_ATTRIBUTE_VALUE_COLOR
		}
		},

		ObjectName: {
		htmlCloseTag: {
		base: {
		color: theme.OBJECT_NAME_COLOR
		color: theme.HTML_TAG_COLOR
		},
		dimmed: {
		opacity: 0.6
		}
		},

		ObjectValue: {
		objectValueNull: {
		color: theme.OBJECT_VALUE_NULL_COLOR
		offsetLeft: {
		/* hack: offset placeholder */
		marginLeft: -theme.TREENODE_PADDING_LEFT
		},
		objectValueUndefined: {
		color: theme.OBJECT_VALUE_UNDEFINED_COLOR
		},
		objectValueRegExp: {
		color: theme.OBJECT_VALUE_REGEXP_COLOR
		},
		objectValueString: {
		color: theme.OBJECT_VALUE_STRING_COLOR
		},
		objectValueSymbol: {
		color: theme.OBJECT_VALUE_SYMBOL_COLOR
		},
		objectValueNumber: {
		color: theme.OBJECT_VALUE_NUMBER_COLOR
		},
		objectValueBoolean: {
		color: theme.OBJECT_VALUE_BOOLEAN_COLOR
		},
		objectValueFunctionKeyword: {
		color: theme.OBJECT_VALUE_FUNCTION_KEYWORD_COLOR,
		fontStyle: 'italic'
		},
		objectValueFunctionName: {
		fontStyle: 'italic'
		tagName: {
		color: theme.HTML_TAGNAME_COLOR,
		textTransform: theme.HTML_TAGNAME_TEXT_TRANSFORM
		}
		},

		TreeNode: {
		treeNodeBase: {
		color: theme.BASE_COLOR,
		backgroundColor: theme.BASE_BACKGROUND_COLOR,

		lineHeight: theme.TREENODE_LINE_HEIGHT,
		cursor: 'default',

		boxSizing: 'border-box',
		listStyle: 'none',

		fontFamily: theme.TREENODE_FONT_FAMILY,
		fontSize: theme.TREENODE_FONT_SIZE
		},
		treeNodePreviewContainer: {},
		treeNodePlaceholder: (0, _extends3.default)({
		whiteSpace: 'pre',

		htmlComment: {
		color: theme.HTML_COMMENT_COLOR
		},
		htmlDoctype: {
		color: theme.HTML_DOCTYPE_COLOR
		}
		},
		ObjectPreview: {
		objectDescription: {
		fontStyle: 'italic'
		},
		preview: {
		fontStyle: 'italic'
		},
		arrayMaxProperties: theme.OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES,
		objectMaxProperties: theme.OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES
		},
		ObjectName: {
		base: {
		color: theme.OBJECT_NAME_COLOR
		},
		dimmed: {
		opacity: 0.6
		}
		},
		ObjectValue: {
		objectValueNull: {
		color: theme.OBJECT_VALUE_NULL_COLOR
		},
		objectValueUndefined: {
		color: theme.OBJECT_VALUE_UNDEFINED_COLOR
		},
		objectValueRegExp: {
		color: theme.OBJECT_VALUE_REGEXP_COLOR
		},
		objectValueString: {
		color: theme.OBJECT_VALUE_STRING_COLOR
		},
		objectValueSymbol: {
		color: theme.OBJECT_VALUE_SYMBOL_COLOR
		},
		objectValueNumber: {
		color: theme.OBJECT_VALUE_NUMBER_COLOR
		},
		objectValueBoolean: {
		color: theme.OBJECT_VALUE_BOOLEAN_COLOR
		},
		objectValueFunctionPrefix: {
		color: theme.OBJECT_VALUE_FUNCTION_PREFIX_COLOR,
		fontStyle: 'italic'
		},
		objectValueFunctionName: {
		fontStyle: 'italic'
		}
		},
		TreeView: {
		treeViewOutline: {
		padding: 0,
		margin: 0,
		listStyleType: 'none'
		}
		},
		TreeNode: {
		treeNodeBase: {
		color: theme.BASE_COLOR,
		backgroundColor: theme.BASE_BACKGROUND_COLOR,
		lineHeight: theme.TREENODE_LINE_HEIGHT,
		cursor: 'default',
		boxSizing: 'border-box',
		listStyle: 'none',
		fontFamily: theme.TREENODE_FONT_FAMILY,
		fontSize: theme.TREENODE_FONT_SIZE
		},
		treeNodePreviewContainer: {},
		treeNodePlaceholder: _objectSpread({
		whiteSpace: 'pre',
		fontSize: theme.ARROW_FONT_SIZE,
		marginRight: theme.ARROW_MARGIN_RIGHT
		}, _unselectable.default),
		treeNodeArrow: {
		base: _objectSpread({
		color: theme.ARROW_COLOR,
		display: 'inline-block',
		// lineHeight: '14px',
		fontSize: theme.ARROW_FONT_SIZE,
		marginRight: theme.ARROW_MARGIN_RIGHT
		}, _unselectable2.default),
		treeNodeArrow: {
		base: (0, _extends3.default)({
		color: theme.ARROW_COLOR,
		display: 'inline-block',
		// lineHeight: '14px',
		fontSize: theme.ARROW_FONT_SIZE,
		marginRight: theme.ARROW_MARGIN_RIGHT
		}, _unselectable2.default),
		expanded: {
		WebkitTransform: 'rotateZ(90deg)',
		MozTransform: 'rotateZ(90deg)',
		transform: 'rotateZ(90deg)'
		},
		collapsed: {
		WebkitTransform: 'rotateZ(0deg)',
		MozTransform: 'rotateZ(0deg)',
		transform: 'rotateZ(0deg)'
		}
		}, parseFloat(theme.ARROW_ANIMATION_DURATION) > 0 ? {
		transition: `transform ${theme.ARROW_ANIMATION_DURATION} ease 0s`
		} : {}, _unselectable.default),
		expanded: {
		WebkitTransform: 'rotateZ(90deg)',
		MozTransform: 'rotateZ(90deg)',
		transform: 'rotateZ(90deg)'
		},
		treeNodeChildNodesContainer: {
		margin: 0, // reset user-agent style
		paddingLeft: theme.TREENODE_PADDING_LEFT
		collapsed: {
		WebkitTransform: 'rotateZ(0deg)',
		MozTransform: 'rotateZ(0deg)',
		transform: 'rotateZ(0deg)'
		}
		},

		TableInspector: {
		base: {
		color: theme.BASE_COLOR,

		position: 'relative',
		border: '1px solid ' + theme.TABLE_BORDER_COLOR,
		fontFamily: theme.BASE_FONT_FAMILY,
		fontSize: theme.BASE_FONT_SIZE,
		lineHeight: '120%',
		boxSizing: 'border-box',
		cursor: 'default'
		}
		treeNodeChildNodesContainer: {
		margin: 0,
		// reset user-agent style
		paddingLeft: theme.TREENODE_PADDING_LEFT
		}
		},
		TableInspector: {
		base: {
		color: theme.BASE_COLOR,
		position: 'relative',
		border: `1px solid ${theme.TABLE_BORDER_COLOR}`,
		fontFamily: theme.BASE_FONT_FAMILY,
		fontSize: theme.BASE_FONT_SIZE,
		lineHeight: '120%',
		boxSizing: 'border-box',
		cursor: 'default'
		}
		},
		TableInspectorHeaderContainer: {
		base: {
		top: 0,
		height: '17px',
		left: 0,
		right: 0,
		overflowX: 'hidden'
		},

		TableInspectorHeaderContainer: {
		base: {
		top: 0,
		height: '17px',
		left: 0,
		right: 0,
		overflowX: 'hidden'
		},
		table: {
		tableLayout: 'fixed',
		borderSpacing: 0,
		borderCollapse: 'separate',
		height: '100%',
		width: '100%',
		margin: 0
		}
		table: {
		tableLayout: 'fixed',
		borderSpacing: 0,
		borderCollapse: 'separate',
		height: '100%',
		width: '100%',
		margin: 0
		}
		},
		TableInspectorDataContainer: {
		tr: {
		display: 'table-row'
		},

		TableInspectorDataContainer: {
		tr: {
		display: 'table-row'
		},
		td: {
		boxSizing: 'border-box',
		border: 'none', // prevent overrides
		height: '16px', // /* 0.5 * table.background-size height */
		verticalAlign: 'top',
		padding: '1px 4px',
		WebkitUserSelect: 'text',

		whiteSpace: 'nowrap',
		textOverflow: 'ellipsis',
		overflow: 'hidden',
		lineHeight: '14px'
		},
		div: {
		position: 'static',
		top: '17px',
		bottom: 0,
		overflowY: 'overlay',
		transform: 'translateZ(0)',

		left: 0,
		right: 0,
		overflowX: 'hidden'
		},
		table: {
		positon: 'static',
		left: 0,
		top: 0,
		right: 0,
		bottom: 0,
		borderTop: '0 none transparent',
		margin: 0, // prevent user agent stylesheet overrides

		backgroundImage: theme.TABLE_DATA_BACKGROUND_IMAGE,
		backgroundSize: theme.TABLE_DATA_BACKGROUND_SIZE,
		tableLayout: 'fixed',

		// table
		borderSpacing: 0,
		borderCollapse: 'separate',
		// height: '100%',
		width: '100%',

		fontSize: theme.BASE_FONT_SIZE,
		lineHeight: '120%'
		}
		td: {
		boxSizing: 'border-box',
		border: 'none',
		// prevent overrides
		height: '16px',
		// /* 0.5 * table.background-size height */
		verticalAlign: 'top',
		padding: '1px 4px',
		WebkitUserSelect: 'text',
		whiteSpace: 'nowrap',
		textOverflow: 'ellipsis',
		overflow: 'hidden',
		lineHeight: '14px'
		},

		TableInspectorTH: {
		base: {
		position: 'relative', // anchor for sort icon container
		height: 'auto',
		textAlign: 'left',
		backgroundColor: theme.TABLE_TH_BACKGROUND_COLOR,
		borderBottom: '1px solid ' + theme.TABLE_BORDER_COLOR,
		fontWeight: 'normal',
		verticalAlign: 'middle',
		padding: '0 4px',

		whiteSpace: 'nowrap',
		textOverflow: 'ellipsis',
		overflow: 'hidden',
		lineHeight: '14px',

		':hover': {
		backgroundColor: theme.TABLE_TH_HOVER_COLOR
		}
		},
		div: {
		whiteSpace: 'nowrap',
		textOverflow: 'ellipsis',
		overflow: 'hidden',

		// prevent user agent stylesheet overrides
		fontSize: theme.BASE_FONT_SIZE,
		lineHeight: '120%'
		}
		div: {
		position: 'static',
		top: '17px',
		bottom: 0,
		overflowY: 'overlay',
		transform: 'translateZ(0)',
		left: 0,
		right: 0,
		overflowX: 'hidden'
		},

		TableInspectorLeftBorder: {
		none: {
		borderLeft: 'none'
		},
		solid: {
		borderLeft: '1px solid ' + theme.TABLE_BORDER_COLOR
		table: {
		positon: 'static',
		left: 0,
		top: 0,
		right: 0,
		bottom: 0,
		borderTop: '0 none transparent',
		margin: 0,
		// prevent user agent stylesheet overrides
		backgroundImage: theme.TABLE_DATA_BACKGROUND_IMAGE,
		backgroundSize: theme.TABLE_DATA_BACKGROUND_SIZE,
		tableLayout: 'fixed',
		// table
		borderSpacing: 0,
		borderCollapse: 'separate',
		// height: '100%',
		width: '100%',
		fontSize: theme.BASE_FONT_SIZE,
		lineHeight: '120%'
		}
		},
		TableInspectorTH: {
		base: {
		position: 'relative',
		// anchor for sort icon container
		height: 'auto',
		textAlign: 'left',
		backgroundColor: theme.TABLE_TH_BACKGROUND_COLOR,
		borderBottom: `1px solid ${theme.TABLE_BORDER_COLOR}`,
		fontWeight: 'normal',
		verticalAlign: 'middle',
		padding: '0 4px',
		whiteSpace: 'nowrap',
		textOverflow: 'ellipsis',
		overflow: 'hidden',
		lineHeight: '14px',
		':hover': {
		backgroundColor: theme.TABLE_TH_HOVER_COLOR
		}
		},
		div: {
		whiteSpace: 'nowrap',
		textOverflow: 'ellipsis',
		overflow: 'hidden',
		// prevent user agent stylesheet overrides
		fontSize: theme.BASE_FONT_SIZE,
		lineHeight: '120%'
		}
		},
		TableInspectorLeftBorder: {
		none: {
		borderLeft: 'none'
		},
		solid: {
		borderLeft: `1px solid ${theme.TABLE_BORDER_COLOR}`
		}
		},
		TableInspectorSortIcon: _objectSpread({
		display: 'block',
		marginRight: 3,
		// 4,
		width: 8,
		height: 7,
		marginTop: -7,
		color: theme.TABLE_SORT_ICON_COLOR,
		fontSize: 12
		}, _unselectable.default)
		});

		TableInspectorSortIcon: (0, _extends3.default)({
		display: 'block',
		marginRight: 3, // 4,
		width: 8,
		height: 7,

		marginTop: -7,
		color: theme.TABLE_SORT_ICON_COLOR,
		fontSize: 12
		}, _unselectable2.default)
		};
		};
		exports.default = _default;

27

lib/styles/themes/chromeDark.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
		});
		var theme = {
		exports.default = void 0;
		const theme = {
		BASE_FONT_FAMILY: 'Menlo, monospace',
		BASE_FONT_SIZE: '11px',
		BASE_LINE_HEIGHT: '14px',

		BASE_LINE_HEIGHT: 1.2,
		BASE_BACKGROUND_COLOR: 'rgb(36, 36, 36)',
		BASE_COLOR: 'rgb(213, 213, 213)',

		OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
		OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
		OBJECT_NAME_COLOR: 'rgb(227, 110, 236)',
		@@ -23,4 +24,3 @@ OBJECT_VALUE_NULL_COLOR: 'rgb(127, 127, 127)',
		OBJECT_VALUE_BOOLEAN_COLOR: 'hsl(252, 100%, 75%)',
		OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: 'rgb(242, 85, 217)',

		OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(85, 106, 242)',
		HTML_TAG_COLOR: 'rgb(93, 176, 215)',
		@@ -33,20 +33,19 @@ HTML_TAGNAME_COLOR: 'rgb(93, 176, 215)',
		HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',

		ARROW_COLOR: 'rgb(145, 145, 145)',
		ARROW_MARGIN_RIGHT: 3,
		ARROW_FONT_SIZE: 12,

		ARROW_ANIMATION_DURATION: '0',
		TREENODE_FONT_FAMILY: 'Menlo, monospace',
		TREENODE_FONT_SIZE: '11px',
		TREENODE_LINE_HEIGHT: '14px',
		TREENODE_LINE_HEIGHT: 1.2,
		TREENODE_PADDING_LEFT: 12,

		TABLE_BORDER_COLOR: 'rgb(85, 85, 85)',
		TABLE_TH_BACKGROUND_COLOR: 'rgb(44, 44, 44)',
		TABLE_TH_HOVER_COLOR: 'rgb(48, 48, 48)',
		TABLE_SORT_ICON_COLOR: 'black', //'rgb(48, 57, 66)',
		TABLE_SORT_ICON_COLOR: 'black',
		//'rgb(48, 57, 66)',
		TABLE_DATA_BACKGROUND_IMAGE: 'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(51, 139, 255, 0.0980392) 50%, rgba(51, 139, 255, 0.0980392))',
		TABLE_DATA_BACKGROUND_SIZE: '128px 32px'
		};

		exports.default = theme;
		var _default = theme;
		exports.default = _default;

24

lib/styles/themes/chromeLight.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
		});
		var theme = {
		exports.default = void 0;
		const theme = {
		BASE_FONT_FAMILY: 'Menlo, monospace',
		BASE_FONT_SIZE: '11px',
		BASE_LINE_HEIGHT: '14px',

		BASE_LINE_HEIGHT: 1.2,
		BASE_BACKGROUND_COLOR: 'white',
		BASE_COLOR: 'black',

		OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
		OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
		OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
		@@ -23,4 +24,3 @@ OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
		OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
		OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: 'rgb(170, 13, 145)',

		OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
		HTML_TAG_COLOR: 'rgb(168, 148, 166)',
		@@ -33,12 +33,10 @@ HTML_TAGNAME_COLOR: 'rgb(136, 18, 128)',
		HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',

		ARROW_COLOR: '#6e6e6e',
		ARROW_MARGIN_RIGHT: 3,
		ARROW_FONT_SIZE: 12,

		ARROW_ANIMATION_DURATION: '0',
		TREENODE_FONT_FAMILY: 'Menlo, monospace',
		TREENODE_FONT_SIZE: '11px',
		TREENODE_LINE_HEIGHT: '14px',
		TREENODE_LINE_HEIGHT: 1.2,
		TREENODE_PADDING_LEFT: 12,

		TABLE_BORDER_COLOR: '#aaa',
		@@ -51,3 +49,3 @@ TABLE_TH_BACKGROUND_COLOR: '#eee',
		};

		exports.default = theme;
		var _default = theme;
		exports.default = _default;

28

lib/styles/themes/index.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,15 +6,19 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.chromeLight = exports.chromeDark = undefined;
		Object.defineProperty(exports, "chromeDark", {
		enumerable: true,
		get: function get() {
		return _chromeDark2.default;
		}
		});
		Object.defineProperty(exports, "chromeLight", {
		enumerable: true,
		get: function get() {
		return _chromeLight2.default;
		}
		});

		var _chromeDark2 = require('./chromeDark');
		var _chromeDark2 = _interopRequireDefault(require("./chromeDark"));

		var _chromeDark3 = _interopRequireDefault(_chromeDark2);
		var _chromeLight2 = _interopRequireDefault(require("./chromeLight"));

		var _chromeLight2 = require('./chromeLight');

		var _chromeLight3 = _interopRequireDefault(_chromeLight2);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		exports.chromeDark = _chromeDark3.default;
		exports.chromeLight = _chromeLight3.default;
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

8

lib/styles/unselectable.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,3 +6,4 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = {
		exports.default = void 0;
		var _default = {
		WebkitTouchCallout: 'none',
		@@ -15,2 +16,3 @@ WebkitUserSelect: 'none',
		userSelect: 'none'
		};
		};
		exports.default = _default;

126

lib/table-inspector/DataContainer.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,90 +6,62 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _typeof2 = require('babel-runtime/helpers/typeof');
		var _react = _interopRequireDefault(require("react"));

		var _typeof3 = _interopRequireDefault(_typeof2);
		var _ObjectValue = _interopRequireDefault(require("../object/ObjectValue"));

		var _extends2 = require('babel-runtime/helpers/extends');
		var _objectPrototype = require("../utils/objectPrototype");

		var _extends3 = _interopRequireDefault(_extends2);
		var _styles = require("../styles");

		var _react = require('react');
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var _react2 = _interopRequireDefault(_react);
		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

		var _propTypes = require('prop-types');
		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _createStyles = require('../styles/createStyles');

		var _createStyles2 = _interopRequireDefault(_createStyles);

		var _ObjectValue = require('../object/ObjectValue');

		var _ObjectValue2 = _interopRequireDefault(_ObjectValue);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var DataContainer = function DataContainer(_ref, _ref2) {
		var rows = _ref.rows,
		const DataContainer = (_ref) => {
		let rows = _ref.rows,
		columns = _ref.columns,
		rowsData = _ref.rowsData;
		var theme = _ref2.theme;
		const styles = (0, _styles.useStyles)('TableInspectorDataContainer');
		const borderStyles = (0, _styles.useStyles)('TableInspectorLeftBorder');
		return _react.default.createElement("div", {
		style: styles.div
		}, _react.default.createElement("table", {
		style: styles.table
		}, _react.default.createElement("colgroup", null), _react.default.createElement("tbody", null, rows.map((row, i) => _react.default.createElement("tr", {
		key: row,
		style: styles.tr
		}, _react.default.createElement("td", {
		style: _objectSpread({}, styles.td, borderStyles.none)
		}, row), columns.map(column => {
		const rowData = rowsData[i]; // rowData could be
		// object -> index by key
		// array -> index by array index
		// null -> pass
		// boolean -> pass
		// string -> pass (hasOwnProperty returns true for [0..len-1])
		// number -> pass
		// function -> pass
		// symbol
		// undefined -> pass

		var styles = (0, _createStyles2.default)('TableInspectorDataContainer', theme);
		var borderStyles = (0, _createStyles2.default)('TableInspectorLeftBorder', theme);

		return _react2.default.createElement(
		'div',
		{ style: styles.div },
		_react2.default.createElement(
		'table',
		{ style: styles.table },
		_react2.default.createElement('colgroup', null),
		_react2.default.createElement(
		'tbody',
		null,
		rows.map(function (row, i) {
		return _react2.default.createElement(
		'tr',
		{ key: row, style: styles.tr },
		_react2.default.createElement(
		'td',
		{ style: (0, _extends3.default)({}, styles.td, borderStyles.none) },
		row
		),
		columns.map(function (column) {
		var rowData = rowsData[i];
		// rowData could be
		// object -> index by key
		// array -> index by array index
		// null -> pass
		// boolean -> pass
		// string -> pass (hasOwnProperty returns true for [0..len-1])
		// number -> pass
		// function -> pass
		// symbol
		// undefined -> pass
		if ((typeof rowData === 'undefined' ? 'undefined' : (0, _typeof3.default)(rowData)) === 'object' && rowData !== null && rowData.hasOwnProperty(column)) {
		return _react2.default.createElement(
		'td',
		{ key: column, style: (0, _extends3.default)({}, styles.td, borderStyles.solid) },
		_react2.default.createElement(_ObjectValue2.default, { object: rowData[column] })
		);
		} else {
		return _react2.default.createElement('td', { key: column, style: (0, _extends3.default)({}, styles.td, borderStyles.solid) });
		}
		})
		);
		})
		)
		)
		);
		if (typeof rowData === 'object' && rowData !== null && _objectPrototype.hasOwnProperty.call(rowData, column)) {
		return _react.default.createElement("td", {
		key: column,
		style: _objectSpread({}, styles.td, borderStyles.solid)
		}, _react.default.createElement(_ObjectValue.default, {
		object: rowData[column]
		}));
		} else {
		return _react.default.createElement("td", {
		key: column,
		style: _objectSpread({}, styles.td, borderStyles.solid)
		});
		}
		}))))));
		};

		DataContainer.contextTypes = {
		theme: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired
		};

		exports.default = DataContainer;
		var _default = DataContainer;
		exports.default = _default;

54

lib/table-inspector/getHeaders.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,15 +6,4 @@ Object.defineProperty(exports, "__esModule", {
		});

		var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

		var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

		var _typeof2 = require('babel-runtime/helpers/typeof');

		var _typeof3 = _interopRequireDefault(_typeof2);

		exports.default = getHeaders;

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		/*
		@@ -25,10 +14,15 @@ * Polyfill for running tests
		if (!Array.prototype.includes) {
		Array.prototype.includes = function (searchElement /, fromIndex/) {
		Array.prototype.includes = function (searchElement
		/, fromIndex/
		) {
		var O = Object(this);
		var len = parseInt(O.length) \|\| 0;

		if (len === 0) {
		return false;
		}

		var n = parseInt(arguments[1]) \|\| 0;
		var k;

		if (n >= 0) {
		@@ -38,2 +32,3 @@ k = n;
		k = len + n;

		if (k < 0) {
		@@ -43,5 +38,8 @@ k = 0;
		}

		var currentElement;

		while (k < len) {
		currentElement = O[k];

		if (searchElement === currentElement \|\| searchElement !== searchElement && currentElement !== currentElement) {
		@@ -51,4 +49,6 @@ // NaN !== NaN
		}

		k++;
		}

		return false;
		@@ -59,8 +59,8 @@ };
		function getHeaders(data) {
		if ((typeof data === 'undefined' ? 'undefined' : (0, _typeof3.default)(data)) === 'object') {
		var rowHeaders = void 0;
		// is an array
		if (typeof data === 'object') {
		let rowHeaders; // is an array

		if (Array.isArray(data)) {
		var nRows = data.length;
		rowHeaders = [].concat((0, _toConsumableArray3.default)(Array(nRows).keys()));
		const nRows = data.length;
		rowHeaders = [...Array(nRows).keys()];
		} else if (data !== null) {
		@@ -70,11 +70,12 @@ // is an object
		rowHeaders = Object.keys(data);
		}
		} // Time: O(nRows * nCols)

		// Time: O(nRows * nCols)
		var colHeaders = rowHeaders.reduce(function (colHeaders, rowHeader) {
		var row = data[rowHeader];
		if ((typeof row === 'undefined' ? 'undefined' : (0, _typeof3.default)(row)) === 'object' && row !== null) {

		const colHeaders = rowHeaders.reduce((colHeaders, rowHeader) => {
		const row = data[rowHeader];

		if (typeof row === 'object' && row !== null) {
		/* O(nCols) Could optimize `includes` here */
		var cols = Object.keys(row);
		cols.reduce(function (xs, x) {
		const cols = Object.keys(row);
		cols.reduce((xs, x) => {
		if (!xs.includes(x)) {
		@@ -84,5 +85,7 @@ /* xs is the colHeaders to be filled by searching the row's indexes */
		}

		return xs;
		}, colHeaders);
		}

		return colHeaders;
		@@ -95,3 +98,4 @@ }, []);
		}

		return undefined;
		}

130

lib/table-inspector/getHeaders.spec.js

		@@ -1,29 +0,28 @@
		'use strict';
		"use strict";

		var _expect = require('expect');
		var _expect = _interopRequireDefault(require("expect"));

		var _expect2 = _interopRequireDefault(_expect);
		var _getHeaders = _interopRequireDefault(require("./getHeaders"));

		var _getHeaders = require('./getHeaders');

		var _getHeaders2 = _interopRequireDefault(_getHeaders);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		describe('getHeaders for arrays', function () {
		it('should return empty headers for empty array', function () {
		var data = [];
		var result = (0, _getHeaders2.default)(data);

		(0, _expect2.default)(result).toEqual({ rowHeaders: [], colHeaders: [] });
		describe('getHeaders for arrays', () => {
		it('should return empty headers for empty array', () => {
		const data = [];
		const result = (0, _getHeaders.default)(data);
		(0, _expect.default)(result).toEqual({
		rowHeaders: [],
		colHeaders: []
		});
		});

		it('should work for array of arrays', function () {
		var data = [['a', 'b'], ['c', 'd']];
		var result = (0, _getHeaders2.default)(data);
		(0, _expect2.default)(result).toEqual({ rowHeaders: [0, 1], colHeaders: ['0', '1'] });
		it('should work for array of arrays', () => {
		const data = [['a', 'b'], ['c', 'd']];
		const result = (0, _getHeaders.default)(data);
		(0, _expect.default)(result).toEqual({
		rowHeaders: [0, 1],
		colHeaders: ['0', '1']
		});
		});

		it('should work for array of objects', function () {
		var data = [{
		it('should work for array of objects', () => {
		const data = [{
		login: 'rafaelsachetto',
		@@ -35,29 +34,43 @@ id: 42780
		}];
		var result = (0, _getHeaders2.default)(data);
		(0, _expect2.default)(result).toEqual({ rowHeaders: [0, 1], colHeaders: ['login', 'id'] });
		const result = (0, _getHeaders.default)(data);
		(0, _expect.default)(result).toEqual({
		rowHeaders: [0, 1],
		colHeaders: ['login', 'id']
		});
		});
		});

		describe('getHeaders for objects', function () {
		it('should work for objects whose keys are index numbers', function () {
		var data = {
		0: { firstName: 'John', lastName: 'Smith' },
		1: { firstName: 'Martin', middleName: 'Luther', lastName: 'King' }
		describe('getHeaders for objects', () => {
		it('should work for objects whose keys are index numbers', () => {
		const data = {
		0: {
		firstName: 'John',
		lastName: 'Smith'
		},
		1: {
		firstName: 'Martin',
		middleName: 'Luther',
		lastName: 'King'
		}
		};
		var result = (0, _getHeaders2.default)(data);
		(0, _expect2.default)(result).toEqual({
		const result = (0, _getHeaders.default)(data);
		(0, _expect.default)(result).toEqual({
		rowHeaders: ['0', '1'],
		colHeaders: ['firstName', 'lastName', 'middleName']
		});
		});
		}); // for arrays length refers to the length of the array
		// for objects lengths refers to the number of keys

		// for arrays length refers to the length of the array
		// for objects lengths refers to the number of keys
		it('should work for objects whose keys are strings and values are of same lengths', function () {
		var data = {
		person1: { firstName: 'John', lastName: 'Smith' },
		person2: { firstName: 'Martin', lastName: 'King' }
		it('should work for objects whose keys are strings and values are of same lengths', () => {
		const data = {
		person1: {
		firstName: 'John',
		lastName: 'Smith'
		},
		person2: {
		firstName: 'Martin',
		lastName: 'King'
		}
		};
		var result = (0, _getHeaders2.default)(data);
		(0, _expect2.default)(result).toEqual({
		const result = (0, _getHeaders.default)(data);
		(0, _expect.default)(result).toEqual({
		rowHeaders: ['person1', 'person2'],
		@@ -67,10 +80,16 @@ colHeaders: ['firstName', 'lastName']
		});

		it('should work for objects whose keys are strings and values have different lengths', function () {
		var data = {
		person1: { firstName: 'John', lastName: 'Smith' },
		person2: { firstName: 'Martin', middleName: 'Luther', lastName: 'King' }
		it('should work for objects whose keys are strings and values have different lengths', () => {
		const data = {
		person1: {
		firstName: 'John',
		lastName: 'Smith'
		},
		person2: {
		firstName: 'Martin',
		middleName: 'Luther',
		lastName: 'King'
		}
		};
		var result = (0, _getHeaders2.default)(data);
		(0, _expect2.default)(result).toEqual({
		const result = (0, _getHeaders.default)(data);
		(0, _expect.default)(result).toEqual({
		rowHeaders: ['person1', 'person2'],
		@@ -80,9 +99,16 @@ colHeaders: ['firstName', 'lastName', 'middleName']
		});
		it('should work for objects whose values are mix of array and objects', () => {
		const data = {
		0: {
		firstName: 'John'
		},
		1: [1, 2, 3]
		};
		const result = (0, _getHeaders.default)(data); // Chrome has funny result: { rowHeaders: ['0', '1'], colHeaders: ['firstName', '0', '1', '2', 'length'] })

		it('should work for objects whose values are mix of array and objects', function () {
		var data = { 0: { firstName: 'John' }, 1: [1, 2, 3] };
		var result = (0, _getHeaders2.default)(data);
		// Chrome has funny result: { rowHeaders: ['0', '1'], colHeaders: ['firstName', '0', '1', '2', 'length'] })
		(0, _expect2.default)(result).toEqual({ rowHeaders: ['0', '1'], colHeaders: ['firstName', '0', '1', '2'] });
		(0, _expect.default)(result).toEqual({
		rowHeaders: ['0', '1'],
		colHeaders: ['firstName', '0', '1', '2']
		});
		});
		});

100

lib/table-inspector/HeaderContainer.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,24 +6,17 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _styles = require("../styles");

		var _propTypes = require('prop-types');
		var _TH = _interopRequireDefault(require("./TH"));

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _createStyles = require('../styles/createStyles');

		var _createStyles2 = _interopRequireDefault(_createStyles);

		var _TH = require('./TH');

		var _TH2 = _interopRequireDefault(_TH);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var HeaderContainer = function HeaderContainer(_ref, _ref2) {
		var indexColumnText = _ref.indexColumnText,
		columns = _ref.columns,
		const HeaderContainer = (_ref) => {
		let _ref$indexColumnText = _ref.indexColumnText,
		indexColumnText = _ref$indexColumnText === void 0 ? '(index)' : _ref$indexColumnText,
		_ref$columns = _ref.columns,
		columns = _ref$columns === void 0 ? [] : _ref$columns,
		sorted = _ref.sorted,
		@@ -35,56 +28,23 @@ sortIndexColumn = _ref.sortIndexColumn,
		onIndexTHClick = _ref.onIndexTHClick;
		var theme = _ref2.theme;

		var styles = (0, _createStyles2.default)('TableInspectorHeaderContainer', theme);
		var borderStyles = (0, _createStyles2.default)('TableInspectorLeftBorder', theme);
		return _react2.default.createElement(
		'div',
		{ style: styles.base },
		_react2.default.createElement(
		'table',
		{ style: styles.table },
		_react2.default.createElement(
		'tbody',
		null,
		_react2.default.createElement(
		'tr',
		null,
		_react2.default.createElement(
		_TH2.default,
		{
		borderStyle: borderStyles.none,
		sorted: sorted && sortIndexColumn,
		sortAscending: sortAscending,
		onClick: onIndexTHClick
		},
		indexColumnText
		),
		columns.map(function (column) {
		return _react2.default.createElement(
		_TH2.default,
		{
		borderStyle: borderStyles.solid,
		key: column,
		sorted: sorted && sortColumn === column,
		sortAscending: sortAscending,
		onClick: onTHClick.bind(undefined, column)
		},
		column
		);
		})
		)
		)
		)
		);
		const styles = (0, _styles.useStyles)('TableInspectorHeaderContainer');
		const borderStyles = (0, _styles.useStyles)('TableInspectorLeftBorder');
		return _react.default.createElement("div", {
		style: styles.base
		}, _react.default.createElement("table", {
		style: styles.table
		}, _react.default.createElement("tbody", null, _react.default.createElement("tr", null, _react.default.createElement(_TH.default, {
		borderStyle: borderStyles.none,
		sorted: sorted && sortIndexColumn,
		sortAscending: sortAscending,
		onClick: onIndexTHClick
		}, indexColumnText), columns.map(column => _react.default.createElement(_TH.default, {
		borderStyle: borderStyles.solid,
		key: column,
		sorted: sorted && sortColumn === column,
		sortAscending: sortAscending,
		onClick: onTHClick.bind(void 0, column)
		}, column))))));
		};

		HeaderContainer.defaultProps = {
		indexColumnText: '(index)',
		columns: []
		};

		HeaderContainer.contextTypes = {
		theme: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired
		};

		exports.default = HeaderContainer;
		var _default = HeaderContainer;
		exports.default = _default;

369

lib/table-inspector/TableInspector.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,239 +6,189 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _typeof2 = require('babel-runtime/helpers/typeof');
		var _react = _interopRequireWildcard(require("react"));

		var _typeof3 = _interopRequireDefault(_typeof2);
		var _propTypes = _interopRequireDefault(require("prop-types"));

		var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
		var _getHeaders2 = _interopRequireDefault(require("./getHeaders"));

		var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
		var _DataContainer = _interopRequireDefault(require("./DataContainer"));

		var _createClass2 = require('babel-runtime/helpers/createClass');
		var _HeaderContainer = _interopRequireDefault(require("./HeaderContainer"));

		var _createClass3 = _interopRequireDefault(_createClass2);
		var _styles = require("../styles");

		var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get \|\| desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

		var _inherits2 = require('babel-runtime/helpers/inherits');
		function _slicedToArray(arr, i) { return _arrayWithHoles(arr) \|\| _iterableToArrayLimit(arr, i) \|\| _nonIterableRest(); }

		var _inherits3 = _interopRequireDefault(_inherits2);
		function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

		var _react = require('react');
		function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

		var _react2 = _interopRequireDefault(_react);
		function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

		var _propTypes = require('prop-types');
		const TableInspector = (_ref) => {
		let data = _ref.data,
		columns = _ref.columns;
		const styles = (0, _styles.useStyles)('TableInspector');

		var _propTypes2 = _interopRequireDefault(_propTypes);
		const _useState = (0, _react.useState)({
		// has user ever clicked the <th> tag to sort?
		sorted: false,
		// is index column sorted?
		sortIndexColumn: false,
		// which column is sorted?
		sortColumn: undefined,
		// is sorting ascending or descending?
		sortAscending: false
		}),
		_useState2 = _slicedToArray(_useState, 2),
		_useState2$ = _useState2[0],
		sorted = _useState2$.sorted,
		sortIndexColumn = _useState2$.sortIndexColumn,
		sortColumn = _useState2$.sortColumn,
		sortAscending = _useState2$.sortAscending,
		setState = _useState2[1];

		var _ThemeProvider = require('../styles/ThemeProvider');
		const handleIndexTHClick = (0, _react.useCallback)(() => {
		setState((_ref2) => {
		let sortIndexColumn = _ref2.sortIndexColumn,
		sortAscending = _ref2.sortAscending;
		return {
		sorted: true,
		sortIndexColumn: true,
		sortColumn: undefined,
		// when changed to a new column, default to asending
		sortAscending: sortIndexColumn ? !sortAscending : true
		};
		});
		}, []);
		const handleTHClick = (0, _react.useCallback)(col => {
		setState((_ref3) => {
		let sortColumn = _ref3.sortColumn,
		sortAscending = _ref3.sortAscending;
		return {
		sorted: true,
		sortIndexColumn: false,
		// update sort column
		sortColumn: col,
		// when changed to a new column, default to asending
		sortAscending: col === sortColumn ? !sortAscending : true
		};
		});
		}, []);

		var _ThemeProvider2 = _interopRequireDefault(_ThemeProvider);
		if (typeof data !== 'object' \|\| data === null) {
		return _react.default.createElement("div", null);
		}

		var _createStyles = require('../styles/createStyles');
		let _getHeaders = (0, _getHeaders2.default)(data),
		rowHeaders = _getHeaders.rowHeaders,
		colHeaders = _getHeaders.colHeaders; // columns to be displayed are specified
		// NOTE: there's some space for optimization here

		var _createStyles2 = _interopRequireDefault(_createStyles);

		var _getHeaders2 = require('./getHeaders');
		if (columns !== undefined) {
		colHeaders = columns;
		}

		var _getHeaders3 = _interopRequireDefault(_getHeaders2);
		let rowsData = rowHeaders.map(rowHeader => data[rowHeader]);
		let columnDataWithRowIndexes;
		/* row indexes are [0..nRows-1] */
		// TODO: refactor

		var _DataContainer = require('./DataContainer');
		if (sortColumn !== undefined) {
		// the column to be sorted (rowsData, column) => [[columnData, rowIndex]]
		columnDataWithRowIndexes = rowsData.map((rowData, index) => {
		// normalize rowData
		if (typeof rowData === 'object' && rowData !== null
		/&& rowData.hasOwnProperty(sortColumn)/
		) {
		const columnData = rowData[sortColumn];
		return [columnData, index];
		}

		var _DataContainer2 = _interopRequireDefault(_DataContainer);

		var _HeaderContainer = require('./HeaderContainer');

		var _HeaderContainer2 = _interopRequireDefault(_HeaderContainer);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var TableInspector = function (_Component) {
		(0, _inherits3.default)(TableInspector, _Component);

		function TableInspector(props) {
		(0, _classCallCheck3.default)(this, TableInspector);

		var _this = (0, _possibleConstructorReturn3.default)(this, (TableInspector.__proto__ \|\| Object.getPrototypeOf(TableInspector)).call(this, props));

		_this.state = {
		sorted: false, // has user ever clicked the <th> tag to sort?
		sortIndexColumn: false, // is index column sorted?
		sortColumn: undefined, // which column is sorted?
		sortAscending: false // is sorting ascending or descending?
		};
		return _this;
		}

		(0, _createClass3.default)(TableInspector, [{
		key: 'handleIndexTHClick',
		value: function handleIndexTHClick() {
		this.setState(function (_ref) {
		var sortIndexColumn = _ref.sortIndexColumn,
		sortAscending = _ref.sortAscending;
		return {
		sorted: true,
		sortIndexColumn: true,
		sortColumn: undefined,
		// when changed to a new column, default to asending
		sortAscending: sortIndexColumn ? !sortAscending : true
		};
		return [undefined, index];
		});
		} else {
		if (sortIndexColumn) {
		columnDataWithRowIndexes = rowHeaders.map((rowData, index) => {
		const columnData = rowHeaders[index];
		return [columnData, index];
		});
		}
		}, {
		key: 'handleTHClick',
		value: function handleTHClick(col) {
		this.setState(function (_ref2) {
		var sortColumn = _ref2.sortColumn,
		sortAscending = _ref2.sortAscending;
		return {
		sorted: true,
		sortIndexColumn: false,
		// update sort column
		sortColumn: col,
		// when changed to a new column, default to asending
		sortAscending: col === sortColumn ? !sortAscending : true
		};
		});
		}
		}, {
		key: 'render',
		value: function render() {
		var data = this.props.data;
		var columns = this.props.columns;
		}

		var theme = this.props.theme;
		if (columnDataWithRowIndexes !== undefined) {
		// apply a mapper before sorting (because we need to access inside a container)
		const comparator = (mapper, ascending) => {
		return (a, b) => {
		const v1 = mapper(a); // the datum

		var styles = (0, _createStyles2.default)('TableInspector', theme);
		const v2 = mapper(b);
		const type1 = typeof v1;
		const type2 = typeof v2; // use '<' operator to compare same type of values or compare type precedence order #

		if ((typeof data === 'undefined' ? 'undefined' : (0, _typeof3.default)(data)) !== 'object' \|\| data === null) {
		return _react2.default.createElement('div', null);
		}
		const lt = (v1, v2) => {
		if (v1 < v2) {
		return -1;
		} else if (v1 > v2) {
		return 1;
		} else {
		return 0;
		}
		};

		var _getHeaders = (0, _getHeaders3.default)(data),
		rowHeaders = _getHeaders.rowHeaders,
		colHeaders = _getHeaders.colHeaders;
		let result;

		// columns to be displayed are specified
		// NOTE: there's some space for optimization here
		if (type1 === type2) {
		result = lt(v1, v2);
		} else {
		// order of different types
		const order = {
		string: 0,
		number: 1,
		object: 2,
		symbol: 3,
		boolean: 4,
		undefined: 5,
		function: 6
		};
		result = lt(order[type1], order[type2]);
		} // reverse result if descending


		if (columns !== undefined) {
		colHeaders = columns;
		}
		if (!ascending) result = -result;
		return result;
		};
		};

		var rowsData = rowHeaders.map(function (rowHeader) {
		return data[rowHeader];
		});
		const sortedRowIndexes = columnDataWithRowIndexes.sort(comparator(item => item[0], sortAscending)).map(item => item[1]); // sorted row indexes

		var sortIndexColumn = this.state.sortIndexColumn,
		sortColumn = this.state.sortColumn,
		sortAscending = this.state.sortAscending;
		rowHeaders = sortedRowIndexes.map(i => rowHeaders[i]);
		rowsData = sortedRowIndexes.map(i => rowsData[i]);
		}

		var columnDataWithRowIndexes = void 0; /* row indexes are [0..nRows-1] */
		// TODO: refactor
		if (sortColumn !== undefined) {
		// the column to be sorted (rowsData, column) => [[columnData, rowIndex]]
		columnDataWithRowIndexes = rowsData.map(function (rowData, index) {
		// normalize rowData
		if ((typeof rowData === 'undefined' ? 'undefined' : (0, _typeof3.default)(rowData)) === 'object' && rowData !== null /&& rowData.hasOwnProperty(sortColumn)/
		) {
		var columnData = rowData[sortColumn];
		return [columnData, index];
		}
		return [undefined, index];
		});
		} else {
		if (sortIndexColumn) {
		columnDataWithRowIndexes = rowHeaders.map(function (rowData, index) {
		var columnData = rowHeaders[index];
		return [columnData, index];
		});
		}
		}
		if (columnDataWithRowIndexes !== undefined) {
		// apply a mapper before sorting (because we need to access inside a container)
		var comparator = function comparator(mapper, ascending) {
		return function (a, b) {
		var v1 = mapper(a); // the datum
		var v2 = mapper(b);
		var type1 = typeof v1 === 'undefined' ? 'undefined' : (0, _typeof3.default)(v1);
		var type2 = typeof v2 === 'undefined' ? 'undefined' : (0, _typeof3.default)(v2);
		// use '<' operator to compare same type of values or compare type precedence order #
		var lt = function lt(v1, v2) {
		if (v1 < v2) {
		return -1;
		} else if (v1 > v2) {
		return 1;
		} else {
		return 0;
		}
		};
		var result = void 0;
		if (type1 === type2) {
		result = lt(v1, v2);
		} else {
		// order of different types
		var order = {
		string: 0,
		number: 1,
		object: 2,
		symbol: 3,
		boolean: 4,
		undefined: 5,
		function: 6
		};
		result = lt(order[type1], order[type2]);
		}
		// reverse result if descending
		if (!ascending) result = -result;
		return result;
		};
		};
		var sortedRowIndexes = columnDataWithRowIndexes.sort(comparator(function (item) {
		return item[0];
		}, sortAscending)).map(function (item) {
		return item[1];
		}); // sorted row indexes
		rowHeaders = sortedRowIndexes.map(function (i) {
		return rowHeaders[i];
		});
		rowsData = sortedRowIndexes.map(function (i) {
		return rowsData[i];
		});
		}
		return _react.default.createElement("div", {
		style: styles.base
		}, _react.default.createElement(_HeaderContainer.default, {
		columns: colHeaders
		/* for sorting */
		,
		sorted: sorted,
		sortIndexColumn: sortIndexColumn,
		sortColumn: sortColumn,
		sortAscending: sortAscending,
		onTHClick: handleTHClick,
		onIndexTHClick: handleIndexTHClick
		}), _react.default.createElement(_DataContainer.default, {
		rows: rowHeaders,
		columns: colHeaders,
		rowsData: rowsData
		}));
		};

		return _react2.default.createElement(
		_ThemeProvider2.default,
		{ theme: this.props.theme },
		_react2.default.createElement(
		'div',
		{ style: styles.base },
		_react2.default.createElement(_HeaderContainer2.default, {
		columns: colHeaders
		/* for sorting */
		, sorted: this.state.sorted,
		sortIndexColumn: this.state.sortIndexColumn,
		sortColumn: this.state.sortColumn,
		sortAscending: this.state.sortAscending,
		onTHClick: this.handleTHClick.bind(this),
		onIndexTHClick: this.handleIndexTHClick.bind(this)
		}),
		_react2.default.createElement(_DataContainer2.default, { rows: rowHeaders, columns: colHeaders, rowsData: rowsData })
		)
		);
		}
		}]);
		return TableInspector;
		}(_react.Component); /**
		* Specs:
		* https://developer.chrome.com/devtools/docs/commandline-api#tabledata-columns
		* https://developer.mozilla.org/en-US/docs/Web/API/Console/table
		*/

		exports.default = TableInspector;


		TableInspector.propTypes = {
		@@ -248,13 +198,12 @@ /**
		*/
		data: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object]),
		data: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]),

		/**
		* An array of the names of the columns you'd like to display in the table
		*/
		columns: _propTypes2.default.array
		columns: _propTypes.default.array
		};

		TableInspector.defaultProps = {
		data: undefined,
		columns: undefined,
		theme: 'chromeLight'
		};
		var _default = (0, _styles.themeAcceptor)(TableInspector);

		exports.default = _default;

186

lib/table-inspector/TH.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,146 +6,82 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _extends2 = require('babel-runtime/helpers/extends');
		var _react = _interopRequireWildcard(require("react"));

		var _extends3 = _interopRequireDefault(_extends2);
		var _styles = require("../styles");

		var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get \|\| desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

		var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
		function _extends() { _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

		var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		var _createClass2 = require('babel-runtime/helpers/createClass');
		function _slicedToArray(arr, i) { return _arrayWithHoles(arr) \|\| _iterableToArrayLimit(arr, i) \|\| _nonIterableRest(); }

		var _createClass3 = _interopRequireDefault(_createClass2);
		function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

		var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
		function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

		var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
		function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

		var _inherits2 = require('babel-runtime/helpers/inherits');
		function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

		var _inherits3 = _interopRequireDefault(_inherits2);
		function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

		var _react = require('react');
		const SortIconContainer = props => _react.default.createElement("div", {
		style: {
		position: 'absolute',
		top: 1,
		right: 0,
		bottom: 1,
		display: 'flex',
		alignItems: 'center'
		}
		}, props.children);

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _createStyles = require('../styles/createStyles');

		var _createStyles2 = _interopRequireDefault(_createStyles);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var SortIconContainer = function SortIconContainer(props) {
		return _react2.default.createElement(
		'div',
		{
		style: {
		position: 'absolute',
		top: 1,
		right: 0,
		bottom: 1,
		display: 'flex',
		alignItems: 'center'
		}
		},
		props.children
		);
		const SortIcon = (_ref) => {
		let sortAscending = _ref.sortAscending;
		const styles = (0, _styles.useStyles)('TableInspectorSortIcon');
		const glyph = sortAscending ? '▲' : '▼';
		return _react.default.createElement("div", {
		style: styles
		}, glyph);
		};

		var SortIcon = function SortIcon(_ref, _ref2) {
		var sortAscending = _ref.sortAscending;
		var theme = _ref2.theme;
		const TH = (_ref2) => {
		let _ref2$sortAscending = _ref2.sortAscending,
		sortAscending = _ref2$sortAscending === void 0 ? false : _ref2$sortAscending,
		_ref2$sorted = _ref2.sorted,
		sorted = _ref2$sorted === void 0 ? false : _ref2$sorted,
		_ref2$onClick = _ref2.onClick,
		onClick = _ref2$onClick === void 0 ? undefined : _ref2$onClick,
		_ref2$borderStyle = _ref2.borderStyle,
		borderStyle = _ref2$borderStyle === void 0 ? {} : _ref2$borderStyle,
		children = _ref2.children,
		thProps = _objectWithoutProperties(_ref2, ["sortAscending", "sorted", "onClick", "borderStyle", "children"]);

		var glyph = sortAscending ? '▲' : '▼';
		var styles = (0, _createStyles2.default)('TableInspectorSortIcon', theme);
		return _react2.default.createElement(
		'div',
		{ style: styles },
		glyph
		);
		};
		const styles = (0, _styles.useStyles)('TableInspectorTH');

		SortIcon.contextTypes = {
		theme: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired
		};
		const _useState = (0, _react.useState)(false),
		_useState2 = _slicedToArray(_useState, 2),
		hovered = _useState2[0],
		setHovered = _useState2[1];

		var TH = function (_Component) {
		(0, _inherits3.default)(TH, _Component);

		function TH() {
		var _ref3;

		var _temp, _this, _ret;

		(0, _classCallCheck3.default)(this, TH);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
		args[_key] = arguments[_key];
		}

		return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref3 = TH.__proto__ \|\| Object.getPrototypeOf(TH)).call.apply(_ref3, [this].concat(args))), _this), _this.state = { hovered: false }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
		}

		(0, _createClass3.default)(TH, [{
		key: 'toggleHovered',
		value: function toggleHovered(hovered) {
		this.setState({ hovered: hovered });
		}
		}, {
		key: 'render',
		value: function render() {
		// either not sorted, sort ascending or sort descending
		var _props = this.props,
		borderStyle = _props.borderStyle,
		children = _props.children,
		onClick = _props.onClick,
		sortAscending = _props.sortAscending,
		sorted = _props.sorted,
		props = (0, _objectWithoutProperties3.default)(_props, ['borderStyle', 'children', 'onClick', 'sortAscending', 'sorted']);
		var theme = this.context.theme;

		var styles = (0, _createStyles2.default)('TableInspectorTH', theme);

		return _react2.default.createElement(
		'th',
		(0, _extends3.default)({}, props, {
		style: (0, _extends3.default)({}, styles.base, borderStyle, this.state.hovered ? styles.base[':hover'] : {}),
		onMouseEnter: this.toggleHovered.bind(this, true),
		onMouseLeave: this.toggleHovered.bind(this, false),
		onClick: onClick
		}),
		_react2.default.createElement(
		'div',
		{ style: styles.div },
		children
		),
		sorted && _react2.default.createElement(
		SortIconContainer,
		null,
		_react2.default.createElement(SortIcon, { sortAscending: sortAscending })
		)
		);
		}
		}]);
		return TH;
		}(_react.Component);

		TH.contextTypes = {
		theme: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired
		const handleMouseEnter = (0, _react.useCallback)(() => setHovered(true), []);
		const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), []);
		return _react.default.createElement("th", _extends({}, thProps, {
		style: _objectSpread({}, styles.base, borderStyle, hovered ? styles.base[':hover'] : {}),
		onMouseEnter: handleMouseEnter,
		onMouseLeave: handleMouseLeave,
		onClick: onClick
		}), _react.default.createElement("div", {
		style: styles.div
		}, children), sorted && _react.default.createElement(SortIconContainer, null, _react.default.createElement(SortIcon, {
		sortAscending: sortAscending
		})));
		};

		TH.defaultProps = {
		sortAscending: false,
		sorted: false,
		onClick: undefined
		};

		exports.default = TH;
		var _default = TH;
		exports.default = _default;

89

lib/tree-view/pathUtils.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -7,6 +7,12 @@ Object.defineProperty(exports, "__esModule", {
		exports.hasChildNodes = hasChildNodes;
		var DEFAULT_ROOT_PATH = exports.DEFAULT_ROOT_PATH = '$';
		exports.getExpandedPaths = exports.wildcardPathsFromLevel = exports.DEFAULT_ROOT_PATH = void 0;

		var WILDCARD = '*';
		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		const DEFAULT_ROOT_PATH = '$';
		exports.DEFAULT_ROOT_PATH = DEFAULT_ROOT_PATH;
		const WILDCARD = '*';

		function hasChildNodes(data, dataIterator) {
		@@ -16,22 +22,21 @@ return !dataIterator(data).next().done;

		var wildcardPathsFromLevel = exports.wildcardPathsFromLevel = function wildcardPathsFromLevel(level) {
		const wildcardPathsFromLevel = level => {
		// i is depth
		return Array.from({ length: level }, function (_, i) {
		return [DEFAULT_ROOT_PATH].concat(Array.from({ length: i }, function () {
		return '*';
		})).join('.');
		});
		return Array.from({
		length: level
		}, (_, i) => [DEFAULT_ROOT_PATH].concat(Array.from({
		length: i
		}, () => '*')).join('.'));
		};

		var getExpandedPaths = exports.getExpandedPaths = function getExpandedPaths(data, dataIterator, expandPaths, expandLevel) {
		var initialState = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
		exports.wildcardPathsFromLevel = wildcardPathsFromLevel;

		var wildcardPaths = [].concat(wildcardPathsFromLevel(expandLevel)).concat(expandPaths).filter(function (path) {
		return typeof path === 'string';
		}); // could be undefined
		const getExpandedPaths = (data, dataIterator, expandPaths, expandLevel, prevExpandedPaths) => {
		let wildcardPaths = [].concat(wildcardPathsFromLevel(expandLevel)).concat(expandPaths).filter(path => typeof path === 'string'); // could be undefined

		var expandedPaths = [];
		wildcardPaths.forEach(function (wildcardPath) {
		var keyPaths = wildcardPath.split('.');
		var populatePaths = function populatePaths(curData, curPath, depth) {
		const expandedPaths = [];
		wildcardPaths.forEach(wildcardPath => {
		const keyPaths = wildcardPath.split('.');

		const populatePaths = (curData, curPath, depth) => {
		if (depth === keyPaths.length) {
		@@ -41,3 +46,5 @@ expandedPaths.push(curPath);
		}
		var key = keyPaths[depth];

		const key = keyPaths[depth];

		if (depth === 0) {
		@@ -49,34 +56,15 @@ if (hasChildNodes(curData, dataIterator) && (key === DEFAULT_ROOT_PATH \|\| key === WILDCARD)) {
		if (key === WILDCARD) {
		var _iteratorNormalCompletion = true;
		var _didIteratorError = false;
		var _iteratorError = undefined;
		for (let _ref of dataIterator(curData)) {
		let name = _ref.name,
		data = _ref.data;

		try {
		for (var _iterator = dataIterator(curData)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
		var _ref2 = _step.value;
		var name = _ref2.name,
		_data = _ref2.data;

		if (hasChildNodes(_data, dataIterator)) {
		populatePaths(_data, curPath + '.' + name, depth + 1);
		}
		if (hasChildNodes(data, dataIterator)) {
		populatePaths(data, `${curPath}.${name}`, depth + 1);
		}
		} catch (err) {
		_didIteratorError = true;
		_iteratorError = err;
		} finally {
		try {
		if (!_iteratorNormalCompletion && _iterator.return) {
		_iterator.return();
		}
		} finally {
		if (_didIteratorError) {
		throw _iteratorError;
		}
		}
		}
		} else {
		var value = curData[key];
		const value = curData[key];

		if (hasChildNodes(value, dataIterator)) {
		populatePaths(value, curPath + '.' + key, depth + 1);
		populatePaths(value, `${curPath}.${key}`, depth + 1);
		}
		@@ -89,7 +77,8 @@ }
		});

		return expandedPaths.reduce(function (obj, path) {
		return expandedPaths.reduce((obj, path) => {
		obj[path] = true;
		return obj;
		}, initialState);
		};
		}, _objectSpread({}, prevExpandedPaths));
		};

		exports.getExpandedPaths = getExpandedPaths;

39

lib/tree-view/pathUtils.spec.js

		@@ -1,32 +0,21 @@
		'use strict';
		"use strict";

		var _expect = require('expect');
		var _expect = _interopRequireDefault(require("expect"));

		var _expect2 = _interopRequireDefault(_expect);
		var _pathUtils = require("./pathUtils");

		var _pathUtils = require('./pathUtils');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var root = _pathUtils.DEFAULT_ROOT_PATH;

		describe('PathUtils', function () {
		beforeEach(function () {});

		it('wildcardPathsFromLevel works', function () {
		(0, _expect2.default)((0, _pathUtils.wildcardPathsFromLevel)(-1)).toEqual([]);

		(0, _expect2.default)((0, _pathUtils.wildcardPathsFromLevel)(0)).toEqual([]);

		(0, _expect2.default)((0, _pathUtils.wildcardPathsFromLevel)(1)).toEqual([root]);

		(0, _expect2.default)((0, _pathUtils.wildcardPathsFromLevel)(2)).toEqual([root, root + '.*']);

		(0, _expect2.default)((0, _pathUtils.wildcardPathsFromLevel)(3)).toEqual([root, root + '.', root + '..*']);

		(0, _expect2.default)((0, _pathUtils.wildcardPathsFromLevel)(4)).toEqual([root, root + '.', root + '..', root + '...']);
		});

		// it('getExpandedPaths works', () => {
		const root = _pathUtils.DEFAULT_ROOT_PATH;
		describe('PathUtils', () => {
		beforeEach(() => {});
		it('wildcardPathsFromLevel works', () => {
		(0, _expect.default)((0, _pathUtils.wildcardPathsFromLevel)(-1)).toEqual([]);
		(0, _expect.default)((0, _pathUtils.wildcardPathsFromLevel)(0)).toEqual([]);
		(0, _expect.default)((0, _pathUtils.wildcardPathsFromLevel)(1)).toEqual([root]);
		(0, _expect.default)((0, _pathUtils.wildcardPathsFromLevel)(2)).toEqual([root, `${root}.*`]);
		(0, _expect.default)((0, _pathUtils.wildcardPathsFromLevel)(3)).toEqual([root, `${root}.`, `${root}..*`]);
		(0, _expect.default)((0, _pathUtils.wildcardPathsFromLevel)(4)).toEqual([root, `${root}.`, `${root}..`, `${root}...`]);
		}); // it('getExpandedPaths works', () => {
		// })
		});

183

lib/tree-view/TreeNode.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,134 +6,75 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
		var _react = _interopRequireWildcard(require("react"));

		var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
		var _propTypes = _interopRequireDefault(require("prop-types"));

		var _createClass2 = require('babel-runtime/helpers/createClass');
		var _styles = require("../styles");

		var _createClass3 = _interopRequireDefault(_createClass2);
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get \|\| desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

		var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

		var _inherits2 = require('babel-runtime/helpers/inherits');
		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		var _inherits3 = _interopRequireDefault(_inherits2);

		var _extends2 = require('babel-runtime/helpers/extends');

		var _extends3 = _interopRequireDefault(_extends2);

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _createStyles = require('../styles/createStyles');

		var _createStyles2 = _interopRequireDefault(_createStyles);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var Arrow = function Arrow(_ref) {
		var expanded = _ref.expanded,
		const Arrow = (_ref) => {
		let expanded = _ref.expanded,
		styles = _ref.styles;
		return _react2.default.createElement(
		'span',
		{ style: (0, _extends3.default)({}, styles.base, expanded ? styles.expanded : styles.collapsed) },
		'\u25B6'
		);
		return _react.default.createElement("span", {
		style: _objectSpread({}, styles.base, expanded ? styles.expanded : styles.collapsed)
		}, "\u25B6");
		};

		var TreeNode = function (_Component) {
		(0, _inherits3.default)(TreeNode, _Component);

		function TreeNode() {
		(0, _classCallCheck3.default)(this, TreeNode);
		return (0, _possibleConstructorReturn3.default)(this, (TreeNode.__proto__ \|\| Object.getPrototypeOf(TreeNode)).apply(this, arguments));
		}

		(0, _createClass3.default)(TreeNode, [{
		key: 'render',
		value: function render() {
		var _props = this.props,
		expanded = _props.expanded,
		onClick = _props.onClick,
		children = _props.children,
		nodeRenderer = _props.nodeRenderer,
		title = _props.title,
		shouldShowArrow = _props.shouldShowArrow,
		shouldShowPlaceholder = _props.shouldShowPlaceholder;
		var theme = this.context.theme;

		var styles = (0, _createStyles2.default)('TreeNode', theme);

		var renderedNode = (0, _react.createElement)(nodeRenderer, this.props);
		var childNodes = expanded ? children : undefined;

		return _react2.default.createElement(
		'li',
		{ 'aria-expanded': expanded, role: 'treeitem', style: styles.treeNodeBase, title: title },
		_react2.default.createElement(
		'div',
		{ style: styles.treeNodePreviewContainer, onClick: onClick },
		shouldShowArrow \|\| _react.Children.count(children) > 0 ? _react2.default.createElement(Arrow, { expanded: expanded, styles: styles.treeNodeArrow }) : shouldShowPlaceholder && _react2.default.createElement(
		'span',
		{ style: styles.treeNodePlaceholder },
		'\xA0'
		),
		renderedNode
		),
		_react2.default.createElement(
		'ol',
		{ role: 'group', style: styles.treeNodeChildNodesContainer },
		childNodes
		)
		);
		}
		}]);
		return TreeNode;
		}(_react.Component);

		const TreeNode = (0, _react.memo)(props => {
		props = _objectSpread({
		expanded: true,
		nodeRenderer: (_ref2) => {
		let name = _ref2.name;
		return _react.default.createElement("span", null, name);
		},
		onClick: () => {},
		shouldShowArrow: false,
		shouldShowPlaceholder: true
		}, props);
		const _props = props,
		expanded = _props.expanded,
		onClick = _props.onClick,
		children = _props.children,
		nodeRenderer = _props.nodeRenderer,
		title = _props.title,
		shouldShowArrow = _props.shouldShowArrow,
		shouldShowPlaceholder = _props.shouldShowPlaceholder;
		const styles = (0, _styles.useStyles)('TreeNode');
		const NodeRenderer = nodeRenderer;
		return _react.default.createElement("li", {
		"aria-expanded": expanded,
		role: "treeitem",
		style: styles.treeNodeBase,
		title: title
		}, _react.default.createElement("div", {
		style: styles.treeNodePreviewContainer,
		onClick: onClick
		}, shouldShowArrow \|\| _react.Children.count(children) > 0 ? _react.default.createElement(Arrow, {
		expanded: expanded,
		styles: styles.treeNodeArrow
		}) : shouldShowPlaceholder && _react.default.createElement("span", {
		style: styles.treeNodePlaceholder
		}, "\xA0"), _react.default.createElement(NodeRenderer, props)), _react.default.createElement("ol", {
		role: "group",
		style: styles.treeNodeChildNodesContainer
		}, expanded ? children : undefined));
		});
		TreeNode.propTypes = {
		name: _propTypes2.default.string,
		data: _propTypes2.default.any,

		expanded: _propTypes2.default.bool,
		shouldShowArrow: _propTypes2.default.bool,
		shouldShowPlaceholder: _propTypes2.default.bool,

		nodeRenderer: _propTypes2.default.func,

		onClick: _propTypes2.default.func
		name: _propTypes.default.string,
		data: _propTypes.default.any,
		expanded: _propTypes.default.bool,
		shouldShowArrow: _propTypes.default.bool,
		shouldShowPlaceholder: _propTypes.default.bool,
		nodeRenderer: _propTypes.default.func,
		onClick: _propTypes.default.func
		};

		TreeNode.defaultProps = {
		name: undefined,
		data: undefined,
		expanded: true,

		nodeRenderer: function nodeRenderer(_ref2) {
		var name = _ref2.name;
		return _react2.default.createElement(
		'span',
		null,
		name
		);
		},

		onClick: function onClick() {},

		shouldShowArrow: false,
		shouldShowPlaceholder: true
		};

		TreeNode.contextTypes = {
		theme: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired
		};

		exports.default = TreeNode;
		var _default = TreeNode;
		exports.default = _default;

341

lib/tree-view/TreeView.js

		@@ -1,2 +0,2 @@
		'use strict';
		"use strict";

		@@ -6,271 +6,126 @@ Object.defineProperty(exports, "__esModule", {
		});
		exports.default = void 0;

		var _extends2 = require('babel-runtime/helpers/extends');
		var _react = _interopRequireWildcard(require("react"));

		var _extends3 = _interopRequireDefault(_extends2);
		var _propTypes = _interopRequireDefault(require("prop-types"));

		var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
		var _ExpandedPathsContext = _interopRequireDefault(require("./ExpandedPathsContext"));

		var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
		var _TreeNode = _interopRequireDefault(require("./TreeNode"));

		var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
		var _pathUtils = require("./pathUtils");

		var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
		var _styles = require("../styles");

		var _createClass2 = require('babel-runtime/helpers/createClass');

		var _createClass3 = _interopRequireDefault(_createClass2);

		var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

		var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

		var _inherits2 = require('babel-runtime/helpers/inherits');

		var _inherits3 = _interopRequireDefault(_inherits2);

		var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

		var _defineProperty3 = _interopRequireDefault(_defineProperty2);

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _TreeNode = require('./TreeNode');

		var _TreeNode2 = _interopRequireDefault(_TreeNode);

		var _pathUtils = require('./pathUtils');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var reducer = function reducer(state, action) {
		switch (action.type) {
		case 'TOGGLE_EXPAND':
		{
		var path = action.path;
		var expandedPaths = state.expandedPaths;
		var expanded = !!expandedPaths[path];
		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get \|\| desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

		return Object.assign({}, state, {
		expandedPaths: Object.assign({}, state.expandedPaths, (0, _defineProperty3.default)({}, path, !expanded))
		});
		}
		default:
		return state;
		}
		};
		function _extends() { _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var ConnectedTreeNode = function (_Component) {
		(0, _inherits3.default)(ConnectedTreeNode, _Component);
		function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

		function ConnectedTreeNode(props, context) {
		(0, _classCallCheck3.default)(this, ConnectedTreeNode);
		function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

		var _this = (0, _possibleConstructorReturn3.default)(this, (ConnectedTreeNode.__proto__ \|\| Object.getPrototypeOf(ConnectedTreeNode)).call(this, props));
		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

		_this.state = context.store.storeState;
		return _this;
		}
		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		(0, _createClass3.default)(ConnectedTreeNode, [{
		key: 'shouldComponentUpdate',
		value: function shouldComponentUpdate(nextProps, nextState) {
		return !!nextState.expandedPaths[nextProps.path] !== !!this.state.expandedPaths[this.props.path] \|\| nextProps.data !== this.props.data \|\| nextProps.name !== this.props.name;
		}
		}, {
		key: 'handleClick',
		value: function handleClick(path) {
		this.context.store.storeState = reducer(this.context.store.storeState, {
		type: 'TOGGLE_EXPAND',
		path: path
		});
		this.setState(this.context.store.storeState);
		}
		}, {
		key: 'renderChildNodes',
		value: function renderChildNodes(parentData, parentPath) {
		var dataIterator = this.props.dataIterator;
		var depth = this.props.depth;
		var nodeRenderer = this.props.nodeRenderer;
		function _slicedToArray(arr, i) { return _arrayWithHoles(arr) \|\| _iterableToArrayLimit(arr, i) \|\| _nonIterableRest(); }

		function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

		var childNodes = [];
		var _iteratorNormalCompletion = true;
		var _didIteratorError = false;
		var _iteratorError = undefined;
		function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

		try {
		for (var _iterator = dataIterator(parentData)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
		var _ref2 = _step.value;
		var name = _ref2.name,
		data = _ref2.data,
		props = (0, _objectWithoutProperties3.default)(_ref2, ['name', 'data']);
		function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

		var key = name;
		var path = parentPath + '.' + key;
		childNodes.push(_react2.default.createElement(ConnectedTreeNode, (0, _extends3.default)({
		name: name,
		data: data,
		depth: depth + 1,
		path: path,
		key: key,
		dataIterator: dataIterator,
		nodeRenderer: nodeRenderer
		}, props)) // props for nodeRenderer
		);
		}
		} catch (err) {
		_didIteratorError = true;
		_iteratorError = err;
		} finally {
		try {
		if (!_iteratorNormalCompletion && _iterator.return) {
		_iterator.return();
		}
		} finally {
		if (_didIteratorError) {
		throw _iteratorError;
		}
		}
		}
		const ConnectedTreeNode = (0, _react.memo)(props => {
		const data = props.data,
		dataIterator = props.dataIterator,
		path = props.path,
		depth = props.depth,
		nodeRenderer = props.nodeRenderer;

		return childNodes;
		}
		}, {
		key: 'render',
		value: function render() {
		var _props = this.props,
		data = _props.data,
		dataIterator = _props.dataIterator,
		path = _props.path,
		depth = _props.depth;
		const _useContext = (0, _react.useContext)(_ExpandedPathsContext.default),
		_useContext2 = _slicedToArray(_useContext, 2),
		expandedPaths = _useContext2[0],
		setExpandedPaths = _useContext2[1];

		const nodeHasChildNodes = (0, _pathUtils.hasChildNodes)(data, dataIterator);
		const expanded = !!expandedPaths[path];
		const handleClick = (0, _react.useCallback)(() => nodeHasChildNodes && setExpandedPaths(prevExpandedPaths => _objectSpread({}, prevExpandedPaths, {
		[path]: !expanded
		})), [nodeHasChildNodes, setExpandedPaths, path, expanded]);
		return _react.default.createElement(_TreeNode.default, _extends({
		expanded: expanded,
		onClick: handleClick // show arrow anyway even if not expanded and not rendering children
		,
		shouldShowArrow: nodeHasChildNodes // show placeholder only for non root nodes
		,
		shouldShowPlaceholder: depth > 0 // Render a node from name and data (or possibly other props like isNonenumerable)
		,
		nodeRenderer: nodeRenderer
		}, props), // only render if the node is expanded
		expanded ? [...dataIterator(data)].map((_ref) => {
		let name = _ref.name,
		data = _ref.data,
		renderNodeProps = _objectWithoutProperties(_ref, ["name", "data"]);

		var nodeHasChildNodes = (0, _pathUtils.hasChildNodes)(data, dataIterator);
		var expandedPaths = this.state.expandedPaths;

		var expanded = !!expandedPaths[path];

		var nodeRenderer = this.props.nodeRenderer;


		return _react2.default.createElement(
		_TreeNode2.default,
		(0, _extends3.default)({
		expanded: expanded,
		onClick: nodeHasChildNodes ? this.handleClick.bind(this, path) : function () {}
		// show arrow anyway even if not expanded and not rendering children
		, shouldShowArrow: nodeHasChildNodes
		// show placeholder only for non root nodes
		, shouldShowPlaceholder: depth > 0
		// Render a node from name and data (or possibly other props like isNonenumerable)
		, nodeRenderer: nodeRenderer
		}, this.props),
		// only render if the node is expanded
		expanded ? this.renderChildNodes(data, path) : undefined
		);
		}
		}]);
		return ConnectedTreeNode;
		}(_react.Component);

		return _react.default.createElement(ConnectedTreeNode, _extends({
		name: name,
		data: data,
		depth: depth + 1,
		path: `${path}.${name}`,
		key: name,
		dataIterator: dataIterator,
		nodeRenderer: nodeRenderer
		}, renderNodeProps));
		}) : null);
		});
		ConnectedTreeNode.propTypes = {
		name: _propTypes2.default.string,
		data: _propTypes2.default.any,
		dataIterator: _propTypes2.default.func,

		depth: _propTypes2.default.number,
		expanded: _propTypes2.default.bool,

		nodeRenderer: _propTypes2.default.func
		name: _propTypes.default.string,
		data: _propTypes.default.any,
		dataIterator: _propTypes.default.func,
		depth: _propTypes.default.number,
		expanded: _propTypes.default.bool,
		nodeRenderer: _propTypes.default.func
		};
		const TreeView = (0, _react.memo)((_ref2) => {
		let name = _ref2.name,
		data = _ref2.data,
		dataIterator = _ref2.dataIterator,
		nodeRenderer = _ref2.nodeRenderer,
		expandPaths = _ref2.expandPaths,
		expandLevel = _ref2.expandLevel;
		const styles = (0, _styles.useStyles)('TreeView');
		const stateAndSetter = (0, _react.useState)({});

		ConnectedTreeNode.contextTypes = {
		store: _propTypes2.default.any
		};
		const _stateAndSetter = _slicedToArray(stateAndSetter, 2),
		setExpandedPaths = _stateAndSetter[1];

		var TreeView = function (_Component2) {
		(0, _inherits3.default)(TreeView, _Component2);

		function TreeView(props) {
		(0, _classCallCheck3.default)(this, TreeView);

		var _this2 = (0, _possibleConstructorReturn3.default)(this, (TreeView.__proto__ \|\| Object.getPrototypeOf(TreeView)).call(this, props));

		_this2.store = {
		storeState: {
		expandedPaths: (0, _pathUtils.getExpandedPaths)(props.data, props.dataIterator, props.expandPaths, props.expandLevel)
		}
		};
		return _this2;
		}

		(0, _createClass3.default)(TreeView, [{
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(nextProps) {
		this.store = {
		storeState: {
		expandedPaths: (0, _pathUtils.getExpandedPaths)(nextProps.data, nextProps.dataIterator, nextProps.expandPaths, nextProps.expandLevel, this.store.storeState.expandedPaths)
		}
		};
		}
		}, {
		key: 'getChildContext',
		value: function getChildContext() {
		return {
		store: this.store
		};
		}
		}, {
		key: 'render',
		value: function render() {
		var _props2 = this.props,
		name = _props2.name,
		data = _props2.data,
		dataIterator = _props2.dataIterator;
		var nodeRenderer = this.props.nodeRenderer;


		var rootPath = _pathUtils.DEFAULT_ROOT_PATH;

		return _react2.default.createElement(ConnectedTreeNode, {
		name: name,
		data: data,
		dataIterator: dataIterator,
		depth: 0,
		path: rootPath,
		nodeRenderer: nodeRenderer
		});
		}
		}]);
		return TreeView;
		}(_react.Component);

		TreeView.defaultProps = {
		expandLevel: 0,
		expandPaths: []
		};
		TreeView.childContextTypes = {
		store: _propTypes2.default.any
		};


		(0, _react.useLayoutEffect)(() => setExpandedPaths(prevExpandedPaths => (0, _pathUtils.getExpandedPaths)(data, dataIterator, expandPaths, expandLevel, prevExpandedPaths)), [data, dataIterator, expandPaths, expandLevel]);
		return _react.default.createElement(_ExpandedPathsContext.default.Provider, {
		value: stateAndSetter
		}, _react.default.createElement("ol", {
		role: "tree",
		style: styles.treeViewOutline
		}, _react.default.createElement(ConnectedTreeNode, {
		name: name,
		data: data,
		dataIterator: dataIterator,
		depth: 0,
		path: _pathUtils.DEFAULT_ROOT_PATH,
		nodeRenderer: nodeRenderer
		})));
		});
		TreeView.propTypes = {
		name: _propTypes2.default.string,
		data: _propTypes2.default.any,
		dataIterator: _propTypes2.default.func,

		nodeRenderer: _propTypes2.default.func
		name: _propTypes.default.string,
		data: _propTypes.default.any,
		dataIterator: _propTypes.default.func,
		nodeRenderer: _propTypes.default.func,
		expandPaths: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
		expandLevel: _propTypes.default.number
		};

		TreeView.defaultProps = {
		name: undefined
		};

		exports.default = TreeView;
		var _default = TreeView;
		exports.default = _default;

52

package.json

		{
		"name": "react-inspector",
		"version": "2.3.1",
		"version": "3.0.0",
		"description": "Power of Browser DevTools inspectors right inside your React app",
		@@ -43,2 +43,3 @@ "keywords": [
		"test": "jest src",
		"test:updatesnapshot": "jest src --update-snapshot",
		"test:watch": "npm run test -- --watch"
		@@ -52,34 +53,39 @@ },
		"devDependencies": {
		"@storybook/react": "^3.4.0",
		"babel-cli": "^6.26.0",
		"babel-core": "^6.26.0",
		"babel-eslint": "^8.2.2",
		"babel-loader": "^7.1.4",
		"babel-plugin-transform-runtime": "^6.23.0",
		"babel-preset-es2015": "^6.24.1",
		"babel-preset-react": "^6.24.1",
		"babel-preset-stage-0": "^6.24.1",
		"babel-register": "^6.26.0",
		"@babel/cli": "^7.2.3",
		"@babel/core": "^7.2.2",
		"@babel/plugin-proposal-class-properties": "^7.3.0",
		"@babel/plugin-proposal-do-expressions": "^7.2.0",
		"@babel/plugin-proposal-export-default-from": "^7.2.0",
		"@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0",
		"@babel/plugin-proposal-object-rest-spread": "^7.3.1",
		"@babel/plugin-proposal-optional-chaining": "^7.2.0",
		"@babel/plugin-transform-object-assign": "^7.2.0",
		"@babel/preset-env": "^7.3.1",
		"@babel/preset-react": "^7.0.0",
		"@babel/register": "^7.0.0",
		"@storybook/react": "^4.1.11",
		"babel-eslint": "^10.0.1",
		"babel-loader": "^8.0.5",
		"core-js": "^2.5.5",
		"css-loader": "^0.28.11",
		"eslint": "^4.19.1",
		"css-loader": "^2.1.0",
		"eslint": "^5.13.0",
		"eslint-plugin-jasmine": "^2.9.3",
		"eslint-plugin-react": "^7.7.0",
		"expect": "^22.4.3",
		"jest": "^22.4.3",
		"prettier": "^1.11.1",
		"react": "^16.3.1",
		"react-dom": "^16.3.1",
		"expect": "^24.0.0",
		"jest": "^24.0.0",
		"prettier": "^1.16.3",
		"react": "^16.8.4",
		"react-dom": "^16.8.4",
		"react-hot-loader": "^4.0.1",
		"react-test-renderer": "^16.3.1",
		"rebug": "^0.0.3",
		"react-test-renderer": "^16.8.0-alpha.1",
		"rimraf": "^2.6.2",
		"style-loader": "^0.20.3",
		"style-loader": "^0.23.1",
		"webpack": "^4.5.0",
		"webpack-cli": "^2.0.14",
		"webpack-cli": "^3.2.1",
		"webpack-dev-server": "^3.1.3"
		},
		"peerDependencies": {
		"react": "^0.14.0 \|\| ^15.0.0 \|\| ^16.0.0"
		"react": "^16.8.4"
		}
		}

lib/styles/createStyles.js

lib/styles/ThemeProvider.js

yarn.lock

Sorry, the diff of this file is not supported yet

react-inspector - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics