mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Added custom scrollbar to select component
This commit is contained in:
parent
9e4547f787
commit
84df0e2dde
@ -28,8 +28,8 @@ class CustomScrollbar extends PureComponent<Props> {
|
||||
<Scrollbars
|
||||
className={customClassName}
|
||||
autoHeight={true}
|
||||
autoHeightMin={'100%'}
|
||||
autoHeightMax={'100%'}
|
||||
autoHeightMin={'inherit'}
|
||||
autoHeightMax={'inherit'}
|
||||
renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
|
||||
renderTrackVertical={props => <div {...props} className="track-vertical" />}
|
||||
renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
|
||||
|
@ -3,12 +3,14 @@ import classNames from 'classnames';
|
||||
import React, { PureComponent } from 'react';
|
||||
import { default as ReactSelect } from 'react-select';
|
||||
import { default as ReactAsyncSelect } from 'react-select/lib/Async';
|
||||
import { components } from 'react-select';
|
||||
|
||||
// Components
|
||||
import { Option, SingleValue } from './PickerOption';
|
||||
import IndicatorsContainer from './IndicatorsContainer';
|
||||
import NoOptionsMessage from './NoOptionsMessage';
|
||||
import ResetStyles from './ResetStyles';
|
||||
import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
|
||||
|
||||
export interface SelectOptionItem {
|
||||
label?: string;
|
||||
@ -51,6 +53,14 @@ interface AsyncProps {
|
||||
loadingMessage?: () => string;
|
||||
}
|
||||
|
||||
export const MenuList = props => {
|
||||
return (
|
||||
<components.MenuList {...props}>
|
||||
<CustomScrollbar autoHide={false}>{props.children}</CustomScrollbar>
|
||||
</components.MenuList>
|
||||
);
|
||||
};
|
||||
|
||||
export class Select extends PureComponent<CommonProps & SelectProps> {
|
||||
static defaultProps = {
|
||||
width: null,
|
||||
@ -106,6 +116,7 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
|
||||
Option,
|
||||
SingleValue,
|
||||
IndicatorsContainer,
|
||||
MenuList,
|
||||
}}
|
||||
defaultValue={defaultValue}
|
||||
value={value}
|
||||
|
@ -79,6 +79,7 @@ $select-input-bg-disabled: $input-bg-disabled;
|
||||
.gf-form-select-box__option {
|
||||
border-left: 2px solid transparent;
|
||||
white-space: nowrap;
|
||||
background-color: $input-bg;
|
||||
|
||||
&.gf-form-select-box__option--is-focused {
|
||||
color: $dropdownLinkColorHover;
|
||||
|
Loading…
Reference in New Issue
Block a user