Socket
Socket
Sign inDemoInstall

rc-motion

Package Overview
Dependencies
Maintainers
3
Versions
43
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-motion - npm Package Compare versions

Comparing version 2.7.0 to 2.7.1

5

es/CSSMotion.d.ts
import * as React from 'react';
import type { MotionStatus, MotionEventHandler, MotionEndEventHandler, MotionPrepareEventHandler } from './interface';
import type { MotionEndEventHandler, MotionEventHandler, MotionPrepareEventHandler, MotionStatus } from './interface';
export declare type CSSMotionConfig = boolean | {

@@ -36,4 +36,7 @@ transitionSupport?: boolean;

eventProps?: object;
/** Prepare phase is used for measure element info. It will always trigger even motion is off */
onAppearPrepare?: MotionPrepareEventHandler;
/** Prepare phase is used for measure element info. It will always trigger even motion is off */
onEnterPrepare?: MotionPrepareEventHandler;
/** Prepare phase is used for measure element info. It will always trigger even motion is off */
onLeavePrepare?: MotionPrepareEventHandler;

@@ -40,0 +43,0 @@ onAppearStart?: MotionEventHandler;

16

es/CSSMotion.js

@@ -6,13 +6,13 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

/* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */
import classNames from 'classnames';
import findDOMNode from "rc-util/es/Dom/findDOMNode";
import { fillRef, supportRef } from "rc-util/es/ref";
import * as React from 'react';
import { useRef } from 'react';
import findDOMNode from "rc-util/es/Dom/findDOMNode";
import { fillRef, supportRef } from "rc-util/es/ref";
import classNames from 'classnames';
import { getTransitionName, supportTransition } from "./util/motion";
import { STATUS_NONE, STEP_PREPARE, STEP_START } from "./interface";
import { Context } from "./context";
import DomWrapper from "./DomWrapper";
import useStatus from "./hooks/useStatus";
import DomWrapper from "./DomWrapper";
import { isActive } from "./hooks/useStepQueue";
import { Context } from "./context";
import { STATUS_NONE, STEP_PREPARE, STEP_START } from "./interface";
import { getTransitionName, supportTransition } from "./util/motion";
/**

@@ -88,3 +88,3 @@ * `transitionSupport` is used for none transition test case.

motionChildren = null;
} else if (status === STATUS_NONE || !isSupportTransition(props, contextMotion)) {
} else if (status === STATUS_NONE) {
// Stable children

@@ -91,0 +91,0 @@ if (mergedVisible) {

2

es/hooks/useStatus.d.ts
import * as React from 'react';
import type { CSSMotionProps } from '../CSSMotion';
import type { MotionStatus, StepStatus } from '../interface';
import type { 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, onVisibleChanged, }: CSSMotionProps): [MotionStatus, StepStatus, React.CSSProperties, boolean];

32

es/hooks/useStatus.js
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import useState from "rc-util/es/hooks/useState";
import * as React from 'react';
import { useRef, useEffect } from 'react';
import useState from "rc-util/es/hooks/useState";
import { STATUS_APPEAR, STATUS_NONE, STATUS_LEAVE, STATUS_ENTER, STEP_PREPARE, STEP_START, STEP_ACTIVE } from "../interface";
import useStepQueue, { DoStep, SkipStep, isActive } from "./useStepQueue";
import { useEffect, useRef } from 'react';
import { STATUS_APPEAR, STATUS_ENTER, STATUS_LEAVE, STATUS_NONE, STEP_ACTIVE, STEP_PREPARE, STEP_PREPARED, STEP_START } from "../interface";
import useDomMotionEvents from "./useDomMotionEvents";
import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
import useStepQueue, { DoStep, isActive, SkipStep } from "./useStepQueue";
export default function useStatus(supportMotion, visible, getElement, _ref) {

@@ -56,2 +56,10 @@ var _ref$motionEnter = _ref.motionEnter,

var activeRef = useRef(false);
/**
* Clean up status & style
*/
function updateMotionEndStatus() {
setStatus(STATUS_NONE, true);
setStyle(null, true);
}
function onInternalMotionEnd(event) {

@@ -77,4 +85,3 @@ var element = getDomElement();

if (status !== STATUS_NONE && currentActive && canEnd !== false) {
setStatus(STATUS_NONE, true);
setStyle(null, true);
updateMotionEndStatus();
}

@@ -100,3 +107,3 @@ }

}, [status]);
var _useStepQueue = useStepQueue(status, function (newStep) {
var _useStepQueue = useStepQueue(status, !supportMotion, function (newStep) {
// Only prepare step can be skip

@@ -128,2 +135,5 @@ if (newStep === STEP_PREPARE) {

}
if (step === STEP_PREPARED) {
updateMotionEndStatus();
}
return DoStep;

@@ -143,5 +153,7 @@ }),

mountedRef.current = true;
if (!supportMotion) {
return;
}
// if (!supportMotion) {
// return;
// }
var nextStatus;

@@ -148,0 +160,0 @@

4

es/hooks/useStepQueue.d.ts

@@ -1,2 +0,2 @@

import type { StepStatus, MotionStatus } from '../interface';
import type { MotionStatus, StepStatus } from '../interface';
/** Skip current step */

@@ -7,3 +7,3 @@ export declare const SkipStep: false;

export declare function isActive(step: StepStatus): boolean;
declare const _default: (status: MotionStatus, callback: (step: StepStatus) => Promise<void> | void | typeof SkipStep | typeof DoStep) => [() => void, StepStatus];
declare const _default: (status: MotionStatus, prepareOnly: boolean, callback: (step: StepStatus) => Promise<void> | void | typeof SkipStep | typeof DoStep) => [() => void, StepStatus];
export default _default;

14

es/hooks/useStepQueue.js
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import useState from "rc-util/es/hooks/useState";
import * as React from 'react';
import useState from "rc-util/es/hooks/useState";
import { STEP_PREPARE, STEP_ACTIVE, STEP_START, STEP_ACTIVATED, STEP_NONE } from "../interface";
import { STEP_ACTIVATED, STEP_ACTIVE, STEP_NONE, STEP_PREPARE, STEP_PREPARED, STEP_START } from "../interface";
import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
import useNextFrame from "./useNextFrame";
import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
var STEP_QUEUE = [STEP_PREPARE, STEP_START, STEP_ACTIVE, STEP_ACTIVATED];
var FULL_STEP_QUEUE = [STEP_PREPARE, STEP_START, STEP_ACTIVE, STEP_ACTIVATED];
var SIMPLE_STEP_QUEUE = [STEP_PREPARE, STEP_PREPARED];

@@ -16,3 +17,3 @@ /** Skip current step */

}
export default (function (status, callback) {
export default (function (status, prepareOnly, callback) {
var _useState = useState(STEP_NONE),

@@ -29,2 +30,3 @@ _useState2 = _slicedToArray(_useState, 2),

}
var STEP_QUEUE = prepareOnly ? SIMPLE_STEP_QUEUE : FULL_STEP_QUEUE;
useIsomorphicLayoutEffect(function () {

@@ -38,3 +40,3 @@ if (step !== STEP_NONE && step !== STEP_ACTIVATED) {

setStep(nextStep, true);
} else {
} else if (nextStep) {
// Do as frame for step update

@@ -41,0 +43,0 @@ nextFrame(function (info) {

7

es/interface.d.ts

@@ -12,3 +12,8 @@ /// <reference types="react" />

export declare const STEP_ACTIVATED: "end";
export declare type StepStatus = typeof STEP_NONE | typeof STEP_PREPARE | typeof STEP_START | typeof STEP_ACTIVE | typeof STEP_ACTIVATED;
/**
* Used for disabled motion case.
* Prepare stage will still work but start & active will be skipped.
*/
export declare const STEP_PREPARED: "prepared";
export declare type StepStatus = typeof STEP_NONE | typeof STEP_PREPARE | typeof STEP_START | typeof STEP_ACTIVE | typeof STEP_ACTIVATED | typeof STEP_PREPARED;
export declare type MotionEvent = (TransitionEvent | AnimationEvent) & {

@@ -15,0 +20,0 @@ deadline?: boolean;

7

es/interface.js

@@ -9,2 +9,7 @@ export var STATUS_NONE = 'none';

export var STEP_ACTIVE = 'active';
export var STEP_ACTIVATED = 'end';
export var STEP_ACTIVATED = 'end';
/**
* Used for disabled motion case.
* Prepare stage will still work but start & active will be skipped.
*/
export var STEP_PREPARED = 'prepared';

5

lib/CSSMotion.d.ts
import * as React from 'react';
import type { MotionStatus, MotionEventHandler, MotionEndEventHandler, MotionPrepareEventHandler } from './interface';
import type { MotionEndEventHandler, MotionEventHandler, MotionPrepareEventHandler, MotionStatus } from './interface';
export declare type CSSMotionConfig = boolean | {

@@ -36,4 +36,7 @@ transitionSupport?: boolean;

eventProps?: object;
/** Prepare phase is used for measure element info. It will always trigger even motion is off */
onAppearPrepare?: MotionPrepareEventHandler;
/** Prepare phase is used for measure element info. It will always trigger even motion is off */
onEnterPrepare?: MotionPrepareEventHandler;
/** Prepare phase is used for measure element info. It will always trigger even motion is off */
onLeavePrepare?: MotionPrepareEventHandler;

@@ -40,0 +43,0 @@ onAppearStart?: MotionEventHandler;

14

lib/CSSMotion.js

@@ -14,12 +14,12 @@ "use strict";

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _findDOMNode = _interopRequireDefault(require("rc-util/lib/Dom/findDOMNode"));
var _ref2 = require("rc-util/lib/ref");
var _classnames = _interopRequireDefault(require("classnames"));
var _motion = require("./util/motion");
var _interface = require("./interface");
var React = _interopRequireWildcard(require("react"));
var _context = require("./context");
var _DomWrapper = _interopRequireDefault(require("./DomWrapper"));
var _useStatus3 = _interopRequireDefault(require("./hooks/useStatus"));
var _DomWrapper = _interopRequireDefault(require("./DomWrapper"));
var _useStepQueue = require("./hooks/useStepQueue");
var _context = require("./context");
var _interface = require("./interface");
var _motion = require("./util/motion");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

@@ -99,3 +99,3 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

motionChildren = null;
} else if (status === _interface.STATUS_NONE || !isSupportTransition(props, contextMotion)) {
} else if (status === _interface.STATUS_NONE) {
// Stable children

@@ -102,0 +102,0 @@ if (mergedVisible) {

2

lib/hooks/useStatus.d.ts
import * as React from 'react';
import type { CSSMotionProps } from '../CSSMotion';
import type { MotionStatus, StepStatus } from '../interface';
import type { 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, onVisibleChanged, }: CSSMotionProps): [MotionStatus, StepStatus, React.CSSProperties, boolean];

28

lib/hooks/useStatus.js

@@ -12,8 +12,8 @@ "use strict";

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _useState7 = _interopRequireDefault(require("rc-util/lib/hooks/useState"));
var React = _interopRequireWildcard(require("react"));
var _useState7 = _interopRequireDefault(require("rc-util/lib/hooks/useState"));
var _interface = require("../interface");
var _useStepQueue3 = _interopRequireWildcard(require("./useStepQueue"));
var _useDomMotionEvents3 = _interopRequireDefault(require("./useDomMotionEvents"));
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("./useIsomorphicLayoutEffect"));
var _useStepQueue3 = _interopRequireWildcard(require("./useStepQueue"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

@@ -66,2 +66,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var activeRef = (0, React.useRef)(false);
/**
* Clean up status & style
*/
function updateMotionEndStatus() {
setStatus(_interface.STATUS_NONE, true);
setStyle(null, true);
}
function onInternalMotionEnd(event) {

@@ -87,4 +95,3 @@ var element = getDomElement();

if (status !== _interface.STATUS_NONE && currentActive && canEnd !== false) {
setStatus(_interface.STATUS_NONE, true);
setStyle(null, true);
updateMotionEndStatus();
}

@@ -110,3 +117,3 @@ }

}, [status]);
var _useStepQueue = (0, _useStepQueue3.default)(status, function (newStep) {
var _useStepQueue = (0, _useStepQueue3.default)(status, !supportMotion, function (newStep) {
// Only prepare step can be skip

@@ -138,2 +145,5 @@ if (newStep === _interface.STEP_PREPARE) {

}
if (step === _interface.STEP_PREPARED) {
updateMotionEndStatus();
}
return _useStepQueue3.DoStep;

@@ -153,5 +163,7 @@ }),

mountedRef.current = true;
if (!supportMotion) {
return;
}
// if (!supportMotion) {
// return;
// }
var nextStatus;

@@ -158,0 +170,0 @@

4

lib/hooks/useStepQueue.d.ts

@@ -1,2 +0,2 @@

import type { StepStatus, MotionStatus } from '../interface';
import type { MotionStatus, StepStatus } from '../interface';
/** Skip current step */

@@ -7,3 +7,3 @@ export declare const SkipStep: false;

export declare function isActive(step: StepStatus): boolean;
declare const _default: (status: MotionStatus, callback: (step: StepStatus) => Promise<void> | void | typeof SkipStep | typeof DoStep) => [() => void, StepStatus];
declare const _default: (status: MotionStatus, prepareOnly: boolean, callback: (step: StepStatus) => Promise<void> | void | typeof SkipStep | typeof DoStep) => [() => void, StepStatus];
export default _default;

12

lib/hooks/useStepQueue.js

@@ -11,10 +11,11 @@ "use strict";

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _useState3 = _interopRequireDefault(require("rc-util/lib/hooks/useState"));
var React = _interopRequireWildcard(require("react"));
var _useState3 = _interopRequireDefault(require("rc-util/lib/hooks/useState"));
var _interface = require("../interface");
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("./useIsomorphicLayoutEffect"));
var _useNextFrame3 = _interopRequireDefault(require("./useNextFrame"));
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("./useIsomorphicLayoutEffect"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var STEP_QUEUE = [_interface.STEP_PREPARE, _interface.STEP_START, _interface.STEP_ACTIVE, _interface.STEP_ACTIVATED];
var FULL_STEP_QUEUE = [_interface.STEP_PREPARE, _interface.STEP_START, _interface.STEP_ACTIVE, _interface.STEP_ACTIVATED];
var SIMPLE_STEP_QUEUE = [_interface.STEP_PREPARE, _interface.STEP_PREPARED];

@@ -30,3 +31,3 @@ /** Skip current step */

}
var _default = function _default(status, callback) {
var _default = function _default(status, prepareOnly, callback) {
var _useState = (0, _useState3.default)(_interface.STEP_NONE),

@@ -43,2 +44,3 @@ _useState2 = (0, _slicedToArray2.default)(_useState, 2),

}
var STEP_QUEUE = prepareOnly ? SIMPLE_STEP_QUEUE : FULL_STEP_QUEUE;
(0, _useIsomorphicLayoutEffect.default)(function () {

@@ -52,3 +54,3 @@ if (step !== _interface.STEP_NONE && step !== _interface.STEP_ACTIVATED) {

setStep(nextStep, true);
} else {
} else if (nextStep) {
// Do as frame for step update

@@ -55,0 +57,0 @@ nextFrame(function (info) {

7

lib/interface.d.ts

@@ -12,3 +12,8 @@ /// <reference types="react" />

export declare const STEP_ACTIVATED: "end";
export declare type StepStatus = typeof STEP_NONE | typeof STEP_PREPARE | typeof STEP_START | typeof STEP_ACTIVE | typeof STEP_ACTIVATED;
/**
* Used for disabled motion case.
* Prepare stage will still work but start & active will be skipped.
*/
export declare const STEP_PREPARED: "prepared";
export declare type StepStatus = typeof STEP_NONE | typeof STEP_PREPARE | typeof STEP_START | typeof STEP_ACTIVE | typeof STEP_ACTIVATED | typeof STEP_PREPARED;
export declare type MotionEvent = (TransitionEvent | AnimationEvent) & {

@@ -15,0 +20,0 @@ deadline?: boolean;

10

lib/interface.js

@@ -6,3 +6,3 @@ "use strict";

});
exports.STEP_START = exports.STEP_PREPARE = exports.STEP_NONE = exports.STEP_ACTIVE = exports.STEP_ACTIVATED = exports.STATUS_NONE = exports.STATUS_LEAVE = exports.STATUS_ENTER = exports.STATUS_APPEAR = void 0;
exports.STEP_START = exports.STEP_PREPARED = exports.STEP_PREPARE = exports.STEP_NONE = exports.STEP_ACTIVE = exports.STEP_ACTIVATED = exports.STATUS_NONE = exports.STATUS_LEAVE = exports.STATUS_ENTER = exports.STATUS_APPEAR = void 0;
var STATUS_NONE = 'none';

@@ -25,2 +25,8 @@ exports.STATUS_NONE = STATUS_NONE;

var STEP_ACTIVATED = 'end';
exports.STEP_ACTIVATED = STEP_ACTIVATED;
/**
* Used for disabled motion case.
* Prepare stage will still work but start & active will be skipped.
*/
exports.STEP_ACTIVATED = STEP_ACTIVATED;
var STEP_PREPARED = 'prepared';
exports.STEP_PREPARED = STEP_PREPARED;

2

package.json
{
"name": "rc-motion",
"version": "2.7.0",
"version": "2.7.1",
"description": "React lifecycle controlled motion library",

@@ -5,0 +5,0 @@ "keywords": [

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc