Skip to content

Commit 7564b83

Browse files
xianshengluxianshenglu
committed
refactor: separate functions and components
1 parent 411e602 commit 7564b83

20 files changed

Lines changed: 649 additions & 622 deletions

File tree

‎apis/index.ts‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { getRandomItems } from "./../utils/index";
2-
import { CfIpResponse } from "../components/TestPage";
1+
import { getRandomItems } from "@/utils/index";
32
import axios from "axios";
43
import { from, mergeMap } from "rxjs";
5-
import { CfIpListV4 } from "../constants/CfIpListV4";
4+
import { CfIpListV4 } from "@/constants/CfIpListV4";
65
import urlParse from "url-parse";
76
import { round } from "lodash-es";
7+
import { CfIpResponse } from "@/screens/TestRunScreen/model";
88
const getTargetUrlConfig = (ip: string, testUrl: string) => {
99
const oldUrl = urlParse(testUrl, true);
1010
const newUrl = urlParse(testUrl, true);
@@ -63,7 +63,6 @@ const getCfNodeResponseTestTime = async (ip: string, testUrl: string) => {
6363
const result: CfIpResponse = {
6464
ip,
6565
meanRespond: 0,
66-
hasError: false,
6766
responseTestStatus: "PENDING",
6867
};
6968
try {
@@ -74,7 +73,6 @@ const getCfNodeResponseTestTime = async (ip: string, testUrl: string) => {
7473
} catch (error) {
7574
console.log(error, "response error");
7675

77-
result.hasError = true;
7876
result.responseTestStatus = "ERROR";
7977
}
8078
return result;
@@ -84,7 +82,6 @@ const getCfNodeDownloadTestTime = async (ip: string, testUrl: string) => {
8482
const result: CfIpResponse = {
8583
ip,
8684
meanDownloadSpeed: 0,
87-
hasError: false,
8885
speedTestStatus: "PENDING",
8986
};
9087
try {
@@ -97,7 +94,6 @@ const getCfNodeDownloadTestTime = async (ip: string, testUrl: string) => {
9794
result.meanDownloadSpeed = round(fileSize / time, 2);
9895
} catch (error) {
9996
console.log("download fail", error);
100-
result.hasError = true;
10197
result.speedTestStatus = "ERROR";
10298
}
10399
return result;
@@ -127,4 +123,4 @@ export const getCfNodesDownloadTestTime = (
127123
export const getRandomCfIpList = (totalCount: number) => {
128124
const ipList = getRandomItems(CfIpListV4, totalCount);
129125
return ipList;
130-
};
126+
};

‎babel.config.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
1-
module.exports = function(api) {
1+
module.exports = function (api) {
22
api.cache(true);
33
return {
4-
presets: ['babel-preset-expo']
4+
presets: ["babel-preset-expo"],
5+
plugins: [
6+
[
7+
require.resolve("babel-plugin-module-resolver"),
8+
{
9+
alias: {
10+
"@": "./",
11+
},
12+
root: ["./"],
13+
},
14+
],
15+
],
516
};
617
};

‎components/Table/TableHeader/index.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { SortType } from "@/typings";
2+
import { FontAwesome } from "@expo/vector-icons";
3+
import { Pressable, StyleSheet } from "react-native";
4+
import { Text, View } from "@/components/Themed";
5+
import { tableSharedStyles } from "..";
6+
7+
export type TableHeaderColumn<Row = any, Column = any> = {
8+
id: string;
9+
label: string;
10+
width: number;
11+
sort: `${SortType}`;
12+
formatter?: (row: Row, column: Column, index: number) => any;
13+
};
14+
export function TableHeader(props: {
15+
cols: TableHeaderColumn[];
16+
onSort: (
17+
id: TableHeaderColumn["id"],
18+
sortType: TableHeaderColumn["sort"]
19+
) => void;
20+
}) {
21+
const { cols, onSort } = props;
22+
const sortIconNameMap: Record<
23+
TableHeaderColumn["sort"],
24+
"sort-asc" | "sort-desc" | "info"
25+
> = {
26+
ascending: "sort-asc",
27+
descending: "sort-desc",
28+
default: "info",
29+
};
30+
const nextSortTypeMap: Record<
31+
TableHeaderColumn["sort"],
32+
TableHeaderColumn["sort"]
33+
> = {
34+
default: "ascending",
35+
ascending: "descending",
36+
descending: "default",
37+
};
38+
39+
return (
40+
<View style={tableSharedStyles.tableHeader}>
41+
{cols.map((column) => {
42+
return (
43+
<Pressable
44+
onPress={() => onSort(column.id, nextSortTypeMap[column.sort])}
45+
key={column.id}
46+
style={{
47+
flex: column.width,
48+
flexBasis: column.width,
49+
...styles.tableHeaderCell,
50+
}}
51+
>
52+
<Text style={styles.tableHeaderCellText}> {column.label}</Text>
53+
<FontAwesome
54+
name={sortIconNameMap[column.sort]}
55+
size={12}
56+
style={{ marginLeft: 5 }}
57+
/>
58+
</Pressable>
59+
);
60+
})}
61+
</View>
62+
);
63+
}
64+
export const styles = StyleSheet.create({
65+
tableHeaderCell: {
66+
flexDirection: "row",
67+
borderLeftWidth: 0.5,
68+
borderTopWidth: 0.5,
69+
paddingHorizontal: 3,
70+
paddingVertical: 3,
71+
alignSelf: "stretch",
72+
alignItems: "center",
73+
justifyContent: "center",
74+
backgroundColor: "#e6f6fa",
75+
},
76+
tableHeaderCellText: {
77+
lineHeight: 18,
78+
textAlign: "center",
79+
},
80+
});

‎components/Table/TableRows/index.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { StyleSheet, VirtualizedList } from "react-native";
2+
import { SafeAreaView } from "react-native-safe-area-context";
3+
import { TableHeaderColumn } from "../TableHeader";
4+
import { Text, View } from "@/components/Themed";
5+
import { tableSharedStyles } from "..";
6+
7+
function TableRow<Row, Column extends TableHeaderColumn>(props: {
8+
row: Row;
9+
columns: (Column extends TableHeaderColumn ? Column : unknown)[];
10+
}) {
11+
const { row, columns } = props;
12+
13+
return (
14+
<View
15+
style={{
16+
...tableSharedStyles.tableHeader,
17+
justifyContent: "center",
18+
}}
19+
>
20+
{columns.map((column, index) => {
21+
const rowText = column.formatter
22+
? column.formatter(row, column, index)
23+
: row[column.id as keyof Row];
24+
return (
25+
<View
26+
key={column.id}
27+
style={{
28+
flex: columns[index].width,
29+
flexBasis: columns[index].width,
30+
...styles.tableCell,
31+
}}
32+
>
33+
<Text>{rowText}</Text>
34+
</View>
35+
);
36+
})}
37+
</View>
38+
);
39+
}
40+
export function TableRows<Row, Column>(props: {
41+
rows: Row[];
42+
columns: (Column extends TableHeaderColumn ? Column : unknown)[];
43+
rowKeyName: keyof Row;
44+
}) {
45+
const { rows, columns, rowKeyName } = props;
46+
return (
47+
<SafeAreaView
48+
// https://github.com/th3rdwave/react-native-safe-area-context/issues/167#issuecomment-883604754
49+
edges={["bottom", "left", "right"]}
50+
style={{
51+
flex: 1,
52+
flexDirection: "column",
53+
alignSelf: "stretch",
54+
}}
55+
>
56+
<VirtualizedList
57+
style={{}}
58+
data={rows}
59+
initialNumToRender={20}
60+
renderItem={({ item }: { item: Row }) => (
61+
<TableRow row={item} columns={columns} />
62+
)}
63+
keyExtractor={(item: Row) => item[rowKeyName] as any}
64+
getItemCount={() => rows.length}
65+
getItem={(data, index) => rows[index]}
66+
/>
67+
</SafeAreaView>
68+
);
69+
}
70+
const styles = StyleSheet.create({
71+
tableCell: {
72+
paddingHorizontal: 3,
73+
paddingVertical: 10,
74+
flexDirection: "row",
75+
justifyContent: "center",
76+
borderLeftWidth: 0.5,
77+
borderBottomWidth: 0.5,
78+
},
79+
});

‎components/Table/index.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { StyleSheet } from "react-native";
2+
export const tableSharedStyles = StyleSheet.create({
3+
tableHeader: {
4+
flex: 0,
5+
alignSelf: "stretch",
6+
flexDirection: "row",
7+
alignItems: "center",
8+
borderRightWidth: 0.5,
9+
borderBottomWidth: 0.5,
10+
},
11+
});

0 commit comments

Comments
 (0)
⚡