@herca/rn-kit 0.1.9 → 0.1.11

package/src/Select/Select.tsx

@@ -4,7 +4,7 @@ import {
   TouchableWithoutFeedback,
   Keyboard,
 } from 'react-native';
-import { useState, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { type SelectProps } from './type';
 import BottomSheet from '../BottomSheet/BottomSheet';
 import Button from '../Button/Button';
@@ -27,24 +27,31 @@ export default function Select({
   height,
   onRefresh,
   refreshing,
+  footer,
+  onEndReached,
 }: SelectProps) {
-  const [isOpenSelect, setIsOpenSelect] = useState<boolean | undefined>(false);
+  // const [isOpenSelect, setIsOpenSelect] = useState<boolean | undefined>(false);
   const [selected, setSelected] = useState<ChipSelectedProps>();
   const { show } = useToast();
-  useEffect(() => {
-    setIsOpenSelect(isOpen);
-  }, [isOpen]);
+  // useEffect(() => {
+  //   setIsOpenSelect(isOpen);
+  // }, [isOpen]);
 
-  const handleOnCloseBottom = (val: boolean) => {
-    onClose?.(val);
-  };
+  const handleOnCloseBottom = useCallback(
+    (val: boolean) => {
+      if (onClose) {
+        onClose?.(val);
+      }
+    },
+    [onClose]
+  );
 
   const handleOnPresSubmitSelect = (): boolean => {
     if (required && (!selected || selected.length === 0)) {
       show('Please fill a item');
       return false;
     }
-    setIsOpenSelect(false);
+    // setIsOpenSelect(false);
     onSubmit?.(selected ? selected : []);
     return true;
   };
@@ -56,8 +63,8 @@ export default function Select({
   };
   return (
     <BottomSheet
-      onClose={handleOnCloseBottom}
-      isOpen={isOpenSelect}
+      onClose={(val: boolean) => handleOnCloseBottom(val)}
+      isOpen={isOpen}
       height={height}
       footer={
         <Button
@@ -91,12 +98,14 @@ export default function Select({
             selected={selected}
             multiple={multiple}
             onSelect={setSelected}
+            onEndReached={onEndReached}
             color="primary"
             size="large"
             renderItem={renderItem}
             onRefresh={onRefresh}
             block
             refreshing={refreshing}
+            footer={footer}
           />
         )}
       </View>

package/src/Select/type.tsx

@@ -26,5 +26,7 @@ export interface SelectProps {
   delaySearch?: number;
   height?: BottomSheetHeighProps;
   onRefresh?: () => void;
+  onEndReached?: () => void;
   refreshing?: boolean;
+  footer?: React.ReactElement;
 }

package/src/Tab/TabItem.tsx

@@ -1,6 +1,5 @@
-import { View } from 'react-native';
+import type { TabItemProps } from './type';
+import React from 'react';
 
-const TabItem = () => {
-  return <View></View>;
-};
+const TabItem: React.FC<TabItemProps> = (_props) => null;
 export default TabItem;

package/src/Ui/Footer.tsx

@@ -1,24 +1,29 @@
-import React, { useEffect } from 'react';
-import { StyleSheet, SafeAreaView } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import Color from '../Color/Color';
+// Footer.tsx
+import React, { useMemo } from 'react';
+import { SafeAreaView, StyleSheet, type ViewStyle } from 'react-native';
 import { useFooter } from '../Provider/Provider';
+import Color from '../Color/Color';
+import { useOptionalFocusEffect } from '../hooks/useOptionalFocusEffect';
 
 interface FooterProps {
   children: React.ReactNode;
   style?: ViewStyle;
 }
+
 const Footer: React.FC<FooterProps> = ({ children, style }) => {
   const { setFooter } = useFooter();
 
-  useEffect(() => {
-    const footerElement = (
+  const footerElement = useMemo(
+    () => (
       <SafeAreaView style={[styles.container, style]}>{children}</SafeAreaView>
-    );
-    setFooter(footerElement);
+    ),
+    [children, style]
+  );
 
+  useOptionalFocusEffect(() => {
+    setFooter(footerElement);
     return () => setFooter(null);
-  }, [children, style, setFooter]);
+  });
 
   return null;
 };

package/src/hooks/useOptionalFocusEffect.ts

@@ -0,0 +1,18 @@
+// src/hooks/useOptionalFocusEffect.ts
+import { useContext, useEffect, useCallback } from 'react';
+import { NavigationContext, useFocusEffect } from '@react-navigation/native';
+
+export function useOptionalFocusEffect(callback: () => void | (() => void)) {
+  const navigation = useContext(NavigationContext);
+
+  const effect = useCallback(callback, [callback]);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  if (navigation) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useFocusEffect(effect);
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => effect(), [effect]);
+  }
+}