@seakoi/native-ui 1.0.0

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

@@ -0,0 +1,106 @@
+import { memo, useCallback, useMemo } from 'react';
+import { FlatList, RefreshControl, View } from 'react-native';
+
+import { useList } from './hooks/use-list';
+import { ListEmpty } from './list-empty';
+import { ListFooter } from './list-footer';
+import { useListStyles } from './style';
+import type { ListProps } from './types';
+
+/**
+ * 通用列表组件
+ * 支持分页加载、下拉刷新、错误重试等功能
+ */
+export const List = <T,>({
+  requestApi,
+  requestParams,
+  searchField,
+  searchKeyword,
+  fromType,
+  pageSize = 20,
+  isPagination = true,
+  onRequestSuccess,
+  customGetDataField = 'data.list',
+  handleApiData,
+  keyField = 'ID',
+  joinList,
+  immediate = true,
+  renderItem,
+  ...restProps
+}: ListProps<T>) => {
+  const styles = useListStyles();
+
+  const {
+    flatListRef,
+    listData,
+    reqStatus,
+    pageLoad,
+    refreshing,
+    errorType,
+    onRefresh,
+    onEndReached,
+    reload,
+  } = useList({
+    requestApi,
+    requestParams,
+    searchField,
+    searchKeyword,
+    fromType,
+    pageSize,
+    isPagination,
+    onRequestSuccess,
+    customGetDataField,
+    handleApiData,
+    keyField,
+    joinList,
+    immediate,
+  });
+
+  /** 空状态组件 */
+  const renderEmpty = useCallback(() => {
+    const status = reqStatus === 'ERROR' ? 'ERROR' : pageLoad ? 'LOADING' : 'EMPTY';
+    return <ListEmpty status={status} errorType={errorType} onReload={reload} />;
+  }, [reqStatus, pageLoad, errorType, reload]);
+
+  /** 底部加载组件 */
+  const renderFooter = useCallback(
+    () => (
+      <ListFooter
+        status={reqStatus}
+        hasData={listData.length > 0}
+        onReload={reload}
+      />
+    ),
+    [reqStatus, listData.length, reload],
+  );
+
+  /** 下拉刷新控件 */
+  const refreshControl = useMemo(
+    () => <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />,
+    [refreshing, onRefresh],
+  );
+
+  return (
+    <FlatList
+      ref={flatListRef}
+      contentContainerStyle={styles.container}
+      onEndReachedThreshold={2}
+      showsVerticalScrollIndicator={false}
+      ItemSeparatorComponent={ItemSeparator}
+      ListEmptyComponent={renderEmpty}
+      ListFooterComponent={renderFooter}
+      refreshControl={refreshControl}
+      onEndReached={onEndReached}
+      keyExtractor={(item, index) => String(item[keyField] || index)}
+      {...restProps}
+      data={listData}
+      renderItem={renderItem}
+    />
+  );
+};
+
+/** 列表分隔组件 */
+const ItemSeparator = memo(() => {
+  const styles = useListStyles();
+  return <View style={styles.separator} />;
+});

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

@@ -0,0 +1,50 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useListStyles = createThemedStyles(theme => ({
+  container: {
+    flexGrow: 1,
+    paddingHorizontal: 12,
+    paddingTop: 12,
+    backgroundColor: theme.palette.gray1,
+  },
+
+  nomoreText: {
+    textAlign: 'center',
+    color: theme.palette.gray8,
+  },
+
+  errorText: {
+    color: theme.palette.gray8,
+    textAlign: 'center',
+  },
+
+  separator: {
+    height: 10,
+    backgroundColor: theme.palette.blueGray1,
+  },
+}));
+
+export const useListFooterStyles = createThemedStyles(theme => ({
+  container: {
+    height: 40,
+    alignContent: 'center',
+    justifyContent: 'center',
+  },
+  nomoreText: {
+    textAlign: 'center',
+    color: theme.palette.gray8,
+  },
+
+  errorText: {
+    color: theme.palette.gray8,
+    textAlign: 'center',
+  },
+}));
+
+export const useListEmptyStyles = createThemedStyles(() => ({
+  container: {
+    flex: 1,
+    alignContent: 'center',
+    justifyContent: 'center',
+  },
+}));

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

