nexshop-web-contents/src/component/contents/folder-view.js

Nexshop Web Contents Project

import React, {Component} from 'react';
import moment from 'moment';
import PropTypes from 'prop-types';

export default class FolderView extends Component {
    constructor(props) {
        super(props);

        this.onKeyUp = this.onKeyUp.bind(this);
        this.folderNameInputBlurred = this.folderNameInputBlurred.bind(this);
        this.focusTitleInputAndSelect = this.focusTitleInputAndSelect.bind(this);
        this.getFolder = this.getFolder.bind(this);
    }

    componentDidMount() {
        this.focusTitleInputAndSelect();
    }

    componentDidUpdate() {
        this.focusTitleInputAndSelect();
    }

    focusTitleInputAndSelect() {
        if (this.titleInput) {
            this.titleInput.value = this.props.folder.name;
            this.titleInput.focus();
            this.titleInput.setSelectionRange(0, this.props.folder.name.length);
        }
    }

    folderNameInputBlurred() {
        let folder = {...this.props.folder};
        this.titleInput.value !== folder.name ?
            this.props.updateFolderAsync(folder, this.titleInput.value) :
            this.props.updateFolderData(this.getFolder(folder));
    }

    getFolder(folder){
        let newFolder = {...folder};
        newFolder.status === 'error' ? newFolder.status = 'new' : delete newFolder.status;
        return newFolder;
    }

    onKeyUp({key}) {
        if (key === 'Escape' || key === 'Enter') {
            this.titleInput.blur();
        }
    }

    render() {
        const {onContextMenu, onDoubleClick, onClick, selectedContentsItemIds = [],
            folder: {lastModifiedTimestamp, name, status, id}} = this.props;

        return (
            <tr className={`folder-item${selectedContentsItemIds.includes(id)?'--selected':''}`}
                onContextMenu={onContextMenu} onClick={onClick} onDoubleClick={onDoubleClick}>
                <td>
                    <div className="folder-item-wrapper">
                        <div className="folder-item-icon"/>
                    </div>
                    <div className="folder-item-wrapper-shadow"/>
                </td>
                <td>
                    {
                        status === 'new' || status === 'error' ?
                            <input className="folder-item-name--new"
                                   ref={input => this.titleInput = input}
                                   onBlur={this.folderNameInputBlurred}
                                   onKeyUp={this.onKeyUp}
                            /> :
                            <div className="folder-item-name">{name}</div>
                    }
                </td>
                <td/>
                <td/>
                <td/>
                <td>
                    {moment(lastModifiedTimestamp).format('MM-DD-YYYY')}
                </td>
                <td>
                    -
                </td>
                <td/>
            </tr>
        );
    }
};

FolderView.propTypes = {
    folder: PropTypes.object.isRequired,
    updateFolderAsync: PropTypes.func.isRequired,
    onContextMenu: PropTypes.func.isRequired,
    onClick: PropTypes.func.isRequired,
    updateFolderData: PropTypes.func.isRequired,
    onDoubleClick: PropTypes.func.isRequired,
    selectedContentsItemIds: PropTypes.array,
};