@coze-arch/cli 0.0.10-alpha.11b7ea → 0.0.10-alpha.954690

package/lib/__templates__/expo/client/heroui/primitives/menu/menu.tsx

@@ -1,765 +0,0 @@
-import React, {
-  createContext,
-  forwardRef,
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  BackHandler,
-  Pressable,
-  Text,
-  View,
-  type GestureResponderEvent,
-  type LayoutChangeEvent,
-  type LayoutRectangle,
-} from 'react-native';
-import {
-  useAugmentedRef,
-  useControllableState,
-  useRelativePosition,
-  type LayoutPosition,
-} from '../../helpers/internal/hooks';
-import { Portal as PrimitivePortal } from '../portal';
-import * as Slot from '../slot';
-import type {
-  CloseProps,
-  CloseRef,
-  ContentProps,
-  ContentRef,
-  GroupContextValue,
-  GroupProps,
-  GroupRef,
-  IItemContext,
-  IRootContext,
-  ItemDescriptionProps,
-  ItemDescriptionRef,
-  ItemIndicatorProps,
-  ItemIndicatorRef,
-  ItemProps,
-  ItemRef,
-  ItemTitleProps,
-  ItemTitleRef,
-  LabelProps,
-  LabelRef,
-  MenuKey,
-  OverlayProps,
-  OverlayRef,
-  PortalProps,
-  RootProps,
-  RootRef,
-  TriggerProps,
-  TriggerRef,
-} from './menu.types';
-
-const RootContext = React.createContext<IRootContext | null>(null);
-
-const useRootContext = () => {
-  const context = useContext(RootContext);
-  if (!context) {
-    throw new Error(
-      'Menu compound components cannot be rendered outside the Menu component'
-    );
-  }
-  return context;
-};
-
-const Root = forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
-      isOpen: isOpenProp,
-      isDefaultOpen,
-      onOpenChange: onOpenChangeProp,
-      isDisabled,
-      presentation = 'popover',
-      ...viewProps
-    },
-    ref
-  ) => {
-    const [isOpen = false, onOpenChange] = useControllableState({
-      prop: isOpenProp,
-      defaultProp: isDefaultOpen,
-      onChange: onOpenChangeProp,
-    });
-    const [triggerPosition, setTriggerPosition] =
-      useState<LayoutPosition | null>(null);
-    const [contentLayout, setContentLayout] = useState<LayoutRectangle | null>(
-      null
-    );
-
-    const nativeID = useId();
-
-    const Component = asChild ? Slot.View : View;
-    return (
-      <RootContext.Provider
-        value={{
-          isOpen,
-          onOpenChange,
-          isDisabled,
-          contentLayout,
-          nativeID,
-          setContentLayout,
-          setTriggerPosition,
-          triggerPosition,
-          isDefaultOpen,
-          presentation,
-        }}
-      >
-        <Component ref={ref} {...viewProps} />
-      </RootContext.Provider>
-    );
-  }
-);
-
-// --------------------------------------------------
-
-const Trigger = forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, isDisabled = false, ...props }, ref) => {
-    const {
-      onOpenChange,
-      isOpen,
-      isDisabled: isDisabledRoot,
-      setTriggerPosition,
-      setContentLayout,
-      isDefaultOpen,
-      triggerPosition,
-    } = useRootContext();
-
-    const isDisabledValue = isDisabled ?? isDisabledRoot ?? undefined;
-
-    const augmentedRef = useAugmentedRef({
-      ref,
-      methods: {
-        open: () => {
-          augmentedRef.current?.measure(
-            (_x, _y, width, height, pageX, pageY) => {
-              setTriggerPosition({ width, pageX, pageY: pageY, height });
-            }
-          );
-          onOpenChange(true);
-        },
-        close: () => {
-          onOpenChange(false);
-          setTriggerPosition(null);
-          setContentLayout(null);
-        },
-      },
-      deps: [isOpen],
-    });
-
-    // Open menu on mount if isDefaultOpen is true
-    useEffect(() => {
-      if ((isDefaultOpen || isOpen) && !triggerPosition) {
-        // Use setTimeout to ensure the component is mounted and can be measured
-        const timeoutId = setTimeout(() => {
-          augmentedRef.current?.measure(
-            (_x, _y, width, height, pageX, pageY) => {
-              setTriggerPosition({ width, pageX, pageY: pageY, height });
-              if (isDefaultOpen) {
-                onOpenChange(true);
-              }
-            }
-          );
-        }, 0);
-        return () => clearTimeout(timeoutId);
-      }
-      return undefined;
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    function onPress(ev: GestureResponderEvent) {
-      augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
-        setTriggerPosition({ width, pageX, pageY, height });
-      });
-      onOpenChange(!isOpen);
-      onPressProp?.(ev);
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-
-    return (
-      <Component
-        ref={augmentedRef}
-        aria-disabled={isDisabledValue}
-        role="button"
-        onPress={onPress}
-        disabled={isDisabledValue}
-        {...props}
-      />
-    );
-  }
-);
-
-// --------------------------------------------------
-
-/**
- * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's offset to account for nav elements like headers.
- */
-function Portal({ forceMount, hostName, children }: PortalProps) {
-  const value = useRootContext();
-
-  const isBottomSheet = value.presentation === 'bottom-sheet';
-
-  if (!value.triggerPosition && !isBottomSheet) {
-    return null;
-  }
-
-  if (!forceMount && !isBottomSheet) {
-    if (!value.isOpen) {
-      return null;
-    }
-  }
-
-  return (
-    <PrimitivePortal hostName={hostName} name={`${value.nativeID}_menu_portal`}>
-      <RootContext.Provider value={value}>{children}</RootContext.Provider>
-    </PrimitivePortal>
-  );
-}
-
-// --------------------------------------------------
-
-const Overlay = forwardRef<OverlayRef, OverlayProps>(
-  (
-    {
-      asChild,
-      forceMount,
-      onPress: OnPressProp,
-      closeOnPress = true,
-      ...props
-    },
-    ref
-  ) => {
-    const { isOpen, onOpenChange, setTriggerPosition, setContentLayout } =
-      useRootContext();
-
-    function onPress(ev: GestureResponderEvent) {
-      if (closeOnPress) {
-        onOpenChange(false);
-        setTriggerPosition(null);
-        setContentLayout(null);
-      }
-      OnPressProp?.(ev);
-    }
-
-    if (!forceMount) {
-      if (!isOpen) {
-        return null;
-      }
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-
-    return <Component ref={ref} onPress={onPress} {...props} />;
-  }
-);
-
-// --------------------------------------------------
-
-/**
- * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
- */
-const Content = forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
-      forceMount,
-      align = 'start',
-      placement = 'bottom',
-      offset = 0,
-      alignOffset = 0,
-      avoidCollisions = true,
-      onLayout: onLayoutProp,
-      insets,
-      style,
-      disablePositioningStyle,
-      width = 'content-fit',
-      ...props
-    },
-    ref
-  ) => {
-    const {
-      isOpen,
-      onOpenChange,
-      contentLayout,
-      nativeID,
-      setContentLayout,
-      setTriggerPosition,
-      triggerPosition,
-    } = useRootContext();
-
-    useEffect(() => {
-      const backHandler = BackHandler.addEventListener(
-        'hardwareBackPress',
-        () => {
-          onOpenChange(false);
-          setTriggerPosition(null);
-          setContentLayout(null);
-          return true;
-        }
-      );
-
-      return () => {
-        setContentLayout(null);
-        backHandler.remove();
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const positionStyle = useRelativePosition({
-      align,
-      avoidCollisions,
-      triggerPosition,
-      contentLayout,
-      alignOffset,
-      insets,
-      offset,
-      placement,
-      disablePositioningStyle,
-    });
-
-    // Calculate content width based on width prop
-    const widthStyle: { width?: number | `${number}%` } = {};
-    if (width === 'trigger' && triggerPosition) {
-      widthStyle.width = triggerPosition.width;
-    } else if (width === 'full') {
-      widthStyle.width = '100%';
-    } else if (typeof width === 'number') {
-      widthStyle.width = width;
-    }
-    // 'content-fit' is default - no explicit width set
-
-    function onLayout(event: LayoutChangeEvent) {
-      setContentLayout(event.nativeEvent.layout);
-      onLayoutProp?.(event);
-    }
-
-    if (!forceMount) {
-      if (!isOpen) {
-        return null;
-      }
-    }
-
-    const Component = asChild ? Slot.View : View;
-
-    return (
-      <Component
-        ref={ref}
-        role="menu"
-        nativeID={nativeID}
-        aria-modal={true}
-        style={[positionStyle, widthStyle, style]}
-        onLayout={onLayout}
-        {...props}
-      />
-    );
-  }
-);
-
-// --------------------------------------------------
-
-const Close = forwardRef<CloseRef, CloseProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
-    const { onOpenChange, setContentLayout, setTriggerPosition } =
-      useRootContext();
-
-    function onPress(ev: GestureResponderEvent) {
-      if (disabled) return;
-      onOpenChange(false);
-      setTriggerPosition(null);
-      setContentLayout(null);
-      onPressProp?.(ev);
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-
-    return (
-      <Component
-        ref={ref}
-        aria-disabled={disabled ?? undefined}
-        role="button"
-        onPress={onPress}
-        disabled={disabled ?? undefined}
-        {...props}
-      />
-    );
-  }
-);
-
-// --------------------------------------------------
-// Group Context
-// --------------------------------------------------
-
-const GroupContext = createContext<GroupContextValue | null>(null);
-
-/**
- * Hook to access Menu Group context.
- * Provides selection state, disabled state, and selection mode.
- *
- * @throws Error if used outside a Menu Group component
- */
-function useGroupContext() {
-  const context = useContext(GroupContext);
-
-  if (!context) {
-    throw new Error(
-      'Menu.Group compound components cannot be rendered outside Menu.Group'
-    );
-  }
-
-  return context;
-}
-
-/**
- * Reads the Group context without throwing if absent.
- * Returns `null` when Item is used outside a Group (standalone mode).
- */
-function useOptionalGroupContext() {
-  return useContext(GroupContext);
-}
-
-// --------------------------------------------------
-// Item Context
-// --------------------------------------------------
-
-const ItemContext = createContext<IItemContext | null>(null);
-
-/**
- * Hook to access Menu Item context.
- * Provides the item's id, selected state, and disabled state.
- *
- * @throws Error if used outside a Menu Item component
- */
-function useItemContext() {
-  const context = useContext(ItemContext);
-
-  if (!context) {
-    throw new Error(
-      'Menu.Item compound components cannot be rendered outside Menu.Item'
-    );
-  }
-
-  return context;
-}
-
-// --------------------------------------------------
-// Group
-// --------------------------------------------------
-
-const Group = forwardRef<GroupRef, GroupProps>(
-  (
-    {
-      asChild,
-      selectionMode = 'none',
-      selectedKeys: selectedKeysProp,
-      defaultSelectedKeys,
-      onSelectionChange: onSelectionChangeProp,
-      disabledKeys: disabledKeysProp,
-      isDisabled = false,
-      shouldCloseOnSelect,
-      ...viewProps
-    },
-    ref
-  ) => {
-    const isControlled = selectedKeysProp !== undefined;
-
-    const [internalSelectedKeys, setInternalSelectedKeys] = useState<
-      Set<MenuKey>
-    >(() => new Set(defaultSelectedKeys ?? []));
-
-    const selectedKeys = useMemo(
-      () =>
-        isControlled ? new Set(selectedKeysProp ?? []) : internalSelectedKeys,
-      [isControlled, selectedKeysProp, internalSelectedKeys]
-    );
-
-    const disabledKeys = useMemo(
-      () => new Set(disabledKeysProp ?? []),
-      [disabledKeysProp]
-    );
-
-    const onSelectionChange = useCallback(
-      (keys: Set<MenuKey>) => {
-        if (!isControlled) {
-          setInternalSelectedKeys(keys);
-        }
-        onSelectionChangeProp?.(keys);
-      },
-      [isControlled, onSelectionChangeProp]
-    );
-
-    const contextValue = useMemo<GroupContextValue>(
-      () => ({
-        selectionMode,
-        selectedKeys,
-        onSelectionChange,
-        disabledKeys,
-        isDisabled,
-        shouldCloseOnSelect,
-      }),
-      [
-        selectionMode,
-        selectedKeys,
-        onSelectionChange,
-        disabledKeys,
-        isDisabled,
-        shouldCloseOnSelect,
-      ]
-    );
-
-    const Component = asChild ? Slot.View : View;
-
-    return (
-      <GroupContext.Provider value={contextValue}>
-        <Component ref={ref} role="group" {...viewProps} />
-      </GroupContext.Provider>
-    );
-  }
-);
-
-// --------------------------------------------------
-// Item
-// --------------------------------------------------
-
-const Item = forwardRef<ItemRef, ItemProps>(
-  (
-    {
-      asChild,
-      id: itemId,
-      isDisabled: isDisabledProp = false,
-      shouldCloseOnSelect: shouldCloseOnSelectProp,
-      isSelected: isSelectedProp,
-      onSelectedChange,
-      onPress: onPressProp,
-      variant = 'default',
-      ...props
-    },
-    ref
-  ) => {
-    const { onOpenChange, setTriggerPosition, setContentLayout } =
-      useRootContext();
-
-    const groupContext = useOptionalGroupContext();
-    const isInsideGroup = groupContext !== null;
-
-    if (isInsideGroup && itemId === undefined) {
-      throw new Error(
-        'Menu.Item requires an `id` prop when used inside Menu.Group'
-      );
-    }
-
-    // -- Resolve disabled state --
-    const effectiveDisabled = isInsideGroup
-      ? groupContext.isDisabled ||
-        isDisabledProp ||
-        (itemId !== undefined && groupContext.disabledKeys.has(itemId))
-      : isDisabledProp;
-
-    // -- Resolve selected state --
-    const isSelected = isInsideGroup
-      ? itemId !== undefined && groupContext.selectedKeys.has(itemId)
-      : (isSelectedProp ?? false);
-
-    // -- Resolve shouldCloseOnSelect --
-    // Priority: item prop > group prop > selectionMode default
-    const defaultCloseOnSelect = isInsideGroup
-      ? groupContext.selectionMode !== 'multiple'
-      : true;
-
-    const effectiveCloseOnSelect = isInsideGroup
-      ? (shouldCloseOnSelectProp ??
-        groupContext.shouldCloseOnSelect ??
-        defaultCloseOnSelect)
-      : (shouldCloseOnSelectProp ?? true);
-
-    // -- Resolve ARIA role --
-    // RN's Role type only supports "menuitem"; selection semantics are
-    // conveyed via aria-checked and accessibilityState.checked instead.
-    const role = 'menuitem' as const;
-
-    const closeMenu = useCallback(() => {
-      onOpenChange(false);
-      setTriggerPosition(null);
-      setContentLayout(null);
-    }, [onOpenChange, setTriggerPosition, setContentLayout]);
-
-    const onPress = useCallback(
-      (ev: GestureResponderEvent) => {
-        if (effectiveDisabled) return;
-
-        if (isInsideGroup && itemId !== undefined) {
-          const { selectionMode, selectedKeys, onSelectionChange } =
-            groupContext;
-
-          if (selectionMode === 'single') {
-            const newKeys = isSelected
-              ? new Set<MenuKey>()
-              : new Set<MenuKey>([itemId]);
-            onSelectionChange(newKeys);
-          } else if (selectionMode === 'multiple') {
-            const newKeys = new Set(selectedKeys);
-            if (isSelected) {
-              newKeys.delete(itemId);
-            } else {
-              newKeys.add(itemId);
-            }
-            onSelectionChange(newKeys);
-          }
-        } else {
-          // Standalone: toggle via callback if provided
-          onSelectedChange?.(!isSelected);
-        }
-
-        onPressProp?.(ev);
-
-        if (effectiveCloseOnSelect) {
-          closeMenu();
-        }
-      },
-      [
-        effectiveDisabled,
-        isInsideGroup,
-        itemId,
-        groupContext,
-        isSelected,
-        onSelectedChange,
-        onPressProp,
-        effectiveCloseOnSelect,
-        closeMenu,
-      ]
-    );
-
-    const itemContextValue = useMemo<IItemContext>(
-      () => ({
-        id: itemId,
-        isSelected,
-        isDisabled: effectiveDisabled,
-        variant,
-      }),
-      [itemId, isSelected, effectiveDisabled, variant]
-    );
-
-    const isCheckable = isInsideGroup
-      ? groupContext.selectionMode !== 'none'
-      : isSelectedProp !== undefined || onSelectedChange !== undefined;
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-
-    return (
-      <ItemContext.Provider value={itemContextValue}>
-        <Component
-          ref={ref}
-          role={role}
-          aria-checked={isCheckable ? isSelected : undefined}
-          aria-disabled={effectiveDisabled}
-          disabled={effectiveDisabled}
-          accessibilityState={{
-            disabled: effectiveDisabled,
-            ...(isCheckable ? { checked: isSelected } : {}),
-          }}
-          onPress={onPress}
-          {...props}
-        />
-      </ItemContext.Provider>
-    );
-  }
-);
-
-// --------------------------------------------------
-// ItemTitle
-// --------------------------------------------------
-
-const ItemTitle = forwardRef<ItemTitleRef, ItemTitleProps>(
-  ({ asChild, ...props }, ref) => {
-    useItemContext();
-
-    const Component = asChild ? Slot.Text : Text;
-
-    return <Component ref={ref} {...props} />;
-  }
-);
-
-// --------------------------------------------------
-// ItemDescription
-// --------------------------------------------------
-
-const ItemDescription = forwardRef<ItemDescriptionRef, ItemDescriptionProps>(
-  ({ asChild, ...props }, ref) => {
-    useItemContext();
-
-    const Component = asChild ? Slot.Text : Text;
-
-    return <Component ref={ref} {...props} />;
-  }
-);
-
-// --------------------------------------------------
-// ItemIndicator
-// --------------------------------------------------
-
-const ItemIndicator = forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
-    const { isSelected } = useItemContext();
-
-    if (!forceMount && !isSelected) {
-      return null;
-    }
-
-    const Component = asChild ? Slot.View : View;
-
-    return (
-      <Component
-        ref={ref}
-        role="presentation"
-        aria-hidden={!isSelected}
-        {...props}
-      />
-    );
-  }
-);
-
-// --------------------------------------------------
-// Label
-// --------------------------------------------------
-
-const Label = forwardRef<LabelRef, LabelProps>(({ asChild, ...props }, ref) => {
-  const Component = asChild ? Slot.Text : Text;
-
-  return <Component ref={ref} accessibilityRole="header" {...props} />;
-});
-
-// --------------------------------------------------
-
-Root.displayName = 'HeroUINative.Menu.Root';
-Trigger.displayName = 'HeroUINative.Menu.Trigger';
-Overlay.displayName = 'HeroUINative.Menu.Overlay';
-Content.displayName = 'HeroUINative.Menu.Content';
-Close.displayName = 'HeroUINative.Menu.Close';
-Group.displayName = 'HeroUINative.Menu.Group';
-Item.displayName = 'HeroUINative.Menu.Item';
-ItemTitle.displayName = 'HeroUINative.Menu.ItemTitle';
-ItemDescription.displayName = 'HeroUINative.Menu.ItemDescription';
-ItemIndicator.displayName = 'HeroUINative.Menu.ItemIndicator';
-Label.displayName = 'HeroUINative.Menu.Label';
-
-export {
-  Close,
-  Content,
-  Group,
-  Item,
-  ItemDescription,
-  ItemIndicator,
-  ItemTitle,
-  Label,
-  Overlay,
-  Portal,
-  Root,
-  Trigger,
-  useGroupContext,
-  useItemContext,
-  useRootContext,
-};