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.
 
 
 
 
 

181 lines
4.7 KiB

import {
View,
Text,
Pressable,
ActivityIndicator,
Platform,
} from "react-native";
import React, { useEffect, useCallback } from "react";
import { connect } from "react-redux";
import { transport } from "../../../redux/actions";
import separate from "../../../utils/separate";
//style
import tw from "tailwind-rn";
import Colors from "../../../constants/Colors";
import fontSize from "../../../constants/fontSize";
const ios = Platform.OS === "ios";
const TransportMethod = ({
list,
getList,
setTransport,
factorInfo,
userId,
loading,
mobile,
theme,
}) => {
useEffect(() => {
getList();
}, []);
const [selectedItem, setSelectedItem] = React.useState(null);
const light = React.useMemo(() => {
return theme === "light";
}, [theme]);
React.useEffect(() => {
if (!loading) {
setSelectedItem(null);
}
}, [loading]);
const Method = useCallback(
({ method, active }) => {
return (
<Pressable
style={[
tw(
`flex flex-row-reverse justify-between items-center w-full px-3 rounded-sm mt-3 ${
mobile ? "py-3" : "py-2"
}`
),
{
backgroundColor: light
? active
? Colors.theme1.greenCF + "15"
: Colors.theme1.grayE3 + "44"
: null,
borderWidth: 1.5,
borderColor: active
? Colors.theme1.greenCF
: Colors.theme1.grayE3,
},
]}
onPress={() => {
setSelectedItem(method.id);
!active
? setTransport(
{ factorId: factorInfo?.id, transportId: method?.id },
{ userId },
{}
)
: {};
}}
>
{loading && selectedItem === method.id ? (
<ActivityIndicator
size="small"
color={
factorInfo?.transportId === method?.id
? Colors.theme1.greenC8
: Colors.theme1.gray20
}
/>
) : (
<Text
style={{
fontFamily: "regular",
fontSize: mobile ? fontSize.tiny : fontSize.xl2,
color: active
? light
? Colors.theme1.gray20
: Colors.theme1.greenCF
: light
? Colors.theme1.gray20
: Colors.theme1.white,
}}
>
{method.name}
</Text>
)}
<View style={tw("flex flex-row-reverse items-center")}>
<View
style={[
tw(
`${
active ? "bg-green-600" : light ? "bg-gray-600" : "bg-white"
}`
),
{
height: fontSize.base + 10,
width: 1,
marginLeft: 10,
},
]}
></View>
<Text
style={{
fontFamily: "regular",
fontSize: mobile ? fontSize.base : fontSize.base,
color: active
? light
? Colors.theme1.gray20
: Colors.theme1.greenCF
: light
? Colors.theme1.gray20
: Colors.theme1.white,
}}
>
{separate(method.price) + " " + "تومان"}
</Text>
</View>
</Pressable>
);
},
[factorInfo, loading]
);
return (
<View style={tw(`w-full ${mobile ? "mt-4" : "mt-4"}`)}>
<Text
style={{
fontSize: mobile ? fontSize.base : fontSize.xl,
fontFamily: "bold",
color: light ? Colors.theme1.green79 : Colors.theme1.white,
textAlign: ios ? "right" : "auto",
}}
>
لطفا یک روش ارسال انتخاب کنید.
</Text>
<View style={tw("p-0 m-0 flex w-full")}>
{factorInfo?.transports?.map((method, index) => (
<Method
method={method}
active={factorInfo.transportId === method?.id}
key={index}
/>
))}
</View>
</View>
);
};
const mapStateToProps = (state) => ({
list: state.transport.list,
factorInfo: state.userFactor.info,
userId: state.user.status?.id,
loading: state.userFactor.loading,
mobile: state.publicApi.mobile,
theme: state.publicApi.theme,
});
const mapDispatchToProps = {
getList: transport.list,
setTransport: transport.set,
};
export default connect(mapStateToProps, mapDispatchToProps)(TransportMethod);