react-inspector - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

lib/dom-inspector/DOMInspector.js

@@ -47,13 +47,8 @@ 'use strict';
 
+var _ThemeProvider = require('../styles/ThemeProvider');
+
+var _ThemeProvider2 = _interopRequireDefault(_ThemeProvider);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// Customize styles
-var styles = {
-  treeNode: {
-    childNodesContainer: {
-      paddingLeft: 14
-    }
-  }
-};
-
 var domIterator = _regenerator2.default.mark(function domIterator(data) {
@@ -143,6 +138,12 @@ var textInlined, i, node;
     value: function render() {
-      return _react2.default.createElement(_TreeView2.default, (0, _extends3.default)({
-        nodeRenderer: _DOMNodePreview2.default,
-        dataIterator: domIterator
-      }, this.props));
+      var nodeRenderer = _DOMNodePreview2.default;
+
+      return _react2.default.createElement(
+        _ThemeProvider2.default,
+        { theme: this.props.theme },
+        _react2.default.createElement(_TreeView2.default, (0, _extends3.default)({
+          nodeRenderer: nodeRenderer,
+          dataIterator: domIterator
+        }, this.props))
+      );
     }
@@ -157,2 +158,5 @@ }]);
 };
+DOMInspector.defaultProps = {
+  theme: 'chromeLight'
+};
 exports.default = DOMInspector;

lib/dom-inspector/DOMNodePreview.js

@@ -7,6 +7,2 @@ 'use strict';
 
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
 var _react = require('react');
@@ -16,2 +12,6 @@
 
+var _createStyles = require('../styles/createStyles');
+
+var _createStyles2 = _interopRequireDefault(_createStyles);
+
 var _shouldInline = require('./shouldInline');
@@ -21,6 +21,2 @@
 
-var _domNodeStyles = require('../styles/domNodeStyles');
-
-var _domNodeStyles2 = _interopRequireDefault(_domNodeStyles);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,10 +27,11 @@
   var attributes = _ref.attributes;
+  var styles = _ref.styles;
 
   return _react2.default.createElement(
     'span',
-    { style: _domNodeStyles2.default.htmlTag },
+    { style: styles.base },
     '<',
     _react2.default.createElement(
       'span',
-      { style: _domNodeStyles2.default.htmlTagName },
+      { style: styles.tagName },
       tagName
@@ -53,3 +50,3 @@ ),
               'span',
-              { style: _domNodeStyles2.default.htmlAttributeName },
+              { style: styles.htmlAttributeName },
               attribute.name
@@ -60,3 +57,3 @@ ),
               'span',
-              { style: _domNodeStyles2.default.htmlAttributeValue },
+              { style: styles.htmlAttributeValue },
               attribute.value
@@ -74,12 +71,15 @@ ),
 
