nexshop-web-contents/src/component/dialog/confirm-overwrite-contents-item/confirm-overwrite-contents-item.js

Nexshop Web Contents Project

import React, {Component} from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {actions as dialogActions, dialogEnhancer} from "nexshop-web-dialog";
import {contentsActions} from "nexshop-web-store";
import {Checkbox} from "nexshop-web-elements";

class ConfirmOverwriteContentsItem extends Component {
    constructor(props) {
        super(props);

        this.onClickSkip = this.onClickSkip.bind(this);
        this.onClickCheckbox = this.onClickCheckbox.bind(this);
        this.onClickOverwrite = this.onClickOverwrite.bind(this);

        this.state = {
            isApplyToAll: false,
        };
    }

    onClickSkip() {
        const {actions: {setBehaviorExistFile, uploadFileExist, closeDialog}, willOverwriteContent} = this.props;

        if (this.state.isApplyToAll) {
            setBehaviorExistFile('SKIP');
        }

        uploadFileExist(willOverwriteContent[0]);
        closeDialog('overwrite-contents-item');
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.isApplyToAll !== nextState.isApplyToAll) {
            return true;
        }
        return this.props.willOverwriteContent[0].name !== nextProps.willOverwriteContent[0].name;
    }

    onClickCheckbox() {
        this.setState({
            isApplyToAll: !this.state.isApplyToAll
        });
    }

    onClickOverwrite() {
        const {actions: {updateFilesAsync, closeDialog, setBehaviorExistFile}, willOverwriteContent} = this.props;

        if (this.state.isApplyToAll) {
            setBehaviorExistFile('OVERWRITE');
        } else {
            updateFilesAsync(willOverwriteContent[0]);
        }

        closeDialog('overwrite-contents-item');
    }

    render() {
        const {willOverwriteContent} = this.props;

        return (
            <div>
                <div className="confirm-overwrite-contents-item-body">
                    <div className="confirm-overwrite-contents-item-message">
                        <b>{willOverwriteContent[0].name}</b> already exist.
                    </div>
                    <div className="confirm-overwrite-contents-item-message">
                        Would you like to overwrite?
                    </div>
                </div>
                <caption className="confirm-overwrite-contents-item-caption">
                    All scenes, playlists, and schedules with this file will be affected.
                </caption>
                <div className="confirm-overwrite-contents-item-footer">
                    <Checkbox label='Apply to all' width={150} labelFontSize={12}
                              checked={this.state.isApplyToAll}
                              onCheck={this.onClickCheckbox}/>
                    <div className='confirm-overwrite-contents-item-footer-button'>
                        <div className="confirm-overwrite-contents-item-footer-button__overwrite"
                             onClick={this.onClickOverwrite}>OVERWRITE
                        </div>
                        <div className="confirm-overwrite-contents-item-footer-button__skip" onClick={this.onClickSkip}>
                            SKIP
                        </div>
                    </div>

                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    let {dialog, contents: {selectedUploadFiles, willOverwriteContent, behaviorExistFile}} = state;
    const visibility = dialog === 'overwrite-contents-item';
    return {visibility, selectedUploadFiles, willOverwriteContent, behaviorExistFile};
};

const mapDispatchToProps = (dispatch) => {
    const {closeDialog} = dialogActions;
    const {uploadFilesAsync, uploadFileExist, setBehaviorExistFile, willBeOverwroteContentItem, updateFilesAsync} = contentsActions;

    return {
        actions: bindActionCreators({
            closeDialog,
            uploadFilesAsync,
            uploadFileExist,
            setBehaviorExistFile,
            willBeOverwroteContentItem,
            updateFilesAsync
        }, dispatch)
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(dialogEnhancer(ConfirmOverwriteContentsItem));