@@ -0,0 +1,138 @@
+import type { FlatList, FlatListProps, StyleProp, ViewStyle } from 'react-native';
+
+import type { AnyObject } from '#shared/utils/types';
+
+import type { ResultType } from '../../base';
+
+/**
+ * 分页参数
+ */
+interface ListPageable {
+  page?: number; // 当前页码
+  pageSize?: number; // 每页条数
+}
+
+/**
+ * 接口返回数据
+ */
+export interface ApiResponse<T> {
+  code: number;
+  data: T;
+  msg: string;
+}
+
+/**
+ * 列表接口返回数据
+ */
+export type ApiResponseList<T> = ApiResponse<ApiResListData<T>>;
+
+/**
+ * 列表接口返回数据
+ */
+export type ApiResListData<T> = ListPageable & {
+  list: T[];
+  total: number;
+  /** 服务器时间（用于客户端时间格式化），可选 */
+  serverTime?: number | string;
+  /** 当前时间范围未读数量（用于红点与顶部总数），可选 */
+  timeRangeUnReadCount?: number;
+};
+
+/**
+ * 列表接口请求参数
+ */
+export type ListAPiParams = AnyObject & ListPageable;
+
+/**
+ * 列表请求状态
+ */
+export type ListRequestStatus = 'LOADING' | 'NOMORE' | 'ERROR';
+
+/**
+ * 列表组件属性
+ */
+export interface ListProps<ItemType> extends FlatListProps<ItemType> {
+  /** 请求的接口 */
+  requestApi: (params: ListAPiParams) => Promise<ApiResponseList<ItemType>>;
+
+  /** 请求参数 */
+  requestParams?: AnyObject;
+
+  /** 是否立即请求 */
+  immediate?: boolean;
+
+  /** 是否需要分页 */
+  isPagination?: boolean;
+
+  /** 处理接口响应数据 */
+  handleApiData?: (list: ItemType[], pageInfo: ListPageable) => unknown;
+
+  /** 自定义List内容样式 */
+  customContentContainerStyle?: StyleProp<ViewStyle>;
+
+  /** 接口成功回调 */
+  onRequestSuccess?: (
+    data: ApiResponseList<ItemType>,
+    params?: ListAPiParams,
+  ) => void;
+
+  /** 自定义获取数据字段 */
+  customGetDataField?: string;
+
+  /** 搜索关键词 */
+  searchKeyword?: string;
+
+  /** 搜索关键词的字段 */
+  searchField?: string;
+  /** 搜索关键词筛选条件类型 */
+  fromType?: string;
+  /** 数据为空的占位组件 */
+  emptyComponent?: React.ReactElement;
+  /** 页面大小 */
+  pageSize?: number;
+
+  /** 数据唯一key字段 */
+  keyField?: string;
+  /** 拼接list */
+  joinList?: ItemType[];
+}
+
+/** useList Hook 的返回类型 */
+export interface UseListReturn<T> {
+  /** FlatList ref */
+  flatListRef: React.RefObject<FlatList | null>;
+  /** 列表数据 */
+  listData: T[];
+  /** 请求状态 */
+  reqStatus: ListRequestStatus;
+  /** 页面加载中 */
+  pageLoad: boolean;
+  /** 下拉刷新中 */
+  refreshing: boolean;
+  /** 错误类型 */
+  errorType: ResultType;
+  /** 下拉刷新 */
+  onRefresh: () => void;
+  /** 上拉加载更多 */
+  onEndReached: () => void;
+  /** 重新加载 */
+  reload: () => void;
+}
+
+/** useList Hook 参数 */
+export type UseListOptions<T> = Pick<
+  ListProps<T>,
+  | 'requestApi'
+  | 'requestParams'
+  | 'searchField'
+  | 'searchKeyword'
+  | 'fromType'
+  | 'pageSize'
+  | 'isPagination'
+  | 'onRequestSuccess'
+  | 'customGetDataField'
+  | 'handleApiData'
+  | 'keyField'
+  | 'joinList'
+  | 'immediate'
+>;

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

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

package/src/components/business/money/money.tsx

