@seakoi/native-ui 1.0.0

package/src/components/base/avatar/avatar.tsx

@@ -0,0 +1,129 @@
+import React, {
+  type ReactElement,
+  type RefAttributes,
+  useContext,
+  useState,
+} from 'react';
+import {
+  Image as NativeImage,
+  type ImageResizeMode,
+  type ImageSourcePropType,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type TextStyle,
+  type View,
+  type ViewStyle,
+} from 'react-native';
+
+import { Flex, Text } from '#components/base';
+import { useTheme } from '#native-provider';
+import { safetyRenderChildren } from '#shared/utils';
+
+import { AvatarContext } from './avatar-context';
+import { useAvatarStyles } from './style';
+
+const DEFAULT_AVATAR_SIZE = 48;
+
+interface LoadImageState {
+  source: ImageSourcePropType;
+  type: 'source' | 'fallbackSource';
+}
+export interface AvatarProps extends RefAttributes<View> {
+  /** 头像图片的替代文本 */
+  alt?: string;
+  /** 头像图片 */
+  source?: ImageSourcePropType;
+  /** 头像失败时的回退图片 */
+  fallbackSource?: ImageSourcePropType;
+  /** 头像大小 */
+  size?: number;
+  /** 图片显示模式 */
+  resizeMode?: ImageResizeMode;
+  /** 头像形状 */
+  variant?: 'square' | 'rounded' | 'circle';
+  /** 头像文本样式 */
+  textStyle?: StyleProp<TextStyle>;
+  /** 容器样式 */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** 头像内容 */
+  children?: string | ReactElement;
+  /** 布局回调函数 */
+  onLayout?: (event: LayoutChangeEvent) => void;
+}
+
+export const Avatar: React.FC<AvatarProps> = ({
+  resizeMode = 'contain',
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useAvatarStyles();
+  const context = useContext(AvatarContext);
+
+  const [textWidth, setTextWidth] = useState(0);
+  const [image, setImage] = useState<LoadImageState | undefined>(() => {
+    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 (
+    <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,
+      ]}
+    >
+      {image ? (
+        <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 (
+            <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) }],
+                },
+              ]}
+            >
+              {textValue}
+            </Text>
+          );
+        })
+      )}
+    </Flex>
+  );
+};

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

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

package/src/components/base/avatar/style/index.ts

@@ -0,0 +1,21 @@
+import { createThemedStyles } from '#native-provider';
+
+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/src/components/base/back-to-top/back-to-top.tsx

@@ -0,0 +1,83 @@
+import { UpOutlined } from '@seakoi/svg-icons';
+import React from 'react';
+import { Pressable, type ViewStyle } from 'react-native';
+
+import { Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import { useStyles } from './style';
+
+export interface BackToTopProps {
+  /**
+   * 是否显示
+   */
+  visible?: boolean;
+
+  /**
+   * 点击事件
+   */
+  onPress?: () => void;
+
+  /** 形状 */
+  shape?: 'circle' | 'half-round';
+
+  /**
+   * 定位
+   */
+  position?: {
+    bottom?: number;
+    right?: number;
+    left?: number;
+    top?: number;
+  };
+
+  /**
+   * 文本
+   */
+  text?: string;
+
+  /**
+   * 图标
+   */
+  icon?: React.ReactNode;
+
+  /**
+   * 自定义样式
+   */
+  style?: ViewStyle;
+}
+
+export const BackToTop: React.FC<BackToTopProps> = ({
+  visible = false,
+  onPress,
+  shape = 'round',
+  position,
+  text = '',
+  icon,
+  style,
+}) => {
+  const theme = useTheme();
+  const styles = useStyles();
+
+  const isRound = shape === 'round';
+
+  if (!visible) return null;
+
+  return (
+    <Pressable
+      style={[
+        styles.base,
+        position,
+        isRound ? styles.round : styles.halfRound,
+        style,
+      ]}
+      onPress={onPress}
+    >
+      {icon ? icon : <UpOutlined size={22} color={theme.palette.fontGray1} />}
+
+      <Text size={14} font="semiBold" style={[{ color: theme.palette.fontGray1 }]}>
+        {text}
+      </Text>
+    </Pressable>
+  );
+};

package/src/components/base/back-to-top/index.ts

@@ -0,0 +1 @@
+export * from './back-to-top';

package/src/components/base/back-to-top/style/index.ts

@@ -0,0 +1,38 @@
+import { createThemedStyles } from '#native-provider';
+
+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',
+    },
+  };
+});

