@unif/react-native-design 0.20.0 → 0.21.1

package/src/components/ui/Reveal/Reveal.web.tsx

@@ -1,22 +1,45 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { motion, usePrefersReducedMotion } from '../../../theme';
+import {
+  createRevealWebAnimatedStyle,
+  resolveRevealWebStyle,
+  scheduleRevealAnimationFrames,
+} from './webTransition';
+import type { RevealAnimationFrameApi } from './webTransition';
 import type { RevealProps } from './types';
 
+type WebRuntime = typeof globalThis & {
+  requestAnimationFrame?: (callback: () => void) => number;
+  cancelAnimationFrame?: (id: number) => void;
+};
+
+const webRuntime = globalThis as WebRuntime;
+
+function readAnimationFrameApi(): RevealAnimationFrameApi | undefined {
+  try {
+    const request = webRuntime.requestAnimationFrame;
+    const cancel = webRuntime.cancelAnimationFrame;
+    if (typeof request !== 'function' || typeof cancel !== 'function') {
+      return undefined;
+    }
+    return {
+      requestAnimationFrame: (callback) => request.call(webRuntime, callback),
+      cancelAnimationFrame: (id) => cancel.call(webRuntime, id),
+    };
+  } catch {
+    return undefined;
+  }
+}
+
 /**
  * Web 端 Reveal —— RN-Web 上 reanimated 4 的 layout 动画（FadeIn/FadeOut）会在
  * _updatePropsJS 里 Object.keys 抛 TypeError（layoutReanimation/web，渲染即每帧崩）,
  * 改用 React state + CSS transition 复刻入场淡入。退场在 web 省略（消费者卸载即移除）;
  * native 走 Reveal.tsx 的 reanimated 实现。
  *
- * **结构分叉说明（三层容器）**：
- * - 外层 `<View style={style}>` —— 承接 RN StyleSheet 样式（flex/margin/padding 等），
- *   与 native Reveal 保持相同的容器语义；
- * - 中间 `<div style={animatedWebStyle}>` —— CSS opacity transition 动画层；
- *   必须是真正的 DOM 元素才能触发 CSS transition（react-native-web 的 <View> 会先
- *   inline 合并 style 再设 opacity，时序不稳定）；
- * - 因此这里刻意不用 animationKeyframes（需要 @keyframes 注入 document），
- *   而用 CSS transition + state 切换 opacity。
+ * caller layout 与动画 opacity 都落到同一个 RN View。双 RAF 建立 opacity:0 起点；
+ * reduced motion 或 RAF 不可用时首 render 就显示，且不输出 transition。
  */
 export function Reveal({
   children,
@@ -25,37 +48,57 @@ export function Reveal({
   testID,
 }: RevealProps): React.JSX.Element {
   const reduced = usePrefersReducedMotion();
-  const [visible, setVisible] = useState(false);
-  const rafRef = useRef<number | null>(null);
+  const frameApiRef = useRef<RevealAnimationFrameApi | undefined>(
+    readAnimationFrameApi()
+  );
+  const frameApi = frameApiRef.current;
+  const canAnimate = !reduced && frameApi !== undefined;
+  const [visible, setVisible] = useState(() => !canAnimate);
+  const generationRef = useRef(0);
+  const previousCanAnimateRef = useRef(canAnimate);
+  const animationJustEnabled =
+    canAnimate && previousCanAnimateRef.current === false;
 
   useEffect(() => {
-    // reduce-motion:跳过淡入,内容即时呈现(与 native FadeIn 在 ReduceMotion.System 下一致)。
-    if (reduced) {
+    const generation = generationRef.current + 1;
+    generationRef.current = generation;
+    previousCanAnimateRef.current = canAnimate;
+
+    if (!canAnimate) {
       setVisible(true);
-      return;
+      return () => {
+        if (generationRef.current === generation) {
+          generationRef.current += 1;
+        }
+      };
     }
-    let cancelled = false;
-    // 双 RAF 过一帧 commit/paint，确保 CSS transition 有 opacity:0 起点（仿 ToastHost.web）。
-    rafRef.current = requestAnimationFrame(() => {
-      if (cancelled) return;
-      rafRef.current = requestAnimationFrame(() => {
-        if (!cancelled) setVisible(true);
-      });
+
+    setVisible(false);
+    const cancelFrames = scheduleRevealAnimationFrames({
+      api: frameApi,
+      isCurrent: () => generationRef.current === generation,
+      onVisible: () => setVisible(true),
     });
+
     return () => {
-      cancelled = true;
-      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+      if (generationRef.current === generation) {
+        generationRef.current += 1;
+      }
+      cancelFrames();
     };
-  }, [reduced]);
+  }, [canAnimate, frameApi]);
 
-  const animatedWebStyle: React.CSSProperties = {
-    opacity: visible ? 1 : 0,
-    transition: reduced ? undefined : `opacity ${duration}ms ease-out`,
-  };
+  const resolvedStyle = resolveRevealWebStyle(style);
+  const animatedWebStyle = createRevealWebAnimatedStyle({
+    targetOpacity: resolvedStyle.targetOpacity,
+    visible: canAnimate ? !animationJustEnabled && visible : true,
+    animate: canAnimate,
+    duration,
+  });
 
   return (
-    <View style={style} testID={testID}>
-      <div style={animatedWebStyle}>{children}</div>
+    <View style={[resolvedStyle.callerStyle, animatedWebStyle]} testID={testID}>
+      {children}
     </View>
   );
 }

package/src/components/ui/Reveal/types.ts

@@ -3,7 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 
 export type RevealProps = {
   children: ReactNode;
-  /** 容器样式 */
+  /** 唯一公开容器样式；Web 动画完成后保留 caller opacity。 */
   style?: StyleProp<ViewStyle>;
   /** 入/出场时长（毫秒，默认 motion.base = 200） */
   duration?: number;

package/src/components/ui/Reveal/webTransition.ts

@@ -0,0 +1,206 @@
+import { StyleSheet } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type WebTransitionStyle = ViewStyle & {
+  transitionProperty?: 'opacity';
+  transitionDuration?: string;
+  transitionTimingFunction?: 'ease-out';
+};
+
+type RevealWebStyleResolution = {
+  callerStyle: StyleProp<ViewStyle> | undefined;
+  targetOpacity: number;
+};
+
+type RevealWebAnimatedStyleOptions = {
+  targetOpacity: number;
+  visible: boolean;
+  animate: boolean;
+  duration: number;
+};
+
+export type RevealAnimationFrameApi = {
+  requestAnimationFrame: (callback: () => void) => number;
+  cancelAnimationFrame: (id: number) => void;
+};
+
+type RevealAnimationFrameOptions = {
+  api: RevealAnimationFrameApi | undefined;
+  isCurrent: () => boolean;
+  onVisible: () => void;
+};
+
+function isEmptyStyleInput(value: unknown): boolean {
+  if (value === undefined || value === null || value === false) return true;
+  if (!Array.isArray(value)) return false;
+  return value.every(isEmptyStyleInput);
+}
+
+function interpolateLikeReactNativeWeb(value: unknown): string {
+  // String(Symbol()) 不抛错，但 RNW 的 `${value}` 会抛错，必须使用同一 coercion。
+  return `${value}`;
+}
+
+/**
+ * RNW 会对 transform array 做深层 Object.keys / join / string coercion；
+ * StyleSheet.flatten 只做浅合并，不能证明这条后续路径安全。
+ */
+function isSafeWebTransform(transform: unknown): boolean {
+  if (transform === undefined || typeof transform === 'string') return true;
+  if (!Array.isArray(transform)) return false;
+
+  try {
+    return transform.every((operation) => {
+      if (
+        operation === null ||
+        typeof operation !== 'object' ||
+        Array.isArray(operation)
+      ) {
+        return false;
+      }
+
+      const keys = Object.keys(operation);
+      if (keys.length !== 1) return false;
+      const key = keys[0];
+      if (key === undefined) return false;
+      const value = (operation as Record<string, unknown>)[key];
+
+      if (key === 'matrix' || key === 'matrix3d') {
+        if (!Array.isArray(value)) return false;
+        interpolateLikeReactNativeWeb(value.join(','));
+      } else {
+        interpolateLikeReactNativeWeb(value);
+      }
+      return true;
+    });
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Web Reveal 只读取 caller 最终 opacity，不修改合法 caller style。
+ * flatten 或 RNW transform preprocessing 不安全时丢弃整份 hostile style。
+ */
+export function resolveRevealWebStyle(
+  style: unknown
+): RevealWebStyleResolution {
+  try {
+    if (isEmptyStyleInput(style)) {
+      return { callerStyle: undefined, targetOpacity: 1 };
+    }
+
+    const flattened = StyleSheet.flatten(
+      style as StyleProp<ViewStyle>
+    ) as unknown;
+    if (
+      flattened === undefined ||
+      flattened === null ||
+      typeof flattened !== 'object' ||
+      Array.isArray(flattened)
+    ) {
+      return { callerStyle: undefined, targetOpacity: 1 };
+    }
+
+    const flattenedStyle = flattened as ViewStyle;
+    if (!isSafeWebTransform(flattenedStyle.transform)) {
+      return { callerStyle: undefined, targetOpacity: 1 };
+    }
+
+    const opacity = flattenedStyle.opacity;
+    return {
+      callerStyle: style as StyleProp<ViewStyle>,
+      targetOpacity:
+        typeof opacity === 'number' &&
+        Number.isFinite(opacity) &&
+        opacity >= 0 &&
+        opacity <= 1
+          ? opacity
+          : 1,
+    };
+  } catch {
+    return { callerStyle: undefined, targetOpacity: 1 };
+  }
+}
+
+export function createRevealWebAnimatedStyle({
+  targetOpacity,
+  visible,
+  animate,
+  duration,
+}: RevealWebAnimatedStyleOptions): WebTransitionStyle {
+  return {
+    opacity: visible ? targetOpacity : 0,
+    ...(animate
+      ? {
+          transitionProperty: 'opacity' as const,
+          transitionDuration: `${duration}ms`,
+          transitionTimingFunction: 'ease-out' as const,
+        }
+      : {}),
+  };
+}
+
+/**
+ * 两个 RAF id 独立保存；cleanup 即使发生在任意一帧之间，也会取消已知 id。
+ * cancelled + generation 双重保护保证旧回调不能写入新一轮 Reveal。
+ */
+export function scheduleRevealAnimationFrames({
+  api,
+  isCurrent,
+  onVisible,
+}: RevealAnimationFrameOptions): () => void {
+  let firstFrameId: number | undefined;
+  let secondFrameId: number | undefined;
+  let cancelled = false;
+
+  const isActive = () => {
+    if (cancelled) return false;
+    try {
+      return isCurrent();
+    } catch {
+      return false;
+    }
+  };
+  const show = () => {
+    if (isActive()) onVisible();
+  };
+
+  if (api === undefined) {
+    show();
+    return () => {
+      cancelled = true;
+    };
+  }
+
+  try {
+    firstFrameId = api.requestAnimationFrame(() => {
+      if (!isActive()) return;
+      try {
+        secondFrameId = api.requestAnimationFrame(show);
+      } catch {
+        show();
+      }
+    });
+  } catch {
+    show();
+  }
+
+  return () => {
+    cancelled = true;
+    if (firstFrameId !== undefined) {
+      try {
+        api.cancelAnimationFrame(firstFrameId);
+      } catch {
+        // cancel 失败时仍由 cancelled / generation guard 阻止旧回调写状态。
+      }
+    }
+    if (secondFrameId !== undefined) {
+      try {
+        api.cancelAnimationFrame(secondFrameId);
+      } catch {
+        // 同上。
+      }
+    }
+  };
+}

package/src/components/ui/Search/Search.tsx

@@ -1,65 +1,134 @@
-import React, { forwardRef } from 'react';
-import { Pressable } from 'react-native-gesture-handler';
-
-import { control, fixed, r, useColors } from '../../../theme';
-import { childTestID } from '../../../utils/testID';
-import { Icon } from '../Icon';
-import { Input } from '../Input';
-import type { TextInputRef } from '../TextField/TextFieldBase';
+import React, { forwardRef, useEffect } from 'react';
+import { fixed } from '../../../theme';
+import { createLogger } from '../../../utils/logger';
+import { TextFieldBase } from '../TextField/TextFieldBase';
+import { normalizeSearchLayout } from '../TextField/normalize';
+import type {
+  TextFieldBaseProps,
+  TextFieldHandle,
+  TextFieldSlot,
+} from '../TextField/types';
+import { useTextFieldValue } from '../TextField/useTextFieldValue';
 import type { SearchProps } from './types';
 
+const log = createLogger('Search');
+
 /**
- * 搜索输入框 —— `<Input>` 的预设：前置搜索图标、清除按钮、
- * 高 control.md、键盘 return 键为「搜索」。
- *
- * Ref 透传到 Input 内部 TextInput，业务可调 `searchRef.current?.focus()`。
+ * 搜索输入框:值状态只在本层 controller 持有一次,下层 base 始终以受控形状渲染。
  */
-export const Search = forwardRef<TextInputRef, SearchProps>(function Search(
-  { onSubmit, placeholder = '搜索…', value, onChangeText, testID, ...rest },
-  ref
-): React.JSX.Element {
-  const c = useColors();
-  const filled = typeof value === 'string' && value.length > 0;
-  return (
-    <Input
-      ref={ref}
-      {...rest}
-      value={value}
-      onChangeText={onChangeText}
-      placeholder={placeholder}
-      // [L-81] 高度裸 36 → control.md(r(36),随设备缩放)
-      height={control.md}
-      returnKeyType="search"
-      accessibilityRole="search"
-      testID={testID}
-      onSubmitEditing={(e) => {
-        // [M-9] 改读 e.nativeEvent.text —— 不再依赖受控 value,非受控场景也能触发
-        const text = e.nativeEvent.text;
-        onSubmit?.(text);
-      }}
-      leading={<Icon name="search" size={r(18)} color={c.foregroundSubtle} />}
-      trailing={
-        filled ? (
-          <Pressable
-            onPress={() => onChangeText?.('')}
-            // [M-7] 清除按钮 icon r(14)≈14pt;Input 高 control.md≈36pt 限制垂直扩展
-            // horizontal 走 (44-14)/2=15;vertical 走 (44-control.md)/2≈4
-            hitSlop={{
-              top: Math.round((fixed.hitTarget - control.md) / 2),
-              bottom: Math.round((fixed.hitTarget - control.md) / 2),
-              left: Math.round((fixed.hitTarget - r(14)) / 2),
-              right: Math.round((fixed.hitTarget - r(14)) / 2),
-            }}
-            accessibilityRole="button"
-            accessibilityLabel="清除"
-            testID={childTestID(testID, 'clear')}
-          >
-            <Icon name="close" size={r(14)} color={c.foregroundSubtle} />
-          </Pressable>
-        ) : null
+export const Search = forwardRef<TextFieldHandle, SearchProps>(
+  function Search(props, ref): React.JSX.Element {
+    const {
+      value: rawValue,
+      defaultValue: rawDefaultValue,
+      onChangeText: rawOnChangeText,
+      onSubmit: rawOnSubmit,
+      onSubmitEditing: rawOnSubmitEditing,
+      disabled: rawDisabled,
+      editable: rawEditable,
+      placeholder: rawPlaceholder,
+      leading: _leading,
+      trailing: _trailing,
+      height: _height,
+      returnKeyType: _returnKeyType,
+      accessibilityRole: _accessibilityRole,
+      role: _role,
+      clearButtonMode: _clearButtonMode,
+      enterKeyHint: _enterKeyHint,
+      ...rest
+    } = props as SearchProps & Record<string, unknown>;
+    const value = rawValue;
+    const defaultValue = rawDefaultValue;
+    const onChangeText =
+      typeof rawOnChangeText === 'function'
+        ? (rawOnChangeText as (next: string) => void)
+        : undefined;
+    const onSubmit =
+      typeof rawOnSubmit === 'function'
+        ? (rawOnSubmit as (next: string) => void)
+        : undefined;
+    const onSubmitEditing =
+      typeof rawOnSubmitEditing === 'function'
+        ? (rawOnSubmitEditing as NonNullable<SearchProps['onSubmitEditing']>)
+        : undefined;
+    const disabled = rawDisabled === true;
+    const editable = rawEditable === false ? false : undefined;
+    const placeholder =
+      typeof rawPlaceholder === 'string' ? rawPlaceholder : '搜索…';
+    const allowedNativeProps = rest as Omit<
+      TextFieldBaseProps,
+      | 'value'
+      | 'defaultValue'
+      | 'onChangeText'
+      | 'multiline'
+      | 'leading'
+      | 'trailing'
+      | 'height'
+      | 'searchLayout'
+      | 'returnKeyType'
+      | 'accessibilityRole'
+      | 'onSubmitEditing'
+      | 'disabled'
+      | 'editable'
+      | 'placeholder'
+    >;
+    const removedNativeAliasKey = Object.entries({
+      leading: _leading,
+      trailing: _trailing,
+      height: _height,
+      returnKeyType: _returnKeyType,
+      accessibilityRole: _accessibilityRole,
+      role: _role,
+      clearButtonMode: _clearButtonMode,
+      enterKeyHint: _enterKeyHint,
+    })
+      .filter(([, entry]) => entry !== undefined)
+      .map(([name]) => name)
+      .join(',');
+    useEffect(() => {
+      if (removedNativeAliasKey.length > 0) {
+        log.warn(`已忽略 Search 自管 props(${removedNativeAliasKey})。`);
       }
-    />
-  );
-});
+    }, [removedNativeAliasKey]);
+    const controller = useTextFieldValue(
+      { value, defaultValue, onChangeText },
+      'Search'
+    );
+    const searchLayout = normalizeSearchLayout(fixed.hitTarget, 36);
+    const effectiveEditable = disabled !== true && editable !== false;
+    const trailing: TextFieldSlot | undefined =
+      controller.value.length > 0 && effectiveEditable && controller.canUpdate
+        ? {
+            kind: 'action',
+            icon: 'close',
+            onPress: () => controller.onChangeText(''),
+            accessibilityLabel: '清除搜索内容',
+          }
+        : undefined;
+
+    return (
+      <TextFieldBase
+        ref={ref}
+        {...allowedNativeProps}
+        multiline={false}
+        value={controller.value}
+        onChangeText={controller.onChangeText}
+        disabled={disabled}
+        editable={editable}
+        placeholder={placeholder}
+        height={fixed.hitTarget}
+        searchLayout={searchLayout}
+        returnKeyType="search"
+        accessibilityRole="search"
+        onSubmitEditing={(event) => {
+          onSubmitEditing?.(event);
+          onSubmit?.(controller.value);
+        }}
+        leading={{ kind: 'icon', icon: 'search', size: 18 }}
+        trailing={trailing}
+      />
+    );
+  }
+);
 
 Search.displayName = 'Search';

package/src/components/ui/Search/types.ts

@@ -1,14 +1,35 @@
 import type { TextInputProps } from 'react-native';
+import type { InputProps } from '../Input';
 
-// [L-36] Omit 扩 'multiline'/'numberOfLines' —— 搜索框固定单行,这两属性无意义
-export type SearchProps = Omit<
-  TextInputProps,
-  'style' | 'multiline' | 'numberOfLines'
+type SearchBaseProps = Omit<
+  InputProps,
+  | 'value'
+  | 'defaultValue'
+  | 'onChangeText'
+  | 'leading'
+  | 'trailing'
+  | 'height'
+  | 'returnKeyType'
+  | 'accessibilityRole'
+  | 'role'
+  | 'onSubmitEditing'
+  | 'clearButtonMode'
+  | 'enterKeyHint'
 > & {
-  /** 提交回调（按下 return 键时触发） */
+  onSubmitEditing?: TextInputProps['onSubmitEditing'];
   onSubmit?: (value: string) => void;
-  /** 覆盖 placeholder（默认：搜索…） */
-  placeholder?: string;
-  /** E2E / 测试定位 */
-  testID?: string;
 };
+
+export type SearchProps = SearchBaseProps &
+  (
+    | {
+        value: string;
+        onChangeText: (value: string) => void;
+        defaultValue?: never;
+      }
+    | {
+        value?: never;
+        defaultValue?: string;
+        onChangeText?: (value: string) => void;
+      }
+  );

package/src/components/ui/Segmented/Segmented.tsx

@@ -1,7 +1,13 @@
 import React, { useMemo } from 'react';
 import { Text, View } from 'react-native';
 import { Pressable } from 'react-native-gesture-handler';
-import { fw, useTheme, useThemedStyles } from '../../../theme';
+import {
+  fw,
+  scaleFontMetric,
+  useFontScale,
+  useTheme,
+  useThemedStyles,
+} from '../../../theme';
 import { childTestID } from '../../../utils/testID';
 import { makeStyles, sizingFor } from './styles';
 import type { SegmentedProps } from './types';
@@ -24,7 +30,9 @@ export function Segmented({
 }: SegmentedProps): React.JSX.Element {
   const { colors: c, scheme, shadow } = useTheme();
   const styles = useThemedStyles(makeStyles);
+  const fontScale = useFontScale();
   const sizing = useMemo(() => sizingFor(size), [size]);
+  const textSize = scaleFontMetric(sizing.fs, fontScale);
   const activeBg = scheme === 'dark' ? c.surfaceContainerHighest : c.surface;
   const activeShadow = scheme === 'dark' ? null : shadow.subtle;
 
@@ -55,7 +63,7 @@ export function Segmented({
           >
             <Text
               style={{
-                fontSize: sizing.fs,
+                fontSize: textSize,
                 color: on ? c.foreground : c.foregroundSubtle,
                 fontWeight: on ? fw.semi : fw.medium,
               }}

package/src/components/ui/Skeleton/Skeleton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Animated from 'react-native-reanimated';
-import { usePulse } from '../Pulse';
+import { DOT_DEFAULTS, usePulseWithDefaults } from '../Pulse/usePulse';
 import { r, useColors } from '../../../theme';
 import type { SkeletonProps } from './types';
 
@@ -13,9 +13,9 @@ import type { SkeletonProps } from './types';
  * <Skeleton shape="circle" size={40} />        // 头像占位
  * ```
  *
- * `usePulse({ from: 0.5 })` 每实例独立脉冲 —— native 端走 Reanimated 4 worklet,
- * web 端走 CSS transition + setInterval(零 rAF JS 帧),opacity 在 0.5~1 循环。
- * 区别于沿 X 横扫高光的流式 shimmer。 */
+ * 每实例独立脉冲(默认 `from: 0.5`)—— native 端走 Reanimated 4 worklet,web 端走
+ * CSS transition + setInterval(零 rAF JS 帧),opacity 在 0.5~1 循环。系统开启
+ * 减弱动效时静止在 `to`(完全显示)。区别于沿 X 横扫高光的流式 shimmer。 */
 export function Skeleton({
   shape = 'rect',
   width,
@@ -26,7 +26,11 @@ export function Skeleton({
   testID,
 }: SkeletonProps): React.JSX.Element {
   const c = useColors();
-  const animatedStyle = usePulse({ from: 0.5 });
+  const animatedStyle = usePulseWithDefaults(
+    undefined,
+    DOT_DEFAULTS,
+    'Skeleton'
+  );
 
   // 按形状推默认尺寸 + 圆角;caller 显式传 width / height / radius 时 override
   const dim = (() => {