122 lines
4.1 KiB
TypeScript
122 lines
4.1 KiB
TypeScript
import React from "react";
|
|
import {
|
|
TouchableOpacity,
|
|
Text,
|
|
View,
|
|
LayoutAnimation,
|
|
TextInput,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
} from "react-native";
|
|
import Ionicons from "react-native-vector-icons/Ionicons";
|
|
import { useWindowDimensions } from "react-native";
|
|
import lineColorList from "@/assets/originData/lineColorList";
|
|
import { lineList_LineWebID, stationIDPair } from "@/lib/getStationList";
|
|
export const SearchUnitBox = ({ isSearchMode, setisSearchMode, }) => {
|
|
const { height, width } = useWindowDimensions();
|
|
const [input, setInput] = React.useState("");
|
|
return (
|
|
<>
|
|
<TouchableOpacity
|
|
style={{
|
|
position: "absolute",
|
|
bottom: !!isSearchMode ? 0 : 60,
|
|
right: 0,
|
|
padding: !!isSearchMode ? 5 : 10,
|
|
margin: !!isSearchMode ? 0 : 10,
|
|
backgroundColor: "#0099CC",
|
|
borderRadius: !!isSearchMode ? 5 : 50,
|
|
width: !!isSearchMode ? width : 50,
|
|
zIndex: 1000,
|
|
}}
|
|
disabled={!!isSearchMode}
|
|
onPress={() => {
|
|
LayoutAnimation.configureNext({
|
|
duration: 100,
|
|
update: { type: "easeInEaseOut", springDamping: 0.6 },
|
|
});
|
|
setisSearchMode(true);
|
|
}}
|
|
>
|
|
{!isSearchMode && <Ionicons name="search" size={30} color="white" />}
|
|
{!!isSearchMode && (
|
|
<View style={{ backgroundColor: "#0099CC",flexDirection:"column",display:"flex",flex:1 }}>
|
|
<View
|
|
style={{
|
|
backgroundColor: "white",
|
|
borderRadius: 25,
|
|
height: 30,
|
|
paddingRight: 10,
|
|
paddingLeft: 10,
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<TextInput
|
|
placeholder="駅名を入力してフィルタリングします。"
|
|
onEndEditing={() => {}}
|
|
onChange={(ret) => setInput(ret.nativeEvent.text)}
|
|
value={input}
|
|
style={{ flex: 1 }}
|
|
/>
|
|
</View>
|
|
<View style={{ flexDirection: "row", alignItems: "center" }}>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
LayoutAnimation.configureNext({
|
|
duration: 100,
|
|
update: { type: "easeInEaseOut", springDamping: 0.6 },
|
|
});
|
|
setisSearchMode(false);
|
|
}}
|
|
>
|
|
<Ionicons
|
|
name="arrow-back"
|
|
size={20}
|
|
color="white"
|
|
style={{ marginRight: 10 }}
|
|
/>
|
|
</TouchableOpacity>
|
|
{Object.keys(lineList_LineWebID).map((d) => (
|
|
<TouchableOpacity
|
|
style={{
|
|
flex: 1,
|
|
backgroundColor:
|
|
lineColorList[stationIDPair[lineList_LineWebID[d]]],
|
|
padding: 5,
|
|
marginHorizontal: 2,
|
|
borderRadius: 10,
|
|
borderColor: "white",
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
alignItems: "center",
|
|
opacity:
|
|
isSearchMode == stationIDPair[lineList_LineWebID[d]]
|
|
? 1
|
|
: !isSearchMode
|
|
? 1
|
|
: 0.5,
|
|
zIndex: 10,
|
|
}}
|
|
onPress={() => {
|
|
const id = stationIDPair[lineList_LineWebID[d]];
|
|
const s = isSearchMode == id ? undefined : id;
|
|
if (!s) return;
|
|
setisSearchMode(s);
|
|
}}
|
|
key={stationIDPair[lineList_LineWebID[d]]}
|
|
>
|
|
<Text
|
|
style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
|
|
>
|
|
{stationIDPair[lineList_LineWebID[d]]}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
)}
|
|
</TouchableOpacity>
|
|
</>
|
|
);
|
|
};
|