@massds/mayflower-react/dist/LinkDropdown/index.mjs

React versions of Mayflower design system UI components

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * 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
 */
import React from "react";
import PropTypes from "prop-types";
import is from "is";
import classNames from "classnames";
import ButtonWithIcon from "../ButtonWithIcon/index.mjs";
import DecorativeLink from "../DecorativeLink/index.mjs"; // eslint-disable-next-line import/no-unresolved

import IconChevron from "../Icon/IconChevron.mjs";

let LinkDropdown = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(LinkDropdown, _React$Component);

  function LinkDropdown(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _defineProperty(_assertThisInitialized(_this), "handleSelect", event => {
      const target = event.target;

      _this.setState({
        buttonExpand: false
      });

      if (is.fn(_this.props.onItemSelect)) {
        _this.props.onItemSelect({
          target: target
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleClickOutside", event => {
      // Close the panel if the user clicks outside the component.
      const node = _this.wrapperRef.current;

      if (node && !node.contains(event.target)) {
        if (_this.state.buttonExpand) {
          _this.closeDropdown();
        }
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", event => {
      // If the user pressed escape collapse list.
      if (event.key === 'Escape') {
        _this.closeDropdown();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleClick", event => {
      const target = event.target;

      _this.setState(prevState => ({
        buttonExpand: !prevState.buttonExpand
      }));

      if (is.fn(_this.props.onItemSelect)) {
        _this.props.onButtonClick({
          target: target
        });
      }
    });

    _this.state = {
      buttonExpand: false
    };
    _this.wrapperRef = /*#__PURE__*/React.createRef();
    _this.setDropDownButtonRef = _this.setDropDownButtonRef.bind(_assertThisInitialized(_this));
    _this.closeDropdown = _this.closeDropdown.bind(_assertThisInitialized(_this));
    return _this;
  }

  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() {
    const _this$props = this.props,
          dropdownItems = _this$props.dropdownItems,
          dropdownButton = _this$props.dropdownButton;

    const dropdownButtonProps = _extends({}, dropdownButton, {
      onClick: e => this.handleClick(e),
      onKeyDown: e => this.handleKeyDown(e),
      setButtonRef: this.setDropDownButtonRef,
      expanded: this.state.buttonExpand,
      icon: /*#__PURE__*/React.createElement(IconChevron, {
        height: 20,
        width: 20
      }),
      'aria-haspopup': true
    });

    const dropdownClasses = classNames({
      'ma__link-dropdown': true,
      'ma__link-dropdown--expanded': this.state.buttonExpand
    });
    const dropdownMenuClasses = classNames({
      'ma__link-dropdown-menu': true,
      'ma__link-dropdown-menu--expanded': this.state.buttonExpand
    });
    const dropdownItemClasses = classNames({
      'ma__link-dropdown-item': true,
      'ma__link-dropdown-item--expanded': this.state.buttonExpand
    });
    return /*#__PURE__*/React.createElement("div", {
      ref: this.wrapperRef,
      className: dropdownClasses
    }, /*#__PURE__*/React.createElement(ButtonWithIcon, dropdownButtonProps), this.state.buttonExpand && /*#__PURE__*/React.createElement("div", {
      className: dropdownMenuClasses,
      "aria-labelledby": dropdownButtonProps.id
    }, dropdownItems.map((item, index) =>
    /*#__PURE__*/

    /* eslint-disable-next-line react/no-array-index-key */
    React.createElement(DecorativeLink, _extends({}, item, {
      key: item.text + "-" + index,
      className: dropdownItemClasses,
      onClick: e => this.handleSelect(e)
    })))));
  };

  return LinkDropdown;
}(React.Component);

LinkDropdown.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The props to set up the dropdown button */
  dropdownButton: PropTypes.shape(ButtonWithIcon.propTypes),

  /** Custom callback on dropdown item selection. */
  onItemSelect: PropTypes.func,

  /** Custom callback on dropdown button click. */
  onButtonClick: PropTypes.func,

  /** An array of dropdown link items */
  dropdownItems: PropTypes.arrayOf(PropTypes.shape({
    text: PropTypes.string,
    href: PropTypes.string
  }))
} : {};
LinkDropdown.defaultProps = {
  dropdownButton: {
    text: 'All Organizations',
    capitalized: true,
    size: 'small',
    theme: 'c-primary',
    usage: 'quaternary-simple',
    id: 'dropdownbutton-simple'
  }
};
export default LinkDropdown;