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

Nexshop Web Contents Project

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Divider from 'material-ui/Divider';
import {resolutionItems} from "nexshop-web-store";
import Search from 'nexshop-web-search';
import {AddButton, ContextMenu, ContextMenuItemView, CreateWithResolutionView} from 'nexshop-web-elements';
import ConfirmDeleteContentsItem from "./dialog/confirm-delete-contents-item/confirm-delete-contents-item";
import MoveTo from "./dialog/move-to/move-to";
import ManageTag from "./dialog/manage-tag/manage-tag";
import Contents from "./contents/contents";
import ConfirmOverwriteContentsItem from './dialog/confirm-overwrite-contents-item/confirm-overwrite-contents-item';

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

        this.state = {
            title: '',
        };

        this.onFilesSelected = this.onFilesSelected.bind(this);
        this.onTitleChange = this.onTitleChange.bind(this);
        this.onTitleInputBlur = this.onTitleInputBlur.bind(this);
        this.onCloseOverwriteDialog = this.onCloseOverwriteDialog.bind(this);
    }

    onFilesSelected(e) {
        const files = [...e.target.files];

        this.props.onSelectFiles(files);
    }

    getDialogErrorText() {
        const {contentNameExisted} = this.props;

        if (this.state.title.length > 0 && contentNameExisted === 'EXIST') {
            return 'Above name already exists. Try again with a different name.';
        }

        return '';
    }

    onTitleChange(title) {
        this.setState({title});
        this.props.replaceContentNameValidity('NONE');
    }

    onTitleInputBlur() {
        const {fetchExistContentNameAsync, breadcrumb, createSceneDialogVisibility} = this.props;
        const dialogType = createSceneDialogVisibility ? 'Scene' : 'Playlist';

        fetchExistContentNameAsync(breadcrumb[breadcrumb.length - 1].id, dialogType, this.state.title);
    }

    onCloseOverwriteDialog() {
        this.props.uploadFileExist(this.props.willOverwriteContent[0]);
        this.props.closeDialog();
    }

    render() {
        const {
            addMenuVisibility,
            onCreatePlaylistMenuClicked,
            onPlaylistCreated,
            onCreateSceneMenuClicked,
            onSceneCreated,
            onAddButtonClicked,
            onCreateNewFolderClicked,
            createSceneDialogVisibility,
            createPlaylistDialogVisibility,
            closeDialog,
            closeAddMenu,
            history
        } = this.props;

        return (
            <div className="content">
                <div className="search">
                    <Search history={history}/>
                </div>
                <AddButton className="add-button-wrapper"
                           isActivation={addMenuVisibility}
                           onClick={onAddButtonClicked}
                />
                <Contents history={this.props.history}/>
                <ContextMenu popupStyle={{top: '86px', right: '40px'}}
                             onClose={() => closeAddMenu('add-menu')}
                             isShow={addMenuVisibility}
                >
                    <ContextMenuItemView text="New folder" onClick={onCreateNewFolderClicked}/>
                    <Divider style={{marginTop: '5px', marginBottom: '5px'}}/>
                    <ContextMenuItemView className="upload-file">
                        <span className="upload-file__text">Upload Files</span>
                        <input type="file" className="upload-file__input"
                               accept="image/gif, image/jpg, image/png, image/tiff, image/bmp, video/mp4" multiple
                               onChange={this.onFilesSelected}
                        />
                    </ContextMenuItemView>
                    <Divider style={{marginTop: '5px', marginBottom: '5px'}}/>
                    <ContextMenuItemView text="New scene" onClick={onCreateSceneMenuClicked}/>
                    <ContextMenuItemView text="New playlist" onClick={onCreatePlaylistMenuClicked}/>
                </ContextMenu>
                <CreateWithResolutionView label={'Scene Name'}
                                          visibility={createSceneDialogVisibility}
                                          errorText={this.getDialogErrorText()}
                                          onTitleChange={this.onTitleChange}
                                          onTitleInputBlur={this.onTitleInputBlur}
                                          onCancel={closeDialog}
                                          onClose={closeDialog}
                                          onCreated={onSceneCreated}
                                          resolutionItems={resolutionItems.RESOLUTION_ITEMS}
                />
                <CreateWithResolutionView label={'Playlist Name'}
                                          visibility={createPlaylistDialogVisibility}
                                          errorText={this.getDialogErrorText()}
                                          onTitleChange={this.onTitleChange}
                                          onTitleInputBlur={this.onTitleInputBlur}
                                          onCancel={closeDialog}
                                          onClose={closeDialog}
                                          onCreated={onPlaylistCreated}
                                          resolutionItems={resolutionItems.RESOLUTION_ITEMS}
                />
                <ConfirmDeleteContentsItem/>
                <ConfirmOverwriteContentsItem onClose={this.onCloseOverwriteDialog}/>
                <MoveTo/>
                <ManageTag/>
            </div>
        );
    }
}

ContentsMainView.propTypes = {
    addMenuVisibility: PropTypes.bool.isRequired,
    closeAddMenu: PropTypes.func.isRequired,
    onAddButtonClicked: PropTypes.func.isRequired,
    onCreatePlaylistMenuClicked: PropTypes.func.isRequired,
    onPlaylistCreated: PropTypes.func,
    onCreateSceneMenuClicked: PropTypes.func.isRequired,
    onSceneCreated: PropTypes.func,
    onSelectFiles: PropTypes.func,
    onCreateNewFolderClicked: PropTypes.func,
    closeDialog: PropTypes.func.isRequired,
    breadcrumb: PropTypes.array.isRequired,
    contentNameExisted: PropTypes.string.isRequired,
    fetchExistContentNameAsync: PropTypes.func.isRequired,
    replaceContentNameValidity: PropTypes.func.isRequired,
    uploadFileExist: PropTypes.func,
    willOverwriteContent: PropTypes.array,
};