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

Calculate position using scrollable height

master
Vitaliy Filippov 2021-09-18 13:22:37 +03:00
parent f1f7941bf2
commit 237cbcb7b9
2 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
Picker.js
View File

@ -4,7 +4,7 @@
// ...Or maybe a button with a popup menu
// License: LGPLv3.0+
// (c) Vitaliy Filippov 2019+
// Version 2021-09-14
// Version 2021-09-18
import React from 'react';
import ReactDOM from 'react-dom';
@ -216,9 +216,20 @@ export default class Picker extends React.Component
}
}
static getScrollHeight(el)
{
let h = el.offsetHeight;
for (const child of el.querySelectorAll('.scrollable'))
{
h += child.scrollHeight - child.offsetHeight;
}
return h;
}
static calculatePopupPosition(input_pos, popup, props)
{
const popup_size = ReactDOM.findDOMNode(popup).getBoundingClientRect();
const popup_node = ReactDOM.findDOMNode(popup);
const popup_size = { width: popup_node.offsetWidth, height: Picker.getScrollHeight(popup_node) };
const screen_width = window.innerWidth || document.documentElement.offsetWidth;
const screen_height = window.innerHeight || document.documentElement.offsetHeight;
let direction = props && props.direction;

18
PickerMenu.js
View File

@ -1,5 +1,5 @@
// Menu-like Picker variant with keyboard control
// Version 2021-09-14
// Version 2021-09-18
// License: LGPLv3.0+
// (c) Vitaliy Filippov 2020+
@ -126,7 +126,7 @@ export default class PickerMenu extends Picker
}
return (<div ref={this.animatePicker}
tabIndex={!this.props.renderInput ? 1 : undefined}
className={theme.suggestions}
className={theme.suggestions+" scrollable"}
onKeyDown={this.onKeyDown}
onMouseOver={this.onMouseOver}>
{this.props.beforeItems}
@ -149,16 +149,20 @@ export default class PickerMenu extends Picker
};
}
componentDidUpdate()
componentDidUpdate(prevProps)
{
super.componentDidUpdate();
if (this.input && this.state.focused)
super.componentDidUpdate(prevProps);
if (this.state.focused)
{
if (this.prevHeight && this.input.offsetHeight != this.prevHeight)
if (this.prevHeight && this.input && this.input.offsetHeight != this.prevHeight ||
this.props.items != prevProps.items)
{
this.calculateDirection();
}
this.prevHeight = this.input.offsetHeight;
if (this.input)
{
this.prevHeight = this.input.offsetHeight;
}
}
}
}