@seakoi/native-ui 1.0.0

package/dist/module/components/base/address-picker/address-picker.js

@@ -0,0 +1,192 @@
+"use strict";
+
+import { CloseOutlined } from '@seakoi/svg-icons';
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import React, { useMemo, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Button, PickerView, Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { useAddressPickerStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ADDRESS_PICKER_CONFIG = {
+  province: {
+    depth: 1,
+    title: '请选择省'
+  },
+  city: {
+    depth: 2,
+    title: '请选择省市'
+  },
+  district: {
+    depth: 3,
+    title: '请选择省市区'
+  },
+  street: {
+    depth: 4,
+    title: '请选择省市区、街道'
+  }
+};
+export const AddressPicker = props => {
+  const {
+    confirmText = '确定',
+    cancelText = '取消',
+    onCancel,
+    onConfirm,
+    columns,
+    itemHeight = 40,
+    selectType = 'district',
+    title,
+    ...restProps
+  } = props;
+  const theme = useTheme();
+  const defaultTitle = ADDRESS_PICKER_CONFIG[selectType].title;
+  const finalTitle = title ?? defaultTitle;
+  const styles = useAddressPickerStyles();
+
+  /** 管理已确认的值（与父组件同步） 受控与非受控*/
+  const [value, onChange] = useControllableValue(props, {
+    defaultValue: []
+  });
+
+  /** 管理选择器的值（内部状态*/
+  const [pickerValue, setPickerValue] = useState(value || []);
+  /** 管理上一次确认的值（用于判断是否需要更新内部状态） */
+  const [prevValue, setPrevValue] = useState(value);
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setPickerValue(value || []);
+  }
+  /**
+   * @param v 选择器的值
+   * @description 当选择器的值发生变化时，更新内部状态
+   * @returns void
+   *  */
+  const handlePickerChange = useMemoizedFn(v => {
+    console.log('选择的数据', v);
+    setPickerValue(v);
+  });
+  /**
+   * @description 确认选择
+   * @returns void
+   * */
+  const handleConfirm = useMemoizedFn(() => {
+    const getSelectedOptions = (cols, vals) => {
+      const options = [];
+      let currentCols = cols;
+      for (const val of vals) {
+        if (!currentCols) {
+          break;
+        }
+        const target = currentCols.find(col => col.value === val);
+        if (target) {
+          options.push(target);
+          currentCols = target.children;
+        } else {
+          break;
+        }
+      }
+      return options;
+    };
+    const options = getSelectedOptions(columns, pickerValue);
+    onChange(pickerValue, options);
+    onConfirm?.(pickerValue, options);
+  });
+  /**
+   * @description 取消选择
+   * @returns void
+   * */
+  const handleCancel = useMemoizedFn(() => {
+    setPickerValue(value || []);
+    onCancel?.();
+  });
+
+  /**
+   * @description 剪裁列
+   * @param columns 列
+   * @param selectType 选择类型
+   * @returns 剪裁后的列
+   * */
+  const prunedColumns = useMemo(() => {
+    const depth = ADDRESS_PICKER_CONFIG[selectType].depth || 3;
+    const prune = (cols, currentDepth) => {
+      if (!cols) {
+        return [];
+      }
+      if (currentDepth >= depth) {
+        return cols.map(col => {
+          /** 剪裁列，移除子项 */
+          const {
+            children,
+            ...rest
+          } = col;
+          return rest;
+        });
+      }
+      /** 递归剪裁子项 */
+      return cols.map(col => {
+        const option = col;
+        if (option.children) {
+          return {
+            ...option,
+            children: prune(option.children, currentDepth + 1)
+          };
+        }
+        return option;
+      });
+    };
+    return prune(columns, 1);
+  }, [columns, selectType]);
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsxs(SafeAreaView, {
+      edges: ['bottom', 'left', 'right'],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.header,
+        children: [/*#__PURE__*/React.isValidElement(finalTitle) ? finalTitle : /*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          children: finalTitle
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handleCancel,
+          style: styles.closeIcon,
+          hitSlop: {
+            top: 10,
+            bottom: 10,
+            left: 10,
+            right: 10
+          },
+          children: /*#__PURE__*/_jsx(CloseOutlined, {
+            size: 20,
+            color: theme.palette.fontGray3
+          })
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.pickerContainer,
+        children: /*#__PURE__*/_jsx(PickerView, {
+          ...restProps,
+          columns: prunedColumns,
+          value: pickerValue,
+          onChange: handlePickerChange,
+          itemHeight: itemHeight
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.footer,
+        children: [/*#__PURE__*/_jsx(Button, {
+          text: cancelText,
+          variant: "base",
+          theme: "secondary",
+          size: "large",
+          onPress: handleCancel,
+          buttonStyle: styles.button
+        }), /*#__PURE__*/_jsx(Button, {
+          text: confirmText,
+          variant: "base",
+          theme: "primary",
+          size: "large",
+          onPress: handleConfirm,
+          buttonStyle: styles.button
+        })]
+      })]
+    })
+  });
+};

