1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
|
import { useThemeColors } from "@/hooks/useThemeColors";
import { useRef, useState } from "react";
import { Modal, StyleSheet, Image, Text, View, Pressable, Dimensions } from "react-native";
import { Colors } from "react-native/Libraries/NewAppScreen";
import { ThemedText } from "./ThemedText";
import { Card } from "./Card";
import { Row } from "./Row";
import { Radio } from "./Radio";
import { Shadows } from "@/constants/shadows";
type Props = {
value: "id_station" | "station_name",
onChange: (v: "id_station" | "station_name") => void
}
const options = [
{label: "number", value: "id_station"},
{label: "Name", value: "station_name"}
] as const;
export function SortButton({value, onChange}:Props){
const colors = useThemeColors()
const [isModalVisible, setModalVisibility] = useState(false)
const buttonRef = useRef<View>(null)
const [position, setPosition] = useState<null | {
top: number,
right: number
}>(null)
const onButtonPress = () => {
buttonRef.current?.measureInWindow((x, y, width, height) => {
setPosition({
top: y + height,
right: Dimensions.get("window").width - x - width
})
setModalVisibility(true);
})
}
const onClose = () => {
setModalVisibility(false);
}
return (
<>
<Pressable onPress={onButtonPress} >
<View
ref={buttonRef}
style={[styles.button, {backgroundColor: colors.grayWhite}]}>
<Image
source={
value == "id_station" ?
require("@/assets/images/number.png") :
require("@/assets/images/alpha.png")
}
width={16}
height={16}
/>
</View>
</Pressable>
<Modal
animationType="fade"
transparent
visible={isModalVisible}
onRequestClose={onClose}
>
<Pressable style={styles.backdrop} onPress={onClose} />
<View style={[styles.popup, {backgroundColor: colors.grayMedium, ...position}]}>
<ThemedText style={styles.title} variant="subtitle2" color="red">Sort by</ThemedText>
<Card style={styles.card}>
{options.map((o) => (
<Pressable key={o.value} onPress={() => onChange(o.value)}>
<Row gap={8} >
<Radio checked={o.value == value} />
<ThemedText>{o.label}</ThemedText>
</Row>
</Pressable>
))}
</Card>
</View>
</Modal>
</>
)
}
const styles = StyleSheet.create({
button:{
width: 32,
height: 32,
borderRadius: 25,
flex:0,
alignItems: 'center',
justifyContent: 'center'
},
backdrop: {
flex:1,
backgroundColor: "rgba(0,0,0,0.4)"
},
popup: {
position: 'absolute',
width: 113,
padding: 4,
paddingTop: 16,
gap: 16,
borderRadius: 12,
},
title: {
paddingLeft: 20,
},
card: {
paddingHorizontal: 16,
padding: 16,
gap: 16,
}
}) |
Partager