@seakoi/native-ui 1.0.0

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

@@ -0,0 +1,23 @@
+import { createContext, type ReactElement } from 'react';
+
+export type RadioValue = string | number;
+export interface RadioIconState {
+  checked?: boolean;
+  disabled?: boolean;
+}
+export interface RadioContextValue {
+  /** 是否撑满容器 */
+  block?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 当前选中的值 */
+  checkedValue?: RadioValue;
+  /** 图标位置 */
+  radioIconPlacement?: 'left' | 'right';
+  /** 值变化回调 */
+  onCheckedChange?: (value?: RadioValue) => void;
+  /** 自定义图标渲染函数 */
+  iconRender?: (RadioIconState) => ReactElement | null;
+}
+
+export const RadioContext = createContext<RadioContextValue>({});

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

@@ -0,0 +1,58 @@
+import { useControllableValue, useLatest } from 'ahooks';
+import React, { useMemo } from 'react';
+
+import {
+  RadioContext,
+  type RadioContextValue,
+  type RadioValue,
+} from './radio-context';
+
+export interface RadioGroupProps
+  extends Pick<
+    RadioContextValue,
+    'block' | 'disabled' | 'iconRender' | 'radioIconPlacement'
+  > {
+  /** 选中值 */
+  value?: RadioValue;
+  /** 初始选中值 */
+  defaultValue?: RadioValue;
+  /** 选中值变化事件 */
+  onChange?: (value?: RadioValue) => void;
+}
+
+export const RadioGroup: React.FC<
+  React.PropsWithChildren<RadioGroupProps>
+> = props => {
+  const iconRender = useLatest(props.iconRender);
+  const [checkedValue, setCheckedValue] = useControllableValue<
+    RadioValue | undefined
+  >(props, {
+    trigger: 'onChange',
+    valuePropName: 'value',
+    defaultValuePropName: 'defaultValue',
+  });
+
+  const contextValue = useMemo(() => {
+    return {
+      checkedValue,
+      block: props.block,
+      disabled: props.disabled,
+      radioIconPlacement: props.radioIconPlacement,
+      iconRender: iconRender.current,
+      onCheckedChange: setCheckedValue,
+    } satisfies RadioContextValue;
+  }, [
+    checkedValue,
+    iconRender,
+    props.block,
+    props.disabled,
+    props.radioIconPlacement,
+    setCheckedValue,
+  ]);
+
+  return (
+    <RadioContext.Provider value={contextValue}>
+      {props.children}
+    </RadioContext.Provider>
+  );
+};

package/src/components/base/radio/radio.tsx

