react-composite-events/lib/umd/mouse.js

A collection of higher-order components (HOCs) to easily create composite events in React components

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(['exports', './compose'], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports, require('./compose'));
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports, global.RCE_compose);
    global.RCE_mouse = mod.exports;
  }
})(this, function (exports, _compose) {
  'use strict';

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.withShiftClick = exports.withMetaClick = exports.withCtrlClick = exports.withAltClick = exports.withOnlyClick = exports.withMouseLeaveBottom = exports.withMouseLeaveTop = exports.withMouseLeaveRight = exports.withMouseLeaveLeft = exports.withMouseEnterBottom = exports.withMouseEnterTop = exports.withMouseEnterRight = exports.withMouseEnterLeft = exports.withMouseRemainOut = exports.withMouseRemainOver = exports.withMouseRest = exports.composeMouseModifierKey = undefined;

  var _compose2 = babelHelpers.interopRequireDefault(_compose);

  var composeMouseEdge = function composeMouseEdge(_ref) {
    var eventPropName = _ref.eventPropName,
        direction = _ref.direction,
        location = _ref.location;
    return (0, _compose2.default)({
      eventPropName: eventPropName,
      triggerEvent: direction === 'enter' ? 'onMouseEnter' : 'onMouseLeave',
      beforeHandle: function beforeHandle(handler, e) {
        if (!e) {
          return false;
        }

        var _ref2 = e,
            screenX = _ref2.screenX,
            screenY = _ref2.screenY,
            currentTarget = _ref2.currentTarget;


        if (!(currentTarget instanceof HTMLElement)) {
          return false;
        }

        var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
            top = _currentTarget$getBou.top,
            left = _currentTarget$getBou.left,
            bottom = _currentTarget$getBou.bottom,
            right = _currentTarget$getBou.right;

        return location === 'left' && screenX <= left || location === 'right' && screenX >= right || location === 'top' && screenY <= top || location === 'bottom' && screenY >= bottom;
      }
    });
  };
  var composeMouseModifierKey = exports.composeMouseModifierKey = function composeMouseModifierKey(_ref3) {
    var eventPropName = _ref3.eventPropName,
        mouseEvent = _ref3.mouseEvent,
        _ref3$alt = _ref3.alt,
        alt = _ref3$alt === undefined ? false : _ref3$alt,
        _ref3$ctrl = _ref3.ctrl,
        ctrl = _ref3$ctrl === undefined ? false : _ref3$ctrl,
        _ref3$meta = _ref3.meta,
        meta = _ref3$meta === undefined ? false : _ref3$meta,
        _ref3$shift = _ref3.shift,
        shift = _ref3$shift === undefined ? false : _ref3$shift;
    return (0, _compose2.default)({
      eventPropName: eventPropName,
      triggerEvent: mouseEvent,
      beforeHandle: function beforeHandle(handler, e) {
        var syntheticMouseEvent = e;

        return syntheticMouseEvent && syntheticMouseEvent.altKey === alt && syntheticMouseEvent.ctrlKey === ctrl && syntheticMouseEvent.metaKey === meta && syntheticMouseEvent.shiftKey === shift;
      }
    });
  };

  var withMouseRest = exports.withMouseRest = (0, _compose2.default)({
    eventPropName: 'onMouseRest',
    triggerEvent: ['onMouseOver', 'onMouseMove'],
    defaultDuration: 500,
    cancelEvent: ['onMouseOut', 'onMouseDown']
  });

  var withMouseRemainOver = exports.withMouseRemainOver = (0, _compose2.default)({
    eventPropName: 'onMouseRemainOver',
    triggerEvent: ['onMouseOver', 'onMouseMove'],
    defaultDuration: 500,
    // including `onMouseDown` because clicking is basically a different action
    cancelEvent: ['onMouseOut', 'onMouseDown'],
    // as long as the mouse is over, moving around doesn't matter
    shouldResetTimerOnRetrigger: false
  });

  var withMouseRemainOut = exports.withMouseRemainOut = (0, _compose2.default)({
    eventPropName: 'onMouseRemainOut',
    triggerEvent: 'onMouseOut',
    defaultDuration: 500,
    cancelEvent: 'onMouseOver'
  });

  var withMouseEnterLeft = exports.withMouseEnterLeft = composeMouseEdge({
    eventPropName: 'onMouseEnterLeft',
    direction: 'enter',
    location: 'left'
  });

  var withMouseEnterRight = exports.withMouseEnterRight = composeMouseEdge({
    eventPropName: 'onMouseEnterRight',
    direction: 'enter',
    location: 'right'
  });

  var withMouseEnterTop = exports.withMouseEnterTop = composeMouseEdge({
    eventPropName: 'onMouseEnterTop',
    direction: 'enter',
    location: 'top'
  });

  var withMouseEnterBottom = exports.withMouseEnterBottom = composeMouseEdge({
    eventPropName: 'onMouseEnterBottom',
    direction: 'enter',
    location: 'bottom'
  });

  var withMouseLeaveLeft = exports.withMouseLeaveLeft = composeMouseEdge({
    eventPropName: 'onMouseLeaveLeft',
    direction: 'leave',
    location: 'left'
  });

  var withMouseLeaveRight = exports.withMouseLeaveRight = composeMouseEdge({
    eventPropName: 'onMouseLeaveRight',
    direction: 'leave',
    location: 'right'
  });

  var withMouseLeaveTop = exports.withMouseLeaveTop = composeMouseEdge({
    eventPropName: 'onMouseLeaveTop',
    direction: 'leave',
    location: 'top'
  });

  var withMouseLeaveBottom = exports.withMouseLeaveBottom = composeMouseEdge({
    eventPropName: 'onMouseLeaveBottom',
    direction: 'leave',
    location: 'bottom'
  });

  var withOnlyClick = exports.withOnlyClick = composeMouseModifierKey({
    eventPropName: 'onOnlyClick',
    mouseEvent: 'onClick'
  });

  var withAltClick = exports.withAltClick = composeMouseModifierKey({
    eventPropName: 'onAltClick',
    mouseEvent: 'onClick',
    alt: true
  });

  var withCtrlClick = exports.withCtrlClick = composeMouseModifierKey({
    eventPropName: 'onCtrlClick',
    mouseEvent: 'onClick',
    ctrl: true
  });

  var withMetaClick = exports.withMetaClick = composeMouseModifierKey({
    eventPropName: 'onMetaClick',
    mouseEvent: 'onClick',
    meta: true
  });

  var withShiftClick = exports.withShiftClick = composeMouseModifierKey({
    eventPropName: 'onShiftClick',
    mouseEvent: 'onClick',
    shift: true
  });
});
//# sourceMappingURL=mouse.js.map