wibu/hipmi-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deskripsi:

Browse Source 
Fix event: layout dan event deatil
Feature: Button dot, edit screen

# No Issue
This commit is contained in:
Bagasbanuna02
2025-07-21 15:23:18 +08:00
parent f9e96aa077
commit b844a8151d
6 changed files with 128 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/(application)/(user)/_layout.tsx
View File

@@ -92,6 +92,14 @@ export default function UserLayout() {
}}
/>
<Stack.Screen
name="event/[id]/edit"
options={{
title: "Edit Event",
headerLeft: () => <BackButton />,
}}
/>
{/* ========== Forum Section ========= */}
<Stack.Screen
name="forum/create"

95
app/(application)/(user)/event/[id]/[detail]/detail-event.tsx
View File

@@ -1,39 +1,68 @@
import {
BaseBox,
DotButton,
DrawerCustom,
Grid,
Spacing,
MenuDrawerDynamicGrid,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { IMenuDrawerItem } from "@/components/_Interface/types";
import LeftButtonCustom from "@/components/Button/BackButton";
import { Stack, useLocalSearchParams } from "expo-router";
import { AccentColor } from "@/constants/color-palet";
import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
import Event_ButtonStatusSection from "@/screens/Event/ButtonStatusSection";
import { Ionicons } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { useState } from "react";
const listData = [
{
title: "Lokasi",
value:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
},
{
title: "Tipe Acara",
value: "Workshop",
},
{
title: "Tanggal Mulai",
value: "Senin, 18 Juli 2025, 10:00 WIB",
},
{
title: "Tanggal Berakhir",
value: "Selasa, 19 Juli 2025, 12:00 WIB",
},
{
title: "Deskripsi",
value:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
},
];
export default function EventDetail() {
const { id, detail } = useLocalSearchParams();
const [openDrawer, setOpenDrawer] = useState(false);
const listData = [
const handlePress = (item: IMenuDrawerItem) => {
console.log("PATH >> ", item.path);
router.navigate(item.path as any);
setOpenDrawer(false);
};
const drawerItemsDraftEvent = [
{
title: "Lokasi",
value:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
},
{
title: "Tipe Acara",
value: "Workshop",
},
{
title: "Tanggal Mulai",
value: "Senin, 18 Juli 2025, 10:00 WIB",
},
{
title: "Tanggal Berakhir",
value: "Selasa, 19 Juli 2025, 12:00 WIB",
},
{
title: "Deskripsi",
value:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
icon: (
<Ionicons
name="create"
size={ICON_SIZE_MEDIUM}
color={AccentColor.white}
/>
),
label: "Edit event",
path: `/(application)/(user)/event/${id}/edit`,
},
];
@@ -41,8 +70,12 @@ export default function EventDetail() {
<>
<Stack.Screen
options={{
title: `Detail ${detail}`,
title: `Detail ${detail === "publish" ? "" : detail}`,
headerLeft: () => <LeftButtonCustom />,
headerRight: () =>
detail === "draft" ? (
<DotButton onPress={() => setOpenDrawer(true)} />
) : null,
}}
/>
<ViewWrapper>
@@ -64,6 +97,20 @@ export default function EventDetail() {
</StackCustom>
</BaseBox>
</ViewWrapper>
{/* <Event_ButtonStatusSection detail={detail as string} /> */}
<DrawerCustom
isVisible={openDrawer}
closeDrawer={() => setOpenDrawer(false)}
height={250}
>
<MenuDrawerDynamicGrid
data={drawerItemsDraftEvent}
columns={4}
onPressItem={handlePress}
/>
</DrawerCustom>
</>
);
}

13
app/(application)/(user)/event/[id]/edit.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { StackCustom, TextCustom, ViewWrapper } from "@/components";
export default function EventEdit() {
return (
<>
<ViewWrapper>
<StackCustom>
<TextCustom>Edit Event</TextCustom>
</StackCustom>
</ViewWrapper>
</>
);
}

13
components/Button/DotButton.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { Ionicons } from "@expo/vector-icons";
import { MainColor } from "@/constants/color-palet";
export default function DotButton({ onPress }: { onPress: () => void }) {
return (
<Ionicons
onPress={onPress}
name="ellipsis-vertical"
size={20}
color={MainColor.yellow}
/>
);
}

6
components/index.ts
View File

@@ -4,6 +4,7 @@ import AlertCustom from "./Alert/AlertCustom";
import LeftButtonCustom from "./Button/BackButton";
import ButtonCenteredOnly from "./Button/ButtonCenteredOnly";
import ButtonCustom from "./Button/ButtonCustom";
import DotButton from "./Button/DotButton";
// Drawer
import DrawerCustom from "./Drawer/DrawerCustom";
import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
@@ -48,11 +49,12 @@ export {
// Box
BaseBox,
BoxButtonOnFooter,
ButtonCenteredOnly,
InformationBox,
LeftButtonCustom as BackButton,
// Button
ButtonCenteredOnly,
ButtonCustom,
LeftButtonCustom as BackButton,
DotButton,
// Drawer
DrawerCustom,
MenuDrawerDynamicGrid,

19
screens/Event/ButtonStatusSection.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { ButtonCustom } from "@/components";
import { View } from "react-native";
export default function Event_ButtonStatusSection({
detail,
}: {
detail: string;
}) {
return (
<>
{detail && detail === "draft" && (
<View>
<ButtonCustom>Ajukan Review</ButtonCustom>
<ButtonCustom backgroundColor="red">Hapus</ButtonCustom>
</View>
)}
</>
);
}