@unif/react-native-ui 0.4.0 → 1.0.1

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,141 @@
+import { memo, useCallback, useRef } from 'react';
+import { View, StyleSheet, PanResponder } from 'react-native';
+import { useControllable, useTheme, warning } from '../../core';
+import type { SliderProps } from './types';
+
+/** 滑块圆圈直径（px） */
+const THUMB_SIZE = 20;
+/** 轨道高度（px） */
+const TRACK_HEIGHT = 4;
+
+const Slider = memo(function Slider({
+  value,
+  defaultValue,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  testID,
+  style,
+}: SliderProps) {
+  warning(min < max, `Slider: min (${min}) must be less than max (${max})`);
+
+  const [current, setCurrent] = useControllable({
+    value,
+    defaultValue: defaultValue ?? min,
+    onChange: onValueChange,
+  });
+
+  // trackWidthRef：轨道宽度（px），由 onLayout 测量后赋值，用于将触点 X 坐标映射为比例
+  const trackWidthRef = useRef(0);
+
+  const clampedValue = Math.min(max, Math.max(min, current ?? min));
+  // pct：当前值在 [min, max] 范围内的归一化比例（0~1），用于计算填充宽度和滑块位置
+  const pct = max > min ? (clampedValue - min) / (max - min) : 0;
+
+  const resolveValue = useCallback(
+    (pageX: number, trackX: number) => {
+      if (trackWidthRef.current === 0) return;
+      // 将触点 X 坐标转换为轨道内的比例，再映射为步长对齐的数值
+      const ratio = Math.min(
+        1,
+        Math.max(0, (pageX - trackX) / trackWidthRef.current)
+      );
+      const raw = min + ratio * (max - min);
+      const stepped = Math.round(raw / step) * step;
+      return Math.min(max, Math.max(min, stepped));
+    },
+    [min, max, step]
+  );
+
+  const trackXRef = useRef(0);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderGrant: (e) => {
+        const v = resolveValue(e.nativeEvent.pageX, trackXRef.current);
+        if (v !== undefined) setCurrent(v);
+      },
+      onPanResponderMove: (e) => {
+        const v = resolveValue(e.nativeEvent.pageX, trackXRef.current);
+        if (v !== undefined) setCurrent(v);
+      },
+    })
+  ).current;
+
+  const primary = useTheme((t) => t.primary);
+  const muted = useTheme((t) => t.muted);
+  const bg = useTheme((t) => t.background);
+
+  return (
+    <View
+      testID={testID}
+      style={[styles.container, style]}
+      onLayout={(e) => {
+        trackWidthRef.current = e.nativeEvent.layout.width;
+        trackXRef.current = e.nativeEvent.layout.x;
+      }}
+      {...panResponder.panHandlers}
+    >
+      <View style={[styles.track, { backgroundColor: muted }]}>
+        <View
+          style={[
+            styles.fill,
+            {
+              backgroundColor: disabled ? muted : primary,
+              width: `${pct * 100}%`,
+            },
+          ]}
+        />
+      </View>
+      <View
+        style={[
+          styles.thumb,
+          {
+            left: `${pct * 100}%` as any,
+            backgroundColor: bg,
+            borderColor: disabled ? muted : primary,
+          },
+          disabled && styles.disabledOpacity,
+        ]}
+      />
+    </View>
+  );
+});
+
+Slider.displayName = 'Slider';
+
+const styles = StyleSheet.create({
+  container: {
+    height: THUMB_SIZE + 8,
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  track: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+  },
+  thumb: {
+    position: 'absolute',
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    borderWidth: 2,
+    marginLeft: -(THUMB_SIZE / 2),
+    top: '50%' as any,
+    marginTop: -(THUMB_SIZE / 2),
+  },
+  disabledOpacity: {
+    opacity: 0.5,
+  },
+});
+
+export { Slider };

package/src/components/Slider/index.tsx

@@ -0,0 +1,2 @@
+export { Slider } from './Slider';
+export type { SliderProps } from './types';

