@unif/react-native-design 0.19.0 → 0.21.0

package/src/components/ui/IconButton/IconButton.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { createLogger } from '../../../utils/logger';
 import { ButtonBase } from '../Button/ButtonBase';
 import { Icon } from '../Icon';
+import { normalizeNonBlankText } from '../shared/accessibilityName';
 import type { IconButtonProps } from './types';
 
+const log = createLogger('IconButton');
+
 /**
  * Icon-only 按钮 —— 与 Button 共享 ButtonBase chrome。
  *
@@ -22,9 +26,21 @@ export function IconButton({
   loading,
   accessibilityLabel,
   accessibilityHint,
+  accessibilityState,
   style,
   testID,
 }: IconButtonProps): React.JSX.Element {
+  const accessibleName = normalizeNonBlankText(accessibilityLabel);
+  const hasBlankLabel = accessibleName === undefined;
+
+  useEffect(() => {
+    if (hasBlankLabel) {
+      log.warn(
+        'IconButton accessibilityLabel 不能为空白，当前 action 已禁用。'
+      );
+    }
+  }, [hasBlankLabel]);
+
   return (
     <ButtonBase
       square
@@ -32,9 +48,10 @@ export function IconButton({
       size={size}
       variant={variant}
       loading={loading}
-      disabled={disabled}
-      accessibilityLabel={accessibilityLabel}
+      disabled={disabled === true || hasBlankLabel}
+      accessibilityLabel={accessibleName}
       accessibilityHint={accessibilityHint}
+      accessibilityState={accessibilityState}
       style={style}
       testID={testID}
     >

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

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { AccessibilityState, StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 import type { ButtonSize, ButtonVariant } from '../Button/types';
 
@@ -9,7 +9,7 @@ export type IconButtonProps = {
   /** 图标名 */
   icon: IconName;
   /** 点击;disabled 时不触发 */
-  onPress?: () => void;
+  onPress: () => void;
   /** 尺寸,默认 'md'(28 / 36 / 44 方形) */
   size?: ButtonSize;
   /** 视觉变体,默认 'ghost'(透明底,适合 header right-tray 场景)。
@@ -27,6 +27,8 @@ export type IconButtonProps = {
   accessibilityLabel: string;
   /** SR 朗读 label 后的行为说明 hint。仅在"行为不显然"时加。 */
   accessibilityHint?: string;
+  /** 额外 a11y 状态；disabled / busy 由组件根据 disabled / loading 统一上报。 */
+  accessibilityState?: Omit<AccessibilityState, 'disabled' | 'busy'>;
   /** 额外样式 */
   style?: StyleProp<ViewStyle>;
   /** E2E / 测试定位 */

package/src/components/ui/Input/Input.tsx

@@ -1,5 +1,7 @@
 import { forwardRef } from 'react';
-import { TextFieldBase, type TextInputRef } from '../TextField/TextFieldBase';
+import { TextFieldBase } from '../TextField/TextFieldBase';
+import { sanitizeTextFieldWrapperProps } from '../TextField/normalize';
+import type { TextFieldHandle } from '../TextField/types';
 import type { InputProps } from './types';
 
 /**
@@ -7,14 +9,22 @@ import type { InputProps } from './types';
  *
  * 视觉状态由 props 隐式驱动:idle / focus / filled / error / disabled。
  *
- * 实现层走 `<TextFieldBase multiline={false}>`,本组件是薄 wrap,
- * 公开 API 跟历史完全一致。
+ * 实现层走 `<TextFieldBase multiline={false}>`,本组件是薄 wrap。
  *
- * Ref:forwardRef<TextInput> —— 业务表单调 `inputRef.current?.focus()` 聚焦错误字段。
+ * Ref:forwardRef<TextFieldHandle> —— 业务表单只能调 focus()/blur(),不会绕过值状态机。
  */
