@elik56a/react-native-pickers 0.0.0-stage → 0.1.1

package/src/date/DateWheelPicker.tsx

@@ -0,0 +1,149 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { MultiWheelPicker } from '../wheel/MultiWheelPicker';
+import type { MultiWheelSlot, WheelColumn } from '../wheel/MultiWheelPicker';
+import { clampDate, daysInMonth, getMonthNames, isOutOfRange } from '../utils/date';
+import type { SlotStyles, ThemableProps } from '../types';
+
+export type DatePart = 'day' | 'month' | 'year';
+
+export interface DateWheelPickerProps extends ThemableProps {
+  value?: Date;
+  defaultValue?: Date;
+  onChange?: (date: Date) => void;
+  onValueChanging?: (date: Date) => void;
+  locale?: string;
+  minDate?: Date;
+  maxDate?: Date;
+  /** Column order. Default: from locale (e.g. M/D/Y for en-US, D/M/Y for he) */
+  order?: DatePart[];
+  /** 'long' (January), 'short' (Jan) or 'numeric' (01). Default: 'long' */
+  monthFormat?: 'long' | 'short' | 'numeric';
+  /** Years when no min/max is given. Default: ±100 from today */
+  yearRange?: [number, number];
+  /** Loop the day and month wheels. Default: true */
+  loop?: boolean;
+  itemHeight?: number;
+  visibleItems?: number;
+  variant?: '3d' | 'flat';
+  style?: StyleProp<ViewStyle>;
+  styles?: SlotStyles<MultiWheelSlot>;
+  testID?: string;
+}
+
+function localeOrder(locale?: string): DatePart[] {
+  try {
+    const parts = new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'long', year: 'numeric' }).formatToParts(new Date(2021, 10, 23));
+    const order = parts.map((p) => p.type).filter((t): t is DatePart => t === 'day' || t === 'month' || t === 'year');
+    if (order.length === 3) return order;
+  } catch {
+    // fall through
+  }
+  return ['month', 'day', 'year'];
+}
+
+export function DateWheelPicker({
+  value,
+  defaultValue,
+  onChange,
+  onValueChanging,
+  locale,
+  minDate,
+  maxDate,
+  order,
+  monthFormat = 'long',
+  yearRange,
+  loop = true,
+  itemHeight,
+  visibleItems,
+  variant,
+  style,
+  styles,
+  theme,
+  testID,
+}: DateWheelPickerProps) {
+  const [inner, setInner] = useState<Date>(() => clampDate(value ?? defaultValue ?? new Date(), minDate, maxDate));
+  const date = value ?? inner;
+  const y = date.getFullYear();
+  const m = date.getMonth();
+  const d = date.getDate();
+  const cols = order ?? localeOrder(locale);
+  const now = new Date();
+  const minY = minDate?.getFullYear() ?? yearRange?.[0] ?? now.getFullYear() - 100;
+  const maxY = maxDate?.getFullYear() ?? yearRange?.[1] ?? now.getFullYear() + 100;
+
+  const make = useCallback(
+    (patch: { y?: number; m?: number; d?: number }) => {
+      const ny = patch.y ?? y;
+      const nm = patch.m ?? m;
+      const nd = Math.min(patch.d ?? d, daysInMonth(ny, nm));
+      const out = new Date(date);
+      out.setFullYear(ny, nm, nd);
+      return clampDate(out, minDate, maxDate);
+    },
+    [d, date, m, maxDate, minDate, y]
+  );
+
+  const commit = useCallback(
+    (next: Date) => {
+      if (value === undefined) setInner(next);
+      onChange?.(next);
+    },
+    [onChange, value]
+  );
+
+  const columns = useMemo(() => {
+    const monthNames = monthFormat === 'numeric' ? null : getMonthNames(locale, monthFormat);
+    const handlers = (pick: (v: number) => Date) => ({
+      onChange: (v: number) => commit(pick(v)),
+      onValueChanging: onValueChanging ? (v: number) => onValueChanging(pick(v)) : undefined,
+    });
+    const all: Record<DatePart, WheelColumn<number>> = {
+      day: {
+        key: 'day',
+        items: Array.from({ length: daysInMonth(y, m) }, (_, i) => ({
+          value: i + 1,
+          label: String(i + 1).padStart(monthFormat === 'numeric' ? 2 : 1, '0'),
+          disabled: isOutOfRange(new Date(y, m, i + 1), minDate, maxDate),
+        })),
+        value: d,
+        loop,
+        flex: 0.8,
+        ...handlers((v) => make({ d: v })),
+      },
+      month: {
+        key: 'month',
+        items: Array.from({ length: 12 }, (_, i) => ({
+          value: i,
+          label: monthNames ? monthNames[i]! : String(i + 1).padStart(2, '0'),
+          disabled: isOutOfRange(new Date(y, i, daysInMonth(y, i)), minDate, null) || isOutOfRange(new Date(y, i, 1), null, maxDate),
+        })),
+        value: m,
+        loop,
+        flex: monthFormat === 'long' ? 1.6 : 1,
+        ...handlers((v) => make({ m: v })),
+      },
+      year: {
+        key: 'year',
+        items: Array.from({ length: maxY - minY + 1 }, (_, i) => minY + i),
+        value: y,
+        flex: 1,
+        ...handlers((v) => make({ y: v })),
+      },
+    };
+    return cols.map((c) => all[c]);
+  }, [cols, commit, d, locale, loop, m, make, maxDate, maxY, minDate, minY, monthFormat, onValueChanging, y]);
+
+  return (
+    <MultiWheelPicker
+      columns={columns}
+      itemHeight={itemHeight}
+      visibleItems={visibleItems}
+      variant={variant}
+      style={style}
+      styles={styles}
+      theme={theme}
+      testID={testID}
+    />
+  );
+}