+// isChildNode style={{ marginLeft: -12 /* hack: offset placeholder */ }}
 var CloseTag = function CloseTag(_ref2) {
   var tagName = _ref2.tagName;
-  var style = _ref2.style;
+  var _ref2$isChildNode = _ref2.isChildNode;
+  var isChildNode = _ref2$isChildNode === undefined ? false : _ref2$isChildNode;
+  var styles = _ref2.styles;
   return _react2.default.createElement(
     'span',
-    { style: (0, _extends3.default)({}, _domNodeStyles2.default.htmlCloseTag, style) },
+    { style: Object.assign({}, styles.base, isChildNode && styles.offsetLeft) },
     '</',
     _react2.default.createElement(
       'span',
-      { style: _domNodeStyles2.default.htmlCloseTagName },
+      { style: styles.tagName },
       tagName
@@ -101,3 +101,3 @@ ),
 
-var DOMNodePreview = function DOMNodePreview(_ref3) {
+var DOMNodePreview = function DOMNodePreview(_ref3, _ref4) {
   var isCloseTag = _ref3.isCloseTag;
@@ -107,5 +107,8 @@ var name = _ref3.name;
   var expanded = _ref3.expanded;
+  var theme = _ref4.theme;
 
+  var styles = (0, _createStyles2.default)('DOMNodePreview', theme);
+
   if (isCloseTag) {
-    return _react2.default.createElement(CloseTag, { style: { marginLeft: -12 /* hack: offset placeholder */ }, tagName: data.tagName });
+    return _react2.default.createElement(CloseTag, { styles: styles.htmlCloseTag, isChildNode: true, tagName: data.tagName });
   }
@@ -118,5 +121,5 @@
         null,
-        _react2.default.createElement(OpenTag, { tagName: data.tagName, attributes: data.attributes }),
+        _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 })
+        !expanded && _react2.default.createElement(CloseTag, { tagName: data.tagName, styles: styles.htmlCloseTag })
       );
@@ -132,3 +135,3 @@ case Node.TEXT_NODE:
         'span',
-        { style: _domNodeStyles2.default.htmlComment },
+        { style: styles.htmlComment },
         '<!--',
@@ -147,3 +150,3 @@ data.textContent,
         'span',
-        { style: _domNodeStyles2.default.htmlDoctype },
+        { style: styles.htmlDoctype },
         '<!DOCTYPE ',
@@ -188,2 +191,6 @@ data.name,
 
+DOMNodePreview.contextTypes = {
+  theme: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object]).isRequired
+};
+
 exports.default = DOMNodePreview;

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.Inspector = exports.DOMInspector = exports.TableInspector = exports.ObjectInspector = undefined;
+exports.Inspector = exports.DOMInspector = exports.TableInspector = exports.ObjectInspector = exports.chromeDark = exports.chromeLight = undefined;
 
@@ -17,5 +17,16 @@ var _extends2 = require('babel-runtime/helpers/extends');
 
-var _react = require('react');
+var _themes = require('./styles/themes');
 
-var _react2 = _interopRequireDefault(_react);
+Object.defineProperty(exports, 'chromeLight', {
+  enumerable: true,
+  get: function get() {
+    return _themes.chromeLight;
+  }
+});
+Object.defineProperty(exports, 'chromeDark', {
+  enumerable: true,
+  get: function get() {
+    return _themes.chromeDark;
+  }
+});
 
@@ -34,2 +45,6 @@ var _ObjectInspector2 = require('./object-inspector/ObjectInspector');
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
 var _isDom = require('is-dom');
@@ -45,4 +60,4 @@
 
-// NOTE: ObjectDecription and ObjectPreview can be used as building blocks, but currently their styles are not complete
-// export ObjectDecription from './object/ObjectDescription'
+// NOTE: ObjectValue and ObjectPreview can be used as building blocks, but currently their styles are not complete
+// export ObjectValue from './object/ObjectValue'
 // export ObjectPreview from './object/ObjectPreview'
@@ -68,5 +83,4 @@
 Inspector.propTypes = {
-  data: _react2.default.PropTypes.any.isRequired,
+  data: _react2.default.PropTypes.any,
   name: _react2.default.PropTypes.string,
-  path: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.array]),
   table: _react2.default.PropTypes.bool
@@ -73,0 +87,0 @@ };

lib/object-inspector/ObjectInspector.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
 var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
@@ -48,5 +52,5 @@
 
-var _ObjectPreview = require('./ObjectPreview');
+var _ObjectRootLabel = require('./ObjectRootLabel');
 
-var _ObjectPreview2 = _interopRequireDefault(_ObjectPreview);
+var _ObjectRootLabel2 = _interopRequireDefault(_ObjectRootLabel);
 
