custom_url_schemes_setting.jsx 2.29 KB
Newer Older
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
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import PropTypes from 'prop-types';
import React from 'react';

import * as Utils from 'utils/utils';

import Setting from './setting';

export default class CustomUrlSchemesSetting extends React.Component {
    static get propTypes() {
        return {
            id: PropTypes.string.isRequired,
            value: PropTypes.array.isRequired,
            onChange: PropTypes.func.isRequired,
            disabled: PropTypes.bool,
            setByEnv: PropTypes.bool.isRequired,
        };
    }

    constructor(props) {
        super(props);

        this.state = {
            value: this.arrayToString(props.value),
        };
    }

    stringToArray = (str) => {
        return str.split(',').map((s) => s.trim()).filter(Boolean);
    };

    arrayToString = (arr) => {
        return arr.join(',');
    };

    handleChange = (e) => {
        const valueAsArray = this.stringToArray(e.target.value);

        this.props.onChange(this.props.id, valueAsArray);

        this.setState({
            value: e.target.value,
        });
    };

    render() {
        const label = Utils.localizeMessage('admin.customization.customUrlSchemes', 'Custom URL Schemes:');
        const helpText = Utils.localizeMessage(
            'admin.customization.customUrlSchemesDesc',
            'Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".'
        );
        const placeholder = Utils.localizeMessage('admin.customization.customUrlSchemesPlaceholder', 'E.g.: "git,smtp"');

        return (
            <Setting
                label={label}
                helpText={helpText}
                inputId={this.props.id}
                setByEnv={this.props.setByEnv}
            >
                <input
                    id={this.props.id}
                    className='form-control'
                    type='text'
                    placeholder={placeholder}
                    value={this.state.value}
                    onChange={this.handleChange}
                    disabled={this.props.disabled || this.props.setByEnv}
                />
            </Setting>
        );
    }
}