Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-25 00:09:40 +02:00
Code Issues Releases Activity

refactor(ui): replace ng selectors with react-select [EE-3608] (#7203)

Browse source 
Co-authored-by: LP B <xAt0mZ@users.noreply.github.com>
This commit is contained in:
Chaim Lev-Ari 2022-09-21 10:10:58 +03:00 • committed by GitHub
parent 1e21961e6a
commit ceaee4e175
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
66 changed files with 1188 additions and 625 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/react/components/TeamsSelector/TeamsSelector.stories.tsx
View file

@ -13,14 +13,14 @@ export default meta;
export { Example };
function Example() {
const [selectedTeams, setSelectedTeams] = useState([1]);
const [selectedTeams, setSelectedTeams] = useState<readonly number[]>([1]);
const teams = [createMockTeam(1, 'team1'), createMockTeam(2, 'team2')];
return (
<TeamsSelector
value={selectedTeams}
onChange={setSelectedTeams}
onChange={(value) => setSelectedTeams(value)}
teams={teams}
placeholder="Select one or more teams"
/>

21
app/react/components/TeamsSelector/TeamsSelector.tsx
View file

@ -1,11 +1,11 @@
import { Team, TeamId } from '@/react/portainer/users/teams/types';
import { Select } from '@@/form-components/ReactSelect';
import { PortainerSelect } from '@@/form-components/PortainerSelect';
interface Props {
name?: string;
value: TeamId[];
onChange(value: TeamId[]): void;
value: TeamId[] | readonly TeamId[];
onChange(value: readonly TeamId[]): void;
teams: Team[];
dataCy?: string;
inputId?: string;
@ -21,18 +21,15 @@ export function TeamsSelector({
inputId,
placeholder,
}: Props) {
const options = teams.map((team) => ({ label: team.Name, value: team.Id }));
return (
<Select
<PortainerSelect<number>
name={name}
isMulti
getOptionLabel={(team) => team.Name}
getOptionValue={(team) => String(team.Id)}
options={teams}
value={teams.filter((team) => value.includes(team.Id))}
closeMenuOnSelect={false}
onChange={(selectedTeams) =>
onChange(selectedTeams.map((team) => team.Id))
}
options={options}
value={value}
onChange={(value) => onChange(value)}
data-cy={dataCy}
inputId={inputId}
placeholder={placeholder}