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

Merge pull request #3 from bipproduction/amalia/28-feb-25

Browse Source 
Amalia/28 feb 25
This commit is contained in:
Amalia
2025-02-28 17:22:53 +08:00
committed by GitHub
parent 27ed15f102 e8ec2278d3
commit a580b0fd5b
18 changed files with 650 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
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() {
@@ -12,6 +14,14 @@ export default function RootLayout() {
<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',
headerTitleAlign: 'center',
headerRight: () => <HeaderMemberList />
}} />
<Stack.Screen name="member/create" options={{ title: 'Tambah Anggota' }} />
</Stack>
<StatusBar style="light" />
</>

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

@@ -23,8 +23,8 @@ 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={<MaterialCommunityIcons name="account-tie" size={35} color="black" />} text="Jabatan" />
<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={() => { }} />
</View>

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

@@ -7,10 +7,9 @@ import MenuItemRow from "@/components/menuItemRow";
import { Headers } from "@/constants/Headers";
import Styles from "@/constants/Styles";
import AntDesign from "@expo/vector-icons/AntDesign";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { router, Stack } from "expo-router";
import React, { useState } from "react";
import { Modal, Pressable, Text, TextInput, ToastAndroid, View } from "react-native";
import { ToastAndroid, View } from "react-native";
export default function RootLayout() {
const [isVisible, setVisible] = useState(false)
@@ -38,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>
@@ -46,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() }} />

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

@@ -1,20 +1,34 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi";
import BorderBottomItem from "@/components/borderBottomItem";
import { ButtonForm } from "@/components/buttonForm";
import ButtonTab from "@/components/buttonTab";
import DrawerBottom from "@/components/drawerBottom";
import { InputForm } from "@/components/inputForm";
import InputSearch from "@/components/inputSearch";
import MenuItemRow from "@/components/menuItemRow";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { SafeAreaView, ScrollView, View } from "react-native";
import { useState } from "react";
import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";
export default function Index() {
const { active } = useLocalSearchParams<{ active?: string }>();
const { active } = useLocalSearchParams<{ active?: string }>()
const [isModal, setModal] = useState(false)
const [isVisibleEdit, setVisibleEdit] = useState(false)
function handleEdit() {
setVisibleEdit(false)
setModal(false)
ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
}
return (
<SafeAreaView>
<ScrollView>
<View style={[Styles.p15]}>
<View style={{ justifyContent: 'space-between', flexDirection: 'row', marginBottom: 15, backgroundColor: 'white', borderRadius: 20, padding: 5 }}>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
value="true"
@@ -33,6 +47,7 @@ export default function Index() {
<InputSearch />
<View>
<BorderBottomItem
onPress={() => { setModal(true) }}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
@@ -42,6 +57,7 @@ export default function Index() {
title="Adat"
/>
<BorderBottomItem
onPress={() => { setModal(true) }}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
@@ -51,6 +67,7 @@ export default function Index() {
title="Dinas"
/>
<BorderBottomItem
onPress={() => { setModal(true) }}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
@@ -60,6 +77,7 @@ export default function Index() {
title="PKK"
/>
<BorderBottomItem
onPress={() => { setModal(true) }}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
@@ -69,6 +87,7 @@ export default function Index() {
title="Karang Taruna"
/>
<BorderBottomItem
onPress={() => { setModal(true) }}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
@@ -80,6 +99,40 @@ export default function Index() {
</View>
</View>
</ScrollView>
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />}
title="Non Aktifkan"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menonaktifkan data?',
onPress: () => { handleEdit() }
})
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
title="Edit"
onPress={() => { setVisibleEdit(true) }}
/>
</View>
</DrawerBottom>
<DrawerBottom animation="none" isVisible={isVisibleEdit} setVisible={setVisibleEdit} title="Edit Lembaga Desa">
<View style={{ justifyContent: 'space-between', flex: 1 }}>
<View>
<InputForm type="default" placeholder="Nama Lembaga Desa" required label="Lembaga Desa" />
</View>
<View>
<ButtonForm text="SIMPAN" onPress={() => { handleEdit() }} />
</View>
</View>
</DrawerBottom>
</SafeAreaView>
)
}

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>
)
}

86
app/(application)/position/_layout.tsx Normal file
View File

@@ -0,0 +1,86 @@
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 { AntDesign } from "@expo/vector-icons"
import { router, Stack } from "expo-router"
import { useState } from "react"
import { ToastAndroid, View } from "react-native"
export default function RootLayout() {
const [isVisible, setVisible] = useState(false)
const [isVisibleTambah, setVisibleTambah] = useState(false)
const [isFilter, setFilter] = useState(false)
const [isSelect, setSelect] = useState(false)
const [choose, setChoose] = useState({ val: '', label: '' })
function handleTambah() {
setVisibleTambah(false)
setVisible(false)
ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
}
return (
<>
<Stack screenOptions={Headers.shadow}>
<Stack.Screen name="index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Jabatan',
headerTitleAlign: 'center',
headerRight: () => <ButtonMenuHeader onPress={() => { setVisible(true) }} />
}} />
</Stack>
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />}
title="Tambah Jabatan"
onPress={() => { setVisibleTambah(true) }}
/>
<MenuItemRow
icon={<AntDesign name="filter" color="black" size={25} />}
title="Filter"
onPress={() => { setFilter(true) }}
/>
</View>
</DrawerBottom>
<DrawerBottom animation="none" isVisible={isVisibleTambah} setVisible={setVisibleTambah} title="Tambah Lembaga Desa">
<View style={{ justifyContent: 'space-between', flex: 1 }}>
<View>
<SelectForm label="Lembaga Desa" placeholder="Pilih Lembaga Desa" value={choose.label} required onPress={() => { setSelect(true) }} />
<InputForm type="default" placeholder="Nama Jabatan" required label="Jabatan" />
</View>
<View>
<ButtonForm text="SIMPAN" onPress={() => { handleTambah() }} />
</View>
</View>
</DrawerBottom>
<ModalFilter close={() => {
setFilter(false)
setVisible(false)
}} open={isFilter} page="position" />
<ModalSelect
category="group"
close={setSelect}
onSelect={(value) => {
setChoose(value)
setSelect(false)
}}
title="Lembaga Desa"
choose={choose.val}
open={isSelect}
/>
</>
)
}

