@crossed/ui/lib/module/overlay/Floating/Trigger.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import { Pressable } from "react-native";
import { Slot } from "../../Slot";
import { useFloatingConfig, useFloatingContext } from "./context";
import { forwardRef, memo, useCallback, useMemo } from "react";
import { composeEventHandlers } from "@crossed/core";
import { composeStyles } from "@crossed/styled";
const FloatingTrigger = memo(
  forwardRef(({ style, ...props }, ref) => {
    const { triggerStrategy, enabled } = useFloatingConfig();
    const { open, onClose, onOpen } = useFloatingContext();
    const toggle = useCallback(() => {
      if (open)
        onClose();
      else
        onOpen();
    }, [open, onClose, onOpen]);
    const propsExtended = useMemo(() => {
      const eventStrategiy = !enabled ? {} : triggerStrategy === "onPress" ? {
        onPress: composeEventHandlers(toggle, props.onPress)
      } : {
        onPointerEnter: composeEventHandlers(
          onOpen,
          props.onPointerEnter
        ),
        onPointerLeave: composeEventHandlers(
          onClose,
          props.onPointerLeave
        )
      };
      return {
        ...props,
        ...style == null ? void 0 : style.rnw(),
        ...eventStrategiy
      };
    }, [props, toggle, enabled, onClose, onOpen]);
    return /* @__PURE__ */ jsx(
      Slot,
      {
        ref,
        Comp: Pressable,
        role: "button",
        ...propsExtended,
        ...composeStyles(propsExtended.style).style()
      }
    );
  })
);
FloatingTrigger.displayName = "Floating.Trigger";
export {
  FloatingTrigger
};
//# sourceMappingURL=Trigger.js.map