handleAddFile() {

const { ext } = this.props.env;

const { files } = this.props.current;

const language = languages.find(language => language.ext === ext);

const newFile = { ...language.skeleton };

let count = 0;

while (files.some(file => file.name === newFile.name)) newFile.name = `code-${++count}.${ext}`;

this.props.addFile(newFile);

}

render() {

const { className, children } = this.props;

const { editingFile, files } = this.props.current;

return (

<div className={classes(styles.tab_container, className)}>

<div className={styles.tab_bar}>

<div className={classes(styles.title, styles.fake)}/>

{

files.map((file, i) => file === editingFile ? (

<div className={classes(styles.title, styles.selected)} key={i}

onClick={() => this.props.setEditingFile(file)}>

<AutosizeInput className={styles.input_title} value={file.name}

onClick={e => e.stopPropagation()}

onChange={e => this.props.renameFile(file, e.target.value)}/>

</div>

) : (

<div className={styles.title} key={i} onClick={() => this.props.setEditingFile(file)}>

{file.name}

</div>

))

}

<div className={styles.title} onClick={() => this.handleAddFile()}>

<FontAwesomeIcon fixedWidth icon={faPlus}/>

</div>

<div className={classes(styles.title, styles.fake)}/>

</div>

<div className={styles.content}>

{children}

</div>

</div>

);

}