@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
171 lines (170 loc) • 7.67 kB
JavaScript
;
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _is = _interopRequireDefault(require("is"));
var _classnames = _interopRequireDefault(require("classnames"));
var _index = _interopRequireDefault(require("../ButtonWithIcon/index.js"));
var _index2 = _interopRequireDefault(require("../DecorativeLink/index.js"));
var _IconCaretDown = _interopRequireDefault(require("../Icon/IconCaretDown.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
* LinkDropdown module.
* @module @massds/mayflower-react/LinkDropdown
* @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/decorative-link
* @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 LinkDropdown = /*#__PURE__*/function (_React$Component) {
function LinkDropdown(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_defineProperty(_this, "handleSelect", function (event) {
var target = event.target;
_this.setState({
buttonExpand: false
});
if (_is["default"].fn(_this.props.onItemSelect)) {
_this.props.onItemSelect({
target: target
});
}
});
_defineProperty(_this, "handleClickOutside", function (event) {
// Close the panel if the user clicks outside the component.
var node = _this.wrapperRef.current;
if (node && !node.contains(event.target)) {
if (_this.state.buttonExpand) {
_this.closeDropdown();
}
}
});
_defineProperty(_this, "handleKeyDown", function (event) {
// If the user pressed escape collapse list.
if (event.key === 'Escape') {
_this.closeDropdown();
}
});
_defineProperty(_this, "handleClick", function (event) {
var target = event.target;
_this.setState(function (prevState) {
return {
buttonExpand: !prevState.buttonExpand
};
});
if (_is["default"].fn(_this.props.onItemSelect)) {
_this.props.onButtonClick({
target: target
});
}
});
_this.state = {
buttonExpand: false
};
_this.wrapperRef = /*#__PURE__*/_react["default"].createRef();
_this.setDropDownButtonRef = _this.setDropDownButtonRef.bind(_this);
_this.closeDropdown = _this.closeDropdown.bind(_this);
return _this;
}
_inheritsLoose(LinkDropdown, _React$Component);
var _proto = LinkDropdown.prototype;
_proto.componentDidMount = function componentDidMount() {
this.buttonClicked = false;
document.addEventListener('mousedown', this.handleClickOutside);
this.dropDownButtonRef.addEventListener('mousedown', this.handleRefMouseDown);
};
_proto.componentWillUnmount = function componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside);
this.dropDownButtonRef.removeEventListener('mousedown', this.handleRefMouseDown);
};
_proto.setDropDownButtonRef = function setDropDownButtonRef(node) {
this.dropDownButtonRef = node;
};
_proto.closeDropdown = function closeDropdown() {
this.setState({
buttonExpand: false
});
};
_proto.render = function render() {
var _this2 = this;
var _this$props = this.props,
dropdownItems = _this$props.dropdownItems,
dropdownButton = _this$props.dropdownButton;
var dropdownButtonProps = _extends({}, dropdownButton, {
onClick: function onClick(e) {
return _this2.handleClick(e);
},
onKeyDown: function onKeyDown(e) {
return _this2.handleKeyDown(e);
},
setButtonRef: this.setDropDownButtonRef,
expanded: this.state.buttonExpand,
icon: /*#__PURE__*/_react["default"].createElement(_IconCaretDown["default"], {
height: 20,
width: 20
}),
'aria-haspopup': true
});
var dropdownClasses = (0, _classnames["default"])({
'ma__link-dropdown': true,
'ma__link-dropdown--expanded': this.state.buttonExpand
});
var dropdownMenuClasses = (0, _classnames["default"])({
'ma__link-dropdown-menu': true,
'ma__link-dropdown-menu--expanded': this.state.buttonExpand
});
var dropdownItemClasses = (0, _classnames["default"])({
'ma__link-dropdown-item': true,
'ma__link-dropdown-item--expanded': this.state.buttonExpand
});
return /*#__PURE__*/_react["default"].createElement("div", {
ref: this.wrapperRef,
className: dropdownClasses
}, /*#__PURE__*/_react["default"].createElement(_index["default"], dropdownButtonProps), this.state.buttonExpand && /*#__PURE__*/_react["default"].createElement("div", {
className: dropdownMenuClasses,
"aria-labelledby": dropdownButtonProps.id
}, dropdownItems.map(function (item, index) {
return /*#__PURE__*/ /* eslint-disable-next-line react/no-array-index-key */_react["default"].createElement(_index2["default"], _extends({}, item, {
key: item.text + "-" + index,
className: dropdownItemClasses,
onClick: function onClick(e) {
return _this2.handleSelect(e);
}
}));
})));
};
return LinkDropdown;
}(_react["default"].Component);
LinkDropdown.propTypes = process.env.NODE_ENV !== "production" ? {
/** The props to set up the dropdown button */
dropdownButton: _propTypes["default"].shape(_index["default"].propTypes),
/** Custom callback on dropdown item selection. */
onItemSelect: _propTypes["default"].func,
/** Custom callback on dropdown button click. */
onButtonClick: _propTypes["default"].func,
/** An array of dropdown link items */
dropdownItems: _propTypes["default"].arrayOf(_propTypes["default"].shape({
text: _propTypes["default"].string,
href: _propTypes["default"].string
}))
} : {};
LinkDropdown.defaultProps = {
dropdownButton: {
text: 'All Organizations',
capitalized: true,
size: 'small',
theme: 'c-primary',
usage: 'quaternary-simple',
id: 'dropdownbutton-simple'
}
};
var _default = exports["default"] = LinkDropdown;
module.exports = exports.default;