@unif/react-native-ui 0.4.0 → 1.0.0

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,36 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+import { useControllable } from '../../core';
+import { RadioGroupProvider } from './context';
+import type { RadioGroupProps } from './types';
+
+const RadioGroup = memo(function RadioGroup({
+  value,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  children,
+  testID,
+}: RadioGroupProps) {
+  const [selectedValue, setSelectedValue] = useControllable({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+  });
+
+  return (
+    <RadioGroupProvider
+      value={{
+        value: selectedValue,
+        onSelect: setSelectedValue,
+        groupDisabled: disabled,
+      }}
+    >
+      <View testID={testID}>{children}</View>
+    </RadioGroupProvider>
+  );
+});
+
+RadioGroup.displayName = 'RadioGroup';
+
+export { RadioGroup };

package/src/components/RadioGroup/context.ts

@@ -0,0 +1,14 @@
+import { createCompound } from '../../core';
+
+/** RadioGroup 向子 Radio 共享的选中状态 */
+export interface RadioGroupContextValue {
+  /** 当前选中值 */
+  value: string | undefined;
+  /** 选中某项时的回调 */
+  onSelect: (value: string) => void;
+  /** 组级禁用：为 true 时所有 Radio 均不可交互 */
+  groupDisabled: boolean;
+}
+
+export const [RadioGroupProvider, useRadioGroupContext] =
+  createCompound<RadioGroupContextValue>('RadioGroup');

package/src/components/RadioGroup/index.tsx

@@ -0,0 +1,3 @@
+export { RadioGroup } from './RadioGroup';
+export { Radio } from './Radio';
+export type { RadioGroupProps, RadioProps } from './types';

package/src/components/RadioGroup/types.ts

