@zhenryx/react-native-components 0.0.3 → 0.1.0

package/dist/TabView/TabView.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+export interface Tab {
+    id: string;
+    label: string;
+    content?: ReactNode;
+}
+export interface TabViewProps {
+    tabs: Tab[];
+    defaultTab?: string;
+    onTabChange?: (tabId: string) => void;
+    renderContent?: (tab: Tab) => ReactNode;
+}
+export declare const TabView: React.FC<TabViewProps>;
+//# sourceMappingURL=TabView.d.ts.map

package/dist/TabView/TabView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../src/components/TabView/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9D,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,SAAS,CAAC;CACzC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoE1C,CAAC"}

package/dist/TabView/TabView.js

@@ -0,0 +1,120 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabView = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const TabView = ({ tabs, defaultTab, onTabChange, renderContent, }) => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(defaultTab || tabs[0]?.id || '');
+    // 当 defaultTab 或 tabs 变化时，更新 activeTab
+    (0, react_1.useEffect)(() => {
+        if (defaultTab && tabs.some((tab) => tab.id === defaultTab)) {
+            setActiveTab(defaultTab);
+        }
+        else if (tabs.length > 0) {
+            setActiveTab((currentTab) => {
+                // 如果当前 tab 不在 tabs 中，回退到第一个 tab
+                if (!tabs.some((tab) => tab.id === currentTab)) {
+                    return tabs[0].id;
+                }
+                return currentTab;
+            });
+        }
+    }, [defaultTab, tabs]);
+    const handleTabPress = (tabId) => {
+        setActiveTab(tabId);
+        onTabChange?.(tabId);
+    };
+    const activeTabData = tabs.find((tab) => tab.id === activeTab) || tabs[0];
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.View style={styles.tabContainer}>
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          {tabs.map((tab) => (<react_native_1.Pressable key={tab.id} style={styles.tab} onPress={() => handleTabPress(tab.id)}>
+              <react_native_1.Text style={[
+                styles.tabText,
+                activeTab === tab.id && styles.tabTextActive,
+            ]}>
+                {tab.label}
+              </react_native_1.Text>
+              {activeTab === tab.id && <react_native_1.View style={styles.tabIndicator}/>}
+            </react_native_1.Pressable>))}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      <react_native_1.View style={styles.contentContainer}>
+        {activeTabData
+            ? renderContent
+                ? renderContent(activeTabData)
+                : activeTabData.content || null
+            : null}
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.TabView = TabView;
+exports.TabView.displayName = 'TabView';
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    tabContainer: {
+        borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderBottomColor: '#E5E7EB',
+        backgroundColor: '#FFFFFF',
+    },
+    tab: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        position: 'relative',
+        minWidth: 70,
+    },
+    tabText: {
+        fontSize: 15,
+        color: '#9CA3AF',
+        fontWeight: '500',
+        textAlign: 'center',
+    },
+    tabTextActive: {
+        color: '#111827',
+        fontWeight: '700',
+        fontSize: 16,
+        transform: [{ scale: 1.1 }],
+    },
+    tabIndicator: {
+        position: 'absolute',
+        bottom: 0,
+        alignSelf: 'center',
+        width: 25,
+        height: 3,
+        backgroundColor: '#EF4444',
+        borderRadius: 2,
+    },
+    contentContainer: {
+        flex: 1,
+        padding: 20,
+    },
+});

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export type { OverLayProps } from './Overlay/Overlay';
 export { Popup } from './Popup/Popup';
 export type { PopupProps } from './Popup/Popup';
 export { Text } from './Text/Text';
+export { TabView } from './TabView/TabView';
+export type { TabViewProps, Tab } from './TabView/TabView';
 export { ThemeProvider, useTheme } from './ThemeConfig/ThemeConfig';
 export type { Theme } from './ThemeConfig/ThemeConfig';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACpE,YAAY,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACpE,YAAY,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = exports.ThemeProvider = exports.Text = exports.Popup = exports.OverLay = exports.Header = exports.Empty = exports.Dialog = exports.Button = void 0;
+exports.useTheme = exports.ThemeProvider = exports.TabView = exports.Text = exports.Popup = exports.OverLay = exports.Header = exports.Empty = exports.Dialog = exports.Button = void 0;
 var Button_1 = require("./Button/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
 var Dialog_1 = require("./Dialog/Dialog");
@@ -15,6 +15,8 @@ var Popup_1 = require("./Popup/Popup");
 Object.defineProperty(exports, "Popup", { enumerable: true, get: function () { return Popup_1.Popup; } });
 var Text_1 = require("./Text/Text");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
+var TabView_1 = require("./TabView/TabView");
+Object.defineProperty(exports, "TabView", { enumerable: true, get: function () { return TabView_1.TabView; } });
 var ThemeConfig_1 = require("./ThemeConfig/ThemeConfig");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeConfig_1.ThemeProvider; } });
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return ThemeConfig_1.useTheme; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenryx/react-native-components",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {