@aks-dev/easyui 1.0.199 → 1.0.200

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.

Potentially problematic release.


This version of @aks-dev/easyui might be problematic. Click here for more details.

Files changed (49) hide show
  1. package/dist/index.js +32 -20
  2. package/package.json +2 -2
  3. package/types/index.d.ts +0 -18
  4. package/types/index.d.ts.map +1 -1
  5. package/dist/components/AnimationModal/AnimationModal.js +0 -151
  6. package/dist/components/Badge/Badge.js +0 -35
  7. package/dist/components/DottedLine/DottedLine.js +0 -50
  8. package/dist/components/Echarts/EchartsView.js +0 -151
  9. package/dist/components/Echarts/helper.js +0 -64
  10. package/dist/components/MenuView/MenuView.js +0 -184
  11. package/dist/components/Modal/Modal.js +0 -8
  12. package/dist/components/MutiPictureView/MutiPictureView.js +0 -239
  13. package/dist/components/PictureViewer/PictureViewer.js +0 -54
  14. package/dist/components/RefreshList/RefreshList.js +0 -155
  15. package/dist/components/RichText/RichText.js +0 -56
  16. package/dist/components/StickHeaderView/StickHeaderView.js +0 -37
  17. package/dist/components/TableCell/TableCell.js +0 -97
  18. package/dist/components/TextInputArea/TextInputArea.js +0 -65
  19. package/dist/components/WithLoadingContainer/WithLoadingContainer.js +0 -77
  20. package/types/components/AnimationModal/AnimationModal.d.ts +0 -27
  21. package/types/components/AnimationModal/AnimationModal.d.ts.map +0 -1
  22. package/types/components/Badge/Badge.d.ts +0 -8
  23. package/types/components/Badge/Badge.d.ts.map +0 -1
  24. package/types/components/DottedLine/DottedLine.d.ts +0 -10
  25. package/types/components/DottedLine/DottedLine.d.ts.map +0 -1
  26. package/types/components/Echarts/EchartsView.d.ts +0 -12
  27. package/types/components/Echarts/EchartsView.d.ts.map +0 -1
  28. package/types/components/Echarts/helper.d.ts +0 -10
  29. package/types/components/Echarts/helper.d.ts.map +0 -1
  30. package/types/components/MenuView/MenuView.d.ts +0 -21
  31. package/types/components/MenuView/MenuView.d.ts.map +0 -1
  32. package/types/components/Modal/Modal.d.ts +0 -2
  33. package/types/components/Modal/Modal.d.ts.map +0 -1
  34. package/types/components/MutiPictureView/MutiPictureView.d.ts +0 -50
  35. package/types/components/MutiPictureView/MutiPictureView.d.ts.map +0 -1
  36. package/types/components/PictureViewer/PictureViewer.d.ts +0 -17
  37. package/types/components/PictureViewer/PictureViewer.d.ts.map +0 -1
  38. package/types/components/RefreshList/RefreshList.d.ts +0 -45
  39. package/types/components/RefreshList/RefreshList.d.ts.map +0 -1
  40. package/types/components/RichText/RichText.d.ts +0 -12
  41. package/types/components/RichText/RichText.d.ts.map +0 -1
  42. package/types/components/StickHeaderView/StickHeaderView.d.ts +0 -15
  43. package/types/components/StickHeaderView/StickHeaderView.d.ts.map +0 -1
  44. package/types/components/TableCell/TableCell.d.ts +0 -24
  45. package/types/components/TableCell/TableCell.d.ts.map +0 -1
  46. package/types/components/TextInputArea/TextInputArea.d.ts +0 -17
  47. package/types/components/TextInputArea/TextInputArea.d.ts.map +0 -1
  48. package/types/components/WithLoadingContainer/WithLoadingContainer.d.ts +0 -23
  49. package/types/components/WithLoadingContainer/WithLoadingContainer.d.ts.map +0 -1
