Deskripsi:
- progress
- judul pada carousel paper

No Issues
This commit is contained in:
2025-07-10 17:06:17 +08:00
parent 0df97a3a4b
commit 33112cdd31
7 changed files with 13 additions and 11 deletions

View File

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

View File

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

View File

@@ -60,7 +60,7 @@ export default function DivisionHome() {
snapEnabled={true}
vertical={false}
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>
<Text style={{ fontSize: 50, textAlign: "center", fontWeight: 'bold' }}>{data[index].jumlah}</Text>
<Text style={[Styles.textSubtitle, { textAlign: "center" }]}>KEGIATAN</Text>

View File

@@ -63,7 +63,7 @@ export default function ProjectHome() {
snapEnabled={true}
vertical={false}
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" />
<View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefault, Styles.cGray]}>{data[index].createdAt}</Text>

View File

@@ -9,13 +9,14 @@ type Props = {
headerColor: 'primary' | 'warning'
onPress?: () => void
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 (
<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, {textAlign: 'center' }]}>{title}</Text>
<Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite, {textAlign: 'center' }]}>{title}</Text>
</View>
<View style={[contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid]}>
{children}

View File

@@ -6,18 +6,19 @@ import { Animated, View } from "react-native";
type Props = {
margin?: number
value: number
category: "page" | "carousel"
category: "page" | "carousel" | "list"
}
export default function ProgressBar({ margin, value, category }: Props) {
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(() => {
Animated.timing(progress, {
// carousel:: 100% = 255
// page:: 100% = 290
// wrapbar :: 90%
toValue: value / 100 * totalProgress,
duration: 1000,
useNativeDriver: false

View File

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