react-misc-toolbox/dist/Step.js

[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll

'use strict';

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

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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

var _extends3 = _interopRequireDefault(_extends2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _SVGDone = require('./svg/SVGDone');

var _SVGDone2 = _interopRequireDefault(_SVGDone);

var _recompose = require('recompose');

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,
      isLast = _ref.isLast,
      alignHorizontally = _ref.alignHorizontally,
      stepStyleConfig = _ref.stepStyleConfig;
  var active = stepStyleConfig.active,
      inactive = stepStyleConfig.inactive,
      shared = stepStyleConfig.shared;

  var defaultStyle = (0, _extends3.default)({}, shared, {
    borderStyle: 'solid',
    borderColor: '#ddd',
    flexBasis: alignHorizontally ? '30rem' : 'auto',
    borderWidth: isDisabled || isLast ? '0' : alignHorizontally ? '0 1px 0 0' : '0 0 1px 0',
    background: isActive ? active.background : inactive.background
  });
  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: (0, _extends3.default)({}, defaultStyle, 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();
        !isDisabled && nativeOnClick && nativeOnClick();
        !isDisabled && _onClick && _onClick.apply(undefined, [e].concat(args));
      }
    }, props);
  };
  var getAlignedTailStyle = function getAlignedTailStyle() {
    return alignHorizontally ? {
      top: '50%',
      right: '0',
      borderWidth: '0 1px 1px 0'
    } : {
      bottom: '-15%',
      right: '50%',
      borderWidth: '0 0 1px 1px'
    };
  };
  var renderTail = function renderTail() {
    return !isLast && _react2.default.createElement('div', {
      style: (0, _extends3.default)({
        background: isActive ? active.background : inactive.background,
        display: 'block',
        position: 'absolute',
        zIndex: '1',
        width: '1rem',
        height: '1rem',
        borderStyle: 'solid',
        borderColor: isDisabled ? '#fff' : '#ddd',
        WebkitTransform: 'translateY(-50%) translateX(50%) rotate(-45deg)',
        transform: 'translateY(-50%) translateX(50%) rotate(-45deg)'
      }, getAlignedTailStyle())
    });
  };
  return _react2.default.createElement(
    _react2.default.Fragment,
    null,
    renderStep({ getStepProps: getStepProps, isActive: isActive, isComplete: isComplete, isDisabled: isDisabled, isLast: isLast, renderTail: renderTail })
  );
};

Step.propTypes = {
  isActive: _propTypes2.default.bool.isRequired,
  isDisabled: _propTypes2.default.bool.isRequired,
  isComplete: _propTypes2.default.bool.isRequired,
  isLast: _propTypes2.default.bool.isRequired,
  renderStep: _propTypes2.default.func.isRequired
};
var enhance = (0, _recompose.compose)();

exports.default = enhance(Step);