reza fixed compo colors before Video

3 years ago · 8d7e687d73
parent 03cb34fc08
commit 8d7e687d73
3 changed files with 58 additions and 46 deletions
--- a/src/screens/ShoppingCart/components/Code.js
+++ b/src/screens/ShoppingCart/components/Code.js
@ -4,9 +4,7 @@ import {
  Text,
  Pressable,
  TextInput,
-  Dimensions,
  KeyboardAvoidingView,
-  Appearance,
 } from "react-native";
 import { connect } from "react-redux";
 import { userFactor } from "../../../redux/actions";
@ -16,8 +14,7 @@ import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 import tw from "tailwind-rn";

-function Code({ codeId, setCodeId, userId, factorId }) {
-  const colorScheme = Appearance.getColorScheme();
+function Code({ codeId, setCodeId, userId, factorId, theme }) {
  const [value, setValue] = React.useState(codeId || "");

  const setOff = () => {
@ -32,7 +29,7 @@ function Code({ codeId, setCodeId, userId, factorId }) {
      <View
        style={[
          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
@ -42,14 +39,14 @@ function Code({ codeId, setCodeId, userId, factorId }) {
            { fontSize: fontSize.tiny, fontFamily: "regular" },
          ]}
          placeholder={"کد تخفیف دارید ؟"}
-          placeholderTextColor={Colors.theme1[colorScheme].gray20 + 'aa'}
+          placeholderTextColor={Colors.theme1[theme].gray20 + 'aa'}
        />
        <Pressable
          onPress={() => setOff()}
          style={[
            tw("py-3 px-5"),
            {
-              backgroundColor: Colors.theme1[colorScheme].greenCF,
+              backgroundColor: Colors.theme1[theme].greenCF,
              borderTopLeftRadius: 1,
              borderBottomLeftRadius: 1,
            },
@ -73,6 +70,7 @@ const mapStateToProps = (state) => ({
  codeId: state.userFactor.info?.codeId,
  userId: state.user.status?.id,
  factorId: state.userFactor.info?.id,
+  theme: state.publicApi.theme
 });

 const mapDispatchToProps = {
--- a/src/screens/ShoppingCart/components/Product.js
+++ b/src/screens/ShoppingCart/components/Product.js
@ -5,7 +5,6 @@ import {
  Image,
  Dimensions,
  Pressable,
-  Appearance,
  ActivityIndicator,
  Platform,
 } from "react-native";
@ -22,8 +21,7 @@ import tw from "tailwind-rn";
 const width = Dimensions.get("window").width;
 const ios = Platform.OS === "ios";

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

 const mapDispatchToProps = {
--- a/src/screens/ShoppingCart/index.js
+++ b/src/screens/ShoppingCart/index.js
@ -17,7 +17,6 @@ import { Ionicons } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import { asyncAwesomeAlert } from "../../utils/AsyncWrappers";
 import separate from "../../utils/separate";
-import * as Linking from "expo-linking";

 //components
 import Product from "./components/Product";
@ -32,10 +31,9 @@ import fontSize from "../../constants/fontSize";
 import Colors from "../../constants/Colors";
 import tw from "tailwind-rn";

-const { width, height } = Dimensions.get("window");
+const { height } = Dimensions.get("window");

-const PriceStatus = ({ name, value, type }) => {
-  const colorScheme = Appearance.getColorScheme();
+const PriceStatus = ({ name, value, type, theme }) => {
  return (
    <View style={tw("w-full flex flex-row-reverse justify-between py-2")}>
      <Text
@ -43,7 +41,7 @@ const PriceStatus = ({ name, value, type }) => {
          tw(""),
          {
            fontSize: fontSize.tiny,
-            color: Colors.theme1[colorScheme].gray20,
+            color: Colors.theme1[theme].gray20,
            fontFamily: "bold",
          },
        ]}
@ -56,8 +54,8 @@ const PriceStatus = ({ name, value, type }) => {
            {
              color:
                type === "error"
-                  ? Colors.theme1[colorScheme].redFF1
-                  : Colors.theme1[colorScheme].green79,
+                  ? Colors.theme1[theme].redFF1
+                  : Colors.theme1[theme].green79,
              fontSize: fontSize.xl,
              fontFamily: "bold",
            },
@ -70,8 +68,8 @@ const PriceStatus = ({ name, value, type }) => {
            {
              color:
                type === "error"
-                  ? Colors.theme1[colorScheme].redFF1
-                  : Colors.theme1[colorScheme].green79,
+                  ? Colors.theme1[theme].redFF1
+                  : Colors.theme1[theme].green79,
              fontSize: fontSize.sm,
              fontFamily: "regular",
              marginRight: 4,
@ -93,15 +91,22 @@ function ShoppingCart({
  getFactorInfo,
  loading,
  payFactor,
+  theme
 }) {
  const navigation = useNavigation();
-  const colorScheme = Appearance.getColorScheme();
  const [position, setPosition] = useState("100%");

-  const isEmpty = list.filter((product) => product.condition < 2).length === 0;
-  const hasPhysical =
-    list.filter((product) => product.condition < 2 && product.productType === 2)
-      .length !== 0;
+  const isEmpty = React.useMemo(() => {
+    return list.filter((product) => product.condition < 2).length === 0;
+  }, [list]);
+
+  const hasPhysical = React.useMemo(() => {
+    return (
+      list.filter(
+        (product) => product.condition < 2 && product.productType === 2
+      ).length !== 0
+    );
+  }, [list]);

  useEffect(() => {
    if (list.length === 0) {
@ -157,20 +162,29 @@ function ShoppingCart({
          >
            <PriceStatus
              name="مبلغ سبد خرید"
-              value={isEmpty ? 0 : separate(Math.round(factorInfo?.sumPrice || 0))}
+              value={
+                isEmpty ? 0 : separate(Math.round(factorInfo?.sumPrice || 0))
+              }
              type="normal"
+              theme={theme}
            />
            <PriceStatus
              name="میزان تخفیف"
-              value={isEmpty ? 0 : separate(Math.round(factorInfo?.offPrice || 0))}
+              value={
+                isEmpty ? 0 : separate(Math.round(factorInfo?.offPrice || 0))
+              }
              type="error"
+              theme={theme}
            />
            <PriceStatus
              name="مالیات بر ارزش افزوده"
              value={
-                isEmpty ? 0 : separate(Math.round((factorInfo?.sumPrice || 0) * 0.009))
+                isEmpty
+                  ? 0
+                  : separate(Math.round((factorInfo?.sumPrice || 0) * 0.009))
              }
              type="error"
+              theme={theme}
            />
          </View>
          <View
@ -181,7 +195,7 @@ function ShoppingCart({
            <Text
              style={[
                {
-                  color: Colors.theme1[colorScheme].green79,
+                  color: Colors.theme1[theme].green79,
                  fontSize: fontSize.base,
                  fontFamily: "bold",
                },
@ -193,18 +207,18 @@ function ShoppingCart({
              <Text
                style={[
                  {
-                    color: Colors.theme1[colorScheme].green79,
+                    color: Colors.theme1[theme].green79,
                    fontSize: fontSize.xl,
                    fontFamily: "bold",
                  },
                ]}
              >
-                {isEmpty ? 0 : separate(factorInfo?.payPrice || '')}
+                {isEmpty ? 0 : separate(factorInfo?.payPrice || "")}
              </Text>
              <Text
                style={[
                  {
-                    color: Colors.theme1[colorScheme].green79,
+                    color: Colors.theme1[theme].green79,
                    fontSize: fontSize.sm,
                    fontFamily: "regular",
                    marginRight: 4,
@ -221,14 +235,14 @@ function ShoppingCart({
                tw(
                  "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
                style={[
                  tw("mr-1"),
                  {
-                    color: Colors.theme1[colorScheme].green79,
+                    color: Colors.theme1[theme].green79,
                    fontSize: fontSize.sm,
                    fontFamily: "regular",
                  },
@ -239,13 +253,13 @@ function ShoppingCart({
              <Ionicons
                name="alert-circle-outline"
                size={20}
-                color={Colors.theme1[colorScheme].greenC8}
+                color={Colors.theme1[theme].greenC8}
              />
            </Pressable>

            <CustomPressable
              title={hasPhysical ? "ادامه فرایند خرید" : "پرداخت"}
-              backgroundColor={Colors.theme1[colorScheme].greenCF}
+              backgroundColor={Colors.theme1[theme].greenCF}
              color={"white"}
              border={{ color: "#196EC0", width: 0 }}
              width={"100%"}
@ -279,6 +293,7 @@ const mapStateToProps = (state) => ({
  userId: state.user.status?.id,
  hasPhysical: state.userProduct.hasPhysical,
  loading: state.userProduct.loading,
+  theme: state.publicApi.theme
 });

 const mapDispatchToProps = {