mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
maxHeight and style overrides
This commit is contained in:
parent
61a704a64e
commit
2b8eab8c8c
@ -9,7 +9,7 @@ interface State {
|
||||
expanded: boolean;
|
||||
}
|
||||
|
||||
export class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
|
||||
export default class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
|
||||
state = {
|
||||
expanded: false,
|
||||
};
|
||||
@ -24,10 +24,8 @@ export class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
|
||||
const { children, label } = this.props;
|
||||
const { expanded } = this.state;
|
||||
|
||||
console.log(children);
|
||||
|
||||
return (
|
||||
<div className="width-18 unit-picker-group" style={{ marginBottom: '5px' }}>
|
||||
<div className="width-21 unit-picker-group" style={{ marginBottom: '5px' }}>
|
||||
<div className="unit-picker-group-item" onClick={this.onToggleChildren}>
|
||||
<span style={{ textTransform: 'capitalize' }}>{label}</span>
|
||||
<i className={`fa ${expanded ? 'fa-minus' : 'fa-plus'}`} />{' '}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import Select from 'react-select';
|
||||
import { UnitGroup } from './UnitGroup';
|
||||
import UnitGroup from './UnitGroup';
|
||||
import UnitOption from './UnitOption';
|
||||
import UnitMenu from './UnitMenu';
|
||||
import ResetStyles from '../ResetStyles';
|
||||
@ -12,7 +12,34 @@ interface Props {
|
||||
|
||||
export default class UnitPicker extends PureComponent<Props> {
|
||||
render() {
|
||||
const options = kbn.getUnitFormats();
|
||||
const unitGroups = kbn.getUnitFormats();
|
||||
const options = unitGroups.map(group => {
|
||||
const options = group.submenu.map(unit => {
|
||||
return {
|
||||
label: unit.text,
|
||||
value: unit.value,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
label: group.text,
|
||||
options,
|
||||
};
|
||||
});
|
||||
|
||||
const styles = {
|
||||
...ResetStyles,
|
||||
menu: () => ({
|
||||
maxHeight: '500px',
|
||||
overflow: 'scroll',
|
||||
}),
|
||||
menuList: () =>
|
||||
({
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
overflowY: 'auto',
|
||||
position: 'relative',
|
||||
} as React.CSSProperties),
|
||||
};
|
||||
|
||||
return (
|
||||
<Select
|
||||
@ -26,7 +53,7 @@ export default class UnitPicker extends PureComponent<Props> {
|
||||
Option: UnitOption,
|
||||
Menu: UnitMenu,
|
||||
}}
|
||||
styles={ResetStyles}
|
||||
styles={styles}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user