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

upd: ui jabatan

Browse Source 
Deskripsi:
- ui list jabatan
- ui filter modal
- ui tambah jabatan
- ui select option
- ui modal select option
- ui edit jabatan

No Issues
This commit is contained in:
amel
2025-02-28 15:15:15 +08:00
parent 9c24c9b1a5
commit 81a234d5cd
11 changed files with 402 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/borderBottomItem.tsx
View File

@@ -19,7 +19,7 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
<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>

5
components/drawerBottom.tsx
View File

@@ -8,13 +8,14 @@ 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)}>

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]} onPress={() => {
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 onPress={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>
)
}