@unif/react-native-ui 0.4.0 → 1.0.0

package/src/components/List/ListItem.tsx

@@ -0,0 +1,87 @@
+import { memo } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { ListItemProps } from './types';
+
+const ListItem = memo(function ListItem({
+  title,
+  description,
+  left,
+  right,
+  onPress,
+  disabled = false,
+  testID,
+  style,
+}: ListItemProps) {
+  const fg = useTheme((t) => t.foreground);
+  const mutedFg = useTheme((t) => t.mutedForeground);
+  const border = useTheme((t) => t.border);
+
+  const content = (
+    <View style={[styles.item, { borderBottomColor: border }]}>
+      {left ? <View style={styles.left}>{left}</View> : null}
+      <View style={styles.labels}>
+        <Text style={[styles.title, { color: fg }]}>{title}</Text>
+        {description ? (
+          <Text style={[styles.description, { color: mutedFg }]}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      {right ? <View style={styles.right}>{right}</View> : null}
+    </View>
+  );
+
+  // 有 onPress 时包裹 Pressable 使整行可点击；否则降级为纯 View
+  if (onPress) {
+    return (
+      <Pressable
+        testID={testID}
+        disabled={disabled}
+        onPress={onPress}
+        style={[disabled && styles.disabledOpacity, style]}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View testID={testID} style={style}>
+      {content}
+    </View>
+  );
+});
+ListItem.displayName = 'ListItem';
+
+const styles = StyleSheet.create({
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  left: {
+    marginRight: 12,
+  },
+  labels: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '400',
+  },
+  description: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+  right: {
+    marginLeft: 12,
+  },
+  disabledOpacity: {
+    opacity: 0.5,
+  },
+});
+
+export { ListItem };

package/src/components/List/index.tsx

@@ -0,0 +1,3 @@
+export { List } from './List';
+export { ListItem } from './ListItem';
+export type { ListProps, ListItemProps } from './types';

package/src/components/List/types.ts

@@ -0,0 +1,24 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface ListProps {
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface ListItemProps {
+  /** 主标题（必填） */
+  title: string;
+  /** 补充说明文字（次要颜色，显示在标题下方） */
+  description?: string;
+  /** 左侧插槽（头像、图标等） */
+  left?: React.ReactNode;
+  /** 右侧插槽（箭头、Badge、开关等） */
+  right?: React.ReactNode;
+  /** 有 onPress 时整行可点击，渲染为 Pressable；否则渲染为 View */
+  onPress?: () => void;
+  /** 禁用点击并降低不透明度；默认为 false */
+  disabled?: boolean;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,85 @@
+import React, { memo, useCallback } from 'react';
+import { View, Pressable, Modal, StyleSheet } from 'react-native';
+import { useControllable, useTheme } from '../../core';
+import type { MenuProps, MenuItemProps } from './types';
+
+const Menu = memo(function Menu({
+  trigger,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  testID,
+}: MenuProps) {
+  const [isOpen, setIsOpen] = useControllable({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+  const bg = useTheme((t) => t.background);
+  const border = useTheme((t) => t.border);
+
+  const handleItemPress = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+
+  // 向 MenuItem 子元素注入 onPress 关闭逻辑：MenuItem 点击后先执行原有回调再关闭菜单
+  const injectedChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    if ((child.type as any).displayName === 'MenuItem') {
+      const origOnPress = (child.props as MenuItemProps).onPress;
+      return React.cloneElement(child as React.ReactElement<MenuItemProps>, {
+        onPress: () => {
+          origOnPress?.();
+          handleItemPress();
+        },
+      });
+    }
+    return child;
+  });
+
+  return (
+    <>
+      <Pressable testID={testID} onPress={() => setIsOpen(true)}>
+        {trigger}
+      </Pressable>
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setIsOpen(false)}
+      >
+        <Pressable
+          style={StyleSheet.absoluteFill}
+          onPress={() => setIsOpen(false)}
+        >
+          <View
+            style={[styles.menu, { backgroundColor: bg, borderColor: border }]}
+          >
+            {injectedChildren}
+          </View>
+        </Pressable>
+      </Modal>
+    </>
+  );
+});
+Menu.displayName = 'Menu';
+
+const styles = StyleSheet.create({
+  menu: {
+    position: 'absolute',
+    top: 60,
+    right: 16,
+    minWidth: 160,
+    borderRadius: 8,
+    borderWidth: 1,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+});
+
+export { Menu };

package/src/components/Menu/MenuItem.tsx

@@ -0,0 +1,51 @@
+import { memo } from 'react';
+import { Text, Pressable, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { MenuItemProps } from './types';
+
+const MenuItem = memo(function MenuItem({
+  label,
+  onPress,
+  disabled = false,
+  destructive = false,
+  testID,
+}: MenuItemProps) {
+  const fg = useTheme((t) => t.foreground);
+  const red = useTheme((t) => t.destructive);
+  const mutedFg = useTheme((t) => t.mutedForeground);
+
+  return (
+    <Pressable
+      testID={testID}
+      disabled={disabled}
+      onPress={onPress}
+      style={styles.item}
+    >
+      <Text
+        style={[
+          styles.itemLabel,
+          { color: disabled ? mutedFg : destructive ? red : fg },
+          disabled && styles.disabledOpacity,
+        ]}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+});
+MenuItem.displayName = 'MenuItem';
+
+const styles = StyleSheet.create({
+  item: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  itemLabel: {
+    fontSize: 14,
+  },
+  disabledOpacity: {
+    opacity: 0.5,
+  },
+});
+
+export { MenuItem };

package/src/components/Menu/MenuSeparator.tsx

@@ -0,0 +1,26 @@
+import { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { MenuSeparatorProps } from './types';
+
+const MenuSeparator = memo(function MenuSeparator({
+  testID,
+}: MenuSeparatorProps) {
+  const border = useTheme((t) => t.border);
+  return (
+    <View
+      testID={testID}
+      style={[styles.separator, { backgroundColor: border }]}
+    />
+  );
+});
+MenuSeparator.displayName = 'MenuSeparator';
+
+const styles = StyleSheet.create({
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    marginVertical: 4,
+  },
+});
+
+export { MenuSeparator };

package/src/components/Menu/index.tsx

@@ -0,0 +1,4 @@
+export { Menu } from './Menu';
+export { MenuItem } from './MenuItem';
+export { MenuSeparator } from './MenuSeparator';
+export type { MenuProps, MenuItemProps, MenuSeparatorProps } from './types';

package/src/components/Menu/types.ts

@@ -0,0 +1,29 @@
+export interface MenuItemProps {
+  /** 菜单项文字标签（必填） */
+  label: string;
+  /** 点击回调；Menu 内部会在触发后自动关闭菜单 */
+  onPress?: () => void;
+  /** 禁用时点击无效，文字变灰；默认为 false */
+  disabled?: boolean;
+  /** 危险操作时文字变红；默认为 false */
+  destructive?: boolean;
+  testID?: string;
+}
+
+export interface MenuSeparatorProps {
+  testID?: string;
+}
+
+export interface MenuProps {
+  /** 触发元素（点击后弹出菜单） */
+  trigger: React.ReactNode;
+  /** 受控展开状态；提供此 prop 时进入受控模式，需配合 onOpenChange 使用 */
+  open?: boolean;
+  /** 非受控初始展开状态；默认为 false */
+  defaultOpen?: boolean;
+  /** 展开状态变化时的回调 */
+  onOpenChange?: (open: boolean) => void;
+  /** 菜单内容，通常为 MenuItem / MenuSeparator */
+  children?: React.ReactNode;
+  testID?: string;
+}

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,26 @@
+import { memo } from 'react';
+import { useControllable } from '../../core';
+import { PopoverProvider } from './context';
+import type { PopoverProps } from './types';
+
+const Popover = memo(function Popover({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+}: PopoverProps) {
+  const [isOpen, setIsOpen] = useControllable({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+
+  return (
+    <PopoverProvider value={{ open: isOpen, onOpenChange: setIsOpen }}>
+      {children}
+    </PopoverProvider>
+  );
+});
+Popover.displayName = 'Popover';
+
+export { Popover };

package/src/components/Popover/PopoverContent.tsx

@@ -0,0 +1,69 @@
+import { memo } from 'react';
+import { View, Pressable, Modal, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import { usePopoverCtx } from './context';
+import type { PopoverContentProps } from './types';
+
+const PopoverContent = memo(function PopoverContent({
+  children,
+  testID,
+  backdropTestID,
+  style,
+}: PopoverContentProps) {
+  const { open, onOpenChange } = usePopoverCtx();
+  const bg = useTheme((t) => t.background);
+  const border = useTheme((t) => t.border);
+
+  if (!open) return null;
+
+  return (
+    <Modal
+      visible
+      transparent
+      animationType="fade"
+      onRequestClose={() => onOpenChange(false)}
+    >
+      <View style={styles.overlay}>
+        {/* 半透明遮罩，点击关闭 Popover */}
+        <Pressable
+          testID={backdropTestID}
+          style={StyleSheet.absoluteFill}
+          onPress={() => onOpenChange(false)}
+        />
+        <View
+          testID={testID}
+          style={[
+            styles.content,
+            { backgroundColor: bg, borderColor: border },
+            style,
+          ]}
+        >
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+});
+PopoverContent.displayName = 'PopoverContent';
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  content: {
+    borderRadius: 8,
+    borderWidth: 1,
+    padding: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+});
+
+export { PopoverContent };

package/src/components/Popover/PopoverTrigger.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+import { Pressable } from 'react-native';
+import { usePopoverCtx } from './context';
+import type { PopoverTriggerProps } from './types';
+
+const PopoverTrigger = memo(function PopoverTrigger({
+  children,
+  testID,
+}: PopoverTriggerProps) {
+  const { onOpenChange } = usePopoverCtx();
+  return (
+    <Pressable testID={testID} onPress={() => onOpenChange(true)}>
+      {children}
+    </Pressable>
+  );
+});
+PopoverTrigger.displayName = 'PopoverTrigger';
+
+export { PopoverTrigger };

package/src/components/Popover/context.ts

@@ -0,0 +1,10 @@
+import { createCompound } from '../../core';
+
+/** Popover 根组件向 Trigger/Content 共享的状态 */
+export interface PopoverCtx {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+}
+
+export const [PopoverProvider, usePopoverCtx] =
+  createCompound<PopoverCtx>('Popover');

package/src/components/Popover/index.tsx

@@ -0,0 +1,8 @@
+export { Popover } from './Popover';
+export { PopoverTrigger } from './PopoverTrigger';
+export { PopoverContent } from './PopoverContent';
+export type {
+  PopoverProps,
+  PopoverTriggerProps,
+  PopoverContentProps,
+} from './types';

package/src/components/Popover/types.ts

@@ -0,0 +1,24 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface PopoverProps {
+  /** 受控展开状态 */
+  open?: boolean;
+  /** 非受控初始展开状态；默认为 false */
+  defaultOpen?: boolean;
+  /** 展开状态变化时的回调 */
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+}
+
+export interface PopoverTriggerProps {
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+export interface PopoverContentProps {
+  children?: React.ReactNode;
+  testID?: string;
+  /** 遮罩层的 testID，用于测试点击遮罩关闭行为 */
+  backdropTestID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,104 @@
+import { memo, useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withRepeat,
+  cancelAnimation,
+} from 'react-native-reanimated';
+import { useTheme, useReducedMotion, useStrings, warning } from '../../core';
+import type { ProgressProps } from './types';
+
+/** 将 value 裁剪到 [0, 100]，越界时通过 warning 提示开发者 */
+function clampValue(value: number): number {
+  if (value < 0 || value > 100) {
+    const clamped = Math.max(0, Math.min(100, value));
+    warning(
+      false,
+      `Progress value ${value} is out of range [0, 100], clamped to ${clamped}.`
+    );
+    return clamped;
+  }
+  return value;
+}
+
+const Progress = memo(function Progress({
+  value,
+  indeterminate = false,
+  testID,
+}: ProgressProps) {
+  const primary = useTheme((t) => t.primary);
+  const muted = useTheme((t) => t.muted);
+  const strings = useStrings();
+  const reduced = useReducedMotion();
+
+  const clamped = value !== undefined ? clampValue(value) : 0;
+  // widthPct：确定进度模式下进度条宽度百分比（0-100）
+  const widthPct = useSharedValue(clamped);
+  // indetermPos：不确定进度模式下滑动块的水平位移百分比（-100 ~ 100）
+  const indetermPos = useSharedValue(-100);
+
+  // 确定进度模式：value 变化时平滑过渡到新宽度
+  useEffect(() => {
+    if (indeterminate) return;
+    widthPct.value = withTiming(clamped, { duration: 300 });
+  }, [clamped, indeterminate, widthPct]);
+
+  // 不确定进度模式：启动无限重复的平移动画；reducedMotion 时取消动画
+  useEffect(() => {
+    if (!indeterminate || reduced) {
+      cancelAnimation(indetermPos);
+      return;
+    }
+    indetermPos.value = -100;
+    indetermPos.value = withRepeat(
+      withTiming(100, { duration: 1200 }),
+      -1,
+      false
+    );
+    return () => cancelAnimation(indetermPos);
+  }, [indeterminate, reduced, indetermPos]);
+
+  const trackStyle = useAnimatedStyle(() => ({
+    width: `${widthPct.value}%` as any,
+  }));
+
+  const indetermStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: `${indetermPos.value}%` as any }],
+    width: '40%',
+  }));
+
+  const a11yValue = indeterminate
+    ? { min: 0, max: 100, text: strings.progressIndeterminate }
+    : { min: 0, max: 100, now: clamped };
+
+  return (
+    <View
+      testID={testID}
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityValue={a11yValue}
+      style={[styles.track, { backgroundColor: muted }]}
+    >
+      {indeterminate ? (
+        <Animated.View
+          style={[styles.fill, { backgroundColor: primary }, indetermStyle]}
+        />
+      ) : (
+        <Animated.View
+          style={[styles.fill, { backgroundColor: primary }, trackStyle]}
+        />
+      )}
+    </View>
+  );
+});
+
+Progress.displayName = 'Progress';
+
+const styles = StyleSheet.create({
+  track: { height: 8, borderRadius: 4, overflow: 'hidden', width: '100%' },
+  fill: { height: '100%', borderRadius: 4 },
+});
+
+export { Progress };

package/src/components/Progress/index.tsx

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

package/src/components/Progress/types.ts

@@ -0,0 +1,7 @@
+export interface ProgressProps {
+  /** 进度值（0–100）；indeterminate 为 true 时忽略此值 */
+  value?: number;
+  /** 不确定进度模式：显示循环滑动动画；默认为 false */
+  indeterminate?: boolean;
+  testID?: string;
+}

package/src/components/RadioGroup/Radio.tsx

@@ -0,0 +1,70 @@
+import { memo } from 'react';
+import { Pressable, View, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import { useRadioGroupContext } from './context';
+import type { RadioProps } from './types';
+
+const Radio = memo(function Radio({
+  value,
+  disabled = false,
+  label,
+  accessibilityLabel,
+  testID,
+  accessible,
+}: RadioProps) {
+  const tokens = useTheme();
+  const { value: groupValue, onSelect, groupDisabled } = useRadioGroupContext();
+
+  const isSelected = value === groupValue;
+  // 单项禁用或组级禁用均生效
+  const isDisabled = groupDisabled || disabled;
+
+  const resolvedLabel = accessibilityLabel ?? label;
+
+  const borderColor = isSelected ? tokens.primary : tokens.border;
+
+  return (
+    <Pressable
+      testID={testID}
+      accessible={accessible}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: isSelected, disabled: isDisabled }}
+      accessibilityLabel={resolvedLabel}
+      onPress={() => {
+        if (!isDisabled) {
+          onSelect(value);
+        }
+      }}
+      style={[isDisabled && styles.disabled]}
+    >
+      <View style={[styles.outer, { borderColor }]}>
+        {isSelected && (
+          <View style={[styles.inner, { backgroundColor: tokens.primary }]} />
+        )}
+      </View>
+    </Pressable>
+  );
+});
+
+Radio.displayName = 'Radio';
+
+const styles = StyleSheet.create({
+  outer: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});
+
+export { Radio };