@storybook/addon-interactions 6.4.0-rc.7 → 6.4.1

package/dist/cjs/Panel.js

@@ -43,10 +43,6 @@ require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.regexp.to-string.js");
 
-require("core-js/modules/es.array.includes.js");
-
-require("core-js/modules/es.string.includes.js");
-
 require("core-js/modules/es.object.keys.js");
 
 var _global = _interopRequireDefault(require("global"));
@@ -97,9 +93,14 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var FEATURES = _global.default.FEATURES;
-var pendingStates = [_instrumenter.CallStates.ACTIVE, _instrumenter.CallStates.WAITING];
-var completedStates = [_instrumenter.CallStates.DONE, _instrumenter.CallStates.ERROR];
+var INITIAL_CONTROL_STATES = {
+  debugger: false,
+  start: false,
+  back: false,
+  goto: false,
+  next: false,
+  end: false
+};
 var TabIcon = (0, _theming.styled)(_StatusIcon.StatusIcon)({
   marginLeft: 5
 });
@@ -113,46 +114,31 @@ var TabStatus = function TabStatus(_ref) {
 };
 
 var AddonPanelPure = /*#__PURE__*/React.memo(function (_ref2) {
-  var interactions = _ref2.interactions,
-      isDisabled = _ref2.isDisabled,
-      hasPrevious = _ref2.hasPrevious,
-      hasNext = _ref2.hasNext,
+  var calls = _ref2.calls,
+      controls = _ref2.controls,
+      controlStates = _ref2.controlStates,
+      interactions = _ref2.interactions,
       fileName = _ref2.fileName,
       hasException = _ref2.hasException,
       isPlaying = _ref2.isPlaying,
-      onStart = _ref2.onStart,
-      onPrevious = _ref2.onPrevious,
-      onNext = _ref2.onNext,
-      onEnd = _ref2.onEnd,
       onScrollToEnd = _ref2.onScrollToEnd,
-      calls = _ref2.calls,
-      onInteractionClick = _ref2.onInteractionClick,
       endRef = _ref2.endRef,
-      isDebuggingEnabled = _ref2.isDebuggingEnabled,
-      panelProps = _objectWithoutProperties(_ref2, ["interactions", "isDisabled", "hasPrevious", "hasNext", "fileName", "hasException", "isPlaying", "onStart", "onPrevious", "onNext", "onEnd", "onScrollToEnd", "calls", "onInteractionClick", "endRef", "isDebuggingEnabled"]);
+      panelProps = _objectWithoutProperties(_ref2, ["calls", "controls", "controlStates", "interactions", "fileName", "hasException", "isPlaying", "onScrollToEnd", "endRef"]);
 
-  return /*#__PURE__*/React.createElement(_components.AddonPanel, panelProps, isDebuggingEnabled && interactions.length > 0 && /*#__PURE__*/React.createElement(_Subnav.Subnav, {
-    isDisabled: isDisabled,
-    hasPrevious: hasPrevious,
-    hasNext: hasNext,
-    storyFileName: fileName,
+  return /*#__PURE__*/React.createElement(_components.AddonPanel, panelProps, controlStates.debugger && interactions.length > 0 && /*#__PURE__*/React.createElement(_Subnav.Subnav, {
+    controls: controls,
+    controlStates: controlStates,
     status: // eslint-disable-next-line no-nested-ternary
     isPlaying ? _instrumenter.CallStates.ACTIVE : hasException ? _instrumenter.CallStates.ERROR : _instrumenter.CallStates.DONE,
-    onStart: onStart,
-    onPrevious: onPrevious,
-    onNext: onNext,
-    onEnd: onEnd,
+    storyFileName: fileName,
     onScrollToEnd: onScrollToEnd
   }), interactions.map(function (call) {
     return /*#__PURE__*/React.createElement(_Interaction.Interaction, {
       key: call.id,
       call: call,
       callsById: calls,
-      isDebuggingEnabled: isDebuggingEnabled,
-      isDisabled: isDisabled,
-      onClick: function onClick() {
-        return onInteractionClick(call.id);
-      }
+      controls: controls,
+      controlStates: controlStates
     });
   }), /*#__PURE__*/React.createElement("div", {
     ref: endRef
@@ -167,40 +153,46 @@ exports.AddonPanelPure = AddonPanelPure;
 var Panel = function Panel(props) {
   var _useChannel;
 
-  var _React$useState = React.useState(false),
+  var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      isLocked = _React$useState2[0],
-      setLock = _React$useState2[1];
+      storyId = _React$useState2[0],
+      setStoryId = _React$useState2[1];
 
-  var _React$useState3 = React.useState(true),
+  var _React$useState3 = React.useState(INITIAL_CONTROL_STATES),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isPlaying = _React$useState4[0],
-      setPlaying = _React$useState4[1];
+      controlStates = _React$useState4[0],
+      setControlStates = _React$useState4[1];
 
-  var _React$useState5 = React.useState(),
+  var _React$useState5 = React.useState(false),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      scrollTarget = _React$useState6[0],
-      setScrollTarget = _React$useState6[1];
+      isPlaying = _React$useState6[0],
+      setPlaying = _React$useState6[1];
+
+  var _React$useState7 = React.useState(),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      scrollTarget = _React$useState8[0],
+      setScrollTarget = _React$useState8[1]; // Calls are tracked in a ref so we don't needlessly rerender.
+
 
   var calls = React.useRef(new Map());
 
   var setCall = function setCall(_ref3) {
-    var state = _ref3.state,
-        call = _objectWithoutProperties(_ref3, ["state"]);
+    var status = _ref3.status,
+        call = _objectWithoutProperties(_ref3, ["status"]);
 
     return calls.current.set(call.id, call);
   };
 
-  var _React$useState7 = React.useState([]),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      log = _React$useState8[0],
-      setLog = _React$useState8[1];
+  var _React$useState9 = React.useState([]),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      log = _React$useState10[0],
+      setLog = _React$useState10[1];
 
   var interactions = log.map(function (_ref4) {
     var callId = _ref4.callId,
-        state = _ref4.state;
+        status = _ref4.status;
     return Object.assign({}, calls.current.get(callId), {
-      state: state
+      status: status
     });
   });
   var endRef = React.useRef();
@@ -218,15 +210,43 @@ var Panel = function Panel(props) {
       return observer.disconnect();
     };
   }, []);
-  var emit = (0, _api.useChannel)((_useChannel = {}, _defineProperty(_useChannel, _instrumenter.EVENTS.CALL, setCall), _defineProperty(_useChannel, _instrumenter.EVENTS.SYNC, setLog), _defineProperty(_useChannel, _instrumenter.EVENTS.LOCK, setLock), _defineProperty(_useChannel, _coreEvents.STORY_RENDER_PHASE_CHANGED, function (_ref7) {
-    var newPhase = _ref7.newPhase;
-    setLock(false);
-    setPlaying(newPhase === 'playing');
-  }), _useChannel));
-
-  var _useStorybookState = (0, _api.useStorybookState)(),
-      storyId = _useStorybookState.storyId;
-
+  var emit = (0, _api.useChannel)((_useChannel = {}, _defineProperty(_useChannel, _instrumenter.EVENTS.CALL, setCall), _defineProperty(_useChannel, _instrumenter.EVENTS.SYNC, function (payload) {
+    setControlStates(payload.controlStates);
+    setLog(payload.logItems);
+  }), _defineProperty(_useChannel, _coreEvents.STORY_RENDER_PHASE_CHANGED, function (event) {
+    setStoryId(event.storyId);
+    setPlaying(event.newPhase === 'playing');
+  }), _useChannel), []);
+  var controls = React.useMemo(function () {
+    return {
+      start: function start() {
+        return emit(_instrumenter.EVENTS.START, {
+          storyId: storyId
+        });
+      },
+      back: function back() {
+        return emit(_instrumenter.EVENTS.BACK, {
+          storyId: storyId
+        });
+      },
+      goto: function goto(callId) {
+        return emit(_instrumenter.EVENTS.GOTO, {
+          storyId: storyId,
+          callId: callId
+        });
+      },
+      next: function next() {
+        return emit(_instrumenter.EVENTS.NEXT, {
+          storyId: storyId
+        });
+      },
+      end: function end() {
+        return emit(_instrumenter.EVENTS.END, {
+          storyId: storyId
+        });
+      }
+    };
+  }, [storyId]);
   var storyFilePath = (0, _api.useParameter)('fileName', '');
 
   var _storyFilePath$toStri = storyFilePath.toString().split('/').slice(-1),
@@ -240,70 +260,23 @@ var Panel = function Panel(props) {
     });
   };
 
-  var isDebuggingEnabled = FEATURES.interactionsDebugger === true;
   var showStatus = log.length > 0 && !isPlaying;
-  var isDebugging = log.some(function (item) {
-    return pendingStates.includes(item.state);
-  });
-  var hasPrevious = log.some(function (item) {
-    return completedStates.includes(item.state);
-  });
-  var hasNext = log.some(function (item) {
-    return item.state === _instrumenter.CallStates.WAITING;
-  });
-  var hasActive = log.some(function (item) {
-    return item.state === _instrumenter.CallStates.ACTIVE;
-  });
   var hasException = log.some(function (item) {
-    return item.state === _instrumenter.CallStates.ERROR;
+    return item.status === _instrumenter.CallStates.ERROR;
   });
-  var isDisabled = isDebuggingEnabled ? hasActive || isLocked || isPlaying && !isDebugging : true;
-  var onStart = React.useCallback(function () {
-    return emit(_instrumenter.EVENTS.START, {
-      storyId: storyId
-    });
-  }, [storyId]);
-  var onPrevious = React.useCallback(function () {
-    return emit(_instrumenter.EVENTS.BACK, {
-      storyId: storyId
-    });
-  }, [storyId]);
-  var onNext = React.useCallback(function () {
-    return emit(_instrumenter.EVENTS.NEXT, {
-      storyId: storyId
-    });
-  }, [storyId]);
-  var onEnd = React.useCallback(function () {
-    return emit(_instrumenter.EVENTS.END, {
-      storyId: storyId
-    });
-  }, [storyId]);
-  var onInteractionClick = React.useCallback(function (callId) {
-    return emit(_instrumenter.EVENTS.GOTO, {
-      storyId: storyId,
-      callId: callId
-    });
-  }, [storyId]);
   return /*#__PURE__*/React.createElement(React.Fragment, {
     key: "interactions"
   }, /*#__PURE__*/React.createElement(TabStatus, null, showStatus && (hasException ? /*#__PURE__*/React.createElement(TabIcon, {
     status: _instrumenter.CallStates.ERROR
   }) : " (".concat(interactions.length, ")"))), /*#__PURE__*/React.createElement(AddonPanelPure, _extends({
+    calls: calls.current,
+    controls: controls,
+    controlStates: controlStates,
     interactions: interactions,
-    isDisabled: isDisabled,
-    hasPrevious: hasPrevious,
-    hasNext: hasNext,
     fileName: fileName,
     hasException: hasException,
     isPlaying: isPlaying,
-    calls: calls.current,
     endRef: endRef,
-    isDebuggingEnabled: isDebuggingEnabled,
-    onStart: onStart,
-    onPrevious: onPrevious,
-    onNext: onNext,
-    onEnd: onEnd,
-    onInteractionClick: onInteractionClick,
     onScrollToEnd: scrollTarget && scrollToTarget
   }, props)));
 };

package/dist/cjs/Panel.stories.js

@@ -15,8 +15,12 @@ require("core-js/modules/es.array.iterator.js");
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
+require("core-js/modules/es.object.assign.js");
+
 var _react = _interopRequireDefault(require("react"));
 
+var _addonActions = require("@storybook/addon-actions");
+
 var _instrumenter = require("@storybook/instrumenter");
 
 var _theming = require("@storybook/theming");
@@ -25,6 +29,8 @@ var _mocks = require("./mocks");
 
 var _Panel = require("./Panel");
 
+var _Subnav = _interopRequireDefault(require("./components/Subnav/Subnav.stories"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var StyledWrapper = _theming.styled.div(function (_ref) {
@@ -55,16 +61,14 @@ var _default = {
   },
   args: {
     calls: new Map(),
-    endRef: null,
+    controls: _Subnav.default.args.controls,
+    controlStates: _Subnav.default.args.controlStates,
+    interactions: [(0, _mocks.getCall)(_instrumenter.CallStates.DONE)],
     fileName: 'addon-interactions.stories.tsx',
     hasException: false,
-    hasNext: false,
-    hasPrevious: true,
-    interactions: [(0, _mocks.getCall)(_instrumenter.CallStates.DONE)],
-    isDisabled: false,
     isPlaying: false,
-    showTabIcon: false,
-    isDebuggingEnabled: true,
+    onScrollToEnd: (0, _addonActions.action)('onScrollToEnd'),
+    endRef: null,
     // prop for the AddonPanel used as wrapper of Panel
     active: true
   }
@@ -79,7 +83,15 @@ exports.Passing = Passing;
 var Paused = {
   args: {
     isPlaying: true,
-    interactions: [(0, _mocks.getCall)(_instrumenter.CallStates.WAITING)]
+    interactions: [(0, _mocks.getCall)(_instrumenter.CallStates.WAITING)],
+    controlStates: {
+      debugger: true,
+      start: false,
+      back: false,
+      goto: true,
+      next: true,
+      end: true
+    }
   }
 };
 exports.Paused = Paused;
@@ -99,7 +111,9 @@ var Failed = {
 exports.Failed = Failed;
 var WithDebuggingDisabled = {
   args: {
-    isDebuggingEnabled: false
+    controlStates: Object.assign({}, _Subnav.default.args.controlStates, {
+      debugger: false
+    })
   }
 };
 exports.WithDebuggingDisabled = WithDebuggingDisabled;