Added custom scrollbar to select component

This commit is contained in:
Torkel Ödegaard 2018-12-14 15:25:49 +01:00
parent 9e4547f787
commit 84df0e2dde
3 changed files with 14 additions and 2 deletions

View File

@ -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" />}

View File

@ -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}

View File

@ -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;