amaliadwiy
e48456ea7f
- tambah komponen ModalRiwayatApproval dan ModalTolakApproval - update itemSectionTanggalTugas untuk mendukung status menunggu persetujuan - update sectionTanggalTugas (project) dan sectionTanggalTugasTask (divisi) dengan alur approval lengkap - tambah API approval project task dan division task di lib/api.ts - tambah toggle approver di headerMemberDetail dan tampilkan badge approver di detail member - update carouselHome untuk dispatch isApprover ke Redux - update drawerBottom untuk mendukung scroll pada modal - ganti label 'Belum dimulai' menjadi 'Belum ada tugas yang diselesaikan'
80 lines
3.3 KiB
TypeScript
80 lines
3.3 KiB
TypeScript
import Styles from "@/constants/Styles";
|
|
import { useTheme } from "@/providers/ThemeProvider";
|
|
import { MaterialIcons } from "@expo/vector-icons";
|
|
import { Dimensions, KeyboardAvoidingView, Platform, Pressable, View } from "react-native";
|
|
import Modal from 'react-native-modal';
|
|
import Text from "./Text";
|
|
|
|
type Props = {
|
|
isVisible: boolean
|
|
setVisible: (value: boolean) => void
|
|
title?: string
|
|
children: React.ReactNode
|
|
animation?: 'slide' | 'none' | 'fade'
|
|
height?: number
|
|
backdropPressable?: boolean
|
|
keyboard?: boolean
|
|
scrollOffset?: number
|
|
scrollTo?: (p: any) => void
|
|
}
|
|
|
|
export default function DrawerBottom({ isVisible, setVisible, title, children, animation, height, backdropPressable = true, keyboard = false, scrollOffset, scrollTo }: Props) {
|
|
const tinggiScreen = Dimensions.get("window").height;
|
|
const { colors } = useTheme();
|
|
const tinggiInput = height != undefined ? height : 25
|
|
const tinggiFix = tinggiScreen * tinggiInput / 100;
|
|
|
|
return (
|
|
<Modal
|
|
animationIn={"slideInUp"}
|
|
animationOut={"slideOutDown"}
|
|
isVisible={isVisible}
|
|
onSwipeComplete={() => setVisible(false)}
|
|
swipeDirection="down"
|
|
hideModalContentWhileAnimating={true}
|
|
onBackdropPress={() => { setVisible(!backdropPressable) }}
|
|
style={[{ justifyContent: 'flex-end', margin: 0 }]}
|
|
animationOutTiming={500}
|
|
animationInTiming={500}
|
|
backdropTransitionInTiming={500}
|
|
backdropTransitionOutTiming={500}
|
|
useNativeDriverForBackdrop={true}
|
|
propagateSwipe={true}
|
|
scrollTo={scrollTo}
|
|
scrollOffset={scrollOffset}
|
|
scrollOffsetMax={200}
|
|
>
|
|
{
|
|
keyboard ?
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
|
keyboardVerticalOffset={0}
|
|
>
|
|
<View style={[Styles.modalContentNew, { height: tinggiFix, backgroundColor: colors.modalBackground }]}>
|
|
<View style={[Styles.titleContainerNew]}>
|
|
<Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.textDefaultSemiBold, Styles.w90]}>{title}</Text>
|
|
<Pressable onPress={() => setVisible(false)}>
|
|
<MaterialIcons name="close" color={colors.text} size={22} />
|
|
</Pressable>
|
|
</View>
|
|
<View style={Styles.contentContainer}>
|
|
{children}
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
:
|
|
<View style={[Styles.modalContentNew, { height: tinggiFix, backgroundColor: colors.modalBackground }]}>
|
|
<View style={[Styles.titleContainerNew]}>
|
|
<Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.textDefaultSemiBold, Styles.w90]}>{title}</Text>
|
|
<Pressable onPress={() => setVisible(false)}>
|
|
<MaterialIcons name="close" color={colors.text} size={22} />
|
|
</Pressable>
|
|
</View>
|
|
<View style={[Styles.contentContainer, { flex: 1 }]}>
|
|
{children}
|
|
</View>
|
|
</View>
|
|
}
|
|
</Modal>
|
|
)
|
|
} |