@seakoi/native-ui 1.0.0

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

@@ -0,0 +1,40 @@
+import {
+  type GestureResponderEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+export interface SwitchProps {
+  /**
+   * 开关状态（受控）
+   */
+  checked?: boolean;
+
+  /**
+   * 默认开关状态（非受控）
+   * @default false
+   */
+  defaultChecked?: boolean;
+
+  /**
+   * 是否禁用
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * 状态变化时的回调
+   */
+  onChange?: (checked: boolean, event: GestureResponderEvent) => void;
+
+  /**
+   * 点击时的不透明度
+   * @default 0.6
+   */
+  activeOpacity?: number;
+
+  /**
+   * 自定义样式
+   */
+  style?: StyleProp<ViewStyle>;
+}

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

@@ -0,0 +1 @@
+export * from './tabs';

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

@@ -0,0 +1,173 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Animated,
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} 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;
+}
+
+export const Tabs: React.FC<TabsProps> = ({ tabs, onChange }) => {
+  const styles = useStyles();
+  const theme = useTheme();
+
+  const tabNum = tabs.length;
+
+  const scrollViewWidthRef = useRef(0);
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  const animatedIndicatorWidth = useRef(new Animated.Value(0));
+  const animatedIndicatorLeft = useRef(new Animated.Value(0));
+
+  const [state, setState] = useState({
+    layoutFinish: false,
+  });
+
+  const layouts = useRef<{ tab: LayoutRectangle; text: LayoutRectangle }[]>(
+    new Array(tabNum).fill({}),
+  );
+
+  const onLayoutScrollView = useCallback((e: LayoutChangeEvent) => {
+    scrollViewWidthRef.current = e.nativeEvent.layout.width;
+  }, []);
+
+  const genOnLayoutTab = (i: number) => (e: LayoutChangeEvent) => {
+    layouts.current[i] = {
+      text: layouts.current[i]?.text,
+      tab: e.nativeEvent.layout,
+    };
+
+    initIndicator();
+  };
+
+  const genOnLayoutText = (i: number) => (e: LayoutChangeEvent) => {
+    layouts.current[i] = {
+      tab: layouts.current[i]?.tab,
+      text: e.nativeEvent.layout,
+    };
+    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();
+
+    const hh = scrollViewWidthRef.current / 2;
+    scrollViewRef.current?.scrollTo({
+      x: targetLayout.tab.x + targetLayout.tab.width / 2 - hh,
+      animated: true,
+    });
+  };
+
+  const genOnPress = (v, index) => {
+    onChange?.(v);
+    navigateTo(index);
+  };
+
+  const initIndicator = useCallback(() => {
+    const layoutItems = layouts.current.filter(item => item.tab && item.text);
+    if (layoutItems.length === layouts.current.length) {
+      setState(s => ({
+        ...s,
+        layoutFinish: true,
+      }));
+    }
+  }, []);
+
+  const indicatorJSX = useMemo(() => {
+    return (
+      <Animated.View
+        style={{
+          height: 4,
+          width: animatedIndicatorWidth.current,
+          backgroundColor: theme.palette.brand7,
+          position: 'absolute',
+          left: animatedIndicatorLeft.current,
+          bottom: 0,
+        }}
+      />
+    );
+  }, [theme]);
+
+  const tabsJSX = normalizedTabs.map((item, index) => {
+    return (
+      <TouchableOpacity
+        key={item?.value}
+        style={styles.tabItem}
+        onPress={() => genOnPress(item, index)}
+        onLayout={genOnLayoutTab(index)}
+      >
+        <Text onLayout={genOnLayoutText(index)}>{item?.label}</Text>
+      </TouchableOpacity>
+    );
+  });
+
+  useEffect(() => {
+    if (state.layoutFinish) {
+      navigateTo(0);
+    }
+  }, [state.layoutFinish]);
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        ref={scrollViewRef}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        onLayout={onLayoutScrollView}
+        contentContainerStyle={{
+          alignContent: 'center',
+          columnGap: 16,
+        }}
+      >
+        {tabsJSX}
+        {indicatorJSX}
+      </ScrollView>
+    </View>
+  );
+};
+
+const useStyles = createThemedStyles(() => {
+  return {
+    container: {
+      paddingHorizontal: 16,
+    },
+    tabItem: {
+      paddingVertical: 16,
+    },
+  };
+});

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

