All files / nexshop-web-contents/src/component/dialog/confirm-delete-contents-item confirm-delete-contents-item.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
1x
1x
1x
1x
1x
1x
 
1x
 
 
 
15x
 
15x
15x
15x
 
 
 
1x
1x
1x
 
 
 
1x
 
 
 
15x
18x
 
 
 
 
 
 
 
15x
15x
 
15x
15x
3x
 
12x
 
15x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
15x
15x
15x
 
 
1x
15x
 
15x
 
 
 
 
 
import React, {Component} from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {dialogEnhancer, actions as dialogActions} from "nexshop-web-dialog";
import {contentsActions} from "nexshop-web-store";
import {v4} from "uuid";
 
const {deleteContentsItem} = contentsActions;
 
class ConfirmDeleteContentsItem extends Component {
    constructor() {
        super();
 
        this.onClickCancel = this.onClickCancel.bind(this);
        this.onClickDelete = this.onClickDelete.bind(this);
        this.deleteMessage = this.deleteMessage.bind(this);
    }
 
    onClickDelete() {
        const {deleteIndex, actions: {deleteContentsItem, closeDialog}} = this.props;
        deleteContentsItem(deleteIndex);
        closeDialog();
    }
 
    onClickCancel() {
        this.props.actions.closeDialog();
    }
 
    deleteMessage(message) {
        return (message.split("\n").map(splitMessage => {
                return (
                    <div key={v4()} className="confirm-delete-contents-item-body">{splitMessage}</div>
                );
            })
        );
    }
 
    render() {
        const {willDeleteContent, used} = this.props;
        const name =  willDeleteContent ? willDeleteContent.name : "";
 
        let message = '';
        if (used === "USED") {
            message = "CONTENT " + name + " is in used.\n Would you like to delete?";
        } else {
            message = 'Would you like to delete?';
        }
        return (
            <div>
                {
                    this.deleteMessage(message)
                }
                {
                    used === "USED" &&
                    <caption className="confirm-delete-contents-item-caption">
                        Every scene, playlist, schedule with this file will be affected.
                    </caption>
                }
                <div className="confirm-delete-contents-item-footer">
                    {
                        used !== "USED" &&
                        <div className="confirm-delete-contents-item-footer__delete" onClick={this.onClickDelete}>DELETE
                        </div>
                    }
                    <div className="confirm-delete-contents-item-footer__cancel" onClick={this.onClickCancel}>CANCEL
                    </div>
                </div>
            </div>
        );
    }
}
 
const mapStateToProps = (state) => {
    let {dialog, contents: {deleteIndex, willDeleteContent, used}} = state;
    const visibility = dialog === 'delete-contents-item';
    return {visibility, deleteIndex, willDeleteContent, used};
};
 
const mapDispatchToProps = (dispatch) => {
    const {openDialog, closeDialog} = dialogActions;
 
    return {
        actions: bindActionCreators({openDialog, closeDialog, deleteContentsItem}, dispatch)
    }
};
 
export default connect(mapStateToProps, mapDispatchToProps)(dialogEnhancer(ConfirmDeleteContentsItem));