react-outline-manager/dist/index.umd.js

A simple helper for toggling CSS outlines.

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
  typeof define === 'function' && define.amd ? define(['react'], factory) :
  (global.ReactOutlineHander = factory(global.React));
}(this, (function (React) { 'use strict';

  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 _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;
  }

  function _objectSpread(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i] != null ? arguments[i] : {};
      var ownKeys = Object.keys(source);

      if (typeof Object.getOwnPropertySymbols === 'function') {
        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
        }));
      }

      ownKeys.forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    }

    return target;
  }

  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,
        writable: true,
        configurable: true
      }
    });
    if (superClass) _setPrototypeOf(subClass, superClass);
  }

  function _getPrototypeOf(o) {
    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
      return o.__proto__ || Object.getPrototypeOf(o);
    };
    return _getPrototypeOf(o);
  }

  function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
      o.__proto__ = p;
      return o;
    };

    return _setPrototypeOf(o, p);
  }

  function _objectWithoutPropertiesLoose(source, excluded) {
    if (source == null) return {};
    var target = {};
    var sourceKeys = Object.keys(source);
    var key, i;

    for (i = 0; i < sourceKeys.length; i++) {
      key = sourceKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      target[key] = source[key];
    }

    return target;
  }

  function _objectWithoutProperties(source, excluded) {
    if (source == null) return {};

    var target = _objectWithoutPropertiesLoose(source, excluded);

    var key, i;

    if (Object.getOwnPropertySymbols) {
      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

      for (i = 0; i < sourceSymbolKeys.length; i++) {
        key = sourceSymbolKeys[i];
        if (excluded.indexOf(key) >= 0) continue;
        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
        target[key] = source[key];
      }
    }

    return target;
  }

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

    return self;
  }

  function _possibleConstructorReturn(self, call) {
    if (call && (typeof call === "object" || typeof call === "function")) {
      return call;
    }

    return _assertThisInitialized(self);
  }

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

    function ReactOutlineHander() {
      var _getPrototypeOf2;

      var _this;

      _classCallCheck(this, ReactOutlineHander);

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

      _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ReactOutlineHander)).call.apply(_getPrototypeOf2, [this].concat(args)));

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
        isUsingKeyboard: false
      });

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "addListeners", function () {
        window.addEventListener('keydown', _this.handleTab);
        if (_this.props.toggle) window.addEventListener('mousedown', _this.handleMouseDown);
      });

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleTab", function (_ref) {
        var keyCode = _ref.keyCode;

        if (keyCode === 9) {
          _this.setState({
            isUsingKeyboard: true
          });

          if (!_this.props.toggle) window.removeEventListener('keydown', _this.handleTab);
        }
      });

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseDown", function () {
        _this.setState({
          isUsingKeyboard: false
        });
      });

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "insertStyleTag", function () {
        var script = document.createElement('style');
        var className = _this.props.className;
        script.id = className;
        script.innerText = ".".concat(className, " a:focus,.").concat(className, " area:focus,.").concat(className, " button:focus,.").concat(className, " iframe:focus,.").concat(className, " input:focus,.").concat(className, " select:focus,.").concat(className, " textarea:focus,.").concat(className, " [tabindex]:focus,.").concat(className, " [contenteditable]:focus { outline: none; }");
        document.head && document.head.appendChild(script);
      });

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "removeListeners", function () {
        window.removeEventListener('keydown', _this.handleTab);
        window.removeEventListener('mousedown', _this.handleMouseDown);
      });

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "updateClassName", function (className) {
        if (_this.state.isUsingKeyboard) {
          document.body.classList.remove(className);
        } else {
          document.body.classList.add(className);
        }
      });

      return _this;
    }

    _createClass(ReactOutlineHander, [{
      key: "componentDidMount",
      value: function componentDidMount() {
        this.addListeners();
        this.insertStyleTag();
        if (!this.props.tagName) this.updateClassName(this.props.className);
      }
    }, {
      key: "componentDidUpdate",
      value: function componentDidUpdate() {
        if (this.props.tagName) return;
        this.updateClassName(this.props.className);
      }
    }, {
      key: "componentWillUnmount",
      value: function componentWillUnmount() {
        this.removeListeners();
      }
    }, {
      key: "render",
      value: function render() {
        var _this$props = this.props,
            children = _this$props.children,
            className = _this$props.className,
            toggle = _this$props.toggle,
            Tag = _this$props.tagName,
            rest = _objectWithoutProperties(_this$props, ["children", "className", "toggle", "tagName"]);

        if (!Tag) return React.createElement(React.Fragment, null, children);

        var props = _objectSpread({}, rest);

        if (!this.state.isUsingKeyboard) Object.assign(props, {
          className: className
        });
        return React.createElement(Tag, props);
      }
    }]);

    return ReactOutlineHander;
  }(React.Component);

  _defineProperty(ReactOutlineHander, "defaultProps", {
    className: 'ReactOutlineManager'
  });

  return ReactOutlineHander;

})));