@bigbinary/neetoui-rn 2.3.4 → 3.0.0

package/src/components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,468 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentType,
+  type ReactNode,
+  type Ref,
+} from "react";
+import {
+  Keyboard,
+  StyleSheet as RNStyleSheet,
+  View,
+  type FlatList,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { Check } from "@bigbinary/neeto-icons-rn";
+import {
+  BottomSheetBackdrop,
+  BottomSheetFlatList,
+  BottomSheetModal,
+  type BottomSheetBackdropProps,
+  type BottomSheetModalProps,
+} from "@gorhom/bottom-sheet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { Divider } from "../Divider";
+import { Loader } from "../Loader";
+import { SearchBar, type SearchBarProps } from "../SearchBar";
+import { Touchable } from "../Touchable";
+import { Typography } from "../Typography";
+
+/**
+ * Contract every v2 ContentRow already satisfies — unchanged, so the 42
+ * existing call sites keep their row components as-is.
+ */
+export type BottomSheetContentRowProps<T> = {
+  item: T;
+  index: number;
+  isSelected: boolean;
+  onPress: () => void;
+};
+
+export type BottomSheetProps<T> = {
+  isVisible: boolean;
+  /** Called whenever the sheet should close (backdrop, swipe, item press). */
+  hide: () => void;
+  data?: T[];
+  onItemPress?: (args: { index: number; item: T }) => void;
+  selectedItem?: T | null;
+  title?: string;
+  /**
+   * "checkbox" keeps the sheet open on item press and shows a Done button
+   * in the header (v2 behavior).
+   */
+  contentType?: "checkbox" | null;
+  onDonePress?: () => void;
+  ContentRow?: ComponentType<BottomSheetContentRowProps<T>>;
+  /** Rendered below the list, above the no-results / create-option rows. */
+  children?: ReactNode;
+  canSearch?: boolean;
+  searchBarProps?: SearchBarProps;
+  labelExtractor?: (item: T, index?: number) => string | undefined;
+  valueExtractor?: (item: T) => unknown;
+  shouldShowItemSeparator?: boolean;
+  shouldHideKeyboardOnScrollBegin?: boolean;
+  disabled?: boolean;
+  showCreateOption?: boolean;
+  showCreateOptionLoader?: boolean;
+  createOptionLabel?: string;
+  onPressCreateOption?: (searchText: string) => void;
+  CreateItemComponent?: ComponentType<{ searchText: string }>;
+  noResultsLabel?: string;
+  NoResultsComponent?: ComponentType;
+  onBackdropPress?: () => void;
+  maxHeight?: number;
+  style?: StyleProp<ViewStyle>;
+  titleContainerStyle?: StyleProp<ViewStyle>;
+  titleTextStyle?: StyleProp<TextStyle>;
+  flatListRef?: Ref<FlatList<T>>;
+  /** Escape hatch into @gorhom/bottom-sheet (replaces v2's modalParams). */
+  sheetProps?: Partial<BottomSheetModalProps>;
+};
+
+const DefaultContentRow = ({
+  label,
+  isSelected,
+  onPress,
+}: {
+  label: string;
+  isSelected: boolean;
+  onPress: () => void;
+}) => {
+  const { theme } = useUnistyles();
+
+  return (
+    <Touchable
+      accessibilityRole="button"
+      accessibilityState={{ selected: isSelected }}
+      style={styles.defaultRow}
+      onPress={onPress}
+    >
+      <Typography weight={isSelected ? "semibold" : undefined}>
+        {label}
+      </Typography>
+      {isSelected && (
+        <Check color={theme.colors.primary} size={moderateScale(20)} />
+      )}
+    </Touchable>
+  );
+};
+
+const ItemSeparator = () => <Divider style={styles.separator} />;
+
+export const BottomSheet = <T,>({
+  isVisible,
+  hide,
+  data = [],
+  onItemPress,
+  selectedItem,
+  title,
+  contentType,
+  onDonePress,
+  ContentRow,
+  children,
+  canSearch = false,
+  searchBarProps,
+  labelExtractor,
+  valueExtractor,
+  shouldShowItemSeparator = true,
+  shouldHideKeyboardOnScrollBegin = true,
+  disabled = false,
+  showCreateOption = false,
+  showCreateOptionLoader = false,
+  createOptionLabel,
+  onPressCreateOption,
+  CreateItemComponent,
+  noResultsLabel,
+  NoResultsComponent,
+  onBackdropPress,
+  maxHeight,
+  style,
+  titleContainerStyle,
+  titleTextStyle,
+  flatListRef,
+  sheetProps,
+}: BottomSheetProps<T>) => {
+  const { theme } = useUnistyles();
+  const insets = useSafeAreaInsets();
+  const sheetRef = useRef<BottomSheetModal>(null);
+  const [searchText, setSearchText] = useState("");
+
+  const isVisibleRef = useRef(isVisible);
+  isVisibleRef.current = isVisible;
+  const hasPresentedRef = useRef(false);
+
+  useEffect(() => {
+    if (isVisible) {
+      hasPresentedRef.current = true;
+      sheetRef.current?.present();
+    } else if (hasPresentedRef.current) {
+      // Never dismiss() a modal that was never presented: gorhom marks it
+      // DISMISSING, which makes the next present() unmount immediately.
+      sheetRef.current?.dismiss();
+    }
+    setSearchText("");
+  }, [isVisible]);
+
+  // Gesture-driven closes (swipe down, backdrop tap, Android back) end here;
+  // hand control back to the owner so its isVisible state stays in sync.
+  const handleDismiss = useCallback(() => {
+    setSearchText("");
+    if (!isVisibleRef.current) return;
+
+    hide();
+
+    // The sheet is controlled: gorhom closed it natively and React never
+    // heard about it, so only the owner clearing isVisible keeps the two in
+    // sync. If hide() does not do that, the next `setIsVisible(true)` is a
+    // no-op on an unchanged value — no re-render, no present(), and the
+    // sheet silently never reopens. Warn rather than re-present, which
+    // would fight the swipe the user just made.
+    if (__DEV__) {
+      setTimeout(() => {
+        if (!isVisibleRef.current) return;
+
+        // eslint-disable-next-line no-console
+        console.warn(
+          "neetoui-rn: BottomSheet was dismissed by a gesture but isVisible is still true. " +
+            "hide() must clear the state driving isVisible, or the sheet will not reopen."
+        );
+      }, 0);
+    }
+  }, [hide]);
+
+  const getLabel = useCallback(
+    // v2 fallback chain (label prop → extractor → item itself), || on
+    // purpose: empty-string labels fall through exactly as in v2.
+    (item: T, index: number): string =>
+      String(
+        (item as { label?: unknown })?.label ||
+          labelExtractor?.(item, index) ||
+          item
+      ),
+    [labelExtractor]
+  );
+
+  const generatedData = useMemo(() => {
+    if (!searchText.length) return data;
+
+    return data.filter((item, index) =>
+      getLabel(item, index).toLowerCase().includes(searchText.toLowerCase())
+    );
+  }, [data, getLabel, searchText]);
+
+  // v2: hide the create row once an exact (case-insensitive) match exists.
+  const hasExactMatch = useMemo(
+    () =>
+      generatedData.some(
+        (item, index) =>
+          getLabel(item, index).toLocaleLowerCase() ===
+          searchText.toLocaleLowerCase()
+      ),
+    [generatedData, getLabel, searchText]
+  );
+
+  // Presence checks rather than || chains: a row whose value is 0, "" or
+  // false is a legitimate value, and falling through to the item itself
+  // made those rows compare by object identity and never match.
+  const resolveValue = useCallback(
+    (candidate: T | null | undefined): unknown => {
+      if (candidate === null || candidate === undefined) return candidate;
+
+      if (typeof candidate === "object" && "value" in candidate) {
+        const { value } = candidate as { value?: unknown };
+        if (value !== undefined) return value;
+      }
+
+      const extracted = valueExtractor?.(candidate);
+
+      return extracted === undefined ? candidate : extracted;
+    },
+    [valueExtractor]
+  );
+
+  const isSelected = useCallback(
+    (item: T) => resolveValue(item) === resolveValue(selectedItem),
+    [resolveValue, selectedItem]
+  );
+
+  const renderBackdrop = useCallback(
+    (backdropProps: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...backdropProps}
+        appearsOnIndex={0}
+        disappearsOnIndex={-1}
+        pressBehavior="close"
+        onPress={onBackdropPress}
+      />
+    ),
+    [onBackdropPress]
+  );
+
+  const header =
+    title || canSearch ? (
+      <View style={[styles.header, titleContainerStyle]}>
+        <View style={styles.titleRow}>
+          {!!title && (
+            <Typography style={titleTextStyle} variant="modalHeader">
+              {title}
+            </Typography>
+          )}
+          {!!contentType && (
+            <Touchable
+              accessibilityRole="button"
+              onPress={() => {
+                hide();
+                onDonePress?.();
+              }}
+            >
+              <Typography style={styles.doneLabel} variant="modalHeader">
+                Done
+              </Typography>
+            </Touchable>
+          )}
+        </View>
+        {canSearch && (
+          <SearchBar
+            debounceDelay={200}
+            placeholder="Search"
+            showCancelButton={false}
+            onCancel={() => setSearchText("")}
+            onChangeText={setSearchText}
+            {...searchBarProps}
+          />
+        )}
+      </View>
+    ) : null;
+
+  const showNoResults =
+    !!searchText && !generatedData.length && !showCreateOption;
+
+  const footer = (
+    <View>
+      {children}
+      {showNoResults &&
+        (NoResultsComponent ? (
+          <NoResultsComponent />
+        ) : (
+          <View style={styles.noResults}>
+            <Typography size="s" style={styles.mutedLabel} weight="semibold">
+              {noResultsLabel || "No options found"}
+            </Typography>
+          </View>
+        ))}
+      {!disabled &&
+        !hasExactMatch &&
+        (showCreateOptionLoader ? (
+          <Loader color={theme.colors.primary} />
+        ) : (
+          !!searchText &&
+          showCreateOption &&
+          (CreateItemComponent ? (
+            <CreateItemComponent searchText={searchText} />
+          ) : (
+            <Touchable
+              accessibilityRole="button"
+              style={styles.createRow}
+              onPress={() => onPressCreateOption?.(searchText)}
+            >
+              <Typography size="s" style={styles.mutedLabel}>
+                {createOptionLabel || `Create ${searchText} option`}
+              </Typography>
+            </Touchable>
+          ))
+        ))}
+    </View>
+  );
+
+  return (
+    <BottomSheetModal
+      backdropComponent={renderBackdrop}
+      backgroundStyle={styles.sheetBackground}
+      handleIndicatorStyle={styles.handleIndicator}
+      keyboardBehavior="interactive"
+      keyboardBlurBehavior="restore"
+      maxDynamicContentSize={maxHeight}
+      ref={sheetRef}
+      {...sheetProps}
+      // After the spread, and composed rather than replaced: this is the
+      // only channel through which a gesture close reaches the owner, so an
+      // escape-hatch onDismiss must not be able to displace it.
+      onDismiss={() => {
+        handleDismiss();
+        sheetProps?.onDismiss?.();
+      }}
+    >
+      <BottomSheetFlatList
+        data={generatedData}
+        keyboardShouldPersistTaps="handled"
+        // Keyed by value where there is one: with search filtering, index
+        // keys re-key every surviving row on each keystroke and remount a
+        // stateful ContentRow.
+        keyExtractor={(item, index) => {
+          const value = resolveValue(item);
+
+          return typeof value === "string" || typeof value === "number"
+            ? String(value)
+            : String(index);
+        }}
+        ListFooterComponent={footer}
+        ListHeaderComponent={header}
+        ref={flatListRef as never}
+        showsVerticalScrollIndicator={false}
+        stickyHeaderIndices={header ? [0] : undefined}
+        ItemSeparatorComponent={shouldShowItemSeparator ? ItemSeparator : null}
+        // Single flattened object, never an array: gorhom's content-container
+        // hook runs it through StyleSheet.compose, which rejects arrays on
+        // react-native-web. No theme tokens in here, so flattening is safe.
+        contentContainerStyle={RNStyleSheet.flatten([
+          {
+            paddingHorizontal: moderateScale(16),
+            paddingBottom: insets.bottom + moderateScale(16),
+          },
+          style,
+        ])}
+        renderItem={({ item, index }) => {
+          const selected = isSelected(item);
+          const onPress = () => {
+            // v2 order: close first (unless checkbox mode), then notify.
+            if (!contentType) hide();
+            onItemPress?.({ index, item });
+          };
+
+          return ContentRow ? (
+            <ContentRow
+              index={index}
+              isSelected={selected}
+              item={item}
+              onPress={onPress}
+            />
+          ) : (
+            <DefaultContentRow
+              isSelected={selected}
+              label={getLabel(item, index)}
+              onPress={onPress}
+            />
+          );
+        }}
+        onScrollBeginDrag={
+          shouldHideKeyboardOnScrollBegin ? () => Keyboard.dismiss() : undefined
+        }
+      />
+    </BottomSheetModal>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  sheetBackground: {
+    backgroundColor: theme.colors.background.primary,
+    borderTopLeftRadius: moderateScale(20),
+    borderTopRightRadius: moderateScale(20),
+  },
+  handleIndicator: {
+    backgroundColor: theme.colors.palette.grey400,
+  },
+  separator: {
+    backgroundColor: theme.colors.palette.grey200,
+  },
+  header: {
+    backgroundColor: theme.colors.background.primary,
+    gap: moderateScale(16),
+    paddingBottom: moderateScale(12),
+  },
+  titleRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  doneLabel: {
+    color: theme.colors.palette.purple500,
+  },
+  defaultRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: moderateScale(8),
+    justifyContent: "space-between",
+    minHeight: moderateScale(44),
+  },
+  createRow: {
+    alignItems: "center",
+    height: moderateScale(40),
+    justifyContent: "center",
+  },
+  noResults: {
+    alignItems: "center",
+    marginBottom: moderateScale(2),
+    paddingVertical: moderateScale(2),
+  },
+  mutedLabel: {
+    color: theme.colors.text.secondary,
+  },
+}));

