react-focus-flow/lib/FocusFlow.js

React components to define isolated focus flows

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

var _linkedList = _interopRequireDefault(require("./linked-list"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var FocusFlow =
/*#__PURE__*/
function (_React$Component) {
  _inherits(FocusFlow, _React$Component);

  function FocusFlow() {
    var _ref;

    var _temp, _this;

    _classCallCheck(this, FocusFlow);

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

    return _possibleConstructorReturn(_this, (_temp = _this = _possibleConstructorReturn(this, (_ref = FocusFlow.__proto__ || Object.getPrototypeOf(FocusFlow)).call.apply(_ref, [this].concat(args))), _this.focusables = (0, _linkedList.default)(), _this.cur = null, _this.activate = function () {
      document.addEventListener("keydown", _this.trapFocus);
    }, _this.deactivate = function () {
      document.removeEventListener("keydown", _this.trapFocus);
    }, _this.trapFocus = function (e) {
      // if tab
      if (e.keyCode === 9) {
        e.preventDefault();
        console.log("you are TRAPPED!");

        _this.focus();
      }
    }, _this.onKeyDown = function (e) {
      if (!e.defaultPrevented && e.keyCode === 9) {
        e.preventDefault();
        e.nativeEvent.stopImmediatePropagation();

        if (e.shiftKey) {
          _this.prev();
        } else {
          _this.next();
        }
      }
    }, _temp));
  }

  _createClass(FocusFlow, [{
    key: "getChildContext",
    value: function getChildContext() {
      return {
        focusFlow: this
      };
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.active) {
        this.activate();
      }
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.active !== this.props.active) {
        if (nextProps.active) {
          this.activate();
        } else {
          this.deactivate();
        }
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.props.active) {
        this.deactivate();
      }
    }
  }, {
    key: "add",
    value: function add(focusable) {
      this.focusables.insert(focusable);
    }
  }, {
    key: "remove",
    value: function remove(focusable) {
      this.focusables.remove(focusable); // if removing cur, move cur to next node in list

      if (focusable === this.cur) {
        this.cur = this.cur.next;
      }
    }
  }, {
    key: "next",
    value: function next() {
      this.cur = this.focusables.find(function (focusable) {
        return !focusable.isDisabled();
      }, this.cur.next, "forward");
      this.focus();
    }
  }, {
    key: "prev",
    value: function prev() {
      this.cur = this.focusables.find(function (focusable) {
        return !focusable.isDisabled();
      }, this.cur.prev, "backward");
      this.focus();
    }
  }, {
    key: "focus",
    value: function focus() {
      if (this.cur === null) {
        this.cur = this.focusables.head;
      }

      this.cur.focus();
    }
  }, {
    key: "isActive",
    value: function isActive() {
      return this.props.active;
    }
  }, {
    key: "setActive",
    value: function setActive(active) {
      this.cur = active;
      this.focus();
    }
  }, {
    key: "render",
    value: function render() {
      var active = this.props.active;
      return (
        /* eslint-disable-next-line */
        _react.default.createElement("div", {
          onKeyDown: active ? this.onKeyDown : undefined
        }, this.props.children)
      );
    }
  }]);

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

exports.default = FocusFlow;
FocusFlow.propTypes = {
  active: _propTypes.default.bool,

  /* eslint-disable-next-line */
  children: _propTypes.default.any.isRequired
};
FocusFlow.defaultProps = {
  active: true
};
FocusFlow.childContextTypes = {
  focusFlow: _propTypes.default.instanceOf(FocusFlow)
};