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

upd: refresh control

Browse Source 
deskripsi:
- warna refresh control pada semua fitur
- warna bottom pada modal select

No Issues
This commit is contained in:
amaliadwiy
2026-02-18 16:35:04 +08:00
parent 64aaafa2be
commit 31b7cf6a30
28 changed files with 124 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/(application)/announcement/[id].tsx
View File

@@ -200,7 +200,7 @@ export default function DetailAnnouncement() {
<RefreshControl
refreshing={refreshing}
onRefresh={() => handleRefresh()}
tintColor={colors.primary}
tintColor={colors.icon}
/>
}
>

2
app/(application)/announcement/index.tsx
View File

@@ -130,7 +130,7 @@ export default function Announcement() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.primary}
tintColor={colors.icon}
/>
}
/>

2
app/(application)/banner/index.tsx
View File

@@ -133,7 +133,7 @@ export default function BannerList() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.primary}
tintColor={colors.icon}
/>
}
style={[Styles.h100, { backgroundColor: colors.background }]}

2
app/(application)/discussion/[id].tsx
View File

@@ -247,7 +247,7 @@ export default function DetailDiscussionGeneral() {
<RefreshControl
refreshing={refreshing}
onRefresh={() => handleRefresh()}
tintColor={colors.primary}
tintColor={colors.icon}
/>
}
>

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

@@ -166,7 +166,7 @@ export default function Discussion() {
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color={colors.dimmed} style={Styles.mr05} />
<Text style={[Styles.textInformation, {color: colors.dimmed}, Styles.mb05]}>Diskusikan</Text>
<Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]}>Diskusikan</Text>
</View>
}
rightBottomInfo={`${item.total_komentar} Komentar`}
@@ -182,7 +182,7 @@ export default function Discussion() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.primary}
tintColor={colors.icon}
/>
}
/>

1
app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx
View File

@@ -180,6 +180,7 @@ export default function DetailEventCalendar() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
>

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

@@ -155,6 +155,7 @@ export default function CalendarDivision() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
style={[Styles.h100]}

1
app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
View File

@@ -315,6 +315,7 @@ export default function DiscussionDetail() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
>

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

@@ -204,6 +204,7 @@ export default function DiscussionDivision() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
/>

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

@@ -415,6 +415,7 @@ export default function DocumentDivision() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}>
<View style={[Styles.p15, Styles.mb100]}>

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

@@ -127,6 +127,7 @@ export default function DetailTaskDivision() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
>

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

@@ -235,6 +235,7 @@ export default function ListTask() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
/>
@@ -301,6 +302,7 @@ export default function ListTask() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
/>

1
app/(application)/division/[id]/index.tsx
View File

@@ -78,6 +78,7 @@ export default function DetailDivisionFitur() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
showsVerticalScrollIndicator={false}

1
app/(application)/division/[id]/info.tsx
View File

@@ -186,6 +186,7 @@ export default function InformationDivision() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
style={[Styles.h100, { backgroundColor: colors.background }]}

2
app/(application)/division/index.tsx
View File

@@ -253,6 +253,7 @@ export default function ListDivision() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
/>
@@ -288,6 +289,7 @@ export default function ListDivision() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
/>

2
app/(application)/group/index.tsx
View File

@@ -190,7 +190,7 @@ export default function Index() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.primary}
tintColor={colors.icon}
/>
}
/>

2
app/(application)/home.tsx
View File

@@ -67,7 +67,7 @@ export default function Home() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.primary}
tintColor={colors.icon}
/>
}
showsVerticalScrollIndicator={false}

2
app/(application)/member/[id].tsx
View File

@@ -99,7 +99,7 @@ export default function MemberDetail() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.text}
tintColor={colors.icon}
/>
}
>

2
app/(application)/member/index.tsx
View File

@@ -171,7 +171,7 @@ export default function Index() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.primary}
tintColor={colors.icon}
/>
}
/>

11
app/(application)/notification.tsx
View File

@@ -1,4 +1,5 @@
import BorderBottomItem from "@/components/borderBottomItem";
import BorderBottomItemVertical from "@/components/borderBottomItemVertical";
import SkeletonTwoItem from "@/components/skeletonTwoItem";
import Text from "@/components/Text";
import { ColorsStatus } from "@/constants/ColorsStatus";
@@ -116,11 +117,11 @@ export default function Notification() {
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return (
<BorderBottomItem
<BorderBottomItemVertical
borderType="bottom"
icon={
<View style={[Styles.iconContent, item.isRead ? ColorsStatus.secondary : ColorsStatus.primary]}>
<Feather name="bell" size={25} color="white" />
<View style={[Styles.iconContent, item.isRead && ColorsStatus.secondary]}>
<Feather name="bell" size={25} color="black" />
</View>
}
title={item.title}
@@ -129,8 +130,8 @@ export default function Notification() {
textColor={item.isRead ? 'gray' : colors.text}
onPress={() => {
handleReadNotification(item.id, item.category, item.idContent)
}}
bgColor={'transparent'}
/>
)
}}
@@ -142,7 +143,7 @@ export default function Notification() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.primary}
tintColor={colors.icon}
/>
}
/>

2
app/(application)/position/index.tsx
View File

@@ -216,7 +216,7 @@ export default function Index() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.primary}
tintColor={colors.icon}
/>
}
/>

39
app/(application)/profile.tsx
View File

