fanyucomponents/dist/components/StateStylesComponent.js

一款以 純邏輯為核心、無樣式綁定 的 React 元件套件

import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from "react";
export const StateStylesComponent = (props) => {
    const { as = "div", style, styles, onPointerEnter, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...rest } = props;
    const Tag = as;
    const isEnabled = !("disabled" in rest && rest.disabled);
    const [isHovered, setIsHovered] = useState(false);
    const [isFocused, setIsFocused] = useState(false);
    const [isPressed, setIsPressed] = useState(false);
    const currentStyle = {
        ...style,
        ...(isEnabled
            ? {
                ...styles === null || styles === void 0 ? void 0 : styles.enabled,
                ...(isPressed ? styles === null || styles === void 0 ? void 0 : styles.pressed : {}),
                ...(isHovered ? styles === null || styles === void 0 ? void 0 : styles.hover : {}),
                ...(isFocused ? styles === null || styles === void 0 ? void 0 : styles.focus : {}),
            }
            : { ...styles === null || styles === void 0 ? void 0 : styles.disabled }),
    };
    return (_jsx(Tag, { onPointerEnter: (...args) => {
            setIsHovered(true);
            onPointerEnter === null || onPointerEnter === void 0 ? void 0 : onPointerEnter(...args);
        }, onPointerLeave: (...args) => {
            setIsHovered(false);
            setIsPressed(false);
            onPointerLeave === null || onPointerLeave === void 0 ? void 0 : onPointerLeave(...args);
        }, onPointerDown: (...args) => {
            args[0].currentTarget.setPointerCapture(args[0].pointerId); // 讓 pointerUp 確保會回來
            setIsPressed(true);
            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(...args);
        }, onPointerUp: (...args) => {
            var _a, _b;
            const Event = args[0];
            if ((_b = (_a = Event.currentTarget).hasPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, Event.pointerId)) {
                Event.currentTarget.releasePointerCapture(Event.pointerId);
            }
            setIsPressed(false);
            onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(...args);
        }, onFocus: (...args) => {
            setIsFocused(true);
            onFocus === null || onFocus === void 0 ? void 0 : onFocus(...args);
        }, onBlur: (...args) => {
            setIsFocused(false);
            onBlur === null || onBlur === void 0 ? void 0 : onBlur(...args);
        }, style: currentStyle, ...rest }));
};
StateStylesComponent.displayName = "StateStylesComponent";