feat: avoid being bottom hidden, creatable and disabled

Author: peter-olom

example/src/App.tsx

@@ -20,6 +20,13 @@ export default function App() {
             <MultiSelect label="Multi Select" />
             <SingleSelect label="Single Select" optionsCount={3} />
             <SingleSelect label="No Options" optionsCount={0} />
+            <MultiSelect label="Creatable Select" creatable />
+            <MultiSelect
+              label="Disabled Select"
+              optionsCount={10}
+              defaults={['value-3', 'value-7']}
+              disabled
+            />
           </View>
         </SafeAreaView>
       </SafeAreaProvider>
@@ -29,7 +36,6 @@ export default function App() {
 
 interface SingleSelectProps {
   label: string;
-  zIndex?: number;
   optionsCount?: number;
 }
 function SingleSelect({ label, optionsCount = 50 }: SingleSelectProps) {
@@ -48,6 +54,7 @@ function SingleSelect({ label, optionsCount = 50 }: SingleSelectProps) {
         onChangeValue={setOptions}
         placeholder="Select Option"
         searchPlaceholder="Search Available Options"
+        searchPlaceholderTextColor="gray"
         listTitle="Options"
         reverse
       />
@@ -58,9 +65,18 @@ function SingleSelect({ label, optionsCount = 50 }: SingleSelectProps) {
 interface MultiSelectProps {
   label: string;
   optionsCount?: number;
+  creatable?: boolean;
+  disabled?: boolean;
+  defaults?: string[];
 }
-function MultiSelect({ label, optionsCount = 50 }: MultiSelectProps) {
-  const [options, setOptions] = useState<string[]>([]);
+function MultiSelect({
+  label,
+  optionsCount = 50,
+  creatable,
+  disabled,
+  defaults = [],
+}: MultiSelectProps) {
+  const [options, setOptions] = useState<string[]>(defaults);
 
   return (
     <View style={styles.preview}>
@@ -77,6 +93,9 @@ function MultiSelect({ label, optionsCount = 50 }: MultiSelectProps) {
         placeholder="Select Option"
         searchPlaceholder="Search Available Options"
         listTitle="Options"
+        searchPlaceholderTextColor="gray"
+        createable={creatable}
+        disabled={disabled}
         reverse
         multi
       />
@@ -87,14 +106,14 @@ function MultiSelect({ label, optionsCount = 50 }: MultiSelectProps) {
 const styles = StyleSheet.create({
   main: {
     flex: 1,
-    gap: 8,
-    justifyContent: 'center',
-    alignItems: 'center',
   },
   container: {
+    flex: 1,
     padding: 16,
     gap: 16,
-    marginTop: -180,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignSelf: 'center',
   },
   header: {
     fontSize: 32,

src/components/Anchor.tsx

@@ -12,11 +12,14 @@ import ChevronDownIcon from '../icons/ChevronDownIcon';
 import type { IconStyle, LayoutRect, Option } from '../types';
 import Selections from './Selections';
 import CloseIcon from '../icons/CloseIcon';
+import { StyleSheet } from 'react-native';
 
 interface Props extends Omit<PressableProps, 'onLayout'> {
   placeholder?: string;
   selected: Option[];
   multi: boolean;
+  clearable?: boolean;
+  disabled?: boolean;
   onRemove: (key: string) => void;
   onClear: () => void;
   onLayout: (rect: LayoutRect) => void;
@@ -33,6 +36,8 @@ export default function Anchor({
   placeholder,
   selected,
   multi = false,
+  clearable,
+  disabled,
   onRemove,
   onClear,
   onLayout,
@@ -68,8 +73,14 @@ export default function Anchor({
         height: tokens.size.xl + 4,
         justifyContent: 'center',
       },
+      disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: 'white',
+        opacity: 0.4,
+        borderRadius: tokens.size.xs,
+      },
     }),
-    [selectIconStyle]
+    [selectIconStyle, disabled]
   );
   const ref = useRef<View>(null);
   const onLayoutRef = useRef(onLayout);
@@ -119,7 +130,7 @@ export default function Anchor({
         />
       )}
       <View style={styles.iconContainer}>
-        {selected.length > 0 && (
+        {selected.length > 0 && clearable && !disabled && (
           <Pressable style={styles.closeIconContainer} onPress={onClear}>
             <CloseIcon
               stroke={selectIconStyle?.color ?? '#c5c5c5'}
@@ -132,6 +143,7 @@ export default function Anchor({
           style={styles.icon}
         />
       </View>
+      {disabled && <View style={[StyleSheet.absoluteFill, styles.disabled]} />}
     </Pressable>
   );
 }

src/components/EmptyList.tsx

@@ -1,17 +1,25 @@
 import React from 'react';
 import { Text, View, type TextStyle } from 'react-native';
 import useStyles from '../hooks/useStyles';
+import { Pressable } from 'react-native';
 
 interface Props {
   msg?: string;
   textStyle?: TextStyle;
+  createOption?: string;
+  onCreate?: (value: string) => void;
 }
-export default function EmptyList({ msg, textStyle }: Props) {
+export default function EmptyList({
+  msg,
+  textStyle,
+  createOption,
+  onCreate,
+}: Props) {
   const styles = useStyles(
     ({ tokens: { size } }) => ({
       container: {
         flex: 1,
-        justifyContent: 'center',
+        justifyContent: !createOption ? 'center' : undefined,
         alignItems: 'center',
       },
       text: {
@@ -21,14 +29,29 @@ export default function EmptyList({ msg, textStyle }: Props) {
         textAlign: 'center',
         paddingVertical: size.lg,
       },
+      create: {
+        padding: size.sm,
+        backgroundColor: '#f9f9f9',
+        width: '100%',
+      },
     }),
     []
   );
   return (
     <View style={[styles.container]}>
-      <Text style={[styles.text, textStyle]}>
-        {msg ?? '"No option matched your query"'}
-      </Text>
+      {!createOption && (
+        <Text style={[styles.text, textStyle]}>
+          {msg ?? '"No option matched your search"'}
+        </Text>
+      )}
+      {createOption && (
+        <Pressable
+          style={styles.create}
+          onPress={() => onCreate?.(createOption)}
+        >
+          <Text>Create "{createOption}"</Text>
+        </Pressable>
+      )}
     </View>
   );
 }

src/components/ListContainer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import type { ModalProps } from 'react-native';
 import { Modal, SafeAreaView } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -8,6 +8,8 @@ import { Platform } from 'react-native';
 import { Pressable } from 'react-native';
 import type { AnchorPos } from '../types';
 import { useWindowDimensions } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { MIN_WIDTH } from './common';
 
 interface Props extends ModalProps {
   position?: AnchorPos;
@@ -19,14 +21,22 @@ export default function ListContainer({
   position,
   ...rest
 }: Props) {
-  const { width } = useWindowDimensions();
-  const willBleed = (position?.x ?? 0) + 280 > width;
+  const { width, height } = useWindowDimensions();
+  const [listHeight, setListHeight] = useState(0);
 
+  // will bleed horizontally
+  const willBleed = (position?.x ?? 0) + MIN_WIDTH > width;
   const left = willBleed ? undefined : position?.x ?? 0;
   const right = willBleed
     ? width - ((position?.x ?? 0) + (position?.width ?? 0))
     : undefined;
-  const top = position?.y ?? 0;
+
+  const top = useMemo(() => {
+    if (height - (position?.y ?? 0) < listHeight + 80) {
+      return height - listHeight - 80;
+    }
+    return position?.y ?? 0;
+  }, [height, listHeight, position?.y]);
 
   const styles = useStyles(
     ({ tokens }) => ({
@@ -72,11 +82,32 @@ export default function ListContainer({
     <Modal {...rest}>
       <Pressable style={styles.backdrop} onPress={rest.onRequestClose}>
         <SafeAreaProvider>
-          <SafeAreaView style={[styles.optionsContainer, style]}>
+          <ListContent
+            style={[styles.optionsContainer, style]}
+            onListHeight={setListHeight}
+          >
             <View style={styles.optionsContainerInner}>{children}</View>
-          </SafeAreaView>
+          </ListContent>
         </SafeAreaProvider>
       </Pressable>
     </Modal>
   );
 }
+
+interface Props extends ViewProps {
+  onListHeight?: (height: number) => void;
+}
+function ListContent({ onListHeight, ...rest }: Props) {
+  const [containerRef, setContainerRef] = useState<View | null>(null);
+
+  useEffect(() => {
+    const onViewLayout = () => {
+      containerRef?.measure((_x, _y, _w, h, _pageX, _pageY) => {
+        onListHeight?.(h);
+      });
+    };
+    onViewLayout();
+  }, [containerRef, onListHeight]);
+
+  return <SafeAreaView ref={setContainerRef} {...rest} />;
+}

src/components/SearchBox.tsx

@@ -18,6 +18,7 @@ interface Props extends Omit<TextInputProps, 'style'> {
 export default function SearchBox({
   onBackPress,
   onChangeText,
+  placeholder,
   searchContainerStyle,
   searchInputStyle,
   searchBackIconStyle,
@@ -34,11 +35,14 @@ export default function SearchBox({
         alignItems: 'center',
         paddingHorizontal: size.sm,
       },
+      inputWrapper: {
+        flex: 1,
+        height: size.xl,
+      },
       input: {
         flex: 1,
         backgroundColor: '#f9f9f9',
         borderRadius: size.xs,
-        height: size.xl + 4,
         paddingRight: size.lg,
         paddingLeft: size.sm,
       },
@@ -71,15 +75,18 @@ export default function SearchBox({
           />
         </Pressable>
       )}
-      <TextInput
-        {...rest}
-        ref={ref}
-        style={[styles.input, searchInputStyle]}
-        onChangeText={(v) => {
-          setValue(v);
-          onChangeText?.(v);
-        }}
-      />
+      <Pressable style={styles.inputWrapper}>
+        <TextInput
+          ref={ref}
+          {...rest}
+          placeholder={placeholder ?? 'Search...'}
+          style={[styles.input, searchInputStyle]}
+          onChangeText={(v) => {
+            setValue(v);
+            onChangeText?.(v);
+          }}
+        />
+      </Pressable>
       {!!value && (
         <Pressable onPress={clearText}>
           <Close