@herca/rn-kit 0.1.35 → 0.1.36

package/lib/module/Tab/README.md

@@ -94,6 +94,7 @@ Setiap tab dibungkus dalam `ScrollView` vertikal, sehingga bisa discroll ke bawa
 | `children`     | `React.ReactNode`         | Daftar elemen `<TabItem />`   |
 | `current?`     | `number`                  | Indeks tab aktif (default: 0) |
 | `onChangeTab?` | `(index: number) => void` | Callback saat tab berpindah   |
+| `renderHeader` | `React.ReactElement` |  tambahan react element di atas tab  |
 
 ### `TabItemProps`
 

package/lib/module/Tab/Tab.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useCallback, useState, useEffect, useRef, 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.js";
 import Typography from "../Typography/Typography.js";
@@ -9,7 +9,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Tab = ({
   children,
   current = 0,
-  onChangeTab
+  onChangeTab,
+  renderHeader
 }) => {
   const items = Children.toArray(children).filter(isValidElement);
   const [activeIndex, setActiveIndex] = useState(current);
@@ -29,40 +30,54 @@ const Tab = ({
     updateActive(index);
   };
   if (items.length === 0) return null;
-  return /*#__PURE__*/_jsxs(View, {
+  return /*#__PURE__*/_jsx(View, {
     style: styles.container,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.headerContainer,
-      children: items.map((item, index) => {
-        const isActive = index === activeIndex;
-        return /*#__PURE__*/_jsx(Pressable, {
-          style: [styles.tabButton, isActive ? styles.tabActive : styles.tabInactive],
-          onPress: () => handleHeaderPress(index),
-          children: /*#__PURE__*/_jsx(Typography, {
-            center: true,
-            variant: "t2",
-            weight: "semibold",
-            color: isActive ? Color.base.white100 : Color.gray[700],
-            children: item.props.name
+    children: /*#__PURE__*/_jsxs(ScrollView, {
+      stickyHeaderIndices: [renderHeader ? 1 : 0] // bikin tabBar sticky
+      ,
+      contentContainerStyle: {
+        flexGrow: 1
+      },
+      children: [renderHeader ? renderHeader : null, /*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        style: styles.tabBarWrapper,
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.tabBar,
+          children: items.map((item, index) => {
+            const isActive = index === activeIndex;
+            return /*#__PURE__*/_jsx(Pressable, {
+              style: [styles.tabButton, isActive ? styles.tabActive : styles.tabInactive],
+              onPress: () => handleHeaderPress(index),
+              children: /*#__PURE__*/_jsx(Typography, {
+                center: true,
+                variant: "t2",
+                weight: "semibold",
+                color: isActive ? Color.base.white100 : Color.gray[700],
+                children: item.props.name
+              })
+            }, index);
           })
-        }, index);
-      })
-    }), /*#__PURE__*/_jsx(PagerView, {
-      ref: pagerRef,
-      style: styles.pager,
-      initialPage: current,
-      onPageSelected: e => updateActive(e.nativeEvent.position),
-      children: items.map((item, index) => {
-        const Comp = item.props.component;
-        return /*#__PURE__*/_jsx(View, {
-          collapsable: false,
-          style: {
-            flex: 1
-          },
-          children: Comp ? /*#__PURE__*/_jsx(Comp, {}) : null
-        }, index);
-      })
-    })]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: /*#__PURE__*/_jsx(PagerView, {
+          ref: pagerRef,
+          style: styles.pager,
+          initialPage: current,
+          onPageSelected: e => updateActive(e.nativeEvent.position),
+          children: items.map((item, index) => /*#__PURE__*/_jsx(View, {
+            collapsable: false,
+            style: {
+              flex: 1
+            },
+            children: item?.props?.children
+          }, index))
+        })
+      })]
+    })
   });
 };
 export default Tab;
