BottomSheetWithSearchInput component

.nvmrc

@@ -0,0 +1 @@
+v22.22.2

__mocks__/@gorhom/bottom-sheet.js

@@ -0,0 +1,54 @@
+/* eslint-disable observation/no-function-without-logging */
+import React from 'react'
+import { TouchableOpacity, View } from 'react-native'
+
+import mockBottomSheet from '@gorhom/bottom-sheet/mock'
+
+class MockBottomSheetModal extends React.Component {
+  snapToIndex() {}
+  snapToPosition() {}
+  expand() {}
+  collapse() {}
+  close() {}
+  forceClose() {}
+  present() {}
+  dismiss() {}
+
+  render() {
+    const mockAnimatedPosition = { value: 0 }
+    return (
+      <>
+        {this.props.children}
+        {this.props.backdropComponent({ animatedPosition: mockAnimatedPosition })}
+      </>
+    )
+  }
+}
+
+class MockBottomSheet extends React.Component {
+  snapToIndex() {}
+  snapToPosition() {}
+  expand() {}
+  collapse() {}
+  close() {
+    this.props.onClose?.()
+  }
+  forceClose() {}
+
+  render() {
+    return (
+      <View testID="bottom-sheet">
+        {this.props.handleComponent?.()}
+        {this.props.children}
+        {this.props.backdropComponent()}
+      </View>
+    )
+  }
+}
+
+module.exports = {
+  __esModule: true,
+  ...mockBottomSheet,
+  default: MockBottomSheet,
+  BottomSheetModal: MockBottomSheetModal,
+}

jest.mocks.js

@@ -3,6 +3,7 @@
 import React from 'react'
 import { Image } from 'react-native'
 import 'react-native-gesture-handler/jestSetup'
+import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock'
 
 // === Globals ===
 
@@ -60,6 +61,15 @@ jest.mock('@fortawesome/react-native-fontawesome', () => {
 
 Image.getSizeWithHeaders = jest.fn(() => Promise.resolve({ width: 0, height: 0 }))
 
+// Mock out configureNext for LayoutAnimation
+jest.mock('react-native/Libraries/LayoutAnimation/LayoutAnimation', () => ({
+  ...jest.requireActual('react-native/Libraries/LayoutAnimation/LayoutAnimation'),
+  configureNext: jest.fn(),
+}))
+
 jest.mock('react-native-worklets', () => require('react-native-worklets/src/mock'))
 
 jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'))
+
+jest.mock('react-native-safe-area-context', () => mockSafeAreaContext)
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.90.0",
+  "version": "1.91.0",
   "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",
@@ -13,6 +13,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.6",
     "@eslint/js": "^9.39.5",
+    "@gorhom/bottom-sheet": ">=5.2.14",
     "@react-native-community/blur": "^4.4.1",
     "@react-native/babel-preset": "0.83.1",
     "@react-native/typescript-config": "0.83.1",
@@ -41,6 +42,7 @@
     "react-native-gesture-handler": "^2.32.0",
     "react-native-reanimated": "4.5.3",
     "react-native-render-html": "^6.3.4",
+    "react-native-safe-area-context": "^5.8.0",
     "react-native-worklets": "0.11.3",
     "react-test-renderer": "19.2.0",
     "ts-jest": "^29.4.6",
@@ -60,13 +62,15 @@
     "src"
   ],
   "peerDependencies": {
+    "@gorhom/bottom-sheet": ">=5.2.9",
     "@react-native-community/blur": ">=4.4.1",
     "@react-navigation/native": "^7.0.0",
     "react": "^19.0.0",
     "react-native": ">=0.83.0",
     "react-native-gesture-handler": ">=2.16.1",
     "react-native-reanimated": ">=4.0.0",
     "react-native-render-html": "^6.1.0",
+    "react-native-safe-area-context": ">=5.7.0",
     "react-native-svg": ">=15.0.0",
     "react-native-worklets": ">=0.8.0"
   },
@@ -107,5 +111,8 @@
         "react-test-renderer"
       ]
     }
+  },
+  "resolutions": {
+    "react-is": "19.2.3"
   }
 }

src/components/BottomSheetWithSearchInput.tsx

