@herca/rn-kit 0.1.10 → 0.1.12

package/src/Icon/icons/Download.tsx

@@ -7,7 +7,7 @@ interface Props {
   style?: object;
 }
 
-const Downnload: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+const Download: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
   <Svg width={size} height={size} viewBox="0 0 13 16" fill="none" style={style}>
     <Path
       d="M8.2915 3V1.125L12.0415 4.875H10.1665C8.84984 4.875 8.2915 4.31667 8.2915 3ZM12.6665 6.125V13C12.6665 14.6667 11.8332 15.5 10.1665 15.5H2.6665C0.999837 15.5 0.166504 14.6667 0.166504 13V3C0.166504 1.33333 0.999837 0.5 2.6665 0.5H7.0415V3C7.0415 5.01667 8.14984 6.125 10.1665 6.125H12.6665ZM7.27486 10.0583C7.03069 9.81417 6.63483 9.81417 6.39067 10.0583L5.79069 10.6583V8C5.79069 7.655 5.51069 7.375 5.16569 7.375C4.82069 7.375 4.54069 7.655 4.54069 8V10.6575L3.94071 10.0575C3.69655 9.81333 3.30069 9.81333 3.05652 10.0575C2.81235 10.3017 2.81235 10.6975 3.05652 10.9417L4.72319 12.6083C4.78068 12.6658 4.84977 12.7117 4.92643 12.7433C5.0031 12.775 5.08402 12.7917 5.16569 12.7917C5.24736 12.7917 5.32808 12.775 5.40474 12.7433C5.48141 12.7117 5.55069 12.6658 5.60819 12.6083L7.27486 10.9417C7.51903 10.6983 7.51903 10.3017 7.27486 10.0583Z"
@@ -16,4 +16,4 @@ const Downnload: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
   </Svg>
 );
 
-export default Downnload;
+export default Download;

package/src/Icon/icons/{ExlmationMark.tsx → ExclamationMark.tsx}

@@ -7,7 +7,7 @@ interface Props {
   style?: object;
 }
 
-const ExlamationMark: React.FC<Props> = ({
+const ExclamationMark: React.FC<Props> = ({
   size = 24,
   color = '#909090',
   style,
@@ -20,4 +20,4 @@ const ExlamationMark: React.FC<Props> = ({
   </Svg>
 );
 
-export default ExlamationMark;
+export default ExclamationMark;

package/src/Icon/type.tsx

@@ -12,7 +12,7 @@ export type IconNameProps =
   | 'ArrowLeft'
   | 'Document'
   | 'Calendar'
-  | 'ExlamationMark'
+  | 'ExclamationMark'
   | 'Download'
   | 'x-circle'
   | 'StickyNote'

package/src/Provider/FooterProvider.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, useState, type ReactNode } from 'react';
+import LayoutWithFooter from './LayoutWithFooter';
 
 interface FooterContextType {
   footer: ReactNode | null;
@@ -12,7 +13,7 @@ export const FooterProvider = ({ children }: { children: ReactNode }) => {
 
   return (
     <FooterContext.Provider value={{ footer, setFooter }}>
-      {children}
+      <LayoutWithFooter>{children}</LayoutWithFooter>
     </FooterContext.Provider>
   );
 };

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/Toast/README.md

@@ -60,7 +60,7 @@ Menyediakan context global toast. Harus membungkus komponen root Anda.
 | Option     | Type               | Default            | Description                        |
 | ---------- | ------------------ | ------------------ | ---------------------------------- |
 | `color`    | `ColorVariantType` | `'default'`        | Warna latar belakang dan teks.     |
-| `icon`     | `IconNameProps`    | `'ExlamationMark'` | Ikon di samping pesan.             |
+| `icon`     | `IconNameProps`    | `'ExclamationMark'` | Ikon di samping pesan.             |
 | `duration` | `number` (ms)      | `3000`             | Waktu tampil Toast sebelum hilang. |
 
 ## ❗ Error Handling

package/src/Toast/Toast.tsx

@@ -81,7 +81,7 @@ const Toast = ({
   duration = 3000,
   onHide,
   color = 'default',
-  icon = 'ExlamationMark',
+  icon = 'ExclamationMark',
   onClear,
 }: ToastProps) => {
   const fadeAnim = useRef(new Animated.Value(0)).current;

package/src/Toast/ToastContext.tsx

@@ -19,7 +19,7 @@ export const ToastProvider = ({ children }: { children: ReactNode }) => {
   const [visible, setVisible] = useState(false);
   const [message, setMessage] = useState<string>('');
   const [options, setOptions] = useState<ToastOptions>({
-    icon: 'ExlamationMark',
+    icon: 'ExclamationMark',
   });
 
   const show = (msg: string, opts?: ToastOptions) => {

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]);
+  }
+}

package/lib/module/Icon/icons/ExlmationMark.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Svg","Path","jsx","_jsx","ExlamationMark","size","color","style","width","height","viewBox","fill","children","d"],"sourceRoot":"../../../../src","sources":["Icon/icons/ExlmationMark.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,IAAIC,IAAI,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQ7C,MAAMC,cAA+B,GAAGA,CAAC;EACvCC,IAAI,GAAG,EAAE;EACTC,KAAK,GAAG,SAAS;EACjBC;AACF,CAAC,kBACCJ,IAAA,CAACH,GAAG;EAACQ,KAAK,EAAEH,IAAK;EAACI,MAAM,EAAEJ,IAAK;EAACK,OAAO,EAAC,WAAW;EAACC,IAAI,EAAC,MAAM;EAACJ,KAAK,EAAEA,KAAM;EAAAK,QAAA,eAC3ET,IAAA,CAACF,IAAI;IACHY,CAAC,EAAC,oiBAAoiB;IACtiBF,IAAI,EAAE,GAAGL,KAAK;EAAG,CAClB;AAAC,CACC,CACN;AAED,eAAeF,cAAc","ignoreList":[]}

package/lib/typescript/src/Icon/icons/ExlmationMark.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-interface Props {
-    size?: number;
-    color?: string;
-    style?: object;
-}
-declare const ExlamationMark: React.FC<Props>;
-export default ExlamationMark;
-//# sourceMappingURL=ExlmationMark.d.ts.map

package/lib/typescript/src/Icon/icons/ExlmationMark.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExlmationMark.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/ExlmationMark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAWnC,CAAC;AAEF,eAAe,cAAc,CAAC"}