harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

メニューの路線別リストアップ機能を追加

Browse Source
This commit is contained in:
harukin-expo-dev-env
2025-07-07 11:48:46 +00:00
parent 6b39a3f723
commit 9478f2df8d
4 changed files with 128 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
components/Menu/RailScope/SearchUnitBox.tsx
View File

@@ -10,53 +10,90 @@ import {
} 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();
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: 200,
update: { type: "easeInEaseOut", springDamping: 0.6 },
});
setisSearchMode(true);
}}
>
{!isSearchMode && <Ionicons name="search" size={30} color="white" />}
{isSearchMode && (
<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" }}>
<Text
style={{ color: "white" }}
onPress={() => {
<View style={{ flexDirection: "row", alignItems: "center" }}>
<TouchableOpacity onPress={() => {
LayoutAnimation.configureNext({
duration: 200,
duration: 100,
update: { type: "easeInEaseOut", springDamping: 0.6 },
});
setisSearchMode(false);
}}
>
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</Text>
<View
}}>
<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
style={{
backgroundColor: "white",
borderRadius: 25,
height: 30,
paddingRight: 10,
paddingLeft: 10,
flex: 1,
}}
>
<TextInput
@@ -67,10 +104,11 @@ export const SearchUnitBox = ({ isSearchMode, setisSearchMode }) => {
//value={input}
style={{ flex: 1 }}
/>
</View> */}
</View>
</View>
)}
</TouchableOpacity>
)}
</TouchableOpacity>
</>
);
};