plane/web/components/dropdowns/member/buttons.tsx
Aaryan Khandelwal a2f34e9573
style: peek overview and issue details properties (#3447)
* style: peek overview and issue details properties

* fix: cycle and module remove function

* style: update placeholder text color

* fix: relation constant

* chore: added todos to fix later
2024-01-24 19:21:59 +05:30

146 lines
3.9 KiB
TypeScript

import { observer } from "mobx-react-lite";
import { ChevronDown } from "lucide-react";
// hooks
import { useMember } from "hooks/store";
// ui
import { Avatar, AvatarGroup, UserGroupIcon } from "@plane/ui";
// helpers
import { cn } from "helpers/common.helper";
type ButtonProps = {
className?: string;
dropdownArrow: boolean;
dropdownArrowClassName: string;
placeholder: string;
hideIcon?: boolean;
hideText?: boolean;
userIds: string | string[] | null;
};
const ButtonAvatars = observer(({ userIds }: { userIds: string | string[] | null }) => {
const { getUserDetails } = useMember();
if (Array.isArray(userIds)) {
if (userIds.length > 0)
return (
<AvatarGroup size="md">
{userIds.map((userId) => {
const userDetails = getUserDetails(userId);
if (!userDetails) return;
return <Avatar key={userId} src={userDetails.avatar} name={userDetails.display_name} />;
})}
</AvatarGroup>
);
} else {
if (userIds) {
const userDetails = getUserDetails(userIds);
return <Avatar src={userDetails?.avatar} name={userDetails?.display_name} size="md" />;
}
}
return <UserGroupIcon className="h-3 w-3 flex-shrink-0" />;
});
export const BorderButton = observer((props: ButtonProps) => {
const {
className,
dropdownArrow,
dropdownArrowClassName,
hideIcon = false,
hideText = false,
placeholder,
userIds,
} = props;
// store hooks
const { getUserDetails } = useMember();
const isMultiple = Array.isArray(userIds);
return (
<div
className={cn(
"h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
className
)}
>
{!hideIcon && <ButtonAvatars userIds={userIds} />}
{!hideText && (
<span className="flex-grow truncate">
{userIds ? (isMultiple ? placeholder : getUserDetails(userIds)?.display_name) : placeholder}
</span>
)}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</div>
);
});
export const BackgroundButton = observer((props: ButtonProps) => {
const {
className,
dropdownArrow,
dropdownArrowClassName,
hideIcon = false,
hideText = false,
placeholder,
userIds,
} = props;
// store hooks
const { getUserDetails } = useMember();
const isMultiple = Array.isArray(userIds);
return (
<div
className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
>
{!hideIcon && <ButtonAvatars userIds={userIds} />}
{!hideText && (
<span className="flex-grow truncate">
{userIds ? (isMultiple ? placeholder : getUserDetails(userIds)?.display_name) : placeholder}
</span>
)}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</div>
);
});
export const TransparentButton = observer((props: ButtonProps) => {
const {
className,
dropdownArrow,
dropdownArrowClassName,
hideIcon = false,
hideText = false,
placeholder,
userIds,
} = props;
// store hooks
const { getUserDetails } = useMember();
const isMultiple = Array.isArray(userIds);
return (
<div
className={cn(
"h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
className
)}
>
{!hideIcon && <ButtonAvatars userIds={userIds} />}
{!hideText && (
<span className="flex-grow truncate">
{userIds ? (isMultiple ? placeholder : getUserDetails(userIds)?.display_name) : placeholder}
</span>
)}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</div>
);
});