bb31c4ba14
* Avoids invalid hosts * Fixed test selector, instead using react-select-2-listbox * Different way of selecting the managed user * Convert select-option- to value instead of label * Replaced all instances of networkidle * done rewriting test * Fix prisma is not defined error * Depend on inner text rather than testid * Fill of team create is unstable * Removed console.log --------- Co-authored-by: Efraín Rochín <roae.85@gmail.com>
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import type { GroupBase, InputProps, OptionProps } from "react-select";
|
|
import { components as reactSelectComponents } from "react-select";
|
|
|
|
import { classNames } from "@calcom/lib";
|
|
|
|
import { UpgradeTeamsBadge } from "../../badge";
|
|
import { Check } from "../../icon";
|
|
|
|
export const InputComponent = <
|
|
Option,
|
|
IsMulti extends boolean = false,
|
|
Group extends GroupBase<Option> = GroupBase<Option>
|
|
>({
|
|
inputClassName,
|
|
...props
|
|
}: InputProps<Option, IsMulti, Group>) => {
|
|
return (
|
|
<reactSelectComponents.Input
|
|
// disables our default form focus hightlight on the react-select input element
|
|
inputClassName={classNames(
|
|
"focus:ring-0 focus:ring-offset-0 dark:!text-darkgray-900 !text-emphasis",
|
|
inputClassName
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|
|
|
|
type ExtendedOption = {
|
|
value: string | number;
|
|
label: string;
|
|
needsUpgrade?: boolean;
|
|
};
|
|
|
|
export const OptionComponent = <
|
|
Option,
|
|
IsMulti extends boolean = false,
|
|
Group extends GroupBase<Option> = GroupBase<Option>
|
|
>({
|
|
...props
|
|
}: OptionProps<Option, IsMulti, Group>) => {
|
|
return (
|
|
// This gets styled in the select classNames prop now - handles overrides with styles vs className here doesnt
|
|
<reactSelectComponents.Option {...props}>
|
|
<div className="flex">
|
|
<span className="mr-auto" data-testid={`select-option-${(props as unknown as ExtendedOption).value}`}>
|
|
{props.label || <> </>}
|
|
</span>
|
|
{(props.data as unknown as ExtendedOption).needsUpgrade && <UpgradeTeamsBadge />}
|
|
{props.isSelected && <Check className="ml-2 h-4 w-4" />}
|
|
</div>
|
|
</reactSelectComponents.Option>
|
|
);
|
|
};
|
|
|
|
// We need to override this component if we need a icon - we can't simpily override styles
|
|
type IconLeadingProps = {
|
|
icon: React.ReactNode;
|
|
children?: React.ReactNode;
|
|
} & React.ComponentProps<typeof reactSelectComponents.Control>;
|
|
|
|
export const IconLeading = ({ icon, children, ...props }: IconLeadingProps) => {
|
|
return (
|
|
<reactSelectComponents.Control {...props}>
|
|
{icon}
|
|
{children}
|
|
</reactSelectComponents.Control>
|
|
);
|
|
};
|