@cdx-ui/components 0.3.2 → 0.3.4

package/src/components/picker/surfaces.tsx

@@ -1,6 +1,7 @@
 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 { BottomSheetTextInput } from '@gorhom/bottom-sheet';
 import {
   dataAttributes,
   OverlayContainer,
@@ -41,23 +42,40 @@ export function PickerDialogSurface({
 type PickerBottomSheetSurfaceProps = {
   open: boolean;
   setOpen: (open: boolean) => void;
-  registerSurface: (type: 'bottomSheet') => void;
+  registerSurface?: (type: 'bottomSheet') => void;
+  /**
+   * Lays the children out in a container that fills the sheet, so a fixed header can sit above a
+   * `BottomSheet.ScrollView`. By default the children size a `BottomSheet.View`.
+   */
+  fill?: boolean;
   children: ReactNode;
-} & Pick<BottomSheetModalProps, 'snapPoints' | 'enableDynamicSizing'>;
+} & Pick<
+  BottomSheetModalProps,
+  'snapPoints' | 'enableDynamicSizing' | 'keyboardBehavior' | 'keyboardBlurBehavior' | 'accessible'
+>;
+
+/**
+ * Text input for a picker sheet. It registers with the sheet's keyboard handling, which moves
+ * the sheet for a focused `BottomSheetTextInput` only; a plain `TextInput` stays under the
+ * keyboard.
+ */
+export const PickerSheetTextInput = BottomSheetTextInput;
 
 export function PickerBottomSheetSurface({
   open,
   setOpen,
   registerSurface,
+  fill = false,
   children,
   snapPoints = ['70%', '90%'],
   enableDynamicSizing = false,
+  ...modalProps
 }: PickerBottomSheetSurfaceProps) {
   const { ref, dismiss } = useBottomSheet();
   const isPresentedRef = useRef(false);
 
   useEffect(() => {
-    registerSurface('bottomSheet');
+    registerSurface?.('bottomSheet');
   }, [registerSurface]);
 
   const handleDismiss = useCallback(() => {
@@ -95,8 +113,15 @@ export function PickerBottomSheetSurface({
       onDismiss={handleDismiss}
       snapPoints={snapPoints}
       enableDynamicSizing={enableDynamicSizing}
+      {...modalProps}
     >
-      <BottomSheet.View onLayout={tryPresent}>{children}</BottomSheet.View>
+      {fill ? (
+        <View className="flex-1" onLayout={tryPresent}>
+          {children}
+        </View>
+      ) : (
+        <BottomSheet.View onLayout={tryPresent}>{children}</BottomSheet.View>
+      )}
     </BottomSheet.Modal>
   );
 }