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

import {FormattedMessage} from 'react-intl';
import * as Utils from 'utils/utils.jsx';

import PropTypes from 'prop-types';

import React from 'react';

export default function SettingItemMin(props) {
    let editButton = null;
    let describeSection = null;
    if (!props.disableOpen && Utils.isMobile()) {
        editButton = (
            <li className='col-xs-12 col-sm-3 section-edit'>
                <a
                    id={Utils.createSafeId(props.title) + 'Edit'}
                    className='theme'
                    href='#'
                    onClick={props.updateSection}
                >
                    <i className='fa fa-pencil'/>
                    {props.describe}
                </a>
            </li>
        );
    } else if (!props.disableOpen) {
        editButton = (
            <li className='col-xs-12 col-sm-3 section-edit'>
                <a
                    id={Utils.createSafeId(props.title) + 'Edit'}
                    className='theme'
                    href='#'
                    onClick={props.updateSection}
                >
                    <i className='fa fa-pencil'/>
                    <FormattedMessage
                        id='setting_item_min.edit'
                        defaultMessage='Edit'
                    />
                </a>
            </li>
        );

        describeSection = (
            <li
                id={Utils.createSafeId(props.title) + 'Desc'}
                className='col-xs-12 section-describe'
            >
                {props.describe}
            </li>
        );
    }

    return (
        <ul
            className='section-min'
            onClick={props.updateSection}
        >
            <li className='col-xs-12 col-sm-9 section-title'>{props.title}</li>
            {editButton}
            {describeSection}
        </ul>
    );
}

SettingItemMin.propTypes = {
    title: PropTypes.node,
    disableOpen: PropTypes.bool,
    updateSection: PropTypes.func,
    describe: PropTypes.node
};