team_settings_modal.jsx 4.49 KB
Newer Older
1
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
2
// See LICENSE.txt for license information.
3 4

import $ from 'jquery';
5
import React from 'react';
6
import PropTypes from 'prop-types';
7
import ReactDOM from 'react-dom';
8
import {Modal} from 'react-bootstrap';
9 10
import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';

Asaad Mahmood's avatar
Asaad Mahmood committed
11
import * as Utils from 'utils/utils.jsx';
12
import {t} from 'utils/i18n';
13 14
import {AsyncComponent} from 'components/async_load';
import loadSettingsSidebar from 'bundle-loader?lazy!./settings_sidebar.jsx';
15

16
import TeamSettings from './team_settings';
17 18 19

const holders = defineMessages({
    generalTab: {
20
        id: t('team_settings_modal.generalTab'),
21
        defaultMessage: 'General',
22 23
    },
    importTab: {
24
        id: t('team_settings_modal.importTab'),
25 26
        defaultMessage: 'Import',
    },
27 28 29 30 31 32 33 34
});

class TeamSettingsModal extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            activeTab: 'general',
35
            activeSection: '',
36 37
        };
    }
Asaad Mahmood's avatar
Asaad Mahmood committed
38

39
    componentDidMount() {
Asaad Mahmood's avatar
Asaad Mahmood committed
40 41 42
        if (!Utils.isMobile()) {
            $('.settings-modal .settings-content').perfectScrollbar();
        }
43
    }
44 45 46 47

    updateTab = (tab) => {
        this.setState({
            activeTab: tab,
48
            activeSection: '',
49 50
        });

Asaad Mahmood's avatar
Asaad Mahmood committed
51 52 53
        if (!Utils.isMobile()) {
            $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
        }
54
    }
55 56

    updateSection = (section) => {
57 58 59
        if ($('.section-max').length) {
            $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
        }
60

61 62
        this.setState({activeSection: section});
    }
63 64 65 66 67 68 69 70 71 72

    closeModal = () => {
        this.props.onModalDismissed();
    }

    collapseModal = () => {
        $(ReactDOM.findDOMNode(this.refs.modalBody)).closest('.modal-dialog').removeClass('display--content');

        this.setState({
            active_tab: '',
73
            active_section: '',
74 75 76 77 78 79 80
        });
    }

    handleHide = () => {
        this.props.onModalDismissed();
    }

81 82 83 84 85 86 87 88
    // called after the dialog is fully hidden and faded out
    handleHidden = () => {
        this.setState({
            activeTab: 'general',
            activeSection: '',
        });
    }

89 90 91
    render() {
        const {formatMessage} = this.props.intl;
        const tabs = [];
92 93
        tabs.push({name: 'general', uiName: formatMessage(holders.generalTab), icon: 'icon fa fa-cog', iconTitle: Utils.localizeMessage('generic_icons.settings', 'Settings Icon')});
        tabs.push({name: 'import', uiName: formatMessage(holders.importTab), icon: 'icon fa fa-upload', iconTitle: Utils.localizeMessage('generic_icons.upload', 'Upload Icon')});
94 95

        return (
96 97 98 99
            <Modal
                dialogClassName='settings-modal settings-modal--action'
                show={this.props.show}
                onHide={this.handleHide}
100
                onExited={this.handleHidden}
101
            >
102 103 104 105 106 107 108 109 110 111 112
                <Modal.Header closeButton={true}>
                    <Modal.Title>
                        <FormattedMessage
                            id='team_settings_modal.title'
                            defaultMessage='Team Settings'
                        />
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body ref='modalBody'>
                    <div className='settings-table'>
                        <div className='settings-links'>
113 114
                            <AsyncComponent
                                doLoad={loadSettingsSidebar}
115 116 117 118
                                tabs={tabs}
                                activeTab={this.state.activeTab}
                                updateTab={this.updateTab}
                            />
119
                        </div>
120 121 122 123 124 125 126 127
                        <div className='settings-content minimize-settings'>
                            <TeamSettings
                                activeTab={this.state.activeTab}
                                activeSection={this.state.activeSection}
                                updateSection={this.updateSection}
                                closeModal={this.closeModal}
                                collapseModal={this.collapseModal}
                            />
128 129
                        </div>
                    </div>
130 131
                </Modal.Body>
            </Modal>
132 133 134 135 136
        );
    }
}

TeamSettingsModal.propTypes = {
137 138
    intl: intlShape.isRequired,
    show: PropTypes.bool,
139
    onModalDismissed: PropTypes.func,
140 141
};

142
export default injectIntl(TeamSettingsModal);