-export const Input = forwardRef<TextInputRef, InputProps>(
+export const Input = forwardRef<TextFieldHandle, InputProps>(
   function Input(props, ref) {
-    return <TextFieldBase ref={ref} multiline={false} {...props} />;
+    const { props: safeProps } = sanitizeTextFieldWrapperProps(
+      props as InputProps & Record<string, unknown>
+    );
+    return (
+      <TextFieldBase
+        ref={ref}
+        {...(safeProps as InputProps)}
+        multiline={false}
+      />
+    );
   }
 );
 

package/src/components/ui/Input/index.ts

@@ -1,2 +1,7 @@
 export { Input } from './Input';
 export type { InputProps } from './types';
+export type {
+  TextFieldContainerStyle,
+  TextFieldHandle,
+  TextFieldSlot,
+} from '../TextField/types';

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

@@ -1,5 +1,9 @@
-import type { ReactNode } from 'react';
-import type { StyleProp, TextInputProps, ViewStyle } from 'react-native';
+import type { TextInputProps } from 'react-native';
+import type {
+  RemovedTextInputProps,
+  TextFieldCommonProps,
+  TextFieldValueProps,
+} from '../TextField/types';
 
 /**
  * 单行文本输入框。多行内容请用 `<Textarea />`。
@@ -9,24 +13,9 @@ import type { StyleProp, TextInputProps, ViewStyle } from 'react-native';
  *
  * `multiline` / `numberOfLines` 故意 omit —— 单行场景这俩属性无意义，多行请用 Textarea。
  */
-export type InputProps = Omit<
-  TextInputProps,
-  'style' | 'multiline' | 'numberOfLines'
-> & {
-  /** 可选的前置插槽（图标、label 等） */
-  leading?: ReactNode;
-  /** 可选的后置插槽（清除按钮、眼睛切换等） */
-  trailing?: ReactNode;
-  /** 错误信息 —— 容器进入错误态并在下方显示。
-   *  空串 `""` / undefined 都不进 error 态(truthy 判定),与 TextFieldBase 保持一致。[L-96] */
-  error?: string;
-  /** 覆盖单行高度，默认 control.lg(r(44),随设备缩放) */
-  height?: number;
-  /** 容器外层样式（含 leading/trailing 整个 wrap） */
-  containerStyle?: StyleProp<ViewStyle>;
-  /**
-   * 整体禁用：等价于 `editable={false}` + 视觉变灰；优先级高于 RN 原生 `editable`。
-   * 业务表单常用此 prop 而非 editable，命名更直觉。
-   */
-  disabled?: boolean;
-};
+export type InputProps = Omit<TextInputProps, RemovedTextInputProps> &
+  TextFieldCommonProps &
+  TextFieldValueProps & {
+    /** 覆盖单行高度，默认 control.lg(r(44),随设备缩放) */
+    height?: number;
+  };

package/src/components/ui/Logo/Logo.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Image } from 'react-native';
 import { r } from '../../../theme';
+import { createLogger } from '../../../utils/logger';
+import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
 import type { LogoProps } from './types';
 
+const log = createLogger('Logo');
+
 /**
  * 品牌 logo 容器组件 —— 提供尺寸 / 圆角 / a11y 标准化包装。
  *
@@ -10,20 +14,39 @@ import type { LogoProps } from './types';
  * (推荐 1024×1024 RGBA PNG / SVG 转 png)。
  *
  * @example
- * <Logo source={require('@/assets/logo.png')} size={64} label="Unif" />
+ * <Logo source={require('@/assets/logo.png')} size={64} accessibilityLabel="Unif" />
  */
 export function Logo({
   source,
   size = r(64),
   borderRadius,
-  label = 'Logo',
+  accessibilityLabel,
   style,
   testID,
 }: LogoProps): React.JSX.Element {
+  const warnedBlankLabelRef = useRef(false);
+  const normalizedLabel = accessibilityLabel?.trim();
+  const hasBlankLabel = accessibilityLabel != null && normalizedLabel === '';
+
+  useEffect(() => {
+    if (__DEV__ && hasBlankLabel && !warnedBlankLabelRef.current) {
+      warnedBlankLabelRef.current = true;
+      log.warn('accessibilityLabel 不能为空白，当前 Logo 已按装饰图片处理');
+    }
+  }, [hasBlankLabel]);
+
+  const accessibilityProps = normalizedLabel
+    ? {
+        accessible: true,
+        accessibilityLabel: normalizedLabel,
+        accessibilityRole: 'image' as const,
+      }
+    : A11Y_HIDDEN_PROPS;
+
   return (
     <Image
+      {...accessibilityProps}
       source={source}
-      accessibilityLabel={label}
       style={[
         {
           width: size,

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

@@ -7,8 +7,8 @@ export type LogoProps = {
   size?: number;
   /** 覆盖圆角。默认 `size / 4`,呈柔和的 squircle。 */
   borderRadius?: number;
-  /** SR / 测试用文案,默认 'Logo'。 */
-  label?: string;
+  /** 非空时作为有意义图片的可访问名称；缺省时按装饰图片处理。 */
+  accessibilityLabel?: string;
   style?: StyleProp<ImageStyle>;
   /** E2E / 测试定位 */
   testID?: string;

package/src/components/ui/NavBar/NavBar.tsx

@@ -1,38 +1,35 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Text, View } from 'react-native';
 import { useColors, useThemedStyles } from '../../../theme';
+import { createLogger } from '../../../utils/logger';
 import { IconButton } from '../IconButton';
-import { isSlot } from './isSlot';
+import { classifyNavBarSlot, type NavBarSlotClassification } from './isSlot';
 import { makeStyles } from './styles';
-import type { NavBarProps, NavBarSlotConfig } from './types';
+import type { NavBarAction, NavBarProps } from './types';
 
-/** NavBarSlotConfig → IconButton(variant='ghost' + 外部 tint)。 */
-function renderSlot(slot: NavBarSlotConfig, tint: string) {
-  // [L-50] 缺 accessibilityLabel 时 dev 告警 —— 回退读英文 icon 名(如 "menu")体验不佳。
-  if (!slot.accessibilityLabel && typeof __DEV__ !== 'undefined' && __DEV__) {
-    console.warn(
-      `NavBar slot(icon="${slot.icon}")未传 accessibilityLabel,SR 将读出 icon 名,请传人类可读短语。`
-    );
-  }
+const log = createLogger('NavBar');
+
+/** NavBarAction → IconButton(variant='ghost' + 外部 tint)。 */
+function renderSlot(slot: NavBarAction, tint: string) {
   return (
     <IconButton
       icon={slot.icon}
       onPress={slot.onPress}
       variant="ghost"
       color={tint}
-      accessibilityLabel={slot.accessibilityLabel ?? slot.icon}
+      accessibilityLabel={slot.accessibilityLabel}
     />
   );
 }
 
-/** left / right slot:NavBarSlotConfig → IconButton,ReactNode → 原样。 */
+/** left / right slot:NavBarAction → IconButton,已归一化 display node → 原样。 */
 function resolveSlot(
-  slot: NavBarProps['left'] | NavBarProps['right'],
+  slot: NavBarSlotClassification,
   tint: string
 ): React.ReactNode {
-  if (!slot) return null;
-  if (isSlot(slot)) return renderSlot(slot, tint);
-  return slot;
+  if (slot.kind === 'action') return renderSlot(slot.action, tint);
+  if (slot.kind === 'node') return slot.node;
+  return null;
 }
 
 /**
@@ -55,6 +52,17 @@ export function NavBar({
   const styles = useThemedStyles(makeStyles);
   const isBrand = variant === 'brand';
   const isTransparent = variant === 'transparent';
+  const leftSlot = classifyNavBarSlot(left);
+  const rightSlot = classifyNavBarSlot(right);
+  const warnedInvalidSlot = useRef(false);
+  const hasInvalidSlot =
+    leftSlot.kind === 'invalid' || rightSlot.kind === 'invalid';
+  useEffect(() => {
+    if (hasInvalidSlot && !warnedInvalidSlot.current) {
+      warnedInvalidSlot.current = true;
+      log.warn('忽略无效的 NavBar action；请传 NavBarAction 或 ReactNode');
+    }
+  }, [hasInvalidSlot]);
   // brand 实底白字;default + transparent 都走深字(transparent 用在浅色
   // hero 渐变之上,白字看不清)。后续若有"相机 / 地图"等深色浮层场景需要
   // 白字 transparent navbar,再加 'transparentLight' variant。
@@ -70,7 +78,7 @@ export function NavBar({
       ]}
       testID={testID}
     >
-      <View style={styles.side}>{resolveSlot(left, tint)}</View>
+      <View style={styles.side}>{resolveSlot(leftSlot, tint)}</View>
       <View style={styles.center}>
         <Text style={[styles.title, { color: tint }]} numberOfLines={1}>
           {title}
@@ -82,7 +90,7 @@ export function NavBar({
         ) : null}
       </View>
       <View style={[styles.side, styles.sideRight]}>
-        {resolveSlot(right, tint)}
+        {resolveSlot(rightSlot, tint)}
       </View>
     </View>
   );

package/src/components/ui/NavBar/index.ts

@@ -1,2 +1,2 @@
 export { NavBar } from './NavBar';
-export type { NavBarProps, NavBarSlotConfig } from './types';
+export type { NavBarAction, NavBarProps, NavBarSlot } from './types';