Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 51 52 53 | 1x 1x 1x 1x 1x 1x | import React from 'react';
import PropTypes from 'prop-types';
import { keyframes } from '@emotion/react';
import Paper from '../../atoms/Paper';
const wave = keyframes`
from {
transform: scale(0, 0);
}
to {
transform: scale(1, 1);
}
`;
const defaultCss = {
animation: `${wave} 1.8s cubic-bezier(0.075, 0.820, 0.165, 1.000) forwards 1`,
display: 'block',
opacity: 0.24,
position: 'absolute',
transition: 'opacity 0.4s ease',
willChange: 'opacity, transform',
};
const getStyle = (released, css) => {
if (released) return { ...defaultCss, ...css, opacity: 0 };
return { ...defaultCss, ...css };
};
const Wave = ({ css, onDissolve, released, size }) => (
<Paper
element="span"
css={getStyle(released, css)}
primary
size={size}
onTransitionEnd={onDissolve}
round
/>
);
Wave.propTypes = {
onDissolve: PropTypes.func,
released: PropTypes.bool,
size: PropTypes.number.isRequired,
css: PropTypes.shape().isRequired,
};
Wave.defaultProps = {
onDissolve: undefined,
released: false,
};
export default Wave;
|