Functional input react component

gistfile1.txt

/* global window */
import React from 'react'
import PropTypes from 'prop-types'

const InputField = ({
  label = 'Password', 
  invalidLabel = 'The password field is required.', 
  placeholder = 'Enter your password', 
  input, 
  onSubmit, 
  onInputUpdate, 
  width=200, 
  height=40,
  isPasswordField=false,
  isValidInput=true,
  }) => {
  const handleKeyDown = (event) => {
      const ENTER_KEY = 13;
      if (event.keyCode === ENTER_KEY) {
          event.preventDefault();
          onSubmit(event.target.value);
      }
  };

  const inputStyle = {
    width: width,
    height: height,
  }

  return (
    <div className='flex-parent flex-parent--column inputContainer'>
      <span className='flex-child inputLabel'>{label}</span>
      <input className={'inputField' + (isValidInput ? '' : ' invalid')} name='search' style={inputStyle}
                      value={input}
                      onKeyDown={handleKeyDown}
                      placeholder={placeholder}
                      type={isPasswordField ? 'password' : 'text'}
                      onChange={(event) => {
                        onInputUpdate(event.target.value)
                      }}/>
      {!isValidInput && 
        <span className='flex-child invalidLabel'>{invalidLabel}</span>
      }
    <style jsx>{`
      .inputField {
        border-radius: 3px;
        background-color: #ffffff;
        border: solid 1px var(--silver);
        font-family: Roboto;
        font-size: 14px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #828994;
        color: var(--steel);

        padding-left: 15px;
        padding-right: 15px;
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .invalid, .inputField:focus {
        border: solid 1px var(--watermelon)!important;
      }
      .inputField:focus {
        outline: none;
        border: solid 1px var(--steel);
        color: var(--dark);
      }
      .inputLabel {
        font-family: Roboto;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #828994;
        color: var(--steel);
        margin-bottom: 5px;
      }
      .invalidLabel {
        margin-top: 8px;
        font-family: Roboto;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: normal;
        color: #ff4065;
        color: var(--watermelon);
      }
    `}</style>
    </div>
  );
};

InputField.propTypes = {
  label: PropTypes.string,
  placeholder: PropTypes.string,
  invalidLabel: PropTypes.string,
  input: PropTypes.string,
  onSubmit: PropTypes.func.isRequired,
  onInputUpdate: PropTypes.func.isRequired,
  width: PropTypes.number,
  height: PropTypes.number,
  isPasswordField: PropTypes.bool,
  isValidInput: PropTypes.bool,
}

export  default InputField;