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; |