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.
 
 
 
 
 

230 lines
6.3 KiB

import {
View,
Text,
Pressable,
TouchableOpacity,
ActivityIndicator,
Platform,
} from "react-native";
import React from "react";
import { connect } from "react-redux";
import {asyncAwesomeAlert} from "../../../utils/AsyncWrappers";
import { Ionicons, Entypo } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { userFactor, userAddress } 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,
deleteItem,
theme,
}) => {
const navigation = useNavigation();
const [selectedItem, setSelectedItem] = React.useState(null);
const light = React.useMemo(() => {
return theme === "light";
}, [theme]);
React.useEffect(() => {
if (!loading) {
setSelectedItem(null);
}
}, [loading]);
const Location = ({ address, active }) => {
return (
<Pressable
style={[
{
backgroundColor: active
? light
? Colors.theme1.greenCF + "15"
: Colors.theme1.dark
: light
? Colors.theme1.grayE3 + "44"
: Colors.theme1.dark,
borderWidth: 1.5,
borderColor: active ? Colors.theme1.greenCF : Colors.theme1.grayE3,
},
tw(
`flex flex-row-reverse items-center w-full px-3 rounded-sm mt-2 ${
mobile ? "py-3.5" : "py-4"
}`
),
]}
onPress={() => {
setSelectedItem(address?.id);
active ? {} : update({ userAddressId: address?.id, userId });
}}
>
{selectedItem === address?.id && loading ? (
<ActivityIndicator size="small" color={Colors.theme1.greenC8} />
) : active ? (
<Entypo name="check" size={20} color={Colors.theme1.greenCF} />
) : (
<Entypo
name="circle"
size={20}
color={
theme === "light" ? Colors.theme1.grayE3 : Colors.theme1.white
}
/>
)}
<View style={tw(`flex flex-1 ${mobile ? "mr-2" : "mr-5"}`)}>
<Text
style={[
{
fontFamily: "regular",
fontSize: mobile ? fontSize.tiny : fontSize.base,
lineHeight: 22,
textAlign: ios ? "right" : "auto",
color: active
? light
? Colors.theme1.gray20
: Colors.theme1.greenCF
: light
? Colors.theme1.gray20
: Colors.theme1.white,
},
]}
>
{address?.address}
</Text>
</View>
<View style={tw("flex flex-row-reverse h-full")}>
<Pressable
style={tw("ml-3 h-full")}
onPress={() =>
navigation.navigate("CreateAddress", {
type: "editAddress",
form: address,
})
}
>
<Ionicons
name="ios-pencil-sharp"
size={16}
color={
theme === "light"
? "#52796F"
: active
? Colors.theme1.greenCF
: Colors.theme1.white
}
/>
</Pressable>
<Pressable
onPress={() =>
asyncAwesomeAlert("", "آدرس مورد نظر حذف شود؟", {
showCancelButton: true,
confirmText: "بله",
cancelText: "لغو",
onConfirm: () => deleteItem({ id: address?.id }),
})
}
style={tw('h-full')}
>
<Ionicons
name="trash-bin"
size={16}
color={
theme === "light"
? "#52796F"
: active
? Colors.theme1.greenCF
: Colors.theme1.white
}
/>
</Pressable>
</View>
</Pressable>
);
};
return (
<View style={tw("w-full mt-2")}>
{addresses?.length ? (
<Text
style={{
fontSize: mobile ? fontSize.base : fontSize.base,
fontFamily: "bold",
color: light ? Colors.theme1.green79 : Colors.theme1.white,
textAlign: ios ? "right" : "auto",
}}
>
لطفا آدرس مورد نظر را انتخاب کنید.
</Text>
) : null}
<View style={tw("p-0 mt-2 flex")}>
{addresses?.map((address, index) => (
<Location
address={address}
key={index}
active={userAddressId === address?.id}
/>
))}
</View>
<TouchableOpacity
style={[
{
backgroundColor: light ? Colors.theme1.grayE3 + "44" : null,
borderColor: light
? Colors.theme1.gray2077 + "55"
: Colors.theme1.grayE3,
borderWidth: 1.5,
},
tw(
`flex flex-row-reverse justify-center py-3 rounded-sm items-center w-full mt-4`
),
]}
onPress={() => navigation.push("CreateAddress")}
>
<Text
style={{
fontFamily: "regular",
fontSize: mobile ? fontSize.tiny : fontSize.base,
color: light ? Colors.theme1.gray2077 : Colors.theme1.grayE3,
}}
>
یک آدرس جدید اضافه کنید
</Text>
<Text
style={{
marginRight: 5,
fontSize: mobile ? fontSize.xl : fontSize.xl4,
color: light ? Colors.theme1.gray2077 : Colors.theme1.grayE3,
}}
>
+
</Text>
</TouchableOpacity>
</View>
);
};
const mapStateToProps = (state) => ({
userId: state.user.status?.id,
userAddressId: state.userFactor.info?.userAddressId,
loading: state.userFactor.loading,
mobile: state.publicApi.mobile,
theme: state.publicApi.theme,
});
const mapDispatchToProps = {
update: userFactor.update,
deleteItem: userAddress.update
};
export default connect(mapStateToProps, mapDispatchToProps)(Address);