@gfazioli/mantine-flip
Version:
Flip component is a wrapper for any component that can be flipped. It is used to create cards, flip boxes and more.
32 lines (28 loc) • 1.01 kB
JavaScript
'use client';
;
var React = require('react');
var core = require('@mantine/core');
var Flip_context = require('../Flip.context.cjs');
const defaultProps = {
refProp: "ref"
};
const FlipTarget = React.forwardRef((props, ref) => {
const { children, refProp, ...others } = core.useProps("FlipTarget", defaultProps, props);
if (!core.isElement(children)) {
throw new Error(
"Flip.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
);
}
const ctx = Flip_context.useFlipContext();
const onClick = core.createEventHandler(
children.props.onClick,
() => ctx.toggleFlip()
);
return /* @__PURE__ */ React.createElement("div", { ref, ...others }, React.cloneElement(children, {
onClick,
"data-flipped": ctx.flipped ? true : void 0
}));
});
FlipTarget.displayName = "FlipTarget";
exports.FlipTarget = FlipTarget;
//# sourceMappingURL=FlipTarget.cjs.map