All files / molecules/Input/Outline index.jsx

75% Statements 3/4
0% Branches 0/2
0% Functions 0/1
75% Lines 3/4

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              1x                                               1x 1x                
import React from 'react';
import PropTypes from 'prop-types';
 
import Atom from '../../../atoms/Atom';
import Paper from '../../../atoms/Paper';
import withStyle from '../../../Theme/withStyle';
 
const InputOutline = ({ children, css, labelIsActive, labelWidth, ...rest }) => (
  <Paper {...rest} element="fieldset" css={css}>
    <Atom
      element="legend"
      css={{
        position: 'relative',
        zIndex: 2,
        marginLeft: '10px',
        paddingTop: 0,
        paddingLeft: 0,
        paddingBottom: 0,
        paddingRight: 0,
        height: '1px',
        // transform: `scaleX(${labelIsActive ? 1 : 0})`,
        transform: 'scaleX(0)',
        transition: 'width 0.16s ease',
        width: `${labelIsActive ? labelWidth + 8 : 0}px`,
        willChange: 'width',
      }}
    />
    {children}
  </Paper>
);
 
InputOutline.displayName = 'InputOutline';
InputOutline.propTypes = {
  children: PropTypes.node.isRequired,
  css: PropTypes.shape().isRequired,
  labelIsActive: PropTypes.bool.isRequired,
  labelWidth: PropTypes.number.isRequired,
};
 
export default withStyle(InputOutline);