@@ -0,0 +1,8 @@
+import { Text as _Text } from './text';
+import { TextHighlight } from './text-highlight';
+
+export * from './text';
+export * from './text-highlight';
+export const Text = Object.assign(_Text, {
+  Highlight: TextHighlight,
+});

package/src/components/base/text/text-highlight.tsx

@@ -0,0 +1,56 @@
+import { isValidElement } from 'react';
+import { type TextStyle } from 'react-native';
+
+import { Text, type TextProps } from '#components/base/text';
+import { useTheme } from '#native-provider';
+
+export interface TextHighlightProps extends TextProps {
+  /** 高亮颜色 */
+  highlightColor?: string;
+  /** 高亮关键词 */
+  keywords?: string | RegExp;
+}
+
+const escapeRegExp = (text: string) => {
+  return text.replace(/([.*+?^${}()|[\]\\])/g, '\\$1');
+};
+export const TextHighlight: React.FC<TextHighlightProps> = props => {
+  const theme = useTheme();
+
+  const isStringText =
+    typeof props.children === 'string' ||
+    (Array.isArray(props.children) && !props.children.some(isValidElement));
+
+  if (!props.keywords || !isStringText) {
+    return <Text {...props}>{props.children}</Text>;
+  }
+
+  let childText = props.children;
+  if (Array.isArray(props.children)) {
+    /** 处理文本存在变量情况 */
+    childText = props.children.join('');
+  }
+
+  const regex =
+    props.keywords instanceof RegExp
+      ? props.keywords
+      : new RegExp(`(${escapeRegExp(props.keywords)})`, 'gi');
+  return (
+    <Text {...props}>
+      {(childText as string).split(regex).map((content, key) => {
+        let highlightStyle: TextStyle | undefined = undefined;
+        if (!content) return null;
+        if (regex.test(content)) {
+          highlightStyle = {
+            color: props.highlightColor ?? theme.palette.brand7,
+          };
+        }
+        return (
+          <Text {...props} key={key} style={[props.style, highlightStyle]}>
+            {content}
+          </Text>
+        );
+      })}
+    </Text>
+  );
+};

package/src/components/base/text/text.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+import {
+  Platform,
+  Text as NativeText,
+  type TextProps as NativeTextProps,
+  type TextStyle,
+} from 'react-native';
+
+import { useTheme } from '#native-provider';
+import { type Fonts, type TypescaleType } from '#shared/theme';
+import type { ExtractNumber } from '#shared/utils/types';
+
+export interface TextProps extends NativeTextProps {
+  /**
+   * 字体类型
+   * @default regular
+   */
+  font?: keyof Fonts;
+  /**
+   * 字体颜色
+   * @default theme.palette.fontGray1
+   */
+  color?: string;
+  /** 字体大小 */
+  size?: ExtractNumber<keyof TypescaleType, 'size'>;
+  /** 文本内容 */
+  children?: React.ReactNode;
+}
+
+export const Text: React.FC<TextProps> = props => {
+  const theme = useTheme();
+  const textColor = props.color ?? theme.palette.fontGray1;
+
+  const fontStyle = useMemo<TextStyle>(() => {
+    let fontSizeVariant = theme.fonts.regular;
+    if (props.font && Object.keys(theme.fonts).includes(props.font)) {
+      fontSizeVariant = theme.fonts[props.font];
+    }
+    if (props.size) {
+      const fontSizeKey = Object.keys(fontSizeVariant).find(key => {
+        return key.includes(props.size!.toString());
+      });
+      if (fontSizeKey) return fontSizeVariant[fontSizeKey];
+    }
+    return Platform.select({
+      web: fontSizeVariant.size16,
+      default: fontSizeVariant.size14,
+    });
+  }, [props.font, props.size, theme.fonts]);
+
+  if (
+    Platform.OS === 'web' &&
+    fontStyle.fontSize &&
+    fontStyle.lineHeight &&
+    fontStyle.lineHeight < fontStyle.fontSize
+  ) {
+    // 兼容 Web 端 lineHeight 属性
+    const lineHeight = fontStyle.lineHeight * fontStyle.fontSize;
+    Object.assign(fontStyle, {
+      lineHeight: Number(lineHeight.toFixed(1)),
+    });
+  }
+
+  return (
+    <NativeText
+      {...props}
+      allowFontScaling={false}
+      style={[{ color: textColor }, fontStyle, props.style]}
+    >
+      {props.children}
+    </NativeText>
+  );
+};

package/src/components/business/index.ts

@@ -0,0 +1,3 @@
+/** 导出业务组件 */
+export * from './list';
+export * from './money';

package/src/components/business/list/hooks/use-list.ts

@@ -0,0 +1,197 @@
+import { useLatest, useMemoizedFn, useRequest, useUpdateEffect } from 'ahooks';
+import { get, isEqual, noop, omit } from 'lodash-es';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { FlatList } from 'react-native';
+
+import type { ResultType } from '#components/base';
+import { isNetworkError } from '#shared/utils/error';
+
+import type {
+  ListAPiParams,
+  ListRequestStatus,
+  UseListOptions,
+  UseListReturn,
+} from '../types';
+
+/**
+ * List 组件核心 Hook
+ * 封装分页请求、状态管理、数据去重等逻辑
+ */
+export const useList = <T>(options: UseListOptions<T>): UseListReturn<T> => {
+  const {
+    requestApi,
+    requestParams,
+    searchField,
+    searchKeyword,
+    fromType,
+    pageSize,
+    isPagination,
+    onRequestSuccess,
+    customGetDataField,
+    handleApiData,
+    keyField,
+    joinList = [],
+    immediate,
+  } = options;
+
+  const flatListRef = useRef<FlatList>(null);
+  const [listData, setListData] = useState<T[]>([]);
+  const [reqStatus, setReqStatus] = useState<ListRequestStatus>('LOADING');
+  const [pageLoad, setPageLoad] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRequestSuccessRef = useLatest(onRequestSuccess || noop);
+  const handleApiDataRef = useLatest(handleApiData);
+  const preRequestParamsRef = useRef<ListAPiParams>(requestParams);
+  const listDataKeys = useRef<Set<unknown>>(new Set());
+  const requestMoreLock = useRef(false);
+
+  const pageInfo = useRef({ page: 1, pageSize }).current;
+
+  const {
+    runAsync: fetchRequestApi,
+    cancel,
+    error: requestError,
+  } = useRequest(params => requestApi(params), { manual: true });
+
+  /** 过滤重复数据 */
+  const filterListData = (data: T[]): T[] => {
+    if (!data[0]?.[keyField as keyof T]) return data;
+
+    if (pageInfo.page === 1) {
+      listDataKeys.current.clear();
+    }
+
+    const uniqueData: T[] = [];
+    data.forEach(item => {
+      const key = item[keyField as keyof T];
+      if (!listDataKeys.current.has(key)) {
+        uniqueData.push(item);
+        listDataKeys.current.add(key);
+      }
+    });
+    return uniqueData;
+  };
+
+  /** 构建请求参数 */
+  const currentRequestParams = useMemo(() => {
+    const params = { ...requestParams };
+    if (searchField && searchKeyword) {
+      params.filters = [
+        ...(params.filters ?? []),
+        {
+          fieldName: searchField,
+          fieldValues: [searchKeyword],
+          fromType,
+          operator: 'like',
+        },
+      ];
+    }
+    return params;
+  }, [requestParams, searchKeyword, fromType, searchField]);
+
+  /** 获取列表数据 */
+  const handleFetchListApi = useMemoizedFn(async () => {
+    try {
+      cancel?.();
+
+      const params = omit(
+        { ...currentRequestParams, ...(isPagination && pageInfo) },
+        ['reqTime'],
+      );
+
+      const response = await fetchRequestApi(params);
+      onRequestSuccessRef.current(response, params);
+
+      let list = customGetDataField
+        ? get(response, customGetDataField) || []
+        : response;
+
+      // 更新分页状态
+      if (isPagination) {
+        setReqStatus(list.length === pageInfo.pageSize ? 'LOADING' : 'NOMORE');
+      } else {
+        setReqStatus('NOMORE');
+      }
+
+      // 自定义数据处理
+      if (handleApiDataRef.current) {
+        list = handleApiDataRef.current(list, pageInfo);
+      }
+
+      // 过滤重复 + 合并数据
+      list = filterListData(pageInfo.page === 1 ? [...joinList, ...list] : list);
+
+      setListData(prev => (pageInfo.page === 1 ? [...list] : [...prev, ...list]));
+      setPageLoad(false);
+    } catch {
+      setReqStatus('ERROR');
+    } finally {
+      requestMoreLock.current = false;
+      setRefreshing(false);
+    }
+  });
+
+  /** 上拉加载更多 */
+  const onEndReached = useMemoizedFn(() => {
+    if (requestMoreLock.current || ['NOMORE', 'ERROR'].includes(reqStatus)) return;
+    if (listData.length === 0 || !isPagination) return;
+
+    pageInfo.page++;
+    requestMoreLock.current = true;
+    handleFetchListApi();
+  });
+
+  /** 下拉刷新 */
+  const onRefresh = useMemoizedFn(() => {
+    setRefreshing(true);
+    pageInfo.page = 1;
+    handleFetchListApi();
+  });
+
+  /** 重新加载（用于错误重试） */
+  const reload = useMemoizedFn(() => {
+    setReqStatus('LOADING');
+    handleFetchListApi();
+  });
+
+  /** 错误类型 */
+  const errorType = useMemo<ResultType>(
+    () => (isNetworkError(requestError) ? 'error-network' : 'error-other'),
+    [requestError],
+  );
+
+  // 参数变化时重新请求
+  useUpdateEffect(() => {
+    if (!isEqual(preRequestParamsRef.current, currentRequestParams)) {
+      flatListRef.current?.scrollToOffset({ offset: 0 });
+      setPageLoad(true);
+      setListData([]);
+      preRequestParamsRef.current = currentRequestParams;
+      pageInfo.page = 1;
+      handleFetchListApi();
+    }
+  }, [currentRequestParams]);
+
+  // 初始化请求
+  useEffect(() => {
+    if (immediate) {
+      handleFetchListApi();
+    }
+  }, [immediate, handleFetchListApi]);
+
+  // 卸载时取消请求
+  useEffect(() => () => cancel?.(), [cancel]);
+
+  return {
+    flatListRef,
+    listData,
+    reqStatus,
+    pageLoad,
+    refreshing,
+    errorType,
+    onRefresh,
+    onEndReached,
+    reload,
+  };
+};

