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

upd: tab navigation

Browse Source 
Deskripsi:
- fix tab navigation :: diganti pake useState
- group
- position
- member
- diskusi umum
- project
- divisi
- tugas divisi

No Issues
This commit is contained in:
amel
2025-06-09 16:38:31 +08:00
parent d585f541ac
commit 88d9cd117d
14 changed files with 175 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/(application)/_layout.tsx
View File

@@ -1,7 +1,9 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import HeaderDiscussionGeneral from "@/components/discussion_general/headerDiscussionGeneral";
import HeaderRightDivisionList from "@/components/division/headerDivisionList";
import HeaderRightGroupList from "@/components/group/headerGroupList";
import HeaderMemberList from "@/components/member/headerMemberList";
import HeaderRightPositionList from "@/components/position/headerRightPositionList";
import HeaderRightProjectList from "@/components/project/headerProjectList";
import { Headers } from "@/constants/Headers";
import store from "@/lib/store";
@@ -30,8 +32,6 @@ export default function RootLayout() {
<Stack.Screen name="search" options={{ title: 'Pencarian' }} />
<Stack.Screen name="notification" options={{ title: 'Notifikasi' }} />
<Stack.Screen name="profile" options={{ title: 'Profile' }} />
<Stack.Screen name="group" options={{ title: 'Lembaga Desa', headerShown: false }} />
<Stack.Screen name="position" options={{ title: 'Jabatan', headerShown: false }} />
<Stack.Screen name="member/index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
title: 'Anggota',
@@ -56,7 +56,25 @@ export default function RootLayout() {
headerTitleAlign: 'center',
headerRight: () => <HeaderRightDivisionList />
}} />
<Stack.Screen name="coba" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.push('/home') }} />,
title: 'Latihan tab',
headerTitleAlign: 'center',
headerRight: () => <HeaderMemberList />
}} />
<Stack.Screen name="division/[id]/(fitur-division)" options={{ headerShown: false }} />
<Stack.Screen name="group/index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Lembaga Desa',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightGroupList />
}} />
<Stack.Screen name="position/index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Jabatan',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightPositionList />
}} />
</Stack>
<StatusBar style="light" />
</Provider>

21
app/(application)/discussion/index.tsx
View File

@@ -33,12 +33,13 @@ export default function Discussion() {
const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
const [status, setStatus] = useState<'true' | 'false'>('true')
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDiscussionGeneral({ user: hasil, active: String(active), search: search, group: String(group) })
const response = await apiGetDiscussionGeneral({ user: hasil, active: status, search: search, group: String(group) })
setData(response.data)
setNameGroup(response.filter.name)
} catch (error) {
@@ -50,7 +51,7 @@ export default function Discussion() {
useEffect(() => {
handleLoad(true)
}, [active, search, group])
}, [status, search, group])
useEffect(() => {
handleLoad(false)
@@ -62,18 +63,18 @@ export default function Discussion() {
<View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
active={status == "false" ? "false" : "true"}
value="true"
onPress={() => { router.push(`/discussion?active=true&group=${group}&search=${search}`) }}
onPress={() => { setStatus("true") }}
label="Aktif"
icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />}
icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />}
n={2} />
<ButtonTab
active={active == "false" ? "false" : "true"}
active={status == "false" ? "false" : "true"}
value="false"
onPress={() => { router.push(`/discussion?active=false&group=${group}&search=${search}`) }}
onPress={() => { setStatus("false") }}
label="Arsip"
icon={<AntDesign name="closecircleo" color={active == "true" ? 'black' : 'white'} size={20} />}
icon={<AntDesign name="closecircleo" color={status == "true" ? 'black' : 'white'} size={20} />}
n={2} />
</View>
<InputSearch onChange={setSearch} />
@@ -107,7 +108,7 @@ export default function Discussion() {
}
title={item.title}
subtitle={
active != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
status != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
}
rightTopInfo={item.createdAt}
desc={item.desc}
@@ -118,7 +119,7 @@ export default function Discussion() {
</View>
}
rightBottomInfo={`${item.total_komentar} Komentar`}
/>
)
})

37
app/(application)/division/[id]/(fitur-division)/task/index.tsx
View File

