From d921c233060104d9b2dd43344f1014dca2b7bdd8 Mon Sep 17 00:00:00 2001
From: Nicolas Chevobbe <chevobbe.nicolas@gmail.com>
Date: Wed, 9 Aug 2017 15:40:42 +0200
Subject: [PATCH] Add a prop to have ObjectInspector inline.

---
 .../src/object-inspector/index.css            |  3 +
 .../src/object-inspector/index.js             |  8 ++-
 .../__snapshots__/classnames.js.snap          | 60 +++++++++++++++++++
 .../tests/component/classnames.js             | 54 +++++++++++++++++
 4 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 packages/devtools-reps/src/object-inspector/tests/component/__snapshots__/classnames.js.snap
 create mode 100644 packages/devtools-reps/src/object-inspector/tests/component/classnames.js

diff --git a/packages/devtools-reps/src/object-inspector/index.css b/packages/devtools-reps/src/object-inspector/index.css
index 83e28975c..f87c2938a 100644
--- a/packages/devtools-reps/src/object-inspector/index.css
+++ b/packages/devtools-reps/src/object-inspector/index.css
@@ -4,6 +4,9 @@
 
 .tree {
   overflow: auto;
+}
+
+.tree.inline {
   display: inline-block;
 }
 
diff --git a/packages/devtools-reps/src/object-inspector/index.js b/packages/devtools-reps/src/object-inspector/index.js
index 29490672c..6cd0cb3eb 100644
--- a/packages/devtools-reps/src/object-inspector/index.js
+++ b/packages/devtools-reps/src/object-inspector/index.js
@@ -60,6 +60,7 @@ type Props = {
   autoExpandDepth: number,
   disabledFocus: boolean,
   itemHeight: number,
+  inline: boolean,
   mode: Mode,
   roots: Array<Node>,
   disableWrap: boolean,
@@ -373,6 +374,7 @@ class ObjectInspector extends Component {
       autoExpandDepth = 1,
       autoExpandAll = true,
       disabledFocus,
+      inline,
       itemHeight = 20,
       disableWrap = false,
     } = this.props;
@@ -392,7 +394,10 @@ class ObjectInspector extends Component {
     }
 
     return Tree({
-      className: disableWrap ? "nowrap" : "",
+      className: classnames({
+        inline,
+        nowrap: disableWrap,
+      }),
       autoExpandAll,
       autoExpandDepth,
       disabledFocus,
@@ -422,6 +427,7 @@ ObjectInspector.propTypes = {
   autoExpandDepth: PropTypes.number,
   disabledFocus: PropTypes.bool,
   disableWrap: PropTypes.bool,
+  inline: PropTypes.bool,
   roots: PropTypes.array,
   getObjectProperties: PropTypes.func.isRequired,
   loadObjectProperties: PropTypes.func.isRequired,
diff --git a/packages/devtools-reps/src/object-inspector/tests/component/__snapshots__/classnames.js.snap b/packages/devtools-reps/src/object-inspector/tests/component/__snapshots__/classnames.js.snap
new file mode 100644
index 000000000..73d14be14
--- /dev/null
+++ b/packages/devtools-reps/src/object-inspector/tests/component/__snapshots__/classnames.js.snap
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ObjectInspector - classnames has the expected class 1`] = `
+<ObjectInspector
+  autoExpandDepth={0}
+  getObjectProperties={[Function]}
+  loadObjectProperties={[Function]}
+  roots={
+    Array [
+      Object {
+        "contents": Object {
+          "value": 42,
+        },
+        "name": "root",
+        "path": "root",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`ObjectInspector - classnames has the inline class when inline prop is true 1`] = `
+<ObjectInspector
+  autoExpandDepth={0}
+  getObjectProperties={[Function]}
+  inline={true}
+  loadObjectProperties={[Function]}
+  roots={
+    Array [
+      Object {
+        "contents": Object {
+          "value": 42,
+        },
+        "name": "root",
+        "path": "root",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`ObjectInspector - classnames has the nowrap class when disableWrap prop is true 1`] = `
+<ObjectInspector
+  autoExpandDepth={0}
+  disableWrap={true}
+  getObjectProperties={[Function]}
+  loadObjectProperties={[Function]}
+  roots={
+    Array [
+      Object {
+        "contents": Object {
+          "value": 42,
+        },
+        "name": "root",
+        "path": "root",
+      },
+    ]
+  }
+/>
+`;
diff --git a/packages/devtools-reps/src/object-inspector/tests/component/classnames.js b/packages/devtools-reps/src/object-inspector/tests/component/classnames.js
new file mode 100644
index 000000000..ac0557ba0
--- /dev/null
+++ b/packages/devtools-reps/src/object-inspector/tests/component/classnames.js
@@ -0,0 +1,54 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const { mount } = require("enzyme");
+const React = require("react");
+const { createFactory } = React;
+const ObjectInspector = createFactory(require("../../index"));
+
+function generateDefaults(overrides) {
+  return Object.assign({
+    autoExpandDepth: 0,
+    roots: [{
+      path: "root",
+      name: "root",
+      contents: {value: 42}
+    }],
+    getObjectProperties: () => {},
+    loadObjectProperties: () => {},
+  }, overrides);
+}
+
+describe("ObjectInspector - classnames", () => {
+  it("has the expected class", () => {
+    const props = generateDefaults();
+    const oi = ObjectInspector(props);
+    const wrapper = mount(oi);
+
+    expect(wrapper.hasClass("tree")).toBeTruthy();
+    expect(wrapper.hasClass("inline")).toBeFalsy();
+    expect(wrapper.hasClass("nowrap")).toBeFalsy();
+    expect(oi).toMatchSnapshot();
+  });
+
+  it("has the nowrap class when disableWrap prop is true", () => {
+    const props = generateDefaults({
+      disableWrap: true,
+    });
+    const oi = ObjectInspector(props);
+    const wrapper = mount(oi);
+    expect(wrapper.hasClass("nowrap")).toBeTruthy();
+    expect(oi).toMatchSnapshot();
+  });
+
+  it("has the inline class when inline prop is true", () => {
+    const props = generateDefaults({
+      inline: true,
+    });
+    const oi = ObjectInspector(props);
+    const wrapper = mount(oi);
+    expect(wrapper.hasClass("inline")).toBeTruthy();
+    expect(oi).toMatchSnapshot();
+  });
+});