react-ions/lib/components/Breadcrumb/Breadcrumb.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _immutable = require('immutable');

var _immutable2 = _interopRequireDefault(_immutable);

var _reactRouter = require('react-router');

var _InlineStylePrefixer = require('../internal/InlineStylePrefixer');

var _InlineStylePrefixer2 = _interopRequireDefault(_InlineStylePrefixer);

var _OptClass = require('../internal/OptClass');

var _OptClass2 = _interopRequireDefault(_OptClass);

var _Icon = require('../Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _style = require('./style.scss');

var _style2 = _interopRequireDefault(_style);

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

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

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; }

var Breadcrumb = function (_React$Component) {
  _inherits(Breadcrumb, _React$Component);

  function Breadcrumb(props) {
    _classCallCheck(this, Breadcrumb);

    var _this = _possibleConstructorReturn(this, (Breadcrumb.__proto__ || Object.getPrototypeOf(Breadcrumb)).call(this, props));

    _this.state = {
      routes: _immutable2.default.fromJS(_this.props.routes)
    };

    _this.UNSAFE_componentWillReceiveProps = function (nextProps) {
      _this.setState({
        routes: _immutable2.default.fromJS(nextProps.routes)
      });
    };

    _this.shouldComponentUpdate = function (nextProps, nextState) {
      if (!_immutable2.default.is(nextState.routes, _this.state.routes)) return true;

      return false;
    };

    _this.getGradientStyles = function () {
      var backgroundColor = _this.props.gradientColor || '#fff';

      var styles = {
        background: 'linear-gradient(90deg, rgba(255, 255, 255, 000.1), ' + backgroundColor + ')'
      };

      return (0, _InlineStylePrefixer2.default)(styles);
    };

    _this.getContainerStyles = function () {
      var styles = {
        marginLeft: _this.props.padding || '0px',
        paddingRight: _this.props.padding || '0px'
      };

      return (0, _InlineStylePrefixer2.default)(styles);
    };

    _this.getPath = function (index) {
      var parts = [];

      for (var i = 0; i <= index; i++) {
        if (_this.state.routes.getIn([i, 'path']) !== '/') {
          parts.push(_this.state.routes.getIn([i, 'path']));
        }
      }

      return '/' + parts.join('/');
    };

    _this.breadcrumbNode = function (title, index, firstItem) {
      var lastItem = title === _this.state.routes.filter(function (route) {
        return typeof route.get('title') !== 'undefined';
      }).last().get('title');

      var node = _react2.default.createElement(
        'em',
        { key: index },
        !firstItem && _react2.default.createElement(_Icon2.default, { name: 'md-chevron-right', className: _style2.default['md-chevron-right'], width: '16', height: '16', color: '#879098' }),
        _react2.default.createElement(
          'span',
          null,
          title
        )
      );

      return _this.props.clickable && !lastItem ? _react2.default.createElement(
        _reactRouter.Link,
        { to: _this.getPath(index), key: index },
        node
      ) : node;
    };

    _this.getTags = function () {
      var firstItem = true;

      return _this.state.routes.map(function (item, index) {
        var title = item.get('title');

        if (title === undefined) return;

        var breadcrumbNode = _this.breadcrumbNode(title, index, firstItem);
        firstItem = false;

        return breadcrumbNode;
      });
    };

    return _this;
  }

  _createClass(Breadcrumb, [{
    key: 'render',
    value: function render() {
      var breadcrumbClasses = (0, _OptClass2.default)(_style2.default, ['breadcrumbs-outer'], this.props.optClass);

      var gradientColor = {
        color: this.props.gradientColor || 'white'
      };

      return _react2.default.createElement(
        'div',
        { className: breadcrumbClasses },
        _react2.default.createElement('div', { className: _style2.default['overflow-gradient'], style: this.getGradientStyles() }),
        _react2.default.createElement(
          'div',
          { className: _style2.default['breadcrumbs-container'], style: this.getContainerStyles() },
          _react2.default.createElement(
            'div',
            { className: _style2.default.breadcrumb },
            this.getTags()
          )
        )
      );
    }
  }]);

  return Breadcrumb;
}(_react2.default.Component);

Breadcrumb.propTypes = {
  /**
   * The array of routes to generate the Breadcrumbs.
   */
  routes: _propTypes2.default.array.isRequired,
  /**
   * Optional padding to add to the left and right side of the breadcrumb
  */
  padding: _propTypes2.default.number,
  /**
   * Optional background color for overflow gradient on small screens
   * Defaults to white
  */
  gradientColor: _propTypes2.default.string,
  /**
   * Optional CSS class to be used for local styles
   */
  optClass: _propTypes2.default.string,
  /**
   * Whether the breadcrumbs are clickable or not
   */
  clickable: _propTypes2.default.bool
};
Breadcrumb.defaultProps = {
  clickable: false
};
exports.default = Breadcrumb;