Skip to content

Commit

Permalink
make components out of needed files
Browse files Browse the repository at this point in the history
  • Loading branch information
@garvsl
garvsl committed Jan 3, 2024
1 parent 426a4ae commit 368aba1
Show file tree
Hide file tree
Showing 17 changed files with 192 additions and 333 deletions.
2 changes: 1 addition & 1 deletion app/tabs/calorie.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { H5, Input, ScrollView, Tabs, Text } from "tamagui";

import { CardDemo } from "../../components/DemoCard";
import { CardDemo } from "../../components/calorie/DemoCard";
import { MySafeAreaView } from "../../components/MySafeAreaView";
import { MyStack } from "../../components/MyStack";
import config from "../../env.json";
Expand Down
277 changes: 4 additions & 273 deletions app/tabs/home.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,214 +1,11 @@
import React, { useState } from "react";
import { Animated, StyleSheet } from "react-native";
import { FlatList, RectButton, Swipeable } from "react-native-gesture-handler";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Trash } from "@tamagui/lucide-icons";
import { ScrollView, Text, View, YStack } from "tamagui";
import { Button, Card, H4, Paragraph, XStack } from "tamagui";

import { ScrollView, Text, YStack } from "tamagui";
import { XStack } from "tamagui";
import HeaderBar from "../../components/HeaderBar";
import { MySafeAreaView } from "../../components/MySafeAreaView";
import { MyStack } from "../../components/MyStack";
import SearchBar from "../../components/SearchBar";
import { SheetDemo } from "../../components/SheetDemo";

const DemoCard = ({ text, iconText, iconColor, size, children, func }: any) => {
return (
<Card
size={"$4"}
bordered
height={85}
backgroundColor={"white"}
animation="bouncy"
// marginLeft={"$2.5"}
// scale={1}
// hoverStyle={{ scale: 0.925 }}
// pressStyle={{ scale: 0.875 }}
// onPress={func}
>
<Card.Header
flexDirection="row"
alignItems="center"
gap={10}
padded
>
<MaterialCommunityIcons
name={iconText}
color={iconColor}
size={size}
/>
<YStack>
<H4 color={"black"}>{text}</H4>
{children}
</YStack>
</Card.Header>
<Card.Background></Card.Background>
</Card>
);
};

const CardParagraph = ({ text, iconText, iconColor }: any) => {
return (
<Paragraph
theme="alt2"
color={"grey"}
marginTop={-5}
>
<MaterialCommunityIcons
name={iconText}
color={iconColor}
size={15}
/>{" "}
{text}
</Paragraph>
);
};

// const renderRightActions = (progress: any, dragAnimatedValue: any) => {
// const opacity = dragAnimatedValue.interpolate({
// inputRange: [-100, 0],
// outputRange: [1, 0],
// extrapolate: "clamp"
// });
// return (
// <View style={styles.swipedRow}>
// <View style={styles.swipedConfirmationContainer}>
// <Text style={styles.deleteConfirmationText}>Are you sure?</Text>
// </View>
// <Animated.View
// style={[{ opacity, alignItems: "center", justifyContent: "center" }]}
// >
// <Button
// marginTop={-24}
// height={"115%"}
// theme="red"
// justifyContent="flex-end"
// >
// <Text color={"$red10Dark"}>Delete</Text>
// </Button>
// </Animated.View>
// </View>
// );
// };

const renderRightActions = (progress, dragAnimatedValue) => {
const trans = progress.interpolate({
inputRange: [0, 1],
outputRange: [175, 0],
extrapolate: "clamp"
});
const opacity = dragAnimatedValue.interpolate({
inputRange: [-100, 0],
outputRange: [1, 0],
extrapolate: "clamp"
});
// const pressHandler = () => {
// this.close();
// alert(text);
// };
return (
<Animated.View
style={{ flex: 1, transform: [{ translateX: trans }], opacity }}
>
<RectButton
style={[
styles.rightAction,
{ backgroundColor: "red", borderRadius: 10 }
]}
// onPress={pressHandler}
>
<Trash
size={25}
color="white"
/>
</RectButton>
</Animated.View>
);
};

