front:
Deskripsi: - progress - judul pada carousel paper No Issues
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -338,7 +338,7 @@ const Styles = StyleSheet.create({
|
||||
height: 20,
|
||||
backgroundColor: '#ccc',
|
||||
borderRadius: 10,
|
||||
margin: 10,
|
||||
margin: 0,
|
||||
width: '90%'
|
||||
},
|
||||
contentBar: {
|
||||
|
||||
Reference in New Issue
Block a user