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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
1x
1x
1x
 
 
 
27x
 
27x
27x
27x
27x
 
 
 
12x
 
 
 
1x
 
 
 
14x
12x
12x
12x
 
 
 
 
2x
2x
 
 
 
 
 
3x
3x
3x
 
 
 
3x
2x
 
 
 
 
 
28x
 
28x
 
 
 
 
 
 
 
 
 
 
 
 
9x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
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,
};