diff --git a/components/AllTrainDiagramView.js b/components/AllTrainDiagramView.js index 07169b7..22a9640 100644 --- a/components/AllTrainDiagramView.js +++ b/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() { 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 }) => } keyExtractor={(item) => item} //initialNumToRender={100} @@ -69,6 +95,38 @@ export default function AllTrainDiagramView() { keyboardVerticalOffset={80} enabled={Platform.OS === "ios"} > + + { + setUseRegex(!useRegex); + }} + color="red" + style={{ margin: 5 }} + /> + + 正規表現を使用 + + + + 正規表現のサンプル: + setInput("D")}>気動車を選択 + setInput("3\\d\\d\\dM")}>マリンライナーを選択 + setInput("[4,5]\\d\\d\\d[D,M]")}>ワンマン列車を選択 + setInput("^\\d?\\dM")}>しおかぜを選択 + setInput("^\\d?[0,2,4,6,8]D")}>下り南風を選択 + setInput("^([\\d])+\\1")}>数字が二桁揃っている列車を選択 + Linking.openURL("https://qiita.com/tossh/items/635aea9a529b9deb3038")}>参考資料(Qiita) +