@seakoi/native-ui 1.0.0

package/dist/module/components/business/list/hooks/use-list.js

@@ -0,0 +1,177 @@
+"use strict";
+
+import { useLatest, useMemoizedFn, useRequest, useUpdateEffect } from 'ahooks';
+import { get, isEqual, noop, omit } from 'lodash-es';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { isNetworkError } from "../../../../shared/utils/error.js";
+/**
+ * List 组件核心 Hook
+ * 封装分页请求、状态管理、数据去重等逻辑
+ */
+export const useList = options => {
+  const {
+    requestApi,
+    requestParams,
+    searchField,
+    searchKeyword,
+    fromType,
+    pageSize,
+    isPagination,
+    onRequestSuccess,
+    customGetDataField,
+    handleApiData,
+    keyField,
+    joinList = [],
+    immediate
+  } = options;
+  const flatListRef = useRef(null);
+  const [listData, setListData] = useState([]);
+  const [reqStatus, setReqStatus] = useState('LOADING');
+  const [pageLoad, setPageLoad] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const onRequestSuccessRef = useLatest(onRequestSuccess || noop);
+  const handleApiDataRef = useLatest(handleApiData);
+  const preRequestParamsRef = useRef(requestParams);
+  const listDataKeys = useRef(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 => {
+    if (!data[0]?.[keyField]) return data;
+    if (pageInfo.page === 1) {
+      listDataKeys.current.clear();
+    }
+    const uniqueData = [];
+    data.forEach(item => {
+      const key = item[keyField];
+      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(() => 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/dist/module/components/business/list/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./hooks/use-list.js";
+export * from "./list.js";

package/dist/module/components/business/list/list-empty.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import { memo } from 'react';
+import { View } from 'react-native';
+import { Button, Loading, Result } from "../../base/index.js";
+import { useListEmptyStyles } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 列表空状态组件
+ */
+export const ListEmpty = /*#__PURE__*/memo(({
+  status,
+  errorType = 'error-other',
+  onReload
+}) => {
+  const styles = useListEmptyStyles();
+  const renderContent = () => {
+    switch (status) {
+      case 'LOADING':
+        return /*#__PURE__*/_jsx(Loading, {});
+      case 'ERROR':
+        return /*#__PURE__*/_jsx(Result, {
+          type: errorType,
+          extra: /*#__PURE__*/_jsx(Button, {
+            text: "\u91CD\u65B0\u52A0\u8F7D",
+            radius: 99,
+            theme: "primary",
+            variant: "outline",
+            onPress: onReload
+          })
+        });
+      case 'EMPTY':
+      default:
+        return /*#__PURE__*/_jsx(Result, {
+          type: "empty-noList"
+        });
+    }
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: renderContent()
+  });
+});

package/dist/module/components/business/list/list-footer.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import { memo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { Loading, Text } from "../../base/index.js";
+import { useListFooterStyles } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 列表底部加载组件
+ */
+export const ListFooter = /*#__PURE__*/memo(({
+  status,
+  hasData,
+  onReload
+}) => {
+  const styles = useListFooterStyles();
+  if (!hasData) return null;
+  const renderContent = () => {
+    switch (status) {
+      case 'LOADING':
+        return /*#__PURE__*/_jsx(Loading, {});
+      case 'NOMORE':
+        return /*#__PURE__*/_jsx(Text, {
+          style: styles.nomoreText,
+          children: "\u6CA1\u6709\u66F4\u591A\u4E86"
+        });
+      case 'ERROR':
+        return /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onReload,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.errorText,
+            children: "\u52A0\u8F7D\u9519\u8BEF\uFF0C\u70B9\u51FB\u91CD\u8BD5"
+          })
+        });
+      default:
+        return null;
+    }
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: renderContent()
+  });
+});

package/dist/module/components/business/list/list.js

@@ -0,0 +1,103 @@
+"use strict";
+
+import { memo, useCallback, useMemo } from 'react';
+import { FlatList, RefreshControl, View } from 'react-native';
+import { useList } from "./hooks/use-list.js";
+import { ListEmpty } from "./list-empty.js";
+import { ListFooter } from "./list-footer.js";
+import { useListStyles } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 通用列表组件
+ * 支持分页加载、下拉刷新、错误重试等功能
+ */
+export const List = ({
+  requestApi,
+  requestParams,
+  searchField,
+  searchKeyword,
+  fromType,
+  pageSize = 20,
+  isPagination = true,
+  onRequestSuccess,
+  customGetDataField = 'data.list',
+  handleApiData,
+  keyField = 'ID',
+  joinList,
+  immediate = true,
+  renderItem,
+  ...restProps
+}) => {
+  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 /*#__PURE__*/_jsx(ListEmpty, {
+      status: status,
+      errorType: errorType,
+      onReload: reload
+    });
+  }, [reqStatus, pageLoad, errorType, reload]);
+
+  /** 底部加载组件 */
+  const renderFooter = useCallback(() => /*#__PURE__*/_jsx(ListFooter, {
+    status: reqStatus,
+    hasData: listData.length > 0,
+    onReload: reload
+  }), [reqStatus, listData.length, reload]);
+
+  /** 下拉刷新控件 */
+  const refreshControl = useMemo(() => /*#__PURE__*/_jsx(RefreshControl, {
+    refreshing: refreshing,
+    onRefresh: onRefresh
+  }), [refreshing, onRefresh]);
+  return /*#__PURE__*/_jsx(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 = /*#__PURE__*/memo(() => {
+  const styles = useListStyles();
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.separator
+  });
+});

package/dist/module/components/business/list/style/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+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/dist/module/components/business/list/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};

package/dist/module/components/business/money/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export * from "./money.js";

package/dist/module/components/business/money/money.js

@@ -0,0 +1,61 @@
+"use strict";
+
+import { useLatest } from 'ahooks';
+import BigNumber from 'bignumber.js';
+import React, { useMemo } from 'react';
+import { Flex, Text } from "../../base/index.js";
+import { useMoneyStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Money = ({
+  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 /*#__PURE__*/_jsxs(Flex, {
+    gap: 2,
+    align: props.align,
+    style: props.containerStyle,
+    children: [!!fmt.current.symbol && currency !== defaultDisplayValue && /*#__PURE__*/_jsx(Text, {
+      size: 18,
+      style: [defaultTextStyle, props.styles?.symbol],
+      children: fmt.current.symbol
+    }), /*#__PURE__*/_jsxs(Text, {
+      numberOfLines: 1,
+      style: defaultTextStyle,
+      lineBreakMode: "tail",
+      children: [/*#__PURE__*/_jsx(Text, {
+        size: 18,
+        style: defaultTextStyle,
+        children: currency
+      }), !!fraction && /*#__PURE__*/_jsx(Text, {
+        size: 18,
+        style: [defaultTextStyle, props.styles?.fraction],
+        children: `.${fraction}`
+      })]
+    })]
+  });
+};

package/dist/module/components/business/money/style/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useMoneyStyles = createThemedStyles(theme => ({
+  text: {
+    includeFontPadding: false,
+    color: theme.palette.fontGray1
+  }
+}));

package/dist/module/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+export * from "./components/base/index.js";
+export * from "./components/business/index.js";
+export * from "./native-provider/index.js";
+export * from "./shared/hooks/index.js";
+export * from "./shared/theme/index.js";

package/dist/module/native-provider/contexts/config-context.js

@@ -0,0 +1,4 @@
+"use strict";
+
+import React from 'react';
+export const ConfigContext = /*#__PURE__*/React.createContext(null);

package/dist/module/native-provider/contexts/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./config-context.js";
+export * from "./request-context.js";
+export * from "./theme-context.js";

package/dist/module/native-provider/contexts/request-context.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { useRequest } from 'ahooks';
+import React from 'react';
+import apis from "../../shared/apis/index.js";
+export const RequestContext = /*#__PURE__*/React.createContext(null);
+/**
+ * 基于 useRequest
+ * @param requestConfig 请求配置
+ * @param useRequestHookOptions useRequest 配置项
+ * @returns
+ */
+export const useApiService = (apiCfgKey, useRequestHookOptions) => {
+  const request = React.useContext(RequestContext);
+  if (!request) {
+    throw new Error('RequestContext is not provided');
+  }
+  return useRequest(async params => {
+    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](config.url, params);
+  }, useRequestHookOptions);
+};

package/dist/module/native-provider/contexts/theme-context.js

@@ -0,0 +1,32 @@
+"use strict";
+
+import deepmerge from 'deepmerge';
+import React, { useMemo, useRef } from 'react';
+import { StyleSheet } from 'react-native';
+import { createTheme } from "../../shared/theme/index.js";
+export const ThemeContext = /*#__PURE__*/React.createContext(null);
+export const useTheme = overrideTheme => {
+  const theme = React.useContext(ThemeContext);
+  return useMemo(() => {
+    let themeContext = theme;
+    if (!themeContext) {
+      themeContext = createTheme();
+    }
+    if (!overrideTheme) return themeContext;
+    return deepmerge(themeContext, overrideTheme);
+  }, [theme, overrideTheme]);
+};
+export const createThemedStyles = styles => {
+  return 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 ?? {});
+      return StyleSheet.create(cssStyles);
+    }, [options, theme]);
+  };
+};

package/dist/module/native-provider/error-boundary.js

@@ -0,0 +1,45 @@
+"use strict";
+
+import React from 'react';
+import { Text } from "../components/base/index.js";
+import { ThemeContext } from "./contexts/theme-context.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export class ErrorBoundary extends React.Component {
+  static contextType = ThemeContext;
+  state = {
+    error: null,
+    hasError: false
+  };
+  constructor(props) {
+    super(props);
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      error,
+      hasError: true
+    };
+  }
+  componentDidCatch(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 || /*#__PURE__*/_jsx(Text, {
+      font: "medium",
+      color: this.context?.palette.error7,
+      children: "Something went wrong."
+    });
+  }
+}

package/dist/module/native-provider/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./contexts/index.js";
+export * from "./error-boundary.js";
+export * from "./native-provider.js";

package/dist/module/native-provider/native-provider.js

@@ -0,0 +1,40 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Platform } from 'react-native';
+import { Portal } from "../components/base/index.js";
+import { createTheme } from "../shared/theme/index.js";
+import { ConfigContext, RequestContext } from "./contexts/index.js";
+import { ThemeContext } from "./contexts/theme-context.js";
+import { ErrorBoundary } from "./error-boundary.js";
+import { SafeAreaCompactProvider } from "./safe-area-compact-provider.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const NativeProvider = ({
+  theme,
+  children,
+  navigators,
+  errorBoundary,
+  request = null
+}) => {
+  const isNative = Platform.OS !== 'web';
+  const themeContextValue = useMemo(() => createTheme(theme), [theme]);
+  return /*#__PURE__*/_jsx(SafeAreaCompactProvider, {
+    children: /*#__PURE__*/_jsx(ConfigContext, {
+      value: {
+        navigators
+      },
+      children: /*#__PURE__*/_jsx(RequestContext.Provider, {
+        value: request,
+        children: /*#__PURE__*/_jsx(ThemeContext.Provider, {
+          value: themeContextValue,
+          children: /*#__PURE__*/_jsx(ErrorBoundary, {
+            ...errorBoundary,
+            children: isNative ? /*#__PURE__*/_jsx(Portal.Host, {
+              children: children
+            }) : children
+          })
+        })
+      })
+    })
+  });
+};