public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bugfix/hide arrow button (#4481) 

* feat: disable arrow buttons based on the position

* Instead of disable, hide

Co-authored-by: nafees nazik <nafeesnazik21@gmail.com>
pull/4472/head^2
Alex van Andel 2022-09-14 23:06:26 +01:00 committed by GitHub
parent f09af2d393
commit e29d9cd545
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/web/pages/v2/event-types/index.tsx
View File

@ -203,6 +203,8 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
} }
}, []); }, []);
const firstItem = types[0];
const lastItem = types[types.length - 1];
return ( return (
<div className="mb-16 flex overflow-hidden rounded-md border border-gray-200 bg-white"> <div className="mb-16 flex overflow-hidden rounded-md border border-gray-200 bg-white">
<ul className="w-full divide-y divide-neutral-200" data-testid="event-types"> <ul className="w-full divide-y divide-neutral-200" data-testid="event-types">
@ -226,17 +228,21 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
)}> )}>
{types.length > 1 && !type.$disabled && ( {types.length > 1 && !type.$disabled && (
<> <>
<button {!(firstItem && firstItem.id === type.id) && (
className="invisible absolute left-[5px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]" <button
onClick={() => moveEventType(index, -1)}> className="invisible absolute left-[5px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
<Icon.FiArrowUp className="h-5 w-5" /> onClick={() => moveEventType(index, -1)}>
</button> <Icon.FiArrowUp className="h-5 w-5" />
</button>
)}
<button {!(lastItem && lastItem.id === type.id) && (
className="invisible absolute left-[5px] mt-8 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]" <button
onClick={() => moveEventType(index, 1)}> className="invisible absolute left-[5px] mt-8 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
<Icon.FiArrowDown className="h-5 w-5" /> onClick={() => moveEventType(index, 1)}>
</button> <Icon.FiArrowDown className="h-5 w-5" />
</button>
)}
</> </>
)} )}
<MemoizedItem type={type} group={group} readOnly={readOnly} /> <MemoizedItem type={type} group={group} readOnly={readOnly} />