p5.js-web-editor/client/modules/IDE/components/NewFolderForm.js

41 lines
1 KiB
JavaScript
Raw Normal View History

2016-08-30 03:23:10 +00:00
import React, { PropTypes } from 'react';
class NewFolderForm extends React.Component {
constructor(props) {
super(props);
this.createFolder = this.props.createFolder.bind(this);
}
componentDidMount() {
this.refs.fileName.focus();
}
2016-08-30 03:23:10 +00:00
render() {
const { fields: { name }, handleSubmit } = this.props;
return (
<form className="new-folder-form" onSubmit={handleSubmit(this.createFolder)}>
<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="fileName"
{...name}
/>
<input type="submit" value="Add Folder" aria-label="add folder" />
</form>
);
}
}
NewFolderForm.propTypes = {
fields: PropTypes.shape({
2016-08-30 03:26:45 +00:00
name: PropTypes.object.isRequired
2016-08-30 03:23:10 +00:00
}).isRequired,
handleSubmit: PropTypes.func.isRequired,
createFolder: PropTypes.func.isRequired
};
export default NewFolderForm;