@@ -57,7 +61,11 @@ var _ObjectLabel = require('./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) {
+var createIterator = function createIterator(showNonenumerable, sortObjectKeys) {
   var objectIterator = _regenerator2.default.mark(function objectIterator(data) {
-    var shouldIterate, i, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, entry, _entry, k, v, _iteratorNormalCompletion2, _didIteratorError2, _iteratorError2, _iterator2, _step2, propertyName, propertyValue, _propertyValue;
+    var shouldIterate, i, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, entry, _entry, k, v, keys, _iteratorNormalCompletion2, _didIteratorError2, _iteratorError2, _iterator2, _step2, propertyName, propertyValue, _propertyValue;
 
@@ -166,15 +174,21 @@ return _regenerator2.default.wrap(function objectIterator$(_context) {
           case 40:
-            _context.next = 81;
+            _context.next = 83;
             break;
 
           case 42:
+            keys = Object.getOwnPropertyNames(data);
+
+            if (typeof sortObjectKeys !== 'undefined') {
+              keys.sort(sortObjectKeys);
+            }
+
             _iteratorNormalCompletion2 = true;
             _didIteratorError2 = false;
             _iteratorError2 = undefined;
-            _context.prev = 45;
-            _iterator2 = Object.getOwnPropertyNames(data)[Symbol.iterator]();
+            _context.prev = 47;
+            _iterator2 = keys[Symbol.iterator]();
 
-          case 47:
+          case 49:
             if (_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done) {
-              _context.next = 64;
+              _context.next = 66;
               break;
@@ -186,3 +200,3 @@ }
             if (!data.propertyIsEnumerable(propertyName)) {
-              _context.next = 55;
+              _context.next = 57;
               break;
@@ -192,3 +206,3 @@ }
             propertyValue = data[propertyName];
-            _context.next = 53;
+            _context.next = 55;
             return {
@@ -199,9 +213,9 @@ name: propertyName,
 
-          case 53:
-            _context.next = 61;
+          case 55:
+            _context.next = 63;
             break;
 
-          case 55:
+          case 57:
             if (!showNonenumerable) {
-              _context.next = 61;
+              _context.next = 63;
               break;
@@ -217,10 +231,12 @@ }
               _propertyValue = data[propertyName];
-            } catch (e) {}
+            } catch (e) {
+              // console.warn(e)
+            }
 
             if (!(_propertyValue !== undefined)) {
-              _context.next = 61;
+              _context.next = 63;
               break;
             }
 
-            _context.next = 61;
+            _context.next = 63;
             return {
@@ -232,20 +248,20 @@ name: propertyName,
 
-          case 61:
+          case 63:
             _iteratorNormalCompletion2 = true;
-            _context.next = 47;
+            _context.next = 49;
             break;
 
-          case 64:
-            _context.next = 70;
+          case 66:
+            _context.next = 72;
             break;
 
-          case 66:
-            _context.prev = 66;
-            _context.t1 = _context['catch'](45);
+          case 68:
+            _context.prev = 68;
+            _context.t1 = _context['catch'](47);
             _didIteratorError2 = true;
             _iteratorError2 = _context.t1;
 
-          case 70:
-            _context.prev = 70;
-            _context.prev = 71;
+          case 72:
+            _context.prev = 72;
+            _context.prev = 73;
 
@@ -256,7 +272,7 @@ if (!_iteratorNormalCompletion2 && _iterator2.return) {
 
-          case 73:
-            _context.prev = 73;
+          case 75:
+            _context.prev = 75;
 
             if (!_didIteratorError2) {
-              _context.next = 76;
+              _context.next = 78;
               break;
@@ -267,15 +283,15 @@ }
 
-          case 76:
-            return _context.finish(73);
+          case 78:
+            return _context.finish(75);
 
-          case 77:
-            return _context.finish(70);
+          case 79:
+            return _context.finish(72);
 
-          case 78:
+          case 80:
             if (!(showNonenumerable && data !== Object.prototype /* already added */)) {
-              _context.next = 81;
+              _context.next = 83;
               break;
             }
 
-            _context.next = 81;
+            _context.next = 83;
             return {
@@ -287,3 +303,3 @@ name: '__proto__',
 
-          case 81:
+          case 83:
           case 'end':
@@ -293,3 +309,3 @@ return _context.stop();
       }
-    }, objectIterator, this, [[8, 28, 32, 40], [33,, 35, 39], [45, 66, 70, 78], [71,, 73, 77]]);
+    }, objectIterator, this, [[8, 28, 32, 40], [33,, 35, 39], [47, 68, 72, 80], [73,, 75, 79]]);
   });
@@ -305,3 +321,3 @@
   var isNonenumerable = _ref.isNonenumerable;
-  return depth === 0 ? _react2.default.createElement(_ObjectPreview2.default, { name: name, data: data }) : _react2.default.createElement(_ObjectLabel2.default, { name: name, data: data, isNonenumerable: isNonenumerable });
+  return depth === 0 ? _react2.default.createElement(_ObjectRootLabel2.default, { name: name, data: data }) : _react2.default.createElement(_ObjectLabel2.default, { name: name, data: data, isNonenumerable: isNonenumerable });
 };
