summaryrefslogtreecommitdiffstats
path: root/webapp/components/toggle_modal_button.jsx
blob: 69bdbbda0f09cc76f9504425b3c14ee76d539644 (plain)
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
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.

import React from 'react';

export default class ModalToggleButton extends React.Component {
    constructor(props) {
        super(props);

        this.show = this.show.bind(this);
        this.hide = this.hide.bind(this);

        this.state = {
            show: false
        };
    }

    show(e) {
        e.preventDefault();
        this.setState({show: true});
    }

    hide() {
        this.setState({show: false});
    }

    render() {
        const {children, dialogType, dialogProps, onClick, ...props} = this.props; // eslint-disable-line no-use-before-define

        // allow callers to provide an onClick which will be called before the modal is shown
        let clickHandler = this.show;
        if (onClick) {
            clickHandler = (e) => {
                onClick();

                this.show(e);
            };
        }

        // this assumes that all modals will have a show property and an onHide event
        const dialog = React.createElement(this.props.dialogType, Object.assign({}, dialogProps, {
            show: this.state.show,
            onHide: () => {
                this.hide();

                if (dialogProps.onHide) {
                    dialogProps.onHide();
                }
            }
        }));

        // nesting the dialog in the anchor tag looks like it shouldn't work, but it does due to how react-bootstrap
        // renders modals at the top level of the DOM instead of where you specify in the virtual DOM
        return (
            <a
                {...props}
                href='#'
                onClick={clickHandler}
            >
                {children}
                {dialog}
            </a>
        );
    }
}

ModalToggleButton.propTypes = {
    children: React.PropTypes.node.isRequired,
    dialogType: React.PropTypes.func.isRequired,
    dialogProps: React.PropTypes.object,
    onClick: React.PropTypes.func
};

ModalToggleButton.defaultProps = {
    dialogProps: {}
};