Reza_ashrafi
/
RnDanovinExpo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza fixed compo colors before Video

Browse Source
master
Reza_ashrafi 3 years ago
parent 03cb34fc08
commit 8d7e687d73
3 changed files with 58 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/screens/ShoppingCart/components/Code.js
  2. 27
      src/screens/ShoppingCart/components/Product.js
  3. 65
      src/screens/ShoppingCart/index.js

12
src/screens/ShoppingCart/components/Code.js
Unescape View File

@ -4,9 +4,7 @@ import {
Text, Text,
Pressable, Pressable,
TextInput, TextInput,
Dimensions,
KeyboardAvoidingView, KeyboardAvoidingView,
Appearance,
} from "react-native"; } from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { userFactor } from "../../../redux/actions"; import { userFactor } from "../../../redux/actions";
@ -16,8 +14,7 @@ import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors"; import Colors from "../../../constants/Colors";
import tw from "tailwind-rn"; import tw from "tailwind-rn";
function Code({ codeId, setCodeId, userId, factorId }) { function Code({ codeId, setCodeId, userId, factorId, theme }) {
const colorScheme = Appearance.getColorScheme();
const [value, setValue] = React.useState(codeId || ""); const [value, setValue] = React.useState(codeId || "");
const setOff = () => { const setOff = () => {
@ -32,7 +29,7 @@ function Code({ codeId, setCodeId, userId, factorId }) {
<View <View
style={[ style={[
tw("flex w-full flex-row-reverse rounded-sm mt-3"), tw("flex w-full flex-row-reverse rounded-sm mt-3"),
{ borderWidth: 1.5, borderColor: Colors.theme1[colorScheme].greenCF }, { borderWidth: 1.5, borderColor: Colors.theme1[theme].greenCF },
]} ]}
> >
<TextInput <TextInput
@ -42,14 +39,14 @@ function Code({ codeId, setCodeId, userId, factorId }) {
{ fontSize: fontSize.tiny, fontFamily: "regular" }, { fontSize: fontSize.tiny, fontFamily: "regular" },
]} ]}
placeholder={"کد تخفیف دارید ؟"} placeholder={"کد تخفیف دارید ؟"}
placeholderTextColor={Colors.theme1[colorScheme].gray20 + 'aa'} placeholderTextColor={Colors.theme1[theme].gray20 + 'aa'}
/> />
<Pressable <Pressable
onPress={() => setOff()} onPress={() => setOff()}
style={[ style={[
tw("py-3 px-5"), tw("py-3 px-5"),
{ {
backgroundColor: Colors.theme1[colorScheme].greenCF, backgroundColor: Colors.theme1[theme].greenCF,
borderTopLeftRadius: 1, borderTopLeftRadius: 1,
borderBottomLeftRadius: 1, borderBottomLeftRadius: 1,
}, },
@ -73,6 +70,7 @@ const mapStateToProps = (state) => ({
codeId: state.userFactor.info?.codeId, codeId: state.userFactor.info?.codeId,
userId: state.user.status?.id, userId: state.user.status?.id,
factorId: state.userFactor.info?.id, factorId: state.userFactor.info?.id,
theme: state.publicApi.theme
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

27
src/screens/ShoppingCart/components/Product.js
Unescape View File

@ -5,7 +5,6 @@ import {
Image, Image,
Dimensions, Dimensions,
Pressable, Pressable,
Appearance,
ActivityIndicator, ActivityIndicator,
Platform, Platform,
} from "react-native"; } from "react-native";
@ -22,8 +21,7 @@ import tw from "tailwind-rn";
const width = Dimensions.get("window").width; const width = Dimensions.get("window").width;
const ios = Platform.OS === "ios"; const ios = Platform.OS === "ios";
function Product({ product, grades, pushToCart, loading, mobile }) { function Product({ product, grades, pushToCart, loading, mobile, theme }) {
const colorScheme = Appearance.getColorScheme();
return ( return (
<View <View
style={[ style={[
@ -32,7 +30,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
), ),
{ {
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: Colors.theme1[colorScheme].grayE3, borderColor: Colors.theme1[theme].grayE3,
direction: "rtl", direction: "rtl",
}, },
]} ]}
@ -56,7 +54,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
<Text <Text
style={{ style={{
fontSize: mobile ? fontSize.lg : fontSize.xl4, fontSize: mobile ? fontSize.lg : fontSize.xl4,
color: Colors.theme1[colorScheme].green79, color: Colors.theme1[theme].green79,
marginBottom: 5, marginBottom: 5,
fontFamily: "bold", fontFamily: "bold",
}} }}
@ -66,7 +64,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
<Text <Text
style={{ style={{
fontSize: mobile ? fontSize.sm : fontSize.lg, fontSize: mobile ? fontSize.sm : fontSize.lg,
color: Colors.theme1[colorScheme].gray2077, color: Colors.theme1[theme].gray2077,
marginBottom: 3, marginBottom: 3,
fontFamily: "regular", fontFamily: "regular",
}} }}
@ -76,7 +74,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
<Text <Text
style={{ style={{
fontSize: mobile ? fontSize.sm : fontSize.lg, fontSize: mobile ? fontSize.sm : fontSize.lg,
color: Colors.theme1[colorScheme].gray2077, color: Colors.theme1[theme].gray2077,
fontFamily: "regular", fontFamily: "regular",
}} }}
> >
@ -118,7 +116,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
<AntDesign <AntDesign
name="close" name="close"
size={mobile ? 20 : 30} size={mobile ? 20 : 30}
color={Colors.theme1[colorScheme].redFF1} color={Colors.theme1[theme].redFF1}
onPress={() => onPress={() =>
pushToCart( pushToCart(
{ {
@ -152,14 +150,14 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
}` }`
), ),
{ {
borderColor: Colors.theme1[colorScheme].greenCF, borderColor: Colors.theme1[theme].greenCF,
}, },
]} ]}
> >
<Text <Text
style={{ style={{
fontSize: mobile ? fontSize.xl : fontSize.xl4, fontSize: mobile ? fontSize.xl : fontSize.xl4,
color: Colors.theme1[colorScheme].greenCF, color: Colors.theme1[theme].greenCF,
fontFamily: "light", fontFamily: "light",
}} }}
> >
@ -170,7 +168,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
<ActivityIndicator <ActivityIndicator
style={tw("mx-2")} style={tw("mx-2")}
size="small" size="small"
color={Colors.theme1[colorScheme].greenBA} color={Colors.theme1[theme].greenBA}
/> />
) : ( ) : (
<Text <Text
@ -178,7 +176,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
tw("mx-2.5"), tw("mx-2.5"),
{ {
fontSize: fontSize.xl6, fontSize: fontSize.xl6,
color: Colors.theme1[colorScheme].greenBA, color: Colors.theme1[theme].greenBA,
fontFamily: "bold", fontFamily: "bold",
}, },
]} ]}
@ -202,14 +200,14 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
}` }`
), ),
{ {
borderColor: Colors.theme1[colorScheme].greenCF, borderColor: Colors.theme1[theme].greenCF,
}, },
]} ]}
> >
<Text <Text
style={{ style={{
fontSize: mobile ? fontSize.xl : fontSize.xl4, fontSize: mobile ? fontSize.xl : fontSize.xl4,
color: Colors.theme1[colorScheme].greenCF, color: Colors.theme1[theme].greenCF,
fontFamily: "bold", fontFamily: "bold",
}} }}
> >
@ -247,6 +245,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
grades: state.publicApi.grades, grades: state.publicApi.grades,
mobile: state.publicApi.mobile, mobile: state.publicApi.mobile,
theme: state.publicApi.theme
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

