@herca/rn-kit 0.1.34 → 0.1.36

package/src/Tab/Tab.tsx

@@ -6,13 +6,18 @@ import React, {
   Children,
   isValidElement,
 } from 'react';
-import { View, Pressable, StyleSheet } from 'react-native';
+import { View, Pressable, StyleSheet, ScrollView } from 'react-native';
 import PagerView from 'react-native-pager-view';
 import Color from '../Color/Color';
 import Typography from '../Typography/Typography';
 import type { TabItemProps, TabProps } from './type';
 
-const Tab: React.FC<TabProps> = ({ children, current = 0, onChangeTab }) => {
+const Tab: React.FC<TabProps> = ({
+  children,
+  current = 0,
+  onChangeTab,
+  renderHeader,
+}) => {
   const items = Children.toArray(children).filter(
     isValidElement
   ) as React.ReactElement<TabItemProps>[];
@@ -44,45 +49,61 @@ const Tab: React.FC<TabProps> = ({ children, current = 0, onChangeTab }) => {
 
   return (
     <View style={styles.container}>
-      {/* Header */}
-      <View style={styles.headerContainer}>
-        {items.map((item, index) => {
-          const isActive = index === activeIndex;
-          return (
-            <Pressable
-              key={index}
-              style={[
-                styles.tabButton,
-                isActive ? styles.tabActive : styles.tabInactive,
-              ]}
-              onPress={() => handleHeaderPress(index)}
-            >
-              <Typography
-                center
-                variant="t2"
-                weight="semibold"
-                color={isActive ? Color.base.white100 : Color.gray[700]}
-              >
-                {item.props.name}
-              </Typography>
-            </Pressable>
-          );
-        })}
-      </View>
-      <PagerView
-        ref={pagerRef}
-        style={styles.pager}
-        initialPage={current}
-        onPageSelected={(e) => updateActive(e.nativeEvent.position)}
+      <ScrollView
+        stickyHeaderIndices={[renderHeader ? 1 : 0]} // bikin tabBar sticky
+        contentContainerStyle={{ flexGrow: 1 }}
       >
-        {items.map((item, index) => {
-          return (
-            <View key={index} collapsable={false} style={{ flex: 1 }}>
-              {item.props.children}
-            </View>
-          );
-        })}
-      </PagerView>
+        {/* Header */}
+        {renderHeader ? renderHeader : null}
+
+        {/* TabBar (sticky + horizontal scroll) */}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={styles.tabBarWrapper}
+        >
+          <View style={styles.tabBar}>
+            {items.map((item, index) => {
+              const isActive = index === activeIndex;
+              return (
+                <Pressable
+                  key={index}
+                  style={[
+                    styles.tabButton,
+                    isActive ? styles.tabActive : styles.tabInactive,
+                  ]}
+                  onPress={() => handleHeaderPress(index)}
+                >
+                  <Typography
+                    center
+                    variant="t2"
+                    weight="semibold"
+                    color={isActive ? Color.base.white100 : Color.gray[700]}
+                  >
+                    {item.props.name}
+                  </Typography>
+                </Pressable>
+              );
+            })}
+          </View>
+        </ScrollView>
+
+        {/* Konten */}
+        <View style={{ flex: 1 }}>
+          <PagerView
+            ref={pagerRef}
+            style={styles.pager}
+            initialPage={current}
+            onPageSelected={(e) => updateActive(e.nativeEvent.position)}
+          >
+            {items.map((item, index) => (
+              <View key={index} collapsable={false} style={{ flex: 1 }}>
+                {item?.props?.children}
+              </View>
+            ))}
+          </PagerView>
+        </View>
+      </ScrollView>
     </View>
   );
 };
@@ -91,21 +112,24 @@ export default Tab;
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
-  headerContainer: {
-    flexDirection: 'row',
+  tabBarWrapper: {
     backgroundColor: Color.gray[100],
+    borderRadius: 8,
+  },
+  tabBar: {
+    flexDirection: 'row', // tetap row
     padding: 4,
     borderRadius: 8,
   },
   tabButton: {
-    flex: 1,
     borderRadius: 8,
     paddingVertical: 6,
     paddingHorizontal: 16,
     justifyContent: 'center',
     alignItems: 'center',
+    marginRight: 8,
   },
   tabActive: { backgroundColor: Color.primary[1000] },
   tabInactive: { backgroundColor: Color.gray[100] },
-  pager: { flex: 1, backgroundColor: Color.base.white100 },
+  pager: { flex: 1, minHeight: 800 },
 });

package/src/Tab/TabItem.tsx

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

package/src/Tab/type.tsx

@@ -2,10 +2,11 @@ import React, { type ReactElement } from 'react';
 
 export interface TabItemProps {
   name: string | number;
-  children: React.ReactNode;
+  children: React.ReactElement<any>;
 }
 export interface TabProps {
   children: ReactElement<TabItemProps> | ReactElement<TabItemProps>[];
   current?: number;
+  renderHeader?: React.ReactElement;
   onChangeTab?: (e: any) => void;
 }

package/src/Timeline/README.md

@@ -44,11 +44,11 @@ export default function OrderHistory() {
 
 ### TimelineItem
 
-| Prop       | Type                                                          | Wajib | Default     | Deskripsi                                                        |
-| ---------- | ------------------------------------------------------------- | ----- | ----------- | ---------------------------------------------------------------- |
-| `children` | `ReactNode`                                                   | ✅    | —           | Konten untuk node timeline: teks, ikon tambahan, dsb.            |
-| `color`    | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'purple'` | ❌    | `'primary'` | Skema warna titik (`RadioButton`) dan garis vertikal.            |
-| `isLast`   | `boolean`                                                     | ❌    | `false`     | Menentukan apakah garis garis di kiri itu dimunculkan atau tidak |
+| Prop       | Type                                                                              | Wajib | Default     | Deskripsi                                                        |
+| ---------- | --------------------------------------------------------------------------------- | ----- | ----------- | ---------------------------------------------------------------- |
+| `children` | `ReactNode`                                                                       | ✅    | —           | Konten untuk node timeline: teks, ikon tambahan, dsb.            |
+| `color`    | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'purple'\| 'info'\| 'orange'` | ❌    | `'primary'` | Skema warna titik (`RadioButton`) dan garis vertikal.            |
+| `isLast`   | `boolean`                                                                         | ❌    | `false`     | Menentukan apakah garis garis di kiri itu dimunculkan atau tidak |
 
 ## ⚙️ Cara Kerja
 

package/src/Timeline/TimelineItem.tsx

@@ -9,6 +9,9 @@ const COLOR_MAP = {
   success: Color.success[500],
   purple: Color.purple[500],
   danger: Color.danger[500],
+  info: Color.info[500],
+  default: Color.gray[700],
+  orange: Color.orange[500],
 };
 type ColorKey = keyof typeof COLOR_MAP;
 

package/src/index.tsx

@@ -86,3 +86,4 @@ export { ToastProvider, useToast } from './Toast/ToastContext';
 export { default as Skeleton } from './Skeleton/Skeleton';
 export type { SkeletonProps } from './Skeleton/type';
 export { default as CounterButton } from './CounterButton/CounterButton';
+export { default as BadgeIcon } from './BadgeIcon/BadgeIcon';