wix-style-react/dist/src/common/Focusable/FocusableHOC.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.withFocusable = exports.FocusablePropTypes = undefined;

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

var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

exports.focusableStates = focusableStates;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _hoistNonReactMethods = require('hoist-non-react-methods');

var _hoistNonReactMethods2 = _interopRequireDefault(_hoistNonReactMethods);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _hocUtils = require('../hocUtils');

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

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

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } 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; }

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

/**
 * Use this method to spread the focusable focus states onto the a component's root element.
 * @param {object} props
 */
function focusableStates(props) {
  if (!props) {
    throw new Error('FocusableHOC.focusableStates(props): props must be defined');
  }
  return {
    'data-focus': props.focusableIsFocused,
    'data-focus-visible': props.focusableIsFocusVisible
  };
}

/**
 * NOTE: Technically we should add the focusable proptypes to every component which uses this HOC.
 * Currently it is not used since Auto-Docs can not process spreading a plain object into propTypes.
 * In any way, these props should not be in the documentaion, since we expose only the withFocusable(Component),
 * and the withFocusalbe(...) does not accept these props.
 * So... for now we can omit these from the wrapped components, and silence eslint is neede.
 */
var FocusablePropTypes = exports.FocusablePropTypes = {
  focusableOnFocus: _propTypes2.default.func,
  focusableOnBlur: _propTypes2.default.func,
  focusableIsFocused: _propTypes2.default.bool,
  focusableIsFocusVisible: _propTypes2.default.bool
};

/**
 * Singleton for managing current input method (keyboard or mouse).
 */
var inputMethod = new (function () {
  // Default is keyboard in case an element is focused programmatically.
  function _class2() {
    var _this = this;

    _classCallCheck(this, _class2);

    this.method = 'keyboard';
    this.subscribers = new Map();

    if (typeof window !== 'undefined') {
      window.addEventListener('mousedown', function () {
        return _this.setMethod('mouse');
      });
      window.addEventListener('keydown', function () {
        return _this.setMethod('keyboard');
      });
      // We need to listen on keyUp, in case a TAB is made from the browser's address-bar,
      // so the keyDown is not fired, only the keyUp.
      window.addEventListener('keyup', function () {
        return _this.setMethod('keyboard');
      });
    }
  }

  /**
   * Subscribe to inputMethod change events
   * @param {*} target used as a key to the subscribers map
   * @param {*} callback optional to be called when the input method changes
   */


  _createClass(_class2, [{
    key: 'subscribe',
    value: function subscribe(target, callback) {
      this.subscribers.set(target, callback);
    }

    /**
     * Unsubscribe to inputMethod change events
     * @param {*} target used as a key to the subscribers map
     */

  }, {
    key: 'unsubscribe',
    value: function unsubscribe(target) {
      this.subscribers.delete(target);
    }

    /**
     * Is the current input method `keyboard`. if `false` is means it is `mouse`
     */

  }, {
    key: 'isKeyboard',
    value: function isKeyboard() {
      return this.method === 'keyboard';
    }
  }, {
    key: 'setMethod',
    value: function setMethod(method) {
      if (method !== this.method) {
        this.method = method;
        this.subscribers.forEach(function (f) {
          return f();
        });
      }
    }
  }]);

  return _class2;
}())();

/*
 * TODO: Consider adding 'disabled' state to this HOC, since:
 * - When component is focused and then it becomes disabled, then the focus needs to be blured.
 *
 * TODO: Consider using [Recompose](https://github.com/acdlite/recompose/tree/master/src/packages/recompose) to do:
 *  - the static hoisting
 *  - set displayName
 */
var withFocusable = exports.withFocusable = function withFocusable(Component) {
  var _class3, _temp2;

  if ((0, _hocUtils.isStatelessComponent)(Component)) {
    throw new Error('FocusableHOC does not support stateless components. ' + (0, _hocUtils.getDisplayName)(Component) + ' is stateless.');
  }

  var FocusableHOC = (_temp2 = _class3 = function (_React$PureComponent) {
    _inherits(FocusableHOC, _React$PureComponent);

    function FocusableHOC() {
      var _ref;

      var _temp, _this2, _ret;

      _classCallCheck(this, FocusableHOC);

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

      return _ret = (_temp = (_this2 = _possibleConstructorReturn(this, (_ref = FocusableHOC.__proto__ || Object.getPrototypeOf(FocusableHOC)).call.apply(_ref, [this].concat(args))), _this2), _this2.wrappedComponentRef = null, _this2.focusedByMouse = false, _this2.state = {
        focus: false,
        focusVisible: false
      }, _this2.onFocus = function () {
        _this2.setState({ focus: true, focusVisible: inputMethod.isKeyboard() });
        inputMethod.subscribe(_this2, function () {
          if (inputMethod.isKeyboard()) {
            _this2.setState({ focusVisible: true });
          }
        });
      }, _this2.onBlur = function () {
        inputMethod.unsubscribe(_this2);
        _this2.setState({ focus: false, focusVisible: false });
      }, _temp), _possibleConstructorReturn(_this2, _ret);
    }

    _createClass(FocusableHOC, [{
      key: 'componentWillUnmount',
      value: function componentWillUnmount() {
        inputMethod.unsubscribe(this);
      }
    }, {
      key: 'componentDidUpdate',
      value: function componentDidUpdate(prevProps) {
        /*
          in case when button was focused and then become disabled,
          we need to trigger blur logic and remove all listers, as disabled button
          do not trigger onFocus and onBlur events
        */
        var isFocused = this.state.focus || this.state.focusVisible;
        var isBecomeDisabled = !prevProps.disabled && this.props.disabled;
        if (isFocused && isBecomeDisabled) {
          this.onBlur();
        }
      }
    }, {
      key: 'render',
      value: function render() {
        var _this3 = this;

        return _react2.default.createElement(Component, _extends({
          ref: function ref(_ref2) {
            return _this3.wrappedComponentRef = _ref2;
          }
        }, this.props, {
          focusableOnFocus: this.onFocus,
          focusableOnBlur: this.onBlur,
          focusableIsFocused: this.state.focus || null,
          focusableIsFocusVisible: this.state.focusVisible || null
        }));
      }
    }]);

    return FocusableHOC;
  }(_react2.default.PureComponent), _class3.displayName = (0, _hocUtils.wrapDisplayName)(Component, 'WithFocusable'), _class3.defaultProps = Component.defaultProps, _temp2);


  assignPropTypesHack(FocusableHOC, Component.propTypes);

  return (0, _hoistNonReactMethods2.default)(FocusableHOC, Component, {
    delegateTo: function delegateTo(c) {
      return c.wrappedComponentRef;
    },
    hoistStatics: true
  });
};

/**
 * Assigned the given propTypes to the given class.
 *
 * This is a hack because since Yoshi3, with babel-preset-yoshi,
 * the babel-plugin-transform-react-remove-prop-types is enabled and removes propTypes.
 *
 * So if we simply do FocusableHOC.propTypes = Component.propTypes, it is being stripped away.
 *
 * This later becomes a problem if another component defines:
 * <code>
 * Comp.propTypes = {
 *   prop1: SomeFocusableComp.propTypes.prop1
 * }
 * </code>
 */
function assignPropTypesHack(targetClass, propTypes) {
  targetClass.propTypes = propTypes;
}