@@ -0,0 +1,200 @@
+import { CheckCircleFilled, CircleOutlined } from '@seakoi/svg-icons';
+import { useControllableValue, useLatest, useMemoizedFn } from 'ahooks';
+import React, { type RefAttributes, useContext, useEffect, useMemo } from 'react';
+import {
+  type FlexAlignType,
+  type GestureResponderEvent,
+  type Insets,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type TextStyle,
+  TouchableOpacity,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { Flex, Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import {
+  RadioContext,
+  type RadioContextValue,
+  type RadioIconState,
+  type RadioValue,
+} from './radio-context';
+import { useRadioStyles } from './style';
+
+export interface RadioProps
+  extends Pick<
+      RadioContextValue,
+      'block' | 'disabled' | 'iconRender' | 'radioIconPlacement'
+    >,
+    RefAttributes<View> {
+  /** 内容垂直方向对齐方式 */
+  align?: FlexAlignType;
+  /** 表单值 */
+  value?: RadioValue;
+  /** 是否选中 */
+  checked?: boolean;
+  /** 默认是否选中 */
+  defaultChecked?: boolean;
+  /** 外层自定义样式 */
+  style?: StyleProp<ViewStyle>;
+  /** 文本容器自定义样式 */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  /** 内容前缀 */
+  contentPrefix?: React.ReactNode;
+  /** 标题内容 */
+  title: string;
+  /** 标题行数 */
+  titleNumberOfLines?: number;
+  /** 标题样式 */
+  titleStyle?: StyleProp<TextStyle>;
+  /** 描述文本 */
+  description?: React.ReactNode;
+  /** 描述样式 */
+  descriptionStyle?: StyleProp<TextStyle>;
+  /** 描述行数 */
+  descriptionNumberOfLines?: number;
+  /** 点击范围 */
+  hitSlop?: null | Insets | number;
+  /** 选中状态改变回调 */
+  onChecked?: (checked: boolean) => void;
+  /** 图标状态回调函数 */
+  onRadioIconStateChange?: (iconState: RadioIconState) => void;
+  /** 点击事件 */
+  onPress?: (event: GestureResponderEvent) => void;
+  /** 长按点击事件 */
+  onLongPress?: (event: GestureResponderEvent) => void;
+  /** 布局回调 */
+  onLayout?: (event: LayoutChangeEvent) => void;
+}
+
+export const Radio: React.FC<RadioProps> = ({
+  align = 'center',
+  titleNumberOfLines = 2,
+  descriptionNumberOfLines = 2,
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useRadioStyles();
+  const context = useContext(RadioContext);
+
+  const onRadioIconStateChange = useLatest(props.onRadioIconStateChange);
+  const [innerChecked, setInnerChecked] = useControllableValue(props, {
+    trigger: 'onChecked',
+    valuePropName: 'checked',
+    defaultValuePropName: 'defaultChecked',
+  });
+
+  const isBlock = props.block ?? context.block;
+  const isDisabled = props.disabled ?? context.disabled;
+  const isConfigureValue = props.value || typeof props.value === 'number';
+  const iconPlacement = props.radioIconPlacement ?? context.radioIconPlacement;
+
+  const isChecked = useMemo(() => {
+    if (props.checked !== undefined) return props.checked;
+    if (
+      isConfigureValue &&
+      (context.checkedValue || typeof context.checkedValue === 'number')
+    ) {
+      /** 使用 Radio.Group 包裹，且存在 value 值 */
+      return context.checkedValue === props.value;
+    }
+    return innerChecked;
+  }, [
+    props.value,
+    props.checked,
+    innerChecked,
+    isConfigureValue,
+    context.checkedValue,
+  ]);
+
+  const iconRender = useMemoizedFn((iconState: RadioIconState) => {
+    if (props.iconRender) return props.iconRender(iconState);
+    if (context.iconRender) return context.iconRender(iconState);
+    const RadioSvgIcon = !iconState.checked ? CircleOutlined : CheckCircleFilled;
+    return (
+      <View style={styles.icon}>
+        <RadioSvgIcon
+          size={24}
+          color={
+            iconState.checked
+              ? iconState.disabled
+                ? theme.palette.brand4
+                : theme.palette.brand7
+              : theme.palette.gray4
+          }
+        />
+        {!!iconState.disabled && !iconState.checked && (
+          <View style={styles.disabledIconBackground} />
+        )}
+      </View>
+    );
+  });
+
+  useEffect(() => {
+    if (onRadioIconStateChange.current) {
+      onRadioIconStateChange.current({
+        checked: isChecked,
+        disabled: isDisabled,
+      });
+    }
+  }, [isChecked, onRadioIconStateChange, isDisabled]);
+
+  return (
+    <TouchableOpacity
+      ref={props.ref}
+      activeOpacity={0.8}
+      disabled={isDisabled}
+      hitSlop={props.hitSlop}
+      onLayout={props.onLayout}
+      onLongPress={props.onLongPress}
+      onPress={event => {
+        props.onPress?.(event);
+        setInnerChecked(prevState => !prevState);
+        if (isConfigureValue && context.onCheckedChange) {
+          context.onCheckedChange(props.value);
+        }
+      }}
+      style={[
+        styles.container,
+        { alignItems: align },
+        isBlock && styles.fullContainer,
+        iconPlacement === 'right' && styles.reverseContainerDirection,
+        props.style,
+      ]}
+    >
+      {iconRender({ checked: isChecked, disabled: isDisabled })}
+      <Flex align="center" style={[styles.wrapper, props.contentContainerStyle]}>
+        {props.contentPrefix}
+        <Flex
+          vertical
+          align="flex-start"
+          justify="flex-start"
+          gap={theme.spacing.xxs}
+          style={styles.wrapper}
+        >
+          <Text
+            size={16}
+            style={props.titleStyle}
+            color={theme.palette.fontGray1}
+            numberOfLines={titleNumberOfLines}
+          >
+            {props.title}
+          </Text>
+          {!!props.description && (
+            <Text
+              size={14}
+              style={props.descriptionStyle}
+              color={theme.palette.fontGray2}
+              numberOfLines={descriptionNumberOfLines}
+            >
+              {props.description}
+            </Text>
+          )}
+        </Flex>
+      </Flex>
+    </TouchableOpacity>
+  );
+};

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

@@ -0,0 +1,41 @@
+import { createThemedStyles } from '#native-provider';
+
+export * from './radio-card';
+export const useRadioStyles = createThemedStyles(theme => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing.sm,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  fullContainer: {
+    width: '100%',
+    flexShrink: 1,
+    flexBasis: 'auto',
+  },
+  reverseContainerDirection: {
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-between',
+  },
+  wrapper: {
+    flexShrink: 1,
+    flexBasis: 'auto',
+  },
+  icon: {
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    flexDirection: 'column',
+  },
+  disabledIconBackground: {
+    inset: 2,
+    zIndex: -1,
+    position: 'absolute',
+    borderRadius: theme.roundness.full,
+    backgroundColor: theme.palette.blueGray1,
+  },
+}));

package/src/components/base/radio/style/radio-card.ts

@@ -0,0 +1,23 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useRadioCardStyles = createThemedStyles(theme => ({
+  radio: {
+    overflow: 'hidden',
+    position: 'relative',
+    padding: 16,
+    width: '100%',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: theme.palette.gray3,
+    borderRadius: theme.roundness.lg,
+    backgroundColor: theme.palette.white,
+  },
+  ribbon: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    borderWidth: 14,
+    borderStyle: 'solid',
+  },
+  checkIcon: { position: 'absolute', top: -2, left: -2 },
+}));

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

