IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: Add an optional className to the UserPicker and TeamPicker #10676

Browse Source
This commit is contained in:
Johannes Schill 2018-01-31 16:44:14 +01:00
parent 20052150ba
commit a73af39056
4 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/app/core/components/Permissions/AddPermissions.tsx
View File

@ -103,13 +103,23 @@ class AddPermissions extends Component<IProps, any> {
{newItem.type === 'User' ? ( {newItem.type === 'User' ? (
<div className="gf-form"> <div className="gf-form">
<UserPicker backendSrv={backendSrv} handlePicked={this.userPicked} value={newItem.userId} /> <UserPicker
backendSrv={backendSrv}
handlePicked={this.userPicked}
value={newItem.userId}
className="width-8"
/>
</div> </div>
) : null} ) : null}
{newItem.type === 'Group' ? ( {newItem.type === 'Group' ? (
<div className="gf-form"> <div className="gf-form">
<TeamPicker backendSrv={backendSrv} handlePicked={this.teamPicked} value={newItem.teamId} /> <TeamPicker
backendSrv={backendSrv}
handlePicked={this.teamPicked}
value={newItem.teamId}
className="width-8"
/>
</div> </div>
) : null} ) : null}

5
public/app/core/components/Picker/TeamPicker.tsx
View File

@ -10,6 +10,7 @@ export interface IProps {
toggleLoading: any; toggleLoading: any;
handlePicked: (user) => void; handlePicked: (user) => void;
value?: string; value?: string;
className?: string;
} }
export interface Team { export interface Team {
@ -55,7 +56,7 @@ class TeamPicker extends Component<IProps, any> {
render() { render() {
const AsyncComponent = this.state.creatable ? Select.AsyncCreatable : Select.Async; const AsyncComponent = this.state.creatable ? Select.AsyncCreatable : Select.Async;
const { isLoading, handlePicked, value } = this.props; const { isLoading, handlePicked, value, className } = this.props;
return ( return (
<div className="user-picker"> <div className="user-picker">
@ -69,7 +70,7 @@ class TeamPicker extends Component<IProps, any> {
loadingPlaceholder="Loading..." loadingPlaceholder="Loading..."
noResultsText="No teams found" noResultsText="No teams found"
onChange={handlePicked} onChange={handlePicked}
className="width-12 gf-form-input gf-form-input--form-dropdown" className={`gf-form-input gf-form-input--form-dropdown ${className || ''}`}
optionComponent={PickerOption} optionComponent={PickerOption}
placeholder="Choose" placeholder="Choose"
value={value} value={value}

5
public/app/core/components/Picker/UserPicker.tsx
View File

@ -10,6 +10,7 @@ export interface IProps {
toggleLoading: any; toggleLoading: any;
handlePicked: (user) => void; handlePicked: (user) => void;
value?: string; value?: string;
className?: string;
} }
export interface User { export interface User {
@ -54,7 +55,7 @@ class UserPicker extends Component<IProps, any> {
render() { render() {
const AsyncComponent = this.state.creatable ? Select.AsyncCreatable : Select.Async; const AsyncComponent = this.state.creatable ? Select.AsyncCreatable : Select.Async;
const { isLoading, handlePicked, value } = this.props; const { isLoading, handlePicked, value, className } = this.props;
return ( return (
<div className="user-picker"> <div className="user-picker">
<AsyncComponent <AsyncComponent
@ -67,7 +68,7 @@ class UserPicker extends Component<IProps, any> {
loadingPlaceholder="Loading..." loadingPlaceholder="Loading..."
noResultsText="No users found" noResultsText="No users found"
onChange={handlePicked} onChange={handlePicked}
className="width-12 gf-form-input gf-form-input--form-dropdown" className={`gf-form-input gf-form-input--form-dropdown ${className || ''}`}
optionComponent={PickerOption} optionComponent={PickerOption}
placeholder="Choose" placeholder="Choose"
value={value} value={value}

1
public/app/core/components/Picker/withPicker.tsx
View File

@ -4,6 +4,7 @@ export interface IProps {
backendSrv: any; backendSrv: any;
handlePicked: (data) => void; handlePicked: (data) => void;
value?: string; value?: string;
className?: string;
} }
export default function withPicker(WrappedComponent) { export default function withPicker(WrappedComponent) {