rc-motion - npm Package Compare versions

Comparing version 2.1.2 to 2.2.0

es/CSSMotion.d.ts

@@ -39,2 +39,4 @@ import * as React from 'react';
     onLeaveEnd?: MotionEndEventHandler;
+    /** This will always trigger after final visible changed. Even if no motion configured. */
+    onVisibleChanged?: (visible: boolean) => void;
     internalRef?: React.Ref<any>;
@@ -41,0 +43,0 @@ children?: (props: {

es/CSSMotionList.d.ts

 import * as React from 'react';
 import { CSSMotionProps } from './CSSMotion';
 import { KeyObject } from './util/diff';
-import { ListMotionEndEventHandler } from './interface';
-export interface CSSMotionListProps extends Omit<CSSMotionProps, 'onLeaveEnd'> {
+export interface CSSMotionListProps extends Omit<CSSMotionProps, 'onVisibleChanged'> {
     keys: (React.Key | {
@@ -11,3 +10,6 @@ key: React.Key;
     component?: string | React.ComponentType | false;
-    onLeaveEnd?: ListMotionEndEventHandler;
+    /** This will always trigger after final visible changed. Even if no motion configured. */
+    onVisibleChanged?: (visible: boolean, info: {
+        key: React.Key;
+    }) => void;
 }
@@ -17,2 +19,7 @@ export interface CSSMotionListState {
 }
+/**
+ * Generate a CSSMotionList component with config
+ * @param transitionSupport No need since CSSMotionList no longer depends on transition support
+ * @param CSSMotion CSSMotion component
+ */
 export declare function genCSSMotionList(transitionSupport: boolean, CSSMotion?: React.ForwardRefExoticComponent<CSSMotionProps & {
@@ -19,0 +26,0 @@ ref?: React.Ref<any>;

es/CSSMotionList.js

@@ -14,2 +14,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var MOTION_PROP_NAMES = ['eventProps', 'visible', 'children', 'motionName', 'motionAppear', 'motionEnter', 'motionLeave', 'motionLeaveImmediately', 'motionDeadline', 'removeOnLeave', 'leavedClassName', 'onAppearStart', 'onAppearActive', 'onAppearEnd', 'onEnterStart', 'onEnterActive', 'onEnterEnd', 'onLeaveStart', 'onLeaveActive', 'onLeaveEnd'];
+/**
+ * Generate a CSSMotionList component with config
+ * @param transitionSupport No need since CSSMotionList no longer depends on transition support
+ * @param CSSMotion CSSMotion component
+ */
+
 export function genCSSMotionList(transitionSupport) {
@@ -60,4 +66,4 @@ var CSSMotion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : OriginCSSMotion;
             children = _this$props.children,
-            _onLeaveEnd = _this$props.onLeaveEnd,
-            restProps = _objectWithoutProperties(_this$props, ["component", "children", "onLeaveEnd"]);
+            _onVisibleChanged = _this$props.onVisibleChanged,
+            restProps = _objectWithoutProperties(_this$props, ["component", "children", "onVisibleChanged"]);
 
@@ -80,14 +86,10 @@ var Component = component || React.Fragment;
             eventProps: eventProps,
-            onLeaveEnd: function onLeaveEnd() {
-              if (_onLeaveEnd) {
-                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                  args[_key] = arguments[_key];
-                }
+            onVisibleChanged: function onVisibleChanged(changedVisible) {
+              _onVisibleChanged === null || _onVisibleChanged === void 0 ? void 0 : _onVisibleChanged(changedVisible, {
+                key: eventProps.key
+              });
 
-                _onLeaveEnd.apply(void 0, args.concat([{
-                  key: eventProps.key
-                }]));
+              if (!changedVisible) {
+                _this2.removeKey(eventProps.key);
               }
-
-              _this2.removeKey(eventProps.key);
             }
@@ -102,31 +104,11 @@ }), children);
         var keyEntities = _ref4.keyEntities;
-        var parsedKeyObjects = parseKeys(keys); // Always as keep when motion not support
-
-        if (!transitionSupport) {
-          return {
-            keyEntities: parsedKeyObjects.map(function (obj) {
-              return _objectSpread(_objectSpread({}, obj), {}, {
-                status: STATUS_KEEP
-              });
-            })
-          };
-        }
-
+        var parsedKeyObjects = parseKeys(keys);
         var mixedKeyEntities = diffKeys(keyEntities, parsedKeyObjects);
-        var keyEntitiesLen = keyEntities.length;
         return {
           keyEntities: mixedKeyEntities.filter(function (entity) {
-            // IE 9 not support Array.prototype.find
-            var prevEntity = null;
+            var prevEntity = keyEntities.find(function (_ref5) {
+              var key = _ref5.key;
+              return entity.key === key;
+            }); // Remove if already mark as removed
 
-            for (var i = 0; i < keyEntitiesLen; i += 1) {
-              var currentEntity = keyEntities[i];
-
-              if (currentEntity.key === entity.key) {
-                prevEntity = currentEntity;
-                break;
-              }
-            } // Remove if already mark as removed
-
-
             if (prevEntity && prevEntity.status === STATUS_REMOVED && entity.status === STATUS_REMOVE) {
@@ -133,0 +115,0 @@ return false;

es/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,3 +0,3 @@
-import { useLayoutEffect } from 'react';
-declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+import { useEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useEffect;
 export default useIsomorphicLayoutEffect;

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, boolean];
+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, onVisibleChanged, }: CSSMotionProps): [MotionStatus, StepStatus, React.CSSProperties, boolean];

es/hooks/useStatus.js

@@ -5,8 +5,8 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import * as React from 'react';
-import { useState, useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 import { STATUS_APPEAR, STATUS_NONE, STATUS_LEAVE, STATUS_ENTER, STEP_PREPARE, STEP_START, STEP_ACTIVE } from '../interface';
+import useState from './useState';
 import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 import useStepQueue, { DoStep, SkipStep, isActive } from './useStepQueue';
-import useDomMotionEvents from './useDomMotionEvents'; // import useFrameStep, { StepMap, StepCell } from './useFrameStep';
-
+import useDomMotionEvents from './useDomMotionEvents';
 export default function useStatus(supportMotion, visible, getElement, _ref) {
@@ -32,6 +32,7 @@ var _ref$motionEnter = _ref.motionEnter,
       onEnterEnd = _ref.onEnterEnd,
-      onLeaveEnd = _ref.onLeaveEnd;
+      onLeaveEnd = _ref.onLeaveEnd,
+      onVisibleChanged = _ref.onVisibleChanged;
 
   // Used for outer render usage to avoid `visible: false & status: none` to render nothing
-  var _useState = useState(visible),
+  var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -201,4 +202,10 @@ asyncVisible = _useState2[0],
     };
-  }, []); // ============================ Styles ============================
+  }, []); // Trigger `onVisibleChanged`
 
+  useEffect(function () {
+    if (asyncVisible !== undefined && status === STATUS_NONE) {
+      onVisibleChanged === null || onVisibleChanged === void 0 ? void 0 : onVisibleChanged(asyncVisible);
+    }
+  }, [asyncVisible, status]); // ============================ Styles ============================
+
   var mergedStyle = style;
@@ -212,3 +219,3 @@
 
-  return [status, step, mergedStyle, asyncVisible];
+  return [status, step, mergedStyle, asyncVisible !== null && asyncVisible !== void 0 ? asyncVisible : visible];
 }

es/hooks/useStepQueue.js

@@ -32,5 +32,2 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
   useIsomorphicLayoutEffect(function () {
-    // if (step === STEP_START) {
-    //   return;
-    // }
     if (step !== STEP_NONE && step !== STEP_ACTIVATED) {
@@ -37,0 +34,0 @@ var index = STEP_QUEUE.indexOf(step);

es/interface.d.ts

@@ -19,4 +19,1 @@ /// <reference types="react" />
 export declare type MotionEndEventHandler = (element: HTMLElement, event: MotionEvent) => boolean | void;
-export declare type ListMotionEndEventHandler = (element: HTMLElement, event: MotionEvent, info: {
-    key: React.Key;
-}) => void;

lib/CSSMotion.d.ts

@@ -39,2 +39,4 @@ import * as React from 'react';
     onLeaveEnd?: MotionEndEventHandler;
+    /** This will always trigger after final visible changed. Even if no motion configured. */
+    onVisibleChanged?: (visible: boolean) => void;
     internalRef?: React.Ref<any>;
@@ -41,0 +43,0 @@ children?: (props: {

lib/CSSMotionList.d.ts

 import * as React from 'react';
 import { CSSMotionProps } from './CSSMotion';
 import { KeyObject } from './util/diff';
-import { ListMotionEndEventHandler } from './interface';
-export interface CSSMotionListProps extends Omit<CSSMotionProps, 'onLeaveEnd'> {
+export interface CSSMotionListProps extends Omit<CSSMotionProps, 'onVisibleChanged'> {
     keys: (React.Key | {
@@ -11,3 +10,6 @@ key: React.Key;
     component?: string | React.ComponentType | false;
-    onLeaveEnd?: ListMotionEndEventHandler;
+    /** This will always trigger after final visible changed. Even if no motion configured. */
+    onVisibleChanged?: (visible: boolean, info: {
+        key: React.Key;
+    }) => void;
 }
@@ -17,2 +19,7 @@ export interface CSSMotionListState {
 }
+/**
+ * Generate a CSSMotionList component with config
+ * @param transitionSupport No need since CSSMotionList no longer depends on transition support
+ * @param CSSMotion CSSMotion component
+ */
 export declare function genCSSMotionList(transitionSupport: boolean, CSSMotion?: React.ForwardRefExoticComponent<CSSMotionProps & {
@@ -19,0 +26,0 @@ ref?: React.Ref<any>;

lib/CSSMotionList.js

@@ -35,2 +35,7 @@ "use strict";
 var MOTION_PROP_NAMES = ['eventProps', 'visible', 'children', 'motionName', 'motionAppear', 'motionEnter', 'motionLeave', 'motionLeaveImmediately', 'motionDeadline', 'removeOnLeave', 'leavedClassName', 'onAppearStart', 'onAppearActive', 'onAppearEnd', 'onEnterStart', 'onEnterActive', 'onEnterEnd', 'onLeaveStart', 'onLeaveActive', 'onLeaveEnd'];
+/**
+ * Generate a CSSMotionList component with config
+ * @param transitionSupport No need since CSSMotionList no longer depends on transition support
+ * @param CSSMotion CSSMotion component
+ */
 
@@ -80,4 +85,4 @@ function genCSSMotionList(transitionSupport) {
             children = _this$props.children,
-            _onLeaveEnd = _this$props.onLeaveEnd,
-            restProps = (0, _objectWithoutProperties2.default)(_this$props, ["component", "children", "onLeaveEnd"]);
+            _onVisibleChanged = _this$props.onVisibleChanged,
+            restProps = (0, _objectWithoutProperties2.default)(_this$props, ["component", "children", "onVisibleChanged"]);
         var Component = component || React.Fragment;
@@ -98,14 +103,10 @@ var motionProps = {};
             eventProps: eventProps,
-            onLeaveEnd: function onLeaveEnd() {
-              if (_onLeaveEnd) {
-                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                  args[_key] = arguments[_key];
-                }
+            onVisibleChanged: function onVisibleChanged(changedVisible) {
+              _onVisibleChanged === null || _onVisibleChanged === void 0 ? void 0 : _onVisibleChanged(changedVisible, {
+                key: eventProps.key
+              });
 
-                _onLeaveEnd.apply(void 0, args.concat([{
-                  key: eventProps.key
-                }]));
+              if (!changedVisible) {
+                _this2.removeKey(eventProps.key);
               }
-
-              _this2.removeKey(eventProps.key);
             }
@@ -120,31 +121,11 @@ }), children);
         var keyEntities = _ref4.keyEntities;
-        var parsedKeyObjects = (0, _diff.parseKeys)(keys); // Always as keep when motion not support
-
-        if (!transitionSupport) {
-          return {
-            keyEntities: parsedKeyObjects.map(function (obj) {
-              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, obj), {}, {
-                status: _diff.STATUS_KEEP
-              });
-            })
-          };
-        }
-
+        var parsedKeyObjects = (0, _diff.parseKeys)(keys);
         var mixedKeyEntities = (0, _diff.diffKeys)(keyEntities, parsedKeyObjects);
-        var keyEntitiesLen = keyEntities.length;
         return {
           keyEntities: mixedKeyEntities.filter(function (entity) {
-            // IE 9 not support Array.prototype.find
-            var prevEntity = null;
+            var prevEntity = keyEntities.find(function (_ref5) {
+              var key = _ref5.key;
+              return entity.key === key;
+            }); // Remove if already mark as removed
 
-            for (var i = 0; i < keyEntitiesLen; i += 1) {
-              var currentEntity = keyEntities[i];
-
-              if (currentEntity.key === entity.key) {
-                prevEntity = currentEntity;
-                break;
-              }
-            } // Remove if already mark as removed
-
-
             if (prevEntity && prevEntity.status === _diff.STATUS_REMOVED && entity.status === _diff.STATUS_REMOVE) {
@@ -151,0 +132,0 @@ return false;

lib/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,3 +0,3 @@
-import { useLayoutEffect } from 'react';
-declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+import { useEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useEffect;
 export default useIsomorphicLayoutEffect;

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, boolean];
+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, onVisibleChanged, }: CSSMotionProps): [MotionStatus, StepStatus, React.CSSProperties, boolean];

lib/hooks/useStatus.js

@@ -22,2 +22,4 @@ "use strict";
 
+var _useState7 = _interopRequireDefault(require("./useState"));
+
 var _useIsomorphicLayoutEffect = _interopRequireDefault(require("./useIsomorphicLayoutEffect"));
@@ -29,3 +31,2 @@
 
-// import useFrameStep, { StepMap, StepCell } from './useFrameStep';
 function useStatus(supportMotion, visible, getElement, _ref) {
@@ -51,6 +52,7 @@ var _ref$motionEnter = _ref.motionEnter,
       onEnterEnd = _ref.onEnterEnd,
-      onLeaveEnd = _ref.onLeaveEnd;
+      onLeaveEnd = _ref.onLeaveEnd,
+      onVisibleChanged = _ref.onVisibleChanged;
 
   // Used for outer render usage to avoid `visible: false & status: none` to render nothing
-  var _useState = (0, React.useState)(visible),
+  var _useState = (0, _useState7.default)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -60,3 +62,3 @@ asyncVisible = _useState2[0],
 
-  var _useState3 = (0, React.useState)(_interface.STATUS_NONE),
+  var _useState3 = (0, _useState7.default)(_interface.STATUS_NONE),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
@@ -66,3 +68,3 @@ status = _useState4[0],
 
-  var _useState5 = (0, React.useState)(null),
+  var _useState5 = (0, _useState7.default)(null),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
@@ -222,4 +224,10 @@ style = _useState6[0],
     };
-  }, []); // ============================ Styles ============================
+  }, []); // Trigger `onVisibleChanged`
 
+  (0, React.useEffect)(function () {
+    if (asyncVisible !== undefined && status === _interface.STATUS_NONE) {
+      onVisibleChanged === null || onVisibleChanged === void 0 ? void 0 : onVisibleChanged(asyncVisible);
+    }
+  }, [asyncVisible, status]); // ============================ Styles ============================
+
   var mergedStyle = style;
@@ -233,3 +241,3 @@
 
-  return [status, step, mergedStyle, asyncVisible];
+  return [status, step, mergedStyle, asyncVisible !== null && asyncVisible !== void 0 ? asyncVisible : visible];
 }

lib/hooks/useStepQueue.js

@@ -53,5 +53,2 @@ "use strict";
   (0, _useIsomorphicLayoutEffect.default)(function () {
-    // if (step === STEP_START) {
-    //   return;
-    // }
     if (step !== _interface.STEP_NONE && step !== _interface.STEP_ACTIVATED) {
@@ -58,0 +55,0 @@ var index = STEP_QUEUE.indexOf(step);

lib/interface.d.ts

@@ -19,4 +19,1 @@ /// <reference types="react" />
 export declare type MotionEndEventHandler = (element: HTMLElement, event: MotionEvent) => boolean | void;
-export declare type ListMotionEndEventHandler = (element: HTMLElement, event: MotionEvent, info: {
-    key: React.Key;
-}) => void;

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

87703

increased by2.22%

Number of package files

58

increased by7.41%

Lines of code

1890

increased by2.11%

No dependency changes