fix : tampilan

Deskripsi:
- home divisi : caraousel dokumen diganti ga pake caraousel
- home divisi : judul divis
- detail tugas divisi : judul tugas divis
- kalender divisi : indicator kalender, pake loading

No Issues

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

@@ -40,6 +40,7 @@ export default function CalendarDivision() {
    const [month, setMonth] = useState<number>(new Date().getMonth());
    const update = useSelector((state: any) => state.calendarUpdate)
    const [loading, setLoading] = useState(true)
+   const [loadingBtn, setLoadingBtn] = useState(false)
 
 
    async function handleLoad(loading: boolean) {
@@ -61,6 +62,7 @@ export default function CalendarDivision() {
 
    async function handleLoadIndicator() {
       try {
+         setLoadingBtn(true)
          const newDate = new Date(selected?.getFullYear(), month, 1);
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetIndicatorCalendar({
@@ -71,6 +73,8 @@ export default function CalendarDivision() {
          setDataIndicator(response.data);
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoadingBtn(false)
       }
    }
 
@@ -99,11 +103,11 @@ export default function CalendarDivision() {
             />
          );
       },
-      IconNext: <Pressable onPress={() => setMonth(month + 1)}>
+      IconNext: <Pressable onPress={() => !loadingBtn ? setMonth(month + 1) : null}>
-         <Feather name="chevron-right" size={20} />
+         <Feather name="chevron-right" size={20} color={loadingBtn ? 'gray' : 'black'} />
       </Pressable>,
-      IconPrev: <Pressable onPress={() => setMonth(month - 1)}>
+      IconPrev: <Pressable onPress={() => !loadingBtn ? setMonth(month - 1) : null}>
-         <Feather name="chevron-left" size={20} />
+         <Feather name="chevron-left" size={20} color={loadingBtn ? 'gray' : 'black'} />
       </Pressable>,
    };
 
@@ -135,8 +139,6 @@ export default function CalendarDivision() {
                      styles={{
                         selected: Styles.selectedDate,
                      }}
-
-
                   />
                </View>
                <View style={[Styles.mb15, Styles.mt15]}>

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

@@ -55,7 +55,7 @@ export default function DetailTaskDivision() {
          <Stack.Screen
             options={{
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: loading ? 'Loading...' : data?.title,
+               headerTitle: loading ? 'Loading...                            ' : data?.title,
                headerTitleAlign: 'center',
                headerRight: () => <HeaderRightTaskDetail id={detail} division={id} status={data?.status}/>,
             }}

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

@@ -50,7 +50,7 @@ export default function DetailDivisionFitur() {
          <Stack.Screen
             options={{
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: loading ? 'Loading...' : data?.name,
+               headerTitle: loading ? 'Loading...                            ' : data?.name,
                headerTitleAlign: 'center',
                headerRight: () => <HeaderRightDivisionDetail id={id} />,
             }}

components/division/fileDivisionDetail.tsx

@@ -5,7 +5,7 @@ import { Feather } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { Dimensions, Text, View } from "react-native";
-import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
+import { ICarouselInstance } from "react-native-reanimated-carousel";
 import Skeleton from "../skeleton";
 
 type Props = {
@@ -53,37 +53,50 @@ export default function FileDivisionDetail() {
                </View>
                :
                data.length > 0 ?
-                  <Carousel
+                  <View style={[Styles.rowOnly]}>
-                     ref={ref}
+                     {
-                     width={width}
+                        data.map((item, index) => (
-                     height={115}
+                           <View style={[Styles.mr05, { width: '25%' }]} key={index}>
-                     data={data}
+                              <View style={{ alignItems: 'center' }}>
-                     loop={true}
+                                 <View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
-                     autoPlay={false}
+                                    <Feather name="file-text" size={50} color="black" style={Styles.mr05} />
-                     autoPlayReverse={false}
+                                 </View>
-                     pagingEnabled={true}
-                     snapEnabled={true}
-                     vertical={false}
-                     style={{
-                        width: width,
-                     }}
-                     mode="parallax"
-                     modeConfig={{
-                        parallaxScrollingScale: 1,
-                        parallaxScrollingOffset: 280,
-                     }}
-                     renderItem={({ index }) => (
-                        <View style={{ margin: 'auto', width: '28%' }}>
-                           <View style={{ alignItems: 'center' }}>
-                              <View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
-                                 <Feather name="file-text" size={50} color="black" style={Styles.mr05} />
                               </View>
+                              <Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{item.name}.{item.extension}</Text>
                            </View>
-                           <Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{data[index].name}.{data[index].extension}</Text>
+                        ))
-                        </View>
+                     }
+                  </View>
+                  // <Carousel
+                  //    ref={ref}
+                  //    width={width * 1.1}
+                  //    height={115}
+                  //    data={data}
+                  //    loop={true}
+                  //    autoPlay={false}
+                  //    autoPlayReverse={false}
+                  //    pagingEnabled={true}
+                  //    snapEnabled={true}
+                  //    vertical={false}
+                  //    mode="parallax"
+                  //    modeConfig={{
+                  //       parallaxScrollingScale: 1,
+                  //       parallaxScrollingOffset: 310,
+                  //       parallaxAdjacentItemScale: 1,
+                  //    }}
+                  //    style={{ width:'100%' }}
+                  //    renderItem={({ index }) => (
+                  //       <View style={{ width: '27%' }}>
+                  //          <View style={{ alignItems: 'center' }}>
+                  //             <View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
+                  //                <Feather name="file-text" size={50} color="black" style={Styles.mr05} />
+                  //             </View>
+                  //          </View>
+                  //          <Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{data[index].name}.{data[index].extension}</Text>
+                  //       </View>
 
-                     )}
+                  //    )}
-                  />
+                  // />
                   :
                   <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
          }