webapp/components/emoji_picker/emoji_picker_overlay.jsx


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

// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.

import React from 'react';
import PropTypes from 'prop-types';
import {Overlay} from 'react-bootstrap';

import EmojiPicker from './emoji_picker.jsx';

export default class EmojiPickerOverlay extends React.PureComponent {
    static propTypes = {
        show: PropTypes.bool.isRequired,
        container: PropTypes.func,
        target: PropTypes.func.isRequired,
        onEmojiClick: PropTypes.func.isRequired,
        onHide: PropTypes.func.isRequired
    }

    constructor(props) {
        super(props);

        this.state = {
            placement: 'top'
        };
    }

    componentWillUpdate(nextProps) {
        if (nextProps.show && !this.props.show) {
            const spaceRequiredAbove = 422;
            const spaceRequiredBelow = 436;

            const targetBounds = nextProps.target().getBoundingClientRect();

            let placement;
            if (targetBounds.top > spaceRequiredAbove) {
                placement = 'top';
            } else if (window.innerHeight - targetBounds.bottom > spaceRequiredBelow) {
                placement = 'bottom';
            } else {
                placement = 'left';
            }

            this.setState({placement});
        }
    }

    render() {
        return (
            <Overlay
                show={this.props.show}
                placement={this.state.placement}
                rootClose={true}
                container={this.props.container}
                onHide={this.props.onHide}
                target={this.props.target}
                animation={false}
            >
                <EmojiPicker onEmojiClick={this.props.onEmojiClick}/>
            </Overlay>
        );
    }
}