@onekeyfe/react-native-native-sheet 3.0.128 → 3.0.130

package/src/NativeSheetHeight.ts

@@ -0,0 +1,66 @@
+export interface ResolveNativeSheetHeightOptions {
+  currentHeight?: number;
+  explicitHeight?: number;
+  measuredHeight?: number;
+  maxHeight: number;
+  shouldAutoMeasure: boolean;
+}
+
+export interface ResolveNativeSheetLayoutConstraintsOptions {
+  lockedHeight?: number;
+  maxHeight: number;
+  shouldAutoMeasure: boolean;
+}
+
+export interface NativeSheetLayoutConstraints {
+  hostHeight?: number;
+  hostMaxHeight?: number;
+  shouldFillHost: boolean;
+}
+
+export function resolveNativeSheetLayoutConstraints({
+  lockedHeight,
+  maxHeight,
+  shouldAutoMeasure,
+}: ResolveNativeSheetLayoutConstraintsOptions): NativeSheetLayoutConstraints {
+  if (shouldAutoMeasure) {
+    return {
+      hostMaxHeight: maxHeight,
+      shouldFillHost: false,
+    };
+  }
+  if (lockedHeight !== undefined) {
+    return {
+      hostHeight: lockedHeight,
+      shouldFillHost: true,
+    };
+  }
+  return {
+    hostMaxHeight: maxHeight,
+    shouldFillHost: false,
+  };
+}
+
+export function resolveNativeSheetHeight({
+  currentHeight,
+  explicitHeight,
+  measuredHeight,
+  maxHeight,
+  shouldAutoMeasure,
+}: ResolveNativeSheetHeightOptions): number | undefined {
+  if (explicitHeight !== undefined && explicitHeight > 0) {
+    return Math.min(explicitHeight, maxHeight);
+  }
+  if (
+    explicitHeight === undefined &&
+    shouldAutoMeasure &&
+    measuredHeight !== undefined &&
+    measuredHeight > 0
+  ) {
+    return Math.min(measuredHeight, maxHeight);
+  }
+  if (currentHeight !== undefined && currentHeight > maxHeight) {
+    return maxHeight;
+  }
+  return currentHeight;
+}

package/src/NativeSheetRegistry.ts

