@shopify/shop-minis-react
Version:
React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)
58 lines (57 loc) • 1.85 kB
JavaScript
import { jsx as d } from "react/jsx-runtime";
import * as i from "react";
import { useAnimationControls as p } from "../../node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/animation/hooks/use-animation.js";
import { motion as f } from "../../node_modules/.pnpm/motion@12.17.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
const y = ({
children: l,
onClick: a,
stopPropagation: e = !1,
...u
}) => {
const r = i.useRef(null), o = p(), m = i.useCallback(
(t) => {
e && t.stopPropagation(), a?.(t);
},
[e, a]
);
return i.useEffect(() => {
if (!e || !r.current) return;
const t = r.current, s = (n) => {
n.stopImmediatePropagation(), n.stopPropagation(), o.start({
scale: 0.95,
opacity: 0.7
});
}, c = (n) => {
n.stopImmediatePropagation(), n.stopPropagation(), o.start({
scale: 1,
opacity: 1
});
};
return t.addEventListener("pointerdown", s, !0), t.addEventListener("pointerup", c, !0), () => {
t.removeEventListener("pointerdown", s, !0), t.removeEventListener("pointerup", c, !0);
};
}, [e, o]), /* @__PURE__ */ d(
f.div,
{
ref: r,
"data-touchable": "true",
className: "flex w-full",
animate: e ? o : void 0,
whileTap: e ? void 0 : { scale: 0.95, opacity: 0.7 },
transition: {
scale: { type: "tween", duration: 0.08, ease: "linear" },
opacity: { type: "tween", duration: 0.08, ease: "linear" }
},
onClick: m,
style: {
touchAction: e ? "manipulation" : void 0
},
...u,
children: l
}
);
};
export {
y as Touchable
};
//# sourceMappingURL=touchable.js.map