@cdx-ui/components 0.0.1-beta.140 → 0.0.1-beta.142

package/src/components/picker/surfaces.tsx

@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode, type RefObject } from 'react';
+import { ScrollView, View } from 'react-native';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import {
+  OverlayContainer,
+  useAnchorPosition,
+  useDismissOverlay,
+  useEscapeKey,
+  useOverlayPosition,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { Dialog } from '../Dialog';
+import { BottomSheet, useBottomSheet, type BottomSheetModalProps } from '../BottomSheet';
+import { PICKER_POPOVER_Z_INDEX, pickerPopoverContentVariants } from './styles';
+
+// Shared surface wiring for picker compound components.
+
+export function PickerDialogSurface({
+  open,
+  setOpen,
+  registerSurface,
+  children,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  registerSurface: (type: 'dialog') => void;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    registerSurface('dialog');
+  }, [registerSurface]);
+
+  return (
+    <Dialog isOpen={open} onOpenChange={setOpen}>
+      {children}
+    </Dialog>
+  );
+}
+
+type PickerBottomSheetSurfaceProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  registerSurface: (type: 'bottomSheet') => void;
+  children: ReactNode;
+} & Pick<BottomSheetModalProps, 'snapPoints' | 'enableDynamicSizing'>;
+
+export function PickerBottomSheetSurface({
+  open,
+  setOpen,
+  registerSurface,
+  children,
+  snapPoints = ['70%', '90%'],
+  enableDynamicSizing = false,
+}: PickerBottomSheetSurfaceProps) {
+  const { ref, dismiss } = useBottomSheet();
+  const isPresentedRef = useRef(false);
+
+  useEffect(() => {
+    registerSurface('bottomSheet');
+  }, [registerSurface]);
+
+  const handleDismiss = useCallback(() => {
+    isPresentedRef.current = false;
+    setOpen(false);
+  }, [setOpen]);
+
+  const tryPresent = useCallback(() => {
+    if (!open || isPresentedRef.current) {
+      return;
+    }
+    ref.current?.present();
+    isPresentedRef.current = true;
+  }, [open, ref]);
+
+  useEffect(() => {
+    if (!open) {
+      if (isPresentedRef.current) {
+        dismiss();
+        isPresentedRef.current = false;
+      }
+      return;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      tryPresent();
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [dismiss, open, tryPresent]);
+
+  return (
+    <BottomSheet.Modal
+      ref={ref}
+      onDismiss={handleDismiss}
+      snapPoints={snapPoints}
+      enableDynamicSizing={enableDynamicSizing}
+    >
+      <BottomSheet.View onLayout={tryPresent}>{children}</BottomSheet.View>
+    </BottomSheet.Modal>
+  );
+}
+
+interface PickerPopoverSurfaceProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  registerSurface: (type: 'popover') => void;
+  anchorRef: RefObject<View | null>;
+  triggerRef?: RefObject<View | null>;
+  children: ReactNode;
+  className?: string;
+}
+
+export function PickerPopoverSurface({
+  open,
+  setOpen,
+  registerSurface,
+  anchorRef,
+  triggerRef,
+  children,
+  className,
+}: PickerPopoverSurfaceProps) {
+  const contentRef = useRef<View>(null);
+  const [dismissEnabled, setDismissEnabled] = useState(false);
+
+  useEffect(() => {
+    registerSurface('popover');
+  }, [registerSurface]);
+
+  useEffect(() => {
+    if (!open) {
+      setDismissEnabled(false);
+      return;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      setDismissEnabled(true);
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+
+  const dismiss = useCallback(() => setOpen(false), [setOpen]);
+
+  const anchorLayout = useAnchorPosition(anchorRef, open);
+  const position = useOverlayPosition(anchorLayout);
+
+  const excludeRefs = triggerRef ? [anchorRef, triggerRef] : [anchorRef];
+  useDismissOverlay(dismissEnabled, contentRef, excludeRefs, dismiss);
+  useEscapeKey(open, dismiss);
+
+  if (!open || !position) {
+    return null;
+  }
+
+  return (
+    <OverlayContainer
+      onDismiss={dismiss}
+      entering={FadeIn.duration(150)}
+      exiting={FadeOut.duration(100)}
+      style={[position.style, { zIndex: PICKER_POPOVER_Z_INDEX }]}
+    >
+      <View
+        ref={contentRef}
+        className={cn(pickerPopoverContentVariants(), className)}
+        style={{ maxHeight: position.maxHeight }}
+        accessibilityViewIsModal
+      >
+        <ScrollView scrollEventThrottle={16} showsVerticalScrollIndicator={false}>
+          {children}
+        </ScrollView>
+      </View>
+    </OverlayContainer>
+  );
+}