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: empty state for multi-level dropdown (#1802)

Browse Source 
* fix :label filter should show something if there is no label #1779 (#1795)

* style: children empty state

---------

Co-authored-by: Pankaj Chotaliya <34762752+pankajvc@users.noreply.github.com>
This commit is contained in:
Aaryan Khandelwal 2023-08-08 14:13:26 +05:30 committed by GitHub
parent 88e5a05253
commit 5f1209f1db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
apps/app/components/ui/multi-level-dropdown.tsx
View File

@ -66,7 +66,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
> >
<Menu.Items <Menu.Items
static static
className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none" className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-custom-background-90 border border-custom-border-300 text-xs shadow-lg focus:outline-none"
> >
{options.map((option) => ( {options.map((option) => (
<div className="relative p-1" key={option.id}> <div className="relative p-1" key={option.id}>
@ -107,7 +107,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
</Menu.Item> </Menu.Item>
{option.hasChildren && option.id === openChildFor && ( {option.hasChildren && option.id === openChildFor && (
<div <div
className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-custom-background-90 shadow-lg focus:outline-none ${ className={`absolute top-0 min-w-36 whitespace-nowrap origin-top-right select-none overflow-y-scroll rounded-md bg-custom-background-90 border border-custom-border-300 shadow-lg focus:outline-none ${
direction === "left" direction === "left"
? "right-full -translate-x-1" ? "right-full -translate-x-1"
: "left-full translate-x-1" : "left-full translate-x-1"
@ -125,27 +125,33 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
> >
{option.children ? ( {option.children ? (
<div className="space-y-1 p-1"> <div className="space-y-1 p-1">
{option.children.map((child) => { {option.children.length === 0 ? (
if (child.element) return child.element; <p className="text-custom-text-200 text-center px-1 py-1.5">
else No {option.label} found
return ( </p> //if no children found, show this message.
<button ) : (
key={child.id} option.children.map((child) => {
type="button" if (child.element) return child.element;
onClick={() => onSelect(child.value)} else
className={`${ return (
child.selected ? "bg-custom-background-80" : "" <button
} flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`} key={child.id}
> type="button"
{child.label}{" "} onClick={() => onSelect(child.value)}
<CheckIcon className={`${
className={`h-3.5 w-3.5 opacity-0 ${ child.selected ? "bg-custom-background-80" : ""
child.selected ? "opacity-100" : "" } flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
}`} >
/> {child.label}{" "}
</button> <CheckIcon
); className={`h-3.5 w-3.5 opacity-0 ${
})} child.selected ? "opacity-100" : ""
}`}
/>
</button>
);
})
)}
</div> </div>
) : ( ) : (
<Loader className="p-1 space-y-2"> <Loader className="p-1 space-y-2">