@@ -0,0 +1,202 @@
+import type { ReactNode } from 'react';
+
+import type { NativeSheetDismissReason, NativeSheetShowOptions } from './index';
+
+export interface NativeSheetRegistryEntry {
+  id: number;
+  open: boolean;
+  presentationRequested: boolean;
+  content: ReactNode;
+  options: NativeSheetShowOptions;
+}
+
+type RegistryListener = () => void;
+
+const PRESENTATION_CLOSE_FALLBACK_MS = 5_000;
+
+let nextId = 1;
+let entries: readonly NativeSheetRegistryEntry[] = [];
+const listeners = new Set<RegistryListener>();
+let securityFallbackTimer: ReturnType<typeof setTimeout> | undefined;
+const closeFallbackTimers = new Map<number, ReturnType<typeof setTimeout>>();
+let registryBlocked = false;
+
+function clearCloseFallbackTimer(id: number) {
+  const timer = closeFallbackTimers.get(id);
+  if (timer) {
+    clearTimeout(timer);
+    closeFallbackTimers.delete(id);
+  }
+}
+
+function emitChange() {
+  listeners.forEach((listener) => listener());
+}
+
+export function subscribeNativeSheetRegistry(listener: RegistryListener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function getNativeSheetRegistrySnapshot() {
+  return entries;
+}
+
+export function addNativeSheetRegistryEntry(
+  options: NativeSheetShowOptions,
+  content: ReactNode
+) {
+  const id = nextId;
+  nextId += 1;
+  if (registryBlocked) {
+    options.onOpenChange?.(true);
+    options.onOpenChange?.(false);
+    options.onDismiss?.('security');
+    options.onAnimationComplete?.({ open: false });
+    return id;
+  }
+  const entry: NativeSheetRegistryEntry = {
+    id,
+    open: true,
+    presentationRequested: false,
+    content,
+    options,
+  };
+  entries = [...entries, entry];
+  options.onOpenChange?.(true);
+  emitChange();
+  return id;
+}
+
+export function closeNativeSheetRegistryEntry(id: number) {
+  const entry = entries.find((item) => item.id === id);
+  if (!entry || !entry.open) {
+    return;
+  }
+  entry.options.onOpenChange?.(false);
+  if (!entry.presentationRequested) {
+    entries = entries.filter((item) => item.id !== id);
+    entry.options.onDismiss?.('programmatic');
+    entry.options.onAnimationComplete?.({ open: false });
+  } else {
+    entries = entries.map((item) =>
+      item.id === id ? { ...item, open: false } : item
+    );
+    if (!closeFallbackTimers.has(id)) {
+      closeFallbackTimers.set(
+        id,
+        setTimeout(() => {
+          closeFallbackTimers.delete(id);
+          const pendingEntry = entries.find((item) => item.id === id);
+          if (!pendingEntry) {
+            return;
+          }
+          finishNativeSheetRegistryEntry(id, 'programmatic');
+          pendingEntry.options.onAnimationComplete?.({ open: false });
+        }, PRESENTATION_CLOSE_FALLBACK_MS)
+      );
+    }
+  }
+  emitChange();
+}
+
+export function markNativeSheetRegistryEntryPresentationRequested(id: number) {
+  entries = entries.map((entry) =>
+    entry.id === id && !entry.presentationRequested
+      ? { ...entry, presentationRequested: true }
+      : entry
+  );
+}
+
+export function finishNativeSheetRegistryEntry(
+  id: number,
+  reason: NativeSheetDismissReason
+) {
+  const entry = entries.find((item) => item.id === id);
+  if (!entry) {
+    return;
+  }
+  clearCloseFallbackTimer(id);
+  if (entry.open) {
+    entry.options.onOpenChange?.(false);
+  }
+  entries = entries.filter((item) => item.id !== id);
+  entry.options.onDismiss?.(reason);
+  emitChange();
+}
+
+export function finishAllNativeSheetRegistryEntries(
+  reason: NativeSheetDismissReason
+) {
+  const currentEntries = entries;
+  if (!currentEntries.length) {
+    return;
+  }
+  entries = [];
+  currentEntries.forEach((entry) => {
+    clearCloseFallbackTimer(entry.id);
+    if (entry.open) {
+      entry.options.onOpenChange?.(false);
+    }
+    entry.options.onDismiss?.(reason);
+    entry.options.onAnimationComplete?.({ open: false });
+  });
+  emitChange();
+}
+
+export function requestSecurityDismissAllNativeSheets() {
+  if (!entries.length) {
+    return;
+  }
+  const unpresentedEntries = entries.filter(
+    (entry) => !entry.presentationRequested
+  );
+  const presentedEntries = entries.filter(
+    (entry) => entry.presentationRequested
+  );
+  unpresentedEntries.forEach((entry) => {
+    if (entry.open) {
+      entry.options.onOpenChange?.(false);
+    }
+    entry.options.onDismiss?.('security');
+    entry.options.onAnimationComplete?.({ open: false });
+  });
+  entries = presentedEntries.map((entry) => {
+    if (entry.open) {
+      entry.options.onOpenChange?.(false);
+      return { ...entry, open: false };
+    }
+    return entry;
+  });
+  emitChange();
+  if (!entries.length) {
+    return;
+  }
+  if (securityFallbackTimer) {
+    clearTimeout(securityFallbackTimer);
+  }
+  securityFallbackTimer = setTimeout(() => {
+    securityFallbackTimer = undefined;
+    finishAllNativeSheetRegistryEntries('security');
+  }, 500);
+}
+
+export function setNativeSheetRegistryBlocked(blocked: boolean) {
+  registryBlocked = blocked;
+  if (blocked) {
+    requestSecurityDismissAllNativeSheets();
+  }
+}
+
+export function resetNativeSheetRegistryForTests() {
+  if (securityFallbackTimer) {
+    clearTimeout(securityFallbackTimer);
+    securityFallbackTimer = undefined;
+  }
+  closeFallbackTimers.forEach(clearTimeout);
+  closeFallbackTimers.clear();
+  entries = [];
+  nextId = 1;
+  registryBlocked = false;
+  listeners.clear();
+}

package/src/index.tsx

@@ -1,13 +1,20 @@
 import {
   createContext,
+  type ReactNode,
   type PropsWithChildren,
   useCallback,
   useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
 } from 'react';
 
 import {
   type ColorValue,
   type NativeSyntheticEvent,
+  type LayoutChangeEvent,
   StyleSheet,
   useWindowDimensions,
   View,
@@ -17,6 +24,19 @@ import RNCNativeSheet, {
   type NativeSheetDismissEvent,
   type NativeSheetPresentedEvent,
 } from './NativeSheetNativeComponent';
+import {
+  resolveNativeSheetHeight,
+  resolveNativeSheetLayoutConstraints,
+} from './NativeSheetHeight';
+import {
+  addNativeSheetRegistryEntry,
+  closeNativeSheetRegistryEntry,
+  finishNativeSheetRegistryEntry,
+  getNativeSheetRegistrySnapshot,
+  markNativeSheetRegistryEntryPresentationRequested,
+  setNativeSheetRegistryBlocked,
+  subscribeNativeSheetRegistry,
+} from './NativeSheetRegistry';
 
 export type NativeSheetDismissReason =
   | 'back'
@@ -30,14 +50,27 @@ export interface NativeSheetProps extends PropsWithChildren {
   /** Controls whether the sheet is presented. */
   open: boolean;
   /**
-   * Fixed outer height for this presentation, in points/dp. Content updates do
-   * not change this value, so asynchronously loaded children cannot resize the
-   * native sheet mid-transition.
+   * Outer height in points/dp. Changes while open animate the native surface
+   * from its bottom edge. When omitted, settled content-size changes update the
+   * native height automatically.
    */
-  height: number;
+  height?: number;
+  /** Maximum auto-fit height. Defaults to 92% of the current window height. */
+  maxHeight?: number;
   onDismiss?: (reason: NativeSheetDismissReason) => void;
   onPresented?: (height: number) => void;
+  onAnimationComplete?: (info: NativeSheetAnimationInfo) => void;
+  /** Matches the React Native Sheet callback for controlled open state. */
+  onOpenChange?: (open: boolean) => void;
+  /** Matches the React Native Sheet drag-dismiss option. */
+  dismissOnSnapToBottom?: boolean;
+  /** Disables the native drag gesture. */
+  disableDrag?: boolean;
+  /** @deprecated Use dismissOnSnapToBottom. */
   dismissOnPanDown?: boolean;
+  /** Matches the React Native Sheet overlay-dismiss option. */
+  dismissOnOverlayPress?: boolean;
+  /** @deprecated Use dismissOnOverlayPress. */
   dismissOnBackdropPress?: boolean;
   dismissOnBackPress?: boolean;
   showHandle?: boolean;
@@ -47,6 +80,31 @@ export interface NativeSheetProps extends PropsWithChildren {
   testID?: string;
 }
 
+export type NativeSheetAnimationInfo = Readonly<{ open: boolean }>;
+
+export interface NativeSheetShowControls {
+  close: () => void;
+}
+
+export interface NativeSheetShowOptions
+  extends Omit<
+    NativeSheetProps,
+    'children' | 'open' | 'onDismiss' | 'onOpenChange'
+  > {
+  renderContent: ReactNode | ((controls: NativeSheetShowControls) => ReactNode);
+  onOpenChange?: (open: boolean) => void;
+  onDismiss?: (reason: NativeSheetDismissReason) => void;
+  onAnimationComplete?: (info: NativeSheetAnimationInfo) => void;
+}
+
+export interface NativeSheetShowHandle {
+  close: () => void;
+}
+
+interface NativeSheetInternalProps extends NativeSheetProps {
+  onPresentationRequested?: () => void;
+}
+
 const NativeSheetSecurityContext = createContext(false);
 
 /**
@@ -58,6 +116,10 @@ export function NativeSheetSecurityProvider({
   blocked,
   children,
 }: PropsWithChildren<{ blocked: boolean }>) {
+  useEffect(() => {
+    setNativeSheetRegistryBlocked(blocked);
+    return () => setNativeSheetRegistryBlocked(false);
+  }, [blocked]);
   return (
     <NativeSheetSecurityContext.Provider value={blocked}>
       {children}
@@ -71,45 +133,161 @@ export function NativeSheetSecurityProvider({
  * Fabric mounts the same child view into the platform sheet without serializing
  * business content through the native bridge.
  */
-export function NativeSheet({
+function NativeSheetComponent({
   open,
   height,
+  maxHeight,
   children,
   onDismiss,
   onPresented,
-  dismissOnPanDown = true,
-  dismissOnBackdropPress = false,
+  onAnimationComplete,
+  onOpenChange,
+  dismissOnSnapToBottom,
+  disableDrag = false,
+  dismissOnPanDown,
+  dismissOnOverlayPress,
+  dismissOnBackdropPress,
   dismissOnBackPress = true,
   showHandle = true,
   cornerRadius = 32,
   dimAmount = 0.4,
   backgroundColor,
   testID,
-}: NativeSheetProps) {
+  onPresentationRequested,
+}: NativeSheetInternalProps) {
   const securityBlocked = useContext(NativeSheetSecurityContext);
-  const { width } = useWindowDimensions();
+  const { height: windowHeight, width } = useWindowDimensions();
+  const [measurement, setMeasurement] = useState<{
+    height: number;
+    openCycle: number;
+  }>();
+  const lockedHeightRef = useRef<number | undefined>(undefined);
+  const dismissNotifiedRef = useRef(false);
+  const wasOpenRef = useRef(false);
+  const openCycleRef = useRef(0);
+  const explicitHeightForOpenRef = useRef(false);
+  if (open && !wasOpenRef.current) {
+    openCycleRef.current += 1;
+    dismissNotifiedRef.current = false;
+    explicitHeightForOpenRef.current = height !== undefined;
+  } else if (open && height !== undefined) {
+    explicitHeightForOpenRef.current = true;
+  }
+  wasOpenRef.current = open;
+  const shouldAutoMeasure = !explicitHeightForOpenRef.current;
+  const resolvedMaxHeight = maxHeight ?? Math.floor(windowHeight * 0.92);
+  if (open) {
+    lockedHeightRef.current = resolveNativeSheetHeight({
+      currentHeight: lockedHeightRef.current,
+      explicitHeight: height,
+      measuredHeight:
+        measurement?.openCycle === openCycleRef.current
+          ? measurement.height
+          : undefined,
+      maxHeight: resolvedMaxHeight,
+      shouldAutoMeasure,
+    });
+  }
+  const lockedHeight = lockedHeightRef.current;
+  const resolvedDismissOnPanDown =
+    !disableDrag && (dismissOnSnapToBottom ?? dismissOnPanDown ?? true);
+  const resolvedDismissOnBackdropPress =
+    dismissOnOverlayPress ?? dismissOnBackdropPress ?? false;
+  const layoutConstraints = useMemo(
+    () =>
+      resolveNativeSheetLayoutConstraints({
+        lockedHeight,
+        maxHeight: resolvedMaxHeight,
+        shouldAutoMeasure,
+      }),
+    [lockedHeight, resolvedMaxHeight, shouldAutoMeasure]
+  );
 
+  const notifyDismiss = useCallback(
+    (reason: NativeSheetDismissReason) => {
+      if (dismissNotifiedRef.current) {
+        return;
+      }
+      dismissNotifiedRef.current = true;
+      lockedHeightRef.current = undefined;
+      onOpenChange?.(false);
+      onDismiss?.(reason);
+      onAnimationComplete?.({ open: false });
+    },
+    [onAnimationComplete, onDismiss, onOpenChange]
+  );
   const handleDismiss = useCallback(
     (event: NativeSyntheticEvent<NativeSheetDismissEvent>) => {
-      onDismiss?.(event.nativeEvent.reason as NativeSheetDismissReason);
+      notifyDismiss(event.nativeEvent.reason as NativeSheetDismissReason);
     },
-    [onDismiss]
+    [notifyDismiss]
   );
+  useEffect(() => {
+    if (!securityBlocked || !open) {
+      return;
+    }
+    // Native normally acknowledges the no-animation security dismissal. This
+    // fallback also covers an open request blocked before native presentation.
+    const timer = setTimeout(() => notifyDismiss('security'), 500);
+    return () => clearTimeout(timer);
+  }, [notifyDismiss, open, securityBlocked]);
+  useEffect(() => {
+    if (open && lockedHeight && !securityBlocked) {
+      onPresentationRequested?.();
+    }
+  }, [lockedHeight, onPresentationRequested, open, securityBlocked]);
   const handlePresented = useCallback(
     (event: NativeSyntheticEvent<NativeSheetPresentedEvent>) => {
       onPresented?.(event.nativeEvent.height);
+      onAnimationComplete?.({ open: true });
     },
-    [onPresented]
+    [onAnimationComplete, onPresented]
+  );
+  const handleContentLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (!open || !shouldAutoMeasure) {
+        return;
+      }
+      const nextHeight = Math.ceil(event.nativeEvent.layout.height);
+      if (nextHeight > 0) {
+        const nextMeasurement = {
+          height: Math.min(nextHeight, resolvedMaxHeight),
+          openCycle: openCycleRef.current,
+        };
+        setMeasurement((currentMeasurement) => {
+          if (
+            currentMeasurement?.height === nextMeasurement.height &&
+            currentMeasurement.openCycle === nextMeasurement.openCycle
+          ) {
+            return currentMeasurement;
+          }
+          return nextMeasurement;
+        });
+      }
+    },
+    [open, resolvedMaxHeight, shouldAutoMeasure]
+  );
+  const hostStyle = useMemo(
+    () => [
+      styles.stagingHost,
+      {
+        width,
+        ...(layoutConstraints.hostHeight !== undefined
+          ? { height: layoutConstraints.hostHeight }
+          : { maxHeight: layoutConstraints.hostMaxHeight }),
+      },
+    ],
+    [layoutConstraints, width]
   );
 
   return (
     <RNCNativeSheet
       testID={testID}
-      open={open}
-      sheetHeight={height}
+      open={open && Boolean(lockedHeight)}
+      sheetHeight={lockedHeight ?? 1}
       securityBlocked={securityBlocked}
-      dismissOnPanDown={dismissOnPanDown}
-      dismissOnBackdropPress={dismissOnBackdropPress}
+      dismissOnPanDown={resolvedDismissOnPanDown}
+      dismissOnBackdropPress={resolvedDismissOnBackdropPress}
       dismissOnBackPress={dismissOnBackPress}
       showHandle={showHandle}
       cornerRadius={cornerRadius}
@@ -117,15 +295,108 @@ export function NativeSheet({
       sheetBackgroundColor={backgroundColor}
       onDismiss={handleDismiss}
       onPresented={handlePresented}
-      style={[styles.stagingHost, { width, height }]}
+      style={hostStyle}
     >
-      <View pointerEvents="auto" style={styles.content} collapsable={false}>
-        {children}
+      <View
+        key={`open-cycle-${openCycleRef.current}`}
+        pointerEvents="auto"
+        style={layoutConstraints.shouldFillHost ? styles.content : undefined}
+        collapsable={false}
+      >
+        {shouldAutoMeasure ? (
+          <View
+            collapsable={false}
+            style={styles.autoMeasureContent}
+            onLayout={handleContentLayout}
+          >
+            {children}
+          </View>
+        ) : (
+          children
+        )}
       </View>
     </RNCNativeSheet>
   );
 }
 
+function showNativeSheet(
+  options: NativeSheetShowOptions
+): NativeSheetShowHandle {
+  let id: number | undefined;
+  let closeRequestedBeforeRegistration = false;
+  const close = () => {
+    if (id === undefined) {
+      closeRequestedBeforeRegistration = true;
+      return;
+    }
+    closeNativeSheetRegistryEntry(id);
+  };
+  const content =
+    typeof options.renderContent === 'function'
+      ? options.renderContent({ close })
+      : options.renderContent;
+  id = addNativeSheetRegistryEntry(options, content);
+  if (closeRequestedBeforeRegistration) {
+    closeNativeSheetRegistryEntry(id);
+  }
+  return { close };
+}
+
+function NativeSheetHostEntry({
+  entry,
+}: {
+  entry: ReturnType<typeof getNativeSheetRegistrySnapshot>[number];
+}) {
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) {
+        closeNativeSheetRegistryEntry(entry.id);
+      }
+    },
+    [entry.id]
+  );
+  const handleDismiss = useCallback(
+    (reason: NativeSheetDismissReason) =>
+      finishNativeSheetRegistryEntry(entry.id, reason),
+    [entry.id]
+  );
+  const handlePresentationRequested = useCallback(
+    () => markNativeSheetRegistryEntryPresentationRequested(entry.id),
+    [entry.id]
+  );
+  return (
+    <NativeSheetComponent
+      {...entry.options}
+      open={entry.open}
+      onOpenChange={handleOpenChange}
+      onPresented={entry.options.onPresented}
+      onPresentationRequested={handlePresentationRequested}
+      onDismiss={handleDismiss}
+    >
+      {entry.content}
+    </NativeSheetComponent>
+  );
+}
+
+export function NativeSheetHost() {
+  const entries = useSyncExternalStore(
+    subscribeNativeSheetRegistry,
+    getNativeSheetRegistrySnapshot,
+    getNativeSheetRegistrySnapshot
+  );
+  return (
+    <>
+      {entries.map((entry) => (
+        <NativeSheetHostEntry key={entry.id} entry={entry} />
+      ))}
+    </>
+  );
+}
+
+export const NativeSheet: ((props: NativeSheetProps) => ReactNode) & {
+  show: typeof showNativeSheet;
+} = Object.assign(NativeSheetComponent, { show: showNativeSheet });
+
 const styles = StyleSheet.create({
   stagingHost: {
     position: 'absolute',
@@ -136,6 +407,10 @@ const styles = StyleSheet.create({
   content: {
     flex: 1,
   },
+  autoMeasureContent: {
+    alignSelf: 'stretch',
+    flexShrink: 0,
+  },
 });
 
 export type {