@@ -324,10 +340,17 @@
     value: function render() {
-      var showNonenumerable = this.props.showNonenumerable;
+      var _props = this.props;
+      var showNonenumerable = _props.showNonenumerable;
+      var sortObjectKeys = _props.sortObjectKeys;
+      var rest = (0, _objectWithoutProperties3.default)(_props, ['showNonenumerable', 'sortObjectKeys']);
 
+      var dataIterator = createIterator(showNonenumerable, sortObjectKeys);
 
-      var dataIterator = createIterator(showNonenumerable);
-      return _react2.default.createElement(_TreeView2.default, (0, _extends3.default)({
-        nodeRenderer: nodeRenderer,
-        dataIterator: dataIterator
-      }, this.props));
+      return _react2.default.createElement(
+        _ThemeProvider2.default,
+        { theme: this.props.theme },
+        _react2.default.createElement(_TreeView2.default, (0, _extends3.default)({
+          nodeRenderer: nodeRenderer,
+          dataIterator: dataIterator
+        }, rest))
+      );
     }
@@ -339,3 +362,5 @@ }]);
 ObjectInspector.defaultProps = {
-  showNonenumerable: false
+  showNonenumerable: false,
+
+  theme: 'chromeLight'
 };
@@ -349,8 +374,13 @@ ObjectInspector.propTypes = {
   name: _react.PropTypes.string,
-  /** Not isRequired because we also allow undefined value */
+  /** Not required prop because we also allow undefined value */
   data: _react.PropTypes.any,
 
+  /** A known theme or theme object */
+  theme: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object]),
+
   /** Show non-enumerable properties */
-  showNonenumerable: _react.PropTypes.bool
+  showNonenumerable: _react.PropTypes.bool,
+  /** Sort object keys with optional compare function. */
+  sortObjectKeys: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.func])
 };
 exports.default = ObjectInspector;

lib/object-inspector/ObjectLabel.js

@@ -15,16 +15,8 @@ 'use strict';
 
-var _ObjectDescription = require('../object/ObjectDescription');
+var _ObjectValue = require('../object/ObjectValue');
 
-var _ObjectDescription2 = _interopRequireDefault(_ObjectDescription);
+var _ObjectValue2 = _interopRequireDefault(_ObjectValue);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Colon = function Colon() {
-  return _react2.default.createElement(
-    'span',
-    null,
-    ': '
-  );
-};
-
 /**
@@ -44,4 +36,8 @@ * if isNonenumerable is specified, render the name dimmed
     _react2.default.createElement(_ObjectName2.default, { name: name, dimmed: isNonenumerable }),
-    _react2.default.createElement(Colon, null),
-    _react2.default.createElement(_ObjectDescription2.default, { object: object })
+    _react2.default.createElement(
+      'span',
+      null,
+      ': '
+    ),
+    _react2.default.createElement(_ObjectValue2.default, { object: object })
   );
@@ -51,5 +47,6 @@ };
 ObjectLabel.propTypes = {
-  isNonenumerable: _react.PropTypes.bool };
+  /** Non enumerable object property will be dimmed */
+  isNonenumerable: _react.PropTypes.bool
+};
 
-// non enumerable object will be dimmed
 ObjectLabel.defaultProps = {
@@ -56,0 +53,0 @@ isNonenumerable: false

lib/object-inspector/ObjectPreview.js

@@ -15,5 +15,5 @@ 'use strict';
 
-var _ObjectDescription = require('../object/ObjectDescription');
+var _ObjectValue = require('../object/ObjectValue');
 
-var _ObjectDescription2 = _interopRequireDefault(_ObjectDescription);
+var _ObjectValue2 = _interopRequireDefault(_ObjectValue);
 
@@ -48,3 +48,2 @@ var _ObjectName = require('../object/ObjectName');
 var ObjectPreview = function ObjectPreview(_ref) {
-  var name = _ref.name;
   var data = _ref.data;
@@ -56,3 +55,3 @@ var maxProperties = _ref.maxProperties;
   if ((typeof object === 'undefined' ? 'undefined' : (0, _typeof3.default)(object)) !== 'object' || object === null || object instanceof Date || object instanceof RegExp) {
-    return _react2.default.createElement(_ObjectDescription2.default, { object: object });
+    return _react2.default.createElement(_ObjectValue2.default, { object: object });
   }
@@ -66,3 +65,3 @@
       intersperse(object.map(function (element, index) {
-        return _react2.default.createElement(_ObjectDescription2.default, { key: index, object: element });
+        return _react2.default.createElement(_ObjectValue2.default, { key: index, object: element });
       }), ", "),
@@ -89,3 +88,3 @@ ']'
           ': ',
-          _react2.default.createElement(_ObjectDescription2.default, { object: propertyValue }),
+          _react2.default.createElement(_ObjectValue2.default, { object: propertyValue }),
           ellipsis
@@ -92,0 +91,0 @@ ));

lib/object/ObjectName.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _react = require('react');
@@ -12,5 +16,5 @@
 
-var _objectStyles = require('../styles/objectStyles');
+var _createStyles = require('../styles/createStyles');
 
-var _objectStyles2 = _interopRequireDefault(_objectStyles);
+var _createStyles2 = _interopRequireDefault(_createStyles);
 
@@ -28,8 +32,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  */
-var ObjectName = function ObjectName(_ref) {
+var ObjectName = function ObjectName(_ref, _ref2) {
   var name = _ref.name;
   var dimmed = _ref.dimmed;
+  var theme = _ref2.theme;
+
+  var styles = (0, _createStyles2.default)('ObjectName', theme);
   return _react2.default.createElement(
     'span',
-    { style: dimmed ? _objectStyles2.default.nameDimmed : _objectStyles2.default.name },
+    { style: (0, _extends3.default)({}, styles.base, dimmed && styles.dimmed) },
     name
@@ -46,2 +53,10 @@ );
 
+ObjectName.defaultProps = {
+  dimmed: false
+};
+
+ObjectName.contextTypes = {
+  theme: _react2.default.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object])
+};
+
 exports.default = ObjectName;

lib/table-inspector/TableInspector.js

@@ -11,6 +11,2 @@ 'use strict';
 
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
 var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
@@ -36,6 +32,10 @@
 
-var _ObjectDescription = require('../object/ObjectDescription');
+var _ThemeProvider = require('../styles/ThemeProvider');
 
-var _ObjectDescription2 = _interopRequireDefault(_ObjectDescription);
+var _ThemeProvider2 = _interopRequireDefault(_ThemeProvider);
 
+var _createStyles = require('../styles/createStyles');
+
+var _createStyles2 = _interopRequireDefault(_createStyles);
+
 var _getHeaders2 = require('./getHeaders');
@@ -45,327 +45,27 @@
 
-var _unselectable = require('../styles/unselectable');
+var _DataContainer = require('./DataContainer');
 
-var _unselectable2 = _interopRequireDefault(_unselectable);
+var _DataContainer2 = _interopRequireDefault(_DataContainer);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _HeaderContainer = require('./HeaderContainer');
 
