@helpscout/hsds-react/components/Dropdown/Dropdown.Trigger.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = exports.mapStateToProps = exports.DropdownTrigger = void 0;

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

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

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

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

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

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _wedux = require("@helpscout/wedux");

var _Dropdown = require("./Dropdown.actions");

var _DropdownCss = require("./Dropdown.css.js");

var _Keys = _interopRequireDefault(require("../../constants/Keys"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Dropdown2 = require("./Dropdown.utils");

var _jsxRuntime = require("react/jsx-runtime");

// Deprecated

/* istanbul ignore file */
function noop() {}

var DropdownTrigger = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(DropdownTrigger, _React$PureComponent);

  function DropdownTrigger() {
    var _this;

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

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.state = {
      isHovered: false
    };

    _this.handleOnClick = function (event) {
      _this.props.onClick(event);

      _this.props.toggleOpen();
    };

    _this.handleOnKeyDown = function (event) {
      switch (event.keyCode) {
        case _Keys.default.DOWN_ARROW:
          _this.openDropdown(event);

          break;

        case _Keys.default.ENTER:
          _this.openDropdown(event);

          break;

        case _Keys.default.TAB:
          if (event.shiftKey) {
            _this.closeDropdown();
          }

          break;

        default:
          break;
      }

      _this.props.onKeyDown(event);
    };

    return _this;
  }

  var _proto = DropdownTrigger.prototype;

  _proto.openDropdown = function openDropdown(event) {
    var _this$props = this.props,
        isOpen = _this$props.isOpen,
        openDropdown = _this$props.openDropdown;

    if (!isOpen) {
      event.preventDefault();
      return openDropdown();
    }
  };

  _proto.closeDropdown = function closeDropdown() {
    var _this$props2 = this.props,
        isOpen = _this$props2.isOpen,
        closeDropdown = _this$props2.closeDropdown;

    if (isOpen) {
      return closeDropdown();
    }
  };

  _proto.renderChildren = function renderChildren() {
    var children = this.props.children;
    var isHovered = this.state.isHovered;
    var renderedChildren = (0, _Dropdown2.renderRenderPropComponent)(children, {
      isHovered: isHovered
    });
    return renderedChildren ? renderedChildren : children;
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props3 = this.props,
        className = _this$props3.className,
        disabled = _this$props3.disabled,
        onBlur = _this$props3.onBlur,
        onFocus = _this$props3.onFocus,
        triggerRef = _this$props3.triggerRef,
        isOpen = _this$props3.isOpen,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["className", "disabled", "onBlur", "onFocus", "triggerRef", "isOpen"]);
    var componentClassName = (0, _classnames.default)(className, isOpen && 'is-open', disabled && 'is-disabled', 'c-DropdownTrigger');
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownCss.TriggerUI, (0, _extends2.default)({
      role: "button"
    }, (0, _getValidProps.default)(rest), {
      "aria-haspopup": "listbox",
      "aria-expanded": isOpen,
      className: componentClassName,
      disabled: disabled,
      ref: triggerRef,
      onBlur: onBlur,
      onFocus: onFocus,
      onClick: this.handleOnClick,
      onKeyDown: this.handleOnKeyDown,
      onMouseOver: function onMouseOver() {
        return _this2.setState({
          isHovered: true
        });
      },
      onMouseLeave: function onMouseLeave() {
        return _this2.setState({
          isHovered: false
        });
      },
      children: this.renderChildren()
    }));
  };

  return DropdownTrigger;
}(_react.default.PureComponent);

exports.DropdownTrigger = DropdownTrigger;
DropdownTrigger.propTypes = {
  className: _propTypes.default.string,
  closeDropdown: _propTypes.default.func,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,
  disabled: _propTypes.default.bool,
  triggerRef: _propTypes.default.func,
  id: _propTypes.default.string,
  isOpen: _propTypes.default.bool,
  onBlur: _propTypes.default.func,
  onFocus: _propTypes.default.func,
  onKeyDown: _propTypes.default.func,
  onClick: _propTypes.default.func,
  openDropdown: _propTypes.default.func,
  style: _propTypes.default.object,
  toggleOpen: _propTypes.default.func
};
DropdownTrigger.defaultProps = {
  'data-cy': 'DropdownTrigger',
  disabled: false,
  triggerRef: noop,
  isOpen: false,
  onBlur: noop,
  onFocus: noop,
  onKeyDown: noop,
  onClick: noop,
  openDropdown: noop,
  closeDropdown: noop,
  style: {},
  toggleOpen: noop
};

var mapStateToProps = function mapStateToProps(state) {
  var isOpen = state.isOpen,
      triggerId = state.triggerId,
      triggerProps = state.triggerProps,
      triggerStyle = state.triggerStyle;
  return (0, _extends2.default)({}, triggerProps, {
    isOpen: isOpen,
    id: triggerId,
    style: triggerStyle
  });
};

exports.mapStateToProps = mapStateToProps;
var ConnectedTrigger = (0, _wedux.connect)(mapStateToProps, // mapDispatchToProps
{
  toggleOpen: _Dropdown.toggleOpen,
  openDropdown: _Dropdown.openDropdown,
  closeDropdown: _Dropdown.closeDropdown
})(DropdownTrigger);
var _default = ConnectedTrigger;
exports.default = _default;