@@ -0,0 +1,29 @@
+export interface RadioGroupProps {
+  /** 受控选中值 */
+  value?: string;
+  /** 非受控初始值 */
+  defaultValue?: string;
+  /** 选中项变化时的回调 */
+  onValueChange?: (value: string) => void;
+  /** 禁用所有单选项；默认为 false */
+  disabled?: boolean;
+  /** 单选项子元素 */
+  children: React.ReactNode;
+  /** 用于测试的 testID */
+  testID?: string;
+}
+
+export interface RadioProps {
+  /** 此单选项代表的值；必填 */
+  value: string;
+  /** 当前单选项是否单独禁用；默认为 false */
+  disabled?: boolean;
+  /** 文字标签——在未设置 accessibilityLabel 时同时用作无障碍标签 */
+  label?: string;
+  /** 显式无障碍标签；优先级高于 label */
+  accessibilityLabel?: string;
+  /** 用于测试的 testID */
+  testID?: string;
+  /** 元素是否可被无障碍访问 */
+  accessible?: boolean;
+}

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,184 @@
+import { memo, useCallback, useEffect, useRef } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+import { useTheme, useControllable, warning } from '../../core';
+import type { SegmentedControlProps } from './types';
+
+const SegmentedControl = memo(function SegmentedControl({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  size = 'md',
+  disabled = false,
+  style,
+  testID,
+}: SegmentedControlProps) {
+  const [selected, setSelected] = useControllable({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+  });
+
+  const bg = useTheme((t) => t.muted);
+  const activeBg = useTheme((t) => t.background);
+  const border = useTheme((t) => t.border);
+  const foreground = useTheme((t) => t.foreground);
+  const mutedFg = useTheme((t) => t.mutedForeground);
+
+  // highlightX / highlightW：高亮滑块的位置和宽度（通过 onLayout 首次测量后确定）
+  const highlightX = useSharedValue(-1);
+  const highlightW = useSharedValue(0);
+  // measured：标记首次测量是否完成；未完成时高亮不可见
+  const measured = useSharedValue(0);
+  // itemLayouts：存储每个分段项的布局信息，供动画计算使用
+  const itemLayouts = useRef<Record<number, { x: number; width: number }>>({});
+
+  const highlightStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: highlightX.value }],
+    width: highlightW.value,
+    opacity: measured.value > 0 && highlightX.value >= 0 ? 1 : 0,
+  }));
+
+  const updateHighlight = useCallback(
+    (itemValue: string) => {
+      const idx = items.findIndex((it) => it.value === itemValue);
+      if (idx < 0) {
+        warning(
+          false,
+          `SegmentedControl: value "${itemValue}" not found in items after update.`
+        );
+        return;
+      }
+      const layout = itemLayouts.current[idx];
+      if (!layout) return;
+      if (measured.value === 0) {
+        // 首次定位：直接跳转，无动画
+        highlightX.value = layout.x;
+        highlightW.value = layout.width;
+        measured.value = 1;
+      } else {
+        // 后续切换：使用弹簧动画平滑过渡
+        highlightX.value = withSpring(layout.x, {
+          damping: 20,
+          stiffness: 200,
+        });
+        highlightW.value = withSpring(layout.width, {
+          damping: 20,
+          stiffness: 200,
+        });
+      }
+    },
+    [items, highlightX, highlightW, measured]
+  );
+
+  const handlePress = useCallback(
+    (itemValue: string, itemDisabled?: boolean) => {
+      if (disabled || itemDisabled) return;
+      setSelected(itemValue);
+      updateHighlight(itemValue);
+    },
+    [disabled, setSelected, updateHighlight]
+  );
+
+  // 受控模式下：外部 value 变化时同步更新高亮位置
+  useEffect(() => {
+    if (selected !== undefined) {
+      updateHighlight(selected);
+    }
+  }, [selected, updateHighlight]);
+
+  const height = size === 'sm' ? 32 : 38;
+  const fontSize = size === 'sm' ? 13 : 14;
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.container,
+        { backgroundColor: bg, borderColor: border, height },
+        style,
+      ]}
+    >
+      <Animated.View
+        style={[
+          styles.highlight,
+          { backgroundColor: activeBg, height: height - 6 },
+          highlightStyle,
+        ]}
+      />
+      {items.map((item, idx) => {
+        const isSelected = selected === item.value;
+        const isDisabled = disabled || item.disabled;
+        return (
+          <Pressable
+            key={item.value}
+            style={styles.item}
+            disabled={isDisabled}
+            onPress={() => handlePress(item.value, item.disabled)}
+            onLayout={(e) => {
+              const { x, width } = e.nativeEvent.layout;
+              itemLayouts.current[idx] = { x, width };
+              if (isSelected) updateHighlight(item.value);
+            }}
+            accessibilityRole="radio"
+            accessibilityState={{
+              checked: isSelected,
+              disabled: !!isDisabled,
+            }}
+          >
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[
+                styles.label,
+                { fontSize, color: isSelected ? foreground : mutedFg },
+                isSelected && styles.selectedLabel,
+                isDisabled && styles.disabledOpacity,
+              ]}
+            >
+              {item.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+});
+
+SegmentedControl.displayName = 'SegmentedControl';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderRadius: 8,
+    borderWidth: 1,
+    padding: 3,
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  highlight: {
+    position: 'absolute',
+    top: 3,
+    borderRadius: 6,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  item: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: { lineHeight: 18 },
+  selectedLabel: { fontWeight: '600' },
+  disabledOpacity: { opacity: 0.5 },
+});
+
+export { SegmentedControl };

package/src/components/SegmentedControl/index.tsx

@@ -0,0 +1,2 @@
+export { SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps, SegmentedItem } from './types';

package/src/components/SegmentedControl/types.ts

@@ -0,0 +1,27 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface SegmentedItem {
+  /** 显示文字 */
+  label: string;
+  /** 选项的唯一标识值 */
+  value: string;
+  /** 是否单独禁用此项；默认为 false */
+  disabled?: boolean;
+}
+
+export interface SegmentedControlProps {
+  /** 所有分段选项（必填） */
+  items: SegmentedItem[];
+  /** 受控选中值 */
+  value?: string;
+  /** 非受控初始选中值 */
+  defaultValue?: string;
+  /** 选中值变化时的回调 */
+  onValueChange?: (value: string) => void;
+  /** 尺寸：sm=32px，md=38px；默认为 'md' */
+  size?: 'sm' | 'md';
+  /** 禁用所有选项；默认为 false */
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/components/Select/Select.tsx

@@ -0,0 +1,133 @@
+import { memo, useState, useCallback } from 'react';
+import { View, Text, Pressable, Modal, StyleSheet } from 'react-native';
+import { useControllable, useTheme } from '../../core';
+import type { SelectProps, SelectItem } from './types';
+
+const Select = memo(function Select({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = 'Select...',
+  disabled = false,
+  testID,
+  style,
+}: SelectProps) {
+  const [selected, setSelected] = useControllable({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+  });
+  const [open, setOpen] = useState(false);
+
+  const fg = useTheme((t) => t.foreground);
+  const mutedFg = useTheme((t) => t.mutedForeground);
+  const border = useTheme((t) => t.border);
+  const bg = useTheme((t) => t.background);
+  const muted = useTheme((t) => t.muted);
+
+  const selectedItem = items.find((it) => it.value === selected);
+
+  const handlePress = useCallback(() => {
+    setOpen(true);
+  }, []);
+
+  const handleSelect = useCallback(
+    (item: SelectItem) => {
+      if (item.disabled) return;
+      setSelected(item.value);
+      setOpen(false);
+    },
+    [setSelected]
+  );
+
+  return (
+    <>
+      <Pressable
+        testID={testID}
+        onPress={handlePress}
+        disabled={disabled}
+        accessibilityRole="combobox"
+        accessibilityLabel={selectedItem ? selectedItem.label : placeholder}
+        accessibilityState={{ disabled, expanded: open }}
+        style={[
+          styles.trigger,
+          { borderColor: border, backgroundColor: disabled ? muted : bg },
+          style,
+        ]}
+      >
+        <Text style={{ color: selectedItem ? fg : mutedFg, fontSize: 14 }}>
+          {selectedItem ? selectedItem.label : placeholder}
+        </Text>
+        <Text style={{ color: mutedFg, fontSize: 12 }}>▼</Text>
+      </Pressable>
+      <Modal
+        visible={open}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setOpen(false)}
+      >
+        <Pressable style={styles.overlay} onPress={() => setOpen(false)}>
+          <View
+            style={[
+              styles.dropdown,
+              { backgroundColor: bg, borderColor: border },
+            ]}
+          >
+            {items.map((item) => (
+              <Pressable
+                key={item.value}
+                onPress={() => handleSelect(item)}
+                style={[
+                  styles.option,
+                  item.value === selected && { backgroundColor: muted },
+                ]}
+              >
+                <Text
+                  style={{
+                    fontSize: 14,
+                    color: item.disabled ? mutedFg : fg,
+                    opacity: item.disabled ? 0.5 : 1,
+                  }}
+                >
+                  {item.label}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+        </Pressable>
+      </Modal>
+    </>
+  );
+});
+
+Select.displayName = 'Select';
+
+const styles = StyleSheet.create({
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: 40,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+  },
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.3)',
+    padding: 24,
+  },
+  dropdown: {
+    borderRadius: 8,
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  option: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+});
+
+export { Select };

package/src/components/Select/index.tsx

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps, SelectItem } from './types';

package/src/components/Select/types.ts

@@ -0,0 +1,27 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface SelectItem {
+  /** 显示文字 */
+  label: string;
+  /** 选项的唯一标识值 */
+  value: string;
+  /** 是否禁用此项；默认为 false */
+  disabled?: boolean;
+}
+
+export interface SelectProps {
+  /** 下拉选项列表（必填） */
+  items: SelectItem[];
+  /** 受控选中值 */
+  value?: string;
+  /** 非受控初始选中值 */
+  defaultValue?: string;
+  /** 选中值变化时的回调 */
+  onValueChange?: (value: string) => void;
+  /** 未选中时的占位文字；默认为 'Select...' */
+  placeholder?: string;
+  /** 禁用触发器和下拉列表；默认为 false */
+  disabled?: boolean;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Sheet/Sheet.tsx

@@ -0,0 +1,79 @@
+import { memo } from 'react';
+import { View, Text, Pressable, Modal, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { SheetProps } from './types';
+
+const Sheet = memo(function Sheet({
+  open,
+  onClose,
+  title,
+  children,
+  testID,
+  backdropTestID,
+  style,
+}: SheetProps) {
+  const bg = useTheme((t) => t.background);
+  const border = useTheme((t) => t.border);
+  const fg = useTheme((t) => t.foreground);
+
+  // 未展开时不渲染 Modal，避免不必要的层叠
+  if (!open) return null;
+
+  return (
+    <Modal visible transparent animationType="slide" onRequestClose={onClose}>
+      <View style={styles.backdrop}>
+        <Pressable
+          testID={backdropTestID}
+          style={StyleSheet.absoluteFill}
+          onPress={onClose}
+        />
+        <View
+          testID={testID}
+          style={[
+            styles.sheet,
+            { backgroundColor: bg, borderTopColor: border },
+            style,
+          ]}
+        >
+          {title ? (
+            <View style={[styles.header, { borderBottomColor: border }]}>
+              <Text style={[styles.title, { color: fg }]}>{title}</Text>
+            </View>
+          ) : null}
+          <View style={styles.content}>{children}</View>
+        </View>
+      </View>
+    </Modal>
+  );
+});
+
+Sheet.displayName = 'Sheet';
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0,0,0,0.4)',
+  },
+  sheet: {
+    borderTopWidth: 1,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    maxHeight: '80%',
+  },
+  header: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  content: {
+    padding: 16,
+  },
+});
+
+export { Sheet };