package/src/components/BottomSheet/index.ts

@@ -0,0 +1,5 @@
+export {
+  BottomSheet,
+  type BottomSheetProps,
+  type BottomSheetContentRowProps,
+} from "./BottomSheet";

package/src/components/BottomSheetMenu/BottomSheetMenu.tsx

@@ -0,0 +1,150 @@
+import { type ComponentType, type ReactNode } from "react";
+import { Pressable, View } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { BottomSheet } from "../BottomSheet";
+import { Typography } from "../Typography";
+
+export type BottomSheetMenuItem = {
+  key: string;
+  label: string;
+  icon?: ComponentType<{ size?: number; color?: string }>;
+  /** Raw color override for icon + label (e.g. destructive red). */
+  color?: string;
+  disabled?: boolean;
+  onPress?: () => void;
+};
+
+export type BottomSheetMenuProps = {
+  isVisible: boolean;
+  onClose: () => void;
+  items: BottomSheetMenuItem[];
+  onItemPress?: (item: BottomSheetMenuItem) => void;
+  header?: ReactNode;
+  title?: string;
+  cancelLabel?: string;
+};
+
+/**
+ * Action-menu sheet (promoted from neeto-commons-rn, 10 call sites).
+ * Same props; rows render as the sheet's footer content.
+ */
+export const BottomSheetMenu = ({
+  isVisible,
+  onClose,
+  items,
+  onItemPress,
+  header,
+  title,
+  cancelLabel = "Cancel",
+}: BottomSheetMenuProps) => {
+  const { theme } = useUnistyles();
+
+  return (
+    <BottomSheet
+      data={[]}
+      hide={onClose}
+      isVisible={isVisible}
+      shouldShowItemSeparator={false}
+      style={styles.sheetContent}
+      onBackdropPress={onClose}
+    >
+      {!!header && <View style={styles.headerContainer}>{header}</View>}
+      {!!title && (
+        <View style={styles.titleContainer}>
+          <Typography size="m" style={styles.title} weight="medium">
+            {title}
+          </Typography>
+        </View>
+      )}
+      {items.map((item, index) => {
+        const Icon = item.icon;
+        const color = item.color ?? theme.colors.text.primary;
+
+        return (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityState={{ disabled: item.disabled }}
+            disabled={item.disabled}
+            key={item.key}
+            style={[
+              styles.row,
+              item.disabled && styles.disabledRow,
+              index < items.length - 1 && styles.separator,
+            ]}
+            onPress={() => {
+              onClose();
+              onItemPress?.(item);
+              item.onPress?.();
+            }}
+          >
+            {Icon && <Icon color={color} size={moderateScale(20)} />}
+            <Typography color={color} size="m">
+              {item.label}
+            </Typography>
+          </Pressable>
+        );
+      })}
+      {!!cancelLabel && (
+        <Pressable
+          accessibilityRole="button"
+          style={styles.cancelButton}
+          onPress={onClose}
+        >
+          <Typography size="m" weight="semibold">
+            {cancelLabel}
+          </Typography>
+        </Pressable>
+      )}
+    </BottomSheet>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  sheetContent: {
+    paddingHorizontal: 0,
+  },
+  headerContainer: {
+    borderBottomColor: theme.colors.palette.grey200,
+    borderBottomWidth: moderateScale(1.5),
+    paddingBottom: moderateScale(12),
+    paddingHorizontal: moderateScale(16),
+    paddingTop: moderateScale(8),
+  },
+  titleContainer: {
+    borderBottomColor: theme.colors.palette.grey200,
+    borderBottomWidth: moderateScale(1.5),
+    paddingBottom: moderateScale(12),
+    paddingHorizontal: moderateScale(16),
+  },
+  title: {
+    alignSelf: "center",
+    color: theme.colors.text.muted,
+  },
+  row: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: moderateScale(12),
+    paddingHorizontal: moderateScale(16),
+    paddingVertical: moderateScale(14),
+  },
+  disabledRow: {
+    opacity: 0.5,
+  },
+  separator: {
+    borderBottomColor: theme.colors.palette.grey200,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    marginHorizontal: moderateScale(16),
+    paddingHorizontal: 0,
+  },
+  cancelButton: {
+    alignItems: "center",
+    backgroundColor: theme.colors.palette.grey100,
+    borderRadius: theme.radii.lg,
+    justifyContent: "center",
+    marginHorizontal: moderateScale(16),
+    marginTop: moderateScale(16),
+    paddingVertical: moderateScale(14),
+  },
+}));

package/src/components/BottomSheetMenu/index.ts

@@ -0,0 +1,5 @@
+export {
+  BottomSheetMenu,
+  type BottomSheetMenuItem,
+  type BottomSheetMenuProps,
+} from "./BottomSheetMenu";