@carbon/ibm-security/es/components/StatusIndicator/StatusStep/StatusStep.js

Carbon for Cloud & Cognitive IBM Security UI components

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
 * @file Status step.
 * @copyright IBM Security 2019 - 2021
 */

import { Error20, RadioButton20 } from '@carbon/icons-react';
import classnames from 'classnames';
import { string, oneOf } from 'prop-types';
import React, { Component } from 'react';
import { appendComponentNamespace } from '../../../globals/namespace';
import { namespace as indicatorNamespace } from '../StatusIndicator';
import Icon from '../../Icon';
import InlineLoading from '../../InlineLoading';
var namespace = appendComponentNamespace(indicatorNamespace, 'step');
var STATUS = {
  COMPLETE: 'complete',
  CURRENT: 'current',
  FAILED: 'failed',
  DEFAULT: 'incomplete'
};
var getStatusIcon = function getStatusIcon(status, description) {
  switch (status) {
    case STATUS.CURRENT:
      return /*#__PURE__*/React.createElement(InlineLoading, {
        className: "".concat(namespace, "-wrapper"),
        description: description
      });
    case STATUS.COMPLETE:
      return /*#__PURE__*/React.createElement(InlineLoading, {
        className: "".concat(namespace, "-wrapper"),
        description: description,
        status: "finished"
      });
    case STATUS.FAILED:
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(namespace, "-wrapper")
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(namespace, "__icon-wrapper")
      }, /*#__PURE__*/React.createElement(Icon, {
        className: classnames("".concat(namespace, "__icon ").concat(namespace, "--").concat(status, "__icon")),
        renderIcon: Error20,
        title: description
      })), description && /*#__PURE__*/React.createElement("p", {
        className: "".concat(namespace, "__label")
      }, description));
    default:
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(namespace, "-wrapper")
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(namespace, "__icon-wrapper")
      }, /*#__PURE__*/React.createElement(Icon, {
        className: classnames("".concat(namespace, "__icon ").concat(namespace, "--").concat(status, "__icon")),
        renderIcon: RadioButton20,
        title: description
      })), /*#__PURE__*/React.createElement("p", {
        className: "".concat(namespace, "__label")
      }, description));
  }
};

/**
 * Status Step component.
 */
var StatusStep = /*#__PURE__*/function (_Component) {
  function StatusStep() {
    var _this;
    _classCallCheck(this, StatusStep);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, StatusStep, [].concat(args));
    _defineProperty(_this, "state", {
      status: _this.props.status
    });
    return _this;
  }
  _inherits(StatusStep, _Component);
  return _createClass(StatusStep, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
        label = _this$props.label,
        description = _this$props.description,
        className = _this$props.className,
        errorMsg = _this$props.errorMsg;
      var stepClasses = classnames(namespace, "".concat(namespace, "--").concat(this.state.status), className);
      return /*#__PURE__*/React.createElement("li", {
        className: stepClasses,
        key: "".concat(namespace, "--").concat(label)
      }, getStatusIcon(this.state.status, description), this.state.status === STATUS.FAILED && errorMsg && /*#__PURE__*/React.createElement("p", {
        className: "".concat(namespace, "__error-message")
      }, errorMsg));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps, prevProps) {
      if (nextProps.status && prevProps.status !== nextProps.status) {
        return {
          status: nextProps.status
        };
      }
      return null;
    }
  }]);
}(Component);
_defineProperty(StatusStep, "propTypes", {
  /** @type {string} Extra classes to add. */
  className: string,
  /** @type {string} A description for a step. */
  description: string.isRequired,
  /** @type {string} An error message to explain why the step failed. */
  errorMsg: string,
  /** @type {string} Used to create a custom key for a step. */
  label: string.isRequired,
  /** @type {enum} A status for a step. */
  status: oneOf([STATUS.COMPLETE, STATUS.CURRENT, STATUS.DEFAULT, STATUS.FAILED])
});
_defineProperty(StatusStep, "defaultProps", {
  className: '',
  status: STATUS.DEFAULT,
  errorMsg: null
});
export default StatusStep;
export { namespace, STATUS };