@helpscout/hsds-react/components/KeypressListener/KeypressListener.js

React component library for Help Scout's Design System

"use strict";

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

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

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

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

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

var _lodash = _interopRequireDefault(require("lodash.isnil"));

var _node = require("../../utilities/node");

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

// Modified version of:
// https://github.com/Shopify/polaris/blob/master/src/components/KeypressListener/KeypressListener.tsx
var KeypressListener = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2.default)(KeypressListener, _React$Component);

  function KeypressListener() {
    var _this;

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

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.node = void 0;
    _this.scope = void 0;

    _this.handleKeyEvent = function (event) {
      var _this$props = _this.props,
          keyCode = _this$props.keyCode,
          handler = _this$props.handler,
          modifier = _this$props.modifier,
          noModifier = _this$props.noModifier;
      var modKey = true;

      if ((0, _lodash.default)(keyCode)) {
        return handler(event);
      } // Tested, but istanbul is being picky


      if (modifier) {
        switch (modifier) {
          case 'shift':
            modKey = event.shiftKey;
            break;

          case 'alt':
            modKey = event.altKey;
            break;

          case 'option':
            modKey = event.altKey;
            break;

          case 'meta':
            modKey = event.metaKey;
            break;

          case 'command':
            modKey = event.metaKey;
            break;

          case 'control':
            modKey = event.ctrlKey;
            break;

          default:
            break;
        }
      } else if (noModifier) {
        modKey = !event.shiftKey && !event.altKey && !event.metaKey && !event.ctrlKey;
      }

      if (event.keyCode === keyCode && modKey) {
        handler(event);
      }
    };

    _this.setNodeRef = function (node) {
      return _this.node = node;
    };

    return _this;
  }

  var _proto = KeypressListener.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var _this$props2 = this.props,
        scope = _this$props2.scope,
        type = _this$props2.type;
    this.scope = scope === document ? (0, _node.getClosestDocument)(this.node) : scope;

    if (this.scope) {
      this.scope.addEventListener(type, this.handleKeyEvent);
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.scope) {
      this.scope.removeEventListener(this.props.type, this.handleKeyEvent);
    }
  };

  _proto.shouldComponentUpdate = function shouldComponentUpdate() {
    return false;
  };

  _proto.render = function render() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "c-KeypressListenerRoot",
      ref: this.setNodeRef
    });
  };

  return KeypressListener;
}(_react.default.Component);

function noop() {}

KeypressListener.defaultProps = {
  handler: noop,
  noModifier: true,
  scope: document,
  type: 'keyup'
};
KeypressListener.propTypes = {
  /** Number corresponding to the keyCode. */
  keyCode: _propTypes.default.number,

  /** Callback when the keyCode is pressed. */
  handler: _propTypes.default.func,

  /** Keyboard modifier to listen to in addition to `keyCode`. */
  modifier: _propTypes.default.string,

  /** Listen for `keyCode` only. */
  noModifier: _propTypes.default.bool,

  /** Node element to capture the event */
  scope: _propTypes.default.any,

  /** Type of key event. */
  type: _propTypes.default.oneOf(['keyup', 'keypress', 'keydown'])
};
var _default = KeypressListener;
exports.default = _default;