157
app/(application)/position/index.tsx Normal file
View File

@@ -0,0 +1,157 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi";
import BorderBottomItem from "@/components/borderBottomItem";
import { ButtonForm } from "@/components/buttonForm";
import ButtonTab from "@/components/buttonTab";
import DrawerBottom from "@/components/drawerBottom";
import { InputForm } from "@/components/inputForm";
import InputSearch from "@/components/inputSearch";
import MenuItemRow from "@/components/menuItemRow";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useState } from "react";
import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
export default function Index() {
const { active } = useLocalSearchParams<{ active?: string }>()
const [isModal, setModal] = useState(false)
const [isVisibleEdit, setVisibleEdit] = useState(false)
function handleEdit() {
setVisibleEdit(false)
setModal(false)
ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
}
return (
<SafeAreaView>
<ScrollView>
<View style={[Styles.p15]}>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
value="true"
onPress={() => { router.push('/position?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('/position?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={() => { setModal(true) }}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
</View>
}
title="Anggota"
subtitle="Dinas"
/>
<BorderBottomItem
onPress={() => { setModal(true) }}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
</View>
}
title="Bendahara"
subtitle="Dinas"
/>
<BorderBottomItem
onPress={() => { setModal(true) }}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
</View>
}
title="Ketua"
subtitle="Dinas"
/>
<BorderBottomItem
onPress={() => { setModal(true) }}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
</View>
}
title="Sekretaris"
subtitle="Dinas"
/>
<BorderBottomItem
onPress={() => { setModal(true) }}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
</View>
}
title="Kepala TU"
subtitle="Dinas"
/>
<BorderBottomItem
onPress={() => { setModal(true) }}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
</View>
}
title="Wakil Kepala TU"
subtitle="Dinas"
/>
</View>
</View>
</ScrollView>
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />}
title="Non Aktifkan"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menonaktifkan data?',
onPress: () => { handleEdit() }
})
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
title="Edit"
onPress={() => { setVisibleEdit(true) }}
/>
</View>
</DrawerBottom>
<DrawerBottom animation="none" isVisible={isVisibleEdit} setVisible={setVisibleEdit} title="Edit Jabatan">
<View style={{ justifyContent: 'space-between', flex: 1 }}>
<View>
<InputForm type="default" placeholder="Nama Jabatan" required label="Jabatan" />
</View>
<View>
<ButtonForm text="SIMPAN" onPress={() => { handleEdit() }} />
</View>
</View>
</DrawerBottom>
</SafeAreaView>
)
}

4
components/borderBottomItem.tsx
View File

@@ -13,13 +13,13 @@ 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%' }]}>
<View style={[Styles.ml10]}>
<Text style={[Styles.textDefaultSemiBold]}>{title}</Text>
{subtitle && <Text style={[Styles.textMediumNormal]}>{subtitle}</Text>}
{subtitle && <Text style={[Styles.textMediumNormal, {lineHeight:15}]}>{subtitle}</Text>}
</View>
{
rightTopInfo && <Text style={[Styles.textInformation]}>{rightTopInfo}</Text>

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()}
/>
</>
)

7
components/drawerBottom.tsx
View File

