import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import FontAwesome from 'react-fontawesome';

import './CreateCardItem.css';

class CreateCardItem extends Component {

	handleEnterKey = (event) => {

		if (event.keyCode === 13) {
			event.preventDefault();
			this.props.handleSubmit();
		}
	}

	focusOnForm(isFocusOnForm) {

		const { cardActions } = this.props;
    
    if (isFocusOnForm) {
      cardActions.focusOnCardItemForm();
    } else {
      cardActions.blurOnCardItemForm();
    }
  }

  render() {
    return (
			<div 
				className="Create-Card-Item-Form"
				tabIndex="0" 
				onFocus={() => { this.focusOnForm(true) }}
				onBlur={() => { this.focusOnForm(false) }} 
			>
				<form onSubmit={ this.props.handleSubmit }>
					<Field
						className="Create-Card-Item-Form-Card-Title"
						autoFocus={true}
						type="text" 
						name="name"
						value=""
						component="textarea"
						dir="auto"
						onKeyDown={ this.handleEnterKey }
					/>
					<div className="Create-Card-Item-Form-Footer">
						<button type="submit" className="Create-Card-Item-Form-SubmitButton">Save</button>
						<FontAwesome 
							name="times"
							size="2x"
							className="Create-Card-Item-Form-Header-Close-Button"
							onClick={ () => this.props.cardActions.closeCreateCardItemForm() }
						/>
					</div>
				</form>
      </div>
    );
  }
}

export default  reduxForm({ form: 'createCardItemForm' })(CreateCardItem);
@@ -18,16 +18,27 @@
 omponent
+, PropTypes
  %7D from 
@@ -171,16 +171,138 @@
 .css';%0A%0A
+const propTypes = %7B%0A  isCreateCardItemFormOpen: PropTypes.bool.isRequired,%0A%0A  cardActions: PropTypes.object.isRequired%0A%7D%0A%0A
 class Cr
@@ -1528,16 +1528,55 @@
 %0A  %7D%0A%7D%0A%0A
+CreateCardItem.propTypes = propTypes;%0A%0A
 export d

Add PropTypes to CreateCardItem component