merged dev

Author: mylee1995

package-lock.json

@@ -45,12 +45,15 @@
     "webpack-cli": "^3.3.6"
   },
   "dependencies": {
+    "auto-bind": "^2.1.0",
     "prop-types": "^15.7.2",
     "rc-slider": "^8.6.13",
     "rc-tooltip": "^3.7.3",
     "react": "^16.8.6",
+    "react-16-dropdown": "^0.3.1",
     "react-dom": "^16.8.6",
     "react-json-tree": "^0.11.2",
+    "react-router-dom": "^5.0.1",
     "redux-devtools-themes": "^1.0.0",
     "sass": "^1.22.7"
   }

package.json

@@ -1,6 +1,6 @@
 const snapShot = { tree: null };
 
-const mode = { jumping: false };
+const mode = { jumping: false, paused: false, locked: false };
 
 const linkFiber = require('./linkFiber')(snapShot, mode);
 const timeJump = require('./timeJump')(snapShot, mode);
@@ -12,11 +12,12 @@ window.addEventListener('message', ({ data: { action, payload } }) => {
     case 'jumpToSnap':
       timeJump(payload);
       break;
-    case 'stepToSnap': {
-      const { steps, speed } = payload;
-      console.log('i would like to step through here');
+    case 'setLock':
+      mode.locked = payload;
+      break;
+    case 'setPause':
+      mode.paused = payload;
       break;
-    }
     default:
   }
 });

package/index.js

@@ -6,8 +6,8 @@ module.exports = (snap, mode) => {
   let fiberRoot = null;
 
   function sendSnapshot() {
-    // don't send messages while jumping
-    if (mode.jumping) return;
+    // don't send messages while jumping or while paused
+    if (mode.jumping || mode.paused) return;
     const payload = snap.tree.getCopy();
     window.postMessage({
       action: 'recordSnap',
@@ -23,6 +23,8 @@ module.exports = (snap, mode) => {
     const oldSetState = component.setState.bind(component);
 
     function newSetState(state, callback = () => { }) {
+      // dont do anything if state is locked
+      if (mode.locked) return;
       // continue normal setState functionality, except add sending message middleware
       oldSetState(state, () => {
         updateSnapShotTree();

package/linkFiber.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Chart = props => <div>Chart</div>;
+
+export default Chart;

src/app/components/Chart.jsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'React'
+import Dropdown from 'react-16-dropdown';
+
+const options = [{
+  label: 'Prestige 🎩',
+  value: 'prestige',
+}, {
+  label: 'Inception 😴',
+  value: 'inception',
+}];
+
+<Dropdown
+  align='left'
+  className='custom-classname'
+  closeOnEscape={true}
+  options={options}
+  triggerLabel='Movies'
+  onClick={val => console.log(val)}
+/>
+
+export default Dropdown;

src/app/components/Dropdown.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import JSONTree from 'react-json-tree';
+
+const getItemString = (type, data, itemType, itemString) => (
+  <span>
+    //
+    {type}
+  </span>
+);
+
+const Tree = (props) => {
+  const { snapshot } = props;
+  console.log('TREE COMPONENT IS PRINTED');
+  console.log(snapshot);
+  return (
+    <React.Fragment>
+      {snapshot && (
+        <JSONTree
+          data={snapshot}
+          theme={{ tree: () => ({ className: 'json-tree' }) }}
+          getItemString={getItemString}
+        />
+      )}
+    </React.Fragment>
+  );
+};
+export default Tree;