You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

149 lines
4.2 KiB

import {
View,
Text,
Pressable,
TouchableOpacity,
Appearance,
ActivityIndicator,
Platform
} from "react-native";
import React from "react";
import { connect } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import { userFactor } from "../../../redux/actions";
//style
import tw from "tailwind-rn";
import Colors from "../../../constants/Colors";
import fontSize from "../../../constants/fontSize";
const ios = Platform.OS === "ios";
const Address = ({ addresses, update, userId, userAddressId, loading, mobile }) => {
const colorScheme = Appearance.getColorScheme();
const navigation = useNavigation();
const Location = ({ address, active }) => {
return (
<Pressable
style={[
{
backgroundColor:
userAddressId === address?.id
? Colors.theme1[colorScheme].greenCF + "15"
: Colors.theme1[colorScheme].grayE3 + "44",
borderWidth: 2,
borderColor:
userAddressId === address?.id
? Colors.theme1[colorScheme].greenCF
: Colors.theme1[colorScheme].grayE3,
},
tw(
`flex flex-row-reverse items-center w-full px-3 rounded-md mt-2 ${mobile ? "py-2" : "py-4"}`
),
]}
onPress={() =>
userAddressId === address?.id
? {}
: update({ userAddressId: address.id, userId })
}
>
{loading && userAddressId !== address?.id ? (
<ActivityIndicator
size="small"
color={Colors.theme1[colorScheme].greenC8}
/>
) : (
<View
style={[
tw("w-5 h-5 rounded-full"),
{
backgroundColor: active
? Colors.theme1[colorScheme].greenCF
: "white",
borderWidth: userAddressId === address?.id ? 4 : 1,
borderColor:
userAddressId === address?.id
? Colors.theme1[colorScheme].black
: Colors.theme1[colorScheme].gray20 + "33",
},
]}
></View>
)}
<View style={tw(`flex flex-1 flex-col ${mobile ? "mr-2" : "mr-5"}`)}>
<Text
style={[
{
fontFamily: "bold",
fontSize: mobile ? fontSize.tiny : fontSize.lg,
lineHeight: 22,
textAlign: ios ? "right" : "auto",
},
]}
>
{address.address}
</Text>
</View>
</Pressable>
);
};
return (
<View style={tw("w-full mt-2")}>
<View style={tw("p-0 m-0 flex flex-col")}>
{addresses.map((address, index) => (
<Location
address={address}
key={index}
active={userAddressId === address?.id}
/>
))}
</View>
<TouchableOpacity
style={[
{
backgroundColor: Colors.theme1[colorScheme].grayE3 + "44",
borderColor: Colors.theme1[colorScheme].gray2077 + '55',
borderWidth: 1,
},
tw(
`flex flex-row-reverse justify-center py-3 rounded-md items-center w-full mt-4`
),
]}
onPress={() => navigation.push("CreateAddress")}
>
<Text
style={{
fontFamily: "regular",
fontSize: mobile ? fontSize.tiny : fontSize.lg,
color: Colors.theme1[colorScheme].gray2077,
}}
>
یک آدرس جدید اضافه کنید
</Text>
<Text
style={{
marginRight: 5,
fontSize: mobile ? fontSize.xl : fontSize.xl4,
color: Colors.theme1[colorScheme].gray20,
}}
>
+
</Text>
</TouchableOpacity>
</View>
);
};
const mapStateToProps = (state) => ({
userId: state.user.status?.id,
userAddressId: state.userFactor.info?.userAddressId,
loading: state.userFactor.loading,
mobile: state.publicApi.mobile
});
const mapDispatchToProps = {
update: userFactor.update,
};
export default connect(mapStateToProps, mapDispatchToProps)(Address);