@attivio/suit/es/components/WizardSteps.js

Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.

var _class2, _temp;

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

import React from 'react';

export var WizardStep = function WizardStep(key, title) {
  var enabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
  var complete = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;

  _classCallCheck(this, WizardStep);

  this.key = key;
  this.title = title;
  this.enabled = enabled;
  this.complete = complete;
};

/**
 * This component presents a series of pages which are used by the user, in sequence,
 * to enter data. The pages in the list can be enabled or disabled at any time.
 */
var WizardSteps = (_temp = _class2 = function (_React$Component) {
  _inherits(WizardSteps, _React$Component);

  function WizardSteps() {
    _classCallCheck(this, WizardSteps);

    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
  }

  WizardSteps.prototype.render = function render() {
    var _this2 = this;

    var pageLinks = [];
    var stepStyle = {
      width: 'calc(100% / ' + this.props.steps.length + ')'
    };
    this.props.steps.forEach(function (step) {
      var onClick = void 0;
      var classNames = void 0;
      var disabled = false;

      if (_this2.props.currentStep === step.key) {
        classNames = 'wizard-step-button wizard-step-button-current';
      } else if (step.enabled) {
        onClick = function onClick() {
          _this2.props.goToPage(step.key);
        };
        if (step.complete) {
          classNames = 'wizard-step-button wizard-step-button-complete';
        } else {
          classNames = 'wizard-step-button';
        }
      } else {
        disabled = true;
        classNames = 'wizard-step-button wizard-step-button-disabled';
      }
      pageLinks.push(React.createElement(
        'button',
        {
          disabled: disabled,
          onClick: onClick,
          style: stepStyle,
          key: step.key,
          className: classNames
        },
        step.title
      ));
    });

    var mainStyle = Object.assign({}, {
      width: 'calc(100% - 8px)',
      paddingLeft: '4px',
      paddingRight: '4px'
    }, this.props.style);

    if (pageLinks.length > 0) {
      return React.createElement(
        'div',
        { style: mainStyle, className: 'wizard-step-buttons' },
        pageLinks
      );
    }
    return null;
  };

  return WizardSteps;
}(React.Component), _class2.displayName = 'WizardSteps', _temp);
export { WizardSteps as default };


WizardSteps.WizardStep = WizardStep;