selectbox/main.js

import React from 'react';
import ReactDOM from 'react-dom';

import Selectbox from './Selectbox.js';
import PickerMenu from './PickerMenu.js';
import button_css from './button.css';

const OPTIONS = {
    day: 'День',
    week: 'Неделя',
    month: 'Месяц',
    kak: 'Полный период детализации',
};

const NAMES = Object.values(OPTIONS);

class Test extends React.PureComponent
{
    state = {
        value: [ 'day' ],
        value2: 'day',
    }

    onChange = (v) =>
    {
        this.setState({ value: v });
    }

    onChange2 = (v) =>
    {
        this.setState({ value2: v });
    }

    showContextMenu = (ev) =>
    {
        this.setState({ ctx_x: ev.pageX, ctx_y: ev.pageY });
        ev.preventDefault();
    }

    hideContextMenu = (ev) =>
    {
        this.setState({ ctx_x: null, ctx_y: null });
    }

    render()
    {
        return <div style={{padding: '20px', width: '300px', background: '#e0e8ff', fontSize: '13px'}}>
            <Selectbox
                source={OPTIONS}
                allowClear={true}
                multiple={true}
                keepFocusOnChange={true}
                placeholder="Выберите значение"
                suggestionMatch={true}
                value={this.state.value}
                style={{marginBottom: '20px'}}
                onChange={this.onChange}
            />
            <Selectbox
                source={OPTIONS}
                allowClear={true}
                multiple={true}
                disabled={true}
                suggestionMatch={true}
                value={this.state.value}
                style={{marginBottom: '20px'}}
                onChange={this.onChange}
            />
            <Selectbox
                source={OPTIONS}
                allowClear={true}
                multiple={false}
                suggestionMatch={true}
                value={this.state.value2}
                style={{marginBottom: '20px'}}
                onChange={this.onChange2}
            />
            <Selectbox
                source={OPTIONS}
                placeholder="Выберите значение"
                allowClear={false}
                multiple={false}
                suggestionMatch={true}
                value={this.state.value2}
                style={{marginBottom: '20px'}}
                onChange={this.onChange2}
            />
            <PickerMenu
                autoHide={true}
                renderInput={p => <button
                    {...p}
                    focused={undefined}
                    style={{marginBottom: '20px'}}
                    className={button_css.button+(p.focused ? ' '+button_css.pressed : '')}>
                    Меню
                </button>}
                items={NAMES}
            />
            <div style={{border: '1px solid #ccc', padding: '5px', background: 'white'}}
                onContextMenu={this.showContextMenu}>
                Кликните сюда правой кнопкой для вызова контекстного меню
            </div>
            {this.state.ctx_x != null
                ? <PickerMenu
                    autoHide={true}
                    items={NAMES}
                    popupX={this.state.ctx_x}
                    popupY={this.state.ctx_y}
                    onHide={this.hideContextMenu}
                />
                : null}
        </div>;
    }
}

ReactDOM.render(
    <Test />, document.getElementById('app')
);