@@ -1,184 +0,0 @@
1
- import React from "react";
2
- import { Image, ScrollView, Text, TouchableOpacity, View, } from "react-native";
3
- import { deviceHeight, deviceWidth } from "../../screen/px2dp";
4
- // import * as utils from '../../utils/lazy';
5
- import { hidePopoverView, showPopoverView } from "../Hud/Hud";
6
- // type Reducer = (prevState: State, action: Partial<State>) => State
7
- export default (props) => {
8
- const { defaultAlignHorizontal = "left", defaultAlignVertical = "bottom" } = props;
9
- const [state, dispatch] = React.useReducer((prevState, action) => Object.assign({}, prevState, action), {});
10
- // const containerRef = React.useRef<{ measureInWindow: (callback: MeasureInWindowOnSuccessCallback) => void }>()
11
- const containerRef = React.useRef(null);
12
- const rootView = React.useRef({ pageX: 0, pageY: 0, width: 0, height: 0 });
13
- const sc = React.useRef({ x: 0, y: 0, width: 0, height: 0 });
14
- // React.useEffect(() => {
15
- // ; (async () => {
16
- // await utils.sleep()
17
- // containerRef.current?.measure((...args) => {
18
- // console.log('containerRef', args)
19
- // if (args.length == 6) {
20
- // _container.current = {
21
- // x: args[4],
22
- // y: args[5],
23
- // width: args[2],
24
- // height: args[3],
25
- // }
26
- // }
27
- // })
28
- // })()
29
- // })
30
- const getRootViewlayoutPromise = () => {
31
- return new Promise((resovle, reject) => {
32
- containerRef.current?.measure((...args) => {
33
- if (args.length == 6) {
34
- rootView.current = {
35
- width: args[2],
36
- height: args[3],
37
- pageX: args[4],
38
- pageY: args[5],
39
- };
40
- }
41
- // console.log('RootView', rootView.current)
42
- resovle(args);
43
- });
44
- });
45
- };
46
- const getLayoutInfos = () => {
47
- let alignVertical = defaultAlignVertical;
48
- let alignHorizontal = defaultAlignHorizontal;
49
- let width = rootView.current.width;
50
- let height = rootView.current.height;
51
- let x = rootView.current.pageX;
52
- // let y = (StatusBar.currentHeight || 0) + _container.current.y + height
53
- let y = rootView.current.pageY + height;
54
- if (x > Math.abs(deviceWidth - width - x)) {
55
- alignHorizontal = "right";
56
- }
57
- if (y > deviceHeight * 0.5) {
58
- alignVertical = "top";
59
- }
60
- /**todo: target_width的获取是延迟的,所以这里又问题 */
61
- const target_width = sc.current.width;
62
- const target_height = CELL_HEIGHT * (Math.min(props.data?.length || 0, 5) || 0);
63
- return {
64
- alignVertical,
65
- alignHorizontal,
66
- width,
67
- height,
68
- x,
69
- y,
70
- target_width,
71
- target_height,
72
- };
73
- };
74
- const reLayout = () => {
75
- let { alignVertical, alignHorizontal, width, height, x, y, target_width, target_height, } = getLayoutInfos();
76
- // console.log({ getLayoutInfos: getLayoutInfos() })
77
- const layout = () => {
78
- if (alignHorizontal == "left") {
79
- if (target_width + x > deviceWidth) {
80
- return {
81
- left: Math.abs(deviceWidth - target_width) * 0.7,
82
- top: y,
83
- };
84
- }
85
- return {
86
- left: Math.max(x, 15),
87
- top: y,
88
- };
89
- }
90
- else {
91
- let _x = deviceWidth - x - width;
92
- if (target_width + _x > deviceWidth) {
93
- return {
94
- right: Math.abs(deviceWidth - target_width) * 0.7,
95
- top: y,
96
- };
97
- }
98
- return {
99
- right: Math.max(_x, 15),
100
- top: y,
101
- };
102
- }
103
- };
104
- if (alignVertical == "bottom") {
105
- y = y + PADDING;
106
- return layout();
107
- }
108
- else {
109
- y = rootView.current.pageY - target_height - PADDING * 2 - ARROW_HEIGHT;
110
- return layout();
111
- }
112
- };
113
- const PADDING = 10;
114
- const ARROW_HEIGHT = 12;
115
- const CELL_HEIGHT = 36;
116
- const show = async () => {
117
- props.onContainerClick && props.onContainerClick();
118
- if (props.data == undefined || props.data?.length == 0)
119
- return;
120
- /**重新获取rootview的定位 */
121
- await getRootViewlayoutPromise();
122
- /**重新获取rootview的定位 */
123
- showPopoverView({
124
- content: (<TouchableOpacity activeOpacity={1} style={{
125
- position: "absolute",
126
- minWidth: deviceWidth * 0.36,
127
- maxWidth: deviceWidth * 0.8,
128
- minHeight: CELL_HEIGHT + PADDING * 2,
129
- maxHeight: CELL_HEIGHT * 5 + PADDING * 2,
130
- borderRadius: 6,
131
- backgroundColor: "#000000ee",
132
- // overflow: 'hidden' ,
133
- padding: PADDING,
134
- ...reLayout(),
135
- }}>
136
- <View style={{
137
- width: ARROW_HEIGHT,
138
- height: ARROW_HEIGHT,
139
- backgroundColor: "#000000ee",
140
- position: "absolute",
141
- zIndex: 1,
142
- transform: [{ rotateZ: "45deg" }],
143
- ...(() => {
144
- const { alignVertical, alignHorizontal } = getLayoutInfos();
145
- if (alignVertical == "bottom" && alignHorizontal == "left")
146
- return { left: "20%", top: -5 };
147
- if (alignVertical == "bottom" && alignHorizontal == "right")
148
- return { right: "20%", top: -5 };
149
- if (alignVertical == "top" && alignHorizontal == "left")
150
- return { left: "20%", bottom: -5 };
151
- if (alignVertical == "top" && alignHorizontal == "right")
152
- return { right: "20%", bottom: -5 };
153
- return {};
154
- })(),
155
- }}/>
156
-
157
- <ScrollView onLayout={(e) => {
158
- // console.log('target onLayout', e.nativeEvent.layout)
159
- let _sc = e.nativeEvent.layout;
160
- sc.current = _sc;
161
- }}>
162
- {props.data?.map((i, idx) => {
163
- return (<TouchableOpacity activeOpacity={0.7} key={`sg-memnu-${idx}`} style={{
164
- height: CELL_HEIGHT,
165
- display: "flex",
166
- flexDirection: "row",
167
- alignItems: "center",
168
- // ,backgroundColor:utils.randomcolor()
169
- }} onPress={(e) => {
170
- props.onItemClick && props.onItemClick(idx, i.extra);
171
- hidePopoverView();
172
- }}>
173
- {i.icon && (<Image style={{ width: 18, height: 18, marginRight: 4 }} source={i.icon}/>)}
174
- <Text style={{ flexShrink: 1, fontSize: 14, color: "white" }}>
175
- {i.text}
176
- </Text>
177
- </TouchableOpacity>);
178
- })}
179
- </ScrollView>
180
- </TouchableOpacity>),
181
- });
182
- };
183
- return (<TouchableOpacity ref={containerRef} onPress={(e) => show()} {...props}/>);
184
- };
@@ -1,8 +0,0 @@
1
- /*
2
- * @Author: shiguo
3
- * @Date: 2022-04-26 11:30:34
4
- * @LastEditors: shiguo
5
- * @LastEditTime: 2022-10-27 16:37:32
6
- * @FilePath: /@aks-dev/easyui/lib/Modal/Modal.tsx
7
- */
8
- export { default as Modal } from 'react-native-modal';
@@ -1,239 +0,0 @@
1
- /*
2
- * @Author: OBKoro1
3
- * @Date: 2022-04-24 17:38:27
4
- * @LastEditors: shiguo
5
- * @LastEditTime: 2022-11-14 11:33:33
6
- * @FilePath: /@aks-dev/easyui/lib/MutiPictureView/MutiPictureView.tsx
7
- */
8
- import * as React from "react";
9
- import { Image, View, StyleSheet, Keyboard, TouchableOpacity, Text, } from "react-native";
10
- import { px2dp } from "../../screen/px2dp";
11
- import { px2sp } from "../../screen/px2sp";
12
- import SYImagePicker from "@aks-dev/react-native-syan-image-picker";
13
- let icon_add_image = require("./assets/icon_add_image.png");
14
- let icon_del_image = require("./assets/icon_del_image.png");
15
- const MutiPictureView = (props) => {
16
- const { bind, maxCount = 6, type = "showImagePicker", addIcon, addIconStyle, addIconContainerStyle, //borderWidth: 1, borderStyle: 'dashed', borderColor: assets.color_A3A9CC 虚线框
17
- itemContainerStyle, emptyPlaceHolderStyle, delIcon, delIconStyle, spacingHorizontal = px2dp(15), spacingInner = px2dp(8), editable = true, showEmptyPlaceHolder = false, } = props;
18
- const { viewModel, setViewModel } = bind;
19
- React.useEffect(() => { }, []);
20
- const [sideLength, setSideLength] = React.useState(0);
21
- const addPhoto = () => {
22
- let images = viewModel.photos || [];
23
- if (!images) {
24
- throw new Error("viewModel没有定义photos字段");
25
- }
26
- if (type == "showImagePicker") {
27
- SYImagePicker.showImagePicker({
28
- imageCount: maxCount - (viewModel.photos?.length || 0),
29
- isCrop: false,
30
- isRecordSelected: false,
31
- quality: 20,
32
- }, (err, photos) => {
33
- if (!err) {
34
- let imgs = photos.map((it) => {
35
- return { uri: it.uri };
36
- });
37
- images = images.concat(imgs);
38
- setViewModel({ photos: images });
39
- }
40
- });
41
- }
42
- if (type == "openCamera") {
43
- SYImagePicker.openCamera({
44
- imageCount: maxCount - (viewModel.photos?.length || 0),
45
- isCrop: false,
46
- isRecordSelected: false,
47
- quality: 20,
48
- }, (err, photos) => {
49
- if (!err) {
50
- let imgs = photos.map((it) => {
51
- return { uri: it.uri };
52
- });
53
- images = images.concat(imgs);
54
- setViewModel({ photos: images });
55
- }
56
- else {
57
- console.log("打开相机失败");
58
- }
59
- });
60
- }
61
- };
62
- const deletePhoto = (index) => {
63
- Keyboard.dismiss();
64
- let photos = [...(viewModel.photos || [])];
65
- photos.splice(index, 1);
66
- setViewModel({ photos: photos });
67
- };
68
- const showPhoto = (index) => {
69
- Keyboard.dismiss();
70
- let imgs = (props.value || viewModel.photos)?.filter((it) => {
71
- return ((typeof it === "string" && it.indexOf("http") >= 0) ||
72
- typeof it == "object");
73
- }) || [];
74
- let images = [];
75
- // console.log('viewModel', viewModel, imgs)
76
- imgs.forEach((it) => {
77
- if (typeof it === "string") {
78
- images.push({ uri: it });
79
- }
80
- else {
81
- images.push(it);
82
- }
83
- });
84
- setViewModel({
85
- imageViewer: {
86
- imageUrls: images.map((it) => {
87
- return it.uri;
88
- }),
89
- index: index,
90
- visible: true,
91
- },
92
- });
93
- };
94
- const ItemView = ({ source, index, }) => {
95
- return (<TouchableOpacity style={[
96
- styles.item_container,
97
- itemContainerStyle,
98
- {
99
- marginTop: index < 3 ? 0 : spacingInner,
100
- marginLeft: index % 3 == 0 ? spacingHorizontal : spacingInner,
101
- width: sideLength,
102
- height: sideLength,
103
- },
104
- ]} activeOpacity={0.8} onPress={() => showPhoto(index)}>
105
- <Image source={source} style={{ width: "100%", height: "100%" }} resizeMode="cover"/>
106
- {editable && !props.value && (<TouchableOpacity onPress={() => deletePhoto(index)} style={[styles.del_img_container, delIconStyle]}>
107
- <Image source={delIcon ? delIcon : icon_del_image} resizeMode="contain" style={{ width: "100%", height: "100%" }}/>
108
- </TouchableOpacity>)}
109
- </TouchableOpacity>);
110
- };
111
- const containerRef = React.useRef(null);
112
- React.useEffect(() => {
113
- containerRef.current?.measure((...args) => {
114
- // console.log('measure', args[2])
115
- if (args.length > 3) {
116
- let _sideLength = +((args[2] - spacingHorizontal * 2 - spacingInner * 2) /
117
- 3).toFixed(1);
118
- setSideLength(_sideLength - 0.1);
119
- }
120
- });
121
- });
122
- if (props.value && props.value?.length > 0) {
123
- return (<View style={[styles.container, props.style]} ref={containerRef}>
124
- {props.value instanceof Array &&
125
- props.value?.map((item, index) => {
126
- return (<ItemView key={index} source={typeof item === "string" ? { uri: item } : item} index={index}/>);
127
- })}
128
-
129
- {showEmptyPlaceHolder &&
130
- maxCount - (props.value?.length || 0) - 1 > 0 &&
131
- Array.from({
132
- length: maxCount - (props.value?.length || 0) - (editable ? 1 : 0),
133
- }, (_, k) => (<View key={`sg-showEmptyPlaceHolder-${k}`} style={[
134
- styles.empty_place_container,
135
- emptyPlaceHolderStyle,
136
- itemContainerStyle,
137
- {
138
- marginTop: k + (editable ? 1 : 0) + (props.value?.length || 0) > 2
139
- ? spacingInner
140
- : 0,
141
- marginLeft: (k + (editable ? 1 : 0) + (props.value?.length || 0)) %
142
- 3 ==
143
- 0
144
- ? spacingHorizontal
145
- : spacingInner,
146
- width: sideLength,
147
- height: sideLength,
148
- },
149
- ]}/>))}
150
- </View>);
151
- }
152
- return (<View style={[styles.container, props.style]} ref={containerRef}>
153
- {viewModel?.photos instanceof Array &&
154
- viewModel.photos.map((item, index) => {
155
- return (<ItemView key={index} source={typeof item === "string" ? { uri: item } : item} index={index}/>);
156
- })}
157
-
158
- {!(viewModel?.photos?.length == maxCount) && editable && (<TouchableOpacity style={[
159
- styles.item_container,
160
- itemContainerStyle,
161
- {
162
- marginTop: (viewModel?.photos?.length || 0) >= 3 ? spacingInner : 0,
163
- marginLeft: (viewModel?.photos?.length || 0) % 3 == 0
164
- ? spacingHorizontal
165
- : spacingInner,
166
- width: sideLength,
167
- height: sideLength,
168
- },
169
- addIconContainerStyle,
170
- ]} activeOpacity={0.8} onPress={() => addPhoto()}>
171
- <Image source={addIcon ? addIcon : icon_add_image} style={[{ width: "25%", height: "25%" }, addIconStyle]} resizeMode="contain"/>
172
- {props.addText && (<Text style={[
173
- {
174
- fontSize: px2sp(12),
175
- color: "lightgrey",
176
- marginTop: px2dp(2),
177
- },
178
- props.addTextStyle,
179
- ]}>
180
- {props.addText}
181
- </Text>)}
182
- </TouchableOpacity>)}
183
- {showEmptyPlaceHolder &&
184
- maxCount - (viewModel.photos?.length || 0) - 1 > 0 &&
185
- Array.from({
186
- length: maxCount - (viewModel.photos?.length || 0) - (editable ? 1 : 0),
187
- }, (_, k) => (<View key={`sg-showEmptyPlaceHolder-${k}`} style={[
188
- styles.empty_place_container,
189
- emptyPlaceHolderStyle,
190
- itemContainerStyle,
191
- {
192
- marginTop: k + (editable ? 1 : 0) + (viewModel.photos?.length || 0) > 2
193
- ? spacingInner
194
- : 0,
195
- marginLeft: (k + (editable ? 1 : 0) + (viewModel.photos?.length || 0)) %
196
- 3 ==
197
- 0
198
- ? spacingHorizontal
199
- : spacingInner,
200
- width: sideLength,
201
- height: sideLength,
202
- },
203
- ]}/>))}
204
- </View>);
205
- };
206
- const styles = StyleSheet.create({
207
- container: {
208
- flex: 1,
209
- minHeight: 1,
210
- backgroundColor: "transparent",
211
- display: "flex",
212
- flexDirection: "row",
213
- flexWrap: "wrap",
214
- // borderRadius: px2dp(10),
215
- },
216
- item_container: {
217
- overflow: "hidden",
218
- borderRadius: px2dp(10),
219
- display: "flex",
220
- position: "relative",
221
- justifyContent: "center",
222
- alignItems: "center",
223
- backgroundColor: "#ededed",
224
- },
225
- del_img_container: {
226
- position: "absolute",
227
- right: 2,
228
- top: 2,
229
- width: px2dp(24),
230
- height: px2dp(24),
231
- },
232
- empty_place_container: {
233
- borderRadius: px2dp(10),
234
- backgroundColor: "#ededed",
235
- borderColor: "#cccccc",
236
- borderWidth: 0.75,
237
- },
238
- });
239
- export default React.memo(MutiPictureView, (prevProps, nextProps) => false);
@@ -1,54 +0,0 @@
1
- /*
2
- * @Author: shiguo
3
- * @Date: 2022-04-24 15:58:39
4
- * @LastEditors: shiguo
5
- * @LastEditTime: 2022-04-26 12:38:13
6
- * @FilePath: /@aks/easy/lib/PictureViewer/PictureViewer.tsx
7
- */
8
- import * as React from "react";
9
- import { Modal, StatusBar, Platform } from "react-native";
10
- import ImageViewer from "react-native-image-zoom-viewer";
11
- export const PictureViewer = ({ bind, }) => {
12
- const { viewModel, setViewModel } = bind;
13
- const visible = viewModel.imageViewer.visible;
14
- const imgs = viewModel.imageViewer.imageUrls?.map((item) => ({ url: item }));
15
- const index = viewModel.imageViewer.index;
16
- React.useEffect(() => {
17
- if (Platform.OS == "android") {
18
- if (visible) {
19
- StatusBar.setBackgroundColor("black");
20
- StatusBar.setBarStyle("light-content");
21
- }
22
- else {
23
- StatusBar.setBackgroundColor("transparent");
24
- StatusBar.setBarStyle("dark-content");
25
- }
26
- }
27
- }, [visible]);
28
- return (<Modal presentationStyle="overFullScreen" visible={visible} transparent={false} onRequestClose={() => {
29
- /**
30
- * 【官方文档】
31
- * onRequestClose回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。
32
- * 请务必注意本属性在 Android 平台上为必填,且会在 modal 处于开启状态时阻止BackHandler事件。
33
- */
34
- setViewModel({
35
- imageViewer: {
36
- ...viewModel.imageViewer,
37
- visible: false,
38
- },
39
- });
40
- }} style={{ margin: 0, backgroundColor: "red" }}>
41
- <ImageViewer imageUrls={imgs} index={index} onSwipeDown={() => {
42
- // console.log('onSwipeDown');
43
- }} saveToLocalByLongPress={false}
44
- // onMove={data => console.log(data)}
45
- useNativeDriver={true} enableSwipeDown={true} onClick={() => {
46
- setViewModel({
47
- imageViewer: {
48
- ...viewModel.imageViewer,
49
- visible: false,
50
- },
51
- });
52
- }}/>
53
- </Modal>);
54
- };
@@ -1,155 +0,0 @@
1
- import * as React from "react";
2
- import { View, Text, Animated, StyleSheet, ActivityIndicator, TouchableOpacity, } from "react-native";
3
- import { SwipeListView } from "react-native-swipe-list-view";
4
- export const RefreshText = {
5
- HeaderRefreshing: "上拉可以刷新",
6
- FooterRefreshing: "下拉可以加载更多",
7
- Failure: "服务器正在出小差,点击重新加载",
8
- NoMoreData: "已经全部加载完毕",
9
- EmptyData: "没有数据",
10
- Idle: "正在加载更多的数据..",
11
- };
12
- export var RefreshState;
13
- (function (RefreshState) {
14
- RefreshState["Idle"] = "Idle";
15
- RefreshState["HeaderRefreshing"] = "HeaderRefreshing";
16
- RefreshState["FooterRefreshing"] = "FooterRefreshing";
17
- RefreshState["NoMoreData"] = "NoMoreData";
18
- RefreshState["Failure"] = "Failure";
19
- RefreshState["EmptyData"] = "EmptyData";
20
- RefreshState["None"] = "None";
21
- })(RefreshState || (RefreshState = {}));
22
- export default React.forwardRef((props, ref) => {
23
- const { mode = "FlatList", refreshState, onHeaderRefresh, onFooterRefresh, reload, ...rest } = props;
24
- const seed = React.useRef(Math.random()).current;
25
- let onRefresh = () => {
26
- if (refreshState == RefreshState.HeaderRefreshing)
27
- return;
28
- if (refreshState == RefreshState.FooterRefreshing)
29
- return;
30
- onHeaderRefresh && onHeaderRefresh(RefreshState.HeaderRefreshing);
31
- };
32
- let onEndReached = (info) => {
33
- if (mode == "FlatList") {
34
- props = props;
35
- if (!(props.data instanceof Array)) {
36
- throw new Error("[sg:FlatList] data is not Array");
37
- }
38
- if (props.data.length == 0)
39
- return;
40
- }
41
- if (mode == "SectionList") {
42
- props = props;
43
- if (!(props.sections instanceof Array)) {
44
- throw new Error("[sg:SectionList] sections is not Array");
45
- }
46
- if (props.sections.length == 0)
47
- return;
48
- }
49
- if (refreshState != RefreshState.Idle)
50
- return;
51
- onFooterRefresh && onFooterRefresh(RefreshState.FooterRefreshing);
52
- };
53
- switch (mode) {
54
- case "FlatList": {
55
- let flatListProps = props;
56
- return (<Animated.FlatList {...rest} ref={ref} refreshing={refreshState == RefreshState.HeaderRefreshing} keyExtractor={(_, index) => {
57
- return `sg-index-FlatList-${seed}-${index}`;
58
- }} contentContainerStyle={flatListProps.data?.length ? {} : { height: "100%" }} onRefresh={onRefresh} onEndReachedThreshold={0.1} onEndReached={onEndReached} showsVerticalScrollIndicator={false} ListHeaderComponent={(_) => (<View style={{ display: "flex", flexDirection: "column" }}>
59
- <ListHeaderComponent {...flatListProps}/>
60
- {/* {flatListProps.ListHeaderComponent} */}
61
- </View>)}
62
- // ListHeaderComponent={flatListProps.ListHeaderComponent}
63
- ListFooterComponent={(_) => (<ListFooterComponent {...flatListProps}/>)}/>);
64
- }
65
- case "SectionList": {
66
- let sectionListProps = props;
67
- const { ItemSeparatorComponent = (_) => <View style={{ height: 1 }}/>, } = sectionListProps;
68
- return (<Animated.SectionList {...rest} ref={ref} refreshing={refreshState == RefreshState.HeaderRefreshing} onRefresh={onRefresh} keyExtractor={(_, index) => {
69
- return `sg-index-SectionList-${seed}-${index}`;
70
- }} contentContainerStyle={sectionListProps.sections?.length > 0 ? {} : { height: "100%" }} ItemSeparatorComponent={ItemSeparatorComponent} onEndReachedThreshold={0.1} onEndReached={onEndReached} showsVerticalScrollIndicator={false}
71
- // ListHeaderComponent={(_) => <ListHeaderComponent {...sectionListProps} />}
72
- ListHeaderComponent={(_) => (<View style={{ display: "flex", flexDirection: "column" }}>
73
- <ListHeaderComponent {...sectionListProps}/>
74
- {sectionListProps.ListHeaderComponent}
75
- </View>)} ListFooterComponent={(_) => (<ListFooterComponent {...sectionListProps}/>)} renderSectionHeader={sectionListProps.renderSectionHeader}/>);
76
- }
77
- case "SwipeList": {
78
- let swipeListProps = props;
79
- const { ItemSeparatorComponent = (_) => <View style={{ height: 1 }}/>, } = swipeListProps;
80
- const { renderHiddenItem = (data, rowMap) => (<View style={{
81
- backgroundColor: "red",
82
- height: "100%",
83
- alignItems: "flex-end",
84
- justifyContent: "center",
85
- }}>
86
- <Text>Right </Text>
87
- </View>), } = swipeListProps;
88
- return (<SwipeListView {...rest} rightOpenValue={-100} leftOpenValue={0} ref={ref} disableLeftSwipe={false} disableRightSwipe={true} onRefresh={onRefresh} refreshing={refreshState == RefreshState.HeaderRefreshing} ItemSeparatorComponent={ItemSeparatorComponent} onEndReachedThreshold={0.1} onEndReached={onEndReached} showsVerticalScrollIndicator={false} ListHeaderComponent={(_) => (<View style={{ display: "flex", flexDirection: "column" }}>
89
- <ListHeaderComponent {...swipeListProps}/>
90
- {swipeListProps.ListHeaderComponent}
91
- </View>)} ListFooterComponent={(args) => (<ListFooterComponent {...swipeListProps}/>)} renderHiddenItem={renderHiddenItem}/>);
92
- }
93
- }
94
- });
95
- const ListFooterComponent = React.memo((props) => {
96
- const { refreshState, reload } = props;
97
- switch (refreshState) {
98
- case RefreshState.Idle:
99
- case RefreshState.FooterRefreshing:
100
- return (<View style={{ ...styles.container, flexDirection: "row" }}>
101
- <ActivityIndicator color={"gray"}/>
102
- <Text style={{ ...styles.text, marginLeft: 5 }}>
103
- {RefreshText.FooterRefreshing}
104
- </Text>
105
- </View>);
106
- case RefreshState.NoMoreData:
107
- return (<View style={styles.container}>
108
- <Text style={{ ...styles.text, color: "#999999" }}>
109
- {RefreshText.NoMoreData}
110
- </Text>
111
- </View>);
112
- case RefreshState.Failure:
113
- return (<View style={styles.container}>
114
- <TouchableOpacity onPress={() => reload && reload()}>
115
- <Text style={styles.text}>{RefreshText.Failure}</Text>
116
- </TouchableOpacity>
117
- </View>);
118
- case RefreshState.EmptyData:
119
- if (props.renderListEmptyComponent)
120
- return props.renderListEmptyComponent();
121
- return (<View style={styles.container}>
122
- <TouchableOpacity onPress={() => reload && reload()}>
123
- <Text style={styles.text}>{RefreshText.EmptyData}</Text>
124
- </TouchableOpacity>
125
- </View>);
126
- default:
127
- return <View />;
128
- }
129
- });
130
- const ListHeaderComponent = React.memo((props) => {
131
- const { refreshState } = props;
132
- switch (refreshState) {
133
- case RefreshState.HeaderRefreshing:
134
- return (<View style={{ ...styles.container }}>
135
- <Text style={{ ...styles.text }}>{RefreshText.HeaderRefreshing}</Text>
136
- </View>);
137
- default:
138
- return <View />;
139
- }
140
- });
141
- const styles = StyleSheet.create({
142
- container: {
143
- display: "flex",
144
- flexDirection: "column",
145
- justifyContent: "center",
146
- alignItems: "center",
147
- height: 44,
148
- // backgroundColor:'cyan'
149
- },
150
- text: {
151
- color: "gray",
152
- lineHeight: 16,
153
- fontSize: 13,
154
- },
155
- });