@nutui/nutui-react-taro 3.0.20-cpp → 3.0.21-cpp
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/utils/taro/ConfigurableCSSTransition copy.d.ts +15 -0
- package/dist/cjs/utils/taro/ConfigurableCSSTransition copy.js +130 -0
- package/dist/es/utils/taro/ConfigurableCSSTransition copy.d.ts +15 -0
- package/dist/es/utils/taro/ConfigurableCSSTransition copy.js +119 -0
- package/dist/style-jmapp.css +1 -1
- package/dist/style-jmapp.scss +41 -41
- package/dist/style-jrkf.css +1 -1
- package/dist/style-jrkf.scss +23 -23
- package/dist/style.css +1 -1
- package/dist/style.scss +31 -31
- package/package.json +1 -1
- package/postinstall.js +9 -0
package/CHANGELOG.md
CHANGED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited' | 'unmounted';
|
|
3
|
+
interface CSSTransitionProps {
|
|
4
|
+
in?: boolean;
|
|
5
|
+
timeout?: number;
|
|
6
|
+
classNames?: string;
|
|
7
|
+
nodeRef?: React.RefObject<any>;
|
|
8
|
+
mountOnEnter?: boolean;
|
|
9
|
+
unmountOnExit?: boolean;
|
|
10
|
+
onEntered?: () => void;
|
|
11
|
+
onExited?: () => void;
|
|
12
|
+
children: React.ReactElement;
|
|
13
|
+
}
|
|
14
|
+
declare const ConfigurableCSSTransition: React.FC<CSSTransitionProps>;
|
|
15
|
+
export default ConfigurableCSSTransition;
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "default", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return _default;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
|
|
13
|
+
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
+
var ConfigurableCSSTransition = function ConfigurableCSSTransition(props) {
|
|
15
|
+
var inPhase = props.in, _props_timeout = props.timeout, timeout = _props_timeout === void 0 ? 300 : _props_timeout, tmp = props.classNames, baseClassName = tmp === void 0 ? '' : tmp, nodeRef = props.nodeRef, mountOnEnter = props.mountOnEnter, unmountOnExit = props.unmountOnExit, onEntered = props.onEntered, onExited = props.onExited, children = props.children;
|
|
16
|
+
var _useState = (0, _sliced_to_array._)((0, _react.useState)(function() {
|
|
17
|
+
if (inPhase) return 'entered';
|
|
18
|
+
return unmountOnExit || mountOnEnter ? 'unmounted' : 'exited';
|
|
19
|
+
}), 2), status = _useState[0], setStatus = _useState[1];
|
|
20
|
+
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(function() {
|
|
21
|
+
if (inPhase) return "".concat(baseClassName, "-enter-done");
|
|
22
|
+
return "".concat(baseClassName, "-exit-done");
|
|
23
|
+
}), 2), classes = _useState1[0], setClasses = _useState1[1];
|
|
24
|
+
var fallbackTimerRef = (0, _react.useRef)(null);
|
|
25
|
+
var statusRef = (0, _react.useRef)(status);
|
|
26
|
+
var prevInPhase = (0, _react.useRef)(inPhase);
|
|
27
|
+
var latestOnAnimationEnd = (0, _react.useRef)(children.props.onAnimationEnd);
|
|
28
|
+
(0, _react.useEffect)(function() {
|
|
29
|
+
latestOnAnimationEnd.current = children.props.onAnimationEnd;
|
|
30
|
+
});
|
|
31
|
+
var updateStatus = (0, _react.useCallback)(function(nextStatus) {
|
|
32
|
+
statusRef.current = nextStatus;
|
|
33
|
+
setStatus(nextStatus);
|
|
34
|
+
}, []);
|
|
35
|
+
var handleAnimationEnd = (0, _react.useCallback)(function(e) {
|
|
36
|
+
var _latestOnAnimationEnd_current;
|
|
37
|
+
(_latestOnAnimationEnd_current = latestOnAnimationEnd.current) === null || _latestOnAnimationEnd_current === void 0 ? void 0 : _latestOnAnimationEnd_current.call(latestOnAnimationEnd, e);
|
|
38
|
+
if (e && e.target !== e.currentTarget) return;
|
|
39
|
+
if (fallbackTimerRef.current) clearTimeout(fallbackTimerRef.current);
|
|
40
|
+
if (statusRef.current === 'entering') {
|
|
41
|
+
updateStatus('entered');
|
|
42
|
+
setClasses("".concat(baseClassName, "-enter-done"));
|
|
43
|
+
onEntered === null || onEntered === void 0 ? void 0 : onEntered();
|
|
44
|
+
} else if (statusRef.current === 'exiting') {
|
|
45
|
+
updateStatus('exited');
|
|
46
|
+
setClasses("".concat(baseClassName, "-exit-done"));
|
|
47
|
+
if (unmountOnExit) {
|
|
48
|
+
updateStatus('unmounted');
|
|
49
|
+
}
|
|
50
|
+
onExited === null || onExited === void 0 ? void 0 : onExited();
|
|
51
|
+
}
|
|
52
|
+
}, [
|
|
53
|
+
baseClassName,
|
|
54
|
+
onEntered,
|
|
55
|
+
onExited,
|
|
56
|
+
unmountOnExit,
|
|
57
|
+
updateStatus
|
|
58
|
+
]);
|
|
59
|
+
var enter = (0, _react.useCallback)(function() {
|
|
60
|
+
if (fallbackTimerRef.current) clearTimeout(fallbackTimerRef.current);
|
|
61
|
+
if (statusRef.current === 'unmounted') {
|
|
62
|
+
updateStatus('exited');
|
|
63
|
+
}
|
|
64
|
+
if (timeout === 0) {
|
|
65
|
+
updateStatus('entered');
|
|
66
|
+
setClasses("".concat(baseClassName, "-enter-done"));
|
|
67
|
+
onEntered === null || onEntered === void 0 ? void 0 : onEntered();
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
updateStatus('entering');
|
|
71
|
+
setClasses("".concat(baseClassName, "-enter ").concat(baseClassName, "-enter-active"));
|
|
72
|
+
// Safety fallback: Give it extra time over the expected timeout in case onAnimationEnd misses
|
|
73
|
+
fallbackTimerRef.current = setTimeout(function() {
|
|
74
|
+
handleAnimationEnd(null);
|
|
75
|
+
}, timeout + 200);
|
|
76
|
+
}, [
|
|
77
|
+
baseClassName,
|
|
78
|
+
handleAnimationEnd,
|
|
79
|
+
onEntered,
|
|
80
|
+
timeout,
|
|
81
|
+
updateStatus
|
|
82
|
+
]);
|
|
83
|
+
var exit = (0, _react.useCallback)(function() {
|
|
84
|
+
if (fallbackTimerRef.current) clearTimeout(fallbackTimerRef.current);
|
|
85
|
+
if (timeout === 0) {
|
|
86
|
+
updateStatus('exited');
|
|
87
|
+
setClasses("".concat(baseClassName, "-exit-done"));
|
|
88
|
+
if (unmountOnExit) {
|
|
89
|
+
updateStatus('unmounted');
|
|
90
|
+
}
|
|
91
|
+
onExited === null || onExited === void 0 ? void 0 : onExited();
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
updateStatus('exiting');
|
|
95
|
+
setClasses("".concat(baseClassName, "-exit ").concat(baseClassName, "-exit-active"));
|
|
96
|
+
fallbackTimerRef.current = setTimeout(function() {
|
|
97
|
+
handleAnimationEnd(null);
|
|
98
|
+
}, timeout + 200);
|
|
99
|
+
}, [
|
|
100
|
+
baseClassName,
|
|
101
|
+
handleAnimationEnd,
|
|
102
|
+
onExited,
|
|
103
|
+
timeout,
|
|
104
|
+
unmountOnExit,
|
|
105
|
+
updateStatus
|
|
106
|
+
]);
|
|
107
|
+
(0, _react.useEffect)(function() {
|
|
108
|
+
if (prevInPhase.current !== inPhase) {
|
|
109
|
+
if (inPhase) {
|
|
110
|
+
enter();
|
|
111
|
+
} else {
|
|
112
|
+
exit();
|
|
113
|
+
}
|
|
114
|
+
prevInPhase.current = inPhase;
|
|
115
|
+
}
|
|
116
|
+
return function() {
|
|
117
|
+
if (fallbackTimerRef.current) clearTimeout(fallbackTimerRef.current);
|
|
118
|
+
};
|
|
119
|
+
}, [
|
|
120
|
+
inPhase,
|
|
121
|
+
enter,
|
|
122
|
+
exit
|
|
123
|
+
]);
|
|
124
|
+
if (status === 'unmounted') return null;
|
|
125
|
+
return /*#__PURE__*/ (0, _react.cloneElement)(children, {
|
|
126
|
+
className: "".concat(children.props.className || '', " ").concat(classes),
|
|
127
|
+
onAnimationEnd: handleAnimationEnd
|
|
128
|
+
});
|
|
129
|
+
};
|
|
130
|
+
var _default = ConfigurableCSSTransition;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited' | 'unmounted';
|
|
3
|
+
interface CSSTransitionProps {
|
|
4
|
+
in?: boolean;
|
|
5
|
+
timeout?: number;
|
|
6
|
+
classNames?: string;
|
|
7
|
+
nodeRef?: React.RefObject<any>;
|
|
8
|
+
mountOnEnter?: boolean;
|
|
9
|
+
unmountOnExit?: boolean;
|
|
10
|
+
onEntered?: () => void;
|
|
11
|
+
onExited?: () => void;
|
|
12
|
+
children: React.ReactElement;
|
|
13
|
+
}
|
|
14
|
+
declare const ConfigurableCSSTransition: React.FC<CSSTransitionProps>;
|
|
15
|
+
export default ConfigurableCSSTransition;
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
|
|
2
|
+
import React, { useState, useEffect, useRef, cloneElement, useCallback } from "react";
|
|
3
|
+
var ConfigurableCSSTransition = function(props) {
|
|
4
|
+
var inPhase = props.in, _props_timeout = props.timeout, timeout = _props_timeout === void 0 ? 300 : _props_timeout, tmp = props.classNames, baseClassName = tmp === void 0 ? '' : tmp, nodeRef = props.nodeRef, mountOnEnter = props.mountOnEnter, unmountOnExit = props.unmountOnExit, onEntered = props.onEntered, onExited = props.onExited, children = props.children;
|
|
5
|
+
var _useState = _sliced_to_array(useState(function() {
|
|
6
|
+
if (inPhase) return 'entered';
|
|
7
|
+
return unmountOnExit || mountOnEnter ? 'unmounted' : 'exited';
|
|
8
|
+
}), 2), status = _useState[0], setStatus = _useState[1];
|
|
9
|
+
var _useState1 = _sliced_to_array(useState(function() {
|
|
10
|
+
if (inPhase) return "".concat(baseClassName, "-enter-done");
|
|
11
|
+
return "".concat(baseClassName, "-exit-done");
|
|
12
|
+
}), 2), classes = _useState1[0], setClasses = _useState1[1];
|
|
13
|
+
var fallbackTimerRef = useRef(null);
|
|
14
|
+
var statusRef = useRef(status);
|
|
15
|
+
var prevInPhase = useRef(inPhase);
|
|
16
|
+
var latestOnAnimationEnd = useRef(children.props.onAnimationEnd);
|
|
17
|
+
useEffect(function() {
|
|
18
|
+
latestOnAnimationEnd.current = children.props.onAnimationEnd;
|
|
19
|
+
});
|
|
20
|
+
var updateStatus = useCallback(function(nextStatus) {
|
|
21
|
+
statusRef.current = nextStatus;
|
|
22
|
+
setStatus(nextStatus);
|
|
23
|
+
}, []);
|
|
24
|
+
var handleAnimationEnd = useCallback(function(e) {
|
|
25
|
+
var _latestOnAnimationEnd_current;
|
|
26
|
+
(_latestOnAnimationEnd_current = latestOnAnimationEnd.current) === null || _latestOnAnimationEnd_current === void 0 ? void 0 : _latestOnAnimationEnd_current.call(latestOnAnimationEnd, e);
|
|
27
|
+
if (e && e.target !== e.currentTarget) return;
|
|
28
|
+
if (fallbackTimerRef.current) clearTimeout(fallbackTimerRef.current);
|
|
29
|
+
if (statusRef.current === 'entering') {
|
|
30
|
+
updateStatus('entered');
|
|
31
|
+
setClasses("".concat(baseClassName, "-enter-done"));
|
|
32
|
+
onEntered === null || onEntered === void 0 ? void 0 : onEntered();
|
|
33
|
+
} else if (statusRef.current === 'exiting') {
|
|
34
|
+
updateStatus('exited');
|
|
35
|
+
setClasses("".concat(baseClassName, "-exit-done"));
|
|
36
|
+
if (unmountOnExit) {
|
|
37
|
+
updateStatus('unmounted');
|
|
38
|
+
}
|
|
39
|
+
onExited === null || onExited === void 0 ? void 0 : onExited();
|
|
40
|
+
}
|
|
41
|
+
}, [
|
|
42
|
+
baseClassName,
|
|
43
|
+
onEntered,
|
|
44
|
+
onExited,
|
|
45
|
+
unmountOnExit,
|
|
46
|
+
updateStatus
|
|
47
|
+
]);
|
|
48
|
+
var enter = useCallback(function() {
|
|
49
|
+
if (fallbackTimerRef.current) clearTimeout(fallbackTimerRef.current);
|
|
50
|
+
if (statusRef.current === 'unmounted') {
|
|
51
|
+
updateStatus('exited');
|
|
52
|
+
}
|
|
53
|
+
if (timeout === 0) {
|
|
54
|
+
updateStatus('entered');
|
|
55
|
+
setClasses("".concat(baseClassName, "-enter-done"));
|
|
56
|
+
onEntered === null || onEntered === void 0 ? void 0 : onEntered();
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
updateStatus('entering');
|
|
60
|
+
setClasses("".concat(baseClassName, "-enter ").concat(baseClassName, "-enter-active"));
|
|
61
|
+
// Safety fallback: Give it extra time over the expected timeout in case onAnimationEnd misses
|
|
62
|
+
fallbackTimerRef.current = setTimeout(function() {
|
|
63
|
+
handleAnimationEnd(null);
|
|
64
|
+
}, timeout + 200);
|
|
65
|
+
}, [
|
|
66
|
+
baseClassName,
|
|
67
|
+
handleAnimationEnd,
|
|
68
|
+
onEntered,
|
|
69
|
+
timeout,
|
|
70
|
+
updateStatus
|
|
71
|
+
]);
|
|
72
|
+
var exit = useCallback(function() {
|
|
73
|
+
if (fallbackTimerRef.current) clearTimeout(fallbackTimerRef.current);
|
|
74
|
+
if (timeout === 0) {
|
|
75
|
+
updateStatus('exited');
|
|
76
|
+
setClasses("".concat(baseClassName, "-exit-done"));
|
|
77
|
+
if (unmountOnExit) {
|
|
78
|
+
updateStatus('unmounted');
|
|
79
|
+
}
|
|
80
|
+
onExited === null || onExited === void 0 ? void 0 : onExited();
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
updateStatus('exiting');
|
|
84
|
+
setClasses("".concat(baseClassName, "-exit ").concat(baseClassName, "-exit-active"));
|
|
85
|
+
fallbackTimerRef.current = setTimeout(function() {
|
|
86
|
+
handleAnimationEnd(null);
|
|
87
|
+
}, timeout + 200);
|
|
88
|
+
}, [
|
|
89
|
+
baseClassName,
|
|
90
|
+
handleAnimationEnd,
|
|
91
|
+
onExited,
|
|
92
|
+
timeout,
|
|
93
|
+
unmountOnExit,
|
|
94
|
+
updateStatus
|
|
95
|
+
]);
|
|
96
|
+
useEffect(function() {
|
|
97
|
+
if (prevInPhase.current !== inPhase) {
|
|
98
|
+
if (inPhase) {
|
|
99
|
+
enter();
|
|
100
|
+
} else {
|
|
101
|
+
exit();
|
|
102
|
+
}
|
|
103
|
+
prevInPhase.current = inPhase;
|
|
104
|
+
}
|
|
105
|
+
return function() {
|
|
106
|
+
if (fallbackTimerRef.current) clearTimeout(fallbackTimerRef.current);
|
|
107
|
+
};
|
|
108
|
+
}, [
|
|
109
|
+
inPhase,
|
|
110
|
+
enter,
|
|
111
|
+
exit
|
|
112
|
+
]);
|
|
113
|
+
if (status === 'unmounted') return null;
|
|
114
|
+
return /*#__PURE__*/ cloneElement(children, {
|
|
115
|
+
className: "".concat(children.props.className || '', " ").concat(classes),
|
|
116
|
+
onAnimationEnd: handleAnimationEnd
|
|
117
|
+
});
|
|
118
|
+
};
|
|
119
|
+
export default ConfigurableCSSTransition;
|