retrofits NodePositionProvider and withNodePosition from @trbl/react-…

…node-position, creates JumplistNode component and maintains nodes in context, #5 and #7
faceless-ui · Dec 12, 2019 · d2df4cf · d2df4cf
1 parent 2c208d4
commit d2df4cf
Show file tree

Hide file tree

Showing 17 changed files with 475 additions and 15,369 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 /node_modules
-.DS_Store
+.DS_Store
+yarn-error.log
diff --git a/README.md b/README.md
@@ -18,20 +18,22 @@ $ yarn add @trbl/react-jumplist
 
 ```jsx
   import React from 'react';
-  import { JumplistProvider, Jumplist } from '@trbl/react-jumplist';
+  import { JumplistProvider, JumplistNav, JumplistNode } from '@trbl/react-jumplist';
 
   const App = () => {
     return (
       <JumplistProvider>
-        <Jumplist
+        <JumplistNav
           list={[
             {
-              clickableNode: <p>Click to jump<p>,
-              targetId: 'jump-target',
+              clickableNode: <p>...<p>,
+              targetID: 'yourID',
             }
           ]}
         />
-        <div id="jump-target" />
+        <JumplistNode id="yourID">
+          ...
+        </JumplistNode>
       </JumplistProvider>
     )
   }
@@ -53,8 +55,11 @@ $ open http://localhost:3000
 
 All available props can be found via the references below:
 
-  - [Jumplist](/src/Jumplist/README.md)
+  - [JumplistContext](/src/JumplistContext/README.md)
+  - [JumplistNav](/src/JumplistNav/README.md)
+  - [JumplistNode](/src/JumplistNode/README.md)
   - [JumplistProvider](/src/JumplistProvider/README.md)
+  - [withJumplistContext](/src/withJumplistContext/README.md)
 
 ## License
 

diff --git a/demo/App.demo.js b/demo/App.demo.js
@@ -1,21 +1,25 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { JumplistProvider } from '../src'; // swap '../src' for '../dist/build.bundle' to demo production build
 import JumplistDemo from './Jumplist.demo';
 
 const AppDemo = () => {
   return (
-    <Fragment>
-      <style
-        dangerouslySetInnerHTML={{ __html: `
-          .demo__jumplist__item--is-in-frame::after {
-            content: ' is in frame';
-          }
-        ` }}
+    <JumplistProvider
+      classPrefix="demo"
+      frameOffset={100}
+    >
+      <JumplistDemo />
+      <div
+        style={{
+          position: 'fixed',
+          top: '100px',
+          right: '100px',
+          bottom: '100px',
+          left: '100px',
+          outline: 'dashed rgba(0, 0, 0, .15) 2px',
+        }}
       />
-      <JumplistProvider classPrefix="demo">
-        <JumplistDemo />
-      </JumplistProvider>
-    </Fragment>
+    </JumplistProvider>
   );
 };
 

diff --git a/demo/Jumplist.demo.js b/demo/Jumplist.demo.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { Jumplist } from '../src'; // swap '../src' for '../dist/build.bundle' to test production
+import { JumplistNav, JumplistNode } from '../src'; // swap '../src' for '../dist/build.bundle' to test production
 
 const formatClickableNode = string => (
   <li
@@ -15,31 +15,38 @@ const formatClickableNode = string => (
 const JumplistDemo = () => {
   return (
     <Fragment>
-      <div style={{ position: 'fixed', zIndex: '1', backgroundColor: 'white' }}>
+      <style
+        dangerouslySetInnerHTML={{ __html: `
+          .demo__jumplist-nav__item--is-in-frame::after {
+            content: ' is in frame';
+          }
+        ` }}
+      />
+      <div style={{ position: 'fixed', zIndex: '1' }}>
         <code>
           <pre>
-          classPrefix: demo
+            classPrefix: demo,
             <br />
-          htmlElement: div
+            htmlElement: div,
             <br />
-          threshold: 0
+            threshold: 0,
             <br />
-          vOffset: -100
+            vOffset: -100,
             <br />
-          hOffset: -100
+            hOffset: -100,
             <br />
             {'list: {'}
             <br />
-          &emsp; object
+            &emsp; object
             <br />
-          &emsp; object
+            &emsp; object
             <br />
-          &emsp; onject
+            &emsp; onject
             <br />
             {'}'}
           </pre>
         </code>
-        <Jumplist
+        <JumplistNav
           id="demo-id"
           vScrollOffset={-100}
           hScrollOffset={-100}
@@ -57,64 +64,89 @@ const JumplistDemo = () => {
           list={[
             {
               clickableNode: formatClickableNode('Jump to whitesmoke'),
-              targetId: 'whitesmoke',
+              targetID: 'whitesmoke',
             },
             {
               clickableNode: formatClickableNode('Jump to gainsboro'),
-              targetId: 'gainsboro',
+              targetID: 'gainsboro',
             },
             {
               clickableNode: formatClickableNode('Jump to silver'),
-              targetId: 'silver',
+              targetID: 'silver',
             },
             {
               clickableNode: formatClickableNode('Jump to gray'),
-              targetId: 'gray',
+              targetID: 'gray',
             },
             {
               clickableNode: formatClickableNode('Jump to lightblue'),
-              targetId: 'lightblue',
+              targetID: 'lightblue',
             },
             {
               clickableNode: formatClickableNode('Jump to blue'),
-              targetId: 'blue',
+              targetID: 'blue',
             },
           ]}
         />
       </div>
       <div style={{ display: 'flex' }}>
         <div
           className="vertical-overflow"
-          style={{ width: '150vw', flexShrink: '0' }}
+          style={{
+            width: '150vw', flexShrink: '0',
+          }}
         >
-          <div
+          <JumplistNode
             id="whitesmoke"
-            style={{ height: '500px', backgroundColor: 'whitesmoke', marginBottom: '10px' }}
+            style={{
+              height: '500px',
+              backgroundColor: 'whitesmoke',
+              marginBottom: '10px',
+            }}
           />
-          <div
+          <JumplistNode
             id="gainsboro"
-            style={{ height: '250px', backgroundColor: 'gainsboro', marginBottom: '10px' }}
+            style={{
+              height: '250px',
+              backgroundColor: 'gainsboro',
+              marginBottom: '10px',
+            }}
           />
-          <div
+          <JumplistNode
             id="silver"
-            style={{ height: '1500px', backgroundColor: 'silver', marginBottom: '10px' }}
+            style={{
+              height: '1500px',
+              backgroundColor: 'silver',
+              marginBottom: '10px',
+            }}
           />
-          <div
+          <JumplistNode
             id="gray"
-            style={{ height: '2000px', backgroundColor: 'gray' }}
+            style={{
+              height: '2000px',
+              backgroundColor: 'gray',
+            }}
           />
         </div>
         <div
           className="horizontal-overflow"
           style={{ flexShrink: '0' }}
         >
-          <div
+          <JumplistNode
             id="lightblue"
-            style={{ height: '1000px', width: '125vw', backgroundColor: 'lightblue', display: 'inline-block' }}
+            style={{ height: '1000px',
+              width: '125vw',
+              backgroundColor: 'lightblue',
+              display: 'inline-block',
+            }}
           />
-          <div
+          <JumplistNode
             id="blue"
-            style={{ height: '1000px', width: '500px', backgroundColor: 'blue', display: 'inline-block' }}
+            style={{ height: '1000px',
+              width: '500px',
+              backgroundColor: 'blue',
+              display: 'inline-block',
+            }}
           />
         </div>
       </div>

diff --git a/dist/build.bundle.js b/dist/build.bundle.js