@@ -0,0 +1,93 @@
+import { useLatest } from 'ahooks';
+import BigNumber from 'bignumber.js';
+import React, { useMemo } from 'react';
+import {
+  type FlexAlignType,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { Flex, Text } from '#components/base';
+
+import { useMoneyStyles } from './style';
+
+interface FormatConfig
+  extends Pick<BigNumber.Format, 'groupSize' | 'groupSeparator'> {
+  /** 货币符号 */
+  symbol?: string;
+  /** 小数位数 */
+  fractionDigits?: number;
+}
+
+export interface MoneyProps {
+  /** 字体颜色 */
+  color?: string;
+  /** 金额值 */
+  value?: number | string;
+  /** 是否隐藏金额值 */
+  hidden?: boolean;
+  /** 默认显示值 */
+  defaultDisplayValue?: string;
+  /** 格式化配置 */
+  formatConfig?: FormatConfig;
+  /** 文本对齐方式 */
+  align?: FlexAlignType;
+  /** 容器样式 */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** 自定义文本样式 */
+  style?: StyleProp<TextStyle>;
+  /** 自定义文本样式 */
+  styles?: Partial<Record<'symbol' | 'fraction', TextStyle>>;
+}
+export const Money: React.FC<MoneyProps> = ({ value = '', ...props }) => {
+  const styles = useMoneyStyles();
+
+  const fmt = useLatest({
+    fractionDigits: 2,
+    groupSeparator: ',',
+    ...props.formatConfig,
+  });
+
+  const defaultTextStyle = [styles.text, { color: props.color }, props.style];
+  const defaultDisplayValue = props.hidden ? null : props.defaultDisplayValue;
+
+  const [currency, fraction] = useMemo(() => {
+    if (props.hidden) return [defaultDisplayValue];
+    let currentValue = new BigNumber(value);
+    if (!currentValue.isFinite()) {
+      if (defaultDisplayValue !== undefined) {
+        return [defaultDisplayValue];
+      }
+      currentValue = new BigNumber(0);
+    }
+    return currentValue
+      .toFormat(fmt.current.fractionDigits, {
+        decimalSeparator: '.',
+        groupSize: fmt.current.groupSize,
+        groupSeparator: fmt.current.groupSeparator,
+      })
+      .split('.');
+  }, [defaultDisplayValue, fmt, props.hidden, value]);
+
+  return (
+    <Flex gap={2} align={props.align} style={props.containerStyle}>
+      {!!fmt.current.symbol && currency !== defaultDisplayValue && (
+        <Text size={18} style={[defaultTextStyle, props.styles?.symbol]}>
+          {fmt.current.symbol}
+        </Text>
+      )}
+      <Text numberOfLines={1} style={defaultTextStyle} lineBreakMode="tail">
+        <Text size={18} style={defaultTextStyle}>
+          {currency}
+        </Text>
+        {!!fraction && (
+          <Text
+            size={18}
+            style={[defaultTextStyle, props.styles?.fraction]}
+          >{`.${fraction}`}</Text>
+        )}
+      </Text>
+    </Flex>
+  );
+};

package/src/components/business/money/style/index.ts

@@ -0,0 +1,8 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useMoneyStyles = createThemedStyles(theme => ({
+  text: {
+    includeFontPadding: false,
+    color: theme.palette.fontGray1,
+  },
+}));

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './components/base';
+export * from './components/business';
+export * from './native-provider';
+export * from './shared/hooks';
+export * from './shared/theme';

package/src/native-provider/contexts/config-context.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import type { AnyObject } from '#shared/utils/types';
+
+export type NavigateType = 'navigate' | 'push' | 'replace' | 'reset';
+
+export interface ConfigContextValue {
+  /** 导航配置 */
+  navigators?: Record<
+    NavigateType,
+    (routerName: string, params?: AnyObject) => void
+  >;
+}
+
+export const ConfigContext = React.createContext<ConfigContextValue | null>(null);

package/src/native-provider/contexts/index.ts

@@ -0,0 +1,3 @@
+export * from './config-context';
+export * from './request-context';
+export * from './theme-context';

package/src/native-provider/contexts/request-context.ts

@@ -0,0 +1,54 @@
+import { useRequest } from 'ahooks';
+import React from 'react';
+
+import apis from '#shared/apis';
+import type { AnyObject } from '#shared/utils/types';
+
+export type RequestCallback = <
+  TData extends AnyObject = AnyObject,
+  TParams extends AnyObject = AnyObject,
+>(
+  url: string,
+  data?: TParams,
+) => Promise<TData>;
+
+export type UseRequestHookOptions<
+  TData extends AnyObject = AnyObject,
+  TParams extends AnyObject = AnyObject,
+> = Parameters<typeof useRequest<TData, [TParams]>>[1];
+
+export type RequestInstance = Record<
+  'get' | 'post' | 'put' | 'delete',
+  RequestCallback
+>;
+
+export const RequestContext = React.createContext<RequestInstance | null>(null);
+/**
+ * 基于 useRequest
+ * @param requestConfig 请求配置
+ * @param useRequestHookOptions useRequest 配置项
+ * @returns
+ */
+export const useApiService = <
+  TData extends AnyObject = AnyObject,
+  TParams extends AnyObject = AnyObject,
+>(
+  apiCfgKey: keyof typeof apis,
+  useRequestHookOptions?: UseRequestHookOptions<TData, TParams>,
+) => {
+  const request = React.useContext(RequestContext);
+  if (!request) {
+    throw new Error('RequestContext is not provided');
+  }
+  return useRequest(async (params: TParams) => {
+    const config = apis[apiCfgKey];
+    if (!('url' in config && 'method' in config)) {
+      throw new Error(`Api config ${apiCfgKey} is invalid`);
+    }
+    const method = config.method.toLowerCase();
+    if (!Object.keys(request).includes(method)) {
+      throw new Error(`Request method ${config.method} is not supported`);
+    }
+    return request[method as keyof RequestInstance]<TData>(config.url, params);
+  }, useRequestHookOptions);
+};

package/src/native-provider/contexts/theme-context.ts

@@ -0,0 +1,42 @@
+import deepmerge from 'deepmerge';
+import React, { useMemo, useRef } from 'react';
+import { StyleSheet } from 'react-native';
+
+import { createTheme, type Theme } from '#shared/theme';
+import type { AnyObject, DeepPartial } from '#shared/utils/types';
+
+export const ThemeContext = React.createContext<Theme | null>(null);
+
+export const useTheme = (overrideTheme?: DeepPartial<Theme>) => {
+  const theme = React.useContext(ThemeContext);
+  return useMemo(() => {
+    let themeContext = theme;
+    if (!themeContext) {
+      themeContext = createTheme();
+    }
+    if (!overrideTheme) return themeContext;
+    return deepmerge(themeContext, overrideTheme) as Theme;
+  }, [theme, overrideTheme]);
+};
+
+export const createThemedStyles = <
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Style extends StyleSheet.NamedStyles<Style> | StyleSheet.NamedStyles<any>,
+  Options extends AnyObject,
+>(
+  styles: Style | ((theme: Theme, options: Options) => Style),
+) => {
+  return (options?: Options) => {
+    const theme = useTheme();
+    const stylesRef = useRef(styles);
+    stylesRef.current = styles;
+
+    return useMemo(() => {
+      if (typeof stylesRef.current !== 'function') {
+        return StyleSheet.create(stylesRef.current);
+      }
+      const cssStyles = stylesRef.current(theme, (options ?? {}) as Options);
+      return StyleSheet.create(cssStyles);
+    }, [options, theme]);
+  };
+};

package/src/native-provider/error-boundary.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { Text } from '#components/base';
+
+import { ThemeContext } from './contexts/theme-context';
+
+type ErrorBoundaryState =
+  | {
+      error: Error;
+      hasError: true;
+    }
+  | {
+      error: null;
+      hasError: false;
+    };
+
+export interface ErrorBoundaryProps {
+  /** 子元素 */
+  children?: React.ReactNode;
+  /** 错误时的回退元素 */
+  fallback?:
+    | React.ReactElement
+    | ((error: Error, onReset: () => void) => React.ReactElement);
+  /** 错误时的回调 */
+  onError?: (error: Error) => void;
+}
+
+export class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  static contextType = ThemeContext;
+  context: React.ContextType<typeof ThemeContext>;
+  state: ErrorBoundaryState = { error: null, hasError: false };
+
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error, hasError: true };
+  }
+
+  componentDidCatch(error: Error) {
+    this.props.onError?.(error);
+  }
+
+  render() {
+    const { error, hasError } = this.state;
+    if (!hasError) return this.props.children;
+    if (typeof this.props.fallback === 'function') {
+      return this.props.fallback(error, () => {
+        this.setState({ error: null, hasError: false });
+      });
+    }
+    return (
+      this.props.fallback || (
+        <Text font="medium" color={this.context?.palette.error7}>
+          Something went wrong.
+        </Text>
+      )
+    );
+  }
+}

