119 lines
3.4 KiB
JavaScript
119 lines
3.4 KiB
JavaScript
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')
|
|
);
|