package/dist/module/components/base/address-picker/index.js

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

package/dist/module/components/base/address-picker/style/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useAddressPickerStyles = createThemedStyles(theme => ({
+  container: {
+    backgroundColor: theme.palette.white,
+    borderTopLeftRadius: theme.roundness.lg,
+    borderTopRightRadius: theme.roundness.lg,
+    overflow: 'hidden'
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: theme.spacing.lg,
+    paddingVertical: theme.spacing.md,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.palette.gray1 // Verify palette color
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: theme.palette.fontGray1
+  },
+  closeIcon: {
+    padding: 4
+  },
+  pickerContainer: {},
+  footer: {
+    flexDirection: 'row',
+    padding: theme.spacing.lg,
+    gap: theme.spacing.md,
+    borderTopWidth: 1,
+    borderTopColor: theme.palette.gray1
+  },
+  button: {
+    flex: 1
+  },
+  columnHeaderContainer: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: theme.palette.gray1,
+    backgroundColor: theme.palette.gray1
+  },
+  columnHeader: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 8
+  },
+  columnHeaderText: {
+    fontSize: 12,
+    color: theme.palette.fontGray2
+  }
+}));

package/dist/module/components/base/address-picker/types.js

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

package/dist/module/components/base/async-boundary/async-boundary.js

@@ -0,0 +1,87 @@
+"use strict";
+
+import { useLatest } from 'ahooks';
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { Button, Loading, Result } from "./../index.js";
+import { isNetworkError } from "../../../shared/utils/index.js";
+import { useAsyncBoundaryStyles } from "./style/index.js";
+import { AsyncBoundaryStatus } from "./types.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const AsyncBoundary = ({
+  status = AsyncBoundaryStatus.COMPLETE,
+  loading,
+  error,
+  onReload,
+  reloadText = '重新加载',
+  style,
+  loadingSize = 'large',
+  loadingComponent,
+  emptyType = 'empty-noDetail',
+  emptyComponent,
+  errorComponent,
+  children
+}) => {
+  const styles = useAsyncBoundaryStyles();
+  const onReloadRef = useLatest(onReload);
+
+  /** 计算实际状态（loading 和 error 优先级高于 status） */
+  const currentStatus = useMemo(() => {
+    if (loading) return AsyncBoundaryStatus.LOADING;
+    if (error) return AsyncBoundaryStatus.ERROR;
+    return status;
+  }, [status, error, loading]);
+
+  /** 渲染 Loading 状态 */
+  const renderLoading = () => {
+    if (loadingComponent) return loadingComponent;
+    return /*#__PURE__*/_jsx(Loading, {
+      size: loadingSize
+    });
+  };
+
+  /** 渲染 Error 状态 */
+  const renderError = () => {
+    if (errorComponent) return errorComponent;
+    const errorType = isNetworkError(error) ? 'error-network' : 'error-other';
+    return /*#__PURE__*/_jsx(Result, {
+      type: errorType,
+      extra: onReloadRef.current && /*#__PURE__*/_jsx(Button, {
+        text: reloadText,
+        size: "medium",
+        onPress: onReloadRef.current
+      })
+    });
+  };
+
+  /** 渲染 Empty 状态 */
+  const renderEmpty = () => {
+    if (emptyComponent) return emptyComponent;
+    return /*#__PURE__*/_jsx(Result, {
+      type: emptyType
+    });
+  };
+
+  // 完成状态直接返回 children，避免多余的 View 包裹
+  if (currentStatus === AsyncBoundaryStatus.COMPLETE) {
+    return children;
+  }
+
+  // 根据状态渲染对应内容
+  const renderContent = () => {
+    switch (currentStatus) {
+      case AsyncBoundaryStatus.LOADING:
+        return renderLoading();
+      case AsyncBoundaryStatus.ERROR:
+        return renderError();
+      case AsyncBoundaryStatus.EMPTY:
+        return renderEmpty();
+      default:
+        return null;
+    }
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, style],
+    children: renderContent()
+  });
+};