package/src/components/base/badge/badge.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Animated,
+  Platform,
+  type ScaledSize,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import { useBadgeStyles } from './style';
+
+export interface BadgeProps {
+  /** 是否可见 */
+  visible?: boolean;
+  /** 徽章颜色 */
+  color?: string;
+  /** 尺寸 */
+  size?: 'small' | 'large';
+  /** 数值 */
+  count?: number;
+  /** 最大数值 */
+  overflowCount?: number;
+  /** 位置偏移量 */
+  offset?: [Top: number, Right: number];
+  /** 子节点 */
+  children?: React.ReactElement;
+  /** 样式 */
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  visible = true,
+  size = 'large',
+  offset = [0, 0],
+  overflowCount = 99,
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useBadgeStyles();
+
+  const animateValue = visible ? 1 : 0;
+  const { current: animation } = useRef(new Animated.Value(animateValue));
+  const [dimensions, setDimensions] =
+    useState<Pick<ScaledSize, 'width' | 'height'>>();
+
+  const displayCount = useMemo(() => {
+    if (typeof props.count !== 'number') return null;
+    if (props.count <= overflowCount) return props.count;
+    return `${overflowCount}+`;
+  }, [props.count, overflowCount]);
+
+  useEffect(() => {
+    Animated.timing(animation, {
+      duration: 100,
+      toValue: animateValue,
+      useNativeDriver: Platform.OS !== 'web',
+    }).start();
+  }, [animateValue, animation]);
+
+  const isSmall = size !== 'large';
+  const isDot = displayCount === null;
+
+  const dotSize = isSmall ? 7 : 12;
+  const textSize = isSmall ? 11 : 14;
+
+  return (
+    <View style={styles.container}>
+      {props.children}
+      <Animated.View
+        onLayout={({ nativeEvent }) => {
+          if (!props.children) return;
+          setDimensions({
+            width: nativeEvent.layout.width,
+            height: nativeEvent.layout.height,
+          });
+        }}
+        style={[
+          styles.badge,
+          {
+            minWidth: dotSize,
+            minHeight: dotSize,
+            opacity: animation,
+            transform: [{ scale: animation }],
+          },
+          isDot && { borderRadius: theme.roundness.full },
+          props.color && { backgroundColor: props.color },
+          props.children &&
+            StyleSheet.flatten([
+              styles.offset,
+              {
+                top: offset[0],
+                right: offset[1],
+                transform: [{ translateX: '50%' }, { translateY: '-50%' }],
+              },
+            ]),
+          // 修复 Android 上的 badge 位置偏移问题
+          dimensions && {
+            transform: [
+              { translateX: dimensions.width / 2 },
+              { translateY: -dimensions.height / 2 },
+              { scale: animation },
+            ],
+          },
+          props.containerStyle,
+        ]}
+      >
+        {displayCount !== null && (
+          <Text
+            color="white"
+            font="numeric"
+            size={textSize}
+            numberOfLines={1}
+            style={{ paddingInline: 3 }}
+          >
+            {displayCount}
+          </Text>
+        )}
+      </Animated.View>
+    </View>
+  );
+};

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

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

package/src/components/base/badge/style/index.ts

@@ -0,0 +1,24 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useBadgeStyles = createThemedStyles(theme => ({
+  container: {
+    position: 'relative',
+    alignItems: 'flex-start',
+  },
+  badge: {
+    overflow: 'hidden',
+    userSelect: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: theme.palette.white,
+    borderRadius: theme.roundness.md,
+    backgroundColor: theme.palette.error7,
+  },
+  offset: {
+    position: 'absolute',
+    transform: [{ translateX: '50%' }, { translateY: '-50%' }],
+  },
+}));

package/src/components/base/button/button-context.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import type { ButtonContextValue } from './types';
+
+export const ButtonContext = React.createContext<ButtonContextValue | null>(null);

package/src/components/base/button/button-group.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { ButtonContext } from './button-context';
+import { useButtonGroupStyles } from './style';
+import type { ButtonGroupProps } from './types';
+
+export const ButtonGroup: React.FC<ButtonGroupProps> = ({
+  children,
+  direction = 'horizontal',
+  gap = 16,
+  style,
+  radius,
+  size,
+  disabled,
+  block,
+}) => {
+  const groupStyles = useButtonGroupStyles();
+  return (
+    <ButtonContext.Provider value={{ radius, size, disabled, block }}>
+      <View
+        style={[
+          groupStyles.container,
+          direction === 'vertical' && groupStyles.vertical,
+          gap > 0 && { gap },
+          block && { width: '100%' },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </ButtonContext.Provider>
+  );
+};