feature profile
deskripsi: - drawer & alert - screen baru: edit profile, update photo, update background, create portofolio
This commit is contained in:
127
components/Alert/AlertCustom.tsx
Normal file
127
components/Alert/AlertCustom.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import { AccentColor, MainColor } from "@/constants/color-palet";
|
||||
import { TEXT_SIZE_LARGE } from "@/constants/constans-value";
|
||||
import React from "react";
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
||||
|
||||
interface AlertCustomProps {
|
||||
isVisible: boolean;
|
||||
onLeftPress: () => void;
|
||||
onRightPress: () => void;
|
||||
title?: string;
|
||||
message?: string;
|
||||
textLeft?: string;
|
||||
textRight?: string;
|
||||
colorLeft?: string;
|
||||
colorRight?: string;
|
||||
}
|
||||
|
||||
export default function AlertCustom({
|
||||
isVisible,
|
||||
onLeftPress,
|
||||
onRightPress,
|
||||
title,
|
||||
message,
|
||||
textLeft,
|
||||
textRight,
|
||||
colorLeft,
|
||||
colorRight,
|
||||
}: AlertCustomProps) {
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<View style={styles.overlay}>
|
||||
<View style={styles.alertBox}>
|
||||
{title && message ? (
|
||||
<>
|
||||
<Text style={styles.alertTitle}>{title}</Text>
|
||||
<Text style={styles.alertMessage}>{message}</Text>
|
||||
</>
|
||||
) : title ? (
|
||||
<Text style={styles.alertTitle}>{title}</Text>
|
||||
) : (
|
||||
<Text style={styles.alertMessage}>{message}</Text>
|
||||
)}
|
||||
<View style={styles.alertButtons}>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.alertButton,
|
||||
colorLeft ? { backgroundColor: colorLeft } : styles.leftButton,
|
||||
]}
|
||||
onPress={onLeftPress}
|
||||
>
|
||||
<Text style={styles.buttonText}>{textLeft}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.alertButton,
|
||||
colorRight ? { backgroundColor: colorRight } : styles.rightButton,
|
||||
]}
|
||||
onPress={onRightPress}
|
||||
>
|
||||
<Text style={styles.buttonText}>{textRight}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
zIndex: 999,
|
||||
},
|
||||
alertBox: {
|
||||
width: "90%",
|
||||
backgroundColor: MainColor.darkblue,
|
||||
borderColor: AccentColor.blue,
|
||||
borderWidth: 1,
|
||||
borderRadius: 10,
|
||||
padding: 20,
|
||||
alignItems: "center",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.25,
|
||||
elevation: 5,
|
||||
},
|
||||
alertTitle: {
|
||||
fontSize: TEXT_SIZE_LARGE,
|
||||
fontWeight: "bold",
|
||||
marginBottom: 20,
|
||||
color: MainColor.white,
|
||||
},
|
||||
alertMessage: {
|
||||
textAlign: "center",
|
||||
marginBottom: 20,
|
||||
color: MainColor.white,
|
||||
},
|
||||
alertButtons: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
},
|
||||
alertButton: {
|
||||
flex: 1,
|
||||
padding: 10,
|
||||
borderRadius: 5,
|
||||
marginHorizontal: 5,
|
||||
alignItems: "center",
|
||||
},
|
||||
leftButton: {
|
||||
backgroundColor: "gray",
|
||||
},
|
||||
rightButton: {
|
||||
backgroundColor: MainColor.green,
|
||||
},
|
||||
buttonText: {
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
});
|
||||
150
components/Drawer/DrawerCustom.tsx
Normal file
150
components/Drawer/DrawerCustom.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
import React, { useRef } from "react";
|
||||
import {
|
||||
Animated,
|
||||
PanResponder,
|
||||
StyleSheet,
|
||||
View
|
||||
} from "react-native";
|
||||
|
||||
import { AccentColor, MainColor } from "@/constants/color-palet";
|
||||
import { DRAWER_HEIGHT } from "@/constants/constans-value";
|
||||
|
||||
interface DrawerCustomProps {
|
||||
children?: React.ReactNode;
|
||||
height?: number;
|
||||
isVisible: boolean;
|
||||
drawerAnim: Animated.Value;
|
||||
closeDrawer: () => void;
|
||||
// openLogoutAlert: () => void;
|
||||
}
|
||||
|
||||
export default function DrawerCustom({
|
||||
children,
|
||||
height,
|
||||
isVisible,
|
||||
drawerAnim,
|
||||
closeDrawer,
|
||||
}: // openLogoutAlert,
|
||||
DrawerCustomProps) {
|
||||
const panResponder = useRef(
|
||||
PanResponder.create({
|
||||
onMoveShouldSetPanResponder: (_, gestureState) => {
|
||||
return gestureState.dy > 10; // gesek ke bawah
|
||||
},
|
||||
onPanResponderMove: (_, gestureState) => {
|
||||
const offset = gestureState.dy;
|
||||
if (offset >= 0 && offset <= DRAWER_HEIGHT) {
|
||||
drawerAnim.setValue(offset);
|
||||
}
|
||||
},
|
||||
onPanResponderRelease: (_, gestureState) => {
|
||||
if (gestureState.dy > 200) {
|
||||
closeDrawer();
|
||||
} else {
|
||||
Animated.spring(drawerAnim, {
|
||||
toValue: 0,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}
|
||||
},
|
||||
})
|
||||
).current;
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Overlay Gelap */}
|
||||
<View
|
||||
style={styles.overlay}
|
||||
pointerEvents="auto"
|
||||
onTouchStart={closeDrawer}
|
||||
/>
|
||||
|
||||
{/* Custom Bottom Drawer */}
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.drawer,
|
||||
{
|
||||
height: height || DRAWER_HEIGHT,
|
||||
transform: [{ translateY: drawerAnim }],
|
||||
},
|
||||
]}
|
||||
{...panResponder.panHandlers}
|
||||
>
|
||||
<View
|
||||
style={[styles.headerBar, { backgroundColor: MainColor.white }]}
|
||||
/>
|
||||
|
||||
{children}
|
||||
|
||||
{/* <TouchableOpacity
|
||||
style={styles.menuItem}
|
||||
onPress={() => {
|
||||
alert("Pilihan 1 diklik");
|
||||
closeDrawer();
|
||||
}}
|
||||
>
|
||||
<Text>Menu Item 1</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.menuItem}
|
||||
onPress={() => {
|
||||
alert("Pilihan 2 diklik");
|
||||
closeDrawer();
|
||||
}}
|
||||
>
|
||||
<Text>Menu Item 2</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.menuItem}
|
||||
onPress={() => alert("Logout via Alert bawaan")}
|
||||
>
|
||||
<Text style={{ color: "red" }}>Keluar</Text>
|
||||
</TouchableOpacity> */}
|
||||
</Animated.View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: "black",
|
||||
opacity: 0.6,
|
||||
zIndex: 998,
|
||||
},
|
||||
drawer: {
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
padding: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: -2 },
|
||||
shadowOpacity: 0.2,
|
||||
elevation: 5,
|
||||
zIndex: 999,
|
||||
},
|
||||
headerBar: {
|
||||
width: 40,
|
||||
height: 5,
|
||||
backgroundColor: MainColor.white,
|
||||
borderRadius: 5,
|
||||
alignSelf: "center",
|
||||
marginVertical: 10,
|
||||
},
|
||||
menuItem: {
|
||||
padding: 15,
|
||||
},
|
||||
});
|
||||
57
components/Drawer/MenuDrawerDynamicGird.tsx
Normal file
57
components/Drawer/MenuDrawerDynamicGird.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { AccentColor, MainColor } from "@/constants/color-palet";
|
||||
import { ICON_SIZE_MEDIUM, TEXT_SIZE_SMALL } from "@/constants/constans-value";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
|
||||
|
||||
const MenuDrawerDynamicGrid = ({ data, columns = 3, onPressItem }: any) => {
|
||||
const numColumns = columns;
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{data.map((item: any, index: any) => (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
style={[styles.itemContainer, { flexBasis: `${100 / numColumns}%` }]}
|
||||
onPress={() => onPressItem?.(item)}
|
||||
>
|
||||
<View style={styles.iconContainer}>
|
||||
<Ionicons
|
||||
name={item.icon}
|
||||
size={ICON_SIZE_MEDIUM}
|
||||
color={item.color || MainColor.white}
|
||||
/>
|
||||
</View>
|
||||
<Text style={styles.label}>{item.label}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuDrawerDynamicGrid;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
padding: 0,
|
||||
},
|
||||
itemContainer: {
|
||||
padding: 10,
|
||||
alignItems: "center",
|
||||
},
|
||||
iconContainer: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: AccentColor.blue,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
label: {
|
||||
marginTop: 10,
|
||||
fontSize: TEXT_SIZE_SMALL,
|
||||
textAlign: "center",
|
||||
color: MainColor.white,
|
||||
},
|
||||
});
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Href } from "expo-router";
|
||||
|
||||
export { ICustomTab, ITabs };
|
||||
export { ICustomTab, ITabs, IMenuDrawerItem };
|
||||
|
||||
interface ICustomTab {
|
||||
icon: string;
|
||||
@@ -18,3 +18,10 @@ interface ITabs {
|
||||
isActive: boolean;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface IMenuDrawerItem {
|
||||
icon: string;
|
||||
label: string;
|
||||
path?: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user