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
|
<Scrollbars
|
||||||
className={customClassName}
|
className={customClassName}
|
||||||
autoHeight={true}
|
autoHeight={true}
|
||||||
autoHeightMin={'100%'}
|
autoHeightMin={'inherit'}
|
||||||
autoHeightMax={'100%'}
|
autoHeightMax={'inherit'}
|
||||||
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" />}
|
||||||
|
@ -3,12 +3,14 @@ import classNames from 'classnames';
|
|||||||
import React, { PureComponent } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
import { default as ReactSelect } from 'react-select';
|
import { default as ReactSelect } from 'react-select';
|
||||||
import { default as ReactAsyncSelect } from 'react-select/lib/Async';
|
import { default as ReactAsyncSelect } from 'react-select/lib/Async';
|
||||||
|
import { components } from 'react-select';
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import { Option, SingleValue } from './PickerOption';
|
import { Option, SingleValue } from './PickerOption';
|
||||||
import IndicatorsContainer from './IndicatorsContainer';
|
import IndicatorsContainer from './IndicatorsContainer';
|
||||||
import NoOptionsMessage from './NoOptionsMessage';
|
import NoOptionsMessage from './NoOptionsMessage';
|
||||||
import ResetStyles from './ResetStyles';
|
import ResetStyles from './ResetStyles';
|
||||||
|
import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
|
||||||
|
|
||||||
export interface SelectOptionItem {
|
export interface SelectOptionItem {
|
||||||
label?: string;
|
label?: string;
|
||||||
@ -51,6 +53,14 @@ interface AsyncProps {
|
|||||||
loadingMessage?: () => string;
|
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> {
|
export class Select extends PureComponent<CommonProps & SelectProps> {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
width: null,
|
width: null,
|
||||||
@ -106,6 +116,7 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
|
|||||||
Option,
|
Option,
|
||||||
SingleValue,
|
SingleValue,
|
||||||
IndicatorsContainer,
|
IndicatorsContainer,
|
||||||
|
MenuList,
|
||||||
}}
|
}}
|
||||||
defaultValue={defaultValue}
|
defaultValue={defaultValue}
|
||||||
value={value}
|
value={value}
|
||||||
|
@ -79,6 +79,7 @@ $select-input-bg-disabled: $input-bg-disabled;
|
|||||||
.gf-form-select-box__option {
|
.gf-form-select-box__option {
|
||||||
border-left: 2px solid transparent;
|
border-left: 2px solid transparent;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
background-color: $input-bg;
|
||||||
|
|
||||||
&.gf-form-select-box__option--is-focused {
|
&.gf-form-select-box__option--is-focused {
|
||||||
color: $dropdownLinkColorHover;
|
color: $dropdownLinkColorHover;
|
||||||
|
Loading…
Reference in New Issue
Block a user