@sheinx/hooks 3.9.0 → 3.9.1-beta.1
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/cjs/common/use-collapse-animation/index.d.ts +3 -0
- package/cjs/common/use-collapse-animation/index.d.ts.map +1 -0
- package/cjs/common/use-collapse-animation/index.js +13 -0
- package/cjs/common/use-collapse-animation/use-collapse-animation.d.ts +35 -0
- package/cjs/common/use-collapse-animation/use-collapse-animation.d.ts.map +1 -0
- package/cjs/common/use-collapse-animation/use-collapse-animation.js +107 -0
- package/cjs/index.d.ts +1 -0
- package/cjs/index.d.ts.map +1 -1
- package/cjs/index.js +12 -0
- package/esm/common/use-collapse-animation/index.d.ts +3 -0
- package/esm/common/use-collapse-animation/index.d.ts.map +1 -0
- package/esm/common/use-collapse-animation/index.js +2 -0
- package/esm/common/use-collapse-animation/use-collapse-animation.d.ts +35 -0
- package/esm/common/use-collapse-animation/use-collapse-animation.d.ts.map +1 -0
- package/esm/common/use-collapse-animation/use-collapse-animation.js +101 -0
- package/esm/index.d.ts +1 -0
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "useCollapseAnimation", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _useCollapseAnimation.useCollapseAnimation;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _useCollapseAnimation = require("./use-collapse-animation");
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface UseCollapseAnimationOptions {
|
|
3
|
+
/**
|
|
4
|
+
* 是否展开
|
|
5
|
+
*/
|
|
6
|
+
isOpen: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* 动画时长(毫秒)
|
|
9
|
+
* @default 240
|
|
10
|
+
*/
|
|
11
|
+
duration?: number;
|
|
12
|
+
/**
|
|
13
|
+
* 是否禁用动画
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* 过渡函数
|
|
19
|
+
* @default 'cubic-bezier(.2,0,0,1)'
|
|
20
|
+
*/
|
|
21
|
+
timingFunction?: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* 为元素添加折叠/展开动画的 Hook
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```tsx
|
|
28
|
+
* const ref = useRef<HTMLDivElement>(null);
|
|
29
|
+
* useCollapseAnimation(ref, { isOpen: true });
|
|
30
|
+
*
|
|
31
|
+
* return <div ref={ref}>Content</div>;
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
export declare function useCollapseAnimation<T extends HTMLElement = HTMLElement>(elementRef: React.RefObject<T>, options: UseCollapseAnimationOptions): void;
|
|
35
|
+
//# sourceMappingURL=use-collapse-animation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-collapse-animation.d.ts","sourceRoot":"","sources":["use-collapse-animation.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACtE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAC9B,OAAO,EAAE,2BAA2B,QAwFrC"}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useCollapseAnimation = useCollapseAnimation;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
/**
|
|
9
|
+
* 为元素添加折叠/展开动画的 Hook
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* const ref = useRef<HTMLDivElement>(null);
|
|
14
|
+
* useCollapseAnimation(ref, { isOpen: true });
|
|
15
|
+
*
|
|
16
|
+
* return <div ref={ref}>Content</div>;
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
function useCollapseAnimation(elementRef, options) {
|
|
20
|
+
var isOpen = options.isOpen,
|
|
21
|
+
_options$duration = options.duration,
|
|
22
|
+
duration = _options$duration === void 0 ? 240 : _options$duration,
|
|
23
|
+
_options$disabled = options.disabled,
|
|
24
|
+
disabled = _options$disabled === void 0 ? false : _options$disabled,
|
|
25
|
+
_options$timingFuncti = options.timingFunction,
|
|
26
|
+
timingFunction = _options$timingFuncti === void 0 ? 'cubic-bezier(.2,0,0,1)' : _options$timingFuncti;
|
|
27
|
+
var isFirstRenderRef = (0, _react.useRef)(true);
|
|
28
|
+
|
|
29
|
+
// 当 disabled 状态变化时,重置首次渲染标记
|
|
30
|
+
(0, _react.useEffect)(function () {
|
|
31
|
+
if (disabled) {
|
|
32
|
+
isFirstRenderRef.current = true;
|
|
33
|
+
}
|
|
34
|
+
}, [disabled]);
|
|
35
|
+
(0, _react.useEffect)(function () {
|
|
36
|
+
if (!elementRef.current) return;
|
|
37
|
+
var el = elementRef.current;
|
|
38
|
+
|
|
39
|
+
// 如果禁用动画,清除所有样式并返回
|
|
40
|
+
if (disabled) {
|
|
41
|
+
el.style.height = '';
|
|
42
|
+
el.style.overflow = '';
|
|
43
|
+
el.style.transition = '';
|
|
44
|
+
el.style.display = '';
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
var timer = null;
|
|
48
|
+
|
|
49
|
+
// 设置 display: block,让元素始终可见,由高度控制折叠
|
|
50
|
+
el.style.display = 'block';
|
|
51
|
+
|
|
52
|
+
// 首次渲染时,直接设置初始状态,不做动画
|
|
53
|
+
if (isFirstRenderRef.current) {
|
|
54
|
+
isFirstRenderRef.current = false;
|
|
55
|
+
if (!isOpen) {
|
|
56
|
+
el.style.height = '0px';
|
|
57
|
+
el.style.overflow = 'hidden';
|
|
58
|
+
}
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
if (isOpen) {
|
|
62
|
+
// 展开动画
|
|
63
|
+
el.style.height = '0px';
|
|
64
|
+
el.style.overflow = 'hidden';
|
|
65
|
+
|
|
66
|
+
// 强制重绘
|
|
67
|
+
void el.offsetHeight;
|
|
68
|
+
|
|
69
|
+
// 获取实际高度
|
|
70
|
+
var scrollHeight = el.scrollHeight;
|
|
71
|
+
|
|
72
|
+
// 启动动画
|
|
73
|
+
requestAnimationFrame(function () {
|
|
74
|
+
el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction);
|
|
75
|
+
el.style.height = "".concat(scrollHeight, "px");
|
|
76
|
+
|
|
77
|
+
// 动画结束后恢复 auto
|
|
78
|
+
timer = setTimeout(function () {
|
|
79
|
+
if (el && isOpen) {
|
|
80
|
+
el.style.height = '';
|
|
81
|
+
el.style.overflow = '';
|
|
82
|
+
el.style.transition = '';
|
|
83
|
+
}
|
|
84
|
+
}, duration);
|
|
85
|
+
});
|
|
86
|
+
} else {
|
|
87
|
+
// 收起动画
|
|
88
|
+
var _scrollHeight = el.scrollHeight;
|
|
89
|
+
el.style.height = "".concat(_scrollHeight, "px");
|
|
90
|
+
el.style.overflow = 'hidden';
|
|
91
|
+
|
|
92
|
+
// 强制重绘
|
|
93
|
+
void el.offsetHeight;
|
|
94
|
+
requestAnimationFrame(function () {
|
|
95
|
+
el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction);
|
|
96
|
+
el.style.height = '0px';
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// 清理函数:组件卸载或依赖变化时清除定时器
|
|
101
|
+
return function () {
|
|
102
|
+
if (timer) {
|
|
103
|
+
clearTimeout(timer);
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
}, [isOpen, disabled, duration, timingFunction]);
|
|
107
|
+
}
|
package/cjs/index.d.ts
CHANGED
|
@@ -24,6 +24,7 @@ export * from './common/use-pagination-list';
|
|
|
24
24
|
export * from './common/use-filter';
|
|
25
25
|
export * from './common/use-scrollbar-width';
|
|
26
26
|
export * from './common/use-component-memo';
|
|
27
|
+
export * from './common/use-collapse-animation';
|
|
27
28
|
export * from './components/use-input';
|
|
28
29
|
export * from './components/use-textarea';
|
|
29
30
|
export * from './components/use-form';
|
package/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,UAAU,CAAC;AAEjC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,CAAC;AAGhB,cAAc,eAAe,CAAC;AAE9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,UAAU,CAAC;AAEjC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,CAAC;AAGhB,cAAc,eAAe,CAAC;AAE9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAGhD,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;;AAE1C,wBAAkB"}
|
package/cjs/index.js
CHANGED
|
@@ -299,6 +299,18 @@ Object.keys(_useComponentMemo).forEach(function (key) {
|
|
|
299
299
|
}
|
|
300
300
|
});
|
|
301
301
|
});
|
|
302
|
+
var _useCollapseAnimation = require("./common/use-collapse-animation");
|
|
303
|
+
Object.keys(_useCollapseAnimation).forEach(function (key) {
|
|
304
|
+
if (key === "default" || key === "__esModule") return;
|
|
305
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
306
|
+
if (key in exports && exports[key] === _useCollapseAnimation[key]) return;
|
|
307
|
+
Object.defineProperty(exports, key, {
|
|
308
|
+
enumerable: true,
|
|
309
|
+
get: function get() {
|
|
310
|
+
return _useCollapseAnimation[key];
|
|
311
|
+
}
|
|
312
|
+
});
|
|
313
|
+
});
|
|
302
314
|
var _useInput = require("./components/use-input");
|
|
303
315
|
Object.keys(_useInput).forEach(function (key) {
|
|
304
316
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface UseCollapseAnimationOptions {
|
|
3
|
+
/**
|
|
4
|
+
* 是否展开
|
|
5
|
+
*/
|
|
6
|
+
isOpen: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* 动画时长(毫秒)
|
|
9
|
+
* @default 240
|
|
10
|
+
*/
|
|
11
|
+
duration?: number;
|
|
12
|
+
/**
|
|
13
|
+
* 是否禁用动画
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* 过渡函数
|
|
19
|
+
* @default 'cubic-bezier(.2,0,0,1)'
|
|
20
|
+
*/
|
|
21
|
+
timingFunction?: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* 为元素添加折叠/展开动画的 Hook
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```tsx
|
|
28
|
+
* const ref = useRef<HTMLDivElement>(null);
|
|
29
|
+
* useCollapseAnimation(ref, { isOpen: true });
|
|
30
|
+
*
|
|
31
|
+
* return <div ref={ref}>Content</div>;
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
export declare function useCollapseAnimation<T extends HTMLElement = HTMLElement>(elementRef: React.RefObject<T>, options: UseCollapseAnimationOptions): void;
|
|
35
|
+
//# sourceMappingURL=use-collapse-animation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-collapse-animation.d.ts","sourceRoot":"","sources":["use-collapse-animation.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACtE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAC9B,OAAO,EAAE,2BAA2B,QAwFrC"}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* 为元素添加折叠/展开动画的 Hook
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```tsx
|
|
7
|
+
* const ref = useRef<HTMLDivElement>(null);
|
|
8
|
+
* useCollapseAnimation(ref, { isOpen: true });
|
|
9
|
+
*
|
|
10
|
+
* return <div ref={ref}>Content</div>;
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
export function useCollapseAnimation(elementRef, options) {
|
|
14
|
+
var isOpen = options.isOpen,
|
|
15
|
+
_options$duration = options.duration,
|
|
16
|
+
duration = _options$duration === void 0 ? 240 : _options$duration,
|
|
17
|
+
_options$disabled = options.disabled,
|
|
18
|
+
disabled = _options$disabled === void 0 ? false : _options$disabled,
|
|
19
|
+
_options$timingFuncti = options.timingFunction,
|
|
20
|
+
timingFunction = _options$timingFuncti === void 0 ? 'cubic-bezier(.2,0,0,1)' : _options$timingFuncti;
|
|
21
|
+
var isFirstRenderRef = useRef(true);
|
|
22
|
+
|
|
23
|
+
// 当 disabled 状态变化时,重置首次渲染标记
|
|
24
|
+
useEffect(function () {
|
|
25
|
+
if (disabled) {
|
|
26
|
+
isFirstRenderRef.current = true;
|
|
27
|
+
}
|
|
28
|
+
}, [disabled]);
|
|
29
|
+
useEffect(function () {
|
|
30
|
+
if (!elementRef.current) return;
|
|
31
|
+
var el = elementRef.current;
|
|
32
|
+
|
|
33
|
+
// 如果禁用动画,清除所有样式并返回
|
|
34
|
+
if (disabled) {
|
|
35
|
+
el.style.height = '';
|
|
36
|
+
el.style.overflow = '';
|
|
37
|
+
el.style.transition = '';
|
|
38
|
+
el.style.display = '';
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
var timer = null;
|
|
42
|
+
|
|
43
|
+
// 设置 display: block,让元素始终可见,由高度控制折叠
|
|
44
|
+
el.style.display = 'block';
|
|
45
|
+
|
|
46
|
+
// 首次渲染时,直接设置初始状态,不做动画
|
|
47
|
+
if (isFirstRenderRef.current) {
|
|
48
|
+
isFirstRenderRef.current = false;
|
|
49
|
+
if (!isOpen) {
|
|
50
|
+
el.style.height = '0px';
|
|
51
|
+
el.style.overflow = 'hidden';
|
|
52
|
+
}
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
if (isOpen) {
|
|
56
|
+
// 展开动画
|
|
57
|
+
el.style.height = '0px';
|
|
58
|
+
el.style.overflow = 'hidden';
|
|
59
|
+
|
|
60
|
+
// 强制重绘
|
|
61
|
+
void el.offsetHeight;
|
|
62
|
+
|
|
63
|
+
// 获取实际高度
|
|
64
|
+
var scrollHeight = el.scrollHeight;
|
|
65
|
+
|
|
66
|
+
// 启动动画
|
|
67
|
+
requestAnimationFrame(function () {
|
|
68
|
+
el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction);
|
|
69
|
+
el.style.height = "".concat(scrollHeight, "px");
|
|
70
|
+
|
|
71
|
+
// 动画结束后恢复 auto
|
|
72
|
+
timer = setTimeout(function () {
|
|
73
|
+
if (el && isOpen) {
|
|
74
|
+
el.style.height = '';
|
|
75
|
+
el.style.overflow = '';
|
|
76
|
+
el.style.transition = '';
|
|
77
|
+
}
|
|
78
|
+
}, duration);
|
|
79
|
+
});
|
|
80
|
+
} else {
|
|
81
|
+
// 收起动画
|
|
82
|
+
var _scrollHeight = el.scrollHeight;
|
|
83
|
+
el.style.height = "".concat(_scrollHeight, "px");
|
|
84
|
+
el.style.overflow = 'hidden';
|
|
85
|
+
|
|
86
|
+
// 强制重绘
|
|
87
|
+
void el.offsetHeight;
|
|
88
|
+
requestAnimationFrame(function () {
|
|
89
|
+
el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction);
|
|
90
|
+
el.style.height = '0px';
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// 清理函数:组件卸载或依赖变化时清除定时器
|
|
95
|
+
return function () {
|
|
96
|
+
if (timer) {
|
|
97
|
+
clearTimeout(timer);
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
}, [isOpen, disabled, duration, timingFunction]);
|
|
101
|
+
}
|
package/esm/index.d.ts
CHANGED
|
@@ -24,6 +24,7 @@ export * from './common/use-pagination-list';
|
|
|
24
24
|
export * from './common/use-filter';
|
|
25
25
|
export * from './common/use-scrollbar-width';
|
|
26
26
|
export * from './common/use-component-memo';
|
|
27
|
+
export * from './common/use-collapse-animation';
|
|
27
28
|
export * from './components/use-input';
|
|
28
29
|
export * from './components/use-textarea';
|
|
29
30
|
export * from './components/use-form';
|
package/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,UAAU,CAAC;AAEjC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,CAAC;AAGhB,cAAc,eAAe,CAAC;AAE9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,UAAU,CAAC;AAEjC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,CAAC;AAGhB,cAAc,eAAe,CAAC;AAE9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAGhD,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;;AAE1C,wBAAkB"}
|
package/esm/index.js
CHANGED
|
@@ -27,6 +27,7 @@ export * from "./common/use-pagination-list";
|
|
|
27
27
|
export * from "./common/use-filter";
|
|
28
28
|
export * from "./common/use-scrollbar-width";
|
|
29
29
|
export * from "./common/use-component-memo";
|
|
30
|
+
export * from "./common/use-collapse-animation";
|
|
30
31
|
|
|
31
32
|
//components
|
|
32
33
|
export * from "./components/use-input";
|