self-hosted/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr.git synced 2025-02-20 12:43:28 +02:00
Code Issues Releases Activity

Fixed: Root folder selection scrolling

Browse Source 
Fixes #3077
This commit is contained in:
Mark McDowall 2019-04-25 20:24:05 -07:00
parent 004b7391c6
commit 0b49eba77a
2 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/Components/Form/EnhancedSelectInput.css
View File

@ -45,6 +45,8 @@
}
.options {
composes: scroller from '~Components/Scroller/Scroller.css';
border: 1px solid $inputBorderColor;
border-radius: 4px;
background-color: $white;

37
frontend/src/Components/Form/EnhancedSelectInput.js
View File

@ -18,6 +18,8 @@ import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue
import EnhancedSelectInputOption from './EnhancedSelectInputOption';
import styles from './EnhancedSelectInput.css';
const POPPER_PADDING = 10;
function isArrowKey(keyCode) {
return keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW;
}
@ -306,7 +308,31 @@ class EnhancedSelectInput extends Component {
)}
</Reference>
<Portal>
<Popper placement="bottom-start">
<Popper
placement="bottom-start"
modifiers={{
computeMaxHeight: {
order: 851,
enabled: true,
fn: (data) => {
const {
top,
bottom
} = data.offsets.reference;
const windowHeight = window.innerHeight;
if ((/^botton/).test(data.placement)) {
data.styles.maxHeight = windowHeight - bottom - POPPER_PADDING;
} else {
data.styles.maxHeight = top - POPPER_PADDING;
}
return data;
}
}
}}
>
{({ ref, style, scheduleUpdate }) => {
this._scheduleUpdate = scheduleUpdate;
@ -322,7 +348,12 @@ class EnhancedSelectInput extends Component {
>
{
isOpen && !isMobile ?
<div className={styles.options}>
<Scroller
className={styles.options}
style={{
maxHeight: style.maxHeight
}}
>
{
values.map((v, index) => {
return (
@ -339,7 +370,7 @@ class EnhancedSelectInput extends Component {
);
})
}
</div> :
</Scroller> :
null
}
</div>