package/src/components/Slider/types.ts

@@ -0,0 +1,20 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface SliderProps {
+  /** 受控值 */
+  value?: number;
+  /** 非受控初始值；不传时默认为 min */
+  defaultValue?: number;
+  /** 值变化时的回调 */
+  onValueChange?: (value: number) => void;
+  /** 最小值；默认为 0 */
+  min?: number;
+  /** 最大值；默认为 100 */
+  max?: number;
+  /** 步长；默认为 1 */
+  step?: number;
+  /** 禁用时不响应拖拽，轨道和滑块变灰；默认为 false */
+  disabled?: boolean;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,89 @@
+import { memo, useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  Easing,
+  cancelAnimation,
+} from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+import { useTheme, useReducedMotion, useStrings } from '../../core';
+import type { SpinnerProps } from './types';
+
+/** 各尺寸对应的 SVG 画布边长（px） */
+const SIZE_MAP = { sm: 14, md: 16, lg: 18 } as const;
+
+const Spinner = memo(function Spinner({
+  size = 'md',
+  color,
+  accessibilityLabel,
+  accessible,
+  testID,
+}: SpinnerProps) {
+  const defaultColor = useTheme((t) => t.foreground);
+  const strings = useStrings();
+  const reduced = useReducedMotion();
+  const resolvedColor = color ?? defaultColor;
+  const dim = SIZE_MAP[size];
+
+  const rotation = useSharedValue(0);
+
+  useEffect(() => {
+    if (reduced) {
+      // 偏好减少动画：停止旋转并重置到初始角度
+      cancelAnimation(rotation);
+      rotation.value = 0;
+      return;
+    }
+    // 线性匀速旋转，-1 表示无限重复，false 表示不反向（始终顺时针）
+    rotation.value = withRepeat(
+      withTiming(360, { duration: 1000, easing: Easing.linear }),
+      -1,
+      false
+    );
+    return () => cancelAnimation(rotation);
+  }, [reduced, rotation]);
+
+  const animStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  const r = dim * 0.4;
+  const cx = dim / 2;
+  const cy = dim / 2;
+  // 从 15° 到 345° 绘制弧线（330° 扫描角，顶部留 30° 缺口）
+  const startRad = (15 * Math.PI) / 180;
+  const endRad = (345 * Math.PI) / 180;
+  const x1 = cx + r * Math.cos(startRad);
+  const y1 = cy + r * Math.sin(startRad);
+  const x2 = cx + r * Math.cos(endRad);
+  const y2 = cy + r * Math.sin(endRad);
+  const arcPath = `M ${x1} ${y1} A ${r} ${r} 0 1 1 ${x2} ${y2}`;
+
+  return (
+    <View
+      testID={testID}
+      accessible={accessible}
+      accessibilityLabel={accessibilityLabel ?? strings.spinnerLabel}
+      style={{ width: dim, height: dim }}
+    >
+      <Animated.View style={[{ width: dim, height: dim }, animStyle]}>
+        <Svg width={dim} height={dim} viewBox={`0 0 ${dim} ${dim}`}>
+          <Path
+            d={arcPath}
+            stroke={resolvedColor}
+            strokeWidth={dim * 0.1}
+            strokeLinecap="round"
+            fill="none"
+          />
+        </Svg>
+      </Animated.View>
+    </View>
+  );
+});
+
+Spinner.displayName = 'Spinner';
+
+export { Spinner };

package/src/components/Spinner/index.tsx

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './types';

package/src/components/Spinner/types.ts

@@ -0,0 +1,10 @@
+export interface SpinnerProps {
+  /** 尺寸；默认为 'md' */
+  size?: 'sm' | 'md' | 'lg';
+  /** 图标颜色；不传时使用 foreground token */
+  color?: string;
+  /** 无障碍标签；不传时使用 strings.spinnerLabel */
+  accessibilityLabel?: string;
+  accessible?: boolean;
+  testID?: string;
+}

package/src/components/Steps/Steps.tsx

@@ -0,0 +1,74 @@
+import React, { memo, useCallback, useRef } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useControllable } from '../../core';
+import { StepsProvider } from './context';
+import type { StepsProps, StepsItemProps } from './types';
+
+const Steps = memo(function Steps({
+  current,
+  defaultCurrent,
+  onCurrentChange,
+  visual = 'horizontal',
+  clickable = false,
+  children,
+  testID,
+  style,
+}: StepsProps) {
+  const [activeCurrent, setActiveCurrent] = useControllable({
+    value: current,
+    defaultValue: defaultCurrent ?? 0,
+    onChange: onCurrentChange,
+  });
+
+  const itemCountRef = useRef(0);
+
+  const registerItem = useCallback((index: number) => {
+    if (index + 1 > itemCountRef.current) {
+      itemCountRef.current = index + 1;
+    }
+  }, []);
+
+  const onStepPress = useCallback(
+    (index: number) => {
+      if (clickable) setActiveCurrent(index);
+    },
+    [clickable, setActiveCurrent]
+  );
+
+  return (
+    <StepsProvider
+      value={{
+        current: activeCurrent,
+        visual,
+        clickable,
+        onStepPress,
+        registerItem,
+      }}
+    >
+      <View
+        testID={testID}
+        style={[
+          visual === 'horizontal' ? styles.horizontal : styles.vertical,
+          style,
+        ]}
+      >
+        {React.Children.map(children, (child, index) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child as React.ReactElement<StepsItemProps>, {
+                _itemIndex: index,
+              })
+            : child
+        )}
+      </View>
+    </StepsProvider>
+  );
+});
+
+Steps.displayName = 'Steps';
+
+const styles = StyleSheet.create({
+  horizontal: { flexDirection: 'row', alignItems: 'flex-start' },
+  vertical: { flexDirection: 'column' },
+});
+
+export { Steps };

