@massds/mayflower-react/dist/GenTeaserOrgs/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _IconCaretDown = _interopRequireDefault(require("../Icon/IconCaretDown.js"));
var _index = _interopRequireDefault(require("../ButtonWithIcon/index.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); } /**
 * GenTeaserOrgs module.
 * @module @massds/mayflower-react/GenTeaserOrgs
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-with-icon
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-search
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 */ // eslint-disable-next-line import/no-unresolved
var GenTeaserOrgs = /*#__PURE__*/function (_React$Component) {
  function GenTeaserOrgs(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    var orgs = props.orgs;
    var allOrgs = orgs.split(',');
    _this.state = {
      shouldTruncate: allOrgs.length > 3,
      truncateOrgs: allOrgs.length > 3,
      showAll: false
    };
    _this.handleClick = _this.handleClick.bind(_this);
    _this.handleKeyPress = _this.handleKeyPress.bind(_this);
    return _this;
  }

  // eslint-disable-next-line camelcase
  _inheritsLoose(GenTeaserOrgs, _React$Component);
  var _proto = GenTeaserOrgs.prototype;
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    var orgs = nextProps.orgs;
    var allOrgs = orgs.split(',');
    this.setState({
      shouldTruncate: allOrgs.length > 3,
      truncateOrgs: allOrgs.length > 3,
      showAll: false
    });
  };
  _proto.handleClick = function handleClick() {
    this.setState(function (prevState) {
      return {
        showAll: !prevState.showAll,
        truncateOrgs: !prevState.truncateOrgs
      };
    });
  };
  _proto.handleKeyPress = function handleKeyPress(e) {
    if (e.key === 'Enter') {
      this.setState(function (prevState) {
        return {
          showAll: !prevState.showAll,
          truncateOrgs: !prevState.truncateOrgs
        };
      });
    }
  };
  _proto.render = function render() {
    var _this2 = this;
    var orgs = this.props.orgs;
    var teaserOrgs = orgs.split(',');
    if (!this.state.shouldTruncate) {
      return /*#__PURE__*/_react["default"].createElement("span", {
        className: "ma__gen-teaser__org"
      }, teaserOrgs.join(', '));
    }
    var shownOrgs = teaserOrgs.slice(0, 3);
    var hiddenOrgs = teaserOrgs.slice(3);
    var toggleProps = {
      classes: ['ma__gen-teaser__org__show-more', "" + (!this.state.truncateOrgs ? 'show-fewer' : '')],
      onClick: function onClick(e) {
        return _this2.handleClick(e);
      },
      onKeyPress: function onKeyPress(e) {
        return _this2.handleKeyPress(e);
      },
      text: this.state.truncateOrgs ? " & " + hiddenOrgs.length + " more" : ' Show fewer',
      theme: 'c-primary',
      usage: 'quaternary-simple',
      capitalized: true,
      expanded: this.state.showAll,
      icon: /*#__PURE__*/_react["default"].createElement(_IconCaretDown["default"], {
        width: 16,
        height: "16"
      })
    };
    var toggle = /*#__PURE__*/_react["default"].createElement(_index["default"], toggleProps);
    var displayedOrgs = this.state.showAll ? teaserOrgs.join(', ') : shownOrgs.join(', ');
    return /*#__PURE__*/_react["default"].createElement("span", {
      className: "ma__gen-teaser__org"
    }, /*#__PURE__*/_react["default"].createElement("span", null, displayedOrgs), toggle);
  };
  return GenTeaserOrgs;
}(_react["default"].Component);
GenTeaserOrgs.propTypes = process.env.NODE_ENV !== "production" ? {
  /** A comma seperate list of organizations. */
  orgs: _propTypes["default"].string.isRequired
} : {};
var _default = exports["default"] = GenTeaserOrgs;
module.exports = exports.default;