@crossed/styled
Version:
A universal & performant styling library for React Native, Next.js & React
121 lines (120 loc) • 4.35 kB
JavaScript
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var useInteraction_exports = {};
__export(useInteraction_exports, {
useInteraction: () => useInteraction
});
module.exports = __toCommonJS(useInteraction_exports);
var import_core = require("@crossed/core");
var import_react = require("react");
const useInteraction = (props) => {
const { disabled, focusable } = props || {};
const [active, setActive] = (0, import_core.useUncontrolled)({
value: props == null ? void 0 : props.active,
defaultValue: false
});
const [hover, setHover] = (0, import_core.useUncontrolled)({
value: props == null ? void 0 : props.hover,
defaultValue: false
});
const [focus, setFocus] = (0, import_core.useUncontrolled)({
value: props == null ? void 0 : props.focus,
defaultValue: false
});
const [, setTransition] = (0, import_react.useTransition)();
const onPressIn = (0, import_react.useCallback)(
(0, import_core.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 = (0, import_react.useCallback)(
(0, import_core.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 = (0, import_react.useCallback)(
(0, import_core.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 = (0, import_react.useCallback)(
(0, import_core.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 = (0, import_react.useCallback)(
(0, import_core.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 = (0, import_react.useCallback)(
(0, import_core.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 (0, import_react.useMemo)(
() => ({
state: { active, hover, focus },
props: {
...props,
onPressIn,
onPressOut,
onHoverIn,
onHoverOut,
onBlur,
onFocus
}
}),
[
props,
active,
hover,
focus,
onPressIn,
onPressOut,
onHoverIn,
onHoverOut,
onBlur,
onFocus
]
);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
useInteraction
});
//# sourceMappingURL=useInteraction.js.map