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

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

import compose from './compose';


var composeMouseEdge = function composeMouseEdge(_ref) {
  var eventPropName = _ref.eventPropName,
      direction = _ref.direction,
      location = _ref.location;
  return compose({
    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;
    }
  });
};

export var 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 compose({
    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;
    }
  });
};

export var withMouseRest = compose({
  eventPropName: 'onMouseRest',
  triggerEvent: ['onMouseOver', 'onMouseMove'],
  defaultDuration: 500,
  cancelEvent: ['onMouseOut', 'onMouseDown']
});

export var withMouseRemainOver = compose({
  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
});

export var withMouseRemainOut = compose({
  eventPropName: 'onMouseRemainOut',
  triggerEvent: 'onMouseOut',
  defaultDuration: 500,
  cancelEvent: 'onMouseOver'
});

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

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

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

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

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

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

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

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

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

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

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

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

export var withShiftClick = composeMouseModifierKey({
  eventPropName: 'onShiftClick',
  mouseEvent: 'onClick',
  shift: true
});