diff --git a/package.json b/package.json index 5577579e0e5..4be2ecb2300 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@types/react": "^16.4.14", "@types/react-custom-scrollbars": "^4.0.5", "@types/react-dom": "^16.0.7", + "@types/react-select": "^2.0.4", "angular-mocks": "1.6.6", "autoprefixer": "^6.4.0", "axios": "^0.17.1", @@ -157,7 +158,7 @@ "react-highlight-words": "^0.10.0", "react-popper": "^0.7.5", "react-redux": "^5.0.7", - "react-select": "^1.1.0", + "react-select": "^2.0.0", "react-sizeme": "^2.3.6", "react-transition-group": "^2.2.1", "redux": "^4.0.0", diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx index fc062ce63e4..13b8c79b10d 100644 --- a/public/app/core/components/PermissionList/AddPermission.tsx +++ b/public/app/core/components/PermissionList/AddPermission.tsx @@ -17,6 +17,10 @@ export interface Props { onCancel: () => void; } +export interface TeamSelectedAction { + action: string; +} + class AddPermissions extends Component { constructor(props) { super(props); @@ -50,11 +54,11 @@ class AddPermissions extends Component { }; onUserSelected = (user: User) => { - this.setState({ userId: user ? user.id : 0 }); + this.setState({ userId: user && !Array.isArray(user) ? user.id : 0 }); }; - onTeamSelected = (team: Team) => { - this.setState({ teamId: team ? team.id : 0 }); + onTeamSelected = (team: Team, info: TeamSelectedAction) => { + this.setState({ teamId: team && !Array.isArray(team) ? team.id : 0 }); }; onPermissionChanged = (permission: OptionWithDescription) => { @@ -82,7 +86,6 @@ class AddPermissions extends Component { const newItem = this.state; const pickerClassName = 'width-20'; const isValid = this.isValid(); - return (
diff --git a/public/app/core/components/Picker/DescriptionOption.tsx b/public/app/core/components/Picker/DescriptionOption.tsx index 1bcb7100489..6a2ae134986 100644 --- a/public/app/core/components/Picker/DescriptionOption.tsx +++ b/public/app/core/components/Picker/DescriptionOption.tsx @@ -1,56 +1,27 @@ -import React, { Component } from 'react'; +import React from 'react'; +import { components } from 'react-select'; +import { OptionProps } from 'react-select/lib/components/Option'; export interface Props { - onSelect: any; - onFocus: any; - option: any; - isFocused: any; - className: any; + children: Element; + isSelected: boolean; + data: any; + getStyles: any; } -class DescriptionOption extends Component { - constructor(props) { - super(props); - this.handleMouseDown = this.handleMouseDown.bind(this); - this.handleMouseEnter = this.handleMouseEnter.bind(this); - this.handleMouseMove = this.handleMouseMove.bind(this); - } - - handleMouseDown(event) { - event.preventDefault(); - event.stopPropagation(); - this.props.onSelect(this.props.option, event); - } - - handleMouseEnter(event) { - this.props.onFocus(this.props.option, event); - } - - handleMouseMove(event) { - if (this.props.isFocused) { - return; - } - this.props.onFocus(this.props.option, event); - } - - render() { - const { option, children, className } = this.props; - return ( -