vitalif-js
/
selectbox
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Remove extra <div> wrapper from Picker

master
Vitaliy Filippov 2019-09-03 02:02:25 +03:00
parent 31e860f359
commit fc5e75fab8
2 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
Picker.js
View File

@ -2,14 +2,15 @@
// 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-08-30
// Version 2019-09-03
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
export class Picker extends React.Component
export default class Picker extends React.Component
{
static propTypes = {
direction: PropTypes.string,
@ -79,7 +80,7 @@ export class Picker extends React.Component
render()
{
return (<div style={this.props.style} className={this.props.className}>
return (<React.Fragment>
{this.props.renderInput({
onFocus: this.focus,
onBlur: this.blur,
@ -99,7 +100,7 @@ export class Picker extends React.Component
{this.props.renderPicker()}
</div>
: null}
</div>);
</React.Fragment>);
}
componentDidUpdate()
@ -116,25 +117,31 @@ export class Picker extends React.Component
{
return;
}
const picker_height = ReactDOM.findDOMNode(this.picker).getBoundingClientRect().height;
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_height < screen_height;
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_height < max_height ? picker_height : max_height;
const height = picker_size.height < max_height ? picker_size.height : max_height;
top = direction == 'down' ? (top + client.height) : (top - height);
const left = (client.left
let left = (client.left
+ (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft)
- (document.documentElement.clientLeft || document.body.clientLeft || 0));
const width = (this.props.minWidth && client.width < this.props.minWidth ? this.props.minWidth : client.width);
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)
{

10
Selectbox.js
View File

@ -1,5 +1,5 @@
// Simple Dropdown/Autocomplete with single/multiple selection and easy customisation via CSS modules
// Version 2019-08-30
// Version 2019-09-03
// License: LGPLv3.0+
// (c) Vitaliy Filippov 2019+
@ -7,7 +7,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import autocomplete_css from './autocomplete.css';
import { Picker } from './Picker.js';
import Picker from './Picker.js';
export default class Selectbox extends React.PureComponent
{
@ -218,7 +218,9 @@ export default class Selectbox extends React.PureComponent
(this.props.disabled ? ' '+(autocomplete_css.disabled||'') : '') +
(this.props.multiple
? ' '+(autocomplete_css.multiple||'')
: (this.props.allowClear ? ' '+(autocomplete_css.withClear||'') : ''))}
: (this.props.allowClear ? ' '+(autocomplete_css.withClear||'') : '')) +
(this.props.className ? ' '+this.props.className : '')}
style={this.props.style}
onClick={this.focusInput}>
{this.props.multiple
? <div className={autocomplete_css.values}>
@ -332,8 +334,6 @@ export default class Selectbox extends React.PureComponent
clearOnClick={true}
renderInput={this.renderInput}
renderPicker={this.renderSuggestions}
className={this.props.className}
style={this.props.style}
/>);
}