@unif/react-native-design 0.37.0 → 0.39.0

package/src/components/ui/ActionMenuContent/styles.ts

@@ -1,8 +1,55 @@
 import { StyleSheet } from 'react-native';
-import { fw, radius, space, type as typography } from '../../../theme';
-import type { ColorTokens } from '../../../theme';
-export const makeStyles = (c: ColorTokens) =>
+import {
+  fixed,
+  fw,
+  r,
+  radius,
+  space,
+  type as typography,
+} from '../../../theme';
+import type { ColorTokens, ShadowTokens } from '../../../theme';
+export const makeStyles = (c: ColorTokens, shadows: ShadowTokens) =>
   StyleSheet.create({
+    popoverRoot: {
+      width: r(200),
+      maxWidth: '100%',
+      borderRadius: r(20),
+      borderWidth: 0.5,
+      borderColor: c.outline,
+      backgroundColor: c.surface,
+      ...shadows.card,
+    },
+    popoverCard: {
+      borderRadius: r(20),
+      overflow: 'hidden',
+      paddingVertical: space[2],
+    },
+    popoverRow: {
+      minHeight: fixed.hitTarget,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[5],
+      paddingVertical: space[3],
+      paddingHorizontal: space[6],
+    },
+    popoverRowPressed: { backgroundColor: c.surfaceContainer },
+    popoverRowDisabled: { opacity: 0.4 },
+    popoverIcon: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: c.surfaceContainer,
+    },
+    popoverLabel: {
+      flex: 1,
+      minWidth: 0,
+      fontSize: typography.body,
+      color: c.foreground,
+    },
+    popoverDanger: { color: c.error },
+    popoverConfirmationActions: { paddingTop: space[2] },
     dialogRoot: {
       flex: 1,
       justifyContent: 'center',

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

@@ -1,4 +1,6 @@
+import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
 
 export interface ActionMenuConfirmation {
   message: string;
@@ -8,6 +10,8 @@ export interface ActionMenuConfirmation {
 export interface ActionMenuAction {
   id: string;
   label: string;
+  icon?: IconName;
+  accessibilityHint?: string;
   onPress(): void;
   disabled?: boolean;
   loading?: boolean;
@@ -18,10 +22,22 @@ export interface ActionMenuAction {
 /** 操作、确认有效性和宿主关闭由调用方负责。 */
 export interface ActionMenuContentProps {
   actions: readonly ActionMenuAction[];
-  presentation?: 'dialog' | 'sheet';
+  presentation?: 'dialog' | 'sheet' | 'popover';
   title?: string;
   cancelLabel?: string;
   onClose(): void;
   style?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
   testID?: string;
 }
+
+export interface ActionMenuItemProps {
+  action: ActionMenuAction;
+  onPress(): void;
+}
+
+export interface ActionMenuSheetCardProps {
+  children: ReactNode;
+  contentStyle?: StyleProp<ViewStyle>;
+  testID: string;
+}

package/src/components/ui/ActionMenuContent/useMenuMousePress.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+import type { PointerEvent } from 'react-native';
+
+/** Web 菜单按下时保留原输入焦点；实际选择只由 Pressable.onPress 交付。 */
+export function useMenuMousePress(disabled: boolean) {
+  const [pressed, setPressed] = useState(false);
+  const enabled = Platform.OS === 'web' && !disabled;
+  useEffect(() => {
+    if (disabled) setPressed(false);
+  }, [disabled]);
+  const begin = (event: PointerEvent) => {
+    if (
+      !enabled ||
+      event.nativeEvent.pointerType !== 'mouse' ||
+      event.nativeEvent.button !== 0
+    )
+      return;
+    event.preventDefault();
+    setPressed(true);
+  };
+  const end = () => setPressed(false);
+  return {
+    mousePressed: enabled && pressed,
+    onPointerDown: begin,
+    onPointerUp: end,
+    onPointerCancel: end,
+    onPointerLeave: end,
+  };
+}

package/src/components/ui/ImagePreview/ImagePreview.tsx

@@ -12,7 +12,11 @@ import { radius, useThemedStyles } from '../../../theme';
 import { IconButton } from '../IconButton';
 import { Thumbnail } from '../Thumbnail';
 import { Carousel, type CarouselRef } from 'react-native-reanimated-carousel';
-import { DELETE_LABEL, IMAGE_UNAVAILABLE } from './constants';
+import {
+  DELETE_LABEL,
+  IMAGE_COUNTER_HEIGHT,
+  IMAGE_UNAVAILABLE,
+} from './constants';
 import { makeStyles } from './styles';
 import type {
   ImagePreviewHandle,
@@ -149,82 +153,94 @@ export const ImagePreview = forwardRef<ImagePreviewHandle, ImagePreviewProps>(
 
     return (
       <View style={[styles.container, style]} testID={testID}>
-        <Carousel
-          key={selection.carouselRevision}
-          ref={carouselRef}
-          data={data}
-          defaultIndex={selection.index}
-          loop={false}
-          itemSize={width}
-          style={{ width, height }}
-          keyExtractor={(id) => id}
-          testID={testID ? `${testID}-carousel` : undefined}
-          onScrollStart={() => {
-            if (
-              mounted.current &&
-              selection.carouselRevision === committed.current.carouselRevision
-            ) {
-              moving.current = true;
-            }
-          }}
-          onSnapToItem={(index) => {
-            const latest = committed.current;
-            if (
-              !mounted.current ||
-              selection.carouselRevision !== latest.carouselRevision ||
-              items.length !== latest.items.length ||
-              items.some(
-                (item, itemIndex) => item.id !== latest.items[itemIndex]?.id
+        <View style={{ width, height: height + IMAGE_COUNTER_HEIGHT / 2 }}>
+          <Carousel
+            key={selection.carouselRevision}
+            ref={carouselRef}
+            data={data}
+            defaultIndex={selection.index}
+            loop={false}
+            itemSize={width}
+            style={{ width, height }}
+            keyExtractor={(id) => id}
+            testID={testID ? `${testID}-carousel` : undefined}
+            onScrollStart={() => {
+              if (
+                mounted.current &&
+                selection.carouselRevision ===
+                  committed.current.carouselRevision
+              ) {
+                moving.current = true;
+              }
+            }}
+            onSnapToItem={(index) => {
+              const latest = committed.current;
+              if (
+                !mounted.current ||
+                selection.carouselRevision !== latest.carouselRevision ||
+                items.length !== latest.items.length ||
+                items.some(
+                  (item, itemIndex) => item.id !== latest.items[itemIndex]?.id
+                )
               )
-            )
-              return;
-            moving.current = false;
-            const id = items[index]?.id;
-            const nextIndex = latest.items.findIndex((item) => item.id === id);
-            if (nextIndex >= 0 && nextIndex !== latest.index) {
-              const next = { ...latest, index: nextIndex };
-              // SDK 已完成落位；句柄同步可读，不等待 React 下一次提交。
-              committed.current = next;
-              setSelection(next);
-              notifiedId.current = id;
-              currentChange.current?.(next.items[nextIndex]!);
-            }
-          }}
-          renderItem={({ item: id, index }) => {
-            const item = items.find((candidate) => candidate.id === id)!;
-            return (
-              <View style={[styles.media, { width, height }]}>
-                {item.source === undefined ? (
-                  <View style={styles.placeholder}>
-                    <Text style={styles.placeholderText}>
-                      {IMAGE_UNAVAILABLE}
-                    </Text>
-                  </View>
-                ) : (
-                  <Thumbnail
-                    source={item.source}
-                    size={{ width, height, borderRadius: radius.xl }}
-                    resizeMode="contain"
-                    imageStyle={styles.image}
-                    accessibilityLabel={item.label ?? `图片第 ${index + 1} 张`}
-                    fallback={
-                      <View style={styles.placeholder}>
-                        <Text style={styles.placeholderText}>
-                          {IMAGE_UNAVAILABLE}
-                        </Text>
-                      </View>
-                    }
-                  />
-                )}
-                <View pointerEvents="none" style={styles.border} />
-              </View>
-            );
-          }}
-        />
-        <View style={styles.counter}>
-          <Text style={styles.counterText}>
-            第{selection.index + 1}/{items.length}张
-          </Text>
+                return;
+              moving.current = false;
+              const id = items[index]?.id;
+              const nextIndex = latest.items.findIndex(
+                (item) => item.id === id
+              );
+              if (nextIndex >= 0 && nextIndex !== latest.index) {
+                const next = { ...latest, index: nextIndex };
+                // SDK 已完成落位；句柄同步可读，不等待 React 下一次提交。
+                committed.current = next;
+                setSelection(next);
+                notifiedId.current = id;
+                currentChange.current?.(next.items[nextIndex]!);
+              }
+            }}
+            renderItem={({ item: id, index }) => {
+              const item = items.find((candidate) => candidate.id === id)!;
+              return (
+                <View style={[styles.media, { width, height }]}>
+                  {item.source === undefined ? (
+                    <View style={styles.placeholder}>
+                      <Text style={styles.placeholderText}>
+                        {IMAGE_UNAVAILABLE}
+                      </Text>
+                    </View>
+                  ) : (
+                    <Thumbnail
+                      source={item.source}
+                      size={{ width, height, borderRadius: radius.xl }}
+                      resizeMode="contain"
+                      imageStyle={styles.image}
+                      accessibilityLabel={
+                        item.label ?? `图片第 ${index + 1} 张`
+                      }
+                      fallback={
+                        <View style={styles.placeholder}>
+                          <Text style={styles.placeholderText}>
+                            {IMAGE_UNAVAILABLE}
+                          </Text>
+                        </View>
+                      }
+                    />
+                  )}
+                  <View pointerEvents="none" style={styles.border} />
+                </View>
+              );
+            }}
+          />
+          <View
+            style={styles.counter}
+            accessible
+            accessibilityLiveRegion="polite"
+            accessibilityLabel={`第${selection.index + 1}张，共${items.length}张`}
+          >
+            <Text style={styles.counterText}>
+              第{selection.index + 1}/{items.length}张
+            </Text>
+          </View>
         </View>
         {current.canDelete && onRequestDelete ? (
           <IconButton

package/src/components/ui/ImagePreview/constants.ts

@@ -1,2 +1,5 @@
+import { r } from '../../../theme';
+
 export const IMAGE_UNAVAILABLE = '图片暂不可预览';
 export const DELETE_LABEL = '删除当前照片';
+export const IMAGE_COUNTER_HEIGHT = r(26);

package/src/components/ui/ImagePreview/styles.ts

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { fontMono, radius, space, type as typography } from '../../../theme';
 import type { ColorTokens } from '../../../theme';
+import { IMAGE_COUNTER_HEIGHT } from './constants';
 
 export const makeStyles = (colors: ColorTokens) =>
   StyleSheet.create({
@@ -31,8 +32,11 @@ export const makeStyles = (colors: ColorTokens) =>
       textAlign: 'center',
     },
     counter: {
+      position: 'absolute',
+      bottom: 0,
       alignSelf: 'center',
-      paddingVertical: space[1],
+      height: IMAGE_COUNTER_HEIGHT,
+      justifyContent: 'center',
       paddingHorizontal: space[3],
       borderRadius: radius.pill,
       borderWidth: StyleSheet.hairlineWidth,

package/src/components/ui/Sheet/Sheet.tsx

@@ -10,6 +10,7 @@ export function Sheet({
   footer,
   contentMode = 'fixed',
   contentContainerStyle,
+  footerStyle,
   style,
   testID,
 }: SheetProps): React.JSX.Element {
@@ -37,7 +38,9 @@ export function Sheet({
           {children}
         </View>
       )}
-      {footer ? <View style={styles.footer}>{footer}</View> : null}
+      {footer ? (
+        <View style={[styles.footer, footerStyle]}>{footer}</View>
+      ) : null}
     </View>
   );
 }

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

@@ -9,6 +9,7 @@ export interface SheetProps {
   footer?: ReactNode;
   contentMode?: SheetContentMode;
   contentContainerStyle?: StyleProp<ViewStyle>;
+  footerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }