feat: add support for customized Ipv4 list, close #17

Author: xianshenglu

apis/index.ts

@@ -1,3 +1,4 @@
+import { userSettingsStore } from '@/store/UserSettings';
 import { getInitialCfIpResponse } from "./../screens/TestRunScreen/utils/index";
 import { RequestStatus } from "@/typings/index";
 import { getCfIpV4List, getRandomItems } from "@/utils/index";
@@ -148,6 +149,6 @@ export const getCfNodesDownloadTestTime = (
   );
 };
 export const getRandomCfIpList = (totalCount: number) => {
-  const ipList = getRandomItems(getCfIpV4List(), totalCount);
+  const ipList = getRandomItems(getCfIpV4List(userSettingsStore.getCurIpv4ListText()), totalCount);
   return ipList;
 };

components/Themed.tsx

@@ -49,6 +49,6 @@ export function TextInput(props: TextInputProps) {
   const { style, lightColor, darkColor, ...otherProps } = props;
   const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
   const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
-
-  return <DefaultTextInput style={[{ backgroundColor,color }, style]} {...otherProps} />;
+  const borderColor = color;
+  return <DefaultTextInput style={[{ backgroundColor,color,borderColor }, style]} {...otherProps} />;
 }

lang/en-us.json

@@ -8,7 +8,10 @@
     "downloadSpeed": "Download Speed",
     "showAllData": "Show All Data",
     "showSortedTop": "Show Sorted Top",
