UNPKG

@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
'use client'; 'use strict'; 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