@herca/rn-kit 0.1.63 → 0.1.65

package/src/Modal/Modal.tsx

@@ -1,3 +1,4 @@
+import { Color, Icon } from '@herca/rn-kit';
 import React, { useState, useEffect, useCallback } from 'react';
 import {
   View,
@@ -10,8 +11,6 @@ import {
   Platform,
   type ViewStyle,
 } from 'react-native';
-import Icon from '../Icon';
-import Color from '../Color/Color';
 
 interface ModalPopUpProps {
   isOpen: boolean;
@@ -39,11 +38,10 @@ const ModalPopUp: React.FC<ModalPopUpProps> = ({
   containerStyle,
   modalStyle,
 }) => {
-  const [isVisible, setIsVisible] = useState(isOpen);
+  const [isVisible, setIsVisible] = useState(isOpen ?? false);
   const scaleAnim = useState(() => new Animated.Value(0))[0];
 
-  const showModal = useCallback(() => {
-    setIsVisible(true);
+  const animateIn = useCallback(() => {
     Animated.spring(scaleAnim, {
       toValue: 1,
       useNativeDriver: true,
@@ -52,24 +50,31 @@ const ModalPopUp: React.FC<ModalPopUpProps> = ({
     }).start();
   }, [scaleAnim]);
 
-  const hideModal = useCallback(() => {
+  useEffect(() => {
+    if (isOpen) {
+      setIsVisible(true);
+      animateIn();
+    } else if (isVisible) {
+      setIsVisible(false);
+      onRequestClose?.();
+      onClose?.();
+    }
+  }, [isOpen, isVisible, animateIn, onRequestClose, onClose]);
+
+  const userClose = useCallback(() => {
+    if (!closable) return;
     setIsVisible(false);
     onRequestClose?.();
     onClose?.();
-  }, [onClose, onRequestClose]);
+  }, [closable, onClose, onRequestClose]);
 
-  const handleBackdropPress = useCallback(() => {
-    if (closable) {
-      hideModal?.();
-    }
-  }, [closable, hideModal]);
-  useEffect(() => {
-    if (isOpen) {
-      showModal();
-    }
+  const handleBackdropPress = () => {
+    userClose();
+  };
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
+  const handleRequestClose = () => {
+    userClose();
+  };
 
   const modalContentStyle = StyleSheet.flatten([
     {
@@ -85,7 +90,7 @@ const ModalPopUp: React.FC<ModalPopUpProps> = ({
     <Modal
       transparent
       visible={isVisible}
-      onRequestClose={handleBackdropPress}
+      onRequestClose={handleRequestClose}
       statusBarTranslucent
     >
       <View style={[styles.modalContainer, containerStyle]}>
@@ -99,7 +104,7 @@ const ModalPopUp: React.FC<ModalPopUpProps> = ({
         <Animated.View style={[styles.modalContent, modalContentStyle]}>
           {closable && (
             <View style={styles.closeButtonContainer}>
-              <TouchableOpacity onPress={hideModal} style={styles.closeButton}>
+              <TouchableOpacity onPress={userClose} style={styles.closeButton}>
                 <View style={styles.iconButtonClose}>
                   <Icon name="Times" size={13} color={Color.gray[900]} />
                 </View>
@@ -116,11 +121,7 @@ const ModalPopUp: React.FC<ModalPopUpProps> = ({
 };
 
 const styles = StyleSheet.create({
-  modalContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
+  modalContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
   backdrop: {
     position: 'absolute',
     top: 0,
@@ -129,39 +130,25 @@ const styles = StyleSheet.create({
     bottom: 0,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
-  backdropTouch: {
-    width: '100%',
-    height: '100%',
-  },
+  backdropTouch: { width: '100%', height: '100%' },
   modalContent: {
     borderRadius: 16,
     overflow: 'visible',
     ...Platform.select({
       ios: {
         shadowColor: '#000',
-        shadowOffset: {
-          width: 0,
-          height: 2,
-        },
+        shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.25,
         shadowRadius: 4,
       },
-      android: {
-        elevation: 5,
-      },
+      android: { elevation: 5 },
     }),
   },
-  closeButtonContainer: {
-    position: 'absolute',
-    top: 10,
-    right: 10,
-    zIndex: 1,
-  },
+  closeButtonContainer: { position: 'absolute', top: 10, right: 10, zIndex: 1 },
   iconButtonClose: {
     justifyContent: 'center',
     alignContent: 'center',
     alignItems: 'center',
-    top: 'auto',
     flex: 1,
   },
   closeButton: {
@@ -170,9 +157,7 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     backgroundColor: '#ccc',
   },
-  contentContainer: {
-    padding: 16,
-  },
+  contentContainer: { padding: 16 },
 });
 
 export default ModalPopUp;

package/src/Ui/README_VIEWINSETS.md

@@ -0,0 +1,126 @@
+# ViewInsets Component
+
+Komponen React Native yang menyediakan padding otomatis berdasarkan safe area insets untuk menghindari area sistem seperti notch, status bar, dan navigation bar.
+
+## Instalasi
+
+Komponen ini membutuhkan dependency berikut:
+
+```bash
+npm install react-native-safe-area-context
+# atau
+yarn add react-native-safe-area-context
+```
+
+Pastikan untuk membungkus aplikasi Anda dengan `SafeAreaProvider`:
+
+```jsx
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+function App() {
+  return <SafeAreaProvider>{/* Konten aplikasi Anda */}</SafeAreaProvider>;
+}
+```
+
+## Penggunaan Dasar
+
+```jsx
+import ViewInsets from './ViewInsets';
+
+function MyScreen() {
+  return (
+    <ViewInsets useTop useBottom>
+      {/* Konten Anda */}
+    </ViewInsets>
+  );
+}
+```
+
+## Props
+
+| Prop        | Type                   | Default      | Deskripsi                                               |
+| ----------- | ---------------------- | ------------ | ------------------------------------------------------- |
+| `children`  | `React.ReactNode`      | **Required** | Konten yang akan ditampilkan di dalam container         |
+| `useTop`    | `boolean`              | `false`      | Menambahkan padding top sesuai safe area inset atas     |
+| `useBottom` | `boolean`              | `false`      | Menambahkan padding bottom sesuai safe area inset bawah |
+| `useLeft`   | `boolean`              | `false`      | Menambahkan padding left sesuai safe area inset kiri    |
+| `useRight`  | `boolean`              | `false`      | Menambahkan padding right sesuai safe area inset kanan  |
+| `style`     | `StyleProp<ViewStyle>` | `undefined`  | Style tambahan untuk container                          |
+| `...rest`   | `ViewProps`            | -            | Props lainnya akan diteruskan ke komponen View          |
+
+## Contoh Penggunaan
+
+### Layar dengan Safe Area Atas dan Bawah
+
+```jsx
+<ViewInsets useTop useBottom>
+  <Text>Konten aman dari notch dan navigation bar</Text>
+</ViewInsets>
+```
+
+### Layar dengan Safe Area Atas Saja
+
+```jsx
+<ViewInsets useTop>
+  <Text>Konten aman dari status bar/notch</Text>
+</ViewInsets>
+```
+
+### Layar dengan Safe Area di Semua Sisi
+
+```jsx
+<ViewInsets useTop useBottom useLeft useRight>
+  <Text>Konten aman dari semua area sistem</Text>
+</ViewInsets>
+```
+
+### Dengan Custom Style
+
+```jsx
+<ViewInsets
+  useTop
+  useBottom
+  style={{ backgroundColor: '#fff', paddingHorizontal: 16 }}
+>
+  <Text>Konten dengan style tambahan</Text>
+</ViewInsets>
+```
+
+### Dengan Props View Lainnya
+
+```jsx
+<ViewInsets useTop useBottom testID="main-container" accessible={true}>
+  <Text>Konten dengan props accessibility</Text>
+</ViewInsets>
+```
+
+## Fitur
+
+- ✅ Otomatis menangani safe area insets
+- ✅ Kontrol granular untuk setiap sisi (atas, bawah, kiri, kanan)
+- ✅ Performa optimal dengan `useMemo` untuk menghindari re-render tidak perlu
+- ✅ Mendukung semua props dari komponen View React Native
+- ✅ TypeScript support dengan type definitions lengkap
+- ✅ Default `flex: 1` untuk kemudahan layout
+
+## Catatan
+
+- Komponen ini secara default menggunakan `flex: 1` pada container
+- Safe area insets akan disesuaikan secara otomatis berdasarkan perangkat
+- Berguna untuk menghindari area yang tertutup oleh notch, status bar, home indicator, dll
+- Dapat dikombinasikan dengan style custom untuk kebutuhan layout yang lebih kompleks
+
+## TypeScript
+
+Komponen ini sudah dilengkapi dengan TypeScript definitions. Interface `ViewInsetsProps` extends dari `ViewProps` sehingga mendukung semua props dari View React Native.
+
+```typescript
+interface ViewInsetsProps extends ViewProps {
+  children: React.ReactNode;
+  useTop?: boolean;
+  useBottom?: boolean;
+  useLeft?: boolean;
+  useRight?: boolean;
+  bottomType?: 'inset' | 'tabbar'; // Prop ini didefinisikan tapi belum diimplementasikan
+}
+```

package/src/Ui/ViewInsets.tsx

@@ -0,0 +1,46 @@
+import { StyleSheet, View, type ViewProps } from 'react-native';
+import React, { useMemo } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+interface ViewInsetsProps extends ViewProps {
+  children: React.ReactNode;
+  useTop?: boolean;
+  useBottom?: boolean;
+  useLeft?: boolean;
+  useRight?: boolean;
+  bottomType?: 'inset' | 'tabbar';
+}
+
+const ViewInsets: React.FC<ViewInsetsProps> = ({
+  children,
+  style,
+  useTop = false,
+  useBottom = false,
+  useLeft = false,
+  useRight = false,
+  ...rest
+}) => {
+  const insets = useSafeAreaInsets();
+
+  const defaultStyle = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingTop: useTop ? insets.top : 0,
+          paddingBottom: useBottom ? insets.bottom : 0,
+          paddingLeft: useLeft ? insets.left : 0,
+          paddingRight: useRight ? insets.right : 0,
+          flex: 1,
+        },
+      }),
+    [insets, useTop, useBottom, useLeft, useRight]
+  );
+
+  return (
+    <View style={[defaultStyle.container, style]} {...rest}>
+      {children}
+    </View>
+  );
+};
+
+export default ViewInsets;