Merge commit '7feed5ec34bfaa13d54acb71866e49cef42959cf' into feature/new-platform-post

components/AllTrainDiagramView.js

@@ -8,6 +8,8 @@ import {
   TextInput,
   Platform,
   Keyboard,
+  ScrollView,
+  Linking,
 } from "react-native";
 import { useAllTrainDiagram } from "../stateBox/useAllTrainDiagram";
 
@@ -16,12 +18,25 @@ import { getTrainType } from "../lib/getTrainType";
 import { SheetManager } from "react-native-actions-sheet";
 import { useNavigation } from "@react-navigation/native";
 import { BigButton } from "./atom/BigButton";
+import { Switch } from "react-native-elements";
 export default function AllTrainDiagramView() {
   const { navigate } = useNavigation();
   const { keyList } = useAllTrainDiagram();
   const [input, setInput] = useState(""); // 文字入力
   const [keyBoardVisible, setKeyBoardVisible] = useState(false);
-
+  const [useRegex, setUseRegex] = useState(false);
+  const regexTextStyle = {
+    color: "white",
+    fontSize: 20,
+    margin: 3,
+    padding: 3,
+  };
+  const regexTextButtonStyle = {
+    ...regexTextStyle,
+    borderWidth: 1,
+    borderColor: "white",
+    borderRadius: 3,
+  };
   useEffect(() => {
     const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
       setKeyBoardVisible(true);
@@ -59,7 +74,18 @@ export default function AllTrainDiagramView() {
     <View style={{ backgroundColor: "#0099CC", height: "100%" }}>
       <FlatList
         style={{ flex: 1 }}
-        data={keyList?.filter((d) => d.includes(input))}
+        data={keyList?.filter((d) => {
+          console.log(d);
+          if (useRegex) {
+            try {
+              const regex = new RegExp(input);
+              return regex.test(d);
+            } catch (e) {
+              return false;
+            }
+          }
+          return d.includes(input);
+        })}
         renderItem={({ item }) => <Item {...{ openTrainInfo, id: item }} />}
         keyExtractor={(item) => item}
         //initialNumToRender={100}
@@ -69,6 +95,38 @@ export default function AllTrainDiagramView() {
         keyboardVerticalOffset={80}
         enabled={Platform.OS === "ios"}
       >
+        <View style={{ height: 35, flexDirection: "row" }}>
+          <Switch
+            value={useRegex}
+            onValueChange={() => {
+              setUseRegex(!useRegex);
+            }}
+            color="red"
+            style={{ margin: 5 }}
+          />
+          <Text style={{ color: "white", fontSize: 20, margin: 5 }}>
+            正規表現を使用
+          </Text>
+        </View>
+        <ScrollView
+          style={{
+            height: 35,
+            flexDirection: "row",
+            backgroundColor: "#0099CC",
+            margin: 5,
+            display: useRegex ? "flex" : "none",
+          }}
+          horizontal={true}
+        >
+          <Text style={regexTextStyle}>正規表現のサンプル：</Text>
+          <Text style={regexTextButtonStyle} onPress={() => setInput("D")}>気動車を選択</Text>
+          <Text style={regexTextButtonStyle} onPress={()=>setInput("3\\d\\d\\dM")}>マリンライナーを選択</Text>
+          <Text style={regexTextButtonStyle} onPress={()=>setInput("[4,5]\\d\\d\\d[D,M]")}>ワンマン列車を選択</Text>
+          <Text style={regexTextButtonStyle} onPress={()=>setInput("^\\d?\\dM")}>しおかぜを選択</Text>
+          <Text style={regexTextButtonStyle} onPress={()=>setInput("^\\d?[0,2,4,6,8]D")}>下り南風を選択</Text>
+          <Text style={regexTextButtonStyle} onPress={()=>setInput("^([\\d])+\\1")}>数字が二桁揃っている列車を選択</Text>
+          <Text style={{...regexTextButtonStyle,backgroundColor:"green"}} onPress={()=>Linking.openURL("https://qiita.com/tossh/items/635aea9a529b9deb3038")}>参考資料(Qiita)</Text>
+        </ScrollView>
         <View
           style={{
             height: 35,