From d9434ba1b1983fe55b7367f9ef12b13f57baaf74 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Sun, 7 Oct 2018 21:08:22 +0200 Subject: [PATCH 01/36] wip: Upgrade react-select #13425 --- package.json | 3 +- .../PermissionList/AddPermission.tsx | 23 +- .../PermissionList/PermissionListItem.tsx | 2 +- .../components/Picker/DescriptionOption.tsx | 67 +- .../components/Picker/DescriptionPicker.tsx | 46 +- .../components/Picker/IndicatorsContainer.tsx | 13 + .../components/Picker/NoOptionsMessage.tsx | 18 + .../core/components/Picker/PickerOption.tsx | 67 +- .../core/components/Picker/ResetStyles.tsx | 23 + .../app/core/components/Picker/TeamPicker.tsx | 56 +- .../app/core/components/Picker/UserPicker.tsx | 52 +- .../core/components/Picker/ValueContainer.tsx | 21 + public/app/features/teams/TeamMembers.tsx | 7 +- public/sass/components/_form_select_box.scss | 92 +- yarn.lock | 2128 ++++++++++++++++- 15 files changed, 2421 insertions(+), 197 deletions(-) create mode 100644 public/app/core/components/Picker/IndicatorsContainer.tsx create mode 100644 public/app/core/components/Picker/NoOptionsMessage.tsx create mode 100644 public/app/core/components/Picker/ResetStyles.tsx create mode 100644 public/app/core/components/Picker/ValueContainer.tsx 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 ( -