github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: priority dropdown accepts undefined (#4666)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-05-31 15:14:13 +05:30 committed by GitHub
parent 0a105a1c21
commit a8184c366a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 90 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
web/components/dropdowns/priority.tsx
View File

@ -1,7 +1,7 @@
import { Fragment, ReactNode, useRef, useState } from "react"; import { Fragment, ReactNode, useRef, useState } from "react";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { usePopper } from "react-popper"; import { usePopper } from "react-popper";
import { Check, ChevronDown, Search } from "lucide-react"; import { Check, ChevronDown, Search, SignalHigh } from "lucide-react";
import { Combobox } from "@headlessui/react"; import { Combobox } from "@headlessui/react";
// types // types
import { TIssuePriorities } from "@plane/types"; import { TIssuePriorities } from "@plane/types";
@ -26,7 +26,7 @@ type Props = TDropdownProps & {
highlightUrgent?: boolean; highlightUrgent?: boolean;
onChange: (val: TIssuePriorities) => void; onChange: (val: TIssuePriorities) => void;
onClose?: () => void; onClose?: () => void;
value: TIssuePriorities; value: TIssuePriorities | undefined;
}; };
type ButtonProps = { type ButtonProps = {
@ -37,7 +37,8 @@ type ButtonProps = {
hideText?: boolean; hideText?: boolean;
isActive?: boolean; isActive?: boolean;
highlightUrgent: boolean; highlightUrgent: boolean;
priority: TIssuePriorities; placeholder: string;
priority: TIssuePriorities | undefined;
showTooltip: boolean; showTooltip: boolean;
}; };
@ -49,6 +50,7 @@ const BorderButton = (props: ButtonProps) => {
hideIcon = false, hideIcon = false,
hideText = false, hideText = false,
highlightUrgent, highlightUrgent,
placeholder,
priority, priority,
showTooltip, showTooltip,
} = props; } = props;
@ -75,7 +77,7 @@ const BorderButton = (props: ButtonProps) => {
<div <div
className={cn( className={cn(
"h-full flex items-center gap-1.5 border-[0.5px] rounded text-xs px-2 py-0.5", "h-full flex items-center gap-1.5 border-[0.5px] rounded text-xs px-2 py-0.5",
priorityClasses[priority], priorityClasses[priority ?? "none"],
{ {
// compact the icons if text is hidden // compact the icons if text is hidden
"px-0.5": hideText, "px-0.5": hideText,
@ -85,30 +87,33 @@ const BorderButton = (props: ButtonProps) => {
className className
)} )}
> >
{!hideIcon && ( {!hideIcon &&
<div (priority ? (
className={cn({ <div
// highlight just the icon if text is visible and priority is urgent className={cn({
"bg-red-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent, // highlight just the icon if text is visible and priority is urgent
})} "bg-red-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
>
<PriorityIcon
priority={priority}
size={12}
className={cn("flex-shrink-0", {
// increase the icon size if text is hidden
"h-3.5 w-3.5": hideText,
// centre align the icons if text is hidden
"translate-x-[0.0625rem]": hideText && priority === "high",
"translate-x-0.5": hideText && priority === "medium",
"translate-x-1": hideText && priority === "low",
// highlight the icon if priority is urgent
"text-white": priority === "urgent" && highlightUrgent,
})} })}
/> >
</div> <PriorityIcon
)} priority={priority}
{!hideText && <span className="flex-grow truncate">{priorityDetails?.title}</span>} size={12}
className={cn("flex-shrink-0", {
// increase the icon size if text is hidden
"h-3.5 w-3.5": hideText,
// centre align the icons if text is hidden
"translate-x-[0.0625rem]": hideText && priority === "high",
"translate-x-0.5": hideText && priority === "medium",
"translate-x-1": hideText && priority === "low",
// highlight the icon if priority is urgent
"text-white": priority === "urgent" && highlightUrgent,
})}
/>
</div>
) : (
<SignalHigh className="size-3" />
))}
{!hideText && <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder}</span>}
{dropdownArrow && ( {dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" /> <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)} )}
@ -125,6 +130,7 @@ const BackgroundButton = (props: ButtonProps) => {
hideIcon = false, hideIcon = false,
hideText = false, hideText = false,
highlightUrgent, highlightUrgent,
placeholder,
priority, priority,
showTooltip, showTooltip,
} = props; } = props;
@ -151,7 +157,7 @@ const BackgroundButton = (props: ButtonProps) => {
<div <div
className={cn( className={cn(
"h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5", "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5",
priorityClasses[priority], priorityClasses[priority ?? "none"],
{ {
// compact the icons if text is hidden // compact the icons if text is hidden
"px-0.5": hideText, "px-0.5": hideText,
@ -161,30 +167,33 @@ const BackgroundButton = (props: ButtonProps) => {
className className
)} )}
> >
{!hideIcon && ( {!hideIcon &&
<div (priority ? (
className={cn({ <div
// highlight just the icon if text is visible and priority is urgent className={cn({
"bg-red-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent, // highlight just the icon if text is visible and priority is urgent
})} "bg-red-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
>
<PriorityIcon
priority={priority}
size={12}
className={cn("flex-shrink-0", {
// increase the icon size if text is hidden
"h-3.5 w-3.5": hideText,
// centre align the icons if text is hidden
"translate-x-[0.0625rem]": hideText && priority === "high",
"translate-x-0.5": hideText && priority === "medium",
"translate-x-1": hideText && priority === "low",
// highlight the icon if priority is urgent
"text-white": priority === "urgent" && highlightUrgent,
})} })}
/> >
</div> <PriorityIcon
)} priority={priority}
{!hideText && <span className="flex-grow truncate">{priorityDetails?.title}</span>} size={12}
className={cn("flex-shrink-0", {
// increase the icon size if text is hidden
"h-3.5 w-3.5": hideText,
// centre align the icons if text is hidden
"translate-x-[0.0625rem]": hideText && priority === "high",
"translate-x-0.5": hideText && priority === "medium",
"translate-x-1": hideText && priority === "low",
// highlight the icon if priority is urgent
"text-white": priority === "urgent" && highlightUrgent,
})}
/>
</div>
) : (
<SignalHigh className="size-3" />
))}
{!hideText && <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder}</span>}
{dropdownArrow && ( {dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" /> <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)} )}
@ -202,6 +211,7 @@ const TransparentButton = (props: ButtonProps) => {
hideText = false, hideText = false,
isActive = false, isActive = false,
highlightUrgent, highlightUrgent,
placeholder,
priority, priority,
showTooltip, showTooltip,
} = props; } = props;
@ -228,7 +238,7 @@ const TransparentButton = (props: ButtonProps) => {
<div <div
className={cn( className={cn(
"h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80", "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
priorityClasses[priority], priorityClasses[priority ?? "none"],
{ {
// compact the icons if text is hidden // compact the icons if text is hidden
"px-0.5": hideText, "px-0.5": hideText,
@ -239,30 +249,33 @@ const TransparentButton = (props: ButtonProps) => {
className className
)} )}
> >
{!hideIcon && ( {!hideIcon &&
<div (priority ? (
className={cn({ <div
// highlight just the icon if text is visible and priority is urgent className={cn({
"bg-red-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent, // highlight just the icon if text is visible and priority is urgent
})} "bg-red-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
>
<PriorityIcon
priority={priority}
size={12}
className={cn("flex-shrink-0", {
// increase the icon size if text is hidden
"h-3.5 w-3.5": hideText,
// centre align the icons if text is hidden
"translate-x-[0.0625rem]": hideText && priority === "high",
"translate-x-0.5": hideText && priority === "medium",
"translate-x-1": hideText && priority === "low",
// highlight the icon if priority is urgent
"text-white": priority === "urgent" && highlightUrgent,
})} })}
/> >
</div> <PriorityIcon
)} priority={priority}
{!hideText && <span className="flex-grow truncate">{priorityDetails?.title}</span>} size={12}
className={cn("flex-shrink-0", {
// increase the icon size if text is hidden
"h-3.5 w-3.5": hideText,
// centre align the icons if text is hidden
"translate-x-[0.0625rem]": hideText && priority === "high",
"translate-x-0.5": hideText && priority === "medium",
"translate-x-1": hideText && priority === "low",
// highlight the icon if priority is urgent
"text-white": priority === "urgent" && highlightUrgent,
})}
/>
</div>
) : (
<SignalHigh className="size-3" />
))}
{!hideText && <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder}</span>}
{dropdownArrow && ( {dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" /> <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)} )}
@ -285,6 +298,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
highlightUrgent = true, highlightUrgent = true,
onChange, onChange,
onClose, onClose,
placeholder = "Priority",
placement, placement,
showTooltip = false, showTooltip = false,
tabIndex, tabIndex,
@ -400,6 +414,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
dropdownArrow={dropdownArrow && !disabled} dropdownArrow={dropdownArrow && !disabled}
dropdownArrowClassName={dropdownArrowClassName} dropdownArrowClassName={dropdownArrowClassName}
hideIcon={hideIcon} hideIcon={hideIcon}
placeholder={placeholder}
showTooltip={showTooltip} showTooltip={showTooltip}
hideText={BUTTON_VARIANTS_WITHOUT_TEXT.includes(buttonVariant)} hideText={BUTTON_VARIANTS_WITHOUT_TEXT.includes(buttonVariant)}
/> />