@@ -0,0 +1,2 @@
+export * from './result';
+export type * from './types';

package/src/components/base/result/result.tsx

@@ -0,0 +1,110 @@
+import { Image, type ImageSourcePropType, Platform, View } from 'react-native';
+
+import { Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import { useResultStyles } from './style';
+import type { ResultProps, ResultType } from './types';
+
+/** 默认图片尺寸 */
+const DEFAULT_SIZE = { width: 150, height: 150 };
+
+/** Result 类型配置 */
+interface ResultConfig {
+  image: ImageSourcePropType;
+  description: string;
+  width?: number;
+  height?: number;
+}
+
+/** 类型配置映射表 */
+const RESULT_CONFIG: Record<ResultType, ResultConfig> = {
+  'error-network': {
+    description: '您的网络不太顺畅哦～',
+    image: Platform.select({
+      native: require('../../../assets/images/network-error.png'),
+      default: {
+        uri: 'https://center-oss.seakoi.cn/digitizing_center_dev/frontend/app/assets/images/network-error.png',
+      },
+    }),
+  },
+  'error-code': {
+    description: '检测app出现异常，建议重新启动app～',
+    image: Platform.select({
+      native: require('../../../assets/images/code-error.png'),
+      default: {
+        uri: 'https://center-oss.seakoi.cn/digitizing_center_dev/frontend/app/assets/images/code-error.png',
+      },
+    }),
+  },
+  'error-other': {
+    description: '加载失败～',
+    image: Platform.select({
+      native: require('../../../assets/images/error.png'),
+      default: {
+        uri: 'https://center-oss.seakoi.cn/digitizing_center_dev/frontend/app/assets/images/error.png',
+      },
+    }),
+  },
+  'empty-noList': {
+    width: 225,
+    height: 120,
+    description: '暂无数据哦',
+    image: Platform.select({
+      native: require('../../../assets/images/no-list.png'),
+      default: {
+        uri: 'https://center-oss.seakoi.cn/digitizing_center_dev/frontend/app/assets/images/no-list.png',
+      },
+    }),
+  },
+  'empty-noDetail': {
+    description: '暂无数据哦',
+    image: Platform.select({
+      native: require('../../../assets/images/no-detail.png'),
+      default: {
+        uri: 'https://center-oss.seakoi.cn/digitizing_center_dev/frontend/app/assets/images/no-detail.png',
+      },
+    }),
+  },
+  'empty-noAnnouncement': {
+    description: '暂无数据哦',
+    image: Platform.select({
+      native: require('../../../assets/images/no-announcement.png'),
+      default: {
+        uri: 'https://center-oss.seakoi.cn/digitizing_center_dev/frontend/app/assets/images/no-announcement.png',
+      },
+    }),
+  },
+};
+
+export const Result: React.FC<ResultProps> = ({
+  type,
+  description,
+  image,
+  extra,
+}) => {
+  const theme = useTheme();
+  const config = RESULT_CONFIG[type];
+  const styles = useResultStyles();
+
+  return (
+    <View style={styles.container}>
+      <Image
+        source={image ?? config.image}
+        style={{
+          width: config.width ?? DEFAULT_SIZE.width,
+          height: config.height ?? DEFAULT_SIZE.height,
+        }}
+        resizeMode="contain"
+      />
+      <Text
+        style={{ textAlign: 'center' }}
+        size={14}
+        color={theme.palette.blueGray8}
+      >
+        {description ?? config.description}
+      </Text>
+      {extra && <View style={styles.extra}>{extra}</View>}
+    </View>
+  );
+};

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

@@ -0,0 +1,12 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useResultStyles = createThemedStyles(() => ({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  extra: {
+    marginTop: 12,
+  },
+}));

package/src/components/base/result/types.ts

@@ -0,0 +1,37 @@
+import type { ImageSourcePropType } from 'react-native';
+
+/**
+ * Result 组件类型
+ *
+ * 错误状态:
+ * - `error-network`: 网络错误
+ * - `error-code`: 代码/服务端错误
+ * - `error-other`: 其他错误
+ *
+ * 空状态:
+ * - `empty-noList`: 暂无列表数据
+ * - `empty-noDetail`: 暂无详情数据
+ * - `empty-noAnnouncement`: 暂无公告数据
+ */
+export type ResultType =
+  | 'error-network'
+  | 'error-code'
+  | 'error-other'
+  | 'empty-noList'
+  | 'empty-noDetail'
+  | 'empty-noAnnouncement';
+
+/**
+ * Result 组件属性
+ */
+export interface ResultProps {
+  /** 结果类型 */
+  type: ResultType;
+  /** 自定义描述 */
+  description?: string;
+  /** 自定义图片 */
+  image?: ImageSourcePropType;
+
+  /** 自定义额外内容 */
+  extra?: React.ReactNode;
+}

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

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

package/src/components/base/surface/surface.tsx

@@ -0,0 +1,42 @@
+import React, { type RefAttributes, useMemo } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+import { useTheme } from '#native-provider';
+import type { Roundness, Shadow } from '#shared/theme';
+import type { ExtractNumber } from '#shared/utils/types';
+
+export interface SurfaceProps extends ViewProps, RefAttributes<View> {
+  /** 圆角 */
+  roundness?: keyof Roundness;
+  /** 阴影等级 */
+  elevation?: ExtractNumber<keyof Shadow, 'level'>;
+}
+export const Surface: React.FC<SurfaceProps> = ({
+  elevation = 0,
+  roundness = 'none',
+  ...props
+}) => {
+  const theme = useTheme();
+
+  const roundnessStyle = useMemo(() => {
+    if (roundness && Object.keys(theme.roundness).includes(roundness)) {
+      return { borderRadius: theme.roundness[roundness] };
+    }
+  }, [roundness, theme.roundness]);
+
+  const boxShadowStyle = useMemo(() => {
+    if (elevation || typeof elevation === 'number') {
+      const shadowLevelKey = Object.keys(theme.shadow).find(key => {
+        return key.includes(elevation!.toString());
+      });
+      if (shadowLevelKey) return theme.shadow[shadowLevelKey];
+    }
+    return theme.shadow.level0;
+  }, [elevation, theme.shadow]);
+
+  return (
+    <View {...props} style={[boxShadowStyle, roundnessStyle, props.style]}>
+      {props.children}
+    </View>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { Switch } from './switch';
+export type { SwitchProps } from './types';

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

@@ -0,0 +1,31 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useStyles = createThemedStyles(theme => ({
+  track: {
+    width: 44,
+    height: 24,
+    borderRadius: theme.roundness.full,
+    justifyContent: 'center',
+    padding: 2,
+  },
+  trackDisabled: {
+    opacity: 0.5,
+  },
+  thumb: {
+    width: 20,
+    height: 20,
+    borderRadius: theme.roundness.full,
+    backgroundColor: theme.palette.white,
+    shadowColor: theme.palette.gray14,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  thumbDisabled: {
+    shadowOpacity: 0.1,
+  },
+}));

package/src/components/base/switch/switch.tsx

@@ -0,0 +1,100 @@
+import { useMemoizedFn } from 'ahooks';
+import React, { useEffect, useRef } from 'react';
+import {
+  Animated,
+  type GestureResponderEvent,
+  TouchableOpacity,
+} from 'react-native';
+
+import { useTheme } from '#native-provider';
+
+import { useStyles } from './style';
+import { type SwitchProps } from './types';
+
+export const Switch: React.FC<SwitchProps> = ({
+  checked,
+  defaultChecked = false,
+  disabled = false,
+  onChange,
+  activeOpacity = 0.6,
+  style,
+}) => {
+  const theme = useTheme();
+  const styles = useStyles();
+
+  // 内部状态
+  const [innerChecked, setInnerChecked] = React.useState(defaultChecked);
+
+  // 受控/非受控逻辑
+  const isChecked = checked !== undefined ? checked : innerChecked;
+
+  // 动画值
+  const thumbTranslateX = useRef(new Animated.Value(isChecked ? 20 : 0)).current;
+  const backgroundColorAnim = useRef(new Animated.Value(isChecked ? 1 : 0)).current;
+
+  // 背景颜色插值
+  const backgroundColor = backgroundColorAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [theme.palette.gray4, theme.palette.brand7],
+  });
+
+  // 状态变化时触发动画
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(thumbTranslateX, {
+        toValue: isChecked ? 20 : 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.timing(backgroundColorAnim, {
+        toValue: isChecked ? 1 : 0,
+        duration: 200,
+        useNativeDriver: false,
+      }),
+    ]).start();
+  }, [isChecked, thumbTranslateX, backgroundColorAnim]);
+
+  // 点击处理
+  const handlePress = useMemoizedFn((event: GestureResponderEvent) => {
+    if (disabled) {
+      return;
+    }
+
+    const newValue = !isChecked;
+
+    // 如果是非受控组件，更新内部状态
+    if (checked === undefined) {
+      setInnerChecked(newValue);
+    }
+
+    // 触发 onChange 回调
+    onChange?.(newValue, event);
+  });
+
+  return (
+    <TouchableOpacity
+      activeOpacity={activeOpacity}
+      disabled={disabled}
+      onPress={handlePress}
+      style={style}
+    >
+      <Animated.View
+        style={[
+          styles.track,
+          { backgroundColor },
+          disabled && styles.trackDisabled,
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.thumb,
+            {
+              transform: [{ translateX: thumbTranslateX }],
+            },
+            disabled && styles.thumbDisabled,
+          ]}
+        />
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};