feat: add storybook for onlyExpandSearchedNode prop (#354)

frontend-collective · Jun 14, 2018 · c4a41d1 · c4a41d1
1 parent 4977cb1
commit c4a41d1
Show file tree

Hide file tree

Showing 3 changed files with 385 additions and 0 deletions.
diff --git a/stories/__snapshots__/storyshots.test.js.snap b/stories/__snapshots__/storyshots.test.js.snap
@@ -1783,6 +1783,223 @@ exports[`Storyshots Advanced Tree-to-tree dragging 1`] = `
 </div>
 `;
 
+exports[`Storyshots Advanced onlyExpandSearchedNodes 1`] = `
+<div>
+  <div>
+    <h2>
+      Find the needle!
+    </h2>
+    <form
+      onSubmit={[Function]}
+      style={
+        Object {
+          "display": "inline-block",
+        }
+      }
+    >
+      <input
+        id="find-box"
+        onChange={[Function]}
+        placeholder="Search..."
+        style={
+          Object {
+            "fontSize": "1rem",
+          }
+        }
+        type="text"
+        value=""
+      />
+      <button
+        disabled={true}
+        onClick={[Function]}
+        type="button"
+      >
+        &lt;
+      </button>
+      <button
+        disabled={true}
+        onClick={[Function]}
+        type="submit"
+      >
+        &gt;
+      </button>
+      <span>
+         
+        0
+         / 
+        0
+      </span>
+    </form>
+    <div
+      style={
+        Object {
+          "height": 300,
+        }
+      }
+    >
+      <div
+        className="rst__tree"
+        style={
+          Object {
+            "height": "100%",
+          }
+        }
+      >
+        <div>
+          <div
+            aria-label="grid"
+            aria-readonly={true}
+            className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
+            onScroll={[Function]}
+            role="grid"
+            style={
+              Object {
+                "WebkitOverflowScrolling": "touch",
+                "boxSizing": "border-box",
+                "direction": "ltr",
+                "height": 99999,
+                "overflowX": "hidden",
+                "overflowY": "hidden",
+                "position": "relative",
+                "width": 200,
+                "willChange": "transform",
+              }
+            }
+            tabIndex={0}
+          >
+            <div
+              className="ReactVirtualized__Grid__innerScrollContainer"
+              role="rowgroup"
+              style={
+                Object {
+                  "height": 62,
+                  "maxHeight": 62,
+                  "maxWidth": 200,
+                  "overflow": "hidden",
+                  "pointerEvents": "",
+                  "position": "relative",
+                  "width": "auto",
+                }
+              }
+            >
+              <div
+                className="rst__node"
+                style={
+                  Object {
+                    "height": 62,
+                    "left": 0,
+                    "position": "absolute",
+                    "top": 0,
+                    "width": "100%",
+                  }
+                }
+              >
+                <div
+                  className="rst__lineBlock rst__lineHalfHorizontalRight"
+                  style={
+                    Object {
+                      "width": 44,
+                    }
+                  }
+                />
+                <div
+                  className="rst__nodeContent"
+                  style={
+                    Object {
+                      "left": 44,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": "100%",
+                      }
+                    }
+                  >
+                    <div>
+                      <button
+                        aria-label="Expand"
+                        className="rst__expandButton"
+                        onClick={[Function]}
+                        style={
+                          Object {
+                            "left": -22,
+                          }
+                        }
+                        type="button"
+                      />
+                    </div>
+                    <div
+                      className="rst__rowWrapper"
+                    >
+                      <div
+                        className="rst__row"
+                        style={
+                          Object {
+                            "opacity": 1,
+                          }
+                        }
+                      >
+                        <div
+                          className="rst__moveHandle"
+                        />
+                        <div
+                          className="rst__rowContents"
+                        >
+                          <div
+                            className="rst__rowLabel"
+                          >
+                            <span
+                              className="rst__rowTitle"
+                            >
+                              Haystack
+                            </span>
+                          </div>
+                          <div
+                            className="rst__rowToolbar"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <br />
+  <form
+    action="https://codesandbox.io/api/v1/sandboxes/define"
+    id="codesandbox-form"
+    method="POST"
+  >
+    <input
+      id="codesandbox-parameters"
+      name="parameters"
+      type="hidden"
+    />
+  </form>
+  <button
+    className="sandboxButton"
+    onClick={[Function]}
+  >
+    PLAY WITH THIS CODE →
+  </button>
+  <a
+    className="sourceLink"
+    href="https://github.com/frontend-collective/react-sortable-tree/blob/master/stories/only-expand-searched-node.js"
+    rel="noopener noreferrer"
+    target="_top"
+  >
+    VIEW SOURCE →
+  </a>
+</div>
+`;
+
 exports[`Storyshots Basics Add and remove nodes programmatically 1`] = `
 <div>
   <div>

diff --git a/stories/index.js b/stories/index.js
@@ -11,6 +11,7 @@ import ExternalNodeExample from './external-node';
 import GenerateNodePropsExample from './generate-node-props';
 import ModifyNodesExample from './modify-nodes';
 import SearchExample from './search';
+import OnlyExpandSearchedNodesExample from './only-expand-searched-node';
 import ThemesExample from './themes';
 import TouchSupportExample from './touch-support';
 import TreeDataIOExample from './tree-data-io';
@@ -78,4 +79,10 @@ storiesOf('Advanced', module)
   )
   .add('Drag out to remove', () =>
     wrapWithSource(<DragOutToRemoveExample />, 'drag-out-to-remove.js')
+  )
+  .add('onlyExpandSearchedNodes', () =>
+    wrapWithSource(
+      <OnlyExpandSearchedNodesExample />,
+      'only-expand-searched-node.js'
+    )
   );