rc-motion - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

es/CSSMotion.js

@@ -58,6 +58,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
     var _useStatus = useStatus(supportMotion, visible, getDomElement, props),
-        _useStatus2 = _slicedToArray(_useStatus, 3),
+        _useStatus2 = _slicedToArray(_useStatus, 4),
         status = _useStatus2[0],
         statusStep = _useStatus2[1],
-        statusStyle = _useStatus2[2]; // ====================== Refs ======================
+        statusStyle = _useStatus2[2],
+        mergedVisible = _useStatus2[3]; // ====================== Refs ======================
 
@@ -79,3 +80,3 @@
       // Stable children
-      if (visible) {
+      if (mergedVisible) {
         motionChildren = children(_objectSpread({}, eventProps), setNodeRef);
@@ -82,0 +83,0 @@ } else if (!removeOnLeave) {

es/hooks/useStatus.d.ts

 import * as React from 'react';
 import { MotionStatus, StepStatus } from '../interface';
 import { CSSMotionProps } from '../CSSMotion';
-export default function useStatus(supportMotion: boolean, visible: boolean, getElement: () => HTMLElement, { motionEnter, motionAppear, motionLeave, motionDeadline, motionLeaveImmediately, onAppearPrepare, onEnterPrepare, onLeavePrepare, onAppearStart, onEnterStart, onLeaveStart, onAppearActive, onEnterActive, onLeaveActive, onAppearEnd, onEnterEnd, onLeaveEnd, }: CSSMotionProps): [MotionStatus, StepStatus, React.CSSProperties];
+export default function useStatus(supportMotion: boolean, visible: boolean, getElement: () => HTMLElement, { motionEnter, motionAppear, motionLeave, motionDeadline, motionLeaveImmediately, onAppearPrepare, onEnterPrepare, onLeavePrepare, onAppearStart, onEnterStart, onLeaveStart, onAppearActive, onEnterActive, onLeaveActive, onAppearEnd, onEnterEnd, onLeaveEnd, }: CSSMotionProps): [MotionStatus, StepStatus, React.CSSProperties, boolean];

es/hooks/useStatus.js

@@ -33,12 +33,18 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 
-  var _useState = useState(STATUS_NONE),
+  // Used for outer render usage to avoid `visible: false & status: none` to render nothing
+  var _useState = useState(visible),
       _useState2 = _slicedToArray(_useState, 2),
-      status = _useState2[0],
-      setStatus = _useState2[1];
+      asyncVisible = _useState2[0],
+      setAsyncVisible = _useState2[1];
 
-  var _useState3 = useState(null),
+  var _useState3 = useState(STATUS_NONE),
       _useState4 = _slicedToArray(_useState3, 2),
-      style = _useState4[0],
-      setStyle = _useState4[1];
+      status = _useState4[0],
+      setStatus = _useState4[1];
 
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      style = _useState6[0],
+      setStyle = _useState6[1];
+
   var mountedRef = useRef(false);
@@ -177,2 +183,4 @@ var deadlineRef = useRef(null); // =========================== Dom Node ===========================
     }
+
+    setAsyncVisible(visible);
   }, [visible]); // ============================ Effect ============================
@@ -203,3 +211,3 @@ // Reset when motion changed
 
-  return [status, step, mergedStyle];
+  return [status, step, mergedStyle, asyncVisible];
 }

lib/CSSMotion.js

@@ -81,6 +81,7 @@ "use strict";
     var _useStatus = (0, _useStatus3.default)(supportMotion, visible, getDomElement, props),
-        _useStatus2 = (0, _slicedToArray2.default)(_useStatus, 3),
+        _useStatus2 = (0, _slicedToArray2.default)(_useStatus, 4),
         status = _useStatus2[0],
         statusStep = _useStatus2[1],
-        statusStyle = _useStatus2[2]; // ====================== Refs ======================
+        statusStyle = _useStatus2[2],
+        mergedVisible = _useStatus2[3]; // ====================== Refs ======================
 
@@ -102,3 +103,3 @@
       // Stable children
-      if (visible) {
+      if (mergedVisible) {
         motionChildren = children((0, _objectSpread2.default)({}, eventProps), setNodeRef);
@@ -105,0 +106,0 @@ } else if (!removeOnLeave) {

lib/hooks/useStatus.d.ts

 import * as React from 'react';
 import { MotionStatus, StepStatus } from '../interface';
 import { CSSMotionProps } from '../CSSMotion';
-export default function useStatus(supportMotion: boolean, visible: boolean, getElement: () => HTMLElement, { motionEnter, motionAppear, motionLeave, motionDeadline, motionLeaveImmediately, onAppearPrepare, onEnterPrepare, onLeavePrepare, onAppearStart, onEnterStart, onLeaveStart, onAppearActive, onEnterActive, onLeaveActive, onAppearEnd, onEnterEnd, onLeaveEnd, }: CSSMotionProps): [MotionStatus, StepStatus, React.CSSProperties];
+export default function useStatus(supportMotion: boolean, visible: boolean, getElement: () => HTMLElement, { motionEnter, motionAppear, motionLeave, motionDeadline, motionLeaveImmediately, onAppearPrepare, onEnterPrepare, onLeavePrepare, onAppearStart, onEnterStart, onLeaveStart, onAppearActive, onEnterActive, onLeaveActive, onAppearEnd, onEnterEnd, onLeaveEnd, }: CSSMotionProps): [MotionStatus, StepStatus, React.CSSProperties, boolean];

lib/hooks/useStatus.js

@@ -51,12 +51,18 @@ "use strict";
 
-  var _useState = (0, React.useState)(_interface.STATUS_NONE),
+  // Used for outer render usage to avoid `visible: false & status: none` to render nothing
+  var _useState = (0, React.useState)(visible),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      status = _useState2[0],
-      setStatus = _useState2[1];
+      asyncVisible = _useState2[0],
+      setAsyncVisible = _useState2[1];
 
-  var _useState3 = (0, React.useState)(null),
+  var _useState3 = (0, React.useState)(_interface.STATUS_NONE),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      style = _useState4[0],
-      setStyle = _useState4[1];
+      status = _useState4[0],
+      setStatus = _useState4[1];
 
+  var _useState5 = (0, React.useState)(null),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      style = _useState6[0],
+      setStyle = _useState6[1];
+
   var mountedRef = (0, React.useRef)(false);
@@ -195,2 +201,4 @@ var deadlineRef = (0, React.useRef)(null); // =========================== Dom Node ===========================
     }
+
+    setAsyncVisible(visible);
   }, [visible]); // ============================ Effect ============================
@@ -221,3 +229,3 @@ // Reset when motion changed
 
-  return [status, step, mergedStyle];
+  return [status, step, mergedStyle, asyncVisible];
 }

package.json

 {
   "name": "rc-motion",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "React lifecycle controlled motion library",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

85798

increased by0.87%

Lines of code

1851

increased by0.76%

No dependency changes