@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
80 lines • 3.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useManageState = void 0;
const react_1 = require("react");
const states_1 = require("../../types/states/states");
const useManageState = ({ disabled = false, loading = false, active = false, ...props }) => {
const [over, setOver] = (0, react_1.useState)(false);
const [pressed, setPressed] = (0, react_1.useState)(false);
const innerRef = (0, react_1.useRef)(null);
(0, react_1.useImperativeHandle)(props.ref, () => {
return innerRef?.current;
}, []);
const supportHover = () => {
if (typeof window !== 'undefined' && window?.matchMedia) {
const query = window.matchMedia('(hover: none)');
return !query.matches;
}
return true;
};
const onMouseEnter = () => {
setOver(true);
};
const onMouseLeave = () => {
setOver(false);
};
const onPointerDown = () => {
setPressed(true);
};
const onPointerCancel = () => {
setPressed(false);
};
const onPointerUp = () => {
setPressed(false);
};
const setRef = (0, react_1.useCallback)(node => {
if (node) {
innerRef.current = node;
if (props.states.includes(states_1.STATES.PRESSED)) {
innerRef?.current?.addEventListener('pointerdown', onPointerDown);
innerRef?.current?.addEventListener('pointercancel', onPointerCancel);
window.addEventListener('pointerup', onPointerUp);
}
if (supportHover() && props.states.includes(states_1.STATES.HOVER)) {
innerRef?.current?.addEventListener('mouseenter', onMouseEnter);
innerRef?.current?.addEventListener('mouseleave', onMouseLeave);
}
}
else {
// delete over listeners
innerRef?.current?.removeEventListener('mouseenter', onMouseEnter);
innerRef?.current?.removeEventListener('mouseleave', onMouseLeave);
// delete pressed listeners
innerRef?.current?.removeEventListener('pointerdown', onPointerDown);
innerRef?.current?.removeEventListener('pointercancel', onPointerCancel);
window.removeEventListener('pointerup', onPointerUp);
innerRef.current = node;
}
}, []);
const state = (0, react_1.useMemo)(() => {
if (props.states.includes(states_1.STATES.LOADING) && loading) {
return states_1.STATES.LOADING;
}
if (props.states.includes(states_1.STATES.DISABLED) && disabled) {
return states_1.STATES.DISABLED;
}
if (props.states.includes(states_1.STATES.ACTIVE) && active) {
return states_1.STATES.ACTIVE;
}
if (props.states.includes(states_1.STATES.PRESSED) && pressed) {
return states_1.STATES.PRESSED;
}
if (props.states.includes(states_1.STATES.HOVER) && over) {
return states_1.STATES.HOVER;
}
return states_1.STATES.DEFAULT;
}, [props.states, disabled, loading, active, over, pressed]);
return { state, setRef };
};
exports.useManageState = useManageState;
//# sourceMappingURL=useManageState.js.map