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

upd: list anggota

Browse Source 
Deskripsi:
- ui list anggota

- note : blm selesai

No Issues
This commit is contained in:
amel
2025-02-28 17:22:02 +08:00
parent 81a234d5cd
commit e8ec2278d3
13 changed files with 194 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,7 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import HeaderMemberList from "@/components/member/headerMemberList";
import { Headers } from "@/constants/Headers";
import { Stack } from "expo-router";
import { router, Stack } from "expo-router";
import { StatusBar } from 'expo-status-bar';
export default function RootLayout() {
@@ -13,6 +15,13 @@ export default function RootLayout() {
<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',
headerTitleAlign: 'center',
headerRight: () => <HeaderMemberList />
}} />
<Stack.Screen name="member/create" options={{ title: 'Tambah Anggota' }} />
</Stack>
<StatusBar style="light" />
</>

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

@@ -23,7 +23,7 @@ export default function Feature() {
<ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color="black" />} text="Diskusi" />
</View>
<View style={[Styles.rowSpaceBetween, Styles.mb15]}>
<ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" />
<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={<AntDesign name="tags" size={35} color="black" />} text="Lembaga Desa" onPress={() => { router.push('/group?active=true') }} />
<ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color="black" />} text="Tema" onPress={() => { }} />

16
app/(application)/group/_layout.tsx
View File

@@ -37,7 +37,19 @@ export default function RootLayout() {
<MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />}
title="Tambah Lembaga"
onPress={() => { setVisibleTambah(true) }}
onPress={() => {
console.log('yeal')
setVisible(false);
// open the 2nd modal
setTimeout(
() => {
setVisibleTambah(true)
},
// any small number will do, maybe animation duration
100,
);
}}
/>
</View>
</DrawerBottom>
@@ -45,7 +57,7 @@ export default function RootLayout() {
<DrawerBottom animation="none" isVisible={isVisibleTambah} setVisible={setVisibleTambah} title="Tambah Lembaga Desa">
<View style={{ justifyContent: 'space-between', flex: 1 }}>
<View>
<InputForm type="default" placeholder="Nama Lembaga Desa" required label="Lembaga Desa"/>
<InputForm type="default" placeholder="Nama Lembaga Desa" required label="Lembaga Desa" />
</View>
<View>
<ButtonForm text="SIMPAN" onPress={() => { handleTambah() }} />

7
app/(application)/member/create.tsx Normal file
View File

@@ -0,0 +1,7 @@
import { Text } from "react-native";
export default function CreateMember() {
return (
<Text>Tambah Member</Text>
)
}

119
app/(application)/member/index.tsx Normal file
View File

@@ -0,0 +1,119 @@
import BorderBottomItem from "@/components/borderBottomItem";
import ButtonTab from "@/components/buttonTab";
import InputSearch from "@/components/inputSearch";
import Styles from "@/constants/Styles";
import { AntDesign, Feather } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
export default function Index() {
const { active } = useLocalSearchParams<{ active?: string }>()
return (
<SafeAreaView>
<ScrollView>
<View style={[Styles.p15]}>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
value="true"
onPress={() => { router.push('/member?active=true') }}
label="Aktif"
icon={<Feather name="check-circle" color={active == "true" ? 'white' : 'black'} size={20} />}
n={2} />
<ButtonTab
active={active == "false" ? "false" : "true"}
value="false"
onPress={() => { router.push('/member?active=false') }}
label="Tidak Aktif"
icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
n={2} />
</View>
<InputSearch />
<View style={[Styles.mv05]}>
<Text>Filter : Dinas</Text>
</View>
<View>
<BorderBottomItem
onPress={() => { }}
borderType="all"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>
}
title="Amalia Dwi"
subtitle="Dinas - Sekretaris"
/>
<BorderBottomItem
onPress={() => { }}
borderType="all"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>
}
title="Amalia Dwi"
subtitle="Dinas - Sekretaris"
/>
<BorderBottomItem
onPress={() => { }}
borderType="all"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>
}
title="Amalia Dwi"
subtitle="Dinas - Sekretaris"
/>
<BorderBottomItem
onPress={() => { }}
borderType="all"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>
}
title="Amalia Dwi"
subtitle="Dinas - Sekretaris"
/>
<BorderBottomItem
onPress={() => { }}
borderType="all"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>
}
title="Amalia Dwi"
subtitle="Dinas - Sekretaris"
/>
<BorderBottomItem
onPress={() => { }}
borderType="all"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>
}
title="Amalia Dwi"
subtitle="Dinas - Sekretaris"
/>
</View>
</View>
</ScrollView>
</SafeAreaView>
)
}

2
components/borderBottomItem.tsx
View File