package/src/emoji/EmojiPicker.tsx

@@ -0,0 +1,410 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { FlatList, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+import { textStyle, usePickerTheme } from '../theme';
+import type { PickerTheme } from '../theme';
+import type { SlotStyles, ThemableProps } from '../types';
+import {
+  DEFAULT_CATEGORY_ICONS,
+  DEFAULT_CATEGORY_LABELS,
+  EMOJI_CATEGORIES,
+  findEmoji,
+  getAllEmojis,
+  searchEmojis,
+  withSkinTone,
+} from './emojis';
+import type { Emoji, EmojiCategory, SkinTone } from './emojis';
+import { OwnScroll } from '../utils/OwnScroll';
+
+type SectionKey = EmojiCategory | 'recent' | 'search';
+
+export type EmojiPickerSlot =
+  | 'container'
+  | 'header'
+  | 'searchInput'
+  | 'skinToneButton'
+  | 'skinToneMenu'
+  | 'categoryBar'
+  | 'categoryTab'
+  | 'activeCategoryTab'
+  | 'categoryIndicator'
+  | 'sectionHeader'
+  | 'sectionHeaderText'
+  | 'emojiCell'
+  | 'emojiText'
+  | 'empty'
+  | 'emptyText';
+
+export interface EmojiPickerProps extends ThemableProps {
+  onSelect: (emoji: string, data: Emoji) => void;
+  /** Emojis per row. Default: 8 */
+  columns?: number;
+  /** Font size of emojis. Default: ~60% of the cell */
+  emojiSize?: number;
+  /** Height of the picker. Default: 380 */
+  height?: number;
+  /** Which categories to show, in order */
+  categories?: EmojiCategory[];
+  /** Emoji characters to hide */
+  exclude?: string[];
+  /** Hide emojis newer than this Emoji version (older Android can't render them). */
+  maxEmojiVersion?: number;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  showCategoryBar?: boolean;
+  categoryBarPosition?: 'top' | 'bottom';
+  showSectionHeaders?: boolean;
+  categoryLabels?: Partial<Record<SectionKey, string>>;
+  categoryIcons?: Partial<Record<EmojiCategory | 'recent', React.ReactNode>>;
+  /** Controlled skin tone (0 default, 1–5 light → dark) */
+  skinTone?: SkinTone;
+  defaultSkinTone?: SkinTone;
+  onSkinToneChange?: (tone: SkinTone) => void;
+  showSkinTones?: boolean;
+  /** Recently used emojis (characters). Persist with onRecentChange. */
+  recent?: string[];
+  defaultRecent?: string[];
+  onRecentChange?: (recent: string[]) => void;
+  showRecent?: boolean;
+  maxRecent?: number;
+  renderEmoji?: (emoji: string, data: Emoji, size: number) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  styles?: SlotStyles<EmojiPickerSlot>;
+  testID?: string;
+}
+
+type Row = { type: 'header'; key: SectionKey } | { type: 'emojis'; items: Emoji[]; section: SectionKey };
+
+const HEADER_H = 32;
+const TONE_SWATCH = ['✋', '✋🏻', '✋🏼', '✋🏽', '✋🏾', '✋🏿'];
+
+export function EmojiPicker({
+  onSelect,
+  columns = 8,
+  emojiSize,
+  height = 380,
+  categories = EMOJI_CATEGORIES,
+  exclude,
+  maxEmojiVersion,
+  searchable = true,
+  searchPlaceholder = 'Search emoji',
+  emptyText = 'No emoji found',
+  showCategoryBar = true,
+  categoryBarPosition = 'top',
+  showSectionHeaders = true,
+  categoryLabels,
+  categoryIcons,
+  skinTone: skinToneProp,
+  defaultSkinTone = 0,
+  onSkinToneChange,
+  showSkinTones = true,
+  recent: recentProp,
+  defaultRecent = [],
+  onRecentChange,
+  showRecent = true,
+  maxRecent = 24,
+  renderEmoji,
+  style,
+  styles: slots,
+  theme: themeOverride,
+  testID,
+}: EmojiPickerProps) {
+  const theme = usePickerTheme(themeOverride);
+  const c = theme.colors;
+  const [width, setWidth] = useState(0);
+  const [query, setQuery] = useState('');
+  const [toneMenu, setToneMenu] = useState(false);
+  const [innerTone, setInnerTone] = useState<SkinTone>(defaultSkinTone);
+  const tone = skinToneProp ?? innerTone;
+  const [innerRecent, setInnerRecent] = useState<string[]>(defaultRecent);
+  const recent = recentProp ?? innerRecent;
+  const [active, setActive] = useState<SectionKey>(categories[0] ?? 'smileys');
+  const listRef = useRef<FlatList<Row>>(null);
+  const jumping = useRef(false);
+
+  const cell = width > 0 ? Math.floor(width / columns) : 40;
+  const fontSize = emojiSize ?? Math.round(cell * 0.62);
+  const labels = { ...DEFAULT_CATEGORY_LABELS, ...categoryLabels };
+  const icons = { ...DEFAULT_CATEGORY_ICONS, ...categoryIcons };
+
+  const pool = useMemo(() => {
+    const ex = exclude ? new Set(exclude) : null;
+    const cats = new Set(categories);
+    return getAllEmojis().filter(
+      (e) => cats.has(e.category) && (maxEmojiVersion === undefined || e.version <= maxEmojiVersion) && !(ex && ex.has(e.emoji))
+    );
+  }, [categories, exclude, maxEmojiVersion]);
+
+  const recentEmojis = useMemo(
+    () => recent.map((ch) => findEmoji(ch)).filter((e): e is Emoji => !!e && pool.includes(e)),
+    [pool, recent]
+  );
+
+  const sections = useMemo(() => {
+    if (query.trim()) return [{ key: 'search' as SectionKey, items: searchEmojis(query, pool) }];
+    const out: { key: SectionKey; items: Emoji[] }[] = [];
+    if (showRecent && recentEmojis.length) out.push({ key: 'recent', items: recentEmojis });
+    for (const cat of categories) {
+      const items = pool.filter((e) => e.category === cat);
+      if (items.length) out.push({ key: cat, items });
+    }
+    return out;
+  }, [categories, pool, query, recentEmojis, showRecent]);
+
+  // Flatten into rows with known heights so we can jump to categories.
+  const { rows, offsets, headerIndex } = useMemo(() => {
+    const rows: Row[] = [];
+    const offsets: number[] = [];
+    const headerIndex = new Map<SectionKey, number>();
+    let y = 0;
+    for (const sec of sections) {
+      if (showSectionHeaders || sec.key !== 'search') {
+        headerIndex.set(sec.key, rows.length);
+        if (showSectionHeaders) {
+          rows.push({ type: 'header', key: sec.key });
+          offsets.push(y);
+          y += HEADER_H;
+        }
+      }
+      for (let i = 0; i < sec.items.length; i += columns) {
+        if (!showSectionHeaders && i === 0) headerIndex.set(sec.key, rows.length);
+        rows.push({ type: 'emojis', items: sec.items.slice(i, i + columns), section: sec.key });
+        offsets.push(y);
+        y += cell;
+      }
+    }
+    return { rows, offsets, headerIndex };
+  }, [cell, columns, sections, showSectionHeaders]);
+
+  const rowLength = useCallback((r: Row) => (r.type === 'header' ? HEADER_H : cell), [cell]);
+
+  const select = useCallback(
+    (e: Emoji) => {
+      const ch = withSkinTone(e, tone);
+      onSelect(ch, e);
+      if (showRecent) {
+        const next = [e.emoji, ...recent.filter((r) => findEmoji(r) !== e)].slice(0, maxRecent);
+        if (recentProp === undefined) setInnerRecent(next);
+        onRecentChange?.(next);
+      }
+    },
+    [maxRecent, onRecentChange, onSelect, recent, recentProp, showRecent, tone]
+  );
+
+  const setTone = (t: SkinTone) => {
+    if (skinToneProp === undefined) setInnerTone(t);
+    onSkinToneChange?.(t);
+    setToneMenu(false);
+  };
+
+  const jumpTo = (key: SectionKey) => {
+    const idx = headerIndex.get(key);
+    if (idx === undefined) return;
+    setActive(key);
+    jumping.current = true;
+    listRef.current?.scrollToOffset({ offset: offsets[idx] ?? 0, animated: true });
+    setTimeout(() => (jumping.current = false), 450);
+  };
+
+  const onScroll = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (jumping.current || query) return;
+      const y = e.nativeEvent.contentOffset.y + 4;
+      // binary search the row at y
+      let lo = 0;
+      let hi = offsets.length - 1;
+      while (lo < hi) {
+        const mid = (lo + hi + 1) >> 1;
+        if (offsets[mid]! <= y) lo = mid;
+        else hi = mid - 1;
+      }
+      const r = rows[lo];
+      const key = r ? (r.type === 'header' ? r.key : r.section) : undefined;
+      if (key && key !== active) setActive(key);
+    },
+    [active, offsets, query, rows]
+  );
+
+  const onLayout = (e: LayoutChangeEvent) => setWidth(e.nativeEvent.layout.width);
+
+  const renderRow = ({ item }: { item: Row }) => {
+    if (item.type === 'header') {
+      return (
+        <View style={[{ height: HEADER_H, justifyContent: 'flex-end', paddingHorizontal: 4, paddingBottom: 6 }, slots?.sectionHeader]}>
+          <Text style={[textStyle(theme, 'xs', 'bold'), { color: c.textSecondary }, slots?.sectionHeaderText]}>{labels[item.key]}</Text>
+        </View>
+      );
+    }
+    return (
+      <View style={s.row}>
+        {item.items.map((e) => (
+          <EmojiCell
+            key={e.emoji}
+            e={e}
+            ch={withSkinTone(e, tone)}
+            size={cell}
+            fontSize={fontSize}
+            theme={theme}
+            slots={slots}
+            renderEmoji={renderEmoji}
+            onPress={select}
+          />
+        ))}
+      </View>
+    );
+  };
+
+  const categoryBar = showCategoryBar && !query && (
+    <View style={[s.bar, { borderColor: c.border }, categoryBarPosition === 'top' ? { borderBottomWidth: StyleSheet.hairlineWidth } : { borderTopWidth: StyleSheet.hairlineWidth }, slots?.categoryBar]}>
+      {(['recent', ...categories] as const)
+        .filter((k) => headerIndex.has(k))
+        .map((k) => {
+          const on = active === k;
+          const icon = icons[k as EmojiCategory | 'recent'];
+          return (
+            <Pressable
+              key={k}
+              onPress={() => jumpTo(k)}
+              accessibilityRole="tab"
+              accessibilityLabel={labels[k]}
+              accessibilityState={{ selected: on }}
+              style={[s.tab, slots?.categoryTab, on && slots?.activeCategoryTab]}
+            >
+              {typeof icon === 'string' ? <Text style={{ fontSize: 18, opacity: on ? 1 : 0.45 }}>{icon}</Text> : icon}
+              <View
+                style={[
+                  s.tabIndicator,
+                  { backgroundColor: on ? c.primary : 'transparent', [categoryBarPosition === 'top' ? 'bottom' : 'top']: 0 },
+                  slots?.categoryIndicator,
+                ]}
+              />
+            </Pressable>
+          );
+        })}
+    </View>
+  );
+
+  return (
+    <View style={[{ height, backgroundColor: c.background }, style, slots?.container]} testID={testID}>
+      {(searchable || showSkinTones) && (
+        <View style={[s.header, { paddingHorizontal: theme.spacing.sm, paddingTop: theme.spacing.sm, gap: theme.spacing.sm }, slots?.header]}>
+          {searchable ? (
+            <TextInput
+              value={query}
+              onChangeText={(t) => {
+                setQuery(t);
+                listRef.current?.scrollToOffset({ offset: 0, animated: false });
+              }}
+              placeholder={searchPlaceholder}
+              placeholderTextColor={c.textSecondary}
+              autoCorrect={false}
+              autoCapitalize="none"
+              clearButtonMode="while-editing"
+              accessibilityLabel={searchPlaceholder}
+              style={[
+                textStyle(theme, 'md'),
+                s.flex,
+                { backgroundColor: c.surface, borderRadius: theme.radius.md, paddingHorizontal: theme.spacing.md, height: 40 },
+                slots?.searchInput,
+              ]}
+            />
+          ) : (
+            <View style={s.flex} />
+          )}
+          {showSkinTones && (
+            <Pressable
+              onPress={() => setToneMenu((v) => !v)}
+              accessibilityRole="button"
+              accessibilityLabel="Skin tone"
+              style={[s.toneBtn, { backgroundColor: c.surface, borderRadius: theme.radius.md }, slots?.skinToneButton]}
+            >
+              <Text style={{ fontSize: 20 }}>{TONE_SWATCH[tone]}</Text>
+            </Pressable>
+          )}
+        </View>
+      )}
+      {toneMenu && (
+        <View style={[s.toneMenu, { marginHorizontal: theme.spacing.sm, backgroundColor: c.surface, borderRadius: theme.radius.md }, slots?.skinToneMenu]}>
+          {TONE_SWATCH.map((sw, i) => (
+            <Pressable
+              key={i}
+              onPress={() => setTone(i as SkinTone)}
+              accessibilityRole="button"
+              accessibilityState={{ selected: i === tone }}
+              style={[s.toneOpt, { borderRadius: theme.radius.sm, backgroundColor: i === tone ? c.primaryMuted : 'transparent' }]}
+            >
+              <Text style={{ fontSize: 22 }}>{sw}</Text>
+            </Pressable>
+          ))}
+        </View>
+      )}
+      {categoryBarPosition === 'top' && categoryBar}
+      <View style={[s.flex, { paddingHorizontal: theme.spacing.xs }]} onLayout={onLayout}>
+        {width > 0 && (
+          <OwnScroll>
+            <FlatList
+              ref={listRef}
+              data={rows}
+              renderItem={renderRow}
+              keyExtractor={(r, i) => (r.type === 'header' ? `h-${r.key}` : `r-${r.section}-${i}`)}
+              getItemLayout={(_, i) => ({ index: i, length: rows[i] ? rowLength(rows[i]!) : cell, offset: offsets[i] ?? 0 })}
+              onScroll={onScroll}
+              scrollEventThrottle={32}
+              keyboardShouldPersistTaps="handled"
+              initialNumToRender={Math.ceil(height / cell) + 2}
+              maxToRenderPerBatch={8}
+              windowSize={7}
+              ListEmptyComponent={
+                <View style={[{ padding: theme.spacing.xl, alignItems: 'center' }, slots?.empty]}>
+                  <Text style={[textStyle(theme, 'md'), { color: c.textSecondary }, slots?.emptyText]}>{emptyText}</Text>
+                </View>
+              }
+            />
+          </OwnScroll>
+        )}
+      </View>
+      {categoryBarPosition === 'bottom' && categoryBar}
+    </View>
+  );
+}
+
+interface CellProps {
+  e: Emoji;
+  ch: string;
+  size: number;
+  fontSize: number;
+  theme: PickerTheme;
+  slots?: SlotStyles<EmojiPickerSlot>;
+  renderEmoji?: (emoji: string, data: Emoji, size: number) => React.ReactNode;
+  onPress: (e: Emoji) => void;
+}
+
+const EmojiCell = memo(function EmojiCell({ e, ch, size, fontSize, theme, slots, renderEmoji, onPress }: CellProps) {
+  return (
+    <Pressable
+      onPress={() => onPress(e)}
+      accessibilityRole="button"
+      accessibilityLabel={e.name}
+      style={({ pressed }) => [
+        { width: size, height: size, alignItems: 'center', justifyContent: 'center', borderRadius: theme.radius.sm },
+        pressed && { backgroundColor: theme.colors.surface, transform: [{ scale: 1.15 }] },
+        slots?.emojiCell,
+      ]}
+    >
+      {renderEmoji ? renderEmoji(ch, e, fontSize) : <Text style={[{ fontSize, lineHeight: fontSize * 1.2 }, slots?.emojiText]}>{ch}</Text>}
+    </Pressable>
+  );
+});
+
+const s = StyleSheet.create({
+  flex: { flex: 1 },
+  row: { flexDirection: 'row' },
+  header: { flexDirection: 'row', alignItems: 'center' },
+  toneBtn: { width: 40, height: 40, alignItems: 'center', justifyContent: 'center' },
+  toneMenu: { flexDirection: 'row', justifyContent: 'space-around', padding: 4, marginTop: 6 },
+  toneOpt: { padding: 6 },
+  bar: { flexDirection: 'row', marginTop: 6 },
+  tab: { flex: 1, height: 40, alignItems: 'center', justifyContent: 'center' },
+  tabIndicator: { position: 'absolute', left: '25%', right: '25%', height: 2.5, borderRadius: 2 },
+});