Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-19 13:29:41 +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

63
app/react/components/form-components/ReactSelect.tsx
View file

@ -1,24 +1,53 @@
import ReactSelectCreatable, { CreatableProps } from 'react-select/creatable';
import ReactSelect, { GroupBase, Props as SelectProps } from 'react-select';
import ReactSelectCreatable, {
CreatableProps as ReactSelectCreatableProps,
} from 'react-select/creatable';
import ReactSelect, {
GroupBase,
Props as ReactSelectProps,
} from 'react-select';
import clsx from 'clsx';
import { RefAttributes } from 'react';
import ReactSelectType from 'react-select/dist/declarations/src/Select';
import styles from './ReactSelect.module.css';
import './ReactSelect.css';
export function Select<
Option = unknown,
interface DefaultOption {
value: string;
label: string;
}
type RegularProps<
Option = DefaultOption,
IsMulti extends boolean = false,
Group extends GroupBase<Option> = GroupBase<Option>
>({
className,
...props
}: SelectProps<Option, IsMulti, Group> &
RefAttributes<ReactSelectType<Option, IsMulti, Group>>) {
> = { isCreatable?: false } & ReactSelectProps<Option, IsMulti, Group> &
RefAttributes<ReactSelectType<Option, IsMulti, Group>>;
type CreatableProps<
Option = DefaultOption,
IsMulti extends boolean = false,
Group extends GroupBase<Option> = GroupBase<Option>
> = { isCreatable: true } & ReactSelectCreatableProps<Option, IsMulti, Group>;
type Props<
Option = DefaultOption,
IsMulti extends boolean = false,
Group extends GroupBase<Option> = GroupBase<Option>
> =
| CreatableProps<Option, IsMulti, Group>
| RegularProps<Option, IsMulti, Group>;
export function Select<
Option = DefaultOption,
IsMulti extends boolean = false,
Group extends GroupBase<Option> = GroupBase<Option>
>({ className, isCreatable = false, ...props }: Props<Option, IsMulti, Group>) {
const Component = isCreatable ? ReactSelectCreatable : ReactSelect;
return (
<ReactSelect
className={clsx(styles.root, className)}
classNamePrefix="selector"
<Component
className={clsx(className, 'portainer-selector-root')}
classNamePrefix="portainer-selector"
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
@ -26,14 +55,14 @@ export function Select<
}
export function Creatable<
Option = unknown,
Option = DefaultOption,
IsMulti extends boolean = false,
Group extends GroupBase<Option> = GroupBase<Option>
>({ className, ...props }: CreatableProps<Option, IsMulti, Group>) {
>({ className, ...props }: ReactSelectCreatableProps<Option, IsMulti, Group>) {
return (
<ReactSelectCreatable
className={clsx(styles.root, className)}
classNamePrefix="selector"
className={clsx(className, 'portainer-selector-root')}
classNamePrefix="portainer-selector"
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>