wix-style-react/dist/src/Breadcrumbs/Breadcrumbs.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

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

var _Text = _interopRequireDefault(require("../Text"));

var _BreadcrumbsChevronRight = _interopRequireDefault(require("wix-ui-icons-common/system/BreadcrumbsChevronRight"));

var _constnats = require("./constnats");

var _BreadcrumbsSt = require("./Breadcrumbs.st.css");

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

/**
 * a way to visualise current navigation path
 */
var Breadcrumbs = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inherits2["default"])(Breadcrumbs, _React$PureComponent);

  var _super = _createSuper(Breadcrumbs);

  function Breadcrumbs() {
    var _this;

    (0, _classCallCheck2["default"])(this, Breadcrumbs);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getIsActive", function (item) {
      return _this.props.activeId === item.id;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleItemClick", function (item) {
      return function () {
        return !item.disabled && _this.props.onClick(item);
      };
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getItemWrapperDataAttributes", function (_ref) {
      var _ref2;

      var position = _ref.position,
          item = _ref.item;
      return _ref2 = {
        'data-hook': "".concat(_constnats.DATA_HOOKS.ITEM_WRAPPER, "-").concat(position)
      }, (0, _defineProperty2["default"])(_ref2, _constnats.DATA_ATTRIBUTES.DATA_ACTIVE, _this._getIsActive(item)), (0, _defineProperty2["default"])(_ref2, _constnats.DATA_ATTRIBUTES.DATA_POSITION_ID, position), _ref2;
    });
    return _this;
  }

  (0, _createClass2["default"])(Breadcrumbs, [{
    key: "_createItem",
    value: function _createItem(_ref3) {
      var _this2 = this;

      var item = _ref3.item,
          isActive = _ref3.isActive,
          onClick = _ref3.onClick,
          maxWidth = _ref3.maxWidth,
          id = _ref3.id;
      var active = isActive;

      var breadcrumbText = function breadcrumbText(value) {
        var _this2$props = _this2.props,
            theme = _this2$props.theme,
            size = _this2$props.size;
        var isSmallSize = size === 'medium';
        return /*#__PURE__*/_react["default"].createElement(_Text["default"], {
          dataHook: _constnats.DATA_HOOKS.BREADCRUMBS_ITEM,
          weight: isActive ? 'normal' : 'thin',
          light: theme === _constnats.THEMES.onDarkBackground,
          size: isSmallSize ? 'small' : 'medium',
          ellipsis: true
        }, value);
      };

      var defaultBreadcrumb = function defaultBreadcrumb(id) {
        var disabled = item.disabled;
        var className = _this2.props.className;
        var button = true;
        return /*#__PURE__*/_react["default"].createElement("button", {
          type: "button",
          "data-hook": "".concat(_constnats.DATA_HOOKS.BREADCRUMB_CLICKABLE, "-").concat(id),
          className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.item, {
            button: button,
            disabled: disabled,
            active: active
          }, className),
          onClick: onClick,
          children: breadcrumbText(item.value),
          style: {
            maxWidth: maxWidth
          }
        });
      };

      var linkBreadcrumb = function linkBreadcrumb(id) {
        var disabled = item.disabled;
        var className = _this2.props.className;
        var link = true;
        return /*#__PURE__*/_react["default"].createElement("a", {
          href: item.link,
          "data-hook": "".concat(_constnats.DATA_HOOKS.BREADCRUMB_CLICKABLE, "-").concat(id),
          className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.item, {
            link: link,
            disabled: disabled,
            active: active
          }, className),
          onClick: onClick,
          children: breadcrumbText(item.value),
          style: {
            maxWidth: maxWidth
          }
        });
      };

      var customBreadcrumb = function customBreadcrumb(id) {
        var className = _this2.props.className;
        return /*#__PURE__*/_react["default"].createElement("span", {
          "data-hook": "".concat(_constnats.DATA_HOOKS.BREADCRUMB_CLICKABLE, "-").concat(id),
          className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.item, {}, className),
          onClick: onClick,
          children: breadcrumbText(item.customElement),
          style: {
            maxWidth: maxWidth
          }
        });
      };

      if (isActive) {
        return defaultBreadcrumb(id);
      } else if (item.customElement) {
        return customBreadcrumb(id);
      } else if (item.link) {
        return linkBreadcrumb(id);
      } else {
        return defaultBreadcrumb(id);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props = this.props,
          items = _this$props.items,
          size = _this$props.size,
          itemMaxWidth = _this$props.itemMaxWidth,
          theme = _this$props.theme,
          className = _this$props.className,
          dataHook = _this$props.dataHook;
      var fullWidth = items.length === 1;
      return /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": dataHook,
        className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.root, {
          size: size,
          theme: theme
        }, className),
        "data-size": size,
        "data-theme": theme
      }, items.map(function (item, i, allItems) {
        var active = _this3._getIsActive(item);

        return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
          key: item.id,
          className: (0, _BreadcrumbsSt.st)(_BreadcrumbsSt.classes.itemContainer, {
            active: active
          })
        }, _this3._getItemWrapperDataAttributes({
          position: i,
          item: item
        })), _this3._createItem({
          id: i,
          item: item,
          isActive: active,
          onClick: _this3._handleItemClick(item),
          maxWidth: fullWidth ? 'initial' : itemMaxWidth
        }), allItems[i + 1] && /*#__PURE__*/_react["default"].createElement(_BreadcrumbsChevronRight["default"], {
          className: _BreadcrumbsSt.classes.divider
        }));
      }));
    }
  }]);
  return Breadcrumbs;
}(_react["default"].PureComponent);

(0, _defineProperty2["default"])(Breadcrumbs, "displayName", 'Breadcrumbs');
(0, _defineProperty2["default"])(Breadcrumbs, "propTypes", {
  /**
   * * __id__ - Specifies the item id
   * * __link__ - Optional link to be called on click
   * * __value__ - Value to be shown on breadcrumb
   * * __disabled__ - if this value is disabled
   * * __customElement__ - A custom item which will be rendered
   */
  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
    value: _propTypes["default"].node.isRequired,
    link: _propTypes["default"].string,
    customElement: _propTypes["default"].any,
    disabled: _propTypes["default"].bool
  })).isRequired,
  onClick: _propTypes["default"].func,
  activeId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
  size: _propTypes["default"].oneOf(['medium', 'large']),

  /** The maximum width of Breadcrumb item */
  itemMaxWidth: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  theme: _propTypes["default"].oneOf(['onWhiteBackground', 'onGrayBackground', 'onDarkBackground']),

  /** Applied as data-hook HTML attribute that can be used to create driver in testing */
  dataHook: _propTypes["default"].string
});
(0, _defineProperty2["default"])(Breadcrumbs, "defaultProps", {
  size: 'medium',
  theme: 'onGrayBackground',
  itemMaxWidth: '240px',
  onClick: function onClick() {}
});
var _default = Breadcrumbs;
exports["default"] = _default;