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

upd: ui group

Browse Source 
Deskripsi:
- ui page group
- ui tab button
- ui list data group
- ui modal bottom drawer
- ui menu item row
- ui tambah data

No Issues
This commit is contained in:
amel
2025-02-27 17:37:44 +08:00
parent f7b8c08f20
commit a22719780b
14 changed files with 321 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,6 +11,7 @@ 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>
<StatusBar style="light" />
</>

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

@@ -25,8 +25,8 @@ export default function Feature() {
<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={<AntDesign name="tags" size={35} color="black" />} text="Lembaga Desa" />
<ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color="black" />} text="Tema" />
<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>
<View style={[Styles.rowSpaceBetween, Styles.mb15]}>
<ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" />

58
app/(application)/group/_layout.tsx Normal file
View File

@@ -0,0 +1,58 @@
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 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";
export default function RootLayout() {
const [isVisible, setVisible] = useState(false)
const [isVisibleTambah, setVisibleTambah] = useState(false)
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: 'Lembaga Desa',
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 Lembaga"
onPress={() => { setVisibleTambah(true) }}
/>
</View>
</DrawerBottom>
<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"/>
</View>
<View>
<ButtonForm text="SIMPAN" onPress={() => { handleTambah() }} />
</View>
</View>
</DrawerBottom>
</>
)
}

85
app/(application)/group/index.tsx Normal file
View File

@@ -0,0 +1,85 @@
import BorderBottomItem from "@/components/borderBottomItem";
import ButtonTab from "@/components/buttonTab";
import InputSearch from "@/components/inputSearch";
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";
export default function Index() {
const { active } = useLocalSearchParams<{ active?: string }>();
return (
<SafeAreaView>
<ScrollView>
<View style={[Styles.p15]}>
<View style={{ justifyContent: 'space-between', flexDirection: 'row', marginBottom: 15, backgroundColor: 'white', borderRadius: 20, padding: 5 }}>
<ButtonTab
active={active == "false" ? "false" : "true"}
value="true"
onPress={() => { router.push('/group?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('/group?active=false') }}
label="Tidak Aktif"
icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
n={2} />
</View>
<InputSearch />
<View>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
</View>
}
title="Adat"
/>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
</View>
}
title="Dinas"
/>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
</View>
}
title="PKK"
/>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
</View>
}
title="Karang Taruna"
/>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
</View>
}
title="Koperasi"
/>
</View>
</View>
</ScrollView>
</SafeAreaView>
)
}

9
app/(application)/notification.tsx
View File

