@kaisarsofi/react-native-phone-input 1.0.0

package/lib/module/CountryPicker.js

@@ -0,0 +1,665 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Modal, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
+import { groupCountriesByLetter } from "./countries.js";
+import { Flag } from "./Flag.js";
+import { useOptionalSafeAreaInsets } from "./safeArea.js";
+import { usePhoneInputPalette } from "./theme.js";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+const ROW_HEIGHT = 48;
+const HEADER_HEIGHT = 28;
+/** Width reserved on the right for the A-Z index, so list content and the
+ * search box stop at the same place instead of running under it. */
+const SIDEBAR_GUTTER = 32;
+export function CountryPicker({
+  visible,
+  countries,
+  selected,
+  onSelect,
+  onClose,
+  searchPlaceholder = 'Search country or code',
+  disableSearch,
+  renderCountryItem,
+  palette: providedPalette,
+  colorScheme,
+  safeAreaInsets,
+  presentationStyle,
+  groupAlphabetically = true,
+  showAlphabetIndex = true,
+  styles: styleOverrides
+}) {
+  const fallbackPalette = usePhoneInputPalette(colorScheme);
+  const palette = providedPalette ?? fallbackPalette;
+
+  // An explicit prop is applied as given; auto-detected insets are adjusted,
+  // because the ambient value describes the *window*, not this sheet. Inside
+  // an iOS pageSheet/formSheet the system has already inset the top, so
+  // adding the window's top inset there would push the header down by the
+  // notch height for no reason.
+  const ambientInsets = useOptionalSafeAreaInsets();
+  const isIosSheet = Platform.OS === 'ios' && (presentationStyle ?? 'pageSheet') !== 'fullScreen';
+
+  // Read edge by edge rather than depending on the prop object, which callers
+  // naturally write inline.
+  const insetTop = safeAreaInsets?.top;
+  const insetBottom = safeAreaInsets?.bottom;
+  const insetLeft = safeAreaInsets?.left;
+  const insetRight = safeAreaInsets?.right;
+  const insets = useMemo(() => {
+    const auto = ambientInsets ? {
+      ...ambientInsets,
+      top: isIosSheet ? 0 : ambientInsets.top
+    } : null;
+    if (insetTop === undefined && insetBottom === undefined && insetLeft === undefined && insetRight === undefined) {
+      return auto;
+    }
+    // Each edge given explicitly wins; the rest still fall back to the
+    // detected value, so `{ top: 0 }` overrides only the top.
+    return {
+      top: insetTop ?? auto?.top ?? 0,
+      bottom: insetBottom ?? auto?.bottom ?? 0,
+      left: insetLeft ?? auto?.left ?? 0,
+      right: insetRight ?? auto?.right ?? 0
+    };
+  }, [insetTop, insetBottom, insetLeft, insetRight, ambientInsets, isIosSheet]);
+  const [query, setQuery] = useState('');
+  const scrollRef = useRef(null);
+  const sidebarRef = useRef(null);
+  const [activeLetter, setActiveLetter] = useState(null);
+  const sidebarLayout = useRef({
+    y: 0,
+    height: 1
+  });
+  const hideActiveLetterTimer = useRef(null);
+  useEffect(() => () => {
+    if (hideActiveLetterTimer.current) {
+      clearTimeout(hideActiveLetterTimer.current);
+    }
+  }, []);
+
+  // Reset the search when the sheet closes, so reopening it starts on the
+  // full list rather than on whatever was typed last time.
+  useEffect(() => {
+    if (!visible) setQuery('');
+  }, [visible]);
+  const showActiveLetterBriefly = letter => {
+    setActiveLetter(letter);
+    if (hideActiveLetterTimer.current) {
+      clearTimeout(hideActiveLetterTimer.current);
+    }
+    hideActiveLetterTimer.current = setTimeout(() => {
+      setActiveLetter(null);
+      hideActiveLetterTimer.current = null;
+    }, 600);
+  };
+
+  // Every color the picker draws lives here rather than in the StyleSheet
+  // below, which now holds layout only — the two hardcoded light values that
+  // used to sit in `row` and `search` were exactly what made dark mode
+  // unreadable (bright separator lines, a near-white search box).
+  const colors = useMemo(() => ({
+    container: {
+      backgroundColor: palette.background
+    },
+    headerSection: {
+      backgroundColor: palette.background,
+      borderBottomColor: palette.border
+    },
+    searchContainer: {
+      backgroundColor: palette.surface,
+      borderColor: palette.border
+    },
+    search: {
+      color: palette.text
+    },
+    searchIcon: {
+      borderColor: palette.placeholder
+    },
+    searchIconFill: {
+      backgroundColor: palette.placeholder
+    },
+    handle: {
+      backgroundColor: palette.handle
+    },
+    title: {
+      color: palette.text
+    },
+    closeButton: {
+      backgroundColor: palette.surface
+    },
+    closeButtonPressed: {
+      backgroundColor: palette.surfacePressed
+    },
+    closeButtonText: {
+      color: palette.textMuted
+    },
+    rowSeparator: {
+      borderBottomColor: palette.border
+    },
+    rowSelected: {
+      backgroundColor: palette.surface
+    },
+    name: {
+      color: palette.text
+    },
+    dialCode: {
+      color: palette.textMuted
+    },
+    empty: {
+      color: palette.textMuted
+    },
+    sectionHeader: {
+      backgroundColor: palette.background
+    },
+    sectionHeaderText: {
+      color: palette.textMuted
+    },
+    sidebarLetter: {
+      color: palette.accent
+    },
+    sidebarLetterDisabled: {
+      color: palette.disabled
+    },
+    sidebarLetterActive: {
+      color: palette.accentContrast,
+      backgroundColor: palette.accent
+    },
+    bubble: {
+      backgroundColor: palette.bubble
+    },
+    bubbleText: {
+      color: palette.bubbleText
+    }
+  }), [palette]);
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return countries;
+    return countries.filter(c => c.name.toLowerCase().includes(q) || c.dialCode.includes(q.replace(/^\+/, '')) || c.code.toLowerCase().includes(q));
+  }, [countries, query]);
+  const isSearching = !!query.trim();
+
+  // Countries are always grouped into A-Z chunks (unless searching) so the
+  // alphabet index has something to jump to even when section headers
+  // (groupAlphabetically) are turned off — the two are independent: headers
+  // control what's visible in the list, the index controls the sidebar.
+  // `filtered` is the `countries` array itself whenever the query is empty,
+  // so the unsearched sections and the sidebar's letters are the same grouping
+  // — computed once here instead of twice.
+  const allSections = useMemo(() => groupCountriesByLetter(countries), [countries]);
+  const sections = useMemo(() => isSearching ? [{
+    letter: '',
+    data: filtered
+  }] : allSections, [filtered, isSearching, allSections]);
+  const showHeaders = groupAlphabetically && !isSearching;
+
+  // Whether the A-Z gutter is reserved is deliberately independent of the
+  // query: the sidebar itself hides while searching, but the space stays
+  // claimed so the search box and the list don't jump wider mid-keystroke.
+  const reservesSidebar = showAlphabetIndex && allSections.length > 3;
+  const showSidebar = reservesSidebar && !isSearching;
+  const availableLetters = useMemo(() => new Set(sections.map(s => s.letter)), [sections]);
+
+  // Offset of each section header, computed from fixed row/header heights
+  // (styles.row / styles.sectionHeader below) rather than measured via
+  // onLayout — this content isn't virtualized, so the analytical offset is
+  // exact and avoids relying on layout events firing through the Modal.
+  const sectionOffsets = useMemo(() => {
+    const offsets = {};
+    let offset = 0;
+    for (const section of sections) {
+      offsets[section.letter] = offset;
+      if (showHeaders && section.letter) offset += HEADER_HEIGHT;
+      offset += section.data.length * ROW_HEIGHT;
+    }
+    return offsets;
+  }, [sections, showHeaders]);
+  const jumpToLetter = letter => {
+    let target = letter;
+    if (!availableLetters.has(target)) {
+      const forward = ALPHABET.find(l => l >= letter && availableLetters.has(l));
+      const fallback = forward ?? [...ALPHABET].reverse().find(l => availableLetters.has(l));
+      if (!fallback) return;
+      target = fallback;
+    }
+    showActiveLetterBriefly(target);
+    const offset = sectionOffsets[target];
+    if (offset === undefined) return;
+    scrollRef.current?.scrollTo({
+      y: offset,
+      animated: false
+    });
+  };
+  const jumpFromPageY = pageY => {
+    const {
+      height
+    } = sidebarLayout.current;
+    const y = pageY - sidebarLayout.current.y;
+    const idx = Math.min(ALPHABET.length - 1, Math.max(0, Math.floor(y / height * ALPHABET.length)));
+    const letter = ALPHABET[idx];
+    if (letter) jumpToLetter(letter);
+  };
+  const handleSidebarTouch = evt => {
+    jumpFromPageY(evt.nativeEvent.pageY);
+  };
+
+  // react-native-web doesn't synthesize touch events from mouse input, so
+  // onTouchStart/onTouchMove alone never fire for a mouse click/drag — the
+  // sidebar would be entirely inert on web without these. isMouseDown tracks
+  // whether the button is held, mirroring onTouchMove's "only while touching"
+  // behavior, since onMouseMove otherwise fires on hover too.
+  const isMouseDown = useRef(false);
+  const webMouseHandlers = Platform.OS === 'web' ? {
+    onMouseDown: e => {
+      isMouseDown.current = true;
+      jumpFromPageY(e.nativeEvent.pageY);
+    },
+    onMouseMove: e => {
+      if (isMouseDown.current) jumpFromPageY(e.nativeEvent.pageY);
+    },
+    onMouseUp: () => {
+      isMouseDown.current = false;
+      if (hideActiveLetterTimer.current) {
+        clearTimeout(hideActiveLetterTimer.current);
+        hideActiveLetterTimer.current = null;
+      }
+      setActiveLetter(null);
+    }
+  } : {};
+  const renderRow = useCallback(item => {
+    const isSelected = item.code === selected?.code;
+    const onPress = () => onSelect(item);
+    if (renderCountryItem) {
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: renderCountryItem({
+          item,
+          isSelected,
+          onPress
+        })
+      });
+    }
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      style: ({
+        pressed
+      }) => [styles.row, styleOverrides?.row, isSelected && [styles.rowSelected, colors.rowSelected, styleOverrides?.rowSelected], pressed && styles.rowPressed],
+      accessibilityRole: "button",
+      accessibilityLabel: `${item.name}, +${item.dialCode}`,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.rowInner, colors.rowSeparator],
+        children: [/*#__PURE__*/_jsx(Flag, {
+          country: item,
+          size: 22,
+          style: [styles.flag, styleOverrides?.flag]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.name, colors.name, styleOverrides?.name],
+          numberOfLines: 1,
+          children: item.name
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: [styles.dialCode, colors.dialCode, styleOverrides?.dialCode],
+          children: ["+", item.dialCode]
+        })]
+      })
+    });
+  }, [selected, onSelect, renderCountryItem, styleOverrides, colors]);
+
+  // Memoized separately from the rest of the tree so sidebar drag-scrubbing
+  // (which updates `activeLetter` on every touch move) doesn't force React to
+  // re-render every one of the ~240 rows on each frame — only the sidebar and
+  // the letter bubble, which actually depend on `activeLetter`, do.
+  const listContent = useMemo(() => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [filtered.length === 0 && /*#__PURE__*/_jsx(Text, {
+      style: [styles.empty, colors.empty],
+      children: "No countries found"
+    }), sections.map(section => /*#__PURE__*/_jsxs(View, {
+      children: [showHeaders && section.letter ? /*#__PURE__*/_jsx(View, {
+        style: [styles.sectionHeader, colors.sectionHeader, styleOverrides?.sectionHeader],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.sectionHeaderText, colors.sectionHeaderText, styleOverrides?.sectionHeaderText],
+          children: section.letter
+        })
+      }) : null, section.data.map(item => /*#__PURE__*/_jsx(View, {
+        children: renderRow(item)
+      }, item.code))]
+    }, section.letter || 'all'))]
+  }), [filtered.length, sections, showHeaders, styleOverrides, renderRow, colors]);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    animationType: "slide",
+    onRequestClose: onClose,
+    presentationStyle: Platform.OS === 'ios' ? presentationStyle ?? 'pageSheet' : undefined,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.container, colors.container, insets ? {
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        paddingLeft: insets.left,
+        paddingRight: insets.right
+      } : null, styleOverrides?.container],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: [styles.headerSection, colors.headerSection, styleOverrides?.headerSection],
+        children: [Platform.OS === 'ios' && (presentationStyle ?? 'pageSheet') === 'pageSheet' && /*#__PURE__*/_jsx(View, {
+          style: styles.dragHandleWrap,
+          children: /*#__PURE__*/_jsx(View, {
+            style: [styles.dragHandle, colors.handle]
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          style: [styles.header, styleOverrides?.header],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.title, colors.title, styleOverrides?.title],
+            children: "Select a country"
+          }), /*#__PURE__*/_jsx(Pressable, {
+            onPress: onClose,
+            hitSlop: 8,
+            style: ({
+              pressed
+            }) => [styles.closeButton, colors.closeButton, styleOverrides?.closeButton, pressed && colors.closeButtonPressed],
+            accessibilityRole: "button",
+            accessibilityLabel: "Close",
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.closeButtonText, colors.closeButtonText, styleOverrides?.closeButtonText],
+              children: "\u2715"
+            })
+          })]
+        }), !disableSearch && /*#__PURE__*/_jsxs(View, {
+          style: [styles.searchContainer, reservesSidebar ? styles.searchWithJump : null, colors.searchContainer, styleOverrides?.searchContainer],
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.searchIcon,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [styles.searchIconLens, colors.searchIcon]
+            }), /*#__PURE__*/_jsx(View, {
+              style: [styles.searchIconHandle, colors.searchIconFill]
+            })]
+          }), /*#__PURE__*/_jsx(TextInput, {
+            value: query,
+            onChangeText: setQuery,
+            placeholder: searchPlaceholder,
+            placeholderTextColor: palette.placeholder,
+            style: [styles.search, colors.search, styleOverrides?.search],
+            autoCorrect: false,
+            autoCapitalize: "none",
+            clearButtonMode: "while-editing"
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.body,
+        children: [/*#__PURE__*/_jsx(ScrollView, {
+          ref: scrollRef,
+          keyboardShouldPersistTaps: "handled"
+          // Fallback for when no insets are available: UIKit adds the bottom
+          // inset itself, since the scroll view's frame overlaps the home
+          // indicator but not the notch. Turned off once we pad the
+          // container ourselves, so the two don't stack.
+          ,
+          contentInsetAdjustmentBehavior: insets?.bottom ? 'never' : 'automatic',
+          contentContainerStyle: reservesSidebar ? styles.listContentWithJump : undefined,
+          children: listContent
+        }), showSidebar && /*#__PURE__*/_jsx(View, {
+          ref: sidebarRef,
+          style: styles.sidebar,
+          onLayout: () => {
+            // Measure the sidebar's absolute position in the same
+            // coordinate space as touch events' `pageY` (measure()'s
+            // pageY, not measureInWindow()'s window-relative y, which can
+            // differ by the status bar/safe-area inset) rather than
+            // deriving it from `pageY - locationY` on each touch — that
+            // calculation is unreliable once the touch target is a nested
+            // child (each letter below), which was causing the touch
+            // position -> letter mapping to drift, sometimes badly enough
+            // to land several letters off (e.g. tapping "M" landing on "P").
+            sidebarRef.current?.measure((_x, _y, _w, height, _px, pageY) => {
+              sidebarLayout.current = {
+                y: pageY,
+                height
+              };
+            });
+          },
+          onTouchStart: handleSidebarTouch,
+          onTouchMove: handleSidebarTouch,
+          onTouchEnd: () => {
+            if (hideActiveLetterTimer.current) {
+              clearTimeout(hideActiveLetterTimer.current);
+              hideActiveLetterTimer.current = null;
+            }
+            setActiveLetter(null);
+          },
+          ...webMouseHandlers,
+          children: ALPHABET.map(letter => /*#__PURE__*/_jsx(View, {
+            style: styles.sidebarLetterTouchable,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.sidebarLetter, colors.sidebarLetter, styleOverrides?.sidebarLetter, !availableLetters.has(letter) && colors.sidebarLetterDisabled, activeLetter === letter && [styles.sidebarLetterActive, colors.sidebarLetterActive, styleOverrides?.sidebarLetterActive]],
+              children: letter
+            })
+          }, letter))
+        }), activeLetter && /*#__PURE__*/_jsx(View, {
+          style: [styles.bubble, colors.bubble],
+          pointerEvents: "none",
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.bubbleText, colors.bubbleText],
+            children: activeLetter
+          })
+        })]
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  dragHandleWrap: {
+    alignItems: 'center',
+    paddingTop: 8
+  },
+  dragHandle: {
+    width: 36,
+    height: 5,
+    borderRadius: 3
+  },
+  // Title + search read as one block, ruled off from the list, instead of the
+  // search floating loose above the first section band.
+  headerSection: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    // Sits above the list so the shadow falls over the rows scrolling beneath
+    // it, which separates the two far better than a line on its own.
+    zIndex: 1,
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOpacity: 0.06,
+        shadowRadius: 8,
+        shadowOffset: {
+          width: 0,
+          height: 3
+        }
+      },
+      android: {
+        elevation: 3
+      },
+      default: {}
+    })
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 16
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '700'
+  },
+  closeButton: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  closeButtonText: {
+    fontSize: 14,
+    fontWeight: '700'
+  },
+  searchContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginLeft: 20,
+    marginRight: 20,
+    marginBottom: 14,
+    paddingHorizontal: 12,
+    height: 48,
+    borderRadius: 12,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  searchIcon: {
+    width: 15,
+    height: 15,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  searchIconLens: {
+    width: 11,
+    height: 11,
+    borderRadius: 6,
+    borderWidth: 1.5,
+    position: 'absolute',
+    top: 0,
+    left: 0
+  },
+  searchIconHandle: {
+    position: 'absolute',
+    width: 1.5,
+    height: 6,
+    borderRadius: 1,
+    right: 1,
+    bottom: 0,
+    transform: [{
+      rotate: '-45deg'
+    }]
+  },
+  search: {
+    flex: 1,
+    minWidth: 0,
+    paddingVertical: 0,
+    fontSize: 16,
+    ...(Platform.OS === 'web' ? {
+      outlineStyle: 'none'
+    } : null),
+    ...(Platform.OS === 'android' ? {
+      textAlignVertical: 'center',
+      includeFontPadding: false
+    } : null)
+  },
+  searchWithJump: {
+    marginRight: 20 + SIDEBAR_GUTTER
+  },
+  body: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  listContentWithJump: {
+    paddingRight: SIDEBAR_GUTTER
+  },
+  row: {
+    height: ROW_HEIGHT,
+    flexDirection: 'row',
+    paddingLeft: 20
+  },
+  rowInner: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingRight: 20,
+    gap: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  rowSelected: {},
+  rowPressed: {
+    opacity: 0.6
+  },
+  flag: {
+    marginRight: 0
+  },
+  name: {
+    flex: 1,
+    fontSize: 16
+  },
+  dialCode: {
+    fontSize: 16
+  },
+  empty: {
+    textAlign: 'center',
+    marginTop: 32
+  },
+  sectionHeader: {
+    height: HEADER_HEIGHT,
+    justifyContent: 'flex-end',
+    paddingHorizontal: 20,
+    paddingBottom: 4
+  },
+  sectionHeaderText: {
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 0.6
+  },
+  sidebar: {
+    // Inset from top/bottom (rather than padding the content box) so the
+    // measured height used by handleSidebarTouch still matches exactly what
+    // the flex:1 letters occupy — padding would leave the touch math using a
+    // taller box than the letters actually fill, reintroducing the same
+    // mismatch fixed above. The larger bottom inset keeps "Z" clear of the
+    // safe-area edge/home indicator instead of sitting flush against it.
+    position: 'absolute',
+    // On web, a visible OS scrollbar can render on top of a sidebar pinned
+    // to the very edge (browsers reserve/overlay scrollbar width there),
+    // eating its clicks — inset it clear of that on web specifically.
+    right: Platform.OS === 'web' ? 14 : 0,
+    top: 8,
+    bottom: 28,
+    width: 28,
+    alignItems: 'stretch',
+    ...(Platform.OS === 'web' ? {
+      cursor: 'pointer'
+    } : null)
+  },
+  // Each letter gets an equal flex share of the sidebar's full height, so
+  // its rendered slice matches exactly what `handleSidebarTouch` computes
+  // (`floor((y / height) * 26)`) — with the old center-packed layout, the 26
+  // letters occupied a short block in the middle of a much taller container,
+  // so a touch position mapped from the FULL height landed on the wrong
+  // letter (sometimes several letters off) almost everywhere except near the
+  // exact center.
+  sidebarLetterTouchable: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  sidebarLetter: {
+    fontSize: 12,
+    fontWeight: '600',
+    lineHeight: Platform.OS === 'ios' ? 15 : 17,
+    textAlign: 'center'
+  },
+  sidebarLetterActive: {
+    borderRadius: 6,
+    overflow: 'hidden'
+  },
+  bubble: {
+    position: 'absolute',
+    right: 40,
+    top: '45%',
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  bubbleText: {
+    fontSize: 28,
+    fontWeight: '700'
+  }
+});
+//# sourceMappingURL=CountryPicker.js.map