package/dist/module/components/base/async-boundary/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./async-boundary.js";
+export * from "./types.js";

package/dist/module/components/base/async-boundary/style/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useAsyncBoundaryStyles = createThemedStyles(() => ({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+}));

package/dist/module/components/base/async-boundary/types.js

@@ -0,0 +1,20 @@
+"use strict";
+
+/**
+ * 异步边界状态枚举
+ */
+export let AsyncBoundaryStatus = /*#__PURE__*/function (AsyncBoundaryStatus) {
+  /** 加载中 */
+  AsyncBoundaryStatus["LOADING"] = "loading";
+  /** 错误 */
+  AsyncBoundaryStatus["ERROR"] = "error";
+  /** 空数据 */
+  AsyncBoundaryStatus["EMPTY"] = "empty";
+  /** 完成 */
+  AsyncBoundaryStatus["COMPLETE"] = "complete";
+  return AsyncBoundaryStatus;
+}({});
+
+/**
+ * AsyncBoundary 组件属性
+ */

package/dist/module/components/base/avatar/avatar-context.js

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

package/dist/module/components/base/avatar/avatar-group.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import React, { Children, useMemo } from 'react';
+import { View } from 'react-native';
+import { Flex } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { Avatar } from "./avatar.js";
+import { AvatarContext } from "./avatar-context.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CASCADING_OFFSET = 12;
+export const AvatarGroup = props => {
+  const theme = useTheme();
+  const cascading = useMemo(() => {
+    if (typeof props.cascading === 'object') {
+      return {
+        direction: props.cascading.direction,
+        offset: props.cascading.offset ?? CASCADING_OFFSET
+      };
+    }
+    return {
+      offset: CASCADING_OFFSET,
+      direction: props.cascading ?? 'left-up'
+    };
+  }, [props.cascading]);
+  const avatarGroupMax = useMemo(() => {
+    if (typeof props.max === 'object') return props.max;
+    return {
+      count: props.max
+    };
+  }, [props.max]);
+  const childrenArray = Children.toArray(props.children);
+  const maxShowAvatarCount = avatarGroupMax.count ?? childrenArray.length;
+  const surplus = childrenArray.length - maxShowAvatarCount;
+  return /*#__PURE__*/_jsx(AvatarContext.Provider, {
+    value: {
+      size: props.size,
+      variant: props.variant
+    },
+    children: /*#__PURE__*/_jsxs(Flex, {
+      gap: theme.spacing.none,
+      children: [childrenArray.slice(0, maxShowAvatarCount).map((child, index) => {
+        return /*#__PURE__*/_jsx(View, {
+          style: [!!index && {
+            marginLeft: -cascading.offset
+          }, {
+            zIndex: cascading.direction !== 'left-up' ? index : -index
+          }],
+          children: child
+        }, index);
+      }), !!surplus && /*#__PURE__*/_jsx(View, {
+        style: [{
+          marginLeft: -cascading.offset
+        }, {
+          zIndex: cascading.direction !== 'left-up' ? maxShowAvatarCount : -maxShowAvatarCount
+        }],
+        children: /*#__PURE__*/_jsx(Avatar, {
+          textStyle: avatarGroupMax?.textStyle,
+          containerStyle: avatarGroupMax?.containerStyle,
+          children: props.renderSurplus?.(surplus) ?? `+${surplus}`
+        })
+      })]
+    })
+  });
+};

package/dist/module/components/base/avatar/avatar.js

