@unif/react-native-design 0.32.2 → 0.33.1

package/src/components/ui/TextField/useMultilineLayout.web.ts

@@ -1,5 +1,4 @@
 import { useCallback, useLayoutEffect, useState } from 'react';
-import { TEXTAREA_VERTICAL_INSET } from './constants';
 import type {
   MultilineLayout,
   MultilineLayoutInput,
@@ -12,17 +11,16 @@ export function useMultilineLayout({
   value,
   minHeight,
   maxHeight,
+  verticalInset,
   fontSize,
   placeholder,
   inputRef,
 }: MultilineLayoutInput): MultilineLayout {
   const [contentHeight, setContentHeight] = useState(0);
   const [width, setWidth] = useState(0);
-  const minimum = Math.max(0, minHeight - TEXTAREA_VERTICAL_INSET);
+  const minimum = Math.max(0, minHeight - verticalInset);
   const maximum =
-    maxHeight === undefined
-      ? Infinity
-      : Math.max(0, maxHeight - TEXTAREA_VERTICAL_INSET);
+    maxHeight === undefined ? Infinity : Math.max(0, maxHeight - verticalInset);
   useLayoutEffect(() => {
     if (!enabled || inputRef.current === null) return;
     const node = inputRef.current as unknown as WebTextInputMeasurement;
@@ -43,6 +41,7 @@ export function useMultilineLayout({
     placeholder,
     minHeight,
     maxHeight,
+    verticalInset,
     inputRef,
   ]);
   const onLayout = useCallback<NonNullable<MultilineLayout['onLayout']>>(

package/src/components/ui/Textarea/Textarea.tsx

@@ -5,7 +5,7 @@ import type { TextFieldHandle } from '../TextField/types';
 import type { TextareaProps } from './types';
 
 /**
- * 多行文本输入框 —— 视觉与 Input 一致(idle/focus/filled/error/disabled)。
+ * 多行文本输入框 —— 默认视觉与 Input 一致；plain 供外层已提供表面的组合使用。
  *
  * 跟 Input 区别:
  *  - 内置 `multiline=true`,业务不用传
@@ -17,12 +17,17 @@ import type { TextareaProps } from './types';
  * Ref:forwardRef<TextFieldHandle>,业务只可调 `focus()` / `blur()`。
  */
 export const Textarea = forwardRef<TextFieldHandle, TextareaProps>(
-  function Textarea(props, ref) {
+  function Textarea({ surface = 'default', ...props }, ref) {
     const { props: safeProps } = sanitizeTextFieldWrapperProps(
       props as TextareaProps & Record<string, unknown>
     );
     return (
-      <TextFieldBase ref={ref} {...(safeProps as TextareaProps)} multiline />
+      <TextFieldBase
+        ref={ref}
+        {...(safeProps as TextareaProps)}
+        multiline
+        plainSurface={surface === 'plain'}
+      />
     );
   }
 );

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

@@ -14,9 +14,11 @@ import type {
 export type TextareaProps = Omit<TextInputProps, RemovedTextInputProps> &
   TextFieldCommonProps &
   TextFieldValueProps &
-  TextareaHeightProps;
+  TextareaLayoutProps;
 
-interface TextareaHeightProps {
+interface TextareaLayoutProps {
+  /** default 绘制独立输入表面；plain 嵌入复合输入，保留文字内边距但不绘制表面。 */
+  surface?: 'default' | 'plain';
   /** 最小高度，默认 96（约 5 行） */
   minHeight?: number;
   /** 最大高度（超过后内部滚动），默认不限制 */

package/src/components/ui/Thumbnail/Thumbnail.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useColors, useThemedStyles } from '../../../theme';
-import { resolveImageSource } from '../../../utils/imageSource';
+import { useImageSource } from '../shared/useImageSource';
 import { createLogger } from '../../../utils/logger';
 import { ImageAttempt } from '../shared/ImageAttempt';
 import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
@@ -45,7 +45,7 @@ export function Thumbnail(props: ThumbnailProps): React.JSX.Element {
         ? { uri: uri.trim() }
         : source
       : undefined;
-  const resolvedSource = resolveImageSource(sourceCandidate);
+  const resolvedSource = useImageSource(sourceCandidate);
   const sanitizedImageStyle = sanitizeThumbnailImageStyle(imageStyle);
   const diagnostics = [
     ...normalizedDimensions.diagnostics,
@@ -94,7 +94,7 @@ export function Thumbnail(props: ThumbnailProps): React.JSX.Element {
           <ImageAttempt
             {...imageAccessibilityProps}
             key={resolvedSource.key}
-            source={resolvedSource.source}
+            source={resolvedSource}
             fallback={fallbackContent}
             style={[sanitizedImageStyle.style, StyleSheet.absoluteFill]}
             resizeMode={resizeMode}

package/src/components/ui/shared/ImageAttempt.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback, useState } from 'react';
 import { Image } from 'react-native';
-import type { ImageProps, ImageSourcePropType } from 'react-native';
+import type { ImageProps } from 'react-native';
+import type { ResolvedImageSource } from '../../../utils/imageSource';
 import { selectImageAttemptSource } from './selectImageAttemptSource';
 
 type ImageAttemptProps = Omit<ImageProps, 'onError' | 'source'> & {
-  source: ImageSourcePropType;
+  source: ResolvedImageSource;
   fallback: React.ReactNode;
 };
 

package/src/components/ui/shared/selectImageAttemptSource.shared.ts

@@ -1,16 +1,18 @@
 import type { ImageSourcePropType } from 'react-native';
-import { isValidImageSource } from '../../../utils/imageSource';
+import type { ResolvedImageSource } from '../../../utils/imageSource';
 
+// Input validation belongs to the media component's resolver. Its frozen result
+// is safe to select here without reading or serializing the original input again.
 export function selectNativeImageAttemptSource(
-  source: unknown
+  resolved: ResolvedImageSource | undefined
 ): ImageSourcePropType | undefined {
-  return isValidImageSource(source) ? source : undefined;
+  return resolved?.source;
 }
 
 export function selectWebImageAttemptSource(
-  source: unknown
+  resolved: ResolvedImageSource | undefined
 ): ImageSourcePropType | undefined {
-  if (!isValidImageSource(source)) return undefined;
+  const source = resolved?.source;
 
   // RNW 0.21 不解析 native 的 candidate 数组；Web 明确使用第一候选项。
   return Array.isArray(source) ? source[0] : source;

package/src/components/ui/shared/useImageSource.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { createImageSourceResolver } from '../../../utils/imageSource';
+
+/** Reuse immutable image inputs without retaining a global source cache. */
+export function useImageSource(source: unknown) {
+  const resolve = useMemo(createImageSourceResolver, []);
+  return resolve(source);
+}

package/src/utils/imageSource.ts

@@ -20,13 +20,14 @@ type SnapshotResult =
       valid: true;
       snapshot: SnapshotValue;
       canonical: string;
+      children?: ReadonlyMap<string, SnapshotResult>;
     }
   | {
       valid: false;
       canonical: string;
     };
 
-type ResolvedImageSource = Readonly<{
+export type ResolvedImageSource = Readonly<{
   source: ImageSourcePropType;
   key: string;
 }>;
@@ -34,8 +35,12 @@ type ResolvedImageSource = Readonly<{
 const hasOwn = (value: object, key: PropertyKey): boolean =>
   Object.prototype.hasOwnProperty.call(value, key);
 
-function valid(snapshot: SnapshotValue, canonical: string): SnapshotResult {
-  return { valid: true, snapshot, canonical };
+function valid(
+  snapshot: SnapshotValue,
+  canonical: string,
+  children?: ReadonlyMap<string, SnapshotResult>
+): SnapshotResult {
+  return { valid: true, snapshot, canonical, children };
 }
 
 function invalid(kind: string): SnapshotResult {
@@ -45,7 +50,8 @@ function invalid(kind: string): SnapshotResult {
 function visitArray(
   value: object,
   keys: readonly string[],
-  seen: WeakSet<object>
+  seen: WeakSet<object>,
+  previous?: SnapshotResult
 ): SnapshotResult {
   if (!keys.includes('length')) return invalid('descriptor');
 
@@ -67,6 +73,12 @@ function visitArray(
   const keySet = new Set(keys);
   const parts: string[] = [];
   const snapshot: SnapshotValue[] = [];
+  const children = new Map<string, SnapshotResult>();
+  const previousChildren = previous?.valid ? previous.children : undefined;
+  let unchanged =
+    previous?.valid === true &&
+    Array.isArray(previous.snapshot) &&
+    previousChildren?.size === length;
   let allValid = true;
 
   for (let index = 0; index < length; index += 1) {
@@ -82,7 +94,10 @@ function visitArray(
       return invalid('descriptor');
     }
 
-    const item = visit(descriptor.value, seen);
+    const priorItem = previousChildren?.get(key);
+    const item = visit(descriptor.value, seen, priorItem);
+    children.set(key, item);
+    unchanged = unchanged && item === priorItem;
     parts.push(item.canonical);
     if (item.valid) {
       snapshot.push(item.snapshot);
@@ -91,19 +106,29 @@ function visitArray(
     }
   }
 
+  if (allValid && unchanged && previous?.valid) return previous;
   const canonical = `array:[${parts.join(',')}]`;
   return allValid
-    ? valid(Object.freeze(snapshot), canonical)
+    ? valid(Object.freeze(snapshot), canonical, children)
     : { valid: false, canonical };
 }
 
 function visitObject(
   value: object,
   keys: readonly string[],
-  seen: WeakSet<object>
+  seen: WeakSet<object>,
+  previous?: SnapshotResult
 ): SnapshotResult {
   const snapshot: Record<string, SnapshotValue> = {};
   const parts: string[] = [];
+  const children = new Map<string, SnapshotResult>();
+  const previousChildren = previous?.valid ? previous.children : undefined;
+  let unchanged =
+    previous?.valid === true &&
+    previous.snapshot !== null &&
+    typeof previous.snapshot === 'object' &&
+    !Array.isArray(previous.snapshot) &&
+    previousChildren?.size === keys.length;
   let allValid = true;
 
   for (const key of [...keys].sort()) {
@@ -112,7 +137,10 @@ function visitObject(
     if (!descriptor.enumerable) return invalid('non-enumerable');
     if (!hasOwn(descriptor, 'value')) return invalid('accessor');
 
-    const item = visit(descriptor.value, seen);
+    const priorItem = previousChildren?.get(key);
+    const item = visit(descriptor.value, seen, priorItem);
+    children.set(key, item);
+    unchanged = unchanged && item === priorItem;
     parts.push(`${JSON.stringify(key)}:${item.canonical}`);
     if (item.valid) {
       Object.defineProperty(snapshot, key, {
@@ -126,9 +154,10 @@ function visitObject(
     }
   }
 
+  if (allValid && unchanged && previous?.valid) return previous;
   const canonical = `object:{${parts.join(',')}}`;
   return allValid
-    ? valid(Object.freeze(snapshot), canonical)
+    ? valid(Object.freeze(snapshot), canonical, children)
     : { valid: false, canonical };
 }
 
@@ -136,7 +165,19 @@ function visitObject(
  * 只从 own data descriptor 读取一次，绝不执行 getter。snapshot 与 canonical
  * key 因而来自同一份值；任何 descriptor / Proxy 异常都失败关闭。
  */
-function visit(value: unknown, seen: WeakSet<object>): SnapshotResult {
+function visit(
+  value: unknown,
+  seen: WeakSet<object>,
+  previous?: SnapshotResult
+): SnapshotResult {
+  // Objects are always re-read through their descriptors: callers can mutate
+  // an existing source or supply a Proxy. Only observed primitive values are reused.
+  if (
+    (value === null || typeof value !== 'object') &&
+    previous?.valid &&
+    Object.is(previous.snapshot, value)
+  )
+    return previous;
   if (value === undefined) return valid(undefined, 'undefined:');
   if (value === null) return valid(null, 'null:');
 
@@ -173,8 +214,8 @@ function visit(value: unknown, seen: WeakSet<object>): SnapshotResult {
     seen.add(value);
     try {
       return isArray
-        ? visitArray(value, keys, seen)
-        : visitObject(value, keys, seen);
+        ? visitArray(value, keys, seen, previous)
+        : visitObject(value, keys, seen, previous);
     } finally {
       seen.delete(value);
     }
@@ -183,9 +224,12 @@ function visit(value: unknown, seen: WeakSet<object>): SnapshotResult {
   }
 }
 
-function snapshotValue(value: unknown): SnapshotResult {
+function snapshotValue(
+  value: unknown,
+  previous?: SnapshotResult
+): SnapshotResult {
   try {
-    return visit(value, new WeakSet<object>());
+    return visit(value, new WeakSet<object>(), previous);
   } catch {
     return invalid('exception');
   }
@@ -273,7 +317,12 @@ function asImageSource(
 export function resolveImageSource(
   source: unknown
 ): ResolvedImageSource | undefined {
-  const result = snapshotValue(source);
+  return resolveSnapshot(snapshotValue(source));
+}
+
+function resolveSnapshot(
+  result: SnapshotResult
+): ResolvedImageSource | undefined {
   if (!result.valid) return undefined;
 
   const snapshot = asImageSource(result.snapshot);
@@ -285,6 +334,20 @@ export function resolveImageSource(
   });
 }
 
+/** One resolver belongs to one mounted media component; only its latest tree is kept. */
+export function createImageSourceResolver() {
+  let previous: SnapshotResult | undefined;
+  let resolved: ResolvedImageSource | undefined;
+  return (source: unknown): ResolvedImageSource | undefined => {
+    const next = snapshotValue(source, previous);
+    if (next !== previous) {
+      resolved = resolveSnapshot(next);
+      previous = resolved === undefined ? undefined : next;
+    }
+    return resolved;
+  };
+}
+
 export function imageSourceKey(
   source: ImageSourcePropType | undefined
 ): string {