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

upd: projeect

Browse Source 
Deskripsi:
- ui list project
- ui grid project
- ui create project

No Issues
This commit is contained in:
amel
2025-03-05 15:35:21 +08:00
parent 6afe99c314
commit 8806f33a8d
17 changed files with 400 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/buttonTab.tsx
View File

@@ -15,7 +15,7 @@ type Props = {
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() }}>
<TouchableOpacity style={[Styles.btnTab, (active == value) && ColorsStatus.orange, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
{icon}
<Text style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : 'black' }]}>{label}</Text>
</TouchableOpacity>

2
components/home/fiturHome.tsx
View File

@@ -11,7 +11,7 @@ export default function FiturHome() {
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Fitur</Text>
<View style={[Styles.rowSpaceBetween]}>
<ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color="black" />} text="Divisi" />
<ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" />
<ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
<ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
<ButtonFiturMenu icon={<MaterialCommunityIcons name="view-grid" size={35} color="black" />} text="Semua" onPress={() => { router.push('/feature') }} />
</View>

7
components/inputForm.tsx
View File

@@ -1,5 +1,5 @@
import Styles from "@/constants/Styles";
import { View, TextInput, Text } from "react-native";
import { View, TextInput, Text, Dimensions } from "react-native";
type Props = {
label?: string;
@@ -13,10 +13,12 @@ type Props = {
required?: boolean;
type: 'default' | 'visible-password' | 'numeric'
round?: boolean
width?: number
};
export function InputForm({ label, placeholder, onChange, info, error, errorText, required, itemLeft, itemRight, type, round }: Props) {
export function InputForm({ label, placeholder, onChange, info, error, errorText, required, itemLeft, itemRight, type, round, width }: Props) {
const lebar = Dimensions.get("window").width;
if (itemLeft != undefined || itemRight != undefined) {
return (
@@ -35,6 +37,7 @@ export function InputForm({ label, placeholder, onChange, info, error, errorText
placeholder={placeholder}
keyboardType={type}
onChangeText={onChange}
style={{ width: width && lebar * width / 100 }}
/>
</View>
{error && (<Text style={[Styles.textInformation, Styles.cError]}>{errorText}</Text>)}

3
components/inputSearch.tsx
View File

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

7
components/modalFilter.tsx
View File

@@ -9,7 +9,7 @@ import { router } from "expo-router"
type Props = {
open: boolean,
close: (value: boolean) => void
page: 'position' | 'member' | 'discussion'
page: 'position' | 'member' | 'discussion' | 'project'
}
export default function ModalFilter({ open, close, page }: Props) {
@@ -34,7 +34,10 @@ export default function ModalFilter({ open, close, page }: Props) {
<View>
<ButtonForm text="Terapkan" onPress={() => {
close(false)
router.push(`/${page}?active=true`)
page == 'project' ?
router.push(`/${page}?status=0`)
:
router.push(`/${page}?active=true`)
}} />
</View>
</View>

23
components/paperGridContent.tsx
View File

@@ -1,23 +1,26 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
import ProgressBar from "./progressBar";
import { Pressable, Text, View } from "react-native";
type Props = {
content: 'carousel' | 'page';
children: React.ReactNode;
title: string
headerColor: 'primary' | 'warning'
onPress?: () => void
};
export default function PaperGridContent({ content, children, title, headerColor }: Props) {
export default function PaperGridContent({ content, children, title, headerColor, onPress }: Props) {
return (
<View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}>
<View style={[Styles.headerPaperGrid]}>
<Text style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite]}>{title}</Text>
<Pressable onPress={onPress}>
<View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}>
<View style={[Styles.headerPaperGrid]}>
<Text style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite]}>{title}</Text>
</View>
<View style={[Styles.contentPaperGrid]}>
{children}
</View>
</View>
<View style={[Styles.contentPaperGrid]}>
{children}
</View>
</View>
</Pressable>
)
}

9
components/progressBar.tsx
View File

@@ -2,7 +2,12 @@ import Styles from "@/constants/Styles";
import { useEffect, useState } from "react";
import { Animated, Text, View } from "react-native";
export default function ProgressBar() {
type Props = {
margin?: number
}
export default function ProgressBar({ margin }: Props) {
const [progress, setProgress] = useState(new Animated.Value(0));
@@ -16,7 +21,7 @@ export default function ProgressBar() {
}, []);
return (
<View style={Styles.wrapBar}>
<View style={[Styles.wrapBar, { margin: margin && margin }]}>
<Animated.View style={[Styles.contentBar, { width: progress }]} />
</View>
)

66
components/project/headerProjectDetail.tsx Normal file
View File

@@ -0,0 +1,66 @@
import { useState } from "react"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import { View } from "react-native"
import Styles from "@/constants/Styles"
import MenuItemRow from "../menuItemRow"
import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
type Props = {
id: string | string[]
}
export default function HeaderRightProjectDetail({ id }: Props) {
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 Tugas"
onPress={() => {
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="file-plus" color="black" size={25} />}
title="Tambah File"
onPress={() => {
}}
/>
<MenuItemRow
icon={<MaterialIcons name="groups" color="black" size={25} />}
title="Tambah Anggota"
onPress={() => {
setVisible(false)
// router.push(`/discussion/member/${id}`)
}}
/>
</View>
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
title="Edit"
onPress={() => {
setVisible(false)
// router.push(`/discussion/edit/${id}`)
}}
/>
<MenuItemRow
icon={<MaterialIcons name="close" color="black" size={25} />}
title="Batal"
onPress={() => {
}}
/>
</View>
</DrawerBottom>
</>
)
}

40
components/project/headerProjectList.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { useState } from "react"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import { View } from "react-native"
import Styles from "@/constants/Styles"
import MenuItemRow from "../menuItemRow"
import { AntDesign } from "@expo/vector-icons"
import { router } from "expo-router"
import ModalFilter from "../modalFilter"
export default function HeaderRightProjectList() {
const [isVisible, setVisible] = useState(false)
const [isFilter, setFilter] = 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 Kegiatan"
onPress={() => {
setVisible(false)
router.push('/project/create')
}}
/>
<MenuItemRow
icon={<AntDesign name="filter" color="black" size={25} />}
title="Filter"
onPress={() => {
setVisible(false)
setFilter(true)
}}
/>
</View>
</DrawerBottom>
<ModalFilter close={() => { setFilter(false) }} open={isFilter} page="project" />
</>
)
}

23
components/sectionProgress.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { AntDesign } from "@expo/vector-icons";
import { Text, View } from "react-native";
import ProgressBar from "./progressBar";
type Props = {
text: string
}
export default function SectionProgress({ text }: Props) {
return (
<View style={[ColorsStatus.lightGreen, Styles.p15, { flexDirection: 'row', borderRadius: 10, alignItems: 'center' }]}>
<View style={[Styles.iconContent, ColorsStatus.orange, { alignItems: 'center', justifyContent: 'center' }]}>
<AntDesign name="areachart" size={30} color={'#384288'} />
</View>
<View style={[Styles.ml10, { flex: 1 }]}>
<Text style={[Styles.mb05]}>{text}</Text>
<ProgressBar margin={0} />
</View>
</View>
)
}

13
components/sectionTanggalTugas.tsx Normal file
View File

@@ -0,0 +1,13 @@
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
export default function SectionTanggalTugas() {
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Tanggal Dan Tugas</Text>
<View style={[Styles.wrapPaper]}>
</View>
</View>
)
}