@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
94 lines (93 loc) • 3.76 kB
JavaScript
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
*/
import React from "react";
import PropTypes from "prop-types";
// eslint-disable-next-line import/no-unresolved
import IconCaretDown from "../Icon/IconCaretDown.mjs";
import ButtonWithIcon from "../ButtonWithIcon/index.mjs";
let GenTeaserOrgs = /*#__PURE__*/function (_React$Component) {
function GenTeaserOrgs(props) {
var _this;
_this = _React$Component.call(this, props) || this;
const orgs = props.orgs;
const 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) {
const orgs = nextProps.orgs;
const allOrgs = orgs.split(',');
this.setState({
shouldTruncate: allOrgs.length > 3,
truncateOrgs: allOrgs.length > 3,
showAll: false
});
};
_proto.handleClick = function handleClick() {
this.setState(prevState => ({
showAll: !prevState.showAll,
truncateOrgs: !prevState.truncateOrgs
}));
};
_proto.handleKeyPress = function handleKeyPress(e) {
if (e.key === 'Enter') {
this.setState(prevState => ({
showAll: !prevState.showAll,
truncateOrgs: !prevState.truncateOrgs
}));
}
};
_proto.render = function render() {
const orgs = this.props.orgs;
const teaserOrgs = orgs.split(',');
if (!this.state.shouldTruncate) {
return /*#__PURE__*/React.createElement("span", {
className: "ma__gen-teaser__org"
}, teaserOrgs.join(', '));
}
const shownOrgs = teaserOrgs.slice(0, 3);
const hiddenOrgs = teaserOrgs.slice(3);
const toggleProps = {
classes: ['ma__gen-teaser__org__show-more', "" + (!this.state.truncateOrgs ? 'show-fewer' : '')],
onClick: e => this.handleClick(e),
onKeyPress: e => this.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.createElement(IconCaretDown, {
width: 16,
height: "16"
})
};
const toggle = /*#__PURE__*/React.createElement(ButtonWithIcon, toggleProps);
const displayedOrgs = this.state.showAll ? teaserOrgs.join(', ') : shownOrgs.join(', ');
return /*#__PURE__*/React.createElement("span", {
className: "ma__gen-teaser__org"
}, /*#__PURE__*/React.createElement("span", null, displayedOrgs), toggle);
};
return GenTeaserOrgs;
}(React.Component);
GenTeaserOrgs.propTypes = process.env.NODE_ENV !== "production" ? {
/** A comma seperate list of organizations. */
orgs: PropTypes.string.isRequired
} : {};
export default GenTeaserOrgs;