@seakoi/native-ui 1.1.3 → 1.3.0

package/src/components/base/select/types.ts

@@ -0,0 +1,261 @@
+import type React from 'react';
+import type {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+import type { SelectSearchConfig } from '#components/base/select/hooks/use-select-actions';
+
+// ==================== 基础类型定义 ====================
+
+/**
+ * 选项数据类型
+ *
+ * @template ValueType - 选项值的类型
+ */
+export interface SelectOption<ValueType = unknown> {
+  /** 选项标签 */
+  label: React.ReactNode;
+  /** 选项值 */
+  value: ValueType;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 选项自定义样式 */
+  style?: StyleProp<ViewStyle>;
+  /** 自定义数据(用于扩展) */
+  [key: PropertyKey]: unknown;
+}
+
+/**
+ * 选项分组类型
+ *
+ * @template ValueType - 选项值的类型
+ */
+export interface SelectOptionGroup<OptionType extends SelectOption = SelectOption> {
+  /** 分组标识 */
+  key: string;
+  /** 分组名称 */
+  label: React.ReactNode;
+  /** 分组选项 */
+  options: OptionType[];
+  /** 分组自定义样式 */
+  style?: StyleProp<ViewStyle>;
+}
+
+/** 选择模式 */
+export type SelectMode = 'multiple' | 'tags';
+
+// ==================== 搜索配置 ====================
+
+// ==================== Select 主组件 Props ====================
+
+/**
+ * Select 组件属性
+ *
+ * @template ValueType - 选项值的类型
+ * @template M - 选择模式
+ */
+export interface SelectProps<
+  ValueType = unknown,
+  OptionType extends SelectOption<ValueType> = SelectOption<ValueType>,
+  M extends SelectMode | undefined = undefined,
+  RealValueType extends M extends SelectMode
+    ? ValueType[]
+    : ValueType = M extends SelectMode ? ValueType[] : ValueType,
+> extends SelectSearchConfig<OptionType> {
+  // ==================== 基础属性 ====================
+
+  /**
+   * 是否允许清除
+   * @default false
+   */
+  allowClear?: boolean | { clearIcon?: React.ReactNode };
+
+  /**
+   * 默认选中的值
+   */
+  defaultValue?: RealValueType;
+
+  /**
+   * 是否禁用
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * 自定义当前选中的标签内容渲染
+   */
+  labelRender?: (props: OptionType, info: { index: number }) => React.ReactNode;
+
+  /**
+   * 选择模式(多选或标签)
+   */
+  mode?: M;
+
+  /**
+   * 数据化配置选项内容
+   * @default []
+   */
+  options?: (OptionType | SelectOptionGroup<OptionType>)[];
+
+  /**
+   * 占位符文本
+   * @default '请选择'
+   */
+  placeholder?: string;
+
+  /**
+   * 自定义前缀
+   */
+  prefix?: React.ReactNode;
+
+  /**
+   * 自定义多选框清除图标
+   */
+  removeIcon?: React.ReactNode;
+
+  /**
+   * 配置搜索功能
+   * @default false
+   */
+  showSearch?: boolean;
+
+  /**
+   * 自定义后缀图标
+   */
+  suffixIcon?: React.ReactNode | ((open: boolean) => React.ReactNode);
+
+  /**
+   * 当前选中的值
+   */
+  value?: RealValueType;
+
+  // ==================== 下拉框配置 ====================
+
+  /**
+   * 是否展开下拉菜单
+   */
+  open?: boolean;
+  /**
+   * 是否默认展开下拉菜单
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /** 自定义下拉框内容 */
+  popupRender?: (menu: React.ReactElement) => React.ReactElement;
+  /** 下拉列表滚动时回调 */
+  onPopupScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  /**
+   * 下拉菜单和选择器同宽
+   */
+  popupMatchWidth?: boolean | number;
+  /**
+   * 下拉菜单位置,不指定时自动计算
+   */
+  popupPlacement?: 'top' | 'bottom';
+  /**
+   * 加载中状态
+   */
+  popupLoading?: boolean;
+  /**
+   * 下拉列表为空时显示的内容
+   */
+  popupNotFoundContent?: React.ReactNode;
+  /**
+   * 自定义选中项图标
+   */
+  popupSelectedIcon?: React.ReactNode;
+  /**
+   * 自定义渲染下拉选项
+   */
+  popupOptionRender?: (
+    option: OptionType,
+    info: { index: number; selected: boolean },
+  ) => React.ReactNode;
+  /**
+   * 下拉菜单最大高度
+   * @default {@link DEFAULT_POPUP_MAX_HEIGHT}
+   */
+  popupMaxHeight?: number;
+
+  // ==================== 标签配置 ====================
+
+  /** 最多可选中的数量 */
+  tagMaxCount?: number;
+  /** 最大标签数量 */
+  maxTagCount?: number | 'responsive' | 'all';
+  /** 超出最大数量时的占位符 */
+  maxTagPlaceholder?:
+    | React.ReactNode
+    | ((omittedItems: OptionType[]) => React.ReactNode);
+  /** 最大标签文本长度 */
+  maxTagTextLength?: number;
+  /** 自定义标签渲染 */
+  tagRender?: (
+    option: OptionType,
+    props: {
+      disabled?: boolean;
+      onClose: () => void;
+      closable: boolean;
+    },
+  ) => React.ReactNode;
+
+  // ==================== 样式属性 ====================
+
+  /** 根元素自定义样式 */
+  style?: StyleProp<ViewStyle>;
+  /** 前缀元素样式 */
+  prefixStyle?: StyleProp<ViewStyle>;
+  /** 内容容器样式 */
+  contentStyle?: StyleProp<ViewStyle>;
+  /** 占位符样式 */
+  placeholderStyle?: StyleProp<TextStyle>;
+  /** 输入框样式 */
+  inputStyle?: StyleProp<TextStyle>;
+  /** 多选标签项容器样式 */
+  tagItemStyle?: StyleProp<ViewStyle>;
+  /** 多选标签文本内容样式 */
+  tagContentStyle?: StyleProp<TextStyle>;
+  /** 多选标签删除按钮样式 */
+  tagRemoveStyle?: StyleProp<ViewStyle>;
+  /** 多选标签整体容器样式 */
+  tagContainerStyle?: StyleProp<ViewStyle>;
+  /** 后缀元素样式 */
+  suffixStyle?: StyleProp<ViewStyle>;
+  /** 清除按钮样式 */
+  clearStyle?: StyleProp<ViewStyle>;
+  /** 弹出菜单容器样式 */
+  popupRootStyle?: StyleProp<ViewStyle>;
+  /** 弹出菜单列表样式 */
+  popupListStyle?: StyleProp<ViewStyle>;
+  /** 弹出菜单条目样式 */
+  popupListItemStyle?: StyleProp<ViewStyle>;
+  /** 分组标签样式 */
+  popupGroupLabelStyle?: StyleProp<TextStyle>;
+
+  // ==================== 事件回调 ====================
+
+  /** 键盘和鼠标交互时触发 */
+  onActive?: (value: ValueType) => void;
+
+  /** 选中值变化时回调 */
+  onChange?: (value: RealValueType) => void;
+
+  /** 清除内容时回调 */
+  onClear?: () => void;
+
+  /** 取消选中时回调(仅 multiple/tags 模式) */
+  onDeselect?: (value: ValueType) => void;
+
+  /** 展开下拉菜单的回调 */
+  onOpenChange?: (open: boolean) => void;
+
+  /** 被选中时回调 */
+  onSelect?: (value: ValueType, option: OptionType) => void;
+
+  /** 创建新选项时回调(仅 tags 模式) */
+  onCreateOption?: (inputValue: string) => OptionType | void;
+}

package/src/components/base/tabs/style/index.ts

@@ -0,0 +1,32 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useTabsStyles = createThemedStyles(theme => {
+  return {
+    container: {
+      width: '100%',
+    },
+    tabItem: {
+      paddingVertical: 16,
+      paddingHorizontal: 10,
+    },
+    labelText: {
+      color: theme.palette.fontGray2,
+    },
+    labelTab: {
+      paddingHorizontal: 16,
+      paddingVertical: 4,
+      borderWidth: 1,
+      borderColor: theme.palette.blueGray1,
+      backgroundColor: theme.palette.blueGray1,
+      borderRadius: theme.roundness.md,
+      gap: 4,
+    },
+    labelTabActive: {
+      backgroundColor: theme.palette.brand1,
+      borderColor: theme.palette.brand7,
+    },
+    labelTextActive: {
+      color: theme.palette.brand7,
+    },
+  };
+});

package/src/components/base/tabs/tabs.tsx

@@ -1,23 +1,63 @@
+import { useControllableValue, useMemoizedFn } from 'ahooks';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Animated,
   type LayoutChangeEvent,
   type LayoutRectangle,
   ScrollView,
+  type StyleProp,
   TouchableOpacity,
   View,
+  type ViewStyle,
 } from 'react-native';
 