-    "getPermFailed": "Get Permissions Failed"
+    "getPermFailed": "Get Permissions Failed",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "reset": "Reset"
   },
   "testRun": {
     "title": "Test Run",
@@ -32,7 +35,8 @@
   "testConfig": {
     "title": "Test Config",
     "clearHistoryStatistics": "Clear history statistics",
-    "saveAllDataToDevice": "Save all data to device"
+    "saveAllDataToDevice": "Save all data to device",
+    "customizeCfIpv4List": "Customize Cloudflare Ipv4 list"
   },
   "update": {
     "title": "Update available",

lang/zh-cn.json

@@ -8,7 +8,10 @@
     "downloadSpeed": "下载速度",
     "showAllData": "展示所有数据",
     "showSortedTop": "展示排序后的前",
-    "getPermFailed": "获取权限失败"
+    "getPermFailed": "获取权限失败",
+    "cancel": "取消",
+    "confirm": "确定",
+    "reset": "重置"
   },
   "testRun": {
     "title": "运行测试",
@@ -32,7 +35,8 @@
   "testConfig": {
     "title": "测试配置",
     "clearHistoryStatistics": "清除历史统计数据",
-    "saveAllDataToDevice": "保存数据到设备"
+    "saveAllDataToDevice": "保存数据到设备",
+    "customizeCfIpv4List": "自定义 Cloudflare Ipv4 列表"
   },
   "update": {
     "title": "发现新版本",

screens/TestConfigScreen/components/CfIpv4CustomizeDialog.tsx

@@ -0,0 +1,66 @@
+import { TextInput } from "@/components/Themed";
+import { AppI18n } from "@/localize";
+import { userSettingsStore } from "@/store/UserSettings";
+import * as React from "react";
+import { Button, Dialog, Portal } from "react-native-paper";
+import { SettingButton } from "./SettingButton";
+
+export function CfIpv4CustomizeDialog() {
+  const [visible, setVisible] = React.useState(false);
+  const [tempIpv4List, setTempIpv4List] = React.useState(
+    userSettingsStore.getCurIpv4ListText()
+  );
+
+  const showModal = () => setVisible(true);
+  const onDismiss = () => {
+    setVisible(false);
+    clearTempData();
+  };
+  const clearTempData = () =>
+    setTempIpv4List(() => userSettingsStore.getCurIpv4ListText());
+
+  const onReset = () => {
+    setTempIpv4List(() => userSettingsStore.getDefaultIpv4ListText());
+  };
+  const onConfirmChangeIpList = () => {
+    userSettingsStore.changeCfIpv4ListText(tempIpv4List);
+    onDismiss();
+  };
+  const onChangeIpList = (v: string) => {
+    setTempIpv4List(() => v);
+  };
+  const title = AppI18n.t("testConfig.customizeCfIpv4List");
+  return (
+    <React.Fragment>
+      <SettingButton onPress={showModal} label={title}></SettingButton>
+      <Portal>
+        <Dialog visible={visible} onDismiss={onDismiss} dismissable={false}>
+          <Dialog.Title>{title}</Dialog.Title>
+          <Dialog.Content>
+            <TextInput
+              onChangeText={onChangeIpList}
+              value={tempIpv4List}
+              multiline={true}
+              style={{ borderWidth: 1, paddingHorizontal: 8 }}
+            ></TextInput>
+          </Dialog.Content>
+          <Dialog.Actions>
+            <Button onPress={onReset} mode="contained">
+              {AppI18n.t("general.reset")}
+            </Button>
+            <Button
+              onPress={onDismiss}
+              mode="contained"
+              style={{ marginHorizontal: 16 }}
+            >
+              {AppI18n.t("general.cancel")}
+            </Button>
+            <Button onPress={onConfirmChangeIpList} mode="contained">
+              {AppI18n.t("general.confirm")}
+            </Button>
+          </Dialog.Actions>
+        </Dialog>
+      </Portal>
+    </React.Fragment>
+  );
+}

screens/TestConfigScreen/components/ConfigList.tsx

@@ -8,37 +8,13 @@ import { observer } from "mobx-react";
 import { testStatisticsStore } from "@/store/TestStatistics";
 import { AppI18n } from "@/localize";
 import { useTheme } from "@react-navigation/native";
+import { CfIpv4CustomizeDialog } from "./CfIpv4CustomizeDialog";
+import { SettingButton } from "./SettingButton";
 
 export const ConfigList = observer(() => (
   <InternalConfigList userSettings={{ ...userSettingsStore.userSetting }} />
 ));
-function SettingButton(props: { onPress: () => void; label: string }) {
-  const { onPress, label } = props;
-  const { colors } = useTheme();
 
-  return (
-    <View style={styles.item}>
-      <Button
-        mode="text"
-        uppercase={false}
-        style={{
-          width: "100%",
-        }}
-        labelStyle={{
-          color: colors.text,
-          fontFamily: "inherit",
-        }}
-        contentStyle={{
-          marginLeft: -16,
-          alignSelf: "flex-start",
-        }}
-        onPress={onPress}
-      >
-        {label}
-      </Button>
-    </View>
-  );
-}
 function InternalConfigList({ userSettings }: { userSettings: UserSetting }) {
   const { isSaveDataToDevice } = userSettings;
 
@@ -69,6 +45,7 @@ function InternalConfigList({ userSettings }: { userSettings: UserSetting }) {
           onPress={() => testStatisticsStore.clear()}
           label={AppI18n.t("testConfig.clearHistoryStatistics")}
         ></SettingButton>
+        <CfIpv4CustomizeDialog></CfIpv4CustomizeDialog>
       </View>
     </View>
   );

screens/TestConfigScreen/components/SettingButton.tsx

@@ -0,0 +1,41 @@
+import { View } from "@/components/Themed";
+import { useTheme } from "@react-navigation/native";
+import { Button } from "react-native-paper";
+import { StyleSheet } from "react-native";
+
+export function SettingButton(props: { onPress: () => void; label: string }) {
+  const { onPress, label } = props;
+  const { colors } = useTheme();
+
+  return (
+    <View style={styles.item}>
+      <Button
+        mode="text"
+        uppercase={false}
+        style={{
+          width: "100%",
+        }}
+        labelStyle={{
+          color: colors.text,
+          fontFamily: "inherit",
+        }}
+        contentStyle={{
+          marginLeft: -16,
+          alignSelf: "flex-start",
+        }}
+        onPress={onPress}
+      >
+        {label}
+      </Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  item: {
+    height: 40,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+});

store/UserSettings.ts

@@ -1,18 +1,25 @@
+import { CfIpV4Text } from "@/constants/CfIpListV4";
 import { action, makeObservable, observable, reaction } from "mobx";
 import { UserSettingsStorageSync } from "./UserSettingsStorageSync";
 export type UserSetting = {
   isSaveDataToDevice: boolean;
+  defaultCfIpv4Text: string;
+  customizedCfIpv4Text: string;
 };
 class UserSettings {
   private defaultUserSetting: UserSetting = {
     isSaveDataToDevice: false,
+    defaultCfIpv4Text: CfIpV4Text,
+    customizedCfIpv4Text: CfIpV4Text,
   } as const;
   readonly userSetting: UserSetting = { ...this.defaultUserSetting };
   private storageSync: UserSettingsStorageSync;
   constructor() {
     makeObservable(this, {
       userSetting: observable,
       changeUserSettings: action,
+      changeCfIpv4ListText: action,
+      resetCfIpv4ListText: action,
     });
     this.storageSync = new UserSettingsStorageSync(
       this.userSetting,
@@ -45,6 +52,18 @@ class UserSettings {
       }
     );
   }
+  public changeCfIpv4ListText(customizedCfIpv4Text: string) {
+    this.userSetting.customizedCfIpv4Text = customizedCfIpv4Text;
+  }
+  public resetCfIpv4ListText() {
+    this.userSetting.customizedCfIpv4Text = this.userSetting.defaultCfIpv4Text;
+  }
+  public getCurIpv4ListText() {
+    return this.userSetting.customizedCfIpv4Text;
+  }
+  public getDefaultIpv4ListText() {
+    return this.userSetting.defaultCfIpv4Text
+  }
 }
 
 const userSettingsStore = new UserSettings();

utils/index.ts

@@ -1,4 +1,3 @@
-import { CfIpV4Text } from "@/constants/CfIpListV4";
 import { Netmask } from "netmask";
 export const getRandomItems = <T extends unknown[]>(
   list: T,
@@ -12,7 +11,7 @@ export const getRandomItems = <T extends unknown[]>(
   return result as T;
 };
 
-export const getCfIpV4List = () => {
+export const getCfIpV4List = (CfIpV4Text: string) => {
   const resultList = CfIpV4Text.split("\n")
     .map((v) => v.trim())
     .filter((v) => v)