@carbon/ibm-security/lib/components/StatusIndicator/StatusIndicator-story.js

Carbon for Cloud & Cognitive IBM Security UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _addonActions = require("@storybook/addon-actions");
var _addonKnobs = require("@storybook/addon-knobs");
var _react = require("@storybook/react");
var _react2 = _interopRequireDefault(require("react"));
var _recompose = require("recompose");
var _storybook = require("../../../.storybook");
var _ = require("../..");
var _StatusStep = require("./StatusStep/StatusStep");
var _mocks_ = _interopRequireDefault(require("./_mocks_"));
var _excluded = ["key"],
  _excluded2 = ["key"],
  _excluded3 = ["key"];
/**
 * @file Status indicator stories.
 * @copyright IBM Security 2019
 */
var statusIndicator = _mocks_.default.statusIndicator,
  _statusSteps = _mocks_.default.statusSteps;
var _retry = statusIndicator.retry,
  title = statusIndicator.title;
var storyProps = {
  statusIndicator: {
    basic: function basic() {
      return {
        title: (0, _addonKnobs.text)("Title (title)", title)
      };
    },
    retry: function retry() {
      var description = _retry.description,
        label = _retry.label;
      return {
        retry: {
          label: (0, _addonKnobs.text)("".concat(label, " label (retry.label)"), label),
          description: description,
          action: (0, _addonActions.action)('retry.action')
        }
      };
    }
  },
  statusSteps: function statusSteps() {
    return _statusSteps.map(function (_ref) {
      var description = _ref.description,
        key = _ref.key,
        label = _ref.label,
        status = _ref.status;
      return {
        key: key,
        label: (0, _addonKnobs.text)("".concat(description, " label (StatusStep[").concat(key, "].label)"), label),
        status: status,
        description: description,
        errorMsg: status === 'failed' ? (0, _addonKnobs.text)('Error message (errorMsg)', 'Error message') : null
      };
    });
  }
};
var statusIndicatorProps = storyProps.statusIndicator,
  statusStepsProps = storyProps.statusSteps;
var basic = statusIndicatorProps.basic,
  retryProps = statusIndicatorProps.retry;
(0, _react.storiesOf)((0, _storybook.patterns)('StatusIndicator'), module).add('Default', function () {
  return /*#__PURE__*/_react2.default.createElement(_.StatusIndicator, basic(), statusStepsProps().map(function (_ref2) {
    var key = _ref2.key,
      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
    return /*#__PURE__*/_react2.default.createElement(_.StatusStep, (0, _extends2.default)({
      key: key
    }, props));
  }));
}).add('Failure', function () {
  return /*#__PURE__*/_react2.default.createElement(_.StatusIndicator, (0, _extends2.default)({}, basic(), retryProps()), statusStepsProps().map(function (_ref3) {
    var key = _ref3.key,
      props = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
    return /*#__PURE__*/_react2.default.createElement(_.StatusStep, (0, _extends2.default)({
      key: key
    }, props));
  }));
}).add('Dynamic', function () {
  var COMPLETE = _StatusStep.STATUS.COMPLETE,
    DEFAULT = _StatusStep.STATUS.DEFAULT;
  var interval;
  var StatusIndicatorStory = (0, _recompose.compose)((0, _recompose.withStateHandlers)({
    timer: 0
  }, {
    updateTimer: function updateTimer(_ref4) {
      var timer = _ref4.timer;
      return function () {
        return {
          timer: timer + 1
        };
      };
    }
  }), (0, _recompose.lifecycle)({
    componentDidMount: function componentDidMount() {
      var _this = this;
      interval = setInterval(function () {
        var _this$props = _this.props,
          updateTimer = _this$props.updateTimer,
          timer = _this$props.timer;
        _this.setState({
          current: timer
        });
        updateTimer();
        if (timer === _statusSteps.length) {
          clearInterval(interval);
        }
      }, 1000);
    },
    componentWillUnmount: function componentWillUnmount() {
      return clearInterval(interval);
    }
  }))(function (_ref5) {
    var current = _ref5.current;
    var retry = current === _statusSteps.length && retryProps();
    return /*#__PURE__*/_react2.default.createElement(_.StatusIndicator, (0, _extends2.default)({}, basic(), retry), _statusSteps.map(function (_ref6) {
      var key = _ref6.key,
        props = (0, _objectWithoutProperties2.default)(_ref6, _excluded3);
      return /*#__PURE__*/_react2.default.createElement(_.StatusStep, (0, _extends2.default)({
        key: key
      }, props, {
        status: current >= key ? COMPLETE : DEFAULT
      }));
    }));
  });
  StatusIndicatorStory.displayName = (0, _recompose.getDisplayName)(_.StatusIndicator);
  StatusIndicatorStory.__docgenInfo = _.StatusIndicator.__docgenInfo;
  return /*#__PURE__*/_react2.default.createElement(StatusIndicatorStory, null);
});