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

CustomScrollbar - expose underlying's react-custom-scrollbars API to allow scroll tracks config.

Browse Source 
Updated config for Graph legend not to display horizontal scroll track which caused legend being not accessible in ceertain situations (e.g. when native OS scroll overlay disabled)
This commit is contained in:
Dominik Prokop
2019-01-22 10:58:31 +01:00
parent d86d063900
commit dd8f7aa7a9
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,8 @@ interface Props {
autoHideDuration?: number;
autoMaxHeight?: string;
hideTracksWhenNotNeeded?: boolean;
renderTrackHorizontal?: React.FunctionComponent<any>;
renderTrackVertical?: React.FunctionComponent<any>;
scrollTop?: number;
setScrollTop: (value: React.MouseEvent<HTMLElement>) => void;
autoHeightMin?: number | string;
@@ -26,7 +28,7 @@ export class CustomScrollbar extends PureComponent<Props> {
autoMaxHeight: '100%',
hideTracksWhenNotNeeded: false,
setScrollTop: () => {},
autoHeightMin: '0'
autoHeightMin: '0',
};
private ref: React.RefObject<Scrollbars>;
@@ -45,7 +47,7 @@ export class CustomScrollbar extends PureComponent<Props> {
} else {
ref.scrollTop(this.props.scrollTop);
}
}
}
}
componentDidMount() {
@@ -57,7 +59,7 @@ export class CustomScrollbar extends PureComponent<Props> {
}
render() {
const { customClassName, children, autoMaxHeight } = this.props;
const { customClassName, children, autoMaxHeight, renderTrackHorizontal, renderTrackVertical } = this.props;
return (
<Scrollbars
@@ -67,8 +69,8 @@ export class CustomScrollbar extends PureComponent<Props> {
// 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
autoHeightMax={autoMaxHeight}
renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
renderTrackVertical={props => <div {...props} className="track-vertical" />}
renderTrackHorizontal={renderTrackHorizontal || (props => <div {...props} className="track-horizontal" />)}
renderTrackVertical={renderTrackVertical || (props => <div {...props} className="track-vertical" />)}
renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
renderThumbVertical={props => <div {...props} className="thumb-vertical" />}
renderView={props => <div {...props} className="view" />}

2
public/app/plugins/panel/graph/Legend/Legend.tsx
View File

@@ -311,7 +311,7 @@ class LegendTableHeaderItem extends PureComponent<LegendTableHeaderProps & Legen
export class Legend extends PureComponent<GraphLegendProps> {
render() {
return (
<CustomScrollbar>
<CustomScrollbar renderTrackHorizontal={(props) => <div {...props} style={{visibility: 'none'}} />}>
<GraphLegend {...this.props} />
</CustomScrollbar>
);