@hoddy-ui/core 1.0.46 → 1.0.47

package/index.ts

@@ -10,6 +10,7 @@ export { default as Button } from "./src/Components/Button";
 export * from "./src/Components/Checkbox";
 export * from "./src/Components/FlashMessage";
 export * from "./src/Components/FormWrapper";
+export * from "./src/Components/StarRating";
 export * from "./src/Components/Grid";
 export * from "./src/Components/Locator";
 export * from "./src/Components/Popup";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.0.46",
+  "version": "1.0.47",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {
@@ -16,6 +16,7 @@
     "@react-navigation/native": ">=6.1.7",
     "@types/react": "^18.2.6",
     "@types/react-native": "^0.72.0",
+    "expo-haptics": "^12.6.0",
     "expo-location": ">=15.1.1",
     "expo-navigation-bar": ">=2.1.1",
     "expo-system-ui": ">=2.2.1",

package/src/Components/StarRating.tsx

@@ -1,18 +1,13 @@
 import { Ionicons } from "@expo/vector-icons";
 import * as Haptics from "expo-haptics";
-import { FC, useContext, useEffect, useState } from "react";
-import { Alert, TouchableOpacity, View } from "react-native";
-import { TextInput } from "react-native-gesture-handler";
+import { FC, useEffect, useState } from "react";
+import { TextInput, TouchableOpacity, View } from "react-native";
 import { ScaledSheet } from "react-native-size-matters";
-import { GlobalContext } from "../../context";
-import colors from "../../theme/colors";
+import { useColors } from "../hooks";
+import { RatingInputProps, RatingStarsProps } from "../types";
 import Button from "./Button";
-import Popup from "./Popup";
+import { Popup } from "./Popup";
 import Typography from "./Typography";
-import { errorMessage } from "../../utility";
-import client from "../../api/client";
-import { useColors } from "../hooks";
-import { RatingInputProps, RatingStarsProps, StarRatingProps } from "../types";
 
 export const RatingStars: FC<RatingStarsProps> = ({
   rating = 0,
@@ -45,13 +40,12 @@ export const RatingStars: FC<RatingStarsProps> = ({
 
 export const RatingInput: FC<RatingInputProps> = ({
   onSubmit: _onSubmit,
-  _id,
   rating = 0,
   size = 16,
 }) => {
-  const { themeState } = useContext(GlobalContext);
   const [showReviewsModal, setShowReviewsModal] = useState(false);
   const [rate, setRate] = useState(0);
+  const colors = useColors();
   const [loading, setLoading] = useState(false);
   const [review, setReview] = useState("");
   const styles = ScaledSheet.create({
@@ -61,13 +55,13 @@ export const RatingInput: FC<RatingInputProps> = ({
     },
     inputCon: {
       marginBottom: "20@vs",
-      backgroundColor: colors(themeState.value).white[3],
+      backgroundColor: colors.white[3],
       padding: "15@ms",
       borderRadius: 20,
     },
     input: {
       fontSize: "16@ms",
-      color: colors(themeState.value).dark.main,
+      color: colors.dark.main,
       height: "100@vs",
     },
   });
@@ -75,7 +69,7 @@ export const RatingInput: FC<RatingInputProps> = ({
   useEffect(() => {
     setRate(rating);
   }, [rating]);
-  const onRate = (index) => {
+  const onRate = (index: number) => {
     setRate(index + 1);
     Haptics.selectionAsync();
 
@@ -86,23 +80,7 @@ export const RatingInput: FC<RatingInputProps> = ({
 
   const onSubmit = async () => {
     setLoading(true);
-    try {
-      const res = (
-        await client.post("customer/review/product", {
-          rate,
-          review,
-          productId: _id,
-        })
-      ).data;
-
-      console.log("R", res);
-      _onSubmit(res.data);
-      setShowReviewsModal(false);
-      Alert.alert("Review received", "Thank you for your review");
-    } catch (error) {
-      console.log("Couldn't add review", errorMessage(error));
-      Alert.alert("couldn't add review", errorMessage(error));
-    }
+    await _onSubmit({ rating: rate, review });
     setLoading(false);
   };
   return (
@@ -120,14 +98,13 @@ export const RatingInput: FC<RatingInputProps> = ({
               style={{ marginLeft: 10 }}
               name={index < rate ? "star" : "star-outline"}
               size={size}
-              color={colors(themeState.value).primary.light}
+              color={colors.primary.light}
             />
           </TouchableOpacity>
         ))}
       </View>
       <Popup
         sheet
-        port
         open={showReviewsModal}
         onClose={() => {
           setShowReviewsModal(false);
@@ -139,7 +116,7 @@ export const RatingInput: FC<RatingInputProps> = ({
             marginBottom: 5,
           }}
         >
-          <StarRating rating={rate} size={24} />
+          <RatingStars rating={rate} size={24} />
         </View>
         <Typography
           align="center"

package/src/types.ts

@@ -302,4 +302,5 @@ export interface RatingStarsProps {
 export interface RatingInputProps {
   rating: number;
   size: number;
+  onSubmit: (data: { rating: number; review: string }) => Promise<void>;
 }