@rc-component/trigger 1.5.1 → 1.5.2

package/es/index.js

@@ -8,7 +8,6 @@ import ResizeObserver from 'rc-resize-observer';
 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 useMergedState from "rc-util/es/hooks/useMergedState";
 import * as React from 'react';
 import TriggerContext from "./context";
 import useAction from "./hooks/useAction";
@@ -121,12 +120,23 @@ export function generateTrigger() {
     var mergeMaskMotion = getMotion(prefixCls, maskMotion, maskAnimation, maskTransitionName);
 
     // ============================ Open ============================
-    var _useMergedState = useMergedState(defaultPopupVisible || false, {
-        value: popupVisible
-      }),
-      _useMergedState2 = _slicedToArray(_useMergedState, 2),
-      mergedOpen = _useMergedState2[0],
-      setMergedOpen = _useMergedState2[1];
+    var _React$useState5 = React.useState(defaultPopupVisible || false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      internalOpen = _React$useState6[0],
+      setInternalOpen = _React$useState6[1];
+
+    // Render still use props as first priority
+    var mergedOpen = popupVisible !== null && popupVisible !== void 0 ? popupVisible : internalOpen;
+
+    // We use effect sync here in case `popupVisible` back to `undefined`
+    var setMergedOpen = useEvent(function (nextOpen) {
+      if (popupVisible === undefined) {
+        setInternalOpen(nextOpen);
+      }
+    });
+    useLayoutEffect(function () {
+      setInternalOpen(popupVisible || false);
+    }, [popupVisible]);
     var openRef = React.useRef(mergedOpen);
     openRef.current = mergedOpen;
     var internalTriggerOpen = useEvent(function (nextOpen) {
@@ -157,10 +167,10 @@ export function generateTrigger() {
     }, []);
 
     // ========================== Motion ============================
-    var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      inMotion = _React$useState6[0],
-      setInMotion = _React$useState6[1];
+    var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      inMotion = _React$useState8[0],
+      setInMotion = _React$useState8[1];
     var mountRef = React.useRef(true);
     useLayoutEffect(function () {
       if (!mountRef.current || mergedOpen) {
@@ -168,16 +178,16 @@ export function generateTrigger() {
       }
       mountRef.current = true;
     }, [mergedOpen]);
-    var _React$useState7 = React.useState(null),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      motionPrepareResolve = _React$useState8[0],
-      setMotionPrepareResolve = _React$useState8[1];
+    var _React$useState9 = React.useState(null),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      motionPrepareResolve = _React$useState10[0],
+      setMotionPrepareResolve = _React$useState10[1];
 
     // =========================== Align ============================
-    var _React$useState9 = React.useState([0, 0]),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      mousePos = _React$useState10[0],
-      setMousePos = _React$useState10[1];
+    var _React$useState11 = React.useState([0, 0]),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      mousePos = _React$useState12[0],
+      setMousePos = _React$useState12[1];
     var setMousePosByEvent = function setMousePosByEvent(event) {
       setMousePos([event.clientX, event.clientY]);
     };
@@ -242,14 +252,14 @@ export function generateTrigger() {
     }, [motionPrepareResolve]);
 
     // ========================== Stretch ===========================
-    var _React$useState11 = React.useState(0),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      targetWidth = _React$useState12[0],
-      setTargetWidth = _React$useState12[1];
     var _React$useState13 = React.useState(0),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      targetHeight = _React$useState14[0],
-      setTargetHeight = _React$useState14[1];
+      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];
     var onTargetResize = function onTargetResize(_, ele) {
       triggerAlign();
       if (stretch) {

package/lib/index.js

@@ -16,7 +16,6 @@ var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
 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 _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 var React = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("./context"));
 var _useAction3 = _interopRequireDefault(require("./hooks/useAction"));
@@ -130,12 +129,23 @@ function generateTrigger() {
     var mergeMaskMotion = (0, _util.getMotion)(prefixCls, maskMotion, maskAnimation, maskTransitionName);
 
     // ============================ Open ============================
-    var _useMergedState = (0, _useMergedState3.default)(defaultPopupVisible || false, {
-        value: popupVisible
-      }),
-      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-      mergedOpen = _useMergedState2[0],
-      setMergedOpen = _useMergedState2[1];
+    var _React$useState5 = React.useState(defaultPopupVisible || false),
+      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+      internalOpen = _React$useState6[0],
+      setInternalOpen = _React$useState6[1];
+
+    // Render still use props as first priority
+    var mergedOpen = popupVisible !== null && popupVisible !== void 0 ? popupVisible : internalOpen;
+
+    // We use effect sync here in case `popupVisible` back to `undefined`
+    var setMergedOpen = (0, _useEvent.default)(function (nextOpen) {
+      if (popupVisible === undefined) {
+        setInternalOpen(nextOpen);
+      }
+    });
+    (0, _useLayoutEffect.default)(function () {
+      setInternalOpen(popupVisible || false);
+    }, [popupVisible]);
     var openRef = React.useRef(mergedOpen);
     openRef.current = mergedOpen;
     var internalTriggerOpen = (0, _useEvent.default)(function (nextOpen) {
@@ -166,10 +176,10 @@ function generateTrigger() {
     }, []);
 
     // ========================== Motion ============================
-    var _React$useState5 = React.useState(false),
-      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      inMotion = _React$useState6[0],
-      setInMotion = _React$useState6[1];
+    var _React$useState7 = React.useState(false),
+      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+      inMotion = _React$useState8[0],
+      setInMotion = _React$useState8[1];
     var mountRef = React.useRef(true);
     (0, _useLayoutEffect.default)(function () {
       if (!mountRef.current || mergedOpen) {
@@ -177,16 +187,16 @@ function generateTrigger() {
       }
       mountRef.current = true;
     }, [mergedOpen]);
-    var _React$useState7 = React.useState(null),
-      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-      motionPrepareResolve = _React$useState8[0],
-      setMotionPrepareResolve = _React$useState8[1];
+    var _React$useState9 = React.useState(null),
+      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
+      motionPrepareResolve = _React$useState10[0],
+      setMotionPrepareResolve = _React$useState10[1];
 
     // =========================== Align ============================
-    var _React$useState9 = React.useState([0, 0]),
-      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
-      mousePos = _React$useState10[0],
-      setMousePos = _React$useState10[1];
+    var _React$useState11 = React.useState([0, 0]),
+      _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
+      mousePos = _React$useState12[0],
+      setMousePos = _React$useState12[1];
     var setMousePosByEvent = function setMousePosByEvent(event) {
       setMousePos([event.clientX, event.clientY]);
     };
@@ -251,14 +261,14 @@ function generateTrigger() {
     }, [motionPrepareResolve]);
 
     // ========================== Stretch ===========================
-    var _React$useState11 = React.useState(0),
-      _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
-      targetWidth = _React$useState12[0],
-      setTargetWidth = _React$useState12[1];
     var _React$useState13 = React.useState(0),
       _React$useState14 = (0, _slicedToArray2.default)(_React$useState13, 2),
-      targetHeight = _React$useState14[0],
-      setTargetHeight = _React$useState14[1];
+      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];
     var onTargetResize = function onTargetResize(_, ele) {
       triggerAlign();
       if (stretch) {

package/package.json

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