Hide buttons

README.md

@@ -48,6 +48,8 @@ Name               | Type             | Description
 `theme`            | Object or string | Contains either [base16](https://github.com/chriskempson/base16) theme name or object, that can be `base16` colors map or object containing classnames or styles.
 `invertTheme`      | Boolean          | Inverts theme color luminance, making light theme out of dark theme and vice versa.
 `supportImmutable` | Boolean          | Better `Immutable` rendering in `Diff` (can affect performance if state has huge objects/arrays). `false` by default.
+`hideMainButtons`  | Boolean          | Will not show top buttons: `commit`, `reset`... `false` by default.
+`hideActionButtons`  | Boolean        | Will not show action buttons: `jump`, `skip`. `false` by default.
 `tabs`             | Array or function | Overrides list of tabs (see below)
 `diffObjectHash`   | Function         | Optional callback for better array handling in diffs (see [jsondiffpatch docs](https://github.com/benjamine/jsondiffpatch/blob/master/docs/arrays.md))
 `diffPropertyFilter` | Function       | Optional callback for ignoring particular props in diff (see [jsondiffpatch docs](https://github.com/benjamine/jsondiffpatch#options))

src/ActionList.jsx

@@ -60,7 +60,7 @@ export default class ActionList extends PureComponent<void, Props, void> {
   render() {
     const { styling, actions, actionIds, isWideLayout, onToggleAction, skippedActionIds,
             selectedActionId, startActionId, onSelect, onSearch, searchValue, currentActionId,
-            onCommit, onSweep, onJumpToState } = this.props;
+            hideMainButtons, hideActionButtons, onCommit, onSweep, onJumpToState } = this.props;
     const lowerSearchValue = searchValue && searchValue.toLowerCase();
     const filteredActionIds = searchValue ? actionIds.filter(
       id => actions[id].action.type.toLowerCase().indexOf(lowerSearchValue) !== -1
@@ -77,6 +77,7 @@ export default class ActionList extends PureComponent<void, Props, void> {
                           onSearch={onSearch}
                           onCommit={onCommit}
                           onSweep={onSweep}
+                          hideMainButtons={hideMainButtons}
                           hasSkippedActions={skippedActionIds.length > 0}
                           hasStagedActions={actionIds.length > 1} />
         <div {...styling('actionListRows')} ref='rows'>
@@ -96,6 +97,7 @@ export default class ActionList extends PureComponent<void, Props, void> {
                            onToggleClick={() => onToggleAction(actionId)}
                            onJumpClick={() => onJumpToState(actionId)}
                            onCommitClick={() => onCommit(actionId)}
+                           hideActionButtons={hideActionButtons}
                            isSkipped={skippedActionIds.indexOf(actionId) !== -1} />
           )}
         </div>

src/ActionListHeader.jsx

@@ -19,13 +19,16 @@ const getActiveButtons = (hasSkippedActions): Array<'Sweep' | 'Commit'> => [
 ].filter(Boolean);
 
 const ActionListHeader =
-  ({ styling, onSearch, hasSkippedActions, hasStagedActions, onCommit, onSweep }: Props) =>
+  ({
+     styling, onSearch, hasSkippedActions, hasStagedActions, onCommit, onSweep, hideMainButtons
+  }: Props) =>
   <div {...styling('actionListHeader')}>
     <input
       {...styling('actionListHeaderSearch')}
       onChange={e => onSearch(e.target.value)}
       placeholder='filter...'
     />
+    {!hideMainButtons &&
     <div {...styling('actionListHeaderWrapper')}>
       <RightSlider shown={hasStagedActions} styling={styling}>
         <div {...styling('actionListHeaderSelector')}>
@@ -46,6 +49,7 @@ const ActionListHeader =
         </div>
       </RightSlider>
     </div>
+    }
   </div>;
 
 export default ActionListHeader;

src/ActionListRow.jsx

@@ -37,7 +37,7 @@ export default class ActionListRow extends PureComponent<void, Props, State> {
 
   render() {
     const { styling, isSelected, action, isInitAction, onSelect,
-            timestamps, isSkipped, isInFuture } = this.props;
+            timestamps, isSkipped, isInFuture, hideActionButtons } = this.props;
     const { hover } = this.state;
     const timeDelta = timestamps.current - timestamps.previous;
     const showButtons = hover && !isInitAction || isSkipped;
@@ -53,9 +53,9 @@ export default class ActionListRow extends PureComponent<void, Props, State> {
     return (
       <div
         onClick={onSelect}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-        onMouseDown={this.handleMouseDown}
+        onMouseEnter={!hideActionButtons && this.handleMouseEnter}
+        onMouseLeave={!hideActionButtons && this.handleMouseLeave}
+        onMouseDown={!hideActionButtons && this.handleMouseDown}
         {...styling([
           'actionListItem',
           isSelected ? 'actionListItemSelected' : null,
@@ -70,31 +70,40 @@ export default class ActionListRow extends PureComponent<void, Props, State> {
         >
           {actionType}
         </div>
-        <div {...styling('actionListItemButtons')}>
-          <RightSlider styling={styling} shown={!showButtons} rotate>
+        {hideActionButtons ?
+          <RightSlider styling={styling} shown>
             <div {...styling('actionListItemTime')}>
               {timeDelta === 0 ? '+00:00:00' :
                 dateformat(timeDelta, timestamps.previous ? '+MM:ss.L' : 'h:MM:ss.L')}
             </div>
           </RightSlider>
-          <RightSlider styling={styling} shown={showButtons} rotate>
-            <div {...styling('actionListItemSelector')}>
-              {[BUTTON_JUMP, BUTTON_SKIP].map(btn => (!isInitAction || btn !== BUTTON_SKIP) &&
-                <div
-                  key={btn}
-                  onClick={this.handleButtonClick.bind(this, btn)}
-                  {...styling([
-                    'selectorButton',
-                    isButtonSelected(btn) ? 'selectorButtonSelected' : null,
-                    'selectorButtonSmall'
-                  ], isButtonSelected(btn), true)}
-                >
-                  {btn}
-                </div>
-              )}
-            </div>
-          </RightSlider>
-        </div>
+        :
+          <div {...styling('actionListItemButtons')}>
+            <RightSlider styling={styling} shown={!showButtons} rotate>
+              <div {...styling('actionListItemTime')}>
+                {timeDelta === 0 ? '+00:00:00' :
+                  dateformat(timeDelta, timestamps.previous ? '+MM:ss.L' : 'h:MM:ss.L')}
+              </div>
+            </RightSlider>
+            <RightSlider styling={styling} shown={showButtons} rotate>
+              <div {...styling('actionListItemSelector')}>
+                {[BUTTON_JUMP, BUTTON_SKIP].map(btn => (!isInitAction || btn !== BUTTON_SKIP) &&
+                  <div
+                    key={btn}
+                    onClick={this.handleButtonClick.bind(this, btn)}
+                    {...styling([
+                      'selectorButton',
+                      isButtonSelected(btn) ? 'selectorButtonSelected' : null,
+                      'selectorButtonSmall'
+                    ], isButtonSelected(btn), true)}
+                  >
+                    {btn}
+                  </div>
+                )}
+              </div>
+            </RightSlider>
+          </div>
+        }
       </div>
     );
   }

src/DevtoolsInspector.js

@@ -17,7 +17,9 @@ import type { ObjectHash, PropertyFilter, Delta } from 'jsondiffpatch';
 type DefaultProps = {
   supportImmutable: boolean,
   theme: Theme,
-  invertTheme: boolean
+  invertTheme: boolean,
+  hideMainButtons: boolean,
+  hideActionButtons: boolean
 };
 
 type AppState = Object;
@@ -127,7 +129,9 @@ export default class DevtoolsInspector extends PureComponent<DefaultProps, Props
     select: (state) => state,
     supportImmutable: false,
     theme: 'inspector',
-    invertTheme: true
+    invertTheme: true,
+    hideMainButtons: false,
+    hideActionButtons: false
   };
 
   componentDidMount() {
@@ -173,7 +177,8 @@ export default class DevtoolsInspector extends PureComponent<DefaultProps, Props
 
   render() {
     const { stagedActionIds: actionIds, actionsById: actions, computedStates,
-      tabs, invertTheme, skippedActionIds, currentStateIndex, monitorState } = this.props;
+      tabs, invertTheme, skippedActionIds, currentStateIndex, monitorState,
+      hideMainButtons, hideActionButtons } = this.props;
     const { selectedActionId, startActionId, searchValue, tabName } = monitorState;
     const inspectedPathType = tabName === 'Action' ? 'inspectedActionPath' : 'inspectedStatePath';
     const {
@@ -186,7 +191,8 @@ export default class DevtoolsInspector extends PureComponent<DefaultProps, Props
            ref='inspector'
            {...styling(['inspector', isWideLayout ? 'inspectorWide' : null], isWideLayout)}>
         <ActionList {...{
-          actions, actionIds, isWideLayout, searchValue, selectedActionId, startActionId
+          actions, actionIds, isWideLayout, searchValue, selectedActionId, startActionId,
+          hideMainButtons, hideActionButtons
         }}
                     styling={styling}
                     onSearch={this.handleSearch}