@particle-network/ui-react 0.3.1 → 0.3.2-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.
|
@@ -4,19 +4,19 @@ import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "@herou
|
|
|
4
4
|
import { Center, Circle, Flex, Text, UXButton } from "../index.js";
|
|
5
5
|
import { CloseIcon } from "../../icons/index.js";
|
|
6
6
|
const UXModal = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
7
|
-
const { title, footer, backdrop, scrollBehavior = 'inside', children, titleAlign = 'left', classNames, tip, ...restProps } = props;
|
|
7
|
+
const { size, title, footer, backdrop, scrollBehavior = 'inside', children, titleAlign = 'left', classNames, tip, ...restProps } = props;
|
|
8
8
|
return /*#__PURE__*/ jsx(Modal, {
|
|
9
9
|
ref: ref,
|
|
10
10
|
backdrop: backdrop,
|
|
11
11
|
scrollBehavior: scrollBehavior,
|
|
12
|
+
size: size,
|
|
12
13
|
classNames: {
|
|
13
14
|
wrapper: [
|
|
14
15
|
'items-end md:items-center',
|
|
15
16
|
classNames?.wrapper
|
|
16
17
|
],
|
|
17
18
|
base: [
|
|
18
|
-
'py-6 gap-5 shadow-box',
|
|
19
|
-
'max-h-[calc(100vh-48px)] max-md:m-0 max-md:rounded-b-none',
|
|
19
|
+
'py-6 gap-5 shadow-box m-0 max-md:rounded-b-none',
|
|
20
20
|
'md:max-h-[750px]',
|
|
21
21
|
classNames?.base
|
|
22
22
|
],
|
|
@@ -53,17 +53,17 @@ const UXModal = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
53
53
|
...restProps,
|
|
54
54
|
children: /*#__PURE__*/ jsxs(ModalContent, {
|
|
55
55
|
children: [
|
|
56
|
-
title
|
|
56
|
+
title && /*#__PURE__*/ jsx(ModalHeader, {
|
|
57
57
|
className: "capitalize",
|
|
58
58
|
children: title
|
|
59
|
-
})
|
|
59
|
+
}),
|
|
60
60
|
/*#__PURE__*/ jsx(ModalBody, {
|
|
61
61
|
children: children
|
|
62
62
|
}),
|
|
63
|
-
footer
|
|
63
|
+
footer && /*#__PURE__*/ jsx(ModalFooter, {
|
|
64
64
|
children: footer
|
|
65
|
-
})
|
|
66
|
-
tip
|
|
65
|
+
}),
|
|
66
|
+
tip && /*#__PURE__*/ jsx(ModalFooter, {
|
|
67
67
|
className: "-mt-md",
|
|
68
68
|
children: /*#__PURE__*/ jsxs(Flex, {
|
|
69
69
|
gap: 2,
|
|
@@ -81,7 +81,7 @@ const UXModal = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
81
81
|
})
|
|
82
82
|
]
|
|
83
83
|
})
|
|
84
|
-
})
|
|
84
|
+
})
|
|
85
85
|
]
|
|
86
86
|
})
|
|
87
87
|
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @description
|
|
3
|
+
* 尝试获取移动端虚拟键盘的高度。
|
|
4
|
+
* 该方法主要依赖监听视口高度变化，在移动端（尤其 iOS）键盘弹出时，
|
|
5
|
+
* window.innerHeight 或 window.visualViewport.height 会减小。
|
|
6
|
+
*
|
|
7
|
+
* @returns {number} 键盘高度（像素值），如果键盘未弹出或无法确定则返回 0。
|
|
8
|
+
*/
|
|
9
|
+
declare const useKeyboard: () => {
|
|
10
|
+
keyboardHeight: number;
|
|
11
|
+
isKeyboardVisible: boolean;
|
|
12
|
+
};
|
|
13
|
+
export default useKeyboard;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
const useKeyboard = ()=>{
|
|
3
|
+
const [initialViewportHeight, setInitialViewportHeight] = useState(0);
|
|
4
|
+
const [keyboardHeight, setKeyboardHeight] = useState(0);
|
|
5
|
+
useEffect(()=>{
|
|
6
|
+
const setInitialHeight = ()=>{
|
|
7
|
+
const height = window.visualViewport ? window.visualViewport.height : window.innerHeight;
|
|
8
|
+
if (height > 0) setInitialViewportHeight((prevHeight)=>Math.max(prevHeight, height));
|
|
9
|
+
};
|
|
10
|
+
requestAnimationFrame(setInitialHeight);
|
|
11
|
+
window.addEventListener('focusin', setInitialHeight);
|
|
12
|
+
const handleViewportChange = ()=>{
|
|
13
|
+
const currentHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
|
|
14
|
+
if (0 === initialViewportHeight) return;
|
|
15
|
+
const calculatedHeight = Math.max(0, initialViewportHeight - currentHeight);
|
|
16
|
+
calculatedHeight > 50 ? setKeyboardHeight(calculatedHeight) : setKeyboardHeight(0);
|
|
17
|
+
};
|
|
18
|
+
window.addEventListener('resize', handleViewportChange);
|
|
19
|
+
if (window.visualViewport) window.visualViewport.addEventListener('resize', handleViewportChange);
|
|
20
|
+
return ()=>{
|
|
21
|
+
window.removeEventListener('focusin', setInitialHeight);
|
|
22
|
+
window.removeEventListener('resize', handleViewportChange);
|
|
23
|
+
if (window.visualViewport) window.visualViewport.removeEventListener('resize', handleViewportChange);
|
|
24
|
+
};
|
|
25
|
+
}, [
|
|
26
|
+
initialViewportHeight
|
|
27
|
+
]);
|
|
28
|
+
return {
|
|
29
|
+
keyboardHeight,
|
|
30
|
+
isKeyboardVisible: keyboardHeight > 0
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
const hooks_useKeyboard = useKeyboard;
|
|
34
|
+
export { hooks_useKeyboard as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@particle-network/ui-react",
|
|
3
|
-
"version": "0.3.1",
|
|
3
|
+
"version": "0.3.2-beta.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"@types/react": "^19.1.10",
|
|
40
40
|
"react": "^19.1.0",
|
|
41
41
|
"typescript": "^5.8.3",
|
|
42
|
-
"@particle-network/
|
|
43
|
-
"@particle-network/
|
|
42
|
+
"@particle-network/eslint-config": "0.3.0",
|
|
43
|
+
"@particle-network/lintstaged-config": "0.1.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"react": ">=16.9.0",
|