@@ -70,19 +85,23 @@ 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'
+    alignItems: 'center',
+    marginRight: 8
   },
   tabActive: {
     backgroundColor: Color.primary[1000]
@@ -91,7 +110,8 @@ const styles = StyleSheet.create({
     backgroundColor: Color.gray[100]
   },
   pager: {
-    flex: 1
+    flex: 1,
+    minHeight: 800
   }
 });
 //# sourceMappingURL=Tab.js.map

package/lib/module/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useState","useEffect","useRef","Children","isValidElement","View","Pressable","StyleSheet","PagerView","Color","Typography","jsx","_jsx","jsxs","_jsxs","Tab","children","current","onChangeTab","items","toArray","filter","activeIndex","setActiveIndex","pagerRef","setPageWithoutAnimation","updateActive","index","handleHeaderPress","setPage","length","style","styles","container","headerContainer","map","item","isActive","tabButton","tabActive","tabInactive","onPress","center","variant","weight","color","base","white100","gray","props","name","ref","pager","initialPage","onPageSelected","e","nativeEvent","position","Comp","component","collapsable","flex","create","flexDirection","backgroundColor","padding","borderRadius","paddingVertical","paddingHorizontal","justifyContent","alignItems","primary"],"sourceRoot":"../../../src","sources":["Tab/Tab.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useState","useEffect","useRef","Children","isValidElement","View","Pressable","StyleSheet","ScrollView","PagerView","Color","Typography","jsx","_jsx","jsxs","_jsxs","Tab","children","current","onChangeTab","renderHeader","items","toArray","filter","activeIndex","setActiveIndex","pagerRef","setPageWithoutAnimation","updateActive","index","handleHeaderPress","setPage","length","style","styles","container","stickyHeaderIndices","contentContainerStyle","flexGrow","horizontal","showsHorizontalScrollIndicator","tabBarWrapper","tabBar","map","item","isActive","tabButton","tabActive","tabInactive","onPress","center","variant","weight","color","base","white100","gray","props","name","flex","ref","pager","initialPage","onPageSelected","e","nativeEvent","position","collapsable","create","backgroundColor","borderRadius","flexDirection","padding","paddingVertical","paddingHorizontal","justifyContent","alignItems","marginRight","primary","minHeight"],"sourceRoot":"../../../src","sources":["Tab/Tab.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/Tab/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../src/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAgB,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAErD,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA0E3B,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../src/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAgB,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAErD,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA8F3B,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/lib/typescript/src/Tab/type.d.ts

@@ -1,11 +1,12 @@
 import React, { type ReactElement } from 'react';
 export interface TabItemProps {
     name: string | number;
-    component: React.ComponentType<any>;
+    children: React.ReactElement<any>;
 }
 export interface TabProps {
     children: ReactElement<TabItemProps> | ReactElement<TabItemProps>[];
     current?: number;
+    renderHeader?: React.ReactElement;
     onChangeTab?: (e: any) => void;
 }
 //# sourceMappingURL=type.d.ts.map

package/lib/typescript/src/Tab/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Tab/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CACrC;AACD,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,YAAY,CAAC,YAAY,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Tab/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;CACnC;AACD,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,YAAY,CAAC,YAAY,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herca/rn-kit",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "description": "React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/Tab/README.md

@@ -94,6 +94,7 @@ Setiap tab dibungkus dalam `ScrollView` vertikal, sehingga bisa discroll ke bawa
 | `children`     | `React.ReactNode`         | Daftar elemen `<TabItem />`   |
 | `current?`     | `number`                  | Indeks tab aktif (default: 0) |
 | `onChangeTab?` | `(index: number) => void` | Callback saat tab berpindah   |
+| `renderHeader` | `React.ReactElement` |  tambahan react element di atas tab  |
 
 ### `TabItemProps`
 

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,46 +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) => {
-          const Comp = item.props.component;
-          return (
-            <View key={index} collapsable={false} style={{ flex: 1 }}>
-              {Comp ? <Comp /> : null}
-            </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>
   );
 };
@@ -92,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 },
+  pager: { flex: 1, minHeight: 800 },
 });

package/src/Tab/type.tsx

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