@rc-component/trigger 1.5.9 → 1.6.0

package/es/hooks/useAction.d.ts

@@ -1,4 +1,4 @@
 import type { ActionType } from '../interface';
 declare type ActionTypes = ActionType | ActionType[];
-export default function useAction(action: ActionTypes, showAction?: ActionTypes, hideAction?: ActionTypes): [showAction: Set<ActionType>, hideAction: Set<ActionType>];
+export default function useAction(mobile: boolean, action: ActionTypes, showAction?: ActionTypes, hideAction?: ActionTypes): [showAction: Set<ActionType>, hideAction: Set<ActionType>];
 export {};

package/es/hooks/useAction.js

@@ -1,8 +1,23 @@
+import * as React from 'react';
 function toArray(val) {
   return val ? Array.isArray(val) ? val : [val] : [];
 }
-export default function useAction(action, showAction, hideAction) {
-  var mergedShowAction = toArray(showAction !== null && showAction !== void 0 ? showAction : action);
-  var mergedHideAction = toArray(hideAction !== null && hideAction !== void 0 ? hideAction : action);
-  return [new Set(mergedShowAction), new Set(mergedHideAction)];
+export default function useAction(mobile, action, showAction, hideAction) {
+  return React.useMemo(function () {
+    var mergedShowAction = toArray(showAction !== null && showAction !== void 0 ? showAction : action);
+    var mergedHideAction = toArray(hideAction !== null && hideAction !== void 0 ? hideAction : action);
+    var showActionSet = new Set(mergedShowAction);
+    var hideActionSet = new Set(mergedHideAction);
+    if (mobile) {
+      if (showActionSet.has('hover')) {
+        showActionSet.delete('hover');
+        showActionSet.add('click');
+      }
+      if (hideActionSet.has('hover')) {
+        hideActionSet.delete('hover');
+        hideActionSet.add('click');
+      }
+    }
+    return [showActionSet, hideActionSet];
+  }, [mobile, action, showAction, hideAction]);
 }

package/es/index.js

@@ -9,6 +9,7 @@ import { isDOM } from "rc-util/es/Dom/findDOMNode";
 import useEvent from "rc-util/es/hooks/useEvent";
 import useId from "rc-util/es/hooks/useId";
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
+import isMobile from "rc-util/es/isMobile";
 import * as React from 'react';
 import TriggerContext from "./context";
 import useAction from "./hooks/useAction";
@@ -68,6 +69,15 @@ export function generateTrigger() {
       restProps = _objectWithoutProperties(props, _excluded);
     var mergedAutoDestroy = autoDestroy || destroyPopupOnHide || false;
 
+    // =========================== Mobile ===========================
+    var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      mobile = _React$useState2[0],
+      setMobile = _React$useState2[1];
+    useLayoutEffect(function () {
+      setMobile(isMobile());
+    }, []);
+
     // ========================== Context ===========================
     var subPopupElements = React.useRef({});
     var parentContext = React.useContext(TriggerContext);
@@ -82,10 +92,10 @@ export function generateTrigger() {
 
     // =========================== Popup ============================
     var id = useId();
-    var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      popupEle = _React$useState2[0],
-      setPopupEle = _React$useState2[1];
+    var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      popupEle = _React$useState4[0],
+      setPopupEle = _React$useState4[1];
     var setPopupRef = useEvent(function (node) {
       if (isDOM(node) && popupEle !== node) {
         setPopupEle(node);
@@ -95,10 +105,10 @@ export function generateTrigger() {
 
     // =========================== Target ===========================
     // Use state to control here since `useRef` update not trigger render
-    var _React$useState3 = React.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      targetEle = _React$useState4[0],
-      setTargetEle = _React$useState4[1];
+    var _React$useState5 = React.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      targetEle = _React$useState6[0],
+      setTargetEle = _React$useState6[1];
     var setTargetRef = useEvent(function (node) {
       if (isDOM(node) && targetEle !== node) {
         setTargetEle(node);
@@ -121,10 +131,10 @@ export function generateTrigger() {
     var mergeMaskMotion = getMotion(prefixCls, maskMotion, maskAnimation, maskTransitionName);
 
     // ============================ Open ============================
-    var _React$useState5 = React.useState(defaultPopupVisible || false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      internalOpen = _React$useState6[0],
-      setInternalOpen = _React$useState6[1];
+    var _React$useState7 = React.useState(defaultPopupVisible || false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      internalOpen = _React$useState8[0],
+      setInternalOpen = _React$useState8[1];
 
     // Render still use props as first priority
     var mergedOpen = popupVisible !== null && popupVisible !== void 0 ? popupVisible : internalOpen;
@@ -168,10 +178,10 @@ export function generateTrigger() {
     }, []);
 
     // ========================== Motion ============================
-    var _React$useState7 = React.useState(false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      inMotion = _React$useState8[0],
-      setInMotion = _React$useState8[1];
+    var _React$useState9 = React.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      inMotion = _React$useState10[0],
+      setInMotion = _React$useState10[1];
     var mountRef = React.useRef(true);
     useLayoutEffect(function () {
       if (!mountRef.current || mergedOpen) {
@@ -179,16 +189,16 @@ export function generateTrigger() {
       }
       mountRef.current = true;
     }, [mergedOpen]);
-    var _React$useState9 = React.useState(null),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      motionPrepareResolve = _React$useState10[0],
-      setMotionPrepareResolve = _React$useState10[1];
+    var _React$useState11 = React.useState(null),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      motionPrepareResolve = _React$useState12[0],
+      setMotionPrepareResolve = _React$useState12[1];
 
     // =========================== Align ============================
-    var _React$useState11 = React.useState([0, 0]),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      mousePos = _React$useState12[0],
-      setMousePos = _React$useState12[1];
+    var _React$useState13 = React.useState([0, 0]),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      mousePos = _React$useState14[0],
+      setMousePos = _React$useState14[1];
     var setMousePosByEvent = function setMousePosByEvent(event) {
       setMousePos([event.clientX, event.clientY]);
     };
@@ -253,14 +263,14 @@ export function generateTrigger() {
     }, [motionPrepareResolve]);
 
     // ========================== Stretch ===========================
-    var _React$useState13 = React.useState(0),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      targetWidth = _React$useState14[0],
-      setTargetWidth = _React$useState14[1];
     var _React$useState15 = React.useState(0),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      targetHeight = _React$useState16[0],
-      setTargetHeight = _React$useState16[1];
+      targetWidth = _React$useState16[0],
+      setTargetWidth = _React$useState16[1];
+    var _React$useState17 = React.useState(0),
+      _React$useState18 = _slicedToArray(_React$useState17, 2),
+      targetHeight = _React$useState18[0],
+      setTargetHeight = _React$useState18[1];
     var onTargetResize = function onTargetResize(_, ele) {
       triggerAlign();
       if (stretch) {
@@ -271,7 +281,7 @@ export function generateTrigger() {
     };
 
     // =========================== Action ===========================
-    var _useAction = useAction(action, showAction, hideAction),
+    var _useAction = useAction(mobile, action, showAction, hideAction),
       _useAction2 = _slicedToArray(_useAction, 2),
       showActions = _useAction2[0],
       hideActions = _useAction2[1];

package/lib/hooks/useAction.d.ts

@@ -1,4 +1,4 @@
 import type { ActionType } from '../interface';
 declare type ActionTypes = ActionType | ActionType[];
-export default function useAction(action: ActionTypes, showAction?: ActionTypes, hideAction?: ActionTypes): [showAction: Set<ActionType>, hideAction: Set<ActionType>];
+export default function useAction(mobile: boolean, action: ActionTypes, showAction?: ActionTypes, hideAction?: ActionTypes): [showAction: Set<ActionType>, hideAction: Set<ActionType>];
 export {};

package/lib/hooks/useAction.js

@@ -1,14 +1,30 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useAction;
+var React = _interopRequireWildcard(require("react"));
 function toArray(val) {
   return val ? Array.isArray(val) ? val : [val] : [];
 }
-function useAction(action, showAction, hideAction) {
-  var mergedShowAction = toArray(showAction !== null && showAction !== void 0 ? showAction : action);
-  var mergedHideAction = toArray(hideAction !== null && hideAction !== void 0 ? hideAction : action);
-  return [new Set(mergedShowAction), new Set(mergedHideAction)];
+function useAction(mobile, action, showAction, hideAction) {
+  return React.useMemo(function () {
+    var mergedShowAction = toArray(showAction !== null && showAction !== void 0 ? showAction : action);
+    var mergedHideAction = toArray(hideAction !== null && hideAction !== void 0 ? hideAction : action);
+    var showActionSet = new Set(mergedShowAction);
+    var hideActionSet = new Set(mergedHideAction);
+    if (mobile) {
+      if (showActionSet.has('hover')) {
+        showActionSet.delete('hover');
+        showActionSet.add('click');
+      }
+      if (hideActionSet.has('hover')) {
+        hideActionSet.delete('hover');
+        hideActionSet.add('click');
+      }
+    }
+    return [showActionSet, hideActionSet];
+  }, [mobile, action, showAction, hideAction]);
 }

package/lib/index.js

@@ -17,6 +17,7 @@ var _findDOMNode = require("rc-util/lib/Dom/findDOMNode");
 var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
 var _useId = _interopRequireDefault(require("rc-util/lib/hooks/useId"));
 var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
+var _isMobile = _interopRequireDefault(require("rc-util/lib/isMobile"));
 var React = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("./context"));
 var _useAction3 = _interopRequireDefault(require("./hooks/useAction"));
@@ -77,6 +78,15 @@ function generateTrigger() {
       restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
     var mergedAutoDestroy = autoDestroy || destroyPopupOnHide || false;
 
+    // =========================== Mobile ===========================
+    var _React$useState = React.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      mobile = _React$useState2[0],
+      setMobile = _React$useState2[1];
+    (0, _useLayoutEffect.default)(function () {
+      setMobile((0, _isMobile.default)());
+    }, []);
+
     // ========================== Context ===========================
     var subPopupElements = React.useRef({});
     var parentContext = React.useContext(_context.default);
@@ -91,10 +101,10 @@ function generateTrigger() {
 
     // =========================== Popup ============================
     var id = (0, _useId.default)();
-    var _React$useState = React.useState(null),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      popupEle = _React$useState2[0],
-      setPopupEle = _React$useState2[1];
+    var _React$useState3 = React.useState(null),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      popupEle = _React$useState4[0],
+      setPopupEle = _React$useState4[1];
     var setPopupRef = (0, _useEvent.default)(function (node) {
       if ((0, _findDOMNode.isDOM)(node) && popupEle !== node) {
         setPopupEle(node);
@@ -104,10 +114,10 @@ function generateTrigger() {
 
     // =========================== Target ===========================
     // Use state to control here since `useRef` update not trigger render
-    var _React$useState3 = React.useState(null),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      targetEle = _React$useState4[0],
-      setTargetEle = _React$useState4[1];
+    var _React$useState5 = React.useState(null),
+      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+      targetEle = _React$useState6[0],
+      setTargetEle = _React$useState6[1];
     var setTargetRef = (0, _useEvent.default)(function (node) {
       if ((0, _findDOMNode.isDOM)(node) && targetEle !== node) {
         setTargetEle(node);
@@ -130,10 +140,10 @@ function generateTrigger() {
     var mergeMaskMotion = (0, _util.getMotion)(prefixCls, maskMotion, maskAnimation, maskTransitionName);
 
     // ============================ Open ============================
-    var _React$useState5 = React.useState(defaultPopupVisible || false),
-      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      internalOpen = _React$useState6[0],
-      setInternalOpen = _React$useState6[1];
+    var _React$useState7 = React.useState(defaultPopupVisible || false),
+      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+      internalOpen = _React$useState8[0],
+      setInternalOpen = _React$useState8[1];
 
     // Render still use props as first priority
     var mergedOpen = popupVisible !== null && popupVisible !== void 0 ? popupVisible : internalOpen;
@@ -177,10 +187,10 @@ function generateTrigger() {
     }, []);
 
     // ========================== Motion ============================
-    var _React$useState7 = React.useState(false),
-      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-      inMotion = _React$useState8[0],
-      setInMotion = _React$useState8[1];
+    var _React$useState9 = React.useState(false),
+      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
+      inMotion = _React$useState10[0],
+      setInMotion = _React$useState10[1];
     var mountRef = React.useRef(true);
     (0, _useLayoutEffect.default)(function () {
       if (!mountRef.current || mergedOpen) {
@@ -188,16 +198,16 @@ function generateTrigger() {
       }
       mountRef.current = true;
     }, [mergedOpen]);
-    var _React$useState9 = React.useState(null),
-      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
-      motionPrepareResolve = _React$useState10[0],
-      setMotionPrepareResolve = _React$useState10[1];
+    var _React$useState11 = React.useState(null),
+      _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
+      motionPrepareResolve = _React$useState12[0],
+      setMotionPrepareResolve = _React$useState12[1];
 
     // =========================== Align ============================
-    var _React$useState11 = React.useState([0, 0]),
-      _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
-      mousePos = _React$useState12[0],
-      setMousePos = _React$useState12[1];
+    var _React$useState13 = React.useState([0, 0]),
+      _React$useState14 = (0, _slicedToArray2.default)(_React$useState13, 2),
+      mousePos = _React$useState14[0],
+      setMousePos = _React$useState14[1];
     var setMousePosByEvent = function setMousePosByEvent(event) {
       setMousePos([event.clientX, event.clientY]);
     };
@@ -262,14 +272,14 @@ function generateTrigger() {
     }, [motionPrepareResolve]);
 
     // ========================== Stretch ===========================
-    var _React$useState13 = React.useState(0),
-      _React$useState14 = (0, _slicedToArray2.default)(_React$useState13, 2),
-      targetWidth = _React$useState14[0],
-      setTargetWidth = _React$useState14[1];
     var _React$useState15 = React.useState(0),
       _React$useState16 = (0, _slicedToArray2.default)(_React$useState15, 2),
-      targetHeight = _React$useState16[0],
-      setTargetHeight = _React$useState16[1];
+      targetWidth = _React$useState16[0],
+      setTargetWidth = _React$useState16[1];
+    var _React$useState17 = React.useState(0),
+      _React$useState18 = (0, _slicedToArray2.default)(_React$useState17, 2),
+      targetHeight = _React$useState18[0],
+      setTargetHeight = _React$useState18[1];
     var onTargetResize = function onTargetResize(_, ele) {
       triggerAlign();
       if (stretch) {
@@ -280,7 +290,7 @@ function generateTrigger() {
     };
 
     // =========================== Action ===========================
-    var _useAction = (0, _useAction3.default)(action, showAction, hideAction),
+    var _useAction = (0, _useAction3.default)(mobile, action, showAction, hideAction),
       _useAction2 = (0, _slicedToArray2.default)(_useAction, 2),
       showActions = _useAction2[0],
       hideActions = _useAction2[1];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "1.5.9",
+  "version": "1.6.0",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"