zoapp-ui/components/stepper.js

Javascript ES7 React UI Material Components extensions

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// Inspired from https://codepen.io/anon/pen/KqYGNZ
/**
 * Copyright (c) 2015-present, CWB SAS
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var Stepper = function Stepper(props) {
  var steps = props.steps;

  return _react2.default.createElement(
    "div",
    { className: "zui-stepper-horizontal-alternative" },
    steps.map(function (step, index) {
      var cn = "zui-stepper-step";
      cn += step.active ? " zui-active-step" : "";
      cn += step.done ? " zui-step-done" : "";
      cn += step.editable ? " editable-step" : "";
      var id = step.id;

      var i = index + 1;
      var optional = step.optional ? _react2.default.createElement(
        "div",
        { className: "zui-stepper-optional" },
        "Optional"
      ) : "";
      return _react2.default.createElement(
        "div",
        {
          className: cn,
          key: id,
          role: "presentation",
          onKeyDown: function onKeyDown() {},
          onClick: function onClick(event) {
            event.stopPropagation();
            if (step.active && undefined.props.onSelect) {
              undefined.props.onSelect(index);
            }
          }
        },
        _react2.default.createElement(
          "div",
          { className: "zui-stepper-circle" },
          _react2.default.createElement(
            "span",
            null,
            i
          )
        ),
        _react2.default.createElement(
          "div",
          { className: "zui-stepper-title" },
          step.title
        ),
        optional,
        _react2.default.createElement("div", { className: "zui-stepper-bar-left" }),
        _react2.default.createElement("div", { className: "zui-stepper-bar-right" })
      );
    })
  );
};

Stepper.propTypes = {
  steps: _propTypes2.default.arrayOf(_propTypes2.default.shape({})).isRequired
};

exports.default = Stepper;