p5.js-web-editor/client/modules/IDE/components/NewFolderForm.jsx
Dhruvdutt Jadhav e7abb55ee7 Fixes #515 Update React to 16 and other dependencies (#519)
* Update to react, react-dom 16.2.0

* Update react-redux

* Update react-tabs

* Update redux-devtools

* Update redux-devtools-dock-monitor

* Update redux-devtools-log-monitor

* Add prop-types package

* Update gitignore

* Update all files to use prop-types package

* Update react-router

* Update react-inlinesvg
2018-02-07 13:06:07 -05:00

49 lines
1.3 KiB
JavaScript

import PropTypes from 'prop-types';
import React from 'react';
import { domOnlyProps } from '../../../utils/reduxFormUtils';
class NewFolderForm extends React.Component {
constructor(props) {
super(props);
this.createFolder = this.props.createFolder.bind(this);
}
componentDidMount() {
this.fileName.focus();
}
render() {
const { fields: { name }, handleSubmit } = this.props;
return (
<form
className="new-folder-form"
onSubmit={(data) => {
handleSubmit(this.createFolder)(data);
this.props.closeModal();
}}
>
<label className="new-folder-form__name-label" htmlFor="name">Name:</label>
<input
className="new-folder-form__name-input"
id="name"
type="text"
placeholder="Name"
ref={(element) => { this.fileName = element; }}
{...domOnlyProps(name)}
/>
<input type="submit" value="Add Folder" aria-label="add folder" />
</form>
);
}
}
NewFolderForm.propTypes = {
fields: PropTypes.shape({
name: PropTypes.object.isRequired
}).isRequired,
handleSubmit: PropTypes.func.isRequired,
createFolder: PropTypes.func.isRequired,
closeModal: PropTypes.func.isRequired
};
export default NewFolderForm;