-import { Text } from '#components/base';
-import { createThemedStyles, useTheme } from '#native-provider';
-interface TabsProps {
-  tabs: string[];
-  activeTab?: string | number;
-  onChange?: (tab: string | number) => void;
+import { Badge, Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import { useTabsStyles } from './style';
+export interface TabItem {
+  /** 标签文本 */
+  label: React.ReactNode;
+  /** 标签值，唯一标识 */
+  value: string | number;
+  /** 徽标内容（数字或红点） */
+  badge?: number | boolean;
+}
+
+export interface TabsProps {
+  /** 标签数据 */
+  tabs: TabItem[];
+  /** 当前激活的标签值（受控） */
+  value?: string | number;
+  /** 默认激活的标签值（非受控） */
+  defaultValue?: string | number;
+  /** 标签切换回调 */
+  onChange?: (value: string | number) => void;
+  /** 样式类型 */
+  variant?: 'underline' | 'label';
+  /** 容器样式 */
+  style?: StyleProp<ViewStyle>;
+  /** 右侧操作区域 */
+  extra?: React.ReactNode;
+  /** 是否均分宽度（仅 underline 和 isometric 支持） */
+  equalWidth?: boolean;
 }
 
-export const Tabs: React.FC<TabsProps> = ({ tabs, onChange }) => {
-  const styles = useStyles();
+export const Tabs: React.FC<TabsProps> = ({
+  tabs,
+  equalWidth = false,
+  variant = 'underline',
+  ...restProps
+}) => {
+  const [activeValue, setActiveValue] = useControllableValue<TabItem['value']>(
+    restProps,
+    {
+      trigger: 'onChange',
+      defaultValue: restProps.defaultValue ?? tabs[0]?.value,
+    },
+  );
+
+  const styles = useTabsStyles();
   const theme = useTheme();
 
   const tabNum = tabs.length;
@@ -57,34 +97,27 @@ export const Tabs: React.FC<TabsProps> = ({ tabs, onChange }) => {
     initIndicator();
   };
 
-  const normalizedTabs = tabs.map(tab => {
-    if (typeof tab === 'string') {
-      return {
-        label: tab,
-        value: tab,
-      };
-    }
-  });
-
   const navigateTo = index => {
     const targetLayout = layouts.current[index];
 
     const left =
       targetLayout.tab.x + (targetLayout.tab.width - targetLayout.text.width) / 2;
-    const width = targetLayout.text.width;
-
-    Animated.parallel([
-      Animated.timing(animatedIndicatorLeft.current, {
-        toValue: left,
-        useNativeDriver: false,
-        duration: 300,
-      }),
-      Animated.timing(animatedIndicatorWidth.current, {
-        toValue: width,
-        useNativeDriver: false,
-        duration: 300,
-      }),
-    ]).start();
+
+    if (variant === 'underline') {
+      const width = targetLayout.text.width;
+      Animated.parallel([
+        Animated.timing(animatedIndicatorLeft.current, {
+          toValue: left,
+          useNativeDriver: false,
+          duration: 300,
+        }),
+        Animated.timing(animatedIndicatorWidth.current, {
+          toValue: width,
+          useNativeDriver: false,
+          duration: 300,
+        }),
+      ]).start();
+    }
 
     const hh = scrollViewWidthRef.current / 2;
     scrollViewRef.current?.scrollTo({
@@ -93,12 +126,12 @@ export const Tabs: React.FC<TabsProps> = ({ tabs, onChange }) => {
     });
   };
 
-  const genOnPress = (v, index) => {
-    onChange?.(v);
+  const genOnPress = (v: TabItem, index: number) => {
+    setActiveValue?.(v.value);
     navigateTo(index);
   };
 
-  const initIndicator = useCallback(() => {
+  const initIndicator = useMemoizedFn(() => {
     const layoutItems = layouts.current.filter(item => item.tab && item.text);
     if (layoutItems.length === layouts.current.length) {
       setState(s => ({
@@ -106,7 +139,7 @@ export const Tabs: React.FC<TabsProps> = ({ tabs, onChange }) => {
         layoutFinish: true,
       }));
     }
-  }, []);
+  });
 
   const indicatorJSX = useMemo(() => {
     return (
@@ -123,24 +156,90 @@ export const Tabs: React.FC<TabsProps> = ({ tabs, onChange }) => {
     );
   }, [theme]);
 
-  const tabsJSX = normalizedTabs.map((item, index) => {
+  const renderTab = useMemoizedFn((tab: TabItem, index: number) => {
+    const isActive = activeValue === tab.value;
+    const badgeCount =
+      tab.badge !== undefined
+        ? typeof tab.badge === 'number'
+          ? tab.badge
+          : undefined
+        : undefined;
+
+    if (variant === 'label') {
+      return (
+        <View
+          key={tab.value}
+          onLayout={genOnLayoutTab(index)}
+          style={[
+            { paddingVertical: 10, zIndex: tabNum - index },
+            equalWidth && { flex: 1 },
+          ]}
+        >
+          <Badge count={badgeCount} visible={tab.badge !== undefined} size="small">
+            <TouchableOpacity
+              activeOpacity={0.7}
+              onPress={() => genOnPress(tab, index)}
+              style={[
+                styles.labelTab,
+                isActive && styles.labelTabActive,
+                equalWidth && {
+                  alignSelf: 'stretch',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                },
+              ]}
+            >
+              <Text
+                onLayout={genOnLayoutText(index)}
+                style={[styles.labelText, isActive && styles.labelTextActive]}
+                size={14}
+              >
+                {tab.label}
+              </Text>
+            </TouchableOpacity>
+          </Badge>
+        </View>
+      );
+    }
+
     return (
       <TouchableOpacity
-        key={item?.value}
-        style={styles.tabItem}
-        onPress={() => genOnPress(item, index)}
+        key={tab?.value}
+        style={[
+          styles.tabItem,
+          { zIndex: tabNum - index },
+          equalWidth && { flex: 1, justifyContent: 'center', alignItems: 'center' },
+        ]}
+        onPress={() => genOnPress(tab, index)}
         onLayout={genOnLayoutTab(index)}
       >
-        <Text onLayout={genOnLayoutText(index)}>{item?.label}</Text>
+        {/* underline 类型：Badge 作为 Text 的包裹层，自动定位在文字右上角 */}
+        <Badge
+          count={badgeCount}
+          visible={tab.badge !== undefined}
+          size="small"
+          offset={[-4, -4]}
+        >
+          <Text
+            color={isActive ? theme.palette.fontGray1 : theme.palette.fontGray2}
+            font={isActive ? 'semiBold' : 'regular'}
+            onLayout={genOnLayoutText(index)}
+            size={14}
+          >
+            {tab?.label}
+          </Text>
+        </Badge>
       </TouchableOpacity>
     );
   });
 
   useEffect(() => {
     if (state.layoutFinish) {
-      navigateTo(0);
+      const index = tabs.findIndex(item => item.value === activeValue);
+      navigateTo(index === -1 ? 0 : index);
     }
-  }, [state.layoutFinish]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.layoutFinish, activeValue]);
 
   return (
     <View style={styles.container}>
@@ -149,25 +248,17 @@ export const Tabs: React.FC<TabsProps> = ({ tabs, onChange }) => {
         horizontal
         showsHorizontalScrollIndicator={false}
         onLayout={onLayoutScrollView}
+        scrollEnabled={!equalWidth}
         contentContainerStyle={{
           alignContent: 'center',
-          columnGap: 16,
+          columnGap: 8,
+          flexGrow: equalWidth ? 1 : 0,
+          paddingHorizontal: 16,
         }}
       >
-        {tabsJSX}
+        {tabs.map(renderTab)}
         {indicatorJSX}
       </ScrollView>
     </View>
   );
 };
-
-const useStyles = createThemedStyles(() => {
-  return {
-    container: {
-      paddingHorizontal: 16,
-    },
-    tabItem: {
-      paddingVertical: 16,
-    },
-  };
-});

package/src/components/base/tag/index.ts

@@ -0,0 +1,5 @@
+import { Tag } from './tag';
+export * from './tag';
+export type * from './types';
+
+export default Tag;

package/src/components/base/tag/style/index.tsx

@@ -0,0 +1,84 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useTagStyles = createThemedStyles((theme, props) => {
+  const { themeColor = 'primary' } = props;
+  const BASE_COLOR_MAP = {
+    primary: {
+      baseColor: theme.palette.brand7,
+      lightColor: theme.palette.brand1,
+    },
+    danger: {
+      baseColor: theme.palette.error6,
+      lightColor: theme.palette.error1,
+    },
+    default: {
+      baseColor: theme.palette.gray6,
+      lightColor: theme.palette.gray2,
+    },
+  };
+  const Color = BASE_COLOR_MAP[themeColor];
+
+  return {
+    tag: {},
+    large: {
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 4,
+    },
+    medium: {
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      borderRadius: 2,
+    },
+    small: {
+      paddingHorizontal: 4,
+      paddingVertical: 1.5,
+      borderRadius: 1.5,
+    },
+    disabled: {
+      opacity: 0.5,
+    },
+    'font-small': {
+      fontSize: 10,
+    },
+    'font-medium': {
+      fontSize: 12,
+    },
+    'font-large': {
+      fontSize: 14,
+    },
+    filled: {
+      backgroundColor: Color.lightColor,
+    },
+    'text-filled': {
+      color: Color.baseColor,
+    },
+    outlined: {
+      borderColor: Color.baseColor,
+      borderWidth: 0.5,
+    },
+    'text-outlined': {
+      color: Color.baseColor,
+    },
+    solid: {
+      backgroundColor: Color.baseColor,
+    },
+    'text-solid': {
+      color: '#fff',
+    },
+  };
+});
+
+export const useTagGroupStyles = createThemedStyles(() => {
+  return {
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+    },
+    vertical: {
+      flexDirection: 'column',
+      alignItems: 'stretch',
+    },
+  };
+});

package/src/components/base/tag/tag-context.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+import type { TagContextValue } from './types';
+
+export const TagContext = createContext<TagContextValue>({
+  size: 'medium',
+  disabled: false,
+});
+TagContext.displayName = 'TagContext';

package/src/components/base/tag/tag-group.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { useTagGroupStyles } from './style';
+import { TagContext } from './tag-context';
+import type { TagGroupProps } from './types';
+
+export const TagGroup: React.FC<TagGroupProps> = ({
+  children,
+  direction = 'horizontal',
+  gap = 16,
+  style,
+  size,
+  disabled,
+}) => {
+  const groupStyles = useTagGroupStyles();
+  return (
+    <TagContext.Provider value={{ size, disabled }}>
+      <View
+        style={[
+          groupStyles.container,
+          direction === 'vertical' && groupStyles.vertical,
+          gap > 0 && { gap },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </TagContext.Provider>
+  );
+};