-var styles = {
-  base: {
-    position: 'relative',
-    border: '1px solid #aaa',
-    fontFamily: 'Menlo, monospace',
-    fontSize: '11px',
-    lineHeight: '120%',
-    boxSizing: 'border-box',
-    cursor: 'default'
-  },
-  // table: {
-  // },
-  th: {
-    position: 'relative', // anchor for sort icon container
-    height: 'auto',
-    textAlign: 'left',
-    backgroundColor: '#eee',
-    borderBottom: '1px solid #aaa',
-    fontWeight: 'normal',
-    verticalAlign: 'middle',
-    padding: '0 4px',
+var _HeaderContainer2 = _interopRequireDefault(_HeaderContainer);
 
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    lineHeight: '14px'
-  },
-  'th:hover': {
-    backgroundColor: 'hsla(0, 0%, 90%, 1)'
-  },
-  // th > div
-  th_div: {
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-    // otherwise it's overriden by user agent stylesheet
-    fontSize: '11px',
-    lineHeight: '120%'
-  },
-  tr: {
-    display: 'table-row'
-  },
-  td: {
-    boxSizing: 'border-box', //
-    border: 'none', // prevent overrides
-    height: '16px', // /* 0.5 * background-size height */
-    verticalAlign: 'top',
-    padding: '1px 4px',
-    WebkitUserSelect: 'text',
+/**
+ * Specs:
+ * https://developer.chrome.com/devtools/docs/commandline-api#tabledata-columns
+ * https://developer.mozilla.org/en-US/docs/Web/API/Console/table
+ */
 
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    lineHeight: '14px'
-  },
-  leftBorder: {
-    none: {
-      borderLeft: 'none'
-    },
-    solid: {
-      borderLeft: '1px solid #aaa'
-    }
-  }
-}; /**
-    * Specs:
-    * https://developer.chrome.com/devtools/docs/commandline-api#tabledata-columns
-    * https://developer.mozilla.org/en-US/docs/Web/API/Console/table
-    */
+var TableInspector = function (_Component) {
+  (0, _inherits3.default)(TableInspector, _Component);
 
-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
-  );
-};
-
-var SortIcon = function SortIcon(_ref) {
-  var sortAscending = _ref.sortAscending;
-
-  var glyph = sortAscending ? '▲' : '▼';
-  return _react2.default.createElement(
-    'div',
-    { style: Object.assign({
-        display: 'block',
-        marginRight: 3, // 4,
-        width: 8,
-        height: 7,
-
-        marginTop: -7,
-        color: '#6e6e6e', //'rgb(48, 57, 66)'
-        fontSize: 12
-      }, // lineHeight: 14
-      _unselectable2.default) },
-    glyph
-  );
-};
-
-var TH = function (_Component) {
-  (0, _inherits3.default)(TH, _Component);
-
-  function TH(props) {
-    (0, _classCallCheck3.default)(this, TH);
-
-    var _this = (0, _possibleConstructorReturn3.default)(this, Object.getPrototypeOf(TH).call(this, props));
-
-    _this.state = { hovered: false };
-    return _this;
-  }
-
-  (0, _createClass3.default)(TH, [{
-    key: 'toggleHovered',
-    value: function toggleHovered(e) {
-      this.setState({ hovered: !this.state.hovered });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      // either not sorted, sort ascending or sort descending
-      var sortAscending = this.props.sortAscending;
-      var sorted = this.props.sorted;
-
-      return _react2.default.createElement(
-        'th',
-        (0, _extends3.default)({}, this.props, {
-          style: (0, _extends3.default)({}, styles.th, this.props.borderStyle, this.state.hovered ? this.props.hoveredStyle : {}),
-          onMouseEnter: this.toggleHovered.bind(this),
-          onMouseLeave: this.toggleHovered.bind(this),
-          onClick: this.props.onClick }),
-        _react2.default.createElement(
-          'div',
-          { style: styles.th_div },
-          this.props.children
-        ),
-        function () {
-          if (sorted) {
-            return _react2.default.createElement(
-              SortIconContainer,
-              null,
-              _react2.default.createElement(SortIcon, { sortAscending: sortAscending })
-            );
-          }
-        }()
-      );
-    }
-  }]);
-  return TH;
-}(_react.Component);
-
-TH.defaultProps = {
-  sortAscending: false,
-  sorted: false,
-  hoveredStyle: styles['th:hover'],
-  borderStyle: styles.leftBorder.solid,
-  onClick: undefined
-};
-
-var HeaderContainer = function HeaderContainer(_ref2) {
-  var indexColumnText = _ref2.indexColumnText;
-  var columns = _ref2.columns;
-  var sorted = _ref2.sorted;
-  var sortIndexColumn = _ref2.sortIndexColumn;
-  var sortColumn = _ref2.sortColumn;
-  var sortAscending = _ref2.sortAscending;
-  var onTHClick = _ref2.onTHClick;
-  var onIndexTHClick = _ref2.onIndexTHClick;
-  return _react2.default.createElement(
-    'div',
-    { style: {
-        top: 0,
-        height: '17px',
-        left: 0,
-        right: 0,
-        overflowX: 'hidden'
-      } },
-    _react2.default.createElement(
-      'table',
-      { style: {
-          tableLayout: 'fixed',
-          borderSpacing: 0,
-          borderCollapse: 'separate',
-          height: '100%',
-          width: '100%',
-          margin: 0 } },
-      _react2.default.createElement(
-        'tbody',
-        null,
-        _react2.default.createElement(
-          'tr',
-          null,
-          _react2.default.createElement(
-            TH,
-            { borderStyle: styles.leftBorder.none,
-              sorted: sorted && sortIndexColumn,
-              sortAscending: sortAscending,
-              onClick: onIndexTHClick },
-            indexColumnText
-          ),
-          columns.map(function (column) {
-            return _react2.default.createElement(
-              TH,
-              { key: column,
-                sorted: sorted && sortColumn === column,
-                sortAscending: sortAscending,
-                onClick: onTHClick.bind(undefined, column) },
-              column
-            );
-          })
-        )
-      )
-    )
-  );
-};
-
-HeaderContainer.defaultProps = {
-  indexColumnText: '(index)',
-  columns: []
-};
-
-var DataContainer = function DataContainer(_ref3) {
-  var rows = _ref3.rows;
-  var columns = _ref3.columns;
-  var rowsData = _ref3.rowsData;
-  return _react2.default.createElement(
-    'div',
-    { style: {
-        position: 'static',
-        top: '17px',
-        bottom: 0,
-        overflowY: 'overlay',
-        transform: 'translateZ(0)',
-
-        left: 0,
-        right: 0,
-        overflowX: 'hidden'
-      } },
-    _react2.default.createElement(
-      'table',
-      { style: {
-          positon: 'static',
-          left: 0,
-          top: 0,
-          right: 0,
-          bottom: 0,
-          borderTop: '0 none transparent',
-          margin: 0, // prevent overrides
-
-          backgroundImage: 'linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))',
-          backgroundSize: '128px 32px',
-          tableLayout: 'fixed',
-
-          // table
-          borderSpacing: 0,
-          borderCollapse: 'separate',
-          // height: '100%',
-          width: '100%',
-
-          fontSize: '11px',
-          lineHeight: '120%'
-        } },
-      _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, styles.leftBorder.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, styles.leftBorder.solid) },
-                  _react2.default.createElement(_ObjectDescription2.default, { object: rowData[column] })
-                );
-              } else {
-                return _react2.default.createElement('td', { key: column, style: (0, _extends3.default)({}, styles.td, styles.leftBorder.solid) });
-              }
-            })
-          );
-        })
-      )
-    )
-  );
-};
-
-var TableInspector = function (_Component2) {
-  (0, _inherits3.default)(TableInspector, _Component2);
-
   function TableInspector(props) {
     (0, _classCallCheck3.default)(this, TableInspector);
 
-    var _this2 = (0, _possibleConstructorReturn3.default)(this, Object.getPrototypeOf(TableInspector).call(this, props));
+    var _this = (0, _possibleConstructorReturn3.default)(this, Object.getPrototypeOf(TableInspector).call(this, props));
 
-    _this2.state = {
+    _this.state = {
       sorted: false, // has user ever clicked the <th> tag to sort?
@@ -376,3 +76,3 @@ sortIndexColumn: false, // is index column sorted?
     };
-    return _this2;
+    return _this;
   }
@@ -406,2 +106,7 @@
       var columns = this.props.columns;
+
+      var theme = this.props.theme;
+
+      var styles = (0, _createStyles2.default)('TableInspector', theme);
+
       if ((typeof data === 'undefined' ? 'undefined' : (0, _typeof3.default)(data)) !== 'object' || data === null) {
@@ -497,15 +202,19 @@ return _react2.default.createElement('div', null);
       return _react2.default.createElement(
-        'div',
-        { style: styles.base },
-        _react2.default.createElement(HeaderContainer, { 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(DataContainer, { rows: rowHeaders,
-          columns: colHeaders,
-          rowsData: rowsData })
+        _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 })
+        )
       );
@@ -533,3 +242,4 @@ }
   data: undefined,
-  columns: undefined
+  columns: undefined,
+  theme: 'chromeLight'
 };

lib/tree-view/TreeNode.js

@@ -31,51 +31,15 @@ 'use strict';
 
-var _unselectable = require('../styles/unselectable');
+var _createStyles = require('../styles/createStyles');
 
-var _unselectable2 = _interopRequireDefault(_unselectable);
+var _createStyles2 = _interopRequireDefault(_createStyles);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = {
-  base: {
-    lineHeight: '14px',
-    cursor: 'default',
-
-    boxSizing: 'border-box',
-    listStyle: 'none',
-
-    fontFamily: 'Menlo, monospace',
-    fontSize: '11px'
-  },
-  // take up parent container width
-  // width: '100%',
-  previewContainer: {},
-
-  placeholder: (0, _extends3.default)({
-    whiteSpace: 'pre',
-
-    fontSize: 12,
-    marginRight: 3
-  }, _unselectable2.default),
-  arrow: (0, _extends3.default)({
-    color: '#6e6e6e',
-    display: 'inline-block',
-
-    // lineHeight: '14px',
-    fontSize: 12,
-    marginRight: 3
-  }, _unselectable2.default),
-
-  childNodesContainer: {
-    margin: 0, // reset user-agent style
-    paddingLeft: 12
-  }
-};
-
 var Arrow = function Arrow(_ref) {
   var expanded = _ref.expanded;
-  var style = _ref.style;
+  var styles = _ref.styles;
   return _react2.default.createElement(
     'span',
-    { style: styles.arrow },
-    expanded ? '▼' : '▶'
+    { style: (0, _extends3.default)({}, styles.base, expanded ? styles.expanded : styles.collapsed) },
+    '▶'
   );
@@ -101,22 +65,22 @@ };
       var children = _props.children;