package/src/components/Sheet/index.tsx

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

package/src/components/Sheet/types.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface SheetProps {
+  /** 是否展开（受控，必填） */
+  open: boolean;
+  /** 关闭回调：点击遮罩或按 Android 返回键时触发 */
+  onClose?: () => void;
+  /** 可选标题，显示在内容区上方带下划分隔线 */
+  title?: string;
+  children?: React.ReactNode;
+  testID?: string;
+  /** 遮罩层的 testID，用于测试点击遮罩关闭行为 */
+  backdropTestID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,71 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { useTheme, useReducedMotion, warning } from '../../core';
+import type { SkeletonProps } from './types';
+
+/** 将维度值裁剪为非负数；无效值通过 warning 提示开发者 */
+function clampDim(value: number | undefined, name: string): number | undefined {
+  if (value === undefined) return undefined;
+  if (!isFinite(value) || value < 0) {
+    warning(
+      false,
+      `Skeleton: ${name} must be >= 0, got ${value}. Clamped to 0.`
+    );
+    return 0;
+  }
+  return value;
+}
+
+const Skeleton = memo(function Skeleton({
+  width,
+  height,
+  radius,
+  style,
+  testID,
+}: SkeletonProps) {
+  const muted = useTheme((t) => t.muted);
+  const radiusSm = useTheme((t) => t.radiusSm);
+  const reduced = useReducedMotion();
+
+  const w = clampDim(width, 'width');
+  const h = clampDim(height, 'height');
+  const r = clampDim(radius, 'radius') ?? radiusSm;
+
+  // shimmerKeyframes：通过 CSS animation（RN Web / Expo DOM）实现呼吸灯效果
+  // reducedMotion 为 true 时将 animationPlayState 设为 'paused' 静止显示
+  const shimmerStyle: Record<string, unknown> = {
+    animationName: shimmerKeyframes,
+    animationDuration: '1.6s',
+    animationIterationCount: 'infinite',
+    animationDirection: 'alternate',
+    animationTimingFunction: 'ease-in-out',
+    animationPlayState: reduced ? 'paused' : 'running',
+  };
+
+  return (
+    <Animated.View
+      accessible={false}
+      testID={testID}
+      style={[
+        styles.base,
+        { backgroundColor: muted, borderRadius: r, width: w, height: h },
+        shimmerStyle,
+        style,
+      ]}
+    />
+  );
+});
+
+Skeleton.displayName = 'Skeleton';
+
+const shimmerKeyframes = {
+  from: { opacity: 0.4 },
+  to: { opacity: 1.0 },
+};
+
+const styles = StyleSheet.create({
+  base: { overflow: 'hidden' },
+});
+
+export { Skeleton };

package/src/components/Skeleton/index.tsx

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

package/src/components/Skeleton/types.ts

@@ -0,0 +1,12 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface SkeletonProps {
+  /** 骨架块宽度（px）；不传时由外部 style 决定 */
+  width?: number;
+  /** 骨架块高度（px）；不传时由外部 style 决定 */
+  height?: number;
+  /** 圆角半径（px）；不传时使用 radiusSm token */
+  radius?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}