214 lines
11 KiB
TypeScript
214 lines
11 KiB
TypeScript
import { ColorsStatus } from "@/constants/ColorsStatus";
|
|
import Styles from "@/constants/Styles";
|
|
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
|
|
import { useState } from "react";
|
|
import { Pressable, ScrollView, Text, ToastAndroid, View } from "react-native";
|
|
import { useSharedValue } from "react-native-reanimated";
|
|
import AlertKonfirmasi from "../alertKonfirmasi";
|
|
import DrawerBottom from "../drawerBottom";
|
|
import { InputForm } from "../inputForm";
|
|
import ItemAccordion from "../itemAccordion";
|
|
import ItemDetailMember from "../itemDetailMember";
|
|
import MenuItemRow from "../menuItemRow";
|
|
import ModalFloat from "../modalFloat";
|
|
import ModalSelectMultiple from "../modalSelectMultiple";
|
|
import ModalSalinMove from "./modalSalinMove";
|
|
|
|
|
|
type Props = {
|
|
onDone: () => void
|
|
}
|
|
|
|
export default function MenuBottomSelectDocument({ onDone }: Props) {
|
|
const [isModal, setModal] = useState(false)
|
|
const [isInformasi, setInformasi] = useState(false)
|
|
const [isRename, setRename] = useState(false)
|
|
const [isShare, setShare] = useState(false)
|
|
const [isMoveCopy, setMoveCopy] = useState(false)
|
|
const [valMoveCopy, setValMoveCopy] = useState<'move' | 'copy'>('copy')
|
|
const open = useSharedValue(false)
|
|
|
|
const onPress = () => {
|
|
open.value = !open.value;
|
|
};
|
|
|
|
function handleMoveCopy(val: 'copy' | 'move') {
|
|
setValMoveCopy(val)
|
|
setModal(false)
|
|
setMoveCopy(true)
|
|
}
|
|
|
|
|
|
return (
|
|
<>
|
|
<View style={[ColorsStatus.primary, Styles.bottomMenuSelectDocument]}>
|
|
<View style={[Styles.rowItemsCenter, { justifyContent: 'center' }]}>
|
|
<MenuItemRow
|
|
icon={<MaterialCommunityIcons name="download-outline" color="white" size={25} />}
|
|
title="Unduh"
|
|
onPress={() => { }}
|
|
column="many"
|
|
color="white"
|
|
/>
|
|
<MenuItemRow
|
|
icon={<MaterialCommunityIcons name="trash-can-outline" color="white" size={25} />}
|
|
title="Hapus"
|
|
onPress={() => {
|
|
AlertKonfirmasi({
|
|
title: 'Konfirmasi',
|
|
desc: 'Apakah anda yakin ingin menghapus data?',
|
|
|
|
onPress: () => {
|
|
onDone()
|
|
ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
|
|
}
|
|
})
|
|
}}
|
|
column="many"
|
|
color="white"
|
|
/>
|
|
<MenuItemRow
|
|
icon={<MaterialCommunityIcons name="pencil-outline" color="white" size={25} />}
|
|
title="Ganti Nama"
|
|
onPress={() => { setRename(true) }}
|
|
column="many"
|
|
color="white"
|
|
/>
|
|
<MenuItemRow
|
|
icon={<MaterialCommunityIcons name="share-variant-outline" color="white" size={25} />}
|
|
title="Bagikan"
|
|
onPress={() => { setShare(true) }}
|
|
column="many"
|
|
color="white"
|
|
/>
|
|
<MenuItemRow
|
|
icon={<MaterialCommunityIcons name="dots-vertical" color="white" size={25} />}
|
|
title="Lainnya"
|
|
onPress={() => { setModal(true) }}
|
|
column="many"
|
|
color="white"
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
<ModalFloat title="Ganti Nama Dokumen" isVisible={isRename} setVisible={setRename}
|
|
onSubmit={() => {
|
|
onDone()
|
|
ToastAndroid.show('Berhasil mengganti nama dokumen', ToastAndroid.SHORT)
|
|
}}>
|
|
<View>
|
|
<InputForm type="default" placeholder="Nama File" required label="Nama File" />
|
|
</View>
|
|
</ModalFloat>
|
|
|
|
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="">
|
|
<View style={Styles.rowItemsCenter}>
|
|
<MenuItemRow
|
|
icon={<MaterialCommunityIcons name="folder-move-outline" color="black" size={25} />}
|
|
title="Pindah"
|
|
onPress={() => { handleMoveCopy('move') }}
|
|
/>
|
|
<MenuItemRow
|
|
icon={<MaterialCommunityIcons name="folder-multiple-outline" color="black" size={25} />}
|
|
title="Salin"
|
|
onPress={() => { handleMoveCopy('copy') }}
|
|
/>
|
|
<MenuItemRow
|
|
icon={<MaterialCommunityIcons name="information-variant" color="black" size={25} />}
|
|
title="Informasi"
|
|
onPress={() => { setModal(false); setInformasi(true) }}
|
|
/>
|
|
</View>
|
|
</DrawerBottom>
|
|
|
|
<DrawerBottom animation="slide" isVisible={isInformasi} setVisible={setInformasi} title="Informasi Dokumen" height={80}>
|
|
<View style={[Styles.contentItemCenter, Styles.mb10]}>
|
|
<Ionicons name="document-text-sharp" color={'#9fcff8'} size={80} />
|
|
</View>
|
|
|
|
<View>
|
|
<ItemDetailMember category="dokumen" value="123456789" border />
|
|
<ItemDetailMember category="type" value="file" border />
|
|
<ItemDetailMember category="location" value="home" border />
|
|
<ItemDetailMember category="owner" value="Sosial Kemasyarakatan" border />
|
|
<ItemDetailMember category="calendar" value="12 Maret 2025" border />
|
|
<Pressable style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.wrapItemBorderBottom]} onPress={onPress}>
|
|
<View style={[Styles.rowItemsCenter]}>
|
|
<MaterialCommunityIcons name="share-variant-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Telah dibagikan ke divisi</Text>
|
|
</View>
|
|
<MaterialCommunityIcons name="chevron-down" size={22} color="black" />
|
|
</Pressable>
|
|
<ItemAccordion isExpanded={open} viewKey="Accordion" duration={500}>
|
|
<ScrollView style={[Styles.w100, { height: 200 }]} >
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
|
|
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
|
|
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
|
|
</View>
|
|
</ScrollView>
|
|
</ItemAccordion>
|
|
</View>
|
|
</DrawerBottom>
|
|
|
|
<ModalSelectMultiple choose="dinas" title="Bagikan" category="share-division" open={isShare} close={setShare}
|
|
onSelect={() => {
|
|
ToastAndroid.show('Success', ToastAndroid.SHORT)
|
|
setShare(false)
|
|
}}
|
|
/>
|
|
<ModalSalinMove open={isMoveCopy} close={setMoveCopy} category={valMoveCopy} onConfirm={(value: string) => { }} dataChoose={[]} />
|
|
</>
|
|
)
|
|
} |