@bm-fe/react-native-ui-components 1.0.1 → 1.1.4

package/src/screens/NativeButtonsScreen.tsx

@@ -1,335 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Alert,
-  SafeAreaView,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import { Button, ButtonStyleName, ButtonStyles, TextButton } from '../components/NativeDesign';
-import { IC_BUTTON_SVG } from '../assets/svgs/svgStrings';
-
-const NativeButtonsScreen: React.FC = () => {
-  const [activeTab, setActiveTab] = useState(0);
-
-  const handleButtonPress = (styleName: string) => {
-    Alert.alert('按钮点击', `点击了样式: ${styleName}`);
-  };
-
-  const tabs = [
-    { id: 0, title: '文本按钮' },
-    { id: 1, title: 'Primary' },
-    { id: 2, title: 'Secondary' },
-    { id: 3, title: 'Green' },
-    { id: 4, title: 'Red' },
-    { id: 5, title: 'White' },
-    { id: 6, title: 'Footer' },
-  ];
-
-  const renderTabContent = () => {
-    switch (activeTab) {
-      case 0: return <TextButtonsTab onButtonPress={handleButtonPress} />;
-      case 1: return <PrimaryButtonsTab onButtonPress={handleButtonPress} />;
-      case 2: return <SecondaryButtonsTab onButtonPress={handleButtonPress} />;
-      case 3: return <GreenButtonsTab onButtonPress={handleButtonPress} />;
-      case 4: return <RedButtonsTab onButtonPress={handleButtonPress} />;
-      case 5: return <WhiteButtonsTab onButtonPress={handleButtonPress} />;
-      case 6: return <FooterButtonsTab onButtonPress={handleButtonPress} />;
-      default: return null;
-    }
-  };
-
-  return (
-    <SafeAreaView style={styles.safeArea}>
-      {/* Header */}
-      <View style={styles.header}>
-        <Text style={styles.headerTitle}>Native Buttons</Text>
-      </View>
-
-      {/* Tab 导航 */}
-      <View style={styles.tabContainer}>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.tabScrollContent}
-        >
-          {tabs.map((tab) => (
-            <TouchableOpacity
-              key={tab.id}
-              style={[styles.tab, activeTab === tab.id && styles.tabActive]}
-              onPress={() => setActiveTab(tab.id)}
-            >
-              <Text style={[styles.tabText, activeTab === tab.id && styles.tabTextActive]}>
-                {tab.title}
-              </Text>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      </View>
-
-      {/* Tab 内容 */}
-      <ScrollView
-        style={styles.container}
-        contentContainerStyle={styles.contentContainer}
-        showsVerticalScrollIndicator={false}
-      >
-        {renderTabContent()}
-      </ScrollView>
-    </SafeAreaView>
-  );
-};
-
-// ─── Text Buttons Tab ────────────────────────────────────────────────────────
-
-const TextButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => (
-  <View style={styles.tabContent}>
-    <SectionTitle title="常规文本按钮" />
-    <View style={styles.buttonGroup}>
-      <TextButton text="Black Text Button" styleName={ButtonStyles.Text.Black} onPress={() => onButtonPress('TextButton.Black')} />
-      <TextButton text="Gray Text Button"  styleName={ButtonStyles.Text.Gray}  onPress={() => onButtonPress('TextButton.Gray')}  style={styles.buttonMargin} />
-      <TextButton text="Blue Text Button"  styleName={ButtonStyles.Text.Blue}  onPress={() => onButtonPress('TextButton.Blue')}  style={styles.buttonMargin} />
-    </View>
-
-    <SectionTitle title="禁用状态" />
-    <View style={styles.buttonGroup}>
-      <TextButton text="Black Text Button (Disabled)" styleName={ButtonStyles.Text.Black} enabled={false} onPress={() => onButtonPress('TextButton.Black.Disabled')} />
-      <TextButton text="Gray Text Button (Disabled)"  styleName={ButtonStyles.Text.Gray}  enabled={false} onPress={() => onButtonPress('TextButton.Gray.Disabled')}  style={styles.buttonMargin} />
-      <TextButton text="Blue Text Button (Disabled)"  styleName={ButtonStyles.Text.Blue}  enabled={false} onPress={() => onButtonPress('TextButton.Blue.Disabled')}  style={styles.buttonMargin} />
-    </View>
-  </View>
-);
-
-// ─── Primary Buttons Tab ─────────────────────────────────────────────────────
-
-const PrimaryButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => {
-  const [loading, setLoading] = useState(false);
-  return (
-    <View style={styles.tabContent}>
-      <SectionTitle title="常规" />
-      <View style={styles.buttonGroup}>
-        {(['XLarge', 'Large', 'Medium', 'Small', 'XSmall', 'XXSmall'] as const).map((size, i) => (
-          <Button key={size} text={`Primary ${size}`} styleName={ButtonStyles.Primary[size]} onPress={() => onButtonPress(`Primary.${size}`)} style={i > 0 ? styles.buttonMargin : undefined} />
-        ))}
-      </View>
-
-      <SectionTitle title="左图标（SVG原生）" />
-      <View style={styles.buttonGroup}>
-        {(['XLarge', 'Large', 'Medium', 'Small', 'XSmall', 'XXSmall'] as const).map((size, i) => (
-          <Button key={size} text="Button" styleName={ButtonStyles.Primary[size]} iconLeft={IC_BUTTON_SVG} onPress={() => onButtonPress(`Primary.${size}.Icon.Leading`)} style={i > 0 ? styles.buttonMargin : undefined} />
-        ))}
-      </View>
-
-      <SectionTitle title="右图标（SVG原生）" />
-      <View style={styles.buttonGroup}>
-        {(['XLarge', 'Large', 'Medium', 'Small', 'XSmall', 'XXSmall'] as const).map((size, i) => (
-          <Button key={size} text="Button" styleName={ButtonStyles.Primary[size]} iconRight={IC_BUTTON_SVG} onPress={() => onButtonPress(`Primary.${size}.Icon.Trailing`)} style={i > 0 ? styles.buttonMargin : undefined} />
-        ))}
-      </View>
-
-      <SectionTitle title="加载状态" rightElement={<LoadingSwitch value={loading} onChange={setLoading} />} />
-      <View style={styles.buttonGroup}>
-        <Button text="Primary XLarge" styleName={ButtonStyles.Primary.XLarge} loading={loading} onPress={() => onButtonPress('Primary.XLarge')} />
-        <Button text="Primary Large"  styleName={ButtonStyles.Primary.Large}  loading={loading} onPress={() => onButtonPress('Primary.Large')}  style={styles.buttonMargin} />
-        <Button text="Primary Medium" styleName={ButtonStyles.Primary.Medium} loading={loading} onPress={() => onButtonPress('Primary.Medium')} style={styles.buttonMargin} />
-        <Button text="Button"         styleName={ButtonStyles.Primary.Large}  loading={loading} iconLeft={IC_BUTTON_SVG} onPress={() => onButtonPress('Primary.Large.Icon.Leading')} style={styles.buttonMargin} />
-      </View>
-
-      <SectionTitle title="禁用状态" />
-      <View style={styles.buttonGroup}>
-        <Button text="Primary Large (Disabled)"  styleName={ButtonStyles.Primary.Large}  enabled={false} onPress={() => onButtonPress('Primary.Large.Disabled')} />
-        <Button text="Primary Medium (Disabled)" styleName={ButtonStyles.Primary.Medium} enabled={false} onPress={() => onButtonPress('Primary.Medium.Disabled')} style={styles.buttonMargin} />
-      </View>
-    </View>
-  );
-};
-
-// ─── Generic Color Tabs (Secondary / Green / Red / White) ────────────────────
-
-type ColorTabProps = { colorKey: 'Secondary' | 'Green' | 'Red' | 'White'; onButtonPress: (style: string) => void };
-
-const ColorButtonsTab: React.FC<ColorTabProps> = ({ colorKey, onButtonPress }) => {
-  const [loading, setLoading] = useState(false);
-  const sizes = ['XLarge', 'Large', 'Medium', 'Small', 'XSmall', 'XXSmall'] as const;
-  const styleMap = ButtonStyles[colorKey] as Record<string, string>;
-
-  return (
-    <View style={styles.tabContent}>
-      <SectionTitle title="常规" />
-      <View style={styles.buttonGroup}>
-        {sizes.map((size, i) => (
-          <Button key={size} text="Button" styleName={styleMap[size] as ButtonStyleName} onPress={() => onButtonPress(`${colorKey}.${size}`)} style={i > 0 ? styles.buttonMargin : undefined} />
-        ))}
-      </View>
-
-      <SectionTitle title="左图标（SVG原生）" />
-      <View style={styles.buttonGroup}>
-        {sizes.map((size, i) => (
-          <Button key={size} text="Button" styleName={styleMap[size] as ButtonStyleName} iconLeft={IC_BUTTON_SVG} onPress={() => onButtonPress(`${colorKey}.${size}.Icon.Leading`)} style={i > 0 ? styles.buttonMargin : undefined} />
-        ))}
-      </View>
-
-      <SectionTitle title="右图标（SVG原生）" />
-      <View style={styles.buttonGroup}>
-        {sizes.map((size, i) => (
-          <Button key={size} text="Button" styleName={styleMap[size] as ButtonStyleName} iconRight={IC_BUTTON_SVG} onPress={() => onButtonPress(`${colorKey}.${size}.Icon.Trailing`)} style={i > 0 ? styles.buttonMargin : undefined} />
-        ))}
-      </View>
-
-      <SectionTitle title="加载状态" rightElement={<LoadingSwitch value={loading} onChange={setLoading} />} />
-      <View style={styles.buttonGroup}>
-        {sizes.slice(0, 4).map((size, i) => (
-          <Button key={size} text="Button" styleName={styleMap[size] as ButtonStyleName} loading={loading} onPress={() => onButtonPress(`${colorKey}.${size}`)} style={i > 0 ? styles.buttonMargin : undefined} />
-        ))}
-      </View>
-    </View>
-  );
-};
-
-const SecondaryButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => (
-  <ColorButtonsTab colorKey="Secondary" onButtonPress={onButtonPress} />
-);
-const GreenButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => (
-  <ColorButtonsTab colorKey="Green" onButtonPress={onButtonPress} />
-);
-const RedButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => (
-  <ColorButtonsTab colorKey="Red" onButtonPress={onButtonPress} />
-);
-const WhiteButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => (
-  <ColorButtonsTab colorKey="White" onButtonPress={onButtonPress} />
-);
-
-// ─── Footer Buttons Tab ──────────────────────────────────────────────────────
-
-const FooterButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => (
-  <View style={styles.tabContent}>
-    <SectionTitle title="底部全宽按钮" />
-    <View style={styles.footerButtonGroup}>
-      <Button text="Button" styleName={ButtonStyles.Primary.Large}   fullWidth onPress={() => onButtonPress('Primary.Large')} />
-      <Button text="Button" styleName={ButtonStyles.Secondary.Large} fullWidth onPress={() => onButtonPress('Secondary.Large')} style={styles.footerButtonSpacing} />
-      <View style={styles.footerTwoButtonRow}>
-        <Button text="Button" styleName={ButtonStyles.Secondary.Large} fullWidth onPress={() => onButtonPress('Secondary.Large')} />
-        <Button text="Button" styleName={ButtonStyles.Primary.Large}   fullWidth onPress={() => onButtonPress('Primary.Large')} />
-      </View>
-    </View>
-  </View>
-);
-
-// ─── Shared helpers ──────────────────────────────────────────────────────────
-
-const SectionTitle: React.FC<{ title: string; rightElement?: React.ReactNode }> = ({ title, rightElement }) => (
-  <View style={styles.titleRow}>
-    <Text style={styles.title}>{title}</Text>
-    {rightElement}
-  </View>
-);
-
-const LoadingSwitch: React.FC<{ value: boolean; onChange: (v: boolean) => void }> = ({ value, onChange }) => (
-  <View style={styles.switchRow}>
-    <Text style={styles.switchLabel}>进度条</Text>
-    <Switch value={value} onValueChange={onChange} />
-  </View>
-);
-
-// ─── Styles ──────────────────────────────────────────────────────────────────
-
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    backgroundColor: '#FFFFFF',
-  },
-  header: {
-    height: 56,
-    paddingHorizontal: 16,
-    justifyContent: 'center',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#E0E0E0',
-    backgroundColor: '#FFFFFF',
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#151515',
-  },
-  tabContainer: {
-    backgroundColor: '#FFFFFF',
-    borderBottomWidth: 1,
-    borderBottomColor: '#E0E0E0',
-  },
-  tabScrollContent: {
-    paddingHorizontal: 16,
-  },
-  tab: {
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    marginRight: 8,
-    borderBottomWidth: 2,
-    borderBottomColor: 'transparent',
-  },
-  tabActive: {
-    borderBottomColor: '#2196F3',
-  },
-  tabText: {
-    fontSize: 14,
-    fontWeight: '400',
-    color: '#666666',
-  },
-  tabTextActive: {
-    fontWeight: '600',
-    color: '#2196F3',
-  },
-  container: {
-    flex: 1,
-    backgroundColor: '#FFFFFF',
-  },
-  contentContainer: {
-    paddingBottom: 24,
-  },
-  tabContent: {
-    padding: 24,
-  },
-  titleRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  title: {
-    flex: 1,
-    fontSize: 20,
-    fontWeight: '600',
-    color: '#151515',
-  },
-  switchRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  switchLabel: {
-    fontSize: 14,
-    color: '#666666',
-  },
-  buttonGroup: {
-    alignItems: 'center',
-    marginBottom: 32,
-  },
-  buttonMargin: {
-    marginTop: 16,
-  },
-  footerButtonGroup: {
-    width: '100%',
-    alignSelf: 'stretch',
-  },
-  footerButtonSpacing: {
-    marginTop: 16,
-  },
-  footerTwoButtonRow: {
-    flexDirection: 'row',
-    width: '100%',
-    marginTop: 16,
-    gap: 16,
-  },
-});
-
-export default NativeButtonsScreen;