mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
renamed folder to select
This commit is contained in:
parent
ab31d52b77
commit
24825dc899
@ -1,7 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import { UserPicker } from 'app/core/components/Picker/UserPicker';
|
||||
import { TeamPicker, Team } from 'app/core/components/Picker/TeamPicker';
|
||||
import DescriptionPicker, { OptionWithDescription } from 'app/core/components/Picker/DescriptionPicker';
|
||||
import { UserPicker } from 'app/core/components/Select/UserPicker';
|
||||
import { TeamPicker, Team } from 'app/core/components/Select/TeamPicker';
|
||||
import { Select, SelectOptionItem } from 'app/core/components/Select/Select';
|
||||
import { User } from 'app/types';
|
||||
import {
|
||||
dashboardPermissionLevels,
|
||||
@ -61,7 +61,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
|
||||
this.setState({ teamId: team && !Array.isArray(team) ? team.id : 0 });
|
||||
};
|
||||
|
||||
onPermissionChanged = (permission: OptionWithDescription) => {
|
||||
onPermissionChanged = (permission: SelectOptionItem) => {
|
||||
this.setState({ permission: permission.value });
|
||||
};
|
||||
|
||||
@ -121,11 +121,10 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
|
||||
) : null}
|
||||
|
||||
<div className="gf-form">
|
||||
<DescriptionPicker
|
||||
optionsWithDesc={dashboardPermissionLevels}
|
||||
onSelected={this.onPermissionChanged}
|
||||
disabled={false}
|
||||
className={'gf-form-select-box__control--menu-right'}
|
||||
<Select
|
||||
options={dashboardPermissionLevels}
|
||||
onChange={this.onPermissionChanged}
|
||||
className="gf-form-select-box__control--menu-right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { Component } from 'react';
|
||||
import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
|
||||
import Select from 'app/core/components/Select/Select';
|
||||
import { dashboardPermissionLevels } from 'app/types/acl';
|
||||
|
||||
export interface Props {
|
||||
@ -23,11 +23,11 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
|
||||
<td className="query-keyword">Can</td>
|
||||
<td>
|
||||
<div className="gf-form">
|
||||
<DescriptionPicker
|
||||
optionsWithDesc={dashboardPermissionLevels}
|
||||
onSelected={() => {}}
|
||||
disabled={true}
|
||||
className={'gf-form-select-box__control--menu-right'}
|
||||
<Select
|
||||
options={dashboardPermissionLevels}
|
||||
onChange={() => {}}
|
||||
isDisabled={true}
|
||||
className="gf-form-select-box__control--menu-right"
|
||||
value={item.permission}
|
||||
/>
|
||||
</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
|
||||
import { Select } from 'app/core/components/Select/Select';
|
||||
import { dashboardPermissionLevels, DashboardAcl, PermissionLevel } from 'app/types/acl';
|
||||
import { FolderInfo } from 'app/types';
|
||||
|
||||
@ -74,11 +74,11 @@ export default class PermissionsListItem extends PureComponent<Props> {
|
||||
<td className="query-keyword">Can</td>
|
||||
<td>
|
||||
<div className="gf-form">
|
||||
<DescriptionPicker
|
||||
optionsWithDesc={dashboardPermissionLevels}
|
||||
onSelected={this.onPermissionChanged}
|
||||
disabled={item.inherited}
|
||||
className={'gf-form-select-box__control--menu-right'}
|
||||
<Select
|
||||
options={dashboardPermissionLevels}
|
||||
onChange={this.onPermissionChanged}
|
||||
isDisabled={item.inherited}
|
||||
className="gf-form-select-box__control--menu-right"
|
||||
value={item.permission}
|
||||
/>
|
||||
</div>
|
||||
|
@ -1,26 +0,0 @@
|
||||
import React from 'react';
|
||||
import { components } from 'react-select';
|
||||
import { OptionProps } from 'react-select/lib/components/Option';
|
||||
|
||||
// https://github.com/JedWatson/react-select/issues/3038
|
||||
interface ExtendedOptionProps extends OptionProps<any> {
|
||||
data: any;
|
||||
}
|
||||
|
||||
export const Option = (props: ExtendedOptionProps) => {
|
||||
const { children, isSelected, data } = props;
|
||||
|
||||
return (
|
||||
<components.Option {...props}>
|
||||
<div className="gf-form-select-box__desc-option">
|
||||
<div className="gf-form-select-box__desc-option__body">
|
||||
<div>{children}</div>
|
||||
{data.description && <div className="gf-form-select-box__desc-option__desc">{data.description}</div>}
|
||||
</div>
|
||||
{isSelected && <i className="fa fa-check" aria-hidden="true" />}
|
||||
</div>
|
||||
</components.Option>
|
||||
);
|
||||
};
|
||||
|
||||
export default Option;
|
@ -1,52 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import Select from 'react-select';
|
||||
import DescriptionOption from './DescriptionOption';
|
||||
import IndicatorsContainer from './IndicatorsContainer';
|
||||
import ResetStyles from './ResetStyles';
|
||||
import NoOptionsMessage from './NoOptionsMessage';
|
||||
|
||||
export interface OptionWithDescription {
|
||||
value: any;
|
||||
label: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
optionsWithDesc: OptionWithDescription[];
|
||||
onSelected: (permission) => void;
|
||||
disabled: boolean;
|
||||
className?: string;
|
||||
value?: any;
|
||||
}
|
||||
|
||||
const getSelectedOption = (optionsWithDesc, value) => optionsWithDesc.find(option => option.value === value);
|
||||
|
||||
class DescriptionPicker extends Component<Props, any> {
|
||||
render() {
|
||||
const { optionsWithDesc, onSelected, disabled, className, value } = this.props;
|
||||
const selectedOption = getSelectedOption(optionsWithDesc, value);
|
||||
return (
|
||||
<div className="permissions-picker">
|
||||
<Select
|
||||
placeholder="Choose"
|
||||
classNamePrefix={`gf-form-select-box`}
|
||||
className={`width-7 gf-form-input gf-form-input--form-dropdown ${className || ''}`}
|
||||
options={optionsWithDesc}
|
||||
components={{
|
||||
Option: DescriptionOption,
|
||||
IndicatorsContainer,
|
||||
NoOptionsMessage,
|
||||
}}
|
||||
styles={ResetStyles}
|
||||
isDisabled={disabled}
|
||||
onChange={onSelected}
|
||||
getOptionValue={i => i.value}
|
||||
getOptionLabel={i => i.label}
|
||||
value={selectedOption}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DescriptionPicker;
|
@ -1,52 +0,0 @@
|
||||
import React, { SFC } from 'react';
|
||||
import Select from 'react-select';
|
||||
import DescriptionOption from './DescriptionOption';
|
||||
import IndicatorsContainer from './IndicatorsContainer';
|
||||
import ResetStyles from './ResetStyles';
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
defaultValue?: any;
|
||||
getOptionLabel: (item: any) => string;
|
||||
getOptionValue: (item: any) => string;
|
||||
onSelected: (item: any) => {} | void;
|
||||
options: any[];
|
||||
placeholder?: string;
|
||||
width?: number;
|
||||
value: any;
|
||||
}
|
||||
|
||||
const SimplePicker: SFC<Props> = ({
|
||||
className,
|
||||
defaultValue,
|
||||
getOptionLabel,
|
||||
getOptionValue,
|
||||
onSelected,
|
||||
options,
|
||||
placeholder,
|
||||
width,
|
||||
value,
|
||||
}) => {
|
||||
return (
|
||||
<Select
|
||||
classNamePrefix="gf-form-select-box"
|
||||
className={`${width ? 'width-' + width : ''} gf-form-input gf-form-input--form-dropdown ${className || ''}`}
|
||||
components={{
|
||||
Option: DescriptionOption,
|
||||
IndicatorsContainer,
|
||||
}}
|
||||
defaultValue={defaultValue}
|
||||
value={value}
|
||||
getOptionLabel={getOptionLabel}
|
||||
getOptionValue={getOptionValue}
|
||||
menuShouldScrollIntoView={false}
|
||||
isSearchable={false}
|
||||
onChange={onSelected}
|
||||
options={options}
|
||||
placeholder={placeholder || 'Choose'}
|
||||
styles={ResetStyles}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default SimplePicker;
|
@ -12,7 +12,7 @@ import ResetStyles from './ResetStyles';
|
||||
|
||||
export interface SelectOptionItem {
|
||||
label?: string;
|
||||
value?: string;
|
||||
value?: any;
|
||||
imgUrl?: string;
|
||||
description?: string;
|
||||
[key: string]: any;
|
||||
@ -25,9 +25,11 @@ interface CommonProps {
|
||||
onChange: (item: SelectOptionItem) => {} | void;
|
||||
placeholder?: string;
|
||||
width?: number;
|
||||
value?: SelectOptionItem;
|
||||
value?: any;
|
||||
className?: string;
|
||||
components: object;
|
||||
isDisabled?: boolean;
|
||||
isSearchable: boolean;
|
||||
}
|
||||
|
||||
interface SelectProps {
|
||||
@ -47,6 +49,8 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
|
||||
width: null,
|
||||
className: '',
|
||||
components: {},
|
||||
isDisabled: false,
|
||||
isSearchable: true,
|
||||
};
|
||||
|
||||
render() {
|
||||
@ -60,6 +64,8 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
|
||||
width,
|
||||
value,
|
||||
className,
|
||||
isDisabled,
|
||||
isSearchable
|
||||
} = this.props;
|
||||
|
||||
let widthClass = '';
|
||||
@ -83,11 +89,12 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
|
||||
getOptionLabel={getOptionLabel}
|
||||
getOptionValue={getOptionValue}
|
||||
menuShouldScrollIntoView={false}
|
||||
isSearchable={false}
|
||||
isSearchable={isSearchable}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
placeholder={placeholder || 'Choose'}
|
||||
styles={ResetStyles}
|
||||
isDisabled={isDisabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -99,6 +106,8 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
|
||||
className: '',
|
||||
components: {},
|
||||
loadingMessage: () => 'Loading...',
|
||||
isDisabled: false,
|
||||
isSearchable: true,
|
||||
};
|
||||
|
||||
render() {
|
||||
@ -116,6 +125,8 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
|
||||
isLoading,
|
||||
loadingMessage,
|
||||
noOptionsMessage,
|
||||
isDisabled,
|
||||
isSearchable,
|
||||
} = this.props;
|
||||
|
||||
let widthClass = '';
|
||||
@ -140,7 +151,6 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
|
||||
getOptionLabel={getOptionLabel}
|
||||
getOptionValue={getOptionValue}
|
||||
menuShouldScrollIntoView={false}
|
||||
isSearchable={false}
|
||||
onChange={onChange}
|
||||
loadOptions={loadOptions}
|
||||
isLoading={isLoading}
|
||||
@ -149,6 +159,8 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
|
||||
styles={ResetStyles}
|
||||
loadingMessage={loadingMessage}
|
||||
noOptionsMessage={noOptionsMessage}
|
||||
isDisabled={isDisabled}
|
||||
isSearchable={isSearchable}
|
||||
/>
|
||||
);
|
||||
}
|
@ -2,7 +2,7 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
// Components
|
||||
import { AsyncSelect } from 'app/core/components/Picker/Select';
|
||||
import { AsyncSelect } from './Select';
|
||||
|
||||
// Utils & Services
|
||||
import { debounce } from 'lodash';
|
@ -1,7 +1,7 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
import { Label } from 'app/core/components/Label/Label';
|
||||
import Select from 'app/core/components/Picker/Select';
|
||||
import Select from 'app/core/components/Select/Select';
|
||||
import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
|
||||
|
||||
import { DashboardSearchHit } from 'app/types';
|
||||
@ -92,6 +92,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
|
||||
<div className="gf-form">
|
||||
<span className="gf-form-label width-11">UI Theme</span>
|
||||
<Select
|
||||
isSearchable={false}
|
||||
value={themes.find(item => item.value === theme)}
|
||||
options={themes}
|
||||
onChange={theme => this.onThemeChanged(theme.value)}
|
||||
@ -118,6 +119,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
|
||||
<div className="gf-form">
|
||||
<label className="gf-form-label width-11">Timezone</label>
|
||||
<Select
|
||||
isSearchable={false}
|
||||
value={timezones.find(item => item.value === timezone)}
|
||||
onChange={timezone => this.onTimeZoneChanged(timezone.value)}
|
||||
options={timezones}
|
||||
|
@ -2,10 +2,10 @@ import React from 'react';
|
||||
import AsyncSelect from 'react-select/lib/Async';
|
||||
import { TagOption } from './TagOption';
|
||||
import { TagBadge } from './TagBadge';
|
||||
import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
|
||||
import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
|
||||
import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer';
|
||||
import NoOptionsMessage from 'app/core/components/Select/NoOptionsMessage';
|
||||
import { components } from 'react-select';
|
||||
import ResetStyles from 'app/core/components/Picker/ResetStyles';
|
||||
import ResetStyles from 'app/core/components/Select/ResetStyles';
|
||||
|
||||
export interface Props {
|
||||
tags: string[];
|
||||
|
@ -3,9 +3,9 @@ import React, { PureComponent } from 'react';
|
||||
import _ from 'lodash';
|
||||
|
||||
// Components
|
||||
import ResetStyles from 'app/core/components/Picker/ResetStyles';
|
||||
import { Option, SingleValue } from 'app/core/components/Picker/PickerOption';
|
||||
import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
|
||||
import ResetStyles from 'app/core/components/Select/ResetStyles';
|
||||
import { Option, SingleValue } from 'app/core/components/Select/PickerOption';
|
||||
import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer';
|
||||
import Select from 'react-select';
|
||||
|
||||
// Types
|
||||
|
@ -25,10 +25,10 @@ import {
|
||||
makeTimeSeriesList,
|
||||
updateHistory,
|
||||
} from 'app/core/utils/explore';
|
||||
import ResetStyles from 'app/core/components/Picker/ResetStyles';
|
||||
import PickerOption from 'app/core/components/Picker/PickerOption';
|
||||
import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
|
||||
import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
|
||||
import ResetStyles from 'app/core/components/Select/ResetStyles';
|
||||
import PickerOption from 'app/core/components/Select/PickerOption';
|
||||
import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer';
|
||||
import NoOptionsMessage from 'app/core/components/Select/NoOptionsMessage';
|
||||
import TableModel from 'app/core/table_model';
|
||||
import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
|
||||
import { Emitter } from 'app/core/utils/emitter';
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import SlideDown from 'app/core/components/Animations/SlideDown';
|
||||
import { UserPicker } from 'app/core/components/Picker/UserPicker';
|
||||
import { UserPicker } from 'app/core/components/Select/UserPicker';
|
||||
import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
|
||||
import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
|
||||
import { TeamMember, User } from 'app/types';
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Label } from 'app/core/components/Label/Label';
|
||||
import SimplePicker from 'app/core/components/Picker/SimplePicker';
|
||||
import { Select } from 'app/core/components/Select/Select';
|
||||
import { MappingType, RangeMap, ValueMap } from 'app/types';
|
||||
|
||||
interface Props {
|
||||
@ -135,13 +135,12 @@ export default class MappingRow extends PureComponent<Props, State> {
|
||||
<div className="mapping-row">
|
||||
<div className="gf-form-inline mapping-row-type">
|
||||
<Label width={5}>Type</Label>
|
||||
<SimplePicker
|
||||
<Select
|
||||
placeholder="Choose type"
|
||||
isSearchable={false}
|
||||
options={mappingOptions}
|
||||
value={mappingOptions.find(o => o.value === type)}
|
||||
getOptionLabel={i => i.label}
|
||||
getOptionValue={i => i.value}
|
||||
onSelected={type => this.onMappingTypeChange(type.value)}
|
||||
onChange={type => this.onMappingTypeChange(type.value)}
|
||||
width={7}
|
||||
/>
|
||||
</div>
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Label } from 'app/core/components/Label/Label';
|
||||
import Select from 'app/core/components/Picker/Select';
|
||||
import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker';
|
||||
import Select from 'app/core/components/Select/Select';
|
||||
import UnitPicker from 'app/core/components/Select/Unit/UnitPicker';
|
||||
import { OptionModuleProps } from './module';
|
||||
|
||||
const statOptions = [
|
||||
|
Loading…
Reference in New Issue
Block a user