diff --git a/src/components/Discover/DiscoverSliderEdit/index.tsx b/src/components/Discover/DiscoverSliderEdit/index.tsx index 22ade1303..5f207654c 100644 --- a/src/components/Discover/DiscoverSliderEdit/index.tsx +++ b/src/components/Discover/DiscoverSliderEdit/index.tsx @@ -12,6 +12,8 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; import { ArrowUturnLeftIcon, Bars3Icon, + ChevronDownIcon, + ChevronUpIcon, PencilIcon, XMarkIcon, } from '@heroicons/react/24/solid'; @@ -42,9 +44,12 @@ type DiscoverSliderEditProps = { onDelete: () => void; onPositionUpdate: ( updatedItemId: number, - position: keyof typeof Position + position: keyof typeof Position, + isClickable: boolean ) => void; children: React.ReactNode; + disableUpButton: boolean; + disableDownButton: boolean; }; const DiscoverSliderEdit = ({ @@ -53,6 +58,8 @@ const DiscoverSliderEdit = ({ onEnable, onDelete, onPositionUpdate, + disableUpButton, + disableDownButton, }: DiscoverSliderEditProps) => { const intl = useIntl(); const { addToast } = useToasts(); @@ -112,7 +119,7 @@ const DiscoverSliderEdit = ({ ); if (items?.[0]) { const dropped = Number(items[0]); - onPositionUpdate(dropped, hoverPosition); + onPositionUpdate(dropped, hoverPosition, false); } }, }); @@ -271,7 +278,27 @@ const DiscoverSliderEdit = ({ )} -
+
+ + +
+
{ tempSliders[index].enabled = !tempSliders[index].enabled; setSliders(tempSliders); }} - onPositionUpdate={(updatedItemId, position) => { + onPositionUpdate={(updatedItemId, position, hasClickedArrows) => { const originalPosition = sliders.findIndex( (item) => item.id === updatedItemId ); @@ -393,16 +393,24 @@ const Discover = () => { const tempSliders = sliders.slice(); tempSliders.splice(originalPosition, 1); - tempSliders.splice( - position === 'Above' && index > originalPosition - ? Math.max(index - 1, 0) - : index, - 0, - originalItem - ); + hasClickedArrows + ? tempSliders.splice( + position === 'Above' ? index - 1 : index + 1, + 0, + originalItem + ) + : tempSliders.splice( + position === 'Above' && index > originalPosition + ? Math.max(index - 1, 0) + : index, + 0, + originalItem + ); setSliders(tempSliders); }} + disableUpButton={index === 0} + disableDownButton={index === sliders.length - 1} > {sliderComponent}