@@ -8,16 +8,17 @@ type Props = {
title?: string
children: React.ReactNode
animation: 'slide' | 'none' | 'fade'
height?: number
}
export default function DrawerBottom({ isVisible, setVisible, title, children, animation }: Props) {
export default function DrawerBottom({ isVisible, setVisible, title, children, animation, height }: Props) {
return (
<Modal animationType={animation} transparent={true} visible={isVisible}>
<View style={[Styles.modalBgTransparant]}>
<View style={Styles.modalContent}>
<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>

43
components/modalFilter.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { Pressable, Text, View } from "react-native"
import DrawerBottom from "./drawerBottom"
import { AntDesign } from "@expo/vector-icons"
import Styles from "@/constants/Styles"
import { ButtonForm } from "./buttonForm"
import { router } from "expo-router"
type Props = {
open: boolean,
close: (value: boolean) => void
page: 'position'
}
export default function ModalFilter({ open, close, page }: Props) {
return (
<DrawerBottom animation="slide" isVisible={open} setVisible={close} title="Filter" height={75}>
<View style={{ justifyContent: 'space-between', flex: 1 }}>
<View>
<Pressable style={[Styles.itemSelectModal]}>
<Text style={[Styles.textDefaultSemiBold]}>Dinas</Text>
<AntDesign name="check" size={20} />
</Pressable>
<Pressable style={[Styles.itemSelectModal]}>
<Text>Adat</Text>
</Pressable>
<Pressable style={[Styles.itemSelectModal]}>
<Text>Karang Taruna</Text>
</Pressable>
<Pressable style={[Styles.itemSelectModal]}>
<Text>PKK</Text>
</Pressable>
</View>
<View>
<ButtonForm text="Terapkan" onPress={() => {
close(false)
router.push(`/${page}?active=true`)
}} />
</View>
</View>
</DrawerBottom>
)
}

42
components/modalSelect.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { Pressable, Text, View } from "react-native"
import DrawerBottom from "./drawerBottom"
import Styles from "@/constants/Styles"
import { AntDesign } from "@expo/vector-icons"
import { useState } from "react"
type Props = {
open: boolean
close: (value: boolean) => void
title: string
category: 'group'
choose: string
onSelect: (value: { val: string, label: string }) => void
}
export default function ModalSelect({ open, close, title, category, choose, onSelect }: Props) {
const [isChoose, setChoose] = useState(choose)
return (
<DrawerBottom animation="none" isVisible={open} setVisible={close} title={title} height={75}>
<View>
<Pressable style={[Styles.itemSelectModal]} onPressOut={() => {
onSelect({ val: 'dinas', label: 'Dinas' })
setChoose('dinas')
close(false)
}}>
<Text style={[Styles.textDefaultSemiBold]}>Dinas</Text>
<AntDesign name="check" size={20} />
</Pressable>
<Pressable style={[Styles.itemSelectModal]}>
<Text>Adat</Text>
</Pressable>
<Pressable style={[Styles.itemSelectModal]}>
<Text>Karang Taruna</Text>
</Pressable>
<Pressable style={[Styles.itemSelectModal]}>
<Text>PKK</Text>
</Pressable>
</View>
</DrawerBottom>
)
}

46
components/selectForm.tsx Normal file
View File

@@ -0,0 +1,46 @@
import Styles from "@/constants/Styles";
import { Feather } from "@expo/vector-icons";
import { Pressable, Text, View } from "react-native";
type Props = {
label?: string;
placeholder?: string;
value: string;
onPress?: () => void;
info?: string;
itemLeft?: React.ReactNode;
error?: boolean;
errorText?: string;
required?: boolean;
round?: boolean
};
export default function SelectForm({ label, value, placeholder, onPress, info, error, errorText, required, itemLeft, round }: Props) {
return (
<View style={[Styles.mb10]}>
{
label != undefined && (
<Text style={[Styles.mb05, { textTransform: "capitalize" }, error && Styles.cError]}>
{label}
{required && (<Text style={Styles.cError}>*</Text>)}
</Text>
)
}
<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" />
{
value ? (
<Text style={[Styles.cBlack]}>{value}</Text>
) : (
<Text style={[Styles.cGray]}>{placeholder}</Text>
)
}
</View>
</Pressable>
{error && (<Text style={[Styles.textInformation, Styles.cError]}>{errorText}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, , Styles.cGray]}>{info}</Text>)}
</View>
)
}

21
constants/Styles.ts
View File

@@ -104,6 +104,12 @@ const Styles = StyleSheet.create({
ph15: {
paddingHorizontal: 15,
},
pv10: {
paddingVertical: 10
},
pv15: {
paddingVertical: 15
},
p15: {
padding: 15
},
@@ -325,6 +331,21 @@ const Styles = StyleSheet.create({
paddingHorizontal: 20,
height: '80%'
},
wrapBtnTab: {
justifyContent: 'space-between',
flexDirection: 'row',
marginBottom: 15,
borderRadius: 20,
padding: 5,
backgroundColor: 'white',
},
itemSelectModal: {
padding: 10,
flexDirection: 'row',
justifyContent: 'space-between',
borderColor: '#d6d8f6',
borderBottomWidth: 1
}
})
export default Styles;