react-widget-trigger/esm/index.js

trigger

import _extends from "@babel/runtime/helpers/extends";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from "react";
import { findDOMNode } from "react-dom";
import Popup from "react-widget-popup";
import listen from "dom-helpers/listen";
import contains from "dom-helpers/contains";
import removeClass from "dom-helpers/removeClass";
import addClass from "dom-helpers/addClass";
import position, { PositionOptions, Feedback } from "jq-position";
import Portal from "react-widget-portal";
import getPlacement, { Placements } from "./getPlacement";
export var version = "2.1.0";
export function feedbackToPlacement(feedback) {
  var map = {
    center_top_center_bottom: "top",
    left_top_left_bottom: "top-left",
    right_top_right_bottom: "top-right",
    center_bottom_center_top: "bottom",
    left_bottom_left_top: "bottom-left",
    right_bottom_right_top: "bottom-right",
    left_center_right_center: "left",
    left_top_right_top: "left-top",
    left_bottom_right_bottom: "left-bottom",
    right_center_left_center: "right",
    right_top_left_top: "right-top",
    right_bottom_left_bottom: "right-bottom"
  };
  return map[feedback.at.join("_") + "_" + feedback.my.join("_")];
}
export var Trigger = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Trigger, _React$Component);

  function Trigger() {
    var _this;

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

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _defineProperty(_assertThisInitialized(_this), "state", {
      popupVisible: _this.props.defaultPopupVisible
    });

    _defineProperty(_assertThisInitialized(_this), "delayTimer", null);

    _defineProperty(_assertThisInitialized(_this), "popupInstance", void 0);

    _defineProperty(_assertThisInitialized(_this), "triggerInstance", void 0);

    _defineProperty(_assertThisInitialized(_this), "refHandlers", {
      popup: function popup(node) {
        return _this.popupInstance = node;
      },
      trigger: function trigger(node) {
        return _this.triggerInstance = node;
      }
    });

    _defineProperty(_assertThisInitialized(_this), "clickOutsideHandler", void 0);

    _defineProperty(_assertThisInitialized(_this), "touchOutsideHandler", void 0);

    _defineProperty(_assertThisInitialized(_this), "contextMenuOutsideHandler1", void 0);

    _defineProperty(_assertThisInitialized(_this), "contextMenuOutsideHandler2", void 0);

    _defineProperty(_assertThisInitialized(_this), "windowScrollHandler", void 0);

    _defineProperty(_assertThisInitialized(_this), "windowResizeHandler", void 0);

    _defineProperty(_assertThisInitialized(_this), "onOutsideClickToHide", function (event) {
      var target = event.target;

      var triggerNode = _this.getTriggerNode();

      var popupRootNode = _this.popupInstance.getRootDOM();

      if (!contains(triggerNode, target) && !contains(popupRootNode, target)) {
        _this.hide();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "isFocusToShow", function () {
      return _this.checkToShow(["focus"]);
    });

    _defineProperty(_assertThisInitialized(_this), "isBlurToHide", function () {
      return _this.checkToHide(["focus", "blur"]);
    });

    _defineProperty(_assertThisInitialized(_this), "isWindowResizeToHide", function () {
      return _this.checkToHide(["resize"]);
    });

    _defineProperty(_assertThisInitialized(_this), "onMouseEnter", function (e) {
      _this.delaySetPopupVisible(true);
    });

    _defineProperty(_assertThisInitialized(_this), "onMouseLeave", function (e) {
      _this.delaySetPopupVisible(false);
    });

    _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
      _this.delaySetPopupVisible(true);
    });

    _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
      _this.delaySetPopupVisible(false);
    });

    _defineProperty(_assertThisInitialized(_this), "onContextMenuClose", function () {
      _this.hide();
    });

    return _this;
  }

  Trigger.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
    return {
      popupVisible: nextProps.disabled ? false : nextProps.popupVisible === undefined ? state.popupVisible : nextProps.popupVisible
    };
  };

  var _proto = Trigger.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.togglePopupCloseEvents();
  };

  _proto.componentDidUpdate = function componentDidUpdate() {
    this.togglePopupCloseEvents();
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.clearDelayTimer();
    this.clearOutsideHandler();
  };

  _proto.togglePopupCloseEvents = function togglePopupCloseEvents() {
    var _this2 = this;

    var _this$props = this.props,
        getDocument = _this$props.getDocument,
        outsideHideEventName = _this$props.outsideHideEventName;
    var popupVisible = this.state.popupVisible;

    if (popupVisible) {
      var currentDocument = getDocument();

      if (!this.clickOutsideHandler && (this.isMouseDownToHide() || this.isClickToHide() || this.isContextMenuToShow())) {
        if (Array.isArray(outsideHideEventName)) {
          var cancelHandlers = [];
          outsideHideEventName.forEach(function (name) {
            cancelHandlers.push(listen(currentDocument, name, _this2.onOutsideClickToHide));
          });

          this.clickOutsideHandler = function () {
            cancelHandlers.forEach(function (cancel) {
              return cancel();
            });
          };
        } else {
          this.clickOutsideHandler = listen(currentDocument, outsideHideEventName, this.onOutsideClickToHide);
        }
      } // if (!this.touchOutsideHandler && isMobile) {
      // 	this.touchOutsideHandler = listen(currentDocument, "click", this.onOutsideClick);
      // }
      // close popup when trigger type contains 'onContextMenu' and document is scrolling.


      if (!this.contextMenuOutsideHandler1 && this.isContextMenuToShow()) {
        this.contextMenuOutsideHandler1 = listen(currentDocument, "scroll", this.onContextMenuClose);
      } // close popup when trigger type contains 'onContextMenu' and window is blur.


      if (!this.contextMenuOutsideHandler2 && this.isContextMenuToShow()) {
        //@ts-ignore
        this.contextMenuOutsideHandler2 = listen(window, "blur", this.onContextMenuClose);
      } // if (!this.windowScrollHandler && this.isWindowScrollToHide()) {
      // 	this.windowScrollHandler = listen(
      // 		currentDocument,
      // 		"scroll",
      // 		this.onOutsideClickToHide
      // 	);
      // }


      if (!this.windowResizeHandler && this.isWindowResizeToHide()) {
        //@ts-ignore
        this.windowResizeHandler = listen(window, "resize", this.hide.bind(this));
      }
    } else {
      this.clearOutsideHandler();
    }
  };

  _proto.getTriggerNode = function getTriggerNode() {
    return findDOMNode(this);
  };

  _proto.getPopupNode = function getPopupNode() {
    return this.popupInstance.getPopupDOM();
  };

  _proto.getComponentNode = function getComponentNode() {
    return findDOMNode(this);
  };

  _proto.clearOutsideHandler = function clearOutsideHandler() {
    if (this.clickOutsideHandler) {
      this.clickOutsideHandler();
      this.clickOutsideHandler = null;
    }

    if (this.contextMenuOutsideHandler1) {
      this.contextMenuOutsideHandler1();
      this.contextMenuOutsideHandler1 = null;
    }

    if (this.contextMenuOutsideHandler2) {
      this.contextMenuOutsideHandler2();
      this.contextMenuOutsideHandler2 = null;
    }

    if (this.touchOutsideHandler) {
      this.touchOutsideHandler();
      this.touchOutsideHandler = null;
    }

    if (this.windowScrollHandler) {
      this.windowScrollHandler();
      this.windowScrollHandler = null;
    }

    if (this.windowResizeHandler) {
      this.windowResizeHandler();
      this.windowResizeHandler = null;
    }
  };

  _proto._setPopupVisible = function _setPopupVisible(popupVisible) {
    var _this$props$onPopupVi, _this$props2;

    if (this.props.popupVisible === undefined) {
      this.setState({
        popupVisible: popupVisible
      });
    }

    (_this$props$onPopupVi = (_this$props2 = this.props).onPopupVisibleChange) === null || _this$props$onPopupVi === void 0 ? void 0 : _this$props$onPopupVi.call(_this$props2, popupVisible);
  };

  _proto.show = function show() {
    this.delaySetPopupVisible(true);
  };

  _proto.hide = function hide() {
    this.delaySetPopupVisible(false);
  };

  _proto.clearDelayTimer = function clearDelayTimer() {
    if (this.delayTimer) {
      clearTimeout(this.delayTimer);
      this.delayTimer = null;
    }
  };

  _proto.getDelayTime = function getDelayTime(action) {
    if (action === void 0) {
      action = "show";
    }

    var delay = this.props.delay;

    if (delay && typeof delay !== "number") {
      return Math.abs(delay[action]);
    }

    return Math.abs(delay);
  };

  _proto.delaySetPopupVisible = function delaySetPopupVisible(visible) {
    var _this3 = this;

    if (this.state.popupVisible === visible) {
      return;
    }

    this.clearDelayTimer();
    this.clearOutsideHandler();
    var delay = this.getDelayTime(visible ? "show" : "hide");

    if (delay) {
      this.delayTimer = setTimeout(function () {
        _this3.delayTimer = null;

        _this3._setPopupVisible(visible);
      }, delay);
    } else {
      this._setPopupVisible(visible);
    }
  };

  _proto.checkToShow = function checkToShow(actions) {
    var _this$props3 = this.props,
        action = _this$props3.action,
        showAction = _this$props3.showAction;
    var action1 = Array.isArray(action) ? action : [action];
    var showAction1 = Array.isArray(showAction) ? showAction : [showAction];
    var s = [].concat(action1, showAction1);

    for (var i = 0; i < actions.length; i++) {
      if (s.indexOf(actions[i]) !== -1) return true;
    }

    return false;
  };

  _proto.checkToHide = function checkToHide(actions) {
    var _this$props4 = this.props,
        action = _this$props4.action,
        hideAction = _this$props4.hideAction;
    var action1 = Array.isArray(action) ? action : [action];
    var hideAction1 = Array.isArray(hideAction) ? hideAction : [hideAction];
    var s = [].concat(action1, hideAction1);

    for (var i = 0; i < actions.length; i++) {
      if (s.indexOf(actions[i]) !== -1) return true;
    }

    return false;
  };

  _proto.isContextMenuToShow = function isContextMenuToShow() {
    return this.checkToShow(["contextMenu"]);
  };

  _proto.isMouseDownToShow = function isMouseDownToShow() {
    return this.checkToShow(["mouseDown"]);
  };

  _proto.isMouseDownToHide = function isMouseDownToHide() {
    return this.checkToHide(["mouseDown"]);
  };

  _proto.isClickToShow = function isClickToShow() {
    return this.checkToShow(["click"]);
  };

  _proto.isClickToHide = function isClickToHide() {
    return this.checkToHide(["click"]);
  };

  _proto.isMouseEnterToShow = function isMouseEnterToShow() {
    return this.checkToShow(["hover", "mouseEnter"]);
  };

  _proto.isMouseLeaveToHide = function isMouseLeaveToHide() {
    return this.checkToHide(["hover", "mouseLeave"]);
  };

  // protected isWindowScrollToHide = () => {
  // 	return this.checkToHide(["scroll"]);
  // };
  _proto.onContextMenu = function onContextMenu(e) {
    e.preventDefault();
    this.delaySetPopupVisible(true);
  };

  _proto.onTriggerClick = function onTriggerClick(e) {
    var nextVisible = !this.state.popupVisible;

    if (this.isClickToHide() && !nextVisible || nextVisible && this.isClickToShow()) {
      this.delaySetPopupVisible(nextVisible);
    }
  };

  _proto.onTriggerMouseDown = function onTriggerMouseDown(e) {
    var nextVisible = !this.state.popupVisible;

    if (this.isMouseDownToHide() && !nextVisible || nextVisible && this.isMouseDownToShow()) {
      this.delaySetPopupVisible(nextVisible);
    }
  };

  _proto.removeClassNames = function removeClassNames(popupNode) {
    var prefixCls = this.props.prefixCls;
    [prefixCls + "-placement-top", prefixCls + "-placement-topLeft", prefixCls + "-placement-topRight", prefixCls + "-placement-bottom", prefixCls + "-placement-bottomLeft", prefixCls + "-placement-bottomRight", prefixCls + "-placement-left", prefixCls + "-placement-leftTop", prefixCls + "-placement-leftBottom", prefixCls + "-placement-right", prefixCls + "-placement-rightTop", prefixCls + "-placement-rightBottom"].forEach(removeClass.bind(null, popupNode));
  };

  _proto.addPlacementClassName = function addPlacementClassName(popupNode, feedback) {
    var prefixCls = this.props.prefixCls;
    this.removeClassNames(popupNode);
    addClass(popupNode, prefixCls + "-placement-" + feedbackToPlacement(feedback));
  };

  _proto.setPopupPosition = function setPopupPosition(dom) {
    var _this4 = this;

    var _this$props5 = this.props,
        placement = _this$props5.placement,
        offset = _this$props5.offset,
        positionOpts = _this$props5.position,
        adjustPosition = _this$props5.adjustPosition;
    position(dom, Object.assign(Object.assign(Object.assign({}, getPlacement(placement, offset)), {}, {
      collision: "flipfit",
      of: this.getTriggerNode()
    }, positionOpts), {}, {
      using: function using(pos, feedback) {
        _this4.addPlacementClassName(dom, feedback);

        if (positionOpts && positionOpts.using) {
          positionOpts.using(pos, feedback);
        } else {
          dom.style.left = pos.left + "px";
          dom.style.top = pos.top + "px";
        }

        if (adjustPosition) {
          adjustPosition(dom, pos, feedback);
        }
      }
    }));
  };

  _proto.updatePopupPosition = function updatePopupPosition() {
    var node = this.getPopupNode();
    node && this.setPopupPosition(node);
  };

  _proto.getPopupComponent = function getPopupComponent() {
    var _this5 = this;

    var _this$props6 = this.props,
        popup = _this$props6.popup,
        prefixCls = _this$props6.prefixCls,
        popupClassName = _this$props6.popupClassName,
        popupMaskClassName = _this$props6.popupMaskClassName,
        popupProps = _this$props6.popupProps,
        popupMaskProps = _this$props6.popupMaskProps,
        popupTransition = _this$props6.popupTransition,
        popupMaskTransition = _this$props6.popupMaskTransition,
        forceRender = _this$props6.forceRender,
        mask = _this$props6.mask,
        disableMask = _this$props6.disableMask,
        maskClosable = _this$props6.maskClosable,
        popupStyle = _this$props6.popupStyle,
        popupMaskStyle = _this$props6.popupMaskStyle,
        destroyPopupOnHide = _this$props6.destroyPopupOnHide,
        zIndex = _this$props6.zIndex,
        popupRootClassName = _this$props6.popupRootClassName,
        popupRootStyle = _this$props6.popupRootStyle,
        onBeforeShow = _this$props6.onBeforeShow,
        onAfterShow = _this$props6.onAfterShow,
        onBeforeHide = _this$props6.onBeforeHide,
        onAfterHide = _this$props6.onAfterHide;
    var popupVisible = this.state.popupVisible;
    var newPopupStyle = Object.assign({}, popupStyle);
    var newPopupMaskStyle = Object.assign({}, popupMaskStyle);

    if (zIndex != null) {
      newPopupStyle.zIndex = zIndex;
      newPopupMaskStyle.zIndex = zIndex;
    }

    return /*#__PURE__*/React.createElement(Popup, _extends({
      ref: this.refHandlers.popup,
      prefixCls: prefixCls,
      destroyOnClose: destroyPopupOnHide,
      style: newPopupStyle,
      className: popupClassName,
      maskClassName: popupMaskClassName,
      maskStyle: newPopupMaskStyle,
      mask: mask,
      disableMask: disableMask,
      rootClassName: popupRootClassName,
      rootStyle: popupRootStyle,
      forceRender: forceRender
    }, popupProps, {
      fixed: false,
      visible: popupVisible,
      transition: Object.assign(Object.assign({}, popupTransition), {}, {
        onEnter: function onEnter(dom, appearing) {
          var _popupTransition$onEn;

          onBeforeShow === null || onBeforeShow === void 0 ? void 0 : onBeforeShow(dom);

          _this5.setPopupPosition(dom);

          popupTransition === null || popupTransition === void 0 ? void 0 : (_popupTransition$onEn = popupTransition.onEnter) === null || _popupTransition$onEn === void 0 ? void 0 : _popupTransition$onEn.call(popupTransition, dom, appearing);
        },
        onEntered: function onEntered(dom, appearing) {
          var _popupTransition$onEn2;

          // this.setPopupPosition(dom);
          popupTransition === null || popupTransition === void 0 ? void 0 : (_popupTransition$onEn2 = popupTransition.onEntered) === null || _popupTransition$onEn2 === void 0 ? void 0 : _popupTransition$onEn2.call(popupTransition, dom, appearing);
          onAfterShow === null || onAfterShow === void 0 ? void 0 : onAfterShow(dom);
        },
        onExit: function onExit(dom) {
          var _popupTransition$onEx;

          onBeforeHide === null || onBeforeHide === void 0 ? void 0 : onBeforeHide(dom);
          popupTransition === null || popupTransition === void 0 ? void 0 : (_popupTransition$onEx = popupTransition.onExit) === null || _popupTransition$onEx === void 0 ? void 0 : _popupTransition$onEx.call(popupTransition, dom);
        },
        onExited: function onExited(dom) {
          var _popupTransition$onEx2;

          onAfterHide === null || onAfterHide === void 0 ? void 0 : onAfterHide(dom);
          popupTransition === null || popupTransition === void 0 ? void 0 : (_popupTransition$onEx2 = popupTransition.onExit) === null || _popupTransition$onEx2 === void 0 ? void 0 : _popupTransition$onEx2.call(popupTransition, dom);
        }
      }),
      onMouseEnter: function onMouseEnter(e) {
        var _popupProps$onMouseEn;

        _this5.clearDelayTimer();

        popupProps === null || popupProps === void 0 ? void 0 : (_popupProps$onMouseEn = popupProps.onMouseEnter) === null || _popupProps$onMouseEn === void 0 ? void 0 : _popupProps$onMouseEn.call(popupProps, e);
      },
      onMouseLeave: function onMouseLeave(e) {
        var _popupProps$onMouseLe;

        if (_this5.isMouseLeaveToHide()) {
          _this5.onMouseLeave(e);
        }

        popupProps === null || popupProps === void 0 ? void 0 : (_popupProps$onMouseLe = popupProps.onMouseLeave) === null || _popupProps$onMouseLe === void 0 ? void 0 : _popupProps$onMouseLe.call(popupProps, e);
      },
      maskTransition: popupMaskTransition,
      maskProps: Object.assign(Object.assign({}, popupMaskProps), {}, {
        onClick: function onClick(e) {
          var _popupMaskProps$onCli;

          if (maskClosable) {
            _this5.hide();
          }

          popupMaskProps === null || popupMaskProps === void 0 ? void 0 : (_popupMaskProps$onCli = popupMaskProps.onClick) === null || _popupMaskProps$onCli === void 0 ? void 0 : _popupMaskProps$onCli.call(popupMaskProps, e);
        },
        onMouseEnter: function onMouseEnter(e) {
          var _popupMaskProps$onMou;

          _this5.clearDelayTimer();

          popupMaskProps === null || popupMaskProps === void 0 ? void 0 : (_popupMaskProps$onMou = popupMaskProps.onMouseEnter) === null || _popupMaskProps$onMou === void 0 ? void 0 : _popupMaskProps$onMou.call(popupMaskProps, e);
        }
      })
    }), typeof popup === "function" ? popup(this) : popup);
  };

  _proto.genNewChildProps = function genNewChildProps(child) {
    var _this6 = this;

    var _this$props7 = this.props,
        checkDefaultPrevented = _this$props7.checkDefaultPrevented,
        disabled = _this$props7.disabled;
    var newChildProps = {};

    if (disabled) {
      return newChildProps;
    }

    if (this.isContextMenuToShow()) {
      newChildProps.onContextMenu = function (e) {
        if (child.props.onContextMenu) {
          child.props.onContextMenu(e);
        }

        if (checkDefaultPrevented && e.defaultPrevented) return;

        _this6.clearDelayTimer();

        _this6.onContextMenu(e);
      };
    }

    if (this.isMouseDownToShow() || this.isMouseDownToHide()) {
      newChildProps.onMouseDown = function (e) {
        if (child.props.onMouseDown) {
          child.props.onMouseDown(e);
        }

        if (checkDefaultPrevented && e.defaultPrevented) return;

        _this6.clearDelayTimer();

        _this6.onTriggerMouseDown(e);
      };
    }

    if (this.isClickToHide() || this.isClickToShow()) {
      newChildProps.onClick = function (e) {
        if (child.props.onClick) {
          child.props.onClick(e);
        }

        if (checkDefaultPrevented && e.defaultPrevented) return;

        _this6.clearDelayTimer();

        _this6.onTriggerClick(e);
      };
    }

    if (this.isMouseEnterToShow()) {
      newChildProps.onMouseEnter = function (e) {
        if (child.props.onMouseEnter) {
          child.props.onMouseEnter(e);
        }

        if (checkDefaultPrevented && e.defaultPrevented) return;

        _this6.clearDelayTimer();

        _this6.onMouseEnter(e);
      };
    }

    if (this.isMouseLeaveToHide()) {
      newChildProps.onMouseLeave = function (e) {
        if (child.props.onMouseLeave) {
          child.props.onMouseLeave(e);
        }

        if (checkDefaultPrevented && e.defaultPrevented) return;

        _this6.clearDelayTimer();

        _this6.onMouseLeave(e);
      };
    }

    if (this.isFocusToShow()) {
      newChildProps.onFocus = function (e) {
        if (child.props.onFocus) {
          child.props.onFocus(e);
        }

        if (checkDefaultPrevented && e.defaultPrevented) return;

        _this6.clearDelayTimer();

        _this6.onFocus(e);
      };
    }

    if (this.isBlurToHide()) {
      newChildProps.onBlur = function (e) {
        if (child.props.onBlur) {
          child.props.onBlur(e);
        }

        if (checkDefaultPrevented && e.defaultPrevented) return;

        _this6.clearDelayTimer();

        _this6.onBlur(e);
      };
    }

    return newChildProps;
  };

  _proto.render = function render() {
    var _this$props8 = this.props,
        usePortal = _this$props8.usePortal,
        container = _this$props8.container;
    var child = React.Children.only(this.props.children);
    var trigger = React.cloneElement(child, this.genNewChildProps(child));
    var popup = this.getPopupComponent();

    if (usePortal) {
      popup = /*#__PURE__*/React.createElement(Portal, {
        container: container
      }, popup);
    }

    return /*#__PURE__*/React.createElement(React.Fragment, null, trigger, popup);
  };

  return Trigger;
}(React.Component);

_defineProperty(Trigger, "defaultProps", {
  prefixCls: "rw-trigger",
  placement: "bottomLeft",
  offset: 0,
  defaultPopupVisible: false,
  action: ["click"],
  showAction: [],
  hideAction: [],
  outsideHideEventName: ["mousedown", "click"],
  //, "scroll"
  delay: 0,
  getDocument: function getDocument() {
    return window.document;
  },
  container: document.body,
  mask: false,
  maskClosable: true,
  destroyPopupOnHide: true,
  popupProps: {},
  popupStyle: {},
  popupMaskStyle: {},
  checkDefaultPrevented: false,
  usePortal: true
});

export default Trigger;