@@ -38,6 +38,7 @@ export default function ListTask() {
const update = useSelector((state: any) => state.taskUpdate)
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 3 })
const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0')
async function handleLoad(loading: boolean) {
try {
@@ -46,7 +47,7 @@ export default function ListTask() {
const response = await apiGetTask({
user: hasil,
division: id,
status,
status: statusFix,
search,
});
setData(response.data);
@@ -63,7 +64,7 @@ export default function ListTask() {
useEffect(() => {
handleLoad(true);
}, [status, search]);
}, [statusFix, search]);
return (
<SafeAreaView>
@@ -71,64 +72,56 @@ export default function ListTask() {
<View style={[Styles.p15, Styles.mb100]}>
<ScrollView horizontal style={[Styles.mb10]}>
<ButtonTab
active={status}
active={statusFix}
value="0"
onPress={() => {
router.replace("./task?status=0");
}}
onPress={() => { setStatusFix("0") }}
label="Segera"
icon={
<MaterialCommunityIcons
name="clock-alert-outline"
color={status == "0" ? "white" : "black"}
color={statusFix == "0" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={status}
active={statusFix}
value="1"
onPress={() => {
router.replace("./task?status=1");
}}
onPress={() => { setStatusFix("1") }}
label="Dikerjakan"
icon={
<MaterialCommunityIcons
name="progress-check"
color={status == "1" ? "white" : "black"}
color={statusFix == "1" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={status}
active={statusFix}
value="2"
onPress={() => {
router.replace("./task?status=2");
}}
onPress={() => { setStatusFix("2") }}
label="Selesai"
icon={
<Ionicons
name="checkmark-done-circle-outline"
color={status == "2" ? "white" : "black"}
color={statusFix == "2" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={status}
active={statusFix}
value="3"
onPress={() => {
router.replace("./task?status=3");
}}
onPress={() => { setStatusFix("3") }}
label="Batal"
icon={
<AntDesign
name="closecircleo"
color={status == "3" ? "white" : "black"}
color={statusFix == "3" ? "white" : "black"}
size={20}
/>
}

40
app/(application)/division/index.tsx
View File

@@ -42,6 +42,8 @@ export default function ListDivision() {
const update = useSelector((state: any) => state.divisionUpdate)
const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
const [loading, setLoading] = useState(false)
const [status, setStatus] = useState<'true' | 'false'>('true')
const [category, setCategory] = useState<'divisi-saya' | 'semua'>('divisi-saya')
async function handleLoad(loading: boolean) {
try {
@@ -49,10 +51,10 @@ export default function ListDivision() {
const hasil = await decryptToken(String(token?.current));
const response = await apiGetDivision({
user: hasil,
active: String(active),
active: status,
search: search,
group: String(group),
kategori: String(cat),
kategori: category,
});
if (response.success) {
@@ -72,7 +74,7 @@ export default function ListDivision() {
useEffect(() => {
handleLoad(true);
}, [active, search, group, cat]);
}, [status, search, group, category]);
return (
<SafeAreaView>
@@ -82,32 +84,28 @@ export default function ListDivision() {
entityUser.role != "user" && entityUser.role != "coadmin" ?
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
active={status == "false" ? "false" : "true"}
value="true"
onPress={() => {
router.replace(`/division?active=true&search=${search}&group=${group}&cat=${cat}`);
}}
onPress={() => { setStatus("true") }}
label="Aktif"
icon={
<Feather
name="check-circle"
color={active == "false" ? "black" : "white"}
color={status == "false" ? "black" : "white"}
size={20}
/>
}
n={2}
/>
<ButtonTab
active={active == "false" ? "false" : "true"}
active={status == "false" ? "false" : "true"}
value="false"
onPress={() => {
router.replace(`/division?active=false&search=${search}&group=${group}&cat=${cat}`);
}}
onPress={() => { setStatus("false") }}
label="Tidak Aktif"
icon={
<AntDesign
name="closecircleo"
color={active == "true" ? "black" : "white"}
color={status == "true" ? "black" : "white"}
size={20}
/>
}
@@ -117,32 +115,28 @@ export default function ListDivision() {
:
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={cat == "semua" ? "false" : "true"}
active={category == "semua" ? "false" : "true"}
value="true"
onPress={() => {
router.replace(`/division?&search=${search}&group=${group}&cat=divisi-saya`);
}}
onPress={() => { setCategory("divisi-saya") }}
label="Divisi Saya"
icon={
<Ionicons
name="file-tray-outline"
color={cat == "semua" ? "black" : "white"}
color={category == "semua" ? "black" : "white"}
size={20}
/>
}
n={2}
/>
<ButtonTab
active={cat == "semua" ? "false" : "true"}
active={category == "semua" ? "false" : "true"}
value="false"
onPress={() => {
router.replace(`/division?&search=${search}&group=${group}&cat=semua`);
}}
onPress={() => { setCategory("semua") }}
label="Semua Divisi"
icon={
<Ionicons
name="file-tray-stacked-outline"
color={cat == "semua" ? "white" : "black"}
color={category == "semua" ? "white" : "black"}
size={20}
/>
}

6
app/(application)/feature.tsx
View File

@@ -26,15 +26,15 @@ export default function Feature() {
<ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color="black" />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
</View>
<View style={[Styles.rowSpaceBetween, Styles.mb15, (entityUser.role != 'supadmin' && entityUser.role != 'developer' && entityUser.role != 'cosupadmin' && Styles.w40)]}>
<ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" onPress={() => { router.push('/member?active=true') }} />
<ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color="black" />} text="Jabatan" onPress={() => { router.push('/position?active=true') }} />
<ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" onPress={() => { router.push('/member') }} />
<ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color="black" />} text="Jabatan" onPress={() => { router.push('/position') }} />
{
entityUser.role == "cosupadmin" && <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" onPress={() => { router.push('/banner') }} />
}
{
(entityUser.role == "supadmin" || entityUser.role == "developer") &&
<>
<ButtonFiturMenu icon={<AntDesign name="tags" size={35} color="black" />} text="Lembaga Desa" onPress={() => { router.push('/group?active=true') }} />
<ButtonFiturMenu icon={<AntDesign name="tags" size={35} color="black" />} text="Lembaga Desa" onPress={() => { router.push('/group') }} />
<ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color="black" />} text="Tema" onPress={() => { }} />
</>
}

19
app/(application)/group/index.tsx
View File

@@ -13,7 +13,7 @@ import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api";
import { setUpdateGroup } from "@/lib/groupSlice";
import { useAuthSession } from "@/providers/AuthProvider";
import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
import { useDispatch, useSelector } from "react-redux";
@@ -33,6 +33,7 @@ export default function Index() {
const [search, setSearch] = useState('')
const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
const [loading, setLoading] = useState(true)
const [status, setStatus] = useState<'true' | 'false'>('true')
const [idChoose, setIdChoose] = useState('')
const [activeChoose, setActiveChoose] = useState(true)
@@ -74,7 +75,7 @@ export default function Index() {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetGroup({ user: hasil, active: String(active), search: search })
const response = await apiGetGroup({ user: hasil, active: status, search: search })
setData(response.data)
} catch (error) {
console.error(error)
@@ -90,7 +91,7 @@ export default function Index() {
useEffect(() => {
handleLoad(true)
}, [active, search])
}, [status, search])
@@ -101,18 +102,18 @@ export default function Index() {
<View style={[Styles.p15]}>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
active={status == "false" ? "false" : "true"}
value="true"
onPress={() => { router.replace('/group?active=true') }}
onPress={() => { setStatus("true") }}
label="Aktif"
icon={<Feather name="check-circle" color={active == "true" ? 'white' : 'black'} size={20} />}
icon={<Feather name="check-circle" color={status == "true" ? 'white' : 'black'} size={20} />}
n={2} />
<ButtonTab
active={active == "false" ? "false" : "true"}
active={status == "false" ? "false" : "true"}
value="false"
onPress={() => { router.replace('/group?active=false') }}
onPress={() => { setStatus("false") }}
label="Tidak Aktif"
icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
n={2} />
</View>
<InputSearch onChange={setSearch} />

17
app/(application)/member/index.tsx
View File

@@ -36,12 +36,13 @@ export default function Index() {
const update = useSelector((state: any) => state.memberUpdate)
const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
const [loading, setLoading] = useState(true)
const [status, setStatus] = useState<'true' | 'false'>('true')
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetUser({ user: hasil, active: String(active), search: search, group: String(group) })
const response = await apiGetUser({ user: hasil, active: status, search: search, group: String(group) })
setData(response.data)
setNameGroup(response.filter.name)
} catch (error) {
@@ -53,7 +54,7 @@ export default function Index() {
useEffect(() => {
handleLoad(true)
}, [active, search, group])
}, [status, search, group])
useEffect(() => {
handleLoad(false)
@@ -66,18 +67,18 @@ export default function Index() {
<View style={[Styles.p15]}>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
active={status == "false" ? "false" : "true"}
value="true"
onPress={() => { router.replace(`/member?active=true&group=${group}&search=${search}`) }}
onPress={() => { setStatus("true") }}
label="Aktif"
icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />}
icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />}
n={2} />
<ButtonTab
active={active == "false" ? "false" : "true"}
active={status == "false" ? "false" : "true"}
value="false"
onPress={() => { router.replace(`/member?active=false&group=${group}&search=${search}`) }}
onPress={() => { setStatus("false") }}
label="Tidak Aktif"
icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
n={2} />
</View>
<InputSearch onChange={setSearch} />

19
app/(application)/position/index.tsx
View File

@@ -13,7 +13,7 @@ import { apiDeletePosition, apiEditPosition, apiGetPosition } from "@/lib/api";
import { setUpdatePosition } from "@/lib/positionSlice";
import { useAuthSession } from "@/providers/AuthProvider";
import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
import { useDispatch, useSelector } from "react-redux";
@@ -30,6 +30,7 @@ export default function Index() {
const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
const [loading, setLoading] = useState(true)
const { token, decryptToken } = useAuthSession()
const [status, setStatus] = useState<'true' | 'false'>('true')
const entityUser = useSelector((state: any) => state.user)
const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
const [isModal, setModal] = useState(false)
@@ -49,7 +50,7 @@ export default function Index() {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetPosition({ user: hasil, active: String(active), search: search, group: String(group) })
const response = await apiGetPosition({ user: hasil, active: status, search: search, group: String(group) })
setData(response.data)
setNameGroup(response.filter.name)
} catch (error) {
@@ -66,7 +67,7 @@ export default function Index() {
useEffect(() => {
handleLoad(true)
}, [active, search, group])
}, [status, search, group])
function handleChooseData(id: string, name: string, active: boolean, group: string) {
@@ -124,18 +125,18 @@ export default function Index() {
<View style={[Styles.p15]}>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
active={status == "false" ? "false" : "true"}
value="true"
onPress={() => { router.replace(`/position?active=true&group=${group}&search=${search}`) }}
onPress={() => { setStatus("true") }}
label="Aktif"
icon={<Feather name="check-circle" color={active == "true" ? 'white' : 'black'} size={20} />}
icon={<Feather name="check-circle" color={status == "true" ? 'white' : 'black'} size={20} />}
n={2} />
<ButtonTab
active={active == "false" ? "false" : "true"}
active={status == "false" ? "false" : "true"}
value="false"
onPress={() => { router.replace(`/position?active=false&group=${group}&search=${search}`) }}
onPress={() => { setStatus("false") }}
label="Tidak Aktif"
icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
n={2} />
</View>
<InputSearch onChange={setSearch} />

45
app/(application)/project/index.tsx
View File

@@ -36,6 +36,7 @@ export default function ListProject() {
group?: string;
cat?: string;
}>();
const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0')
const { token, decryptToken } = useAuthSession();
const entityUser = useSelector((state: any) => state.user);
const [search, setSearch] = useState("");
@@ -52,7 +53,7 @@ export default function ListProject() {
const hasil = await decryptToken(String(token?.current));
const response = await apiGetProject({
user: hasil,
status: String(status),
status: statusFix,
search: search,
group: String(group),
kategori: String(cat),
@@ -76,7 +77,7 @@ export default function ListProject() {
useEffect(() => {
handleLoad(true);
}, [status, search, group, cat]);
}, [statusFix, search, group, cat]);
return (
<SafeAreaView>
@@ -84,72 +85,56 @@ export default function ListProject() {
<View style={[Styles.p15, Styles.mb100]}>
<ScrollView horizontal style={[Styles.mb10]}>
<ButtonTab
active={String(status)}
active={statusFix}
value="0"
onPress={() => {
router.replace(
`/project?status=0&group=${group}&search=${search}&cat=${cat}`
);
}}
onPress={() => { setStatusFix("0") }}
label="Segera"
icon={
<MaterialCommunityIcons
name="clock-alert-outline"
color={status == "0" ? "white" : "black"}
color={statusFix == "0" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={String(status)}
active={statusFix}
value="1"
onPress={() => {
router.replace(
`/project?status=1&group=${group}&search=${search}&cat=${cat}`
);
}}
onPress={() => { setStatusFix("1") }}
label="Dikerjakan"
icon={
<MaterialCommunityIcons
name="progress-check"
color={status == "1" ? "white" : "black"}
color={statusFix == "1" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={String(status)}
active={statusFix}
value="2"
onPress={() => {
router.replace(
`/project?status=2&group=${group}&search=${search}&cat=${cat}`
);
}}
onPress={() => { setStatusFix("2") }}
label="Selesai"
icon={
<Ionicons
name="checkmark-done-circle-outline"
color={status == "2" ? "white" : "black"}
color={statusFix == "2" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={String(status)}
active={statusFix}
value="3"
onPress={() => {
router.replace(
`/project?status=3&group=${group}&search=${search}&cat=${cat}`
);
}}
onPress={() => { setStatusFix("3") }}
label="Batal"
icon={
<AntDesign
name="closecircleo"
color={status == "3" ? "white" : "black"}
color={statusFix == "3" ? "white" : "black"}
size={20}
/>
}

1
components/buttonTab.tsx
View File

@@ -1,6 +1,5 @@
import { ColorsStatus } from "@/constants/ColorsStatus"
import Styles from "@/constants/Styles"
import { AntDesign, Feather } from "@expo/vector-icons"
import { Text, TouchableOpacity } from "react-native"
type Props = {

35
components/buttonTabExpo.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { ColorsStatus } from '@/constants/ColorsStatus';
import Styles from '@/constants/Styles';
import { AntDesign, Feather, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
import { TabTriggerSlotProps } from 'expo-router/ui';
import { ComponentProps, Ref } from 'react';
import { Pressable, Text, View } from 'react-native';
type Feather = ComponentProps<typeof Feather>['name'];
type Ionicons = ComponentProps<typeof Ionicons>['name'];
type AntDesign = ComponentProps<typeof AntDesign>['name'];
type MaterialCommunityIcons = ComponentProps<typeof MaterialCommunityIcons>['name'];
export type TabButtonProps = TabTriggerSlotProps & {
iconType: 'Feather' | 'Ionicons' | 'AntDesign' | 'MaterialCommunityIcons';
iconF?: Feather
iconI?: Ionicons
iconA?: AntDesign
iconM?: MaterialCommunityIcons
ref: Ref<View>;
n: number
};
export function ButtonTabExpo({ iconType, iconF, iconI, iconA, iconM, children, isFocused, n, ...props }: TabButtonProps) {
return (
<Pressable
{...props}
style={[Styles.btnTab, (isFocused) && ColorsStatus.orange, { width: n == 2 ? '50%' : 'auto' }]}>
{iconType == 'Feather' && <Feather name={iconF} color={isFocused == false ? 'black' : 'white'} size={20} />}
{iconType == 'Ionicons' && <Ionicons name={iconI} color={isFocused == false ? 'black' : 'white'} size={20} />}
{iconType == 'AntDesign' && <AntDesign name={iconA} color={isFocused == false ? 'black' : 'white'} size={20} />}
{iconType == 'MaterialCommunityIcons' && <MaterialCommunityIcons name={iconM} color={isFocused == false ? 'black' : 'white'} size={20} />}
<Text style={[Styles.textMediumSemiBold, Styles.ml10, { color: isFocused ? 'white' : 'black' }]}>{children}</Text>
</Pressable>
);
}

42
app/(application)/group/_layout.tsx → components/group/headerGroupList.tsx
View File

@@ -1,21 +1,18 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ButtonForm } from "@/components/buttonForm";
import ButtonMenuHeader from "@/components/buttonMenuHeader";
import DrawerBottom from "@/components/drawerBottom";
import { InputForm } from "@/components/inputForm";
import MenuItemRow from "@/components/menuItemRow";
import { Headers } from "@/constants/Headers";
import Styles from "@/constants/Styles";
import { apiCreateGroup } from "@/lib/api";
import { setUpdateGroup } from "@/lib/groupSlice";
import { useAuthSession } from "@/providers/AuthProvider";
import AntDesign from "@expo/vector-icons/AntDesign";
import { router, Stack } from "expo-router";
import React, { useState } from "react";
import { ToastAndroid, View } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import Styles from "@/constants/Styles"
import { apiCreateGroup } from "@/lib/api"
import { setUpdateGroup } from "@/lib/groupSlice"
import { useAuthSession } from "@/providers/AuthProvider"
import { AntDesign } from "@expo/vector-icons"
import { useState } from "react"
import { ToastAndroid, View } from "react-native"
import { useDispatch, useSelector } from "react-redux"
import { ButtonForm } from "../buttonForm"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import { InputForm } from "../inputForm"
import MenuItemRow from "../menuItemRow"
export default function RootLayout() {
export default function HeaderRightGroupList() {
const dispatch = useDispatch()
const update = useSelector((state: any) => state.groupUpdate)
const { token, decryptToken } = useAuthSession()
@@ -57,17 +54,10 @@ export default function RootLayout() {
}
}
return (
<>
<Stack screenOptions={Headers.shadow}>
<Stack.Screen name="index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Lembaga Desa',
headerTitleAlign: 'center',
headerRight: () => <ButtonMenuHeader onPress={() => { setVisible(true) }} />
}} />
</Stack>
<ButtonMenuHeader onPress={() => { setVisible(true) }} />
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow

6
components/modalFilter.tsx
View File

@@ -83,11 +83,11 @@ export default function ModalFilter({ open, close, page, category }: Props) {
page == 'project' ?
category == "filter-data"
?
router.push(`/${page}?status=0&cat=${chooseGroup}`)
router.replace(`/${page}?status=0&cat=${chooseGroup}`)
:
router.push(`/${page}?status=0&group=${chooseGroup}`)
router.replace(`/${page}?status=0&group=${chooseGroup}`)
:
router.push(`/${page}?active=true&group=${chooseGroup}`)
router.replace(`/${page}?active=true&group=${chooseGroup}`)
}} />
</View>
</View>

32
app/(application)/position/_layout.tsx → components/position/headerRightPositionList.tsx
View File

@@ -1,24 +1,21 @@
import ButtonBackHeader from "@/components/buttonBackHeader"
import { ButtonForm } from "@/components/buttonForm"
import ButtonMenuHeader from "@/components/buttonMenuHeader"
import DrawerBottom from "@/components/drawerBottom"
import { InputForm } from "@/components/inputForm"
import MenuItemRow from "@/components/menuItemRow"
import ModalFilter from "@/components/modalFilter"
import ModalSelect from "@/components/modalSelect"
import SelectForm from "@/components/selectForm"
import { Headers } from "@/constants/Headers"
import Styles from "@/constants/Styles"
import { apiCreatePosition } from "@/lib/api"
import { setUpdatePosition } from "@/lib/positionSlice"
import { useAuthSession } from "@/providers/AuthProvider"
import { AntDesign } from "@expo/vector-icons"
import { router, Stack } from "expo-router"
import { useState } from "react"
import { ToastAndroid, View } from "react-native"
import { useDispatch, useSelector } from "react-redux"
import { ButtonForm } from "../buttonForm"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import { InputForm } from "../inputForm"
import MenuItemRow from "../menuItemRow"
import ModalFilter from "../modalFilter"
import ModalSelect from "../modalSelect"
import SelectForm from "../selectForm"
export default function RootLayout() {
export default function HeaderRightPositionList() {
const dispatch = useDispatch()
const update = useSelector((state: any) => state.positionUpdate)
const { token, decryptToken } = useAuthSession()
@@ -93,17 +90,10 @@ export default function RootLayout() {
}
return (
<>
<Stack screenOptions={Headers.shadow}>
<Stack.Screen name="index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Jabatan',
headerTitleAlign: 'center',
headerRight: () => entityUser.role != 'user' ? <ButtonMenuHeader onPress={() => { setVisible(true) }} /> : <></>
}} />
</Stack>
{entityUser.role != 'user' ? <ButtonMenuHeader onPress={() => { setVisible(true) }} /> : <></>}
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow