react-misc-toolbox/dist/Step.js

- [ ] diagramexample | optimize creating from blank slate

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _helperFunctions = require('./helperFunctions');

var _StyledModal = require('./StyledModal');

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

var Step = function Step(_ref) {
  var nativeOnClick = _ref.onClick,
      _ref$isDisabled = _ref.isDisabled,
      isDisabled = _ref$isDisabled === undefined ? false : _ref$isDisabled,
      isActive = _ref.isActive,
      isComplete = _ref.isComplete,
      renderStep = _ref.renderStep,
      flexDirectionThreshold = _ref.flexDirectionThreshold,
      isLast = _ref.isLast;

  var getClassName = function getClassName() {
    return (0, _helperFunctions.flippyTailClass)('step__container', [isActive, 'active', 'inactive'], [isLast, 'last', 'notlast'], [isDisabled, 'disabled', 'enabled']);
  };
  var getStepProps = function getStepProps() {
    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var className = _ref2.className,
        style = _ref2.style,
        _onClick = _ref2.onClick,
        props = (0, _objectWithoutProperties3.default)(_ref2, ['className', 'style', 'onClick']);
    return (0, _extends3.default)({
      style: style,
      className: className ? getClassName() + ' ' + className : getClassName(),
      onClick: function onClick(e) {
        for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
          args[_key - 1] = arguments[_key];
        }

        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        !isDisabled && nativeOnClick && nativeOnClick();
        !isDisabled && _onClick && _onClick.apply(undefined, [e].concat(args));
      },
      flexDirectionThreshold: flexDirectionThreshold,
      isOn: isActive
    }, props);
  };

  var renderTail = function renderTail(_ref3) {
    var colors = _ref3.colors;
    return !isLast && _react2.default.createElement(_StyledModal.TAIL, {
      colors: colors,
      isDisabled: isDisabled,
      isOn: isActive,
      flexDirectionThreshold: flexDirectionThreshold
    });
  };
  return _react2.default.createElement(
    _react2.default.Fragment,
    null,
    renderStep({
      getStepProps: getStepProps,
      isActive: isActive,
      isComplete: isComplete,
      isDisabled: isDisabled,
      isLast: isLast,
      renderTail: renderTail,
      flexDirectionThreshold: flexDirectionThreshold
    })
  );
};

exports.default = _react2.default.memo(Step);