All files / molecules/Input/Base index.jsx

80% Statements 4/5
0% Branches 0/4
0% Functions 0/1
80% Lines 4/5

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 54 55 56 57                1x                                                     1x 1x                     1x                  
import React from 'react';
import PropTypes from 'prop-types';
 
import Label from './Label';
import ListItemBody from '../../List/Item/Body';
import Font from '../../../atoms/Font';
import withStyle from '../../../Theme/withStyle';
 
const InputBase = ({
  color,
  css,
  hasFocus,
  label,
  labelIsActive,
  outlined,
  placeholder,
  setLabelWidth,
  value,
  ...rest
}) => (
  <ListItemBody fitTop fitBottom>
    <Font {...rest} element="input" css={css} placeholder={label || placeholder} value={value} />
    {label && (
      <Label
        active={labelIsActive}
        color={color}
        height={css.height}
        label={label}
        outlined={outlined}
        setLabelWidth={setLabelWidth}
      />
    )}
  </ListItemBody>
);
 
InputBase.displayName = 'InputBase';
InputBase.propTypes = {
  css: PropTypes.shape(),
  color: PropTypes.string,
  hasFocus: PropTypes.bool.isRequired,
  label: PropTypes.node,
  labelIsActive: PropTypes.bool.isRequired,
  outlined: PropTypes.bool,
  placeholder: PropTypes.node,
  setLabelWidth: PropTypes.func.isRequired,
  value: PropTypes.node.isRequired,
};
InputBase.defaultProps = {
  css: {},
  color: null,
  outlined: false,
  placeholder: null,
  label: undefined,
};
 
export default withStyle(InputBase);