selectbox/Picker.js

// "Generic dropdown component"
// Renders something and then when that "something" is focused renders a popup layer next to it
// For example, a text input with a popup selection list
// ...Or maybe a button with a popup menu
// License: LGPLv3.0+
// (c) Vitaliy Filippov 2019+
// Version 2019-09-03

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

export default class Picker extends React.Component
{
    static propTypes = {
        direction: PropTypes.string,
        clearOnClick: PropTypes.bool,
        minWidth: PropTypes.number,
        className: PropTypes.string,
        style: PropTypes.object,
        renderInput: PropTypes.func.isRequired,
        renderPicker: PropTypes.func.isRequired,
    }

    state = {
        focused: false,
        height: 0,
        width: 0,
        top: 0,
        left: 0,
    }

    focus = () =>
    {
        if (!this.state.focused)
        {
            this.setState({ focused: true, height: 0 });
            this.calculateDirection();
            if (this.props.clearOnClick)
            {
                document.body.addEventListener('click', this.blurExt);
            }
        }
    }

    blur = () =>
    {
        this.setState({ focused: false });
        if (this.props.clearOnClick)
        {
            document.body.removeEventListener('click', this.blurExt);
        }
    }

    blurExt = (ev) =>
    {
        let n = this.input ? ReactDOM.findDOMNode(this.input) : null;
        let e = ev.target||ev.srcElement;
        while (e)
        {
            // calendar-box is calendar.js's class
            if (e == this.picker || e == n || /\bcalendar-box\b/.exec(e.className||''))
            {
                return;
            }
            e = e.parentNode;
        }
        this.blur();
    }

    setInput = (e) =>
    {
        this.input = e;
    }

    setPicker = (e) =>
    {
        this.picker = e;
    }

    render()
    {
        return (<React.Fragment>
            {this.props.renderInput({
                onFocus: this.focus,
                onBlur: this.blur,
                focused: this.state.focused,
                ref: this.setInput,
            })}
            {this.state.focused
                ? <div style={{
                    position: 'fixed',
                    background: 'white',
                    height: this.state.height ? this.state.height+'px' : 'auto',
                    top: this.state.top+'px',
                    width: this.state.width ? this.state.width+'px' : 'auto',
                    left: this.state.left+'px',
                    zIndex: 100,
                }} ref={this.setPicker}>
                    {this.props.renderPicker()}
                </div>
                : null}
        </React.Fragment>);
    }

    componentDidUpdate()
    {
        if (this.state.focused && !this.state.height)
        {
            this.calculateDirection();
        }
    }

    calculateDirection()
    {
        if (!this.input || !this.picker)
        {
            return;
        }
        const picker_size = ReactDOM.findDOMNode(this.picker).getBoundingClientRect();
        const client = ReactDOM.findDOMNode(this.input).getBoundingClientRect();
        const screen_width = window.innerWidth || document.documentElement.offsetWidth;
        const screen_height = window.innerHeight || document.documentElement.offsetHeight;
        let direction = this.props.direction;
        if (!direction || direction === 'auto')
        {
            const down = client.top + picker_size.height < screen_height;
            direction = down ? 'down' : 'up';
        }
        let top = client.top
            + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop)
            - (document.documentElement.clientTop || document.body.clientTop || 0);
        const max_height = (direction == 'down' ? screen_height-top-client.height-32 : top-32);
        const height = picker_size.height < max_height ? picker_size.height : max_height;
        top = direction == 'down' ? (top + client.height) : (top - height);
        let left = (client.left
            + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft)
            - (document.documentElement.clientLeft || document.body.clientLeft || 0));
        if (left + picker_size.width > screen_width)
        {
            left = screen_width - picker_size.width;
        }
        let width = client.width > picker_size.width ? client.width : picker_size.width;
        width = (this.props.minWidth && width < this.props.minWidth ? this.props.minWidth : width);
        if (this.state.top !== top || this.state.left !== left ||
            this.state.width !== width || this.state.height !== height)
        {
            this.setState({ top, left, width, height });
        }
    }
}