upd: skeleton dokumen

Deskripsi:
- dokumen divisi

NO Issues
This commit is contained in:
amel
2025-06-09 10:55:57 +08:00
parent 81e55ef74a
commit d585f541ac

View File

@@ -9,6 +9,7 @@ import { InputForm } from "@/components/inputForm";
import MenuItemRow from "@/components/menuItemRow";
import ModalFloat from "@/components/modalFloat";
import ModalSelectMultiple from "@/components/modalSelectMultiple";
import Skeleton from "@/components/skeleton";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import {
@@ -69,6 +70,8 @@ export default function DocumentDivision() {
const [modalMore, setModalMore] = useState(false);
const [isRename, setRename] = useState(false);
const dispatch = useDispatch();
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 3 })
const update = useSelector((state: any) => state.dokumenUpdate);
const [bodyRename, setBodyRename] = useState({
id: "",
@@ -80,6 +83,7 @@ export default function DocumentDivision() {
async function handleLoad() {
try {
setLoading(true)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetDocument({
user: hasil,
@@ -91,6 +95,8 @@ export default function DocumentDivision() {
setDataJalur(response.jalur);
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
@@ -294,67 +300,80 @@ export default function DocumentDivision() {
<ScrollView style={{ height: "100%" }}>
<View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.rowItemsCenter]}>
{dataJalur.map((item, index) => (
<Pressable
key={index}
style={[Styles.rowItemsCenter]}
onPress={() => {
setPath(item.id);
}}
>
{item.id != "home" && (
<AntDesign name="right" style={[Styles.mh05, Styles.mt02]} />
)}
<Text> {item.name} </Text>
</Pressable>
))}
</View>
<View>
{data.length > 0 ? (
data.map((item, index) => {
const isSelected = selectedFiles.some(
(i: any) => i?.id == item.id
);
return (
<ItemFile
{
loading ?
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={60} height={10} borderRadius={10} style={[Styles.mr05]} />
))
:
dataJalur.map((item, index) => (
<Pressable
key={index}
category={
item.category == "FOLDER"
? item.share
? "folder-shared"
: "folder"
: item.share
? "file-shared"
: "file"
}
title={
item.category == "FOLDER"
? item.name
: `${item.name}.${item.extension}`
}
dateTime={item.createdAt}
onChecked={() => {
handleCheckboxChange(index);
}}
checked={isSelected}
style={[Styles.rowItemsCenter]}
onPress={() => {
setPath(item.id);
}}
/>
);
})
) : (
<Text
style={[
Styles.textDefault,
Styles.cGray,
Styles.mt15,
{ textAlign: "center" },
]}
>
Tidak ada dokumen
</Text>
)}
>
{item.id != "home" && (
<AntDesign name="right" style={[Styles.mh05, Styles.mt02]} />
)}
<Text> {item.name} </Text>
</Pressable>
))
}
</View>
<View>
{
loading ?
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} widthType="percent" height={50} borderRadius={10} />
))
:
data.length > 0 ? (
data.map((item, index) => {
const isSelected = selectedFiles.some(
(i: any) => i?.id == item.id
);
return (
<ItemFile
key={index}
category={
item.category == "FOLDER"
? item.share
? "folder-shared"
: "folder"
: item.share
? "file-shared"
: "file"
}
title={
item.category == "FOLDER"
? item.name
: `${item.name}.${item.extension}`
}
dateTime={item.createdAt}
onChecked={() => {
handleCheckboxChange(index);
}}
checked={isSelected}
onPress={() => {
setPath(item.id);
}}
/>
);
})
) : (
<Text
style={[
Styles.textDefault,
Styles.cGray,
Styles.mt15,
{ textAlign: "center" },
]}
>
Tidak ada dokumen
</Text>
)}
</View>
</View>
</ScrollView>