package/src/native-provider/index.ts

@@ -0,0 +1,3 @@
+export * from './contexts';
+export * from './error-boundary';
+export * from './native-provider';

package/src/native-provider/native-provider.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react';
+import { Platform } from 'react-native';
+
+import { Portal } from '#components/base';
+import { createTheme, type ThemeConfig } from '#shared/theme';
+
+import {
+  ConfigContext,
+  type ConfigContextValue,
+  RequestContext,
+  type RequestInstance,
+} from './contexts';
+import { ThemeContext } from './contexts/theme-context';
+import { ErrorBoundary, type ErrorBoundaryProps } from './error-boundary';
+import { SafeAreaCompactProvider } from './safe-area-compact-provider';
+
+export interface NativeProviderProps {
+  /** 子节点 */
+  children?: React.ReactNode;
+  /** 主题配置 */
+  theme?: ThemeConfig;
+  /** 请求配置 */
+  request?: RequestInstance;
+  /** 错误捕获边界 */
+  errorBoundary?: Omit<ErrorBoundaryProps, 'children'>;
+  /** 导航配置 */
+  navigators?: ConfigContextValue['navigators'];
+}
+
+export const NativeProvider: React.FC<NativeProviderProps> = ({
+  theme,
+  children,
+  navigators,
+  errorBoundary,
+  request = null,
+}) => {
+  const isNative = Platform.OS !== 'web';
+  const themeContextValue = useMemo(() => createTheme(theme), [theme]);
+
+  return (
+    <SafeAreaCompactProvider>
+      <ConfigContext value={{ navigators }}>
+        <RequestContext.Provider value={request}>
+          <ThemeContext.Provider value={themeContextValue}>
+            <ErrorBoundary {...errorBoundary}>
+              {isNative ? <Portal.Host>{children}</Portal.Host> : children}
+            </ErrorBoundary>
+          </ThemeContext.Provider>
+        </RequestContext.Provider>
+      </ConfigContext>
+    </SafeAreaCompactProvider>
+  );
+};

package/src/native-provider/safe-area-compact-provider.tsx

@@ -0,0 +1,36 @@
+import type { PropsWithChildren } from 'react';
+import type React from 'react';
+import { Dimensions, Platform } from 'react-native';
+import {
+  initialWindowMetrics,
+  SafeAreaInsetsContext,
+  SafeAreaProvider,
+} from 'react-native-safe-area-context';
+
+/**
+ * @see {@link https://appandflow.github.io/react-native-safe-area-context/optimizations}
+ */
+let initialMetics = initialWindowMetrics;
+
+if (Platform.OS === 'web' || !initialMetics) {
+  const { width = 0, height = 0 } = Dimensions.get('window');
+
+  initialMetics = {
+    frame: { width, height, x: 0, y: 0 },
+    insets: { left: 0, right: 0, top: 0, bottom: 0 },
+  };
+}
+export const SafeAreaCompactProvider: React.FC<PropsWithChildren> = props => {
+  return (
+    <SafeAreaInsetsContext.Consumer>
+      {insets => {
+        if (insets) return props.children;
+        return (
+          <SafeAreaProvider initialMetrics={initialMetics}>
+            {props.children}
+          </SafeAreaProvider>
+        );
+      }}
+    </SafeAreaInsetsContext.Consumer>
+  );
+};

package/src/shared/apis/index.ts

@@ -0,0 +1,7 @@
+/** 统一导出所有接口配置 */
+
+import type { RequestConfig } from '../utils/types';
+
+export default {
+  GET_ADDRESS: { method: 'GET', url: '/example' },
+} satisfies Record<string, RequestConfig>;