Reorder actions

Author: zalmoxisus

package.json

@@ -81,6 +81,7 @@
     "jss-vendor-prefixer": "^3.0.1",
     "lodash.debounce": "^4.0.3",
     "react-base16-styling": "^0.4.1",
+    "react-dragula": "^1.1.17",
     "react-json-tree": "^0.10.0",
     "react-pure-render": "^1.0.2",
     "redux-devtools-themes": "^1.0.0"

src/ActionList.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import dragula from 'react-dragula';
 import ActionListRow from './ActionListRow';
 import ActionListHeader from './ActionListHeader';
 import shouldPureComponentUpdate from 'react-pure-render/function';
@@ -19,6 +20,31 @@ export default class ActionList extends Component {
 
   componentDidMount() {
     this.scrollToBottom(true);
+    if (!this.props.draggableActions) return;
+    const container = ReactDOM.findDOMNode(this.refs.rows);
+    this.drake = dragula([container], {
+      copy: false,
+      copySortSource: false,
+      mirrorContainer: container,
+      accepts: (el, target, source, sibling) => (
+        !sibling || parseInt(sibling.getAttribute('data-id'))
+      ),
+      moves: (el, source, handle) => (
+        parseInt(el.getAttribute('data-id')) &&
+        handle.className.indexOf('selectorButton') !== 0
+      ),
+    }).on('drop', (el, target, source, sibling) => {
+      let beforeActionId = Infinity;
+      if (sibling && sibling.className.indexOf('gu-mirror') === -1) {
+        beforeActionId = parseInt(sibling.getAttribute('data-id'));
+      }
+      const actionId = parseInt(el.getAttribute('data-id'));
+      this.props.onReorderAction(actionId, beforeActionId)
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.drake) this.drake.destroy();
   }
 
   componentDidUpdate(prevProps) {
@@ -57,13 +83,16 @@ export default class ActionList extends Component {
           {filteredActionIds.map(actionId =>
             <ActionListRow key={actionId}
                            styling={styling}
+                           actionId={actionId}
                            isInitAction={!actionId}
                            isSelected={
                             startActionId !== null &&
                             actionId >= startActionId && actionId <= selectedActionId ||
                             actionId === selectedActionId
                            }
-                           isInFuture={actionId > currentActionId}
+                           isInFuture={
+                             actionIds.indexOf(actionId) > actionIds.indexOf(currentActionId)
+                           }
                            onSelect={(e) => onSelect(e, actionId)}
                            timestamps={getTimestamps(actions, actionIds, actionId)}
                            action={actions[actionId].action}

src/ActionListRow.jsx

@@ -27,7 +27,7 @@ export default class ActionListRow extends Component {
   shouldComponentUpdate = shouldPureComponentUpdate
 
   render() {
-    const { styling, isSelected, action, isInitAction, onSelect,
+    const { styling, isSelected, action, actionId, isInitAction, onSelect,
             timestamps, isSkipped, isInFuture } = this.props;
     const { hover } = this.state;
     const timeDelta = timestamps.current - timestamps.previous;
@@ -41,6 +41,8 @@ export default class ActionListRow extends Component {
            onMouseEnter={this.handleMouseEnter}
            onMouseLeave={this.handleMouseLeave}
            onMouseDown={this.handleMouseDown}
+           onMouseUp={this.handleMouseEnter}
+           data-id={actionId}
            {...styling([
              'actionListItem',
              isSelected && 'actionListItemSelected',
@@ -91,6 +93,7 @@ export default class ActionListRow extends Component {
 
   handleMouseEnter = e => {
     if (this.hover) return;
+    this.handleMouseLeave.cancel();
     this.handleMouseEnterDebounced(e.buttons);
   }
 
@@ -99,14 +102,13 @@ export default class ActionListRow extends Component {
     this.setState({ hover: true });
   }, 300)
 
-  handleMouseLeave = () => {
+  handleMouseLeave = debounce(() => {
     this.handleMouseEnterDebounced.cancel();
     if (this.state.hover) this.setState({ hover: false });
-  }
+  }, 100)
 
   handleMouseDown = e => {
     if (e.target.className.indexOf('selectorButton') === 0) return;
-    if (this.handleMouseEnterDebounced) this.handleMouseEnterDebounced.cancel();
-    if (this.state.hover) this.setState({ hover: false });
+    this.handleMouseLeave();
   }
 }

src/DevtoolsInspector.js

@@ -9,7 +9,7 @@ import { getBase16Theme } from 'react-base16-styling';
 import { reducer, updateMonitorState } from './redux';
 import { ActionCreators } from 'redux-devtools';
 
-const { commit, sweep, toggleAction, jumpToAction, jumpToState } = ActionCreators;
+const { commit, sweep, toggleAction, jumpToAction, jumpToState, reorderAction } = ActionCreators;
 
 function getLastActionId(props) {
   return props.stagedActionIds[props.stagedActionIds.length - 1];
@@ -86,6 +86,7 @@ export default class DevtoolsInspector extends Component {
       initialScrollTop: PropTypes.number
     }),
     preserveScrollTop: PropTypes.bool,
+    draggableActions: PropTypes.bool,
     stagedActions: PropTypes.array,
     select: PropTypes.func.isRequired,
     theme: PropTypes.oneOfType([
@@ -100,6 +101,7 @@ export default class DevtoolsInspector extends Component {
   static defaultProps = {
     select: (state) => state,
     supportImmutable: false,
+    draggableActions: true,
     theme: 'inspector',
     invertTheme: true
   };
@@ -136,7 +138,9 @@ export default class DevtoolsInspector extends Component {
       getCurrentActionId(nextProps, nextMonitorState) ||
       monitorState.startActionId !== nextMonitorState.startActionId ||
       monitorState.inspectedStatePath !== nextMonitorState.inspectedStatePath ||
-      monitorState.inspectedActionPath !== nextMonitorState.inspectedActionPath
+      monitorState.inspectedActionPath !== nextMonitorState.inspectedActionPath ||
+      this.props.computedStates !== nextProps.computedStates ||
+      this.props.stagedActionIds !== nextProps.stagedActionIds
     ) {
       this.setState(createIntermediateState(nextProps, nextMonitorState));
     }
@@ -148,7 +152,7 @@ export default class DevtoolsInspector extends Component {
   }
 
   render() {
-    const { stagedActionIds: actionIds, actionsById: actions, computedStates,
+    const { stagedActionIds: actionIds, actionsById: actions, computedStates, draggableActions,
       tabs, invertTheme, skippedActionIds, currentStateIndex, monitorState } = this.props;
     const { selectedActionId, startActionId, searchValue, tabName } = monitorState;
     const inspectedPathType = tabName === 'Action' ? 'inspectedActionPath' : 'inspectedStatePath';
@@ -162,16 +166,16 @@ export default class DevtoolsInspector extends Component {
            ref='inspector'
            {...styling(['inspector', isWideLayout && 'inspectorWide'], isWideLayout)}>
         <ActionList {...{
-          actions, actionIds, isWideLayout, searchValue, selectedActionId, startActionId
+          actions, actionIds, isWideLayout, searchValue, selectedActionId, startActionId,
+          skippedActionIds, draggableActions, styling
         }}
-                    styling={styling}
                     onSearch={this.handleSearch}
                     onSelect={this.handleSelectAction}
                     onToggleAction={this.handleToggleAction}
                     onJumpToState={this.handleJumpToState}
                     onCommit={this.handleCommit}
                     onSweep={this.handleSweep}
-                    skippedActionIds={skippedActionIds}
+                    onReorderAction={this.handleReorderAction}
                     currentActionId={actionIds[currentStateIndex]}
                     lastActionId={getLastActionId(this.props)} />
         <ActionPreview {...{
@@ -199,6 +203,10 @@ export default class DevtoolsInspector extends Component {
     }
   };
 
+  handleReorderAction = (actionId, beforeActionId) => {
+    if (reorderAction) this.props.dispatch(reorderAction(actionId, beforeActionId));
+  };
+
   handleCommit = () => {
     this.props.dispatch(commit());
   };

src/utils/createStylingFromTheme.js

@@ -81,7 +81,24 @@ const getSheetFromColorMap = map => ({
   },
 
   actionListRows: {
-    overflow: 'auto'
+    overflow: 'auto',
+
+    '& div.gu-transit': {
+      opacity: '0.3'
+    },
+
+    '& div.gu-mirror': {
+      position: 'fixed',
+      opacity: '0.8',
+      height: 'auto !important',
+      'border-width': '1px',
+      'border-style': 'solid',
+      'border-color': map.LIST_BORDER_COLOR
+    },
+
+    '& div.gu-hide': {
+      display: 'none'
+    }
   },
 
   actionListHeaderSelector: {