@@ -21,6 +21,7 @@ export default function Notification() {
<View style={[Styles.wrapPaper, Styles.mb100]}>
<View style={[Styles.mb05]}>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -31,6 +32,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -41,6 +43,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -51,6 +54,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -61,6 +65,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -71,6 +76,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -81,6 +87,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -91,6 +98,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
@@ -101,6 +109,7 @@ export default function Notification() {
desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
/>
<BorderBottomItem
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />

16
app/(application)/search.tsx
View File

@@ -1,6 +1,7 @@
import BorderBottomItem from "@/components/borderBottomItem";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { InputForm } from "@/components/inputForm";
import InputSearch from "@/components/inputSearch";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { AntDesign, Feather, MaterialIcons } from "@expo/vector-icons";
@@ -20,16 +21,12 @@ export default function Search() {
/>
<ScrollView>
<View style={[Styles.p15]}>
<InputForm
type="default"
placeholder="Pencarian"
round
itemLeft={<Feather name="search" size={20} color="grey" />}
/>
<InputSearch />
<View style={[Styles.wrapPaper, Styles.mb100]}>
<View style={[Styles.mb30]}>
<Text>ANGGOTA</Text>
<BorderBottomItem
borderType="bottom"
icon={<Image
source={require("../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
@@ -38,6 +35,7 @@ export default function Search() {
subtitle="Dinas - Bendaraha"
/>
<BorderBottomItem
borderType="bottom"
icon={<Image
source={require("../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
@@ -47,6 +45,7 @@ export default function Search() {
/>
<BorderBottomItem
borderType="bottom"
icon={<Image
source={require("../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
@@ -59,6 +58,7 @@ export default function Search() {
<View style={[Styles.mb30]}>
<Text>DIVISI</Text>
<BorderBottomItem
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<MaterialIcons name="group" size={25} color="white" />
@@ -68,6 +68,7 @@ export default function Search() {
subtitle="Dinas"
/>
<BorderBottomItem
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<MaterialIcons name="group" size={25} color="white" />
@@ -80,6 +81,7 @@ export default function Search() {
<View style={[Styles.mb05]}>
<Text>KEGIATAN</Text>
<BorderBottomItem
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<AntDesign name="areachart" size={25} color="white" />
@@ -89,6 +91,7 @@ export default function Search() {
subtitle="Dinas"
/>
<BorderBottomItem
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<AntDesign name="areachart" size={25} color="white" />
@@ -98,6 +101,7 @@ export default function Search() {
subtitle="Dinas"
/>
<BorderBottomItem
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<AntDesign name="areachart" size={25} color="white" />

5
components/borderBottomItem.tsx
View File

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

23
components/buttonTab.tsx Normal file
View File

@@ -0,0 +1,23 @@
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 = {
active: string
value: string
onPress: () => void
label: string
icon: React.ReactNode
n: number
}
export default function ButtonTab({ active, value, onPress, label, n, icon }: Props) {
return (
<TouchableOpacity style={[Styles.btnTab, (active == value) ? ColorsStatus.orange : ColorsStatus.white, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
{icon}
<Text style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : 'black' }]}>{label}</Text>
</TouchableOpacity>
)
}

31
components/drawerBottom.tsx Normal file
View File

@@ -0,0 +1,31 @@
import Styles from "@/constants/Styles"
import { MaterialIcons } from "@expo/vector-icons"
import { Modal, Pressable, Text, View } from "react-native"
type Props = {
isVisible: boolean
setVisible: (value: boolean) => void
title?: string
children: React.ReactNode
animation: 'slide' | 'none' | 'fade'
}
export default function DrawerBottom({ isVisible, setVisible, title, children, animation }: Props) {
return (
<Modal animationType={animation} transparent={true} visible={isVisible}>
<View style={[Styles.modalBgTransparant]}>
<View style={Styles.modalContent}>
<View style={Styles.titleContainer}>
<Text style={Styles.textDefault}>{title}</Text>
<Pressable onPress={() => setVisible(false)}>
<MaterialIcons name="close" color="black" size={22} />
</Pressable>
</View>
<View style={Styles.contentContainer}>
{children}
</View>
</View>
</View>
</Modal>
)
}

4
components/inputForm.tsx
View File

@@ -46,10 +46,10 @@ export function InputForm({ label, placeholder, onChange, info, error, errorText
return (
<View style={{ marginBottom: 10 }}>
<View style={[Styles.mb10]}>
{
label != undefined && (
<Text style={[{ marginBottom: 5, textTransform: "capitalize" }, error && Styles.cError]}>
<Text style={[Styles.mb05, { textTransform: "capitalize" }, error && Styles.cError]}>
{label}
{required && (<Text style={Styles.cError}>*</Text>)}
</Text>

14
components/inputSearch.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { Feather } from "@expo/vector-icons";
import { InputForm } from "./inputForm";
export default function InputSearch({ onChange }: { onChange?: (val: string) => void }) {
return (
<InputForm
type="default"
placeholder="Pencarian"
round
itemLeft={<Feather name="search" size={20} color="grey" />}
onChange={onChange}
/>
)
}

19
components/menuItemRow.tsx Normal file
View File

@@ -0,0 +1,19 @@
import Styles from "@/constants/Styles"
import { Pressable, Text, View } from "react-native"
type Props = {
onPress: () => void
icon: React.ReactNode
title: string
}
export default function MenuItemRow({ onPress, icon, title }: Props) {
return (
<Pressable onPress={() => { onPress() }} style={[Styles.btnMenuRow]}>
<View style={{ alignItems: 'center' }}>
{icon}
<Text style={[Styles.mt05]}>{title}</Text>
</View>
</Pressable>
)
}

9
constants/ColorsStatus.ts
View File

@@ -13,5 +13,14 @@ export const ColorsStatus = {
},
error: {
backgroundColor: '#DB1514'
},
orange: {
backgroundColor: 'orange'
},
white: {
backgroundColor: 'white'
},
lightGreen: {
backgroundColor: '#d2f0cb'
}
}

57
constants/Styles.ts
View File

@@ -53,6 +53,9 @@ const Styles = StyleSheet.create({
cWhite: {
color: 'white'
},
cBlack: {
color: 'black'
},
cDefault: {
color: '#19345E'
},
@@ -92,6 +95,9 @@ const Styles = StyleSheet.create({
mr10: {
marginRight: 10
},
ml05: {
marginLeft: 5
},
ml10: {
marginLeft: 10
},
@@ -135,9 +141,21 @@ const Styles = StyleSheet.create({
marginTop: 15,
paddingVertical: 10
},
btnTab: {
alignItems: 'center',
paddingVertical: 10,
paddingHorizontal: 15,
borderRadius: 20,
flexDirection: 'row',
justifyContent: 'center'
},
btnMenuRow: {
width: '33%',
alignItems: 'center'
},
inputRoundForm: {
borderRadius: 10,
borderColor: '#19345E',
borderColor: 'gray',
borderWidth: 1,
paddingVertical: 10,
paddingHorizontal: 15,
@@ -251,6 +269,14 @@ const Styles = StyleSheet.create({
borderColor: '#d6d8f6',
borderBottomWidth: 1,
},
wrapItemBorderAll: {
padding: 10,
borderColor: '#d6d8f6',
borderWidth: 1,
borderRadius: 10,
marginBottom: 10
},
userProfileSmall: {
width: 48,
height: 48,
@@ -271,7 +297,34 @@ const Styles = StyleSheet.create({
alignItems: 'center',
borderBottomLeftRadius: 25,
borderBottomRightRadius: 25
}
},
modalBgTransparant: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
flex: 1
},
modalContent: {
width: '100%',
paddingBottom: 20,
backgroundColor: 'white',
borderTopRightRadius: 18,
borderTopLeftRadius: 18,
position: 'absolute',
bottom: 0,
},
titleContainer: {
backgroundColor: 'white',
borderTopRightRadius: 10,
borderTopLeftRadius: 10,
paddingHorizontal: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: 10
},
contentContainer: {
paddingHorizontal: 20,
height: '80%'
},
})
export default Styles;