@particle-network/ui-native 0.0.26 → 0.0.28
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.
|
@@ -1,24 +1,65 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ScrollView, type StyleProp, type ViewStyle } from 'react-native';
|
|
2
|
+
import { ScrollView, type ScrollViewProps, type StyleProp, type ViewStyle } from 'react-native';
|
|
3
3
|
export interface UXModalProps {
|
|
4
4
|
modalName?: string;
|
|
5
|
+
/**
|
|
6
|
+
* 容器样式
|
|
7
|
+
*/
|
|
5
8
|
style?: StyleProp<ViewStyle>;
|
|
9
|
+
/**
|
|
10
|
+
* 内容样式
|
|
11
|
+
*/
|
|
6
12
|
contentStyle?: StyleProp<ViewStyle>;
|
|
7
13
|
isOpen: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* 标题
|
|
16
|
+
*/
|
|
8
17
|
title?: React.ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* 顶部内容,可以固定位置,如搜索框
|
|
20
|
+
*/
|
|
21
|
+
topContent?: React.ReactNode;
|
|
22
|
+
/**
|
|
23
|
+
* 标题对齐方式
|
|
24
|
+
*/
|
|
9
25
|
titleAlign?: 'left' | 'center';
|
|
26
|
+
/**
|
|
27
|
+
* 底部内容
|
|
28
|
+
*/
|
|
10
29
|
footer?: React.ReactNode;
|
|
30
|
+
/**
|
|
31
|
+
* 提示内容
|
|
32
|
+
*/
|
|
11
33
|
tip?: React.ReactNode;
|
|
34
|
+
/**
|
|
35
|
+
* 关闭回调
|
|
36
|
+
*/
|
|
12
37
|
onClose?: () => void;
|
|
38
|
+
/**
|
|
39
|
+
* 可见性变化回调
|
|
40
|
+
*/
|
|
13
41
|
onVisibleChange?: (visible: boolean) => void;
|
|
14
42
|
children: React.ReactNode;
|
|
43
|
+
/**
|
|
44
|
+
* 是否禁用滑动关闭弹窗
|
|
45
|
+
*/
|
|
15
46
|
disableCloseBySwipe?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* 是否只允许通过点击指示线关闭弹窗
|
|
49
|
+
*/
|
|
16
50
|
closeByLineOnly?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* 是否需要包裹 portal
|
|
53
|
+
*/
|
|
17
54
|
wrapPortal?: boolean;
|
|
18
55
|
/**
|
|
19
56
|
* 键盘避开区域
|
|
20
57
|
* 如果想要遮挡 footer 则选择 content
|
|
21
58
|
*/
|
|
22
59
|
keyboardAvoidPosition?: 'container' | 'content';
|
|
60
|
+
/**
|
|
61
|
+
* ScrollView 属性
|
|
62
|
+
*/
|
|
63
|
+
scrollViewProps?: ScrollViewProps;
|
|
23
64
|
}
|
|
24
65
|
export declare const UXModal: React.ForwardRefExoticComponent<UXModalProps & React.RefAttributes<ScrollView>>;
|
|
@@ -13,7 +13,8 @@ import { VStack } from "../layout/VStack.js";
|
|
|
13
13
|
import { Text } from "../Text/index.js";
|
|
14
14
|
const { height } = Dimensions.get('window');
|
|
15
15
|
const UXModal = /*#__PURE__*/ forwardRef((props, scrollViewRef)=>{
|
|
16
|
-
const { style, contentStyle, isOpen, title, titleAlign = 'left', onClose, onVisibleChange, children, disableCloseBySwipe, closeByLineOnly, wrapPortal, footer, modalName, tip, keyboardAvoidPosition = 'container' } = props;
|
|
16
|
+
const { style, contentStyle, isOpen, title, topContent, titleAlign = 'left', onClose, onVisibleChange, children, disableCloseBySwipe, closeByLineOnly, wrapPortal, footer, modalName, tip, keyboardAvoidPosition = 'container', scrollViewProps } = props;
|
|
17
|
+
const { style: scrollViewStyle, ...restScrollViewProps } = scrollViewProps || {};
|
|
17
18
|
const { modal: modalConfig } = useComponentConfig();
|
|
18
19
|
const { getColor } = useColors();
|
|
19
20
|
const { ms } = useMs();
|
|
@@ -154,7 +155,7 @@ const UXModal = /*#__PURE__*/ forwardRef((props, scrollViewRef)=>{
|
|
|
154
155
|
flex: 1,
|
|
155
156
|
gap: ms(20),
|
|
156
157
|
backgroundColor: getColor('overlay'),
|
|
157
|
-
maxHeight:
|
|
158
|
+
maxHeight: height - Math.max(insets.top, ms(40)),
|
|
158
159
|
transform: [
|
|
159
160
|
{
|
|
160
161
|
translateY
|
|
@@ -217,7 +218,7 @@ const UXModal = /*#__PURE__*/ forwardRef((props, scrollViewRef)=>{
|
|
|
217
218
|
w: 40
|
|
218
219
|
})
|
|
219
220
|
}),
|
|
220
|
-
title
|
|
221
|
+
!!title && /*#__PURE__*/ jsx(Flex, {
|
|
221
222
|
fullWidth: true,
|
|
222
223
|
justify: 'center' === titleAlign ? 'center' : 'start',
|
|
223
224
|
mt: -4,
|
|
@@ -225,33 +226,37 @@ const UXModal = /*#__PURE__*/ forwardRef((props, scrollViewRef)=>{
|
|
|
225
226
|
h3: true,
|
|
226
227
|
children: title
|
|
227
228
|
}) : title
|
|
228
|
-
})
|
|
229
|
+
}),
|
|
230
|
+
topContent,
|
|
229
231
|
/*#__PURE__*/ jsx(ScrollView, {
|
|
230
232
|
ref: scrollViewRef,
|
|
231
233
|
bounces: false,
|
|
232
234
|
scrollEventThrottle: 16,
|
|
233
235
|
showsHorizontalScrollIndicator: false,
|
|
234
236
|
showsVerticalScrollIndicator: false,
|
|
237
|
+
keyboardShouldPersistTaps: "always",
|
|
235
238
|
style: [
|
|
236
239
|
styles.content,
|
|
237
|
-
contentStyle
|
|
240
|
+
contentStyle,
|
|
241
|
+
scrollViewStyle
|
|
238
242
|
],
|
|
239
243
|
onScroll: handleScroll,
|
|
244
|
+
...restScrollViewProps,
|
|
240
245
|
children: children
|
|
241
246
|
}),
|
|
242
|
-
/*#__PURE__*/ jsxs(VStack, {
|
|
247
|
+
!!footer || !!tip && /*#__PURE__*/ jsxs(VStack, {
|
|
243
248
|
fullWidth: true,
|
|
244
249
|
gap: "lg",
|
|
245
250
|
onLayout: (event)=>{
|
|
246
251
|
setFooterHeight(event.nativeEvent.layout.height);
|
|
247
252
|
},
|
|
248
253
|
children: [
|
|
249
|
-
footer
|
|
254
|
+
!!footer && /*#__PURE__*/ jsx(VStack, {
|
|
250
255
|
fullWidth: true,
|
|
251
256
|
gap: "lg",
|
|
252
257
|
children: footer
|
|
253
|
-
})
|
|
254
|
-
tip
|
|
258
|
+
}),
|
|
259
|
+
!!tip && /*#__PURE__*/ jsxs(Flex, {
|
|
255
260
|
gap: 8,
|
|
256
261
|
children: [
|
|
257
262
|
/*#__PURE__*/ jsx(Circle, {
|
|
@@ -266,7 +271,7 @@ const UXModal = /*#__PURE__*/ forwardRef((props, scrollViewRef)=>{
|
|
|
266
271
|
children: tip
|
|
267
272
|
})
|
|
268
273
|
]
|
|
269
|
-
})
|
|
274
|
+
})
|
|
270
275
|
]
|
|
271
276
|
})
|
|
272
277
|
]
|
|
@@ -9,7 +9,7 @@ export interface ValidationResult {
|
|
|
9
9
|
isValid: boolean;
|
|
10
10
|
errorMessage?: string;
|
|
11
11
|
}
|
|
12
|
-
export interface UXInputCommonProps extends Omit<TextInputProps, 'value' | 'defaultValue'> {
|
|
12
|
+
export interface UXInputCommonProps extends Omit<TextInputProps, 'style' | 'value' | 'defaultValue'> {
|
|
13
13
|
/**
|
|
14
14
|
* 最外层容器,包括 label 和 error
|
|
15
15
|
*/
|