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 // ...Or maybe a button with a popup menu
// License: LGPLv3.0+ // License: LGPLv3.0+
// (c) Vitaliy Filippov 2019+ // (c) Vitaliy Filippov 2019+
// Version 2021-09-14 // Version 2021-09-18
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; 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) 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_width = window.innerWidth || document.documentElement.offsetWidth;
const screen_height = window.innerHeight || document.documentElement.offsetHeight; const screen_height = window.innerHeight || document.documentElement.offsetHeight;
let direction = props && props.direction; let direction = props && props.direction;

18
PickerMenu.js
View File

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