summaryrefslogtreecommitdiffstats
path: root/webapp/components/autosize_textarea.jsx
blob: 656ce97d2ab37795a412b751c892f3898007616d (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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.

import React from 'react';

export default class AutosizeTextarea extends React.Component {
    static propTypes = {
        value: React.PropTypes.string,
        placeholder: React.PropTypes.string,
        onHeightChange: React.PropTypes.func
    }

    constructor(props) {
        super(props);

        this.height = 0;
    }

    get value() {
        return this.refs.textarea.value;
    }

    set value(value) {
        this.refs.textarea.value = value;
    }

    componentDidUpdate() {
        this.recalculateSize();
    }

    recalculateSize() {
        const height = this.refs.reference.scrollHeight;

        if (height > 0 && height !== this.height) {
            const textarea = this.refs.textarea;

            const style = getComputedStyle(textarea);
            const borderWidth = parseInt(style.borderTopWidth, 10) + parseInt(style.borderBottomWidth, 10);

            // Directly change the height to avoid circular rerenders
            textarea.style.height = String(height + borderWidth) + 'px';

            this.height = height;

            if (this.props.onHeightChange) {
                this.props.onHeightChange(height, parseInt(style.maxHeight, 10));
            }
        }
    }

    getDOMNode() {
        return this.refs.textarea;
    }

    render() {
        const props = {...this.props};

        Reflect.deleteProperty(props, 'onHeightChange');
        Reflect.deleteProperty(props, 'providers');
        Reflect.deleteProperty(props, 'channelId');

        const {
            value,
            placeholder,
            id,
            ...otherProps
        } = props;

        const heightProps = {};
        if (this.height <= 0) {
            // Set an initial number of rows so that the textarea doesn't appear too large when its first rendered
            heightProps.rows = 1;
        } else {
            heightProps.height = this.height;
        }

        return (
            <div>
                <textarea
                    ref='textarea'
                    id={id + '-textarea'}
                    {...heightProps}
                    {...props}
                />
                <div style={{height: 0, overflow: 'hidden'}}>
                    <textarea
                        ref='reference'
                        id={id + '-reference'}
                        style={{height: 'auto', width: '100%'}}
                        disabled={true}
                        value={value}
                        placeholder={placeholder}
                        rows='1'
                        {...otherProps}
                    />
                </div>
            </div>
        );
    }
}