65
src/screens/ShoppingCart/index.js
Unescape View File

@ -17,7 +17,6 @@ import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import { asyncAwesomeAlert } from "../../utils/AsyncWrappers"; import { asyncAwesomeAlert } from "../../utils/AsyncWrappers";
import separate from "../../utils/separate"; import separate from "../../utils/separate";
import * as Linking from "expo-linking";
//components //components
import Product from "./components/Product"; import Product from "./components/Product";
@ -32,10 +31,9 @@ import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors"; import Colors from "../../constants/Colors";
import tw from "tailwind-rn"; import tw from "tailwind-rn";
const { width, height } = Dimensions.get("window"); const { height } = Dimensions.get("window");
const PriceStatus = ({ name, value, type }) => { const PriceStatus = ({ name, value, type, theme }) => {
const colorScheme = Appearance.getColorScheme();
return ( return (
<View style={tw("w-full flex flex-row-reverse justify-between py-2")}> <View style={tw("w-full flex flex-row-reverse justify-between py-2")}>
<Text <Text
@ -43,7 +41,7 @@ const PriceStatus = ({ name, value, type }) => {
tw(""), tw(""),
{ {
fontSize: fontSize.tiny, fontSize: fontSize.tiny,
color: Colors.theme1[colorScheme].gray20, color: Colors.theme1[theme].gray20,
fontFamily: "bold", fontFamily: "bold",
}, },
]} ]}
@ -56,8 +54,8 @@ const PriceStatus = ({ name, value, type }) => {
{ {
color: color:
type === "error" type === "error"
? Colors.theme1[colorScheme].redFF1 ? Colors.theme1[theme].redFF1
: Colors.theme1[colorScheme].green79, : Colors.theme1[theme].green79,
fontSize: fontSize.xl, fontSize: fontSize.xl,
fontFamily: "bold", fontFamily: "bold",
}, },
@ -70,8 +68,8 @@ const PriceStatus = ({ name, value, type }) => {
{ {
color: color:
type === "error" type === "error"
? Colors.theme1[colorScheme].redFF1 ? Colors.theme1[theme].redFF1
: Colors.theme1[colorScheme].green79, : Colors.theme1[theme].green79,
fontSize: fontSize.sm, fontSize: fontSize.sm,
fontFamily: "regular", fontFamily: "regular",
marginRight: 4, marginRight: 4,
@ -93,15 +91,22 @@ function ShoppingCart({
getFactorInfo, getFactorInfo,
loading, loading,
payFactor, payFactor,
theme
}) { }) {
const navigation = useNavigation(); const navigation = useNavigation();
const colorScheme = Appearance.getColorScheme();
const [position, setPosition] = useState("100%"); const [position, setPosition] = useState("100%");
const isEmpty = list.filter((product) => product.condition < 2).length === 0; const isEmpty = React.useMemo(() => {
const hasPhysical = return list.filter((product) => product.condition < 2).length === 0;
list.filter((product) => product.condition < 2 && product.productType === 2) }, [list]);
.length !== 0;
const hasPhysical = React.useMemo(() => {
return (
list.filter(
(product) => product.condition < 2 && product.productType === 2
).length !== 0
);
}, [list]);
useEffect(() => { useEffect(() => {
if (list.length === 0) { if (list.length === 0) {
@ -157,20 +162,29 @@ function ShoppingCart({
> >
<PriceStatus <PriceStatus
name="مبلغ سبد خرید" name="مبلغ سبد خرید"
value={isEmpty ? 0 : separate(Math.round(factorInfo?.sumPrice || 0))} value={
isEmpty ? 0 : separate(Math.round(factorInfo?.sumPrice || 0))
}
type="normal" type="normal"
theme={theme}
/> />
<PriceStatus <PriceStatus
name="میزان تخفیف" name="میزان تخفیف"
value={isEmpty ? 0 : separate(Math.round(factorInfo?.offPrice || 0))} value={
isEmpty ? 0 : separate(Math.round(factorInfo?.offPrice || 0))
}
type="error" type="error"
theme={theme}
/> />
<PriceStatus <PriceStatus
name="مالیات بر ارزش افزوده" name="مالیات بر ارزش افزوده"
value={ value={
isEmpty ? 0 : separate(Math.round((factorInfo?.sumPrice || 0) * 0.009)) isEmpty
? 0
: separate(Math.round((factorInfo?.sumPrice || 0) * 0.009))
} }
type="error" type="error"
theme={theme}
/> />
</View> </View>
<View <View
@ -181,7 +195,7 @@ function ShoppingCart({
<Text <Text
style={[ style={[
{ {
color: Colors.theme1[colorScheme].green79, color: Colors.theme1[theme].green79,
fontSize: fontSize.base, fontSize: fontSize.base,
fontFamily: "bold", fontFamily: "bold",
}, },
@ -193,18 +207,18 @@ function ShoppingCart({
<Text <Text
style={[ style={[
{ {
color: Colors.theme1[colorScheme].green79, color: Colors.theme1[theme].green79,
fontSize: fontSize.xl, fontSize: fontSize.xl,
fontFamily: "bold", fontFamily: "bold",
}, },
]} ]}
> >
{isEmpty ? 0 : separate(factorInfo?.payPrice || '')} {isEmpty ? 0 : separate(factorInfo?.payPrice || "")}
</Text> </Text>
<Text <Text
style={[ style={[
{ {
color: Colors.theme1[colorScheme].green79, color: Colors.theme1[theme].green79,
fontSize: fontSize.sm, fontSize: fontSize.sm,
fontFamily: "regular", fontFamily: "regular",
marginRight: 4, marginRight: 4,
@ -221,14 +235,14 @@ function ShoppingCart({
tw( tw(
"w-full rounded-md flex flex-row justify-center items-center py-3 px-3 my-5" "w-full rounded-md flex flex-row justify-center items-center py-3 px-3 my-5"
), ),
{ backgroundColor: Colors.theme1[colorScheme].greenC8 + "1a" }, { backgroundColor: Colors.theme1[theme].greenC8 + "1a" },
]} ]}
> >
<Text <Text
style={[ style={[
tw("mr-1"), tw("mr-1"),
{ {
color: Colors.theme1[colorScheme].green79, color: Colors.theme1[theme].green79,
fontSize: fontSize.sm, fontSize: fontSize.sm,
fontFamily: "regular", fontFamily: "regular",
}, },
@ -239,13 +253,13 @@ function ShoppingCart({
<Ionicons <Ionicons
name="alert-circle-outline" name="alert-circle-outline"
size={20} size={20}
color={Colors.theme1[colorScheme].greenC8} color={Colors.theme1[theme].greenC8}
/> />
</Pressable> </Pressable>
<CustomPressable <CustomPressable
title={hasPhysical ? "ادامه فرایند خرید" : "پرداخت"} title={hasPhysical ? "ادامه فرایند خرید" : "پرداخت"}
backgroundColor={Colors.theme1[colorScheme].greenCF} backgroundColor={Colors.theme1[theme].greenCF}
color={"white"} color={"white"}
border={{ color: "#196EC0", width: 0 }} border={{ color: "#196EC0", width: 0 }}
width={"100%"} width={"100%"}
@ -279,6 +293,7 @@ const mapStateToProps = (state) => ({
userId: state.user.status?.id, userId: state.user.status?.id,
hasPhysical: state.userProduct.hasPhysical, hasPhysical: state.userProduct.hasPhysical,
loading: state.userProduct.loading, loading: state.userProduct.loading,
theme: state.publicApi.theme
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

Write Preview
Loading…
Cancel
Save