Skip to content

N
nexpie-grafana-theme
Commit 104292df by Torkel Ödegaard
Options

wip: unifying select components

parent e40d2145
Showing with 107 additions and 91 deletions
public/app/core/components/Picker/Select.tsx
// import React, { PureComponent } from 'react'; // Libraries
// import Select as ReactSelect from 'react-select'; import classNames from 'classnames';
// import DescriptionOption from './DescriptionOption'; import React, { PureComponent } from 'react';
// import IndicatorsContainer from './IndicatorsContainer'; import { default as ReactSelect } from 'react-select';
// import ResetStyles from './ResetStyles';
// // Components
// export interface OptionType { import DescriptionOption from './DescriptionOption';
// label: string; import IndicatorsContainer from './IndicatorsContainer';
// value: string; import ResetStyles from './ResetStyles';
// }
// export interface SelectOptionItem {
// interface Props { label?: string;
// defaultValue?: any; value?: string;
// getOptionLabel: (item: T) => string; imgUrl?: string;
// getOptionValue: (item: T) => string; description?: string;
// onChange: (item: T) => {} | void; [key: string]: any;
// options: T[]; }
// placeholder?: string;
// width?: number; interface Props {
// value: T; defaultValue?: any;
// className?: string; getOptionLabel?: (item: SelectOptionItem) => string;
// } getOptionValue?: (item: SelectOptionItem) => string;
// onChange: (item: SelectOptionItem) => {} | void;
// export class Select<T> extends PureComponent<Props<T>> { options: SelectOptionItem[];
// static defaultProps = { placeholder?: string;
// width: null, width?: number;
// className: '', value: SelectOptionItem;
// } className?: string;
// components: object;
// render() { }
// const { defaultValue, getOptionLabel, getOptionValue, onSelected, options, placeholder, width, value, className } = this.props;
// let widthClass = ''; export class Select extends PureComponent<Props> {
// if (width) { static defaultProps = {
// widthClass = 'width-'+width; width: null,
// } className: '',
// components: {},
// return ( };
// <ReactSelect
// classNamePrefix="gf-form-select-box" render() {
// className={`gf-form-input gf-form-input--form-dropdown ${widthClass} ${className}`} const {
// components={{ defaultValue,
// Option: DescriptionOption, getOptionLabel,
// IndicatorsContainer, getOptionValue,
// }} onChange,
// defaultValue={defaultValue} options,
// value={value} placeholder,
// getOptionLabel={getOptionLabel} width,
// getOptionValue={getOptionValue} value,
// menuShouldScrollIntoView={false} className,
// isSearchable={false} } = this.props;
// onChange={onSelected}
// options={options} let widthClass = '';
// placeholder={placeholder || 'Choose'} if (width) {
// styles={ResetStyles} widthClass = 'width-' + width;
// /> }
// );
// } const selectClassNames = classNames('gf-form-input', 'gf-form-input--form-dropdown', widthClass, className);
// }
// return (
// export default Select; <ReactSelect
classNamePrefix="gf-form-select-box"
className={selectClassNames}
components={{
Option: DescriptionOption,
IndicatorsContainer,
}}
defaultValue={defaultValue}
value={value}
getOptionLabel={getOptionLabel}
getOptionValue={getOptionValue}
menuShouldScrollIntoView={false}
isSearchable={false}
onChange={onChange}
options={options}
placeholder={placeholder || 'Choose'}
styles={ResetStyles}
/>
);
}
}
export default Select;
public/app/core/components/SharedPreferences/SharedPreferences.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { Label } from 'app/core/components/Label/Label'; import { Label } from 'app/core/components/Label/Label';
import SimplePicker from 'app/core/components/Picker/SimplePicker'; import Select from 'app/core/components/Picker/Select';
import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv'; import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
import { DashboardSearchHit } from 'app/types'; import { DashboardSearchHit } from 'app/types';
...@@ -17,12 +17,12 @@ export interface State { ...@@ -17,12 +17,12 @@ export interface State {
dashboards: DashboardSearchHit[]; dashboards: DashboardSearchHit[];
} }
const themes = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }]; const themes = [{ value: '', label: 'Default' }, { value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }];
const timezones = [ const timezones = [
{ value: '', text: 'Default' }, { value: '', label: 'Default' },
{ value: 'browser', text: 'Local browser time' }, { value: 'browser', label: 'Local browser time' },
{ value: 'utc', text: 'UTC' }, { value: 'utc', label: 'UTC' },
]; ];
export class SharedPreferences extends PureComponent<Props, State> { export class SharedPreferences extends PureComponent<Props, State> {
...@@ -91,12 +91,10 @@ export class SharedPreferences extends PureComponent<Props, State> { ...@@ -91,12 +91,10 @@ export class SharedPreferences extends PureComponent<Props, State> {
<h3 className="page-heading">Preferences</h3> <h3 className="page-heading">Preferences</h3>
<div className="gf-form"> <div className="gf-form">
<span className="gf-form-label width-11">UI Theme</span> <span className="gf-form-label width-11">UI Theme</span>
<SimplePicker <Select
value={themes.find(item => item.value === theme)} value={themes.find(item => item.value === theme)}
options={themes} options={themes}
getOptionValue={i => i.value} onChange={theme => this.onThemeChanged(theme.value)}
getOptionLabel={i => i.text}
onSelected={theme => this.onThemeChanged(theme.value)}
width={20} width={20}
/> />
</div> </div>
...@@ -107,11 +105,11 @@ export class SharedPreferences extends PureComponent<Props, State> { ...@@ -107,11 +105,11 @@ export class SharedPreferences extends PureComponent<Props, State> {
> >
Home Dashboard Home Dashboard
</Label> </Label>
<SimplePicker <Select
value={dashboards.find(dashboard => dashboard.id === homeDashboardId)} value={dashboards.find(dashboard => dashboard.id === homeDashboardId)}
getOptionValue={i => i.id} getOptionValue={i => i.id}
getOptionLabel={i => i.title} getOptionLabel={i => i.title}
onSelected={(dashboard: DashboardSearchHit) => this.onHomeDashboardChanged(dashboard.id)} onChange={(dashboard: DashboardSearchHit) => this.onHomeDashboardChanged(dashboard.id)}
options={dashboards} options={dashboards}
placeholder="Chose default dashboard" placeholder="Chose default dashboard"
width={20} width={20}
...@@ -119,11 +117,9 @@ export class SharedPreferences extends PureComponent<Props, State> { ...@@ -119,11 +117,9 @@ export class SharedPreferences extends PureComponent<Props, State> {
</div> </div>
<div className="gf-form"> <div className="gf-form">
<label className="gf-form-label width-11">Timezone</label> <label className="gf-form-label width-11">Timezone</label>
<SimplePicker <Select
value={timezones.find(item => item.value === timezone)} value={timezones.find(item => item.value === timezone)}
getOptionValue={i => i.value} onChange={timezone => this.onTimeZoneChanged(timezone.value)}
getOptionLabel={i => i.text}
onSelected={timezone => this.onTimeZoneChanged(timezone.value)}
options={timezones} options={timezones}
width={20} width={20}
/> />
......
public/app/plugins/panel/gauge/ValueOptions.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { Label } from 'app/core/components/Label/Label'; import { Label } from 'app/core/components/Label/Label';
import SimplePicker from 'app/core/components/Picker/SimplePicker'; import Select from 'app/core/components/Picker/Select';
import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker'; import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker';
import { OptionModuleProps } from './module'; import { OptionModuleProps } from './module';
const statOptions = [ const statOptions = [
{ value: 'min', text: 'Min' }, { value: 'min', label: 'Min' },
{ value: 'max', text: 'Max' }, { value: 'max', label: 'Max' },
{ value: 'avg', text: 'Average' }, { value: 'avg', label: 'Average' },
{ value: 'current', text: 'Current' }, { value: 'current', label: 'Current' },
{ value: 'total', text: 'Total' }, { value: 'total', label: 'Total' },
{ value: 'name', text: 'Name' }, { value: 'name', label: 'Name' },
{ value: 'first', text: 'First' }, { value: 'first', label: 'First' },
{ value: 'delta', text: 'Delta' }, { value: 'delta', label: 'Delta' },
{ value: 'diff', text: 'Difference' }, { value: 'diff', label: 'Difference' },
{ value: 'range', text: 'Range' }, { value: 'range', label: 'Range' },
{ value: 'last_time', text: 'Time of last point' }, { value: 'last_time', label: 'Time of last point' },
]; ];
const labelWidth = 6; const labelWidth = 6;
...@@ -43,12 +43,10 @@ export default class ValueOptions extends PureComponent<OptionModuleProps> { ...@@ -43,12 +43,10 @@ export default class ValueOptions extends PureComponent<OptionModuleProps> {
<h5 className="page-heading">Value</h5> <h5 className="page-heading">Value</h5>
<div className="gf-form-inline"> <div className="gf-form-inline">
<Label width={labelWidth}>Stat</Label> <Label width={labelWidth}>Stat</Label>
<SimplePicker <Select
width={12} width={12}
options={statOptions} options={statOptions}
getOptionLabel={i => i.text} onChange={this.onStatChange}
getOptionValue={i => i.value}
onSelected={this.onStatChange}
value={statOptions.find(option => option.value === stat)} value={statOptions.find(option => option.value === stat)}
/> />
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment