@seakoi/native-ui 1.0.0

package/dist/commonjs/components/base/tabs/tabs.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const Tabs = ({
+  tabs,
+  onChange
+}) => {
+  const styles = useStyles();
+  const theme = (0, _index2.useTheme)();
+  const tabNum = tabs.length;
+  const scrollViewWidthRef = (0, _react.useRef)(0);
+  const scrollViewRef = (0, _react.useRef)(null);
+  const animatedIndicatorWidth = (0, _react.useRef)(new _reactNative.Animated.Value(0));
+  const animatedIndicatorLeft = (0, _react.useRef)(new _reactNative.Animated.Value(0));
+  const [state, setState] = (0, _react.useState)({
+    layoutFinish: false
+  });
+  const layouts = (0, _react.useRef)(new Array(tabNum).fill({}));
+  const onLayoutScrollView = (0, _react.useCallback)(e => {
+    scrollViewWidthRef.current = e.nativeEvent.layout.width;
+  }, []);
+  const genOnLayoutTab = i => e => {
+    layouts.current[i] = {
+      text: layouts.current[i]?.text,
+      tab: e.nativeEvent.layout
+    };
+    initIndicator();
+  };
+  const genOnLayoutText = i => e => {
+    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;
+    _reactNative.Animated.parallel([_reactNative.Animated.timing(animatedIndicatorLeft.current, {
+      toValue: left,
+      useNativeDriver: false,
+      duration: 300
+    }), _reactNative.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 = (0, _react.useCallback)(() => {
+    const layoutItems = layouts.current.filter(item => item.tab && item.text);
+    if (layoutItems.length === layouts.current.length) {
+      setState(s => ({
+        ...s,
+        layoutFinish: true
+      }));
+    }
+  }, []);
+  const indicatorJSX = (0, _react.useMemo)(() => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      style: styles.tabItem,
+      onPress: () => genOnPress(item, index),
+      onLayout: genOnLayoutTab(index),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+        onLayout: genOnLayoutText(index),
+        children: item?.label
+      })
+    }, item?.value);
+  });
+  (0, _react.useEffect)(() => {
+    if (state.layoutFinish) {
+      navigateTo(0);
+    }
+  }, [state.layoutFinish]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      ref: scrollViewRef,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      onLayout: onLayoutScrollView,
+      contentContainerStyle: {
+        alignContent: 'center',
+        columnGap: 16
+      },
+      children: [tabsJSX, indicatorJSX]
+    })
+  });
+};
+exports.Tabs = Tabs;
+const useStyles = (0, _index2.createThemedStyles)(() => {
+  return {
+    container: {
+      paddingHorizontal: 16
+    },
+    tabItem: {
+      paddingVertical: 16
+    }
+  };
+});

package/dist/commonjs/components/base/text/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Text: true
+};
+exports.Text = void 0;
+var _text = require("./text.js");
+Object.keys(_text).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _text[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _text[key];
+    }
+  });
+});
+var _textHighlight = require("./text-highlight.js");
+Object.keys(_textHighlight).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _textHighlight[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _textHighlight[key];
+    }
+  });
+});
+const Text = exports.Text = Object.assign(_text.Text, {
+  Highlight: _textHighlight.TextHighlight
+});

package/dist/commonjs/components/base/text/text-highlight.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextHighlight = void 0;
+var _react = require("react");
+var _index = require("./index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const escapeRegExp = text => {
+  return text.replace(/([.*+?^${}()|[\]\\])/g, '\\$1');
+};
+const TextHighlight = props => {
+  const theme = (0, _index2.useTheme)();
+  const isStringText = typeof props.children === 'string' || Array.isArray(props.children) && !props.children.some(_react.isValidElement);
+  if (!props.keywords || !isStringText) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      ...props,
+      children: props.children
+    });
+  }
+  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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+    ...props,
+    children: childText.split(regex).map((content, key) => {
+      let highlightStyle = undefined;
+      if (!content) return null;
+      if (regex.test(content)) {
+        highlightStyle = {
+          color: props.highlightColor ?? theme.palette.brand7
+        };
+      }
+      return /*#__PURE__*/(0, _react.createElement)(_index.Text, {
+        ...props,
+        key: key,
+        style: [props.style, highlightStyle]
+      }, content);
+    })
+  });
+};
+exports.TextHighlight = TextHighlight;

package/dist/commonjs/components/base/text/text.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Text = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../../native-provider/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Text = props => {
+  const theme = (0, _index.useTheme)();
+  const textColor = props.color ?? theme.palette.fontGray1;
+  const fontStyle = (0, _react.useMemo)(() => {
+    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 _reactNative.Platform.select({
+      web: fontSizeVariant.size16,
+      default: fontSizeVariant.size14
+    });
+  }, [props.font, props.size, theme.fonts]);
+  if (_reactNative.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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    ...props,
+    allowFontScaling: false,
+    style: [{
+      color: textColor
+    }, fontStyle, props.style],
+    children: props.children
+  });
+};
+exports.Text = Text;

package/dist/commonjs/components/business/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _index = require("./list/index.js");
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index[key];
+    }
+  });
+});
+var _index2 = require("./money/index.js");
+Object.keys(_index2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index2[key];
+    }
+  });
+});

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

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useList = void 0;
+var _ahooks = require("ahooks");
+var _lodashEs = require("lodash-es");
+var _react = require("react");
+var _error = require("../../../../shared/utils/error.js");
+/**
+ * List 组件核心 Hook
+ * 封装分页请求、状态管理、数据去重等逻辑
+ */
+const useList = options => {
+  const {
+    requestApi,
+    requestParams,
+    searchField,
+    searchKeyword,
+    fromType,
+    pageSize,
+    isPagination,
+    onRequestSuccess,
+    customGetDataField,
+    handleApiData,
+    keyField,
+    joinList = [],
+    immediate
+  } = options;
+  const flatListRef = (0, _react.useRef)(null);
+  const [listData, setListData] = (0, _react.useState)([]);
+  const [reqStatus, setReqStatus] = (0, _react.useState)('LOADING');
+  const [pageLoad, setPageLoad] = (0, _react.useState)(true);
+  const [refreshing, setRefreshing] = (0, _react.useState)(false);
+  const onRequestSuccessRef = (0, _ahooks.useLatest)(onRequestSuccess || _lodashEs.noop);
+  const handleApiDataRef = (0, _ahooks.useLatest)(handleApiData);
+  const preRequestParamsRef = (0, _react.useRef)(requestParams);
+  const listDataKeys = (0, _react.useRef)(new Set());
+  const requestMoreLock = (0, _react.useRef)(false);
+  const pageInfo = (0, _react.useRef)({
+    page: 1,
+    pageSize
+  }).current;
+  const {
+    runAsync: fetchRequestApi,
+    cancel,
+    error: requestError
+  } = (0, _ahooks.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 = (0, _react.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 = (0, _ahooks.useMemoizedFn)(async () => {
+    try {
+      cancel?.();
+      const params = (0, _lodashEs.omit)({
+        ...currentRequestParams,
+        ...(isPagination && pageInfo)
+      }, ['reqTime']);
+      const response = await fetchRequestApi(params);
+      onRequestSuccessRef.current(response, params);
+      let list = customGetDataField ? (0, _lodashEs.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 = (0, _ahooks.useMemoizedFn)(() => {
+    if (requestMoreLock.current || ['NOMORE', 'ERROR'].includes(reqStatus)) return;
+    if (listData.length === 0 || !isPagination) return;
+    pageInfo.page++;
+    requestMoreLock.current = true;
+    handleFetchListApi();
+  });
+
+  /** 下拉刷新 */
+  const onRefresh = (0, _ahooks.useMemoizedFn)(() => {
+    setRefreshing(true);
+    pageInfo.page = 1;
+    handleFetchListApi();
+  });
+
+  /** 重新加载（用于错误重试） */
+  const reload = (0, _ahooks.useMemoizedFn)(() => {
+    setReqStatus('LOADING');
+    handleFetchListApi();
+  });
+
+  /** 错误类型 */
+  const errorType = (0, _react.useMemo)(() => (0, _error.isNetworkError)(requestError) ? 'error-network' : 'error-other', [requestError]);
+
+  // 参数变化时重新请求
+  (0, _ahooks.useUpdateEffect)(() => {
+    if (!(0, _lodashEs.isEqual)(preRequestParamsRef.current, currentRequestParams)) {
+      flatListRef.current?.scrollToOffset({
+        offset: 0
+      });
+      setPageLoad(true);
+      setListData([]);
+      preRequestParamsRef.current = currentRequestParams;
+      pageInfo.page = 1;
+      handleFetchListApi();
+    }
+  }, [currentRequestParams]);
+
+  // 初始化请求
+  (0, _react.useEffect)(() => {
+    if (immediate) {
+      handleFetchListApi();
+    }
+  }, [immediate, handleFetchListApi]);
+
+  // 卸载时取消请求
+  (0, _react.useEffect)(() => () => cancel?.(), [cancel]);
+  return {
+    flatListRef,
+    listData,
+    reqStatus,
+    pageLoad,
+    refreshing,
+    errorType,
+    onRefresh,
+    onEndReached,
+    reload
+  };
+};
+exports.useList = useList;

package/dist/commonjs/components/business/list/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useList = require("./hooks/use-list.js");
+Object.keys(_useList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useList[key];
+    }
+  });
+});
+var _list = require("./list.js");
+Object.keys(_list).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _list[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _list[key];
+    }
+  });
+});

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListEmpty = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../base/index.js");
+var _index2 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 列表空状态组件
+ */
+const ListEmpty = exports.ListEmpty = /*#__PURE__*/(0, _react.memo)(({
+  status,
+  errorType = 'error-other',
+  onReload
+}) => {
+  const styles = (0, _index2.useListEmptyStyles)();
+  const renderContent = () => {
+    switch (status) {
+      case 'LOADING':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Loading, {});
+      case 'ERROR':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Result, {
+          type: errorType,
+          extra: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, {
+            text: "\u91CD\u65B0\u52A0\u8F7D",
+            radius: 99,
+            theme: "primary",
+            variant: "outline",
+            onPress: onReload
+          })
+        });
+      case 'EMPTY':
+      default:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Result, {
+          type: "empty-noList"
+        });
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: renderContent()
+  });
+});

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListFooter = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../base/index.js");
+var _index2 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 列表底部加载组件
+ */
+const ListFooter = exports.ListFooter = /*#__PURE__*/(0, _react.memo)(({
+  status,
+  hasData,
+  onReload
+}) => {
+  const styles = (0, _index2.useListFooterStyles)();
+  if (!hasData) return null;
+  const renderContent = () => {
+    switch (status) {
+      case 'LOADING':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Loading, {});
+      case 'NOMORE':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          style: styles.nomoreText,
+          children: "\u6CA1\u6709\u66F4\u591A\u4E86"
+        });
+      case 'ERROR':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: onReload,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+            style: styles.errorText,
+            children: "\u52A0\u8F7D\u9519\u8BEF\uFF0C\u70B9\u51FB\u91CD\u8BD5"
+          })
+        });
+      default:
+        return null;
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: renderContent()
+  });
+});