All files / fx/Ripple Wave.jsx

60% Statements 6/10
0% Branches 0/2
0% Functions 0/2
66.66% Lines 6/9

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;