@@ -13,7 +13,7 @@ type Props = {
export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo, borderType }: Props) {
return (
<Pressable style={[borderType == 'bottom' ? Styles.wrapItemBorderBottom : Styles.wrapItemBorderAll]} onPress={onPress}>
<Pressable style={[borderType == 'bottom' ? Styles.wrapItemBorderBottom : Styles.wrapItemBorderAll]} onPressOut={onPress}>
<View style={[Styles.rowItemsCenter]}>
{icon}
<View style={[Styles.rowSpaceBetween, { width: '85%' }]}>

8
components/buttonHeader.tsx
View File

@@ -1,17 +1,17 @@
import Styles from "@/constants/Styles";
import { TouchableWithoutFeedback, View } from "react-native";
import { Pressable, Text, TouchableWithoutFeedback, View } from "react-native";
type PropsBtnHeader = {
onPress?: () => void;
onPress: () => void;
item: React.ReactNode;
};
export function ButtonHeader({ onPress, item }: PropsBtnHeader) {
return (
<TouchableWithoutFeedback onPress={onPress}>
<Pressable onPressOut={() => {onPress()}}>
<View style={[Styles.btnIconHeader]}>
{item}
</View>
</TouchableWithoutFeedback>
</Pressable>
)
}

4
components/buttonMenuHeader.tsx
View File

@@ -2,7 +2,7 @@ import { Feather } from "@expo/vector-icons"
import { ButtonHeader } from "./buttonHeader"
type Props = {
onPress?: () => void
onPress: () => void
}
export default function ButtonMenuHeader({ onPress }: Props) {
@@ -10,7 +10,7 @@ export default function ButtonMenuHeader({ onPress }: Props) {
<>
<ButtonHeader
item={<Feather name="menu" size={20} color="white" />}
onPress={onPress}
onPress={() => onPress()}
/>
</>
)

2
components/drawerBottom.tsx
View File

@@ -18,7 +18,7 @@ export default function DrawerBottom({ isVisible, setVisible, title, children, a
<View style={[Styles.modalContent, height != undefined && { height: `${height}%` }]}>
<View style={Styles.titleContainer}>
<Text style={Styles.textDefault}>{title}</Text>
<Pressable onPress={() => setVisible(false)}>
<Pressable onPressOut={() => setVisible(false)}>
<MaterialIcons name="close" color="black" size={22} />
</Pressable>
</View>

32
components/member/headerMemberList.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { router, Stack } from "expo-router"
import ButtonBackHeader from "../buttonBackHeader"
import ButtonMenuHeader from "../buttonMenuHeader"
import { useState } from "react"
import DrawerBottom from "../drawerBottom"
import { View } from "react-native"
import Styles from "@/constants/Styles"
import MenuItemRow from "../menuItemRow"
import { AntDesign } from "@expo/vector-icons"
export default function HeaderMemberList() {
const [isVisible, setVisible] = useState(false)
return (
<>
<ButtonMenuHeader onPress={() => { setVisible(true) }} />
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />}
title="Tambah Anggota"
onPress={() => { }}
/>
<MenuItemRow
icon={<AntDesign name="filter" color="black" size={25} />}
title="Filter"
onPress={() => { }}
/>
</View>
</DrawerBottom>
</>
)
}

2
components/menuItemRow.tsx
View File

@@ -9,7 +9,7 @@ type Props = {
export default function MenuItemRow({ onPress, icon, title }: Props) {
return (
<Pressable onPress={() => { onPress() }} style={[Styles.btnMenuRow]}>
<Pressable onPressOut={() => { console.log('press'); onPress() }} style={[Styles.btnMenuRow]}>
<View style={{ alignItems: 'center' }}>
{icon}
<Text style={[Styles.mt05]}>{title}</Text>

2
components/modalSelect.tsx
View File

@@ -19,7 +19,7 @@ export default function ModalSelect({ open, close, title, category, choose, onSe
return (
<DrawerBottom animation="none" isVisible={open} setVisible={close} title={title} height={75}>
<View>
<Pressable style={[Styles.itemSelectModal]} onPress={() => {
<Pressable style={[Styles.itemSelectModal]} onPressOut={() => {
onSelect({ val: 'dinas', label: 'Dinas' })
setChoose('dinas')
close(false)

2
components/selectForm.tsx
View File

@@ -27,7 +27,7 @@ export default function SelectForm({ label, value, placeholder, onPress, info, e
</Text>
)
}
<Pressable onPress={onPress}>
<Pressable onPressOut={onPress}>
<View style={[Styles.inputRoundForm, Styles.inputRoundFormRight, error && { borderColor: "red" }, round && Styles.round30, Styles.pv10]}>
<Feather name="chevron-right" size={20} color="grey" />
{