@@ -0,0 +1,193 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import { Keyboard, StyleSheet, View } from 'react-native'
+
+import BottomSheet, {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetFlatList,
+  BottomSheetFlatListMethods,
+  BottomSheetTextInput,
+  TouchableOpacity,
+  useBottomSheetTimingConfigs,
+} from '@gorhom/bottom-sheet'
+import { Icon, InputField, ItemSeparator, ListItem, SectionHeader } from '@observation.org/react-native-components'
+import { type Theme, createInputStyles, useStyles, useTheme } from '@observation.org/react-native-components/theme'
+import { useTheme as useNavigationTheme } from '@react-navigation/native'
+import { Easing } from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import useBottomSheetBackHandler from '../hooks/useBottomSheetBackHandler'
+import Log from '../lib/Log'
+import { createBottomSheetStyles } from '../styles/bottomSheet'
+
+type Props = {
+  onClose: () => void
+  onPress: (key: string) => void
+  inputFieldPlaceholder: string
+  data: DataItem[]
+  selectedKey?: string
+  sectionTitle: string
+  children?: React.ReactNode
+  listRef?: React.RefObject<BottomSheetFlatListMethods | null>
+}
+
+type DataItem = {
+  key: string
+  label: string
+}
+
+const Separator = () => <ItemSeparator />
+
+const BottomSheetWithSearchInput = ({
+  onClose,
+  onPress,
+  inputFieldPlaceholder,
+  data,
+  selectedKey,
+  sectionTitle,
+  children,
+  listRef,
+}: Props) => {
+  const theme = useTheme()
+  const inputStyles = createInputStyles(theme)
+  const styles = useMemo(() => createStyles(theme, inputStyles), [theme, inputStyles])
+
+  const [searchString, setSearchString] = useState('')
+  const bottomSheetRef = useRef<BottomSheet>(null)
+  const insets = useSafeAreaInsets()
+  const { colors } = useNavigationTheme()
+  const bottomSheetStyles = useStyles(createBottomSheetStyles)
+  const animationConfigs = useBottomSheetTimingConfigs({
+    duration: theme.animation.duration.medium,
+    easing: Easing.in(Easing.quad),
+  })
+
+  useBottomSheetBackHandler(bottomSheetRef)
+
+  const onPressBackdrop = () => {
+    Log.debug('BottomSheetWithSearchInput:onPressBackdrop')
+    Keyboard.dismiss()
+  }
+
+  const backdropComponent = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} onPress={onPressBackdrop} />
+    ),
+    [],
+  )
+
+  const onChange = useCallback((value: string) => {
+    Log.debug('BottomSheetWithSearchInput:onChange', value)
+    setSearchString(value)
+  }, [])
+
+  const onClear = useCallback(() => {
+    Log.debug('BottomSheetWithSearchInput:onClear')
+    setSearchString('')
+  }, [])
+
+  const handlePress = useCallback(
+    (item: DataItem) => {
+      Log.debug('BottomSheetWithSearchInput:handlePress', item)
+      Keyboard.dismiss()
+      onPress(item.key)
+      bottomSheetRef.current?.close()
+    },
+    [onPress],
+  )
+
+  const filteredData = useMemo(
+    () => data.filter((item) => item.label.toLowerCase().startsWith(searchString.toLowerCase())),
+    [data, searchString],
+  )
+
+  const listHeader = useMemo(
+    () => (
+      <View style={styles.headerContainer}>
+        {children}
+        <InputField
+          textInputComponent={BottomSheetTextInput}
+          containerStyle={styles.inputContainer}
+          inputStyle={styles.input}
+          inputProps={{
+            testID: 'textInput',
+            autoCorrect: false,
+            placeholder: inputFieldPlaceholder,
+            value: searchString,
+            onChangeText: onChange,
+          }}
+          rightIcon={
+            <TouchableOpacity
+              style={styles.iconButtonContainer}
+              onPress={onClear}
+              testID="clearButton"
+              activeOpacity={0.5}
+            >
+              <Icon
+                name="circle-xmark"
+                style="solid"
+                color={theme.color.icon.system.subtler}
+                size={theme.icon.size.s}
+              />
+            </TouchableOpacity>
+          }
+        />
+        <SectionHeader title={sectionTitle} />
+      </View>
+    ),
+    [children, sectionTitle, searchString, onChange, onClear, styles, theme],
+  )
+
+  return (
+    <BottomSheet
+      ref={bottomSheetRef}
+      enablePanDownToClose
+      onClose={onClose}
+      backdropComponent={backdropComponent}
+      animationConfigs={animationConfigs}
+      snapPoints={['80%']}
+      enableDynamicSizing={false}
+      handleIndicatorStyle={bottomSheetStyles.handleIndicator}
+      handleStyle={[bottomSheetStyles.handle, { backgroundColor: colors.card }]}
+      keyboardBehavior="extend"
+    >
+      <BottomSheetFlatList<DataItem>
+        ref={listRef}
+        data={filteredData}
+        keyExtractor={(item) => item.key}
+        ItemSeparatorComponent={Separator}
+        keyboardDismissMode="on-drag"
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={{ paddingBottom: insets.bottom, backgroundColor: colors.card }}
+        ListHeaderComponent={listHeader}
+        stickyHeaderIndices={[0]}
+        renderItem={({ item }) => (
+          <ListItem label={item.label} selected={item.key === selectedKey} onPress={() => handlePress(item)} />
+        )}
+      />
+    </BottomSheet>
+  )
+}
+
+export default BottomSheetWithSearchInput
+
+const createStyles = (theme: Theme, inputStyles: ReturnType<typeof createInputStyles>) => {
+  const styles = StyleSheet.create({
+    headerContainer: {
+      backgroundColor: theme.color.background.system.surfaceRaised,
+    },
+    inputContainer: {
+      marginHorizontal: theme.margin.half,
+      marginTop: theme.margin.common,
+      backgroundColor: theme.color.background.system.surfaceBase,
+    },
+    input: {
+      ...theme.text.input,
+      ...inputStyles.input,
+    },
+    iconButtonContainer: {
+      paddingRight: theme.margin.common,
+    },
+  })
+  return styles
+}