@aks-dev/easyui 1.0.192 → 1.0.194
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.
- package/dist/components/AnimationModal/AnimationModal.js +36 -15
- package/dist/components/Badge/Badge.js +16 -7
- package/dist/components/DottedLine/DottedLine.js +13 -14
- package/dist/components/Echarts/EchartsView.js +73 -30
- package/dist/components/Echarts/helper.js +16 -1
- package/dist/components/Hud/AlertBottomView/AlertBottomView.js +60 -43
- package/dist/components/Hud/AlertSheetView/AlertSheetView.js +30 -23
- package/dist/components/Hud/AlertView/AlertView.js +62 -46
- package/dist/components/Hud/Hud.js +19 -8
- package/dist/components/Hud/Loading/Loading.js +16 -4
- package/dist/components/Hud/PopoverView/PopoverView.js +13 -2
- package/dist/components/Hud/Scanner/Scanner.js +86 -55
- package/dist/components/Hud/Toast/Toast.js +15 -5
- package/dist/components/MenuView/MenuView.js +61 -33
- package/dist/components/Modal/Modal.js +7 -0
- package/dist/components/MutiPictureView/MutiPictureView.js +47 -27
- package/dist/components/PictureViewer/PictureViewer.js +24 -8
- package/dist/components/RefreshList/RefreshList.js +52 -41
- package/dist/components/RichText/RichText.js +22 -21
- package/dist/components/StickHeaderView/StickHeaderView.js +12 -2
- package/dist/components/TableCell/TableCell.js +51 -37
- package/dist/components/TextInputArea/TextInputArea.js +28 -21
- package/dist/components/WithLoadingContainer/WithLoadingContainer.js +31 -14
- package/dist/index.js +11 -0
- package/dist/jsbridge/RNEasyui.js +25 -0
- package/dist/jsbridge/UpgradeModule.js +19 -9
- package/dist/jsbridge/index.js +7 -0
- package/dist/screen/index.js +8 -0
- package/dist/screen/px2dp.js +25 -2
- package/dist/screen/px2sp.js +35 -5
- package/dist/screen/text-fit.js +13 -2
- package/dist/utils/index.js +7 -0
- package/dist/utils/lazy.js +67 -12
- package/dist/utils/mode.js +21 -0
- package/package.json +16 -8
- package/types/components/AnimationModal/AnimationModal.d.ts +8 -0
- package/types/components/AnimationModal/AnimationModal.d.ts.map +1 -1
- package/types/components/Echarts/helper.d.ts +5 -0
- package/types/components/Echarts/helper.d.ts.map +1 -1
- package/types/components/MutiPictureView/MutiPictureView.d.ts +9 -0
- package/types/components/MutiPictureView/MutiPictureView.d.ts.map +1 -1
- package/types/components/StickHeaderView/StickHeaderView.d.ts +6 -0
- package/types/components/StickHeaderView/StickHeaderView.d.ts.map +1 -1
- package/types/components/TextInputArea/TextInputArea.d.ts +1 -0
- package/types/components/TextInputArea/TextInputArea.d.ts.map +1 -1
- package/types/jsbridge/RNEasyui.d.ts +18 -0
- package/types/jsbridge/RNEasyui.d.ts.map +1 -1
- package/types/jsbridge/UpgradeModule.d.ts +15 -0
- package/types/jsbridge/UpgradeModule.d.ts.map +1 -1
- package/types/screen/px2dp.d.ts +11 -0
- package/types/screen/px2dp.d.ts.map +1 -1
- package/types/screen/text-fit.d.ts +3 -0
- package/types/screen/text-fit.d.ts.map +1 -1
- package/types/utils/lazy.d.ts +33 -0
- package/types/utils/lazy.d.ts.map +1 -1
- package/types/utils/mode.d.ts +14 -0
- package/types/utils/mode.d.ts.map +1 -1
- package/dist/components/Echarts/demo.js +0 -201
- package/dist/components/RefreshList/demo.js +0 -9
- package/dist/components/RefreshList/demo1.js +0 -27
- package/dist/components/RefreshList/demo2.js +0 -9
- package/dist/components/StickHeaderView/demo.js +0 -37
- package/i.sh +0 -25
- package/types/components/Echarts/demo.d.ts +0 -4
- package/types/components/Echarts/demo.d.ts.map +0 -1
- package/types/components/RefreshList/demo.d.ts +0 -2
- package/types/components/RefreshList/demo.d.ts.map +0 -1
- package/types/components/RefreshList/demo1.d.ts +0 -2
- package/types/components/RefreshList/demo1.d.ts.map +0 -1
- package/types/components/RefreshList/demo2.d.ts +0 -2
- package/types/components/RefreshList/demo2.d.ts.map +0 -1
- package/types/components/StickHeaderView/demo.d.ts +0 -4
- package/types/components/StickHeaderView/demo.d.ts.map +0 -1
|
@@ -1,18 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
1
|
+
/*
|
|
2
|
+
* @Author: shiguo
|
|
3
|
+
* @Date: 2022-05-17 15:22:06
|
|
4
|
+
* @LastEditors: shiguo
|
|
5
|
+
* @LastEditTime: 2023-09-27 15:17:15
|
|
6
|
+
* @FilePath: /@aks-dev/easyui/lib/AnimationModal/AnimationModal.tsx
|
|
7
|
+
*/
|
|
8
|
+
import { __awaiter } from "tslib";
|
|
10
9
|
import * as React from "react";
|
|
11
10
|
import { View, Animated, Easing, PanResponder, StyleSheet, useWindowDimensions, BackHandler, } from "react-native";
|
|
12
11
|
import * as utils from "../../utils/lazy";
|
|
12
|
+
// type State = {
|
|
13
|
+
// display: 'flex' | 'none';
|
|
14
|
+
// }
|
|
15
|
+
// type StateReducerProps = (state: State, action: Partial<State>) => State
|
|
13
16
|
export const AnimationModal = React.forwardRef((props, ref) => {
|
|
14
17
|
const { animationType = "from-bottom", mask = false } = props || {};
|
|
15
18
|
const { height } = useWindowDimensions();
|
|
19
|
+
// const [state, dispatch] = React.useReducer<StateReducerProps>(
|
|
20
|
+
// (state, action) => ({ ...state, ...action }),
|
|
21
|
+
// {
|
|
22
|
+
// display: 'none'
|
|
23
|
+
// })
|
|
16
24
|
const [display, setDisplay] = useCallbackState("none");
|
|
17
25
|
const animatedValue = React.useRef(new Animated.Value(0)).current;
|
|
18
26
|
const timing = (value) => {
|
|
@@ -22,6 +30,7 @@ export const AnimationModal = React.forwardRef((props, ref) => {
|
|
|
22
30
|
useNativeDriver: true,
|
|
23
31
|
easing: Easing.ease,
|
|
24
32
|
}).start(({ finished }) => {
|
|
33
|
+
/* 动画完成的回调函数 */
|
|
25
34
|
});
|
|
26
35
|
};
|
|
27
36
|
const viewRef = React.useRef(null);
|
|
@@ -69,9 +78,9 @@ export const AnimationModal = React.forwardRef((props, ref) => {
|
|
|
69
78
|
addEventListener.remove();
|
|
70
79
|
};
|
|
71
80
|
}, [display]);
|
|
72
|
-
return (
|
|
81
|
+
return (<View style={Object.assign({
|
|
73
82
|
display: display,
|
|
74
|
-
}, styles.container, props.style)
|
|
83
|
+
}, styles.container, props.style)} {...PanResponder.create({
|
|
75
84
|
onStartShouldSetPanResponder: (e, gestureState) => {
|
|
76
85
|
let pageY = e.nativeEvent.pageY;
|
|
77
86
|
let topY = height - layoutRef.current.h1;
|
|
@@ -81,6 +90,7 @@ export const AnimationModal = React.forwardRef((props, ref) => {
|
|
|
81
90
|
return false;
|
|
82
91
|
},
|
|
83
92
|
onPanResponderGrant: (e, gestureState) => {
|
|
93
|
+
// console.log({e})
|
|
84
94
|
let pageY = e.nativeEvent.pageY;
|
|
85
95
|
let topY = height - layoutRef.current.h1;
|
|
86
96
|
if (pageY <= topY && !mask) {
|
|
@@ -88,10 +98,18 @@ export const AnimationModal = React.forwardRef((props, ref) => {
|
|
|
88
98
|
hide();
|
|
89
99
|
}
|
|
90
100
|
},
|
|
91
|
-
}).panHandlers
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
101
|
+
}).panHandlers}>
|
|
102
|
+
<Animated.View style={Object.assign({}, styles.wrapper, {
|
|
103
|
+
transform: [{ translateY: animatedValue }],
|
|
104
|
+
})}
|
|
105
|
+
// onLayout={e => {
|
|
106
|
+
// let target: LayoutRectangle = e.nativeEvent.layout
|
|
107
|
+
// layoutRef.current.h1 = target.height
|
|
108
|
+
// }}
|
|
109
|
+
ref={viewRef}>
|
|
110
|
+
{props.children}
|
|
111
|
+
</Animated.View>
|
|
112
|
+
</View>);
|
|
95
113
|
});
|
|
96
114
|
const styles = StyleSheet.create({
|
|
97
115
|
container: {
|
|
@@ -101,6 +119,7 @@ const styles = StyleSheet.create({
|
|
|
101
119
|
top: 0,
|
|
102
120
|
bottom: 0,
|
|
103
121
|
zIndex: 999,
|
|
122
|
+
// display: 'flex',
|
|
104
123
|
flexDirection: "column",
|
|
105
124
|
backgroundColor: "#00000055",
|
|
106
125
|
overflow: "hidden",
|
|
@@ -109,12 +128,14 @@ const styles = StyleSheet.create({
|
|
|
109
128
|
position: "absolute",
|
|
110
129
|
display: "flex",
|
|
111
130
|
flexDirection: "column",
|
|
131
|
+
// backgroundColor: 'pink',
|
|
112
132
|
width: "100%",
|
|
113
133
|
top: "100%",
|
|
114
134
|
},
|
|
115
135
|
empty: {
|
|
116
136
|
flex: 1,
|
|
117
137
|
position: "relative",
|
|
138
|
+
// backgroundColor: 'cyan'
|
|
118
139
|
},
|
|
119
140
|
});
|
|
120
141
|
const useCallbackState = (od) => {
|
|
@@ -1,15 +1,23 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @Author: shiguo
|
|
3
|
+
* @Date: 2022-04-21 14:40:29
|
|
4
|
+
* @LastEditors: shiguo
|
|
5
|
+
* @LastEditTime: 2022-07-08 15:40:21
|
|
6
|
+
* @FilePath: /@aks-dev/easyui/lib/Badge/Badge.tsx
|
|
7
|
+
*/
|
|
1
8
|
import React from "react";
|
|
2
9
|
import { View, Text } from "react-native";
|
|
3
10
|
import { px2dp } from "../../screen/px2dp";
|
|
4
11
|
import { px2sp } from "../../screen/px2sp";
|
|
5
12
|
export const Badge = (props) => {
|
|
6
13
|
if (isNaN(+props.count) || Number(props.count) == 0)
|
|
7
|
-
return
|
|
8
|
-
return (
|
|
14
|
+
return <View />;
|
|
15
|
+
return (<View style={[
|
|
9
16
|
{
|
|
10
17
|
flexGrow: 0,
|
|
11
18
|
flexShrink: 1,
|
|
12
19
|
zIndex: 1,
|
|
20
|
+
// paddingHorizontal: px2dp(0),
|
|
13
21
|
height: px2dp(16),
|
|
14
22
|
minWidth: px2dp(16),
|
|
15
23
|
borderRadius: px2dp(8),
|
|
@@ -18,9 +26,10 @@ export const Badge = (props) => {
|
|
|
18
26
|
backgroundColor: "red",
|
|
19
27
|
},
|
|
20
28
|
props.style,
|
|
21
|
-
]
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
29
|
+
]}>
|
|
30
|
+
<Text style={{ fontSize: px2sp(12), color: "white", textAlign: "center" }}>
|
|
31
|
+
{" "}
|
|
32
|
+
{Number(props.count) > 99 ? "+99" : props.count}{" "}
|
|
33
|
+
</Text>
|
|
34
|
+
</View>);
|
|
26
35
|
};
|
|
@@ -1,22 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
1
|
+
import { __rest } from "tslib";
|
|
2
|
+
/*
|
|
3
|
+
* @Author: shiguo
|
|
4
|
+
* @Date: 2022-07-12 15:30:19
|
|
5
|
+
* @LastEditors: shiguo
|
|
6
|
+
* @LastEditTime: 2022-07-12 15:33:06
|
|
7
|
+
* @FilePath: /@aks-dev/easyui/lib/DottedLine/DottedLine.tsx
|
|
8
|
+
*/
|
|
12
9
|
import React from "react";
|
|
13
10
|
import { StyleSheet, View } from "react-native";
|
|
14
11
|
export default (props) => {
|
|
15
12
|
const { vertical = false, dottedColor, dottedCount = 200 } = props, rest = __rest(props, ["vertical", "dottedColor", "dottedCount"]);
|
|
16
13
|
const arrs = Array.from({ length: dottedCount }, (k, v) => v);
|
|
17
|
-
return (
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
return (<View style={Object.assign(Object.assign(Object.assign({}, styles.container), { flexDirection: vertical ? "column" : "row" }), rest.style)}>
|
|
15
|
+
{arrs.map((item, index) => {
|
|
16
|
+
return (<View key={`dotted-${index}`} style={Object.assign(Object.assign({}, (vertical ? styles.dotted_vertical : styles.dotted_horizontal)), (dottedColor && { backgroundColor: dottedColor }))}/>);
|
|
17
|
+
})}
|
|
18
|
+
</View>);
|
|
20
19
|
};
|
|
21
20
|
const styles = StyleSheet.create({
|
|
22
21
|
container: {
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
1
|
+
import { __awaiter } from "tslib";
|
|
2
|
+
/*
|
|
3
|
+
* @Author: shiguo
|
|
4
|
+
* @Date: 2022-05-05 14:52:53
|
|
5
|
+
* @LastEditors: shiguo
|
|
6
|
+
* @LastEditTime: 2023-01-03 17:50:43
|
|
7
|
+
* @FilePath: /@aks-dev/easyui/lib/Echarts/EchartsView.tsx
|
|
8
|
+
*/
|
|
10
9
|
import * as React from "react";
|
|
11
10
|
import { StyleSheet, View, } from "react-native";
|
|
12
11
|
import { WebView } from "react-native-webview";
|
|
13
12
|
import { getHtml, toString } from "./helper";
|
|
13
|
+
// type Reducer = (prevState: State, action: Partial<State>) => State;
|
|
14
14
|
const EchartsView = (props) => {
|
|
15
15
|
var _a, _b;
|
|
16
16
|
const [state, dispatch] = React.useReducer((prevState, ...args) => Object.assign({}, prevState, ...args), {
|
|
@@ -33,6 +33,7 @@ const EchartsView = (props) => {
|
|
|
33
33
|
pageY: args[5],
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
|
+
// console.log('RootView', rootView.current)
|
|
36
37
|
resovle(args);
|
|
37
38
|
});
|
|
38
39
|
});
|
|
@@ -80,27 +81,68 @@ const EchartsView = (props) => {
|
|
|
80
81
|
console.log(err);
|
|
81
82
|
});
|
|
82
83
|
}, [props.option, state.isLoaded]);
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
84
|
+
// const injectedJavaScript = (): string => {
|
|
85
|
+
// console.log('injectedJavaScript', props.option.xAxis.data)
|
|
86
|
+
// let height = state.height ? `${state.height}px` : 'auto'
|
|
87
|
+
// let width = state.width ? `${state.width}px` : 'auto'
|
|
88
|
+
// return `
|
|
89
|
+
// ;(function() {
|
|
90
|
+
// document.getElementById('main').style.height = "${height}";
|
|
91
|
+
// document.getElementById('main').style.width = "${width}";
|
|
92
|
+
// var instance = echarts.getInstanceByDom(document.getElementById('main'));
|
|
93
|
+
// if(instance == null){
|
|
94
|
+
// instance = echarts.init(document.getElementById('main'));
|
|
95
|
+
// }
|
|
96
|
+
// instance.clear();
|
|
97
|
+
// instance.setOption(${toString(props.option)});
|
|
98
|
+
// instance.on('click', function(params) {
|
|
99
|
+
// var seen = [];
|
|
100
|
+
// var paramsString = JSON.stringify(params, function(key, val) {
|
|
101
|
+
// if (val != null && typeof val == "object") {
|
|
102
|
+
// if (seen.indexOf(val) >= 0) {
|
|
103
|
+
// return;
|
|
104
|
+
// }
|
|
105
|
+
// seen.push(val);
|
|
106
|
+
// }
|
|
107
|
+
// return val;
|
|
108
|
+
// });
|
|
109
|
+
// // window.ReactNativeWebView.postMessage(JSON.stringify({"types":"ON_PRESS","payload": paramsString}));
|
|
110
|
+
// });
|
|
111
|
+
// })();
|
|
112
|
+
// `
|
|
113
|
+
// }
|
|
114
|
+
return (<View style={[styles.container, props.style]} ref={containerRef}>
|
|
115
|
+
<WebView ref={WebViewRef} originWhitelist={["*"]} useWebKit={true} // ios使用最新webkit内核渲染
|
|
116
|
+
allowUniversalAccessFromFileURLs={true} geolocationEnabled={true} mixedContentMode={"always"} renderLoading={() => {
|
|
117
|
+
var _a;
|
|
118
|
+
if (props.renderLoading)
|
|
119
|
+
return props.renderLoading();
|
|
120
|
+
return (<View style={{
|
|
121
|
+
backgroundColor: ((_a = props.style) === null || _a === void 0 ? void 0 : _a.backgroundColor) || "transparent",
|
|
122
|
+
}}/>);
|
|
123
|
+
}} // 设置空View,修复ioswebview闪白
|
|
124
|
+
style={{
|
|
125
|
+
backgroundColor: ((_a = props.style) === null || _a === void 0 ? void 0 : _a.backgroundColor) || "transparent",
|
|
126
|
+
opacity: 0.99, //解决闪退的办法
|
|
127
|
+
}} // 设置背景色透明,修复android闪白
|
|
128
|
+
scrollEnabled={false}
|
|
129
|
+
// onMessage={e=>{
|
|
130
|
+
// console.log(e)
|
|
131
|
+
// }}
|
|
132
|
+
javaScriptEnabled={true}
|
|
133
|
+
// injectedJavaScript={injectedJavaScript()}
|
|
134
|
+
startInLoadingState={false} onLoadEnd={(_) => {
|
|
135
|
+
dispatch({ isLoaded: true });
|
|
136
|
+
// console.log('onLoadEnd')
|
|
137
|
+
}} onError={(e) => {
|
|
138
|
+
console.log("onError", e);
|
|
139
|
+
}} source={{
|
|
140
|
+
baseUrl: "",
|
|
141
|
+
html: getHtml({
|
|
142
|
+
backgroundColor: ((_b = props.style) === null || _b === void 0 ? void 0 : _b.backgroundColor) || "transparent",
|
|
143
|
+
}),
|
|
144
|
+
}}/>
|
|
145
|
+
</View>);
|
|
104
146
|
};
|
|
105
147
|
const styles = StyleSheet.create({
|
|
106
148
|
container: {
|
|
@@ -110,5 +152,6 @@ const styles = StyleSheet.create({
|
|
|
110
152
|
},
|
|
111
153
|
});
|
|
112
154
|
export default EchartsView;
|
|
155
|
+
// React.memo(EchartsView)
|
|
113
156
|
import * as echarts from "echarts/core";
|
|
114
157
|
export { echarts };
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @Author: shiguo
|
|
3
|
+
* @Date: 2022-05-05 15:56:21
|
|
4
|
+
* @LastEditors: shiguo
|
|
5
|
+
* @LastEditTime: 2023-01-03 17:02:57
|
|
6
|
+
* @FilePath: /@aks-dev/easyui/lib/Echarts/helper.tsx
|
|
7
|
+
*/
|
|
1
8
|
export const getHtml = (props) => {
|
|
2
9
|
return `
|
|
3
10
|
<!DOCTYPE html>
|
|
@@ -35,15 +42,23 @@ export const getHtml = (props) => {
|
|
|
35
42
|
</html>
|
|
36
43
|
`;
|
|
37
44
|
};
|
|
45
|
+
/**
|
|
46
|
+
* https://res.actiiot.com/echarts/5.0.2/echarts.min.js
|
|
47
|
+
*
|
|
48
|
+
* https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js
|
|
49
|
+
*/
|
|
38
50
|
export const toString = (obj) => {
|
|
39
51
|
let result = JSON.stringify(obj, function (key, val) {
|
|
52
|
+
// 对function进行特殊处理
|
|
40
53
|
if (typeof val === 'function') {
|
|
41
54
|
return `~ha~${val}~ha~`;
|
|
42
55
|
}
|
|
43
56
|
return val;
|
|
44
57
|
});
|
|
58
|
+
// 再进行还原
|
|
45
59
|
do {
|
|
46
|
-
result = result.replace('\"~ha~', '').replace('~ha~\"', '').replace(/\\\"/g, "\"");
|
|
60
|
+
result = result.replace('\"~ha~', '').replace('~ha~\"', '').replace(/\\\"/g, "\""); //最后一个replace将release模式中莫名生成的\"转换成"
|
|
47
61
|
} while (result.indexOf('~ha~') >= 0);
|
|
48
62
|
return result;
|
|
49
63
|
};
|
|
64
|
+
///.replace(/\\n/g, '')
|
|
@@ -1,12 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
1
|
+
import { __awaiter } from "tslib";
|
|
10
2
|
import * as React from "react";
|
|
11
3
|
import { View, Text, StyleSheet, Platform, StatusBar, TouchableOpacity, Dimensions, } from "react-native";
|
|
12
4
|
import Modal from "react-native-modal";
|
|
@@ -44,48 +36,70 @@ export default React.forwardRef((_, ref) => {
|
|
|
44
36
|
}
|
|
45
37
|
}
|
|
46
38
|
}, [state.visible]);
|
|
47
|
-
return (
|
|
39
|
+
return (<Modal hideModalContentWhileAnimating={true} //通过隐藏模态内容直到动画完成来增强性能
|
|
40
|
+
useNativeDriver={true} //定义动画是否应使用本机驱动程序
|
|
41
|
+
animationIn="slideInUp" animationOut="slideOutDown" onBackButtonPress={() => {
|
|
42
|
+
//按下Android后退按钮时调用
|
|
48
43
|
hide();
|
|
49
|
-
}
|
|
44
|
+
}} onBackdropPress={() => {
|
|
45
|
+
//按下背景时调用
|
|
50
46
|
hide();
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
47
|
+
}} isVisible={state.visible} style={{ margin: 0 }} deviceHeight={Dimensions.get("screen").height}>
|
|
48
|
+
<View style={styles.container}>
|
|
49
|
+
<View style={[styles.wrapper, state.wrapperStyle]}>
|
|
50
|
+
{state.title && <Text style={styles.titleText}>{state.title}</Text>}
|
|
51
|
+
<View style={[state.contentContainerStyle]}>
|
|
52
|
+
{(() => {
|
|
53
|
+
if (typeof state.content == "string")
|
|
54
|
+
return <Text style={styles.contentText}>{state.content}</Text>;
|
|
55
|
+
if (React.isValidElement(state.content))
|
|
56
|
+
return state.content;
|
|
57
|
+
return <View />;
|
|
58
|
+
})()}
|
|
59
|
+
</View>
|
|
60
|
+
{(state.cancelText || state.confirmText) && (<View style={styles.action}>
|
|
61
|
+
{state.cancelText && (<TouchableOpacity style={[
|
|
62
|
+
styles.cancel,
|
|
63
|
+
{ marginRight: state.confirmText ? px2dp(15) : 0 },
|
|
64
|
+
state.cancelContainerStyle,
|
|
65
|
+
]} activeOpacity={0.8} onPress={() => {
|
|
66
|
+
hide();
|
|
67
|
+
cancelCallbackRef.current && cancelCallbackRef.current();
|
|
68
|
+
cancelCallbackRef.current = undefined;
|
|
69
|
+
}}>
|
|
70
|
+
<Text style={[styles.cancelText, state.cancelTextStyle]}>
|
|
71
|
+
{state.cancelText}
|
|
72
|
+
</Text>
|
|
73
|
+
</TouchableOpacity>)}
|
|
74
|
+
|
|
75
|
+
{state.confirmText && (<TouchableOpacity style={[
|
|
76
|
+
styles.confirm,
|
|
77
|
+
{ marginLeft: state.cancelText ? px2dp(15) : 0 },
|
|
78
|
+
state.confirmContainerStyle,
|
|
79
|
+
]} activeOpacity={0.8} onPress={() => {
|
|
80
|
+
hide();
|
|
81
|
+
confirmCallbackRef.current && confirmCallbackRef.current();
|
|
82
|
+
confirmCallbackRef.current = undefined;
|
|
83
|
+
}}>
|
|
84
|
+
<Text style={[styles.confirmText, state.confirmTextStyle]}>
|
|
85
|
+
{state.confirmText}
|
|
86
|
+
</Text>
|
|
87
|
+
</TouchableOpacity>)}
|
|
88
|
+
</View>)}
|
|
89
|
+
</View>
|
|
90
|
+
</View>
|
|
91
|
+
</Modal>);
|
|
83
92
|
});
|
|
84
93
|
export const alertBottomViewRef = React.createRef();
|
|
85
94
|
export const showAlertBottomModal = (props) => {
|
|
86
95
|
var _a;
|
|
87
96
|
(_a = alertBottomViewRef.current) === null || _a === void 0 ? void 0 : _a.show(props);
|
|
88
97
|
};
|
|
98
|
+
// const sleep = (msec?: number) => {
|
|
99
|
+
// return new Promise(resolve => {
|
|
100
|
+
// setTimeout(resolve, msec || 350);
|
|
101
|
+
// });
|
|
102
|
+
// }
|
|
89
103
|
const styles = StyleSheet.create({
|
|
90
104
|
container: {
|
|
91
105
|
display: "flex",
|
|
@@ -108,6 +122,7 @@ const styles = StyleSheet.create({
|
|
|
108
122
|
maxWidth: deviceWidth - px2dp(30),
|
|
109
123
|
fontSize: px2sp(18),
|
|
110
124
|
marginBottom: px2dp(20),
|
|
125
|
+
// backgroundColor: 'red',
|
|
111
126
|
textAlign: "center",
|
|
112
127
|
fontWeight: "bold",
|
|
113
128
|
color: "#1A1A1A",
|
|
@@ -120,6 +135,7 @@ const styles = StyleSheet.create({
|
|
|
120
135
|
flexShrink: 1,
|
|
121
136
|
width: undefined,
|
|
122
137
|
fontSize: px2sp(15),
|
|
138
|
+
// backgroundColor: 'red',
|
|
123
139
|
color: "#1A1A1A",
|
|
124
140
|
textAlign: "center",
|
|
125
141
|
},
|
|
@@ -128,6 +144,7 @@ const styles = StyleSheet.create({
|
|
|
128
144
|
flexDirection: "row",
|
|
129
145
|
justifyContent: "space-between",
|
|
130
146
|
alignItems: "center",
|
|
147
|
+
// backgroundColor:"red"
|
|
131
148
|
},
|
|
132
149
|
cancel: {
|
|
133
150
|
width: "40%",
|
|
@@ -1,12 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
1
|
+
import { __awaiter } from "tslib";
|
|
10
2
|
import * as React from "react";
|
|
11
3
|
import { Dimensions, Platform, StatusBar, StyleSheet, Text, TouchableOpacity, View, } from "react-native";
|
|
12
4
|
import Modal from "react-native-modal";
|
|
@@ -40,22 +32,36 @@ export default React.forwardRef((_, ref) => {
|
|
|
40
32
|
}
|
|
41
33
|
}
|
|
42
34
|
}, [state.visible]);
|
|
43
|
-
return (
|
|
35
|
+
return (<Modal hideModalContentWhileAnimating={true} //通过隐藏模态内容直到动画完成来增强性能
|
|
36
|
+
useNativeDriver={true} //定义动画是否应使用本机驱动程序
|
|
37
|
+
animationIn="slideInUp" animationOut="slideOutDown" onBackButtonPress={() => {
|
|
38
|
+
//按下Android后退按钮时调用
|
|
39
|
+
hide();
|
|
40
|
+
}} onBackdropPress={() => {
|
|
41
|
+
//按下背景时调用
|
|
44
42
|
hide();
|
|
45
|
-
}
|
|
43
|
+
}} isVisible={state.visible} deviceHeight={Dimensions.get("screen").height} style={{ margin: 0 }}>
|
|
44
|
+
<View style={styles.container}>
|
|
45
|
+
<View style={[styles.wrapper]}>
|
|
46
|
+
<View style={styles.itemContainer}>
|
|
47
|
+
{(_a = state.actions) === null || _a === void 0 ? void 0 : _a.map((i, idx) => (<TouchableOpacity key={`sg-action-${idx}`} style={[styles.item]} activeOpacity={1} onPress={() => {
|
|
48
|
+
hide();
|
|
49
|
+
i.onClick && i.onClick();
|
|
50
|
+
}}>
|
|
51
|
+
<Text style={[styles.itemText, { color: i.color }]} numberOfLines={2}>
|
|
52
|
+
{i.text}
|
|
53
|
+
</Text>
|
|
54
|
+
</TouchableOpacity>))}
|
|
55
|
+
</View>
|
|
56
|
+
|
|
57
|
+
<TouchableOpacity style={[styles.cancel]} activeOpacity={1} onPress={() => {
|
|
46
58
|
hide();
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
} },
|
|
54
|
-
React.createElement(Text, { style: [styles.itemText, { color: i.color }], numberOfLines: 2 }, i.text))))),
|
|
55
|
-
React.createElement(TouchableOpacity, { style: [styles.cancel], activeOpacity: 1, onPress: () => {
|
|
56
|
-
hide();
|
|
57
|
-
} },
|
|
58
|
-
React.createElement(Text, { style: [styles.cancelText] }, "\u53D6\u6D88"))))));
|
|
59
|
+
}}>
|
|
60
|
+
<Text style={[styles.cancelText]}>取消</Text>
|
|
61
|
+
</TouchableOpacity>
|
|
62
|
+
</View>
|
|
63
|
+
</View>
|
|
64
|
+
</Modal>);
|
|
59
65
|
});
|
|
60
66
|
export const alertSheetViewRef = React.createRef();
|
|
61
67
|
export const showAlertSheetModal = (props) => {
|
|
@@ -73,6 +79,7 @@ const styles = StyleSheet.create({
|
|
|
73
79
|
flexGrow: 0,
|
|
74
80
|
flexShrink: 0,
|
|
75
81
|
width: "100%",
|
|
82
|
+
// backgroundColor: 'pink',
|
|
76
83
|
overflow: "hidden",
|
|
77
84
|
borderTopLeftRadius: px2dp(10),
|
|
78
85
|
borderTopRightRadius: px2dp(10),
|