All files / molecules/Input index.jsx

23.52% Statements 4/17
0% Branches 0/9
0% Functions 0/7
23.52% Lines 4/17

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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86            1x                                                                                                       1x 1x                       1x                            
import React, { useState } from 'react';
import PropTypes from 'prop-types';
 
import Base from './Base';
import Container from './Container';
 
const Input = ({
  append,
  defaultValue,
  label,
  onBlur,
  onChange,
  onFocus,
  placeholder,
  prepend,
  value,
  ...rest
}) => {
  const [hasFocus, setHasFocus] = useState(false);
  const [localValue, setLocalValue] = useState(value || defaultValue);
  const [labelWidth, setLabelWidth] = useState(0);
  const componentValue = value || localValue;
  const hasAddons = (prepend || append) && true;
  const labelIsActive = hasFocus || componentValue !== '';
  return (
    <Container
      {...rest}
      hasAddons={hasAddons}
      labelIsActive={labelIsActive}
      labelWidth={labelWidth}
    >
      {prepend}
      <Base
        {...rest}
        hasFocus={hasFocus}
        label={label}
        labelIsActive={labelIsActive}
        onChange={event => {
          setLocalValue(event.target.value);
          onChange(event);
        }}
        onBlur={event => {
          setHasFocus(false);
          onBlur(event);
        }}
        onFocus={event => {
          setHasFocus(true);
          onFocus(event);
        }}
        placeholder={placeholder}
        setLabelWidth={setLabelWidth}
        value={componentValue}
      />
      {append}
    </Container>
  );
};
 
Input.displayName = 'Input';
Input.propTypes = {
  append: PropTypes.node,
  defaultValue: PropTypes.node,
  label: PropTypes.node,
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
  outlined: PropTypes.bool,
  placeholder: PropTypes.node,
  prepend: PropTypes.node,
  value: PropTypes.node,
};
Input.defaultProps = {
  append: null,
  defaultValue: '',
  label: null,
  onBlur() {},
  onChange() {},
  onFocus() {},
  outlined: false,
  placeholder: null,
  prepend: null,
  value: null,
};
 
export default Input;