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

front:

Browse Source 
Deskripsi:
- progress
- judul pada carousel paper

No Issues
This commit is contained in:
amal
2025-07-10 17:06:17 +08:00
parent 0df97a3a4b
commit 33112cdd31
7 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/(application)/division/[id]/(fitur-division)/task/index.tsx
View File

@@ -241,7 +241,7 @@ export default function ListTask() {
title={item.title} title={item.title}
headerColor="primary" headerColor="primary"
> >
<ProgressBar category="page" value={item.progress} /> <ProgressBar category="list" value={item.progress} />
<View style={[Styles.rowSpaceBetween]}> <View style={[Styles.rowSpaceBetween]}>
<Text></Text> <Text></Text>
<LabelStatus <LabelStatus
@@ -279,7 +279,7 @@ export default function ListTask() {
title={item.title} title={item.title}
headerColor="primary" headerColor="primary"
> >
<ProgressBar category="page" value={item.progress} /> <ProgressBar category="list" value={item.progress} />
<View style={[Styles.rowSpaceBetween]}> <View style={[Styles.rowSpaceBetween]}>
<Text></Text> <Text></Text>
<LabelStatus <LabelStatus

4
app/(application)/project/index.tsx
View File

@@ -281,7 +281,7 @@ export default function ListProject() {
title={item.title} title={item.title}
headerColor="primary" headerColor="primary"
> >
<ProgressBar value={item.progress} category="page" /> <ProgressBar value={item.progress} category="list" />
<View style={[Styles.rowSpaceBetween]}> <View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefault, Styles.cGray]}> <Text style={[Styles.textDefault, Styles.cGray]}>
{item.createdAt} {item.createdAt}
@@ -323,7 +323,7 @@ export default function ListProject() {
title={item.title} title={item.title}
headerColor="primary" headerColor="primary"
> >
<ProgressBar value={item.progress} category="page" /> <ProgressBar value={item.progress} category="list" />
<View style={[Styles.rowSpaceBetween]}> <View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefault, Styles.cGray]}> <Text style={[Styles.textDefault, Styles.cGray]}>
{item.createdAt} {item.createdAt}

2
components/home/divisionHome.tsx
View File

@@ -60,7 +60,7 @@ export default function DivisionHome() {
snapEnabled={true} snapEnabled={true}
vertical={false} vertical={false}
renderItem={({ index }) => ( renderItem={({ index }) => (
<PaperGridContent onPress={() => { router.push(`/division/${data[index].id}`) }} content="carousel" title={data[index].name} headerColor="warning"> <PaperGridContent titleTail={1} onPress={() => { router.push(`/division/${data[index].id}`) }} content="carousel" title={data[index].name} headerColor="warning">
<View> <View>
<Text style={{ fontSize: 50, textAlign: "center", fontWeight: 'bold' }}>{data[index].jumlah}</Text> <Text style={{ fontSize: 50, textAlign: "center", fontWeight: 'bold' }}>{data[index].jumlah}</Text>
<Text style={[Styles.textSubtitle, { textAlign: "center" }]}>KEGIATAN</Text> <Text style={[Styles.textSubtitle, { textAlign: "center" }]}>KEGIATAN</Text>

2
components/home/projectHome.tsx
View File

@@ -63,7 +63,7 @@ export default function ProjectHome() {
snapEnabled={true} snapEnabled={true}
vertical={false} vertical={false}
renderItem={({ index }) => ( renderItem={({ index }) => (
<PaperGridContent content="carousel" onPress={() => { router.push(`/project/${data[index].id}`) }} title={data[index].title} headerColor="primary"> <PaperGridContent titleTail={1} content="carousel" onPress={() => { router.push(`/project/${data[index].id}`) }} title={data[index].title} headerColor="primary">
<ProgressBar value={data[index].progress} category="carousel" /> <ProgressBar value={data[index].progress} category="carousel" />
<View style={[Styles.rowSpaceBetween]}> <View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefault, Styles.cGray]}>{data[index].createdAt}</Text> <Text style={[Styles.textDefault, Styles.cGray]}>{data[index].createdAt}</Text>

5
components/paperGridContent.tsx
View File

@@ -9,13 +9,14 @@ type Props = {
headerColor: 'primary' | 'warning' headerColor: 'primary' | 'warning'
onPress?: () => void onPress?: () => void
contentPosition?: 'top' | 'center' contentPosition?: 'top' | 'center'
titleTail?: number
}; };
export default function PaperGridContent({ content, children, title, headerColor, onPress, contentPosition }: Props) { export default function PaperGridContent({ content, children, title, headerColor, onPress, contentPosition, titleTail }: Props) {
return ( return (
<Pressable onPress={onPress}> <Pressable onPress={onPress}>
<View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}> <View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}>
<View style={[Styles.headerPaperGrid]}> <View style={[Styles.headerPaperGrid]}>
<Text style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite, {textAlign: 'center' }]}>{title}</Text> <Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite, {textAlign: 'center' }]}>{title}</Text>
</View> </View>
<View style={[contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid]}> <View style={[contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid]}>
{children} {children}

5
components/progressBar.tsx
View File

@@ -6,18 +6,19 @@ import { Animated, View } from "react-native";
type Props = { type Props = {
margin?: number margin?: number
value: number value: number
category: "page" | "carousel" category: "page" | "carousel" | "list"
} }
export default function ProgressBar({ margin, value, category }: Props) { export default function ProgressBar({ margin, value, category }: Props) {
const [progress, setProgress] = useState(new Animated.Value(0)); const [progress, setProgress] = useState(new Animated.Value(0));
const [totalProgress, setTotalProgress] = useState(category == 'carousel' ? 255 : 290); const [totalProgress, setTotalProgress] = useState(category == 'carousel' ? 232 : category == 'page' ? 245 : 290);
useEffect(() => { useEffect(() => {
Animated.timing(progress, { Animated.timing(progress, {
// carousel:: 100% = 255 // carousel:: 100% = 255
// page:: 100% = 290 // page:: 100% = 290
// wrapbar :: 90%
toValue: value / 100 * totalProgress, toValue: value / 100 * totalProgress,
duration: 1000, duration: 1000,
useNativeDriver: false useNativeDriver: false

2
constants/Styles.ts
View File

@@ -338,7 +338,7 @@ const Styles = StyleSheet.create({
height: 20, height: 20,
backgroundColor: '#ccc', backgroundColor: '#ccc',
borderRadius: 10, borderRadius: 10,
margin: 10, margin: 0,
width: '90%' width: '90%'
}, },
contentBar: { contentBar: {