@@ -5,20 +5,42 @@ import Text from "@/components/Text";
import { assetUserImage } from "@/constants/AssetsError";
import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles";
import { apiGetProfile } from "@/lib/api";
import { setEntities } from "@/lib/entitiesSlice";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather, Ionicons } from "@expo/vector-icons";
import { Feather } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import { router, Stack } from "expo-router";
import { useState } from "react";
import { Image, Modal, Pressable, SafeAreaView, ScrollView, TouchableOpacity, View } from "react-native";
import { Image, Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
import ImageViewing from 'react-native-image-viewing';
import { useSelector } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
export default function Profile() {
const { colors } = useTheme();
const entities = useSelector((state: any) => state.entities)
const [error, setError] = useState(false)
const [preview, setPreview] = useState(false)
const [refreshing, setRefreshing] = useState(false)
const dispatch = useDispatch()
const { token, decryptToken } = useAuthSession()
async function handleUserLogin() {
const hasil = await decryptToken(String(token?.current))
apiGetProfile({ id: hasil })
.then((data) => dispatch(setEntities(data.data)))
.catch((error) => {
console.error(error)
});
}
const handleRefresh = async () => {
setRefreshing(true)
handleUserLogin()
await new Promise(resolve => setTimeout(resolve, 2000));
setRefreshing(false)
};
return (
<SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
@@ -43,7 +65,16 @@ export default function Profile() {
)
}}
/>
<ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
<ScrollView
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
style={[Styles.h100, { backgroundColor: colors.background }]}
>
<View style={{ flexDirection: 'column' }}>
<LinearGradient
colors={[colors.header, colors.homeGradient]}

2
app/(application)/project/[id]/index.tsx
View File

@@ -118,7 +118,7 @@ export default function DetailProject() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.primary}
tintColor={colors.icon}
/>
}
>

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

@@ -275,6 +275,7 @@ export default function ListProject() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
/>
@@ -353,6 +354,7 @@ export default function ListProject() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.icon}
/>
}
/>

2
app/(application)/search.tsx
View File

@@ -103,7 +103,7 @@ export default function Search() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.primary}
tintColor={colors.icon}
/>
}
>

53
components/borderBottomItemVertical.tsx Normal file
View File

@@ -0,0 +1,53 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import React, { useState } from "react";
import { Dimensions, Pressable, View } from "react-native";
import Text from "./Text";
type Props = {
title?: string
icon: React.ReactNode
desc?: string
rightTopInfo?: string
onPress?: () => void
onLongPress?: () => void
borderType: 'all' | 'bottom' | 'none'
titleWeight?: 'normal' | 'bold'
bgColor?: string
descEllipsize?: boolean
textColor?: string,
titleShowAll?: boolean
}
export default function BorderBottomItemVertical({ title, icon, desc, onPress, onLongPress, rightTopInfo, borderType, titleWeight, bgColor, descEllipsize, textColor, titleShowAll }: Props) {
const { colors } = useTheme();
const textColorFix = textColor ? textColor : colors.text;
return (
<Pressable onLongPress={onLongPress} onPress={onPress}
style={({ pressed }) => [
borderType == 'bottom'
? [Styles.wrapItemBorderBottom, { borderBottomColor: colors.icon + '20' }]
: borderType == 'all'
? [Styles.wrapItemBorderAll, { borderColor: colors.icon + '20' }]
: Styles.wrapItemBorderNone,
bgColor == "transparent" ? { backgroundColor: 'transparent' } : { backgroundColor: colors.card },
]}
>
<View style={Styles.rowItemsCenter}>
{icon}
<View style={[Styles.ml10, { flex: 1 }]}>
<View style={Styles.rowSpaceBetween}>
<View style={{ flex: 1, marginRight: 10 }}>
<Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold, { color: textColorFix }]} numberOfLines={titleShowAll ? 0 : 1} ellipsizeMode='tail'>{title}</Text>
</View>
{
rightTopInfo && <Text style={[Styles.textInformation, Styles.mt05, { color: textColorFix }]}>{rightTopInfo}</Text>
}
</View>
{desc && <Text style={[Styles.textDefault, { textAlign: 'left', color: textColorFix }]} numberOfLines={descEllipsize == false ? 0 : 2} ellipsizeMode='tail'>{desc}</Text>}
</View>
</View>
</Pressable>
)
}

4
components/modalSelect.tsx
View File

@@ -162,7 +162,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
category != 'status-task' ?
data.length > 0 ?
data.map((item: any, index: any) => (
<Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { onChoose(item.id, item.name, item.img) }}>
<Pressable key={index} style={[Styles.itemSelectModal, {borderColor:colors.icon+'20'}]} onPress={() => { onChoose(item.id, item.name, item.img) }}>
{
category == 'member'
?
@@ -188,7 +188,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
<>
{
dataStatus.map((item: any, index: any) => (
<Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => {
<Pressable key={index} style={[Styles.itemSelectModal, {borderColor:colors.icon+'20'}]} onPress={() => {
onSelect(item)
close(false)
}}>

3
constants/Styles.ts
View File

@@ -479,7 +479,7 @@ const Styles = StyleSheet.create({
borderColor: '#d6d8f6',
borderWidth: 1,
borderRadius: 5,
marginBottom: 10
marginBottom: 5
},
wrapItemBorderNone: {
padding: 10,
@@ -584,7 +584,6 @@ const Styles = StyleSheet.create({
padding: 10,
flexDirection: 'row',
justifyContent: 'space-between',
borderColor: '#d6d8f6',
borderBottomWidth: 1,
alignItems: 'center'
},