@unif/react-native-chat 2.0.0 → 2.1.0

package/src/components/Composer/styles.ts

@@ -1,25 +1,135 @@
 import { StyleSheet } from 'react-native';
-import { radius, space, type } from '@unif/react-native-design';
-import type { ColorTokens } from '@unif/react-native-design';
+import { fixed, r, radius, space, type } from '@unif/react-native-design';
+import type { ColorTokens, ShadowTokens } from '@unif/react-native-design';
+import {
+  COMPOSER_ACTION_VISUAL_SIZE,
+  COMPOSER_MENU_ICON_CONTAINER_SIZE,
+} from './constants';
 
-export const createStyles = (colors: ColorTokens) =>
+export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
   StyleSheet.create({
-    root: { gap: space[2], minWidth: 0 },
+    root: { position: 'relative', minWidth: 0 },
     card: {
-      padding: space[3],
-      borderRadius: radius.lg,
+      borderRadius: r(20),
+      borderWidth: 0.5,
+      borderColor: colors.outline,
       backgroundColor: colors.surface,
+      ...shadows.card,
     },
-    regular: { gap: space[2] },
+    accessory: { padding: space[3] },
+    regular: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      gap: space[1],
+      paddingVertical: space[1],
+      paddingHorizontal: space[2],
+    },
+    expanded: { flexDirection: 'column', alignItems: 'stretch', gap: 0 },
     hidden: { display: 'none' },
-    toolbar: {
+    input: { flex: 1, minWidth: 0 },
+    inputExpanded: { flex: 0, width: '100%' },
+    more: { width: fixed.hitTarget, height: fixed.hitTarget },
+    moreExpanded: {
+      position: 'absolute',
+      left: space[2],
+      bottom: space[1],
+      zIndex: 1,
+    },
+    toolbar: { flexDirection: 'row', alignItems: 'center' },
+    toolbarExpanded: {
+      width: '100%',
+      minHeight: fixed.hitTarget,
+      justifyContent: 'flex-end',
+    },
+    toolbarWithMore: { paddingStart: fixed.hitTarget + space[1] },
+    trailingActions: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[1],
+      marginStart: 'auto',
+    },
+    action: {
+      width: fixed.hitTarget,
+      height: fixed.hitTarget,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    actionVisual: {
+      width: COMPOSER_ACTION_VISUAL_SIZE,
+      height: COMPOSER_ACTION_VISUAL_SIZE,
+      borderRadius: COMPOSER_ACTION_VISUAL_SIZE / 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    actionPressed: { backgroundColor: colors.surfaceContainerHigh },
+    actionDisabled: { opacity: 0.4 },
+    primary: { backgroundColor: colors.primary },
+    primaryPressed: { backgroundColor: colors.primaryPressed },
+    primaryDisabled: { backgroundColor: colors.surfaceContainerHighest },
+    cancel: { backgroundColor: colors.surfaceContainer },
+    backdrop: {
+      position: 'absolute',
+      bottom: '100%',
+      left: 0,
+      right: 0,
+      zIndex: 1,
+    },
+    menu: {
+      position: 'absolute',
+      bottom: '100%',
+      left: space[6],
+      width: r(200),
+      maxWidth: '100%',
+      marginBottom: space[2],
+      borderRadius: r(20),
+      borderWidth: 0.5,
+      borderColor: colors.outline,
+      backgroundColor: colors.surface,
+      zIndex: 2,
+      ...shadows.card,
+    },
+    menuClip: {
+      borderRadius: r(20),
+      overflow: 'hidden',
+      paddingVertical: space[2],
+    },
+    menuRow: {
+      minHeight: fixed.hitTarget,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[5],
+      paddingVertical: space[3],
+      paddingHorizontal: space[6],
+    },
+    menuRowPressed: { backgroundColor: colors.surfaceContainer },
+    menuIcon: {
+      width: COMPOSER_MENU_ICON_CONTAINER_SIZE,
+      height: COMPOSER_MENU_ICON_CONTAINER_SIZE,
+      borderRadius: COMPOSER_MENU_ICON_CONTAINER_SIZE / 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: colors.surfaceContainer,
+    },
+    menuLabel: {
+      flex: 1,
+      minWidth: 0,
+      fontSize: type.body,
+      color: colors.foreground,
+    },
+    voice: {
       flexDirection: 'row',
-      flexWrap: 'wrap',
       alignItems: 'center',
       gap: space[2],
+      paddingVertical: space[1],
+      paddingHorizontal: space[2],
+      borderRadius: radius['3xl'],
+      backgroundColor: colors.primaryContainerSubtle,
+    },
+    transcript: {
+      flex: 1,
+      minWidth: 0,
+      color: colors.foreground,
+      fontSize: type.body,
     },
-    primary: { marginStart: 'auto' },
-    menu: { flexDirection: 'row', flexWrap: 'wrap', gap: space[2] },
-    voice: { gap: space[3] },
-    transcript: { color: colors.foreground, fontSize: type.body },
+    transcriptPlaceholder: { color: colors.foregroundSubtle },
   });

package/src/components/Composer/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import type { TextFieldHandle } from '@unif/react-native-design';
+import type { IconName, TextFieldHandle } from '@unif/react-native-design';
 import type { ChatAction } from '../../actions';
 
 export interface ComposerSendAction {
@@ -8,6 +8,7 @@ export interface ComposerSendAction {
   onPress(value: string): void;
   allowEmpty?: boolean;
   disabled?: boolean;
+  /** 图标按钮的可访问名称，默认“发送”。 */
   label?: string;
 }
 
@@ -49,8 +50,11 @@ export interface ComposerProps {
   voice?: ComposerVoiceControl;
   header?: ReactNode;
   footer?: ReactNode;
+  /** card 提供统一表面；plain 由外层提供表面，内部 Textarea 均不单独绘制表面。 */
   surface?: 'card' | 'plain';
+  /** Textarea 整体最小高度（含内间距），默认 44，不低于最小触达高度。 */
   minInputHeight?: number;
+  /** Textarea 整体最大高度；默认四行文字预算加 plain 内间距，随应用字号变化。 */
   maxInputHeight?: number;
   onFocusChange?(focused: boolean): void;
   onHeightChange?(height: number): void;
@@ -59,3 +63,19 @@ export interface ComposerProps {
 }
 
 export type ComposerHandle = TextFieldHandle;
+
+export interface ComposerIconActionProps {
+  icon: IconName;
+  label: string;
+  onPress?(): void;
+  disabled?: boolean;
+  busy?: boolean;
+  expanded?: boolean;
+  visual?: 'icon' | 'primary' | 'cancel';
+}
+
+export interface ComposerMenuItemProps {
+  action: ChatAction;
+  disabled: boolean;
+  onPress(): void;
+}

package/src/components/Composer/useMousePress.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+import type { PointerEvent } from 'react-native';
+
+export function useMousePress(disabled: boolean) {
+  const [pressed, setPressed] = useState(false);
+  const enabled = Platform.OS === 'web' && !disabled;
+  useEffect(() => {
+    if (disabled) setPressed(false);
+  }, [disabled]);
+
+  function begin(event: PointerEvent) {
+    if (
+      event.nativeEvent.pointerType !== 'mouse' ||
+      event.nativeEvent.button !== 0
+    )
+      return;
+    // 阻止默认聚焦后不会产生兼容 mousedown，局部投影按住状态；点击仍交给 SDK。
+    event.preventDefault();
+    setPressed(true);
+  }
+  function end(event: PointerEvent) {
+    if (event.nativeEvent.pointerType === 'mouse') setPressed(false);
+  }
+  return {
+    mousePressed: enabled && pressed,
+    onPointerDown: enabled ? begin : undefined,
+    onPointerUp: enabled ? end : undefined,
+    onPointerCancel: enabled ? end : undefined,
+    onPointerLeave: enabled ? end : undefined,
+  };
+}

package/src/components/Suggestions/Suggestions.tsx

@@ -1,5 +1,6 @@
 import { View } from 'react-native';
-import { Chip, Icon } from '@unif/react-native-design';
+import { Chip, Icon, useColors } from '@unif/react-native-design';
+import { SUGGESTION_ICON_SIZE } from './constants';
 import { styles } from './styles';
 import type { SuggestionsProps } from './types';
 
@@ -10,6 +11,7 @@ export function Suggestions({
   style,
   testID,
 }: SuggestionsProps): React.JSX.Element | null {
+  const colors = useColors();
   if (items.length === 0) return null;
 
   return (
@@ -25,7 +27,15 @@ export function Suggestions({
           selected={item.selected}
           busy={item.loading}
           disabled={item.disabled}
-          leading={item.icon ? <Icon name={item.icon} /> : undefined}
+          leading={
+            item.icon ? (
+              <Icon
+                name={item.icon}
+                size={SUGGESTION_ICON_SIZE}
+                color={colors.primary}
+              />
+            ) : undefined
+          }
           onPress={onSelect ? () => onSelect(item) : undefined}
         />
       ))}

package/src/components/Suggestions/constants.ts

@@ -0,0 +1 @@
+export const SUGGESTION_ICON_SIZE = 14;

package/src/components/Suggestions/types.ts

@@ -4,6 +4,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 export interface SuggestionItem {
   id: string;
   label: string;
+  /** 14 布局单位的主题主色图标，普通与选中状态保持相同图标样式。 */
   icon?: IconName;
   selected?: boolean;
   loading?: boolean;