-      var style = _props.style;
       var nodeRenderer = _props.nodeRenderer;
       var title = _props.title;
-      var _props2 = this.props;
-      var shouldShowArrow = _props2.shouldShowArrow;
-      var shouldShowPlaceholder = _props2.shouldShowPlaceholder;
+      var shouldShowArrow = _props.shouldShowArrow;
+      var 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;
 
-      var childNodes = expanded ? children : undefined;
       return _react2.default.createElement(
         'li',
-        { 'aria-expanded': expanded, role: 'treeitem', style: styles.base, title: title },
+        { 'aria-expanded': expanded, role: 'treeitem', style: styles.treeNodeBase, title: title },
         _react2.default.createElement(
           'div',
-          { style: styles.previewContainer, onClick: onClick },
-          shouldShowArrow || _react.Children.count(children) > 0 ? _react2.default.createElement(Arrow, { expanded: expanded }) : shouldShowPlaceholder && _react2.default.createElement(
+          { 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.placeholder },
+            { style: styles.treeNodePlaceholder },
             ' '
@@ -128,3 +92,3 @@ ),
           'ol',
-          { role: 'group', style: styles.childNodesContainer },
+          { role: 'group', style: styles.treeNodeChildNodesContainer },
           childNodes
@@ -152,3 +116,3 @@ )
 TreeNode.defaultProps = {
-  name: '',
+  name: undefined,
   data: undefined,
@@ -174,2 +138,6 @@ expanded: true,
 
+TreeNode.contextTypes = {
+  theme: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object]).isRequired
+};
+
 exports.default = TreeNode;

lib/tree-view/TreeView.js

@@ -118,2 +118,3 @@ 'use strict';
             nodeRenderer: nodeRenderer
+
           }, props)));
@@ -238,2 +239,3 @@ }
       var rootPath = _pathUtils.DEFAULT_ROOT_PATH;
+
       return _react2.default.createElement(ConnectedTreeNode, { name: name,
@@ -240,0 +242,0 @@ data: data,

package.json

 {
   "name": "react-inspector",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Power of Browser DevTools inspectors right inside your React app",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

98773

increased by18.34%

Number of package files

37

increased by27.59%

Lines of code

2540

increased by13.49%

No dependency changes