import React from 'react';
import ReactDOM from 'react-dom';
import style from './index.less';
import close from './img/close.png';
import { Notify } from '@commonComp';
class FolderName extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            folderModal:false
        }
        this.textInput = React.createRef();
        this.saveNewFolder = this.saveNewFolder.bind(this)
    }
    componentDidMount(){
    //   this.textInput.current.focus();
    }
    saveNewFolder(){
        const {saveNewFolder} = this.props
        let val = this.textInput.current.value
        if(val.trim() == ''){
            Notify.info('请输入文件夹名称');
        }
        saveNewFolder(val)
    }
    onKeyPress(event){
        let e = event?event:window.event;
        if (e.keyCode == 13) {
          this.saveNewFolder()
        }
    }
    render() {
        const { folderModalShow,title,newFolder } = this.props;
        const domNode = document.getElementById('root');
        return folderModalShow&&ReactDOM.createPortal(
            <div className={style.newFolderWrap}>
                <div className={style.folderModal} onClick={()=>newFolder(false)}></div>
                <div className={style.nameWrap}>
                    <div className={style.title}>
                        {
                            title?<div className={style.titleCon}>{title}</div>:null
                        }
                        <img src={close} alt="关闭" onClick={()=>newFolder(false)}/>
                    </div>
                    <div className={style.mainWrap}>
                        <span className={style.leftName}>名称：</span>
                        <input className={style['ipt']}
                            placeholder="请输入文件夹名称"
                            type="text"
                            maxLength='20'
                            ref={this.textInput}
                            onKeyPress={e => this.onKeyPress(e)}
                        />
                    </div>
                    <div className={style['delFoot']}>
                        <div className={style.halfBtn}>
                            <span className={`${style['delBtn']} ${style['delDel']}`} onClick={this.saveNewFolder}>保存</span>
                        </div>
                        <div className={style.halfBtn}>
                            <span className={`${style['delBtn']} ${style['delCancel']}`} onClick={()=>newFolder(false)}>取消</span>
                        </div>
                    </div>
                </div> 
            </div>,domNode)
    }
}
export default FolderName;