1
This commit is contained in:
Generated
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
import type { MotionEvent } from '../interface';
|
||||
declare const _default: (onInternalMotionEnd: (event: MotionEvent) => void) => [(element: HTMLElement) => void, (element: HTMLElement) => void];
|
||||
export default _default;
|
||||
Generated
Vendored
+44
@@ -0,0 +1,44 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _react = _interopRequireWildcard(require("react"));
|
||||
var React = _react;
|
||||
var _motion = require("../util/motion");
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
var _default = onInternalMotionEnd => {
|
||||
const cacheElementRef = (0, _react.useRef)();
|
||||
|
||||
// Remove events
|
||||
function removeMotionEvents(element) {
|
||||
if (element) {
|
||||
element.removeEventListener(_motion.transitionEndName, onInternalMotionEnd);
|
||||
element.removeEventListener(_motion.animationEndName, onInternalMotionEnd);
|
||||
}
|
||||
}
|
||||
|
||||
// Patch events
|
||||
function patchMotionEvents(element) {
|
||||
if (cacheElementRef.current && cacheElementRef.current !== element) {
|
||||
removeMotionEvents(cacheElementRef.current);
|
||||
}
|
||||
if (element && element !== cacheElementRef.current) {
|
||||
element.addEventListener(_motion.transitionEndName, onInternalMotionEnd);
|
||||
element.addEventListener(_motion.animationEndName, onInternalMotionEnd);
|
||||
|
||||
// Save as cache in case dom removed trigger by `motionDeadline`
|
||||
cacheElementRef.current = element;
|
||||
}
|
||||
}
|
||||
|
||||
// Clean up when removed
|
||||
React.useEffect(() => () => {
|
||||
removeMotionEvents(cacheElementRef.current);
|
||||
cacheElementRef.current = null;
|
||||
}, []);
|
||||
return [patchMotionEvents, removeMotionEvents];
|
||||
};
|
||||
exports.default = _default;
|
||||
Generated
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
import { useEffect } from 'react';
|
||||
declare const useIsomorphicLayoutEffect: typeof useEffect;
|
||||
export default useIsomorphicLayoutEffect;
|
||||
Generated
Vendored
+12
@@ -0,0 +1,12 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _canUseDom = _interopRequireDefault(require("@rc-component/util/lib/Dom/canUseDom"));
|
||||
var _react = require("react");
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
// It's safe to use `useLayoutEffect` but the warning is annoying
|
||||
const useIsomorphicLayoutEffect = (0, _canUseDom.default)() ? _react.useLayoutEffect : _react.useEffect;
|
||||
var _default = exports.default = useIsomorphicLayoutEffect;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
declare const _default: () => [(callback: (info: {
|
||||
isCanceled: () => boolean;
|
||||
}) => void) => void, () => void];
|
||||
export default _default;
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _raf = _interopRequireDefault(require("@rc-component/util/lib/raf"));
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
var _default = () => {
|
||||
const nextFrameRef = React.useRef(null);
|
||||
function cancelNextFrame() {
|
||||
_raf.default.cancel(nextFrameRef.current);
|
||||
}
|
||||
function nextFrame(callback, delay = 2) {
|
||||
cancelNextFrame();
|
||||
const nextFrameId = (0, _raf.default)(() => {
|
||||
if (delay <= 1) {
|
||||
callback({
|
||||
isCanceled: () => nextFrameId !== nextFrameRef.current
|
||||
});
|
||||
} else {
|
||||
nextFrame(callback, delay - 1);
|
||||
}
|
||||
});
|
||||
nextFrameRef.current = nextFrameId;
|
||||
}
|
||||
React.useEffect(() => () => {
|
||||
cancelNextFrame();
|
||||
}, []);
|
||||
return [nextFrame, cancelNextFrame];
|
||||
};
|
||||
exports.default = _default;
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
import * as React from 'react';
|
||||
import type { CSSMotionProps } from '../CSSMotion';
|
||||
import type { MotionStatus, StepStatus } from '../interface';
|
||||
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): [
|
||||
status: () => MotionStatus,
|
||||
stepStatus: StepStatus,
|
||||
style: React.CSSProperties,
|
||||
visible: boolean,
|
||||
styleReady: 'NONE' | boolean
|
||||
];
|
||||
+248
@@ -0,0 +1,248 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = useStatus;
|
||||
var _util = require("@rc-component/util");
|
||||
var _useSyncState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useSyncState"));
|
||||
var _react = _interopRequireWildcard(require("react"));
|
||||
var React = _react;
|
||||
var _interface = require("../interface");
|
||||
var _useDomMotionEvents = _interopRequireDefault(require("./useDomMotionEvents"));
|
||||
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("./useIsomorphicLayoutEffect"));
|
||||
var _useStepQueue = _interopRequireWildcard(require("./useStepQueue"));
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
function useStatus(supportMotion, visible, getElement, {
|
||||
motionEnter = true,
|
||||
motionAppear = true,
|
||||
motionLeave = true,
|
||||
motionDeadline,
|
||||
motionLeaveImmediately,
|
||||
onAppearPrepare,
|
||||
onEnterPrepare,
|
||||
onLeavePrepare,
|
||||
onAppearStart,
|
||||
onEnterStart,
|
||||
onLeaveStart,
|
||||
onAppearActive,
|
||||
onEnterActive,
|
||||
onLeaveActive,
|
||||
onAppearEnd,
|
||||
onEnterEnd,
|
||||
onLeaveEnd,
|
||||
onVisibleChanged
|
||||
}) {
|
||||
// Used for outer render usage to avoid `visible: false & status: none` to render nothing
|
||||
const [asyncVisible, setAsyncVisible] = React.useState();
|
||||
const [getStatus, setStatus] = (0, _useSyncState.default)(_interface.STATUS_NONE);
|
||||
const [style, setStyle] = React.useState([null, null]);
|
||||
const currentStatus = getStatus();
|
||||
const mountedRef = (0, _react.useRef)(false);
|
||||
const deadlineRef = (0, _react.useRef)(null);
|
||||
|
||||
// =========================== Dom Node ===========================
|
||||
function getDomElement() {
|
||||
return getElement();
|
||||
}
|
||||
|
||||
// ========================== Motion End ==========================
|
||||
const activeRef = (0, _react.useRef)(false);
|
||||
|
||||
/**
|
||||
* Clean up status & style
|
||||
*/
|
||||
function updateMotionEndStatus() {
|
||||
setStatus(_interface.STATUS_NONE);
|
||||
setStyle([null, null]);
|
||||
}
|
||||
const onInternalMotionEnd = (0, _util.useEvent)(event => {
|
||||
const status = getStatus();
|
||||
// Do nothing since not in any transition status.
|
||||
// This may happen when `motionDeadline` trigger.
|
||||
if (status === _interface.STATUS_NONE) {
|
||||
return;
|
||||
}
|
||||
const element = getDomElement();
|
||||
if (event && !event.deadline && event.target !== element) {
|
||||
// event exists
|
||||
// not initiated by deadline
|
||||
// transitionEnd not fired by inner elements
|
||||
return;
|
||||
}
|
||||
const currentActive = activeRef.current;
|
||||
let canEnd;
|
||||
if (status === _interface.STATUS_APPEAR && currentActive) {
|
||||
canEnd = onAppearEnd?.(element, event);
|
||||
} else if (status === _interface.STATUS_ENTER && currentActive) {
|
||||
canEnd = onEnterEnd?.(element, event);
|
||||
} else if (status === _interface.STATUS_LEAVE && currentActive) {
|
||||
canEnd = onLeaveEnd?.(element, event);
|
||||
}
|
||||
|
||||
// Only update status when `canEnd` and not destroyed
|
||||
if (currentActive && canEnd !== false) {
|
||||
updateMotionEndStatus();
|
||||
}
|
||||
});
|
||||
const [patchMotionEvents] = (0, _useDomMotionEvents.default)(onInternalMotionEnd);
|
||||
|
||||
// ============================= Step =============================
|
||||
const getEventHandlers = targetStatus => {
|
||||
switch (targetStatus) {
|
||||
case _interface.STATUS_APPEAR:
|
||||
return {
|
||||
[_interface.STEP_PREPARE]: onAppearPrepare,
|
||||
[_interface.STEP_START]: onAppearStart,
|
||||
[_interface.STEP_ACTIVE]: onAppearActive
|
||||
};
|
||||
case _interface.STATUS_ENTER:
|
||||
return {
|
||||
[_interface.STEP_PREPARE]: onEnterPrepare,
|
||||
[_interface.STEP_START]: onEnterStart,
|
||||
[_interface.STEP_ACTIVE]: onEnterActive
|
||||
};
|
||||
case _interface.STATUS_LEAVE:
|
||||
return {
|
||||
[_interface.STEP_PREPARE]: onLeavePrepare,
|
||||
[_interface.STEP_START]: onLeaveStart,
|
||||
[_interface.STEP_ACTIVE]: onLeaveActive
|
||||
};
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
};
|
||||
const eventHandlers = React.useMemo(() => getEventHandlers(currentStatus), [currentStatus]);
|
||||
const [startStep, step] = (0, _useStepQueue.default)(currentStatus, !supportMotion, newStep => {
|
||||
// Only prepare step can be skip
|
||||
if (newStep === _interface.STEP_PREPARE) {
|
||||
const onPrepare = eventHandlers[_interface.STEP_PREPARE];
|
||||
if (!onPrepare) {
|
||||
return _useStepQueue.SkipStep;
|
||||
}
|
||||
return onPrepare(getDomElement());
|
||||
}
|
||||
|
||||
// Rest step is sync update
|
||||
if (newStep in eventHandlers) {
|
||||
setStyle([eventHandlers[newStep]?.(getDomElement(), null) || null, newStep]);
|
||||
}
|
||||
if (newStep === _interface.STEP_ACTIVE && currentStatus !== _interface.STATUS_NONE) {
|
||||
// Patch events when motion needed
|
||||
patchMotionEvents(getDomElement());
|
||||
if (motionDeadline > 0) {
|
||||
clearTimeout(deadlineRef.current);
|
||||
deadlineRef.current = setTimeout(() => {
|
||||
onInternalMotionEnd({
|
||||
deadline: true
|
||||
});
|
||||
}, motionDeadline);
|
||||
}
|
||||
}
|
||||
if (newStep === _interface.STEP_PREPARED) {
|
||||
updateMotionEndStatus();
|
||||
}
|
||||
return _useStepQueue.DoStep;
|
||||
});
|
||||
const active = (0, _useStepQueue.isActive)(step);
|
||||
activeRef.current = active;
|
||||
|
||||
// ============================ Status ============================
|
||||
const visibleRef = (0, _react.useRef)(null);
|
||||
|
||||
// Update with new status
|
||||
(0, _useIsomorphicLayoutEffect.default)(() => {
|
||||
// When use Suspense, the `visible` will repeat trigger,
|
||||
// But not real change of the `visible`, we need to skip it.
|
||||
// https://github.com/ant-design/ant-design/issues/44379
|
||||
if (mountedRef.current && visibleRef.current === visible) {
|
||||
return;
|
||||
}
|
||||
setAsyncVisible(visible);
|
||||
const isMounted = mountedRef.current;
|
||||
mountedRef.current = true;
|
||||
|
||||
// if (!supportMotion) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
let nextStatus;
|
||||
|
||||
// Appear
|
||||
if (!isMounted && visible && motionAppear) {
|
||||
nextStatus = _interface.STATUS_APPEAR;
|
||||
}
|
||||
|
||||
// Enter
|
||||
if (isMounted && visible && motionEnter) {
|
||||
nextStatus = _interface.STATUS_ENTER;
|
||||
}
|
||||
|
||||
// Leave
|
||||
if (isMounted && !visible && motionLeave || !isMounted && motionLeaveImmediately && !visible && motionLeave) {
|
||||
nextStatus = _interface.STATUS_LEAVE;
|
||||
}
|
||||
const nextEventHandlers = getEventHandlers(nextStatus);
|
||||
|
||||
// Update to next status
|
||||
if (nextStatus && (supportMotion || nextEventHandlers[_interface.STEP_PREPARE])) {
|
||||
setStatus(nextStatus);
|
||||
startStep();
|
||||
} else {
|
||||
// Set back in case no motion but prev status has prepare step
|
||||
setStatus(_interface.STATUS_NONE);
|
||||
}
|
||||
visibleRef.current = visible;
|
||||
}, [visible]);
|
||||
|
||||
// ============================ Effect ============================
|
||||
// Reset when motion changed
|
||||
(0, _react.useEffect)(() => {
|
||||
if (
|
||||
// Cancel appear
|
||||
currentStatus === _interface.STATUS_APPEAR && !motionAppear ||
|
||||
// Cancel enter
|
||||
currentStatus === _interface.STATUS_ENTER && !motionEnter ||
|
||||
// Cancel leave
|
||||
currentStatus === _interface.STATUS_LEAVE && !motionLeave) {
|
||||
setStatus(_interface.STATUS_NONE);
|
||||
}
|
||||
}, [motionAppear, motionEnter, motionLeave]);
|
||||
(0, _react.useEffect)(() => () => {
|
||||
mountedRef.current = false;
|
||||
clearTimeout(deadlineRef.current);
|
||||
}, []);
|
||||
|
||||
// Trigger `onVisibleChanged`
|
||||
const firstMountChangeRef = React.useRef(false);
|
||||
(0, _react.useEffect)(() => {
|
||||
// [visible & motion not end] => [!visible & motion end] still need trigger onVisibleChanged
|
||||
if (asyncVisible) {
|
||||
firstMountChangeRef.current = true;
|
||||
}
|
||||
if (asyncVisible !== undefined && currentStatus === _interface.STATUS_NONE) {
|
||||
// Skip first render is invisible since it's nothing changed
|
||||
if (firstMountChangeRef.current || asyncVisible) {
|
||||
onVisibleChanged?.(asyncVisible);
|
||||
}
|
||||
firstMountChangeRef.current = true;
|
||||
}
|
||||
}, [asyncVisible, currentStatus]);
|
||||
|
||||
// ============================ Styles ============================
|
||||
let mergedStyle = style[0];
|
||||
if (eventHandlers[_interface.STEP_PREPARE] && step === _interface.STEP_START) {
|
||||
mergedStyle = {
|
||||
transition: 'none',
|
||||
...mergedStyle
|
||||
};
|
||||
}
|
||||
const styleStep = style[1];
|
||||
return [getStatus, step, mergedStyle, asyncVisible ?? visible,
|
||||
// Appear Check
|
||||
!mountedRef.current && currentStatus === _interface.STATUS_NONE && supportMotion && motionAppear ? 'NONE' :
|
||||
// Enter or Leave check
|
||||
step === _interface.STEP_START || step === _interface.STEP_ACTIVE ? styleStep === step : true];
|
||||
}
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
import type { MotionStatus, StepStatus } from '../interface';
|
||||
/** Skip current step */
|
||||
export declare const SkipStep: false;
|
||||
/** Current step should be update in */
|
||||
export declare const DoStep: true;
|
||||
export declare function isActive(step: StepStatus): boolean;
|
||||
declare const _default: (status: MotionStatus, prepareOnly: boolean, callback: (step: StepStatus) => Promise<void> | void | typeof SkipStep | typeof DoStep) => [() => void, StepStatus];
|
||||
export default _default;
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = exports.SkipStep = exports.DoStep = void 0;
|
||||
exports.isActive = isActive;
|
||||
var _useState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useState"));
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _interface = require("../interface");
|
||||
var _useIsomorphicLayoutEffect = _interopRequireDefault(require("./useIsomorphicLayoutEffect"));
|
||||
var _useNextFrame = _interopRequireDefault(require("./useNextFrame"));
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
const FULL_STEP_QUEUE = [_interface.STEP_PREPARE, _interface.STEP_START, _interface.STEP_ACTIVE, _interface.STEP_ACTIVATED];
|
||||
const SIMPLE_STEP_QUEUE = [_interface.STEP_PREPARE, _interface.STEP_PREPARED];
|
||||
|
||||
/** Skip current step */
|
||||
const SkipStep = exports.SkipStep = false;
|
||||
/** Current step should be update in */
|
||||
const DoStep = exports.DoStep = true;
|
||||
function isActive(step) {
|
||||
return step === _interface.STEP_ACTIVE || step === _interface.STEP_ACTIVATED;
|
||||
}
|
||||
var _default = (status, prepareOnly, callback) => {
|
||||
const [step, setStep] = (0, _useState.default)(_interface.STEP_NONE);
|
||||
const [nextFrame, cancelNextFrame] = (0, _useNextFrame.default)();
|
||||
function startQueue() {
|
||||
setStep(_interface.STEP_PREPARE, true);
|
||||
}
|
||||
const STEP_QUEUE = prepareOnly ? SIMPLE_STEP_QUEUE : FULL_STEP_QUEUE;
|
||||
(0, _useIsomorphicLayoutEffect.default)(() => {
|
||||
if (step !== _interface.STEP_NONE && step !== _interface.STEP_ACTIVATED) {
|
||||
const index = STEP_QUEUE.indexOf(step);
|
||||
const nextStep = STEP_QUEUE[index + 1];
|
||||
const result = callback(step);
|
||||
if (result === SkipStep) {
|
||||
// Skip when no needed
|
||||
setStep(nextStep, true);
|
||||
} else if (nextStep) {
|
||||
// Do as frame for step update
|
||||
nextFrame(info => {
|
||||
function doNext() {
|
||||
// Skip since current queue is ood
|
||||
if (info.isCanceled()) return;
|
||||
setStep(nextStep, true);
|
||||
}
|
||||
if (result === true) {
|
||||
doNext();
|
||||
} else {
|
||||
// Only promise should be async
|
||||
Promise.resolve(result).then(doNext);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [status, step]);
|
||||
React.useEffect(() => () => {
|
||||
cancelNextFrame();
|
||||
}, []);
|
||||
return [startQueue, step];
|
||||
};
|
||||
exports.default = _default;
|
||||
Reference in New Issue
Block a user