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

Nexshop Web Contents Project

import React, {Component} from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {v4} from "uuid";
import {dialogEnhancer, actions as dialogActions} from "nexshop-web-dialog";

class ConfirmUpdateContentsItem extends Component {
    constructor() {
        super();

        this.onClickCancel = this.onClickCancel.bind(this);
    }

    onClickCancel() {
        this.props.actions.closeDialog('update-contents-item');
    }

    updateMessage(message) {
        return (message.split("\n").map(splitMessage => {
                return (
                    <div key={v4()} className="confirm-update-contents-item-body">{splitMessage}</div>
                );
            })
        );
    }

    render() {
        let message = "CONTENT " + this.props.name + " is in used.\n Would you like to modify?";

        return (
            <div>
                {
                    this.updateMessage(message)
                }

                <div className="confirm-update-contents-item-caption">
                    Every scene, playlist, schedule with this file will be affected.
                </div>

                <div className="confirm-update-contents-item-footer">
                    <div className="confirm-update-contents-item-footer__cancel" onClick={this.onClickCancel}>CANCEL</div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    let {dialog} = state;
    const visibility = dialog === 'update-contents-item';
    return {visibility};
};

const mapDispatchToProps = (dispatch) => {
    const {openDialog, closeDialog} = dialogActions;

    return {
        actions: bindActionCreators({openDialog, closeDialog}, dispatch)
    }
};

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