IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14896 from grafana/scrollbar-select-fix

Browse Source 
Scrollbar select fix
This commit is contained in:
Torkel Ödegaard 2019-01-16 09:46:10 +01:00 committed by GitHub
commit 030d20d90d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 5 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
View File

@ -6,6 +6,7 @@ interface Props {
autoHide?: boolean; autoHide?: boolean;
autoHideTimeout?: number; autoHideTimeout?: number;
autoHideDuration?: number; autoHideDuration?: number;
autoMaxHeight?: string;
hideTracksWhenNotNeeded?: boolean; hideTracksWhenNotNeeded?: boolean;
} }
@ -18,11 +19,12 @@ export class CustomScrollbar extends PureComponent<Props> {
autoHide: true, autoHide: true,
autoHideTimeout: 200, autoHideTimeout: 200,
autoHideDuration: 200, autoHideDuration: 200,
autoMaxHeight: '100%',
hideTracksWhenNotNeeded: false, hideTracksWhenNotNeeded: false,
}; };
render() { render() {
const { customClassName, children, ...scrollProps } = this.props; const { customClassName, children, autoMaxHeight } = this.props;
return ( return (
<Scrollbars <Scrollbars
@ -31,13 +33,12 @@ export class CustomScrollbar extends PureComponent<Props> {
// These autoHeightMin & autoHeightMax options affect firefox and chrome differently. // These autoHeightMin & autoHeightMax options affect firefox and chrome differently.
// Before these where set to inhert but that caused problems with cut of legends in firefox // Before these where set to inhert but that caused problems with cut of legends in firefox
autoHeightMin={'0'} autoHeightMin={'0'}
autoHeightMax={'100%'} autoHeightMax={autoMaxHeight}
renderTrackHorizontal={props => <div {...props} className="track-horizontal" />} renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
renderTrackVertical={props => <div {...props} className="track-vertical" />} renderTrackVertical={props => <div {...props} className="track-vertical" />}
renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />} renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
renderThumbVertical={props => <div {...props} className="thumb-vertical" />} renderThumbVertical={props => <div {...props} className="thumb-vertical" />}
renderView={props => <div {...props} className="view" />} renderView={props => <div {...props} className="view" />}
{...scrollProps}
> >
{children} {children}
</Scrollbars> </Scrollbars>

4
packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
View File

@ -42,9 +42,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
Object { Object {
"display": "none", "display": "none",
"height": 6, "height": 6,
"opacity": 0,
"position": "absolute", "position": "absolute",
"transition": "opacity 200ms",
} }
} }
> >
@ -64,9 +62,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
style={ style={
Object { Object {
"display": "none", "display": "none",
"opacity": 0,
"position": "absolute", "position": "absolute",
"transition": "opacity 200ms",
"width": 6, "width": 6,
} }
} }

2
packages/grafana-ui/src/components/Select/Select.tsx
View File

@ -61,7 +61,7 @@ interface AsyncProps {
export const MenuList = (props: any) => { export const MenuList = (props: any) => {
return ( return (
<components.MenuList {...props}> <components.MenuList {...props}>
<CustomScrollbar autoHide={false}>{props.children}</CustomScrollbar> <CustomScrollbar autoHide={false} autoMaxHeight="inherit">{props.children}</CustomScrollbar>
</components.MenuList> </components.MenuList>
); );
}; };