package/src/components/business/list/index.ts

@@ -0,0 +1,3 @@
+export * from './hooks/use-list';
+export * from './list';
+export type * from './types';

package/src/components/business/list/list-empty.tsx

@@ -0,0 +1,51 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+
+import { Button, Loading, Result, type ResultType } from '#components/base';
+
+import { useListEmptyStyles } from './style';
+
+export interface ListEmptyProps {
+  /** 请求状态 */
+  status: 'LOADING' | 'ERROR' | 'EMPTY';
+  /** 错误类型 */
+  errorType?: ResultType;
+  /** 重新加载回调 */
+  onReload?: () => void;
+}
+
+/**
+ * 列表空状态组件
+ */
+export const ListEmpty = memo<ListEmptyProps>(
+  ({ status, errorType = 'error-other', onReload }) => {
+    const styles = useListEmptyStyles();
+
+    const renderContent = () => {
+      switch (status) {
+        case 'LOADING':
+          return <Loading />;
+        case 'ERROR':
+          return (
+            <Result
+              type={errorType}
+              extra={
+                <Button
+                  text="重新加载"
+                  radius={99}
+                  theme="primary"
+                  variant="outline"
+                  onPress={onReload}
+                />
+              }
+            />
+          );
+        case 'EMPTY':
+        default:
+          return <Result type="empty-noList" />;
+      }
+    };
+
+    return <View style={styles.container}>{renderContent()}</View>;
+  },
+);

package/src/components/business/list/list-footer.tsx

@@ -0,0 +1,44 @@
+import { memo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Loading, Text } from '#components/base';
+
+import { useListFooterStyles } from './style';
+import type { ListRequestStatus } from './types';
+
+export interface ListFooterProps {
+  /** 请求状态 */
+  status: ListRequestStatus;
+  /** 是否有数据 */
+  hasData: boolean;
+  /** 重新加载回调 */
+  onReload?: () => void;
+}
+
+/**
+ * 列表底部加载组件
+ */
+export const ListFooter = memo<ListFooterProps>(({ status, hasData, onReload }) => {
+  const styles = useListFooterStyles();
+
+  if (!hasData) return null;
+
+  const renderContent = () => {
+    switch (status) {
+      case 'LOADING':
+        return <Loading />;
+      case 'NOMORE':
+        return <Text style={styles.nomoreText}>没有更多了</Text>;
+      case 'ERROR':
+        return (
+          <TouchableOpacity onPress={onReload}>
+            <Text style={styles.errorText}>加载错误，点击重试</Text>
+          </TouchableOpacity>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return <View style={styles.container}>{renderContent()}</View>;
+});