@crossed/styled/lib/module/plugins/PseudoClass/useInteraction.js

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

"use client";
import { composeEventHandlers, useUncontrolled } from "@crossed/core";
import { useCallback, useMemo, useTransition } from "react";
const useInteraction = (props) => {
  const { disabled, focusable } = props || {};
  const [active, setActive] = useUncontrolled({
    value: props == null ? void 0 : props.active,
    defaultValue: false
  });
  const [hover, setHover] = useUncontrolled({
    value: props == null ? void 0 : props.hover,
    defaultValue: false
  });
  const [focus, setFocus] = useUncontrolled({
    value: props == null ? void 0 : props.focus,
    defaultValue: false
  });
  const [, setTransition] = useTransition();
  const onPressIn = useCallback(
    composeEventHandlers((props == null ? void 0 : props.onPressIn) || void 0, () => {
      setTransition(() => {
        (!disabled || !focusable && focusable !== void 0) && setActive(true);
      });
    }),
    [setActive, props == null ? void 0 : props.onPressIn, disabled, focusable]
  );
  const onPressOut = useCallback(
    composeEventHandlers((props == null ? void 0 : props.onPressOut) || void 0, () => {
      setTransition(() => {
        (!disabled || !focusable && focusable !== void 0) && setActive(false);
      });
    }),
    [setActive, props == null ? void 0 : props.onPressOut, disabled, focusable]
  );
  const onHoverIn = useCallback(
    composeEventHandlers((props == null ? void 0 : props.onHoverIn) || void 0, () => {
      setTransition(() => {
        (!disabled || !focusable && focusable !== void 0) && setHover(true);
      });
    }),
    [setHover, props == null ? void 0 : props.onHoverIn, disabled, focusable]
  );
  const onHoverOut = useCallback(
    composeEventHandlers((props == null ? void 0 : props.onHoverOut) || void 0, () => {
      setTransition(() => {
        (!disabled || !focusable && focusable !== void 0) && setHover(false);
      });
    }),
    [setHover, props == null ? void 0 : props.onHoverOut, disabled, focusable]
  );
  const onFocus = useCallback(
    composeEventHandlers((props == null ? void 0 : props.onFocus) || void 0, () => {
      setTransition(() => {
        (!disabled || !focusable && focusable !== void 0) && setFocus(true);
      });
    }),
    [setFocus, props == null ? void 0 : props.onFocus, disabled, focusable]
  );
  const onBlur = useCallback(
    composeEventHandlers((props == null ? void 0 : props.onBlur) || void 0, () => {
      setTransition(() => {
        (!disabled || !focusable && focusable !== void 0) && setFocus(false);
      });
    }),
    [setFocus, props == null ? void 0 : props.onBlur, disabled, focusable]
  );
  return useMemo(
    () => ({
      state: { active, hover, focus },
      props: {
        ...props,
        onPressIn,
        onPressOut,
        onHoverIn,
        onHoverOut,
        onBlur,
        onFocus
      }
    }),
    [
      props,
      active,
      hover,
      focus,
      onPressIn,
      onPressOut,
      onHoverIn,
      onHoverOut,
      onBlur,
      onFocus
    ]
  );
};
export {
  useInteraction
};
//# sourceMappingURL=useInteraction.js.map