@himakarinv/nativex 1.0.0

package/src/components/InputDropdown/InputDropdown.tsx

@@ -0,0 +1,662 @@
+import { useEffect, useMemo, useRef, useState, type RefObject } from 'react';
+import {
+  Dimensions,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, colors, radius, shadows, spacing, typography } from '../../theme';
+import { Icon, IconName } from '../Icon';
+import { Label } from '../Label';
+
+export const InputDropdownLayout = {
+  Default: 'default',
+  YearMonth: 'year-month',
+} as const;
+
+export type InputDropdownLayout = (typeof InputDropdownLayout)[keyof typeof InputDropdownLayout];
+
+export const InputDropdownSize = {
+  XSmall: 'xs',
+  Small: 'sm',
+  Medium: 'md',
+  Large: 'lg',
+} as const;
+
+export type InputDropdownSize = (typeof InputDropdownSize)[keyof typeof InputDropdownSize];
+
+export const InputDropdownIconType = {
+  Default: 'default',
+  User: 'user',
+  Search: 'search',
+  Dot: 'dot',
+} as const;
+
+export type InputDropdownIconType =
+  (typeof InputDropdownIconType)[keyof typeof InputDropdownIconType];
+
+export type InputDropdownItem = {
+  label: string;
+  value?: string;
+  handle?: string;
+};
+
+export type MonthYearValue = {
+  year: string;
+  month: string;
+};
+
+export type InputDropdownProps = {
+  layout?: InputDropdownLayout;
+  label?: string;
+  required?: boolean;
+  suffix?: boolean;
+  iconType?: InputDropdownIconType;
+  options?: InputDropdownItem[];
+  placeholder?: string;
+  searchable?: boolean;
+  size?: InputDropdownSize;
+  selectedValue?: string;
+  disabled?: boolean;
+  yearLabel?: string;
+  monthLabel?: string;
+  yearPlaceholder?: string;
+  monthPlaceholder?: string;
+  yearOptions?: InputDropdownItem[];
+  monthOptions?: InputDropdownItem[];
+  selectedYear?: string;
+  selectedMonth?: string;
+  onSelectionChange?: (item: InputDropdownItem | null) => void;
+  onYearChange?: (item: InputDropdownItem | null) => void;
+  onMonthChange?: (item: InputDropdownItem | null) => void;
+  onValueChange?: (value: MonthYearValue) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+type MonthYearField = 'year' | 'month';
+
+const isNative = Platform.OS !== 'web';
+const MENU_MAX_HEIGHT = spacing['7xl'] * 7 + spacing.md;
+const MENU_GAP = spacing.sm + spacing.xs;
+
+export function buildMonthDropdownOptions(): InputDropdownItem[] {
+  return [
+    { label: 'January', value: '01' },
+    { label: 'February', value: '02' },
+    { label: 'March', value: '03' },
+    { label: 'April', value: '04' },
+    { label: 'May', value: '05' },
+    { label: 'June', value: '06' },
+    { label: 'July', value: '07' },
+    { label: 'August', value: '08' },
+    { label: 'September', value: '09' },
+    { label: 'October', value: '10' },
+    { label: 'November', value: '11' },
+    { label: 'December', value: '12' },
+  ];
+}
+
+export function buildYearDropdownOptions(
+  startYear = new Date().getFullYear() - 5,
+  endYear = new Date().getFullYear() + 5,
+): InputDropdownItem[] {
+  const from = Math.min(startYear, endYear);
+  const to = Math.max(startYear, endYear);
+  const options: InputDropdownItem[] = [];
+  for (let year = from; year <= to; year += 1) {
+    options.push({ label: String(year), value: String(year) });
+  }
+  return options;
+}
+
+function sizeTokens(size: InputDropdownSize) {
+  const compact = size === InputDropdownSize.XSmall || size === InputDropdownSize.Small;
+  const large = size === InputDropdownSize.Large;
+
+  return {
+    width:
+      size === InputDropdownSize.XSmall
+        ? spacing['7xl'] * 2 + spacing['2xl']
+        : size === InputDropdownSize.Small
+          ? spacing['7xl'] * 3
+          : size === InputDropdownSize.Medium
+            ? spacing['7xl'] * 4
+            : spacing['7xl'] * 5,
+    height: compact ? spacing['3xl'] : large ? spacing['5xl'] : spacing['4xl'],
+    paddingX: compact ? spacing.md : spacing.base,
+    fontSize: compact ? typography.fontSize.sm : large ? typography.fontSize.base : typography.fontSize.md,
+    icon: compact ? spacing.base : spacing.lg,
+  };
+}
+
+function fieldHitSlop(height: number) {
+  const extra = Math.max(spacing.none, (spacing['7xl'] - height) / 2);
+  return { top: extra, bottom: extra, left: spacing.none, right: spacing.none };
+}
+
+function prefixIconName(iconType: InputDropdownIconType) {
+  if (iconType === InputDropdownIconType.User) {
+    return IconName.User;
+  }
+  if (iconType === InputDropdownIconType.Search) {
+    return IconName.Search;
+  }
+  if (iconType === InputDropdownIconType.Dot) {
+    return IconName.Dot;
+  }
+  return '';
+}
+
+function itemSuffix(item: InputDropdownItem, showGenerated: boolean) {
+  if (item.handle) {
+    return item.handle;
+  }
+  if (!showGenerated) {
+    return '';
+  }
+  const first = item.label.trim().split(/\s+/)[0] || item.label.trim();
+  return first ? `@${first}` : '';
+}
+
+function sameItem(left: InputDropdownItem | null, right: InputDropdownItem) {
+  if (!left) {
+    return false;
+  }
+  return left.value === right.value || (left.label === right.label && !left.value && !right.value);
+}
+
+function findByValue(options: InputDropdownItem[], value?: string) {
+  if (value === undefined || value === '') {
+    return null;
+  }
+  return options.find((item) => item.value === value) ?? null;
+}
+
+function webFocusRing(): ViewStyle {
+  return {
+    boxShadow: `0 0 0 ${borders.focusRing.width}px ${colors.focus}`,
+  } as ViewStyle;
+}
+
+function webMenuShadow(): ViewStyle {
+  return {
+    boxShadow: `0 ${shadows.boxLight.offsetY}px ${shadows.boxLight.radius}px ${colors.boxShadowLight}`,
+  } as ViewStyle;
+}
+
+function nativeRingStyle(): ViewStyle {
+  return {
+    position: 'absolute',
+    top: -borders.focusRing.width,
+    right: -borders.focusRing.width,
+    bottom: -borders.focusRing.width,
+    left: -borders.focusRing.width,
+    borderRadius: radius.md + borders.focusRing.width,
+    borderWidth: borders.focusRing.width,
+    borderColor: colors.focus,
+    zIndex: 0,
+  };
+}
+
+function menuPosition(
+  trigger: { x: number; y: number; width: number; height: number },
+  menu: { width: number; height: number },
+) {
+  const window = Dimensions.get('window');
+  const pad = spacing.lg;
+  const left = Math.min(Math.max(pad, trigger.x), window.width - menu.width - pad);
+  const top = Math.min(
+    Math.max(pad, trigger.y + trigger.height + MENU_GAP),
+    window.height - menu.height - pad,
+  );
+  return { top, left };
+}
+
+export function InputDropdown({
+  layout = InputDropdownLayout.Default,
+  label = 'Team member',
+  required = false,
+  suffix = true,
+  iconType = InputDropdownIconType.Default,
+  options = [],
+  placeholder = 'Select team member',
+  searchable = false,
+  size = InputDropdownSize.Medium,
+  selectedValue,
+  disabled = false,
+  yearLabel = 'Year',
+  monthLabel = 'Month',
+  yearPlaceholder = 'Select year',
+  monthPlaceholder = 'Select month',
+  yearOptions,
+  monthOptions,
+  selectedYear,
+  selectedMonth,
+  onSelectionChange,
+  onYearChange,
+  onMonthChange,
+  onValueChange,
+  style,
+}: InputDropdownProps) {
+  const isYearMonth = layout === InputDropdownLayout.YearMonth;
+  const years = yearOptions ?? buildYearDropdownOptions();
+  const months = monthOptions ?? buildMonthDropdownOptions();
+  const now = useMemo(() => new Date(), []);
+  const defaultYear = String(now.getFullYear());
+  const defaultMonth = String(now.getMonth() + 1).padStart(2, '0');
+
+  const [open, setOpen] = useState(false);
+  const [openField, setOpenField] = useState<MonthYearField | null>(null);
+  const [selected, setSelected] = useState<InputDropdownItem | null>(() => findByValue(options, selectedValue));
+  const [yearItem, setYearItem] = useState<InputDropdownItem | null>(() =>
+    findByValue(years, selectedYear ?? defaultYear),
+  );
+  const [monthItem, setMonthItem] = useState<InputDropdownItem | null>(() =>
+    findByValue(months, selectedMonth ?? defaultMonth),
+  );
+  const [searchText, setSearchText] = useState('');
+  const [hovered, setHovered] = useState<string | null>(null);
+  const [triggerBox, setTriggerBox] = useState({ x: 0, y: 0, width: 0, height: 0 });
+  const [menuSize, setMenuSize] = useState({ width: 0, height: 0 });
+
+  const defaultRef = useRef<View>(null);
+  const yearRef = useRef<View>(null);
+  const monthRef = useRef<View>(null);
+  const tokens = sizeTokens(size);
+  const prefix = prefixIconName(iconType);
+  const showItemIcon = iconType === InputDropdownIconType.User || iconType === InputDropdownIconType.Dot;
+  const filtered = useMemo(() => {
+    if (!searchable || !searchText.trim()) {
+      return options;
+    }
+    const term = searchText.toLowerCase();
+    return options.filter((item) => item.label.toLowerCase().includes(term));
+  }, [options, searchable, searchText]);
+
+  useEffect(() => {
+    if (selectedValue !== undefined) {
+      setSelected(findByValue(options, selectedValue));
+    }
+  }, [options, selectedValue]);
+
+  useEffect(() => {
+    if (selectedYear !== undefined) {
+      setYearItem(findByValue(years, selectedYear));
+    }
+  }, [selectedYear, years]);
+
+  useEffect(() => {
+    if (selectedMonth !== undefined) {
+      setMonthItem(findByValue(months, selectedMonth));
+    }
+  }, [selectedMonth, months]);
+
+  const close = () => {
+    setOpen(false);
+    setOpenField(null);
+    setHovered(null);
+  };
+
+  const openAt = (host: View | null, field: MonthYearField | null) => {
+    host?.measureInWindow((x, y, width, height) => {
+      setTriggerBox({ x, y, width, height });
+      setOpenField(field);
+      setOpen(true);
+    });
+  };
+
+  const toggleDefault = () => {
+    if (disabled) {
+      return;
+    }
+    if (open && !openField) {
+      close();
+      return;
+    }
+    openAt(defaultRef.current, null);
+  };
+
+  const toggleField = (field: MonthYearField) => {
+    if (disabled) {
+      return;
+    }
+    if (openField === field) {
+      close();
+      return;
+    }
+    openAt(field === 'year' ? yearRef.current : monthRef.current, field);
+  };
+
+  const selectDefault = (item: InputDropdownItem) => {
+    setSelected(item);
+    if (searchable) {
+      setSearchText(item.label);
+    }
+    onSelectionChange?.(item);
+    close();
+  };
+
+  const selectField = (field: MonthYearField, item: InputDropdownItem) => {
+    const nextYear = field === 'year' ? (item.value ?? '') : (yearItem?.value ?? '');
+    const nextMonth = field === 'month' ? (item.value ?? '') : (monthItem?.value ?? '');
+    if (field === 'year') {
+      setYearItem(item);
+      onYearChange?.(item);
+    } else {
+      setMonthItem(item);
+      onMonthChange?.(item);
+    }
+    close();
+    onValueChange?.({ year: nextYear, month: nextMonth });
+  };
+
+  const activeOptions = openField === 'year' ? years : openField === 'month' ? months : filtered;
+  const activeSelected =
+    openField === 'year' ? yearItem : openField === 'month' ? monthItem : selected;
+  const position = menuPosition(triggerBox, {
+    width: menuSize.width || triggerBox.width,
+    height: menuSize.height,
+  });
+
+  const renderMenu = () => (
+    <Modal visible={open} transparent animationType="none" onRequestClose={close}>
+      <Pressable accessible={false} style={styles.backdrop} onPress={close}>
+        <Pressable
+          accessible={false}
+          accessibilityRole="menu"
+          onPress={(event) => {
+            if ('stopPropagation' in event && typeof event.stopPropagation === 'function') {
+              event.stopPropagation();
+            }
+          }}
+          onLayout={(event) => {
+            const { width, height } = event.nativeEvent.layout;
+            if (width !== menuSize.width || height !== menuSize.height) {
+              setMenuSize({ width, height });
+            }
+          }}
+          style={[
+            styles.panel,
+            {
+              top: position.top,
+              left: position.left,
+              width: Math.max(tokens.width, triggerBox.width),
+              maxHeight: MENU_MAX_HEIGHT,
+            },
+            !isNative && webMenuShadow(),
+          ]}>
+          <ScrollView keyboardShouldPersistTaps="handled">
+            {activeOptions.map((item) => {
+              const key = item.value ?? item.label;
+              const selectedItem = sameItem(activeSelected, item);
+              const isHovered = hovered === key && !selectedItem;
+              const extra = itemSuffix(item, suffix && !openField);
+
+              return (
+                <Pressable
+                  key={key}
+                  accessibilityRole="menuitem"
+                  accessibilityState={{ selected: selectedItem }}
+                  accessibilityLabel={item.label}
+                  onHoverIn={() => setHovered(key)}
+                  onHoverOut={() => setHovered((current) => (current === key ? null : current))}
+                  onPress={() => {
+                    if (openField) {
+                      selectField(openField, item);
+                    } else {
+                      selectDefault(item);
+                    }
+                  }}
+                  style={[
+                    styles.item,
+                    {
+                      minHeight: tokens.height,
+                      paddingHorizontal: tokens.paddingX,
+                    },
+                    selectedItem && styles.itemSelected,
+                    isHovered && styles.itemHovered,
+                  ]}>
+                  {showItemIcon && !openField && prefix ? (
+                    <Icon name={prefix} size={tokens.icon} color={colors.inputDropdown.text} decorative />
+                  ) : null}
+                  <Text style={[styles.itemLabel, { fontSize: tokens.fontSize }]} numberOfLines={1}>
+                    {item.label}
+                    {extra ? <Text style={styles.itemSuffix}>{` ${extra}`}</Text> : null}
+                  </Text>
+                  {selectedItem && (suffix || openField) ? (
+                    <Icon name={IconName.Check} size={tokens.icon} color={colors.inputDropdown.text} decorative />
+                  ) : null}
+                </Pressable>
+              );
+            })}
+          </ScrollView>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+
+  const renderField = ({
+    hostRef,
+    fieldLabel,
+    fieldPlaceholder,
+    selectedItem,
+    fieldOpen,
+    showSearch,
+    onPress,
+  }: {
+    hostRef: RefObject<View | null>;
+    fieldLabel: string;
+    fieldPlaceholder: string;
+    selectedItem: InputDropdownItem | null;
+    fieldOpen: boolean;
+    showSearch: boolean;
+    onPress: () => void;
+  }) => {
+    const extra = selectedItem ? itemSuffix(selectedItem, suffix) : '';
+    const showRing = fieldOpen && !disabled;
+
+    return (
+      <View ref={hostRef} collapsable={false} style={[styles.field, { width: tokens.width }]}>
+        {fieldLabel ? <Label text={fieldLabel} required={required && !isYearMonth} /> : null}
+        <View style={styles.triggerHost}>
+          {showRing && isNative ? <View pointerEvents="none" style={nativeRingStyle()} /> : null}
+          <Pressable
+            accessibilityRole={showSearch ? 'none' : 'button'}
+            accessibilityState={{ disabled, expanded: fieldOpen }}
+            accessibilityLabel={fieldLabel || placeholder}
+            disabled={disabled}
+            hitSlop={fieldHitSlop(tokens.height)}
+            onPress={showSearch ? undefined : onPress}
+            style={[
+              styles.trigger,
+              {
+                height: tokens.height,
+                paddingHorizontal: tokens.paddingX,
+              },
+              showRing && !isNative && webFocusRing(),
+              disabled && styles.triggerDisabled,
+            ]}>
+            {prefix ? <Icon name={prefix} size={tokens.icon} color={colors.inputDropdown.text} decorative /> : null}
+            {showSearch ? (
+              <TextInput
+                value={searchText}
+                onChangeText={(next) => {
+                  setSearchText(next);
+                  if (next.trim() || !searchText) {
+                    openAt(defaultRef.current, null);
+                  } else {
+                    close();
+                  }
+                }}
+                onFocus={() => openAt(defaultRef.current, null)}
+                placeholder={fieldPlaceholder}
+                placeholderTextColor={colors.inputDropdown.mutedText}
+                editable={!disabled}
+                style={[styles.searchInput, { fontSize: tokens.fontSize }]}
+              />
+            ) : (
+              <>
+                <Text
+                  numberOfLines={1}
+                  style={[
+                    styles.triggerText,
+                    { fontSize: tokens.fontSize },
+                    !selectedItem && styles.triggerPlaceholder,
+                  ]}>
+                  {selectedItem ? selectedItem.label : fieldPlaceholder}
+                  {selectedItem && extra ? <Text style={styles.triggerSuffix}>{` ${extra}`}</Text> : null}
+                </Text>
+                <View style={fieldOpen ? styles.chevronOpen : undefined}>
+                  <Icon name={IconName.ChevronDown} size={tokens.icon} color={colors.inputDropdown.mutedText} decorative />
+                </View>
+              </>
+            )}
+          </Pressable>
+        </View>
+      </View>
+    );
+  };
+
+  if (isYearMonth) {
+    return (
+      <View style={[styles.yearMonth, style]}>
+        {renderField({
+          hostRef: yearRef,
+          fieldLabel: yearLabel,
+          fieldPlaceholder: yearPlaceholder,
+          selectedItem: yearItem,
+          fieldOpen: openField === 'year',
+          showSearch: false,
+          onPress: () => toggleField('year'),
+        })}
+        {renderField({
+          hostRef: monthRef,
+          fieldLabel: monthLabel,
+          fieldPlaceholder: monthPlaceholder,
+          selectedItem: monthItem,
+          fieldOpen: openField === 'month',
+          showSearch: false,
+          onPress: () => toggleField('month'),
+        })}
+        {renderMenu()}
+      </View>
+    );
+  }
+
+  return (
+    <View style={style}>
+      {renderField({
+        hostRef: defaultRef,
+        fieldLabel: label,
+        fieldPlaceholder: placeholder,
+        selectedItem: selected,
+        fieldOpen: open && !openField,
+        showSearch: searchable,
+        onPress: toggleDefault,
+      })}
+      {renderMenu()}
+    </View>
+  );
+}
+
+const webInputReset = {
+  outlineStyle: 'solid',
+  outlineWidth: borders.width.none,
+  outlineColor: colors.transparent,
+} as TextStyle;
+
+const styles = StyleSheet.create({
+  yearMonth: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    gap: spacing.md,
+  },
+  field: {
+    gap: spacing.sm + spacing.xs,
+  },
+  triggerHost: {
+    position: 'relative',
+    overflow: 'visible',
+  },
+  trigger: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    borderWidth: borders.width.thin,
+    borderColor: colors.gray.base,
+    borderRadius: radius.md,
+    backgroundColor: colors.white,
+  },
+  triggerDisabled: {
+    opacity: 0.6,
+  },
+  triggerText: {
+    flex: 1,
+    minWidth: spacing.none,
+    color: colors.inputDropdown.text,
+    fontFamily: typography.fontFamily.base,
+    lineHeight: typography.fontSize.base * typography.lineHeight.normal,
+  },
+  triggerPlaceholder: {
+    color: colors.inputDropdown.mutedText,
+  },
+  triggerSuffix: {
+    color: colors.gray.darker,
+  },
+  searchInput: {
+    flex: 1,
+    minWidth: spacing.none,
+    padding: spacing.none,
+    color: colors.inputDropdown.text,
+    fontFamily: typography.fontFamily.base,
+    ...webInputReset,
+  },
+  chevronOpen: {
+    transform: [{ rotate: '180deg' }],
+  },
+  backdrop: {
+    flex: 1,
+  },
+  panel: {
+    position: 'absolute',
+    backgroundColor: colors.white,
+    borderWidth: borders.width.thin,
+    borderColor: colors.input.border,
+    borderRadius: radius.sm,
+    overflow: 'hidden',
+  },
+  item: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    backgroundColor: colors.white,
+  },
+  itemSelected: {
+    backgroundColor: colors.primary.light,
+  },
+  itemHovered: {
+    backgroundColor: colors.gray.light,
+  },
+  itemLabel: {
+    flex: 1,
+    minWidth: spacing.none,
+    color: colors.inputDropdown.text,
+    fontFamily: typography.fontFamily.base,
+  },
+  itemSuffix: {
+    color: colors.gray.darker,
+    fontWeight: typography.fontWeight.regular,
+  },
+});

package/src/components/InputDropdown/index.ts

@@ -0,0 +1,9 @@
+export {
+  InputDropdown,
+  InputDropdownLayout,
+  InputDropdownSize,
+  InputDropdownIconType,
+  buildMonthDropdownOptions,
+  buildYearDropdownOptions,
+} from './InputDropdown';
+export type { InputDropdownProps, InputDropdownItem, MonthYearValue } from './InputDropdown';