@@ -0,0 +1,79 @@
+"use strict";
+
+import React, { useContext, useState } from 'react';
+import { Image as NativeImage } from 'react-native';
+import { Flex, Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { safetyRenderChildren } from "../../../shared/utils/index.js";
+import { AvatarContext } from "./avatar-context.js";
+import { useAvatarStyles } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_AVATAR_SIZE = 48;
+export const Avatar = ({
+  resizeMode = 'contain',
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useAvatarStyles();
+  const context = useContext(AvatarContext);
+  const [textWidth, setTextWidth] = useState(0);
+  const [image, setImage] = useState(() => {
+    if (props.source) return {
+      type: 'source',
+      source: props.source
+    };
+    if (props.fallbackSource) {
+      return {
+        type: 'fallbackSource',
+        source: props.fallbackSource
+      };
+    }
+  });
+  const variant = props.variant ?? context?.variant ?? 'circle';
+  const avatarSize = props.size ?? context?.size ?? DEFAULT_AVATAR_SIZE;
+  return /*#__PURE__*/_jsx(Flex, {
+    align: "center",
+    justify: "center",
+    ref: props.ref,
+    onLayout: props.onLayout,
+    style: [styles.container, context && styles.border, {
+      width: avatarSize,
+      height: avatarSize
+    }, variant === 'square' && styles.square, variant === 'circle' && styles.circle, variant === 'rounded' && styles.rounded, props.containerStyle],
+    children: image ? /*#__PURE__*/_jsx(NativeImage, {
+      alt: props.alt,
+      width: avatarSize,
+      height: avatarSize,
+      source: image.source,
+      resizeMode: resizeMode,
+      style: styles.image,
+      onError: () => {
+        setImage(prevState => {
+          if (prevState?.type === 'source' && props.fallbackSource) {
+            return {
+              type: 'fallbackSource',
+              source: props.fallbackSource
+            };
+          }
+        });
+      }
+    }) : safetyRenderChildren(props.children || props.alt, textValue => {
+      return /*#__PURE__*/_jsx(Text, {
+        size: 16,
+        font: "medium",
+        color: theme.palette.white,
+        onLayout: ({
+          nativeEvent
+        }) => {
+          setTextWidth(nativeEvent.layout.width);
+        },
+        style: [props.textStyle, !!textWidth && {
+          transform: [{
+            scale: Math.min(1, (avatarSize - 4) / textWidth)
+          }]
+        }],
+        children: textValue
+      });
+    })
+  });
+};

package/dist/module/components/base/avatar/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+import { Avatar as _Avatar } from "./avatar.js";
+import { AvatarGroup } from "./avatar-group.js";
+export * from "./avatar.js";
+export * from "./avatar-group.js";
+export const Avatar = Object.assign(_Avatar, {
+  Group: AvatarGroup
+});

package/dist/module/components/base/avatar/style/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useAvatarStyles = createThemedStyles(theme => ({
+  container: {
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative',
+    backgroundColor: theme.palette.blueGray7
+  },
+  square: {
+    borderRadius: theme.roundness.none
+  },
+  rounded: {
+    borderRadius: theme.roundness.md
+  },
+  circle: {
+    borderRadius: theme.roundness.full
+  },
+  border: {
+    borderWidth: 1,
+    borderColor: theme.palette.white
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  }
+}));

package/dist/module/components/base/back-to-top/back-to-top.js

@@ -0,0 +1,38 @@
+"use strict";
+
+import { UpOutlined } from '@seakoi/svg-icons';
+import React from 'react';
+import { Pressable } from 'react-native';
+import { Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { useStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BackToTop = ({
+  visible = false,
+  onPress,
+  shape = 'round',
+  position,
+  text = '',
+  icon,
+  style
+}) => {
+  const theme = useTheme();
+  const styles = useStyles();
+  const isRound = shape === 'round';
+  if (!visible) return null;
+  return /*#__PURE__*/_jsxs(Pressable, {
+    style: [styles.base, position, isRound ? styles.round : styles.halfRound, style],
+    onPress: onPress,
+    children: [icon ? icon : /*#__PURE__*/_jsx(UpOutlined, {
+      size: 22,
+      color: theme.palette.fontGray1
+    }), /*#__PURE__*/_jsx(Text, {
+      size: 14,
+      font: "semiBold",
+      style: [{
+        color: theme.palette.fontGray1
+      }],
+      children: text
+    })]
+  });
+};

package/dist/module/components/base/back-to-top/index.js

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

package/dist/module/components/base/back-to-top/style/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+const SIZE = 52;
+export const useStyles = createThemedStyles(theme => {
+  return {
+    container: {
+      position: 'absolute'
+    },
+    base: {
+      backgroundColor: theme.palette.white,
+      borderWidth: 1,
+      borderColor: theme.palette.blueGray6,
+      position: 'absolute'
+    },
+    /** 圆形 */
+    round: {
+      width: SIZE,
+      height: SIZE,
+      borderRadius: theme.roundness.full,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    /** 半圆 / 半胶囊 */
+    halfRound: {
+      flexDirection: 'row',
+      padding: 8,
+      borderTopLeftRadius: SIZE / 2,
+      borderBottomLeftRadius: SIZE / 2,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  };
+});