package/src/components/Steps/StepsItem.tsx

@@ -0,0 +1,107 @@
+import { memo, useEffect } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { useTheme, useStrings } from '../../core';
+import { useStepsCtx } from './context';
+import type { StepStatus, StepsItemProps } from './types';
+
+const StepsItem = memo(function StepsItem({
+  title,
+  description,
+  status,
+  disabled = false,
+  testID,
+  style,
+  _itemIndex: itemIndex = 0,
+}: StepsItemProps) {
+  const { current, clickable, onStepPress, registerItem } = useStepsCtx();
+  const strings = useStrings();
+
+  useEffect(() => {
+    registerItem(itemIndex);
+  }, [itemIndex, registerItem]);
+
+  // 自动推导状态：index < current 为 finish，=current 为 process，其余为 wait
+  const derivedStatus: StepStatus =
+    status ??
+    (itemIndex < current
+      ? 'finish'
+      : itemIndex === current
+      ? 'process'
+      : 'wait');
+
+  const primary = useTheme((t) => t.primary);
+  const muted = useTheme((t) => t.muted);
+  const mutedFg = useTheme((t) => t.mutedForeground);
+  const fg = useTheme((t) => t.foreground);
+  const destructive = useTheme((t) => t.destructive);
+
+  const iconBg =
+    derivedStatus === 'finish'
+      ? primary
+      : derivedStatus === 'process'
+      ? primary
+      : derivedStatus === 'error'
+      ? destructive
+      : muted;
+
+  const iconText =
+    derivedStatus === 'finish'
+      ? '✓'
+      : derivedStatus === 'error'
+      ? '!'
+      : String(itemIndex + 1);
+
+  const a11yLabel = strings.stepsItemLabel(
+    itemIndex + 1,
+    0, // 此处无法获取 total
+    derivedStatus,
+    title
+  );
+
+  return (
+    <Pressable
+      testID={testID}
+      disabled={!clickable || disabled}
+      onPress={() => !disabled && onStepPress(itemIndex)}
+      accessibilityLabel={a11yLabel}
+      style={[styles.item, style]}
+    >
+      <View style={[styles.icon, { backgroundColor: iconBg }]}>
+        <Text style={styles.iconText}>{iconText}</Text>
+      </View>
+      <View style={styles.labels}>
+        <Text style={[styles.itemTitle, { color: fg }]}>{title}</Text>
+        {description ? (
+          <Text style={[styles.itemDesc, { color: mutedFg }]}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+});
+
+StepsItem.displayName = 'StepsItem';
+
+const styles = StyleSheet.create({
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    paddingHorizontal: 4,
+  },
+  icon: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 8,
+  },
+  iconText: { fontSize: 12, fontWeight: '600', color: '#fff' },
+  labels: { flex: 1 },
+  itemTitle: { fontSize: 14, fontWeight: '500' },
+  itemDesc: { fontSize: 12 },
+});
+
+export { StepsItem };

package/src/components/Steps/context.ts

@@ -0,0 +1,20 @@
+import { createCompound } from '../../core';
+
+/** 步骤状态：wait=待进行，process=进行中，finish=已完成，error=出错 */
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error';
+
+/** Steps 向 StepsItem 共享的上下文 */
+export interface StepsCtx {
+  /** 当前激活步骤索引（0-based） */
+  current: number;
+  /** 布局方向 */
+  visual: 'horizontal' | 'vertical';
+  /** 是否允许点击步骤直接跳转 */
+  clickable: boolean;
+  /** 点击步骤时的回调 */
+  onStepPress: (index: number) => void;
+  /** 子项注册自身索引，用于统计总步骤数 */
+  registerItem: (index: number) => void;
+}
+
+export const [StepsProvider, useStepsCtx] = createCompound<StepsCtx>('Steps');

package/src/components/Steps/index.tsx

@@ -0,0 +1,3 @@
+export { Steps } from './Steps';
+export { StepsItem } from './StepsItem';
+export type { StepsProps, StepsItemProps, StepStatus } from './types';

package/src/components/Steps/types.ts

@@ -0,0 +1,37 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { StepStatus } from './context';
+
+export type { StepStatus };
+
+export interface StepsProps {
+  /** 受控当前步骤索引（0-based） */
+  current?: number;
+  /** 非受控初始步骤索引；默认为 0 */
+  defaultCurrent?: number;
+  /** 当前步骤变化时的回调 */
+  onCurrentChange?: (index: number) => void;
+  /** 布局方向；默认为 'horizontal' */
+  visual?: 'horizontal' | 'vertical';
+  /** 为 true 时允许点击步骤直接跳转；默认为 false */
+  clickable?: boolean;
+  /** 步骤总数（目前仅用于占位，实际由子项自动计算） */
+  total?: number;
+  children: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface StepsItemProps {
+  /** 步骤标题（必填） */
+  title: string;
+  /** 步骤描述（可选，显示在标题下方） */
+  description?: string;
+  /** 显式指定状态；不传时由 current 索引自动推导 */
+  status?: StepStatus;
+  /** 禁用此步骤的点击；默认为 false */
+  disabled?: boolean;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+  /** @internal 由父级 Steps 通过 cloneElement 注入的零基索引 */
+  _itemIndex?: number;
+}

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,96 @@
+import { memo } from 'react';
+import { Pressable, View, StyleSheet } from 'react-native';
+import { useControllable, useTheme, warning } from '../../core';
+import type { SwitchProps } from './types';
+
+const Switch = memo(function Switch({
+  size = 'md',
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled = false,
+  label,
+  accessibilityLabel,
+  testID,
+  accessible,
+}: SwitchProps) {
+  const tokens = useTheme();
+
+  warning(
+    !!(label || accessibilityLabel),
+    'Switch: either "label" or "accessibilityLabel" prop must be provided for screen reader users.'
+  );
+
+  const [checkedValue, setChecked] = useControllable({
+    value: checked,
+    defaultValue: defaultChecked ?? false,
+    onChange: onCheckedChange,
+  });
+
+  const resolvedLabel = accessibilityLabel ?? label;
+
+  // trackSize / thumbSize：根据 size 计算轨道和滑块的宽高
+  const trackSize =
+    size === 'sm' ? { width: 36, height: 20 } : { width: 44, height: 24 };
+
+  const thumbSize =
+    size === 'sm' ? { width: 16, height: 16 } : { width: 20, height: 20 };
+
+  // thumbOffset：未选中（靠左 2px）和选中（靠右 2px）时滑块的 left 值
+  const thumbOffset =
+    size === 'sm'
+      ? { unchecked: 2, checked: 36 - 16 - 2 }
+      : { unchecked: 2, checked: 44 - 20 - 2 };
+
+  const trackBg = checkedValue ? tokens.primary : tokens.muted;
+
+  return (
+    <Pressable
+      testID={testID}
+      accessible={accessible}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: checkedValue, disabled }}
+      accessibilityLabel={resolvedLabel}
+      onPress={() => {
+        if (!disabled) {
+          setChecked(!checkedValue);
+        }
+      }}
+      style={[
+        styles.track,
+        trackSize,
+        { backgroundColor: trackBg, borderRadius: trackSize.height / 2 },
+        disabled && styles.disabled,
+      ]}
+    >
+      <View
+        style={[
+          styles.thumb,
+          thumbSize,
+          {
+            borderRadius: thumbSize.height / 2,
+            top: (trackSize.height - thumbSize.height) / 2,
+            left: checkedValue ? thumbOffset.checked : thumbOffset.unchecked,
+          },
+        ]}
+      />
+    </Pressable>
+  );
+});
+
+Switch.displayName = 'Switch';
+
+const styles = StyleSheet.create({
+  track: {
+    justifyContent: 'center',
+  },
+  thumb: {
+    position: 'absolute',
+    backgroundColor: 'white',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});
+
+export { Switch };

package/src/components/Switch/index.tsx

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

package/src/components/Switch/types.ts

@@ -0,0 +1,20 @@
+export interface SwitchProps {
+  /** 尺寸变体；默认为 'md' */
+  size?: 'sm' | 'md';
+  /** 受控选中值 */
+  checked?: boolean;
+  /** 非受控初始值；默认为 false */
+  defaultChecked?: boolean;
+  /** 选中状态变化时的回调 */
+  onCheckedChange?: (checked: boolean) => void;
+  /** 是否禁用；默认为 false */
+  disabled?: boolean;
+  /** 文字标签——在未设置 accessibilityLabel 时同时用作无障碍标签 */
+  label?: string;
+  /** 显式无障碍标签；优先级高于 label */
+  accessibilityLabel?: string;
+  /** 用于测试的 testID */
+  testID?: string;
+  /** 元素是否可被无障碍访问；设置 accessible prop 时默认为 true */
+  accessible?: boolean;
+}

package/src/components/Table/Table.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import { View, ScrollView, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { TableProps } from './types';
+
+const Table = memo(function Table({ children, testID, style }: TableProps) {
+  const border = useTheme((t) => t.border);
+  // 水平滚动：表格列数较多时允许左右滑动
+  return (
+    <ScrollView horizontal testID={testID}>
+      <View style={[styles.table, { borderColor: border }, style]}>
+        {children}
+      </View>
+    </ScrollView>
+  );
+});
+Table.displayName = 'Table';
+
+const styles = StyleSheet.create({
+  table: {
+    borderWidth: 1,
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+});
+
+export { Table };

package/src/components/Table/TableBody.tsx

@@ -0,0 +1,13 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+import type { TableBodyProps } from './types';
+
+const TableBody = memo(function TableBody({
+  children,
+  testID,
+}: TableBodyProps) {
+  return <View testID={testID}>{children}</View>;
+});
+TableBody.displayName = 'TableBody';
+
+export { TableBody };