const SheetCard = ({ text, iconText, iconColor, size, children }: any) => {
const [open, setOpen] = useState(false);
return (
<View
width={"100%"}
paddingHorizontal={"$2"}
>
<Swipeable
friction={3}
shouldCancelWhenOutside={true}
cancelsTouchesInView={true}
renderRightActions={renderRightActions}
rightThreshold={2}
overshootFriction={7}
>
<SheetDemo
open={open}
setOpen={setOpen}
>
<DemoCard
text={text}
iconText={iconText}
iconColor={iconColor}
size={size}
func={() => setOpen(true)}
>
{children}
</DemoCard>
</SheetDemo>
</Swipeable>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
minHeight: 300
},
row: {
flexDirection: "row",
flex: 1,
alignItems: "center",
paddingLeft: 5,
backgroundColor: "#efefef",
margin: 20,
minHeight: 50
},
swipedRow: {
flexDirection: "row",
flex: 1,
alignItems: "center",
paddingLeft: 5,
backgroundColor: "#818181",
margin: 20,
minHeight: 50
},
swipedConfirmationContainer: {
flex: 1
},
deleteConfirmationText: {
color: "#fcfcfc",
fontWeight: "bold"
},
deleteButton: {
backgroundColor: "#b60000",
flexDirection: "column",
justifyContent: "center",
height: "100%"
},
deleteButtonText: {
color: "#fcfcfc",
fontWeight: "bold",
padding: 3
},
rightAction: {
alignItems: "center",
paddingRight: 20,
paddingLeft: 20,
flex: 1,
justifyContent: "center"
}
});
import SearchBar from "../../components/home/SearchBar";
import { SheetCard } from "../../components/home/SheetCard";

export default function Home() {
const [defaultItems, setDefaultItems] = useState([
Expand Down Expand Up @@ -262,8 +59,6 @@ export default function Home() {
gap={30}
padding={"5%"}
paddingLeft={"4%"}
// marginTop={-10}
// margin={"$4"}
>
<HeaderBar />

Expand All @@ -287,14 +82,9 @@ export default function Home() {
</YStack>

<ScrollView
// marginLeft={-3}
// marginBottom={-50}
marginTop={-25}
showsVerticalScrollIndicator={false}
contentContainerStyle={{ alignItems: "center" }}
// paddingLeft={"4%"}
// marginLwe={"$4"}
// paddingRight={"4%"}
>
<YStack
alignItems="center"
Expand Down Expand Up @@ -338,65 +128,6 @@ export default function Home() {
);
}
})}

{/* <SheetCard
text={"Welcome to OpenHealth"}
iconText={"heart"}
iconColor={"red"}
size={35}
/>
<SheetCard
text={"Your personal objective"}
iconText={"pen"}
iconColor={"darkblue"}
size={50}
> */}
{/* <CardParagraph
text={"1 minute"}
iconText={"clock"}
iconColor={"grey"}
/> */}
{/* </SheetCard> */}

{/* <SheetCard
text={"Todays Tracking"}
iconText={"calendar"}
iconColor={"orange"}
size={50}
> */}
{/* <CardParagraph
text={"1 minute"}
iconText={"clock"}
iconColor={"grey"}
/> */}
{/* </SheetCard> */}

{/* <SheetCard
text={"Receive Coaching"}
iconText={"account-group"}
iconColor={"purple"}
size={50}
> */}
{/* <CardParagraph
text={"2 minutes"}
iconText={"clock"}
iconColor={"grey"}
/> */}
{/* </SheetCard> */}

{/* <SheetCard
text={"Health Check-In"}
iconText={"plus-circle"}
iconColor={"green"}
size={50}
> */}
{/* <CardParagraph
text={"4 minutes"}
iconText={"clock"}
iconColor={"grey"}
/> */}
{/* </SheetCard> */}
</YStack>
</ScrollView>
</MySafeAreaView>
Expand Down
6 changes: 3 additions & 3 deletions app/users/[user].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import { ArrowLeft } from "@tamagui/lucide-icons";
import { useRouter, useSearchParams } from "expo-router";
import { useRouter, useGlobalSearchParams } from "expo-router";
import { Button, H3, H6, XStack } from "tamagui";

import DialogDemo from "../../components/DialogDemo";
import DialogDemo from "../../components/profile/DialogDemo";
import { MyStack } from "../../components/MyStack";
import SelectDemo from "../../components/SelectDemo";
import SpinnerDemo from "../../components/SpinnerDemo";
import SwitchDemo from "../../components/SwitchDemo";

export default function User() {
const router = useRouter();
const params = useSearchParams();
const params = useGlobalSearchParams();

return (
<MyStack justifyContent="flex-start">
Expand Down
54 changes: 0 additions & 54 deletions components/Action.tsx
View file

This file was deleted.

0 components/DemoCard.tsx → components/calorie/DemoCard.tsx
View file
File renamed without changes.
Loading

0 comments on commit 368aba1

Please sign in to comment.