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 | 1x 1x | import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Font from '../../../atoms/Font'; class Label extends Component { ref = node => this.props.setLabelWidth(node.offsetWidth); render() { const { active, color, height, outlined } = this.props; return ( <Font caption={active} color={color} css={{ lineHeight: active ? '20px' : height, pointerEvents: 'none', position: 'absolute', top: 0, transition: ` font-size .24s ease, line-height .24s ease, transform .24s ease `, transform: active && outlined ? 'translateY(-10px)' : '', willChange: 'font-size, line-height, transform', }} atomRef={this.ref} > Label </Font> ); } } Label.propTypes = { active: PropTypes.bool.isRequired, color: PropTypes.string, height: PropTypes.string.isRequired, outlined: PropTypes.bool.isRequired, setLabelWidth: PropTypes.func.isRequired, }; Label.defaultProps = { color: '', }; export default Label; |