1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
import {
type ForwardRefRenderFunction,
type HTMLAttributes,
type ReactNode,
forwardRef,
} from 'react';
import styles from './flip.module.scss';
export type FlipProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
/**
* The front and back sides.
*/
children: ReactNode;
/**
* The animation direction.
*
* @default 'horizontal'
*/
direction?: 'horizontal' | 'vertical';
/**
* Should we show back side?
*
* It let you control dynamically which side to show. When set to `true` the
* hover/focus animation will be removed.
*
* @default undefined
*/
showBack?: boolean;
};
const FlipWithRef: ForwardRefRenderFunction<HTMLDivElement, FlipProps> = (
{ children, className = '', direction = 'horizontal', showBack, ...props },
ref
) => {
const wrapperClass = [
styles.wrapper,
styles[`wrapper--${direction}`],
styles[showBack === undefined ? 'wrapper--dynamic' : 'wrapper--manual'],
styles[showBack ? 'wrapper--is-back' : 'wrapper--is-front'],
className,
].join(' ');
return (
<div {...props} className={wrapperClass} ref={ref}>
{children}
</div>
);
};
export const Flip = forwardRef(FlipWithRef);
|
