@himakarinv/nativex 1.0.0

package/src/components/Datepicker/index.ts

@@ -0,0 +1,2 @@
+export { Datepicker, DatepickerMode } from './Datepicker';
+export type { DatepickerDate, DatepickerDateRange, DatepickerProps } from './Datepicker';

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,277 @@
+import { useRef, useState } from 'react';
+import {
+  Dimensions,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, colors, radius, shadows, spacing, typography } from '../../theme';
+import { Button, ButtonSize, IconPosition, dismissButtonFocus } from '../Button';
+import { IconName } from '../Icon';
+
+export const DropdownVariant = {
+  Primary: 'primary',
+  Secondary: 'secondary',
+  Success: 'success',
+  Danger: 'danger',
+  Warning: 'warning',
+  Info: 'info',
+} as const;
+
+export type DropdownVariant = (typeof DropdownVariant)[keyof typeof DropdownVariant];
+
+export const DropdownSize = {
+  Small: 'sm',
+  Large: 'lg',
+} as const;
+
+export type DropdownSize = (typeof DropdownSize)[keyof typeof DropdownSize];
+
+export const DropdownPlacement = {
+  Top: 'top',
+  Bottom: 'bottom',
+  Start: 'start',
+  End: 'end',
+} as const;
+
+export type DropdownPlacement = (typeof DropdownPlacement)[keyof typeof DropdownPlacement];
+
+export type DropdownItem = {
+  label?: string;
+  value?: string;
+  disabled?: boolean;
+  divider?: boolean;
+};
+
+export type DropdownProps = {
+  label?: string;
+  items?: DropdownItem[];
+  variant?: DropdownVariant;
+  size?: DropdownSize;
+  split?: boolean;
+  placement?: DropdownPlacement;
+  onItemSelected?: (item: DropdownItem) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const isNative = Platform.OS !== 'web';
+const MENU_MIN_WIDTH = spacing['7xl'] + spacing['7xl'] + spacing['7xl'] + spacing['3xl'];
+const MENU_GAP = spacing.xs;
+
+function buttonSize(size?: DropdownSize): ButtonSize {
+  if (size === DropdownSize.Small) {
+    return ButtonSize.Small;
+  }
+  if (size === DropdownSize.Large) {
+    return ButtonSize.Large;
+  }
+  return ButtonSize.Medium;
+}
+
+function compactTriggerStyle(size?: DropdownSize): ViewStyle | undefined {
+  if (size === DropdownSize.Small) {
+    return {
+      height: spacing['4xl'],
+      minHeight: spacing['4xl'],
+      paddingVertical: spacing.xs,
+      paddingHorizontal: spacing.md,
+    };
+  }
+  if (size === DropdownSize.Large) {
+    return {
+      height: spacing['6xl'],
+      minHeight: spacing['6xl'],
+      paddingVertical: spacing.sm,
+      paddingHorizontal: spacing.base,
+    };
+  }
+  return undefined;
+}
+
+function webMenuShadow(): ViewStyle {
+  return {
+    boxShadow: `0 ${shadows.boxLight.offsetY}px ${shadows.boxLight.radius}px ${colors.boxShadowLight}`,
+  } as ViewStyle;
+}
+
+function menuPosition(
+  placement: DropdownPlacement,
+  trigger: { x: number; y: number; width: number; height: number },
+  menu: { width: number; height: number },
+) {
+  const window = Dimensions.get('window');
+  const pad = spacing.lg;
+  let top = trigger.y + trigger.height + MENU_GAP;
+  let left = trigger.x;
+
+  if (placement === DropdownPlacement.Top) {
+    top = trigger.y - menu.height - MENU_GAP;
+  } else if (placement === DropdownPlacement.Start) {
+    top = trigger.y;
+    left = trigger.x - menu.width - MENU_GAP;
+  } else if (placement === DropdownPlacement.End) {
+    top = trigger.y;
+    left = trigger.x + trigger.width + MENU_GAP;
+  }
+
+  left = Math.min(Math.max(pad, left), window.width - menu.width - pad);
+  top = Math.min(Math.max(pad, top), window.height - menu.height - pad);
+
+  return { top, left };
+}
+
+export function Dropdown({
+  label = 'Dropdown',
+  items = [],
+  variant = DropdownVariant.Primary,
+  size,
+  split: _split = false,
+  placement = DropdownPlacement.Bottom,
+  onItemSelected,
+  style,
+}: DropdownProps) {
+  const triggerRef = useRef<View>(null);
+  const [open, setOpen] = useState(false);
+  const [hoveredItem, setHoveredItem] = useState<number | null>(null);
+  const [triggerBox, setTriggerBox] = useState({ x: 0, y: 0, width: 0, height: 0 });
+  const [menuSize, setMenuSize] = useState({ width: MENU_MIN_WIDTH, height: 0 });
+  const position = menuPosition(placement, triggerBox, menuSize);
+
+  const close = () => {
+    setOpen(false);
+    setHoveredItem(null);
+    dismissButtonFocus();
+    setTimeout(() => dismissButtonFocus(), 220);
+  };
+
+  const toggle = () => {
+    if (open) {
+      close();
+      return;
+    }
+
+    triggerRef.current?.measureInWindow((x, y, width, measuredHeight) => {
+      setTriggerBox({ x, y, width, height: measuredHeight });
+      setOpen(true);
+    });
+  };
+
+  const select = (item: DropdownItem) => {
+    if (item.disabled || item.divider || !item.value) {
+      return;
+    }
+    onItemSelected?.(item);
+    close();
+  };
+
+  return (
+    <View ref={triggerRef} collapsable={false} style={[styles.host, style]}>
+      <Button
+        label={label}
+        variant={variant}
+        size={buttonSize(size)}
+        iconPosition={IconPosition.After}
+        iconName={IconName.ChevronDown}
+        iconDecorative
+        accessibilityLabel={open ? 'Close menu' : 'Open menu'}
+        onPress={toggle}
+        contentStyle={compactTriggerStyle(size)}
+      />
+
+      <Modal visible={open} transparent animationType="none" onRequestClose={close}>
+        <Pressable accessible={false} style={styles.backdrop} onPress={close}>
+          <Pressable
+            accessible={false}
+            onPress={(event) => {
+              if ('stopPropagation' in event && typeof event.stopPropagation === 'function') {
+                event.stopPropagation();
+              }
+            }}
+            onLayout={(event) => {
+              const { width, height: nextHeight } = event.nativeEvent.layout;
+              if (width !== menuSize.width || nextHeight !== menuSize.height) {
+                setMenuSize({ width, height: nextHeight });
+              }
+            }}
+            style={[
+              styles.menu,
+              { top: position.top, left: position.left, minWidth: Math.max(MENU_MIN_WIDTH, triggerBox.width) },
+              !isNative && webMenuShadow(),
+            ]}>
+            {items.map((item, index) => {
+              if (item.divider) {
+                return <View key={`divider-${index}`} style={styles.divider} />;
+              }
+
+              const disabled = Boolean(item.disabled);
+              const hovered = hoveredItem === index && !disabled;
+
+              return (
+                <Pressable
+                  key={`${item.value ?? item.label ?? index}`}
+                  accessibilityRole="menuitem"
+                  accessibilityState={{ disabled }}
+                  disabled={disabled}
+                  onHoverIn={() => setHoveredItem(index)}
+                  onHoverOut={() => setHoveredItem((current) => (current === index ? null : current))}
+                  onPress={() => select(item)}
+                  style={[styles.item, hovered && styles.itemHovered, disabled && styles.itemDisabled]}>
+                  <Text style={[styles.itemLabel, disabled && styles.itemLabelDisabled]}>{item.label}</Text>
+                </Pressable>
+              );
+            })}
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    alignSelf: 'center',
+  },
+  backdrop: {
+    flex: 1,
+  },
+  menu: {
+    position: 'absolute',
+    backgroundColor: colors.white,
+    borderWidth: borders.width.thin,
+    borderColor: colors.borderSubtle,
+    borderRadius: radius.sm,
+    paddingVertical: spacing.sm,
+    overflow: 'hidden',
+  },
+  item: {
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.lg,
+  },
+  itemHovered: {
+    backgroundColor: colors.gray.light,
+  },
+  itemDisabled: {
+    opacity: 0.5,
+  },
+  itemLabel: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.normal,
+    color: colors.text.primary,
+  },
+  itemLabelDisabled: {
+    color: colors.gray.dark,
+  },
+  divider: {
+    height: borders.width.thin,
+    backgroundColor: colors.borderSubtle,
+    marginVertical: spacing.md,
+    marginHorizontal: spacing.none,
+  },
+});

package/src/components/Dropdown/index.ts

@@ -0,0 +1,7 @@
+export {
+  Dropdown,
+  DropdownPlacement,
+  DropdownSize,
+  DropdownVariant,
+} from './Dropdown';
+export type { DropdownItem, DropdownProps } from './Dropdown';