DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): fix longstanding drag-and-drop duplication issue (#502)

Browse Source 
* fix(ui): fixed color switching on list reordering

* chore: remove lock file

* chore: add back lock file

* feat(ui): fix color duplication issue and prevent scrolling beyond parent

* feat(ui): add to storybook

* fix(ui): remove white background while dragging

* chore: remove dnd pangea from package.json

* chore: rebuild lock file

* chore: remove nested li element issue

* fix(ui): allow grabbing cursor while dragging

* fix(ui): address chromatic errors

* fix(ui): address chromatic errors

* fix(ui): address linting issues and pass tests

* fix(ui): create hook for modifying the cursor globally

* chore: add check for storybook env

* chore: add back unused import to AddAllButton

* fix: make cursor grabbing hook more explicit

* chore: move sortable list item into sortable list file

* fix: remove isStorybook prop from ScheduleListItem

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
This commit is contained in:
Preston Cook
2025-02-04 17:28:54 -06:00
committed by GitHub
parent c2328e461e
commit 4752f5860a
16 changed files with 2913 additions and 2622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/components/common/ScheduleListItem.tsx
View File

@@ -21,21 +21,22 @@ import React, { useEffect, useMemo, useState } from 'react';
import { Button } from './Button';
import DialogProvider, { usePrompt } from './DialogProvider/DialogProvider';
import { ExtensionRootWrapper, styleResetClass } from './ExtensionRoot/ExtensionRoot';
import { SortableListDragHandle } from './SortableListDragHandle';
/**
* Props for the ScheduleListItem component.
*/
export type Props = {
style?: React.CSSProperties;
interface ScheduleListItemProps {
schedule: UserSchedule;
dragHandleProps?: Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>;
onClick?: React.DOMAttributes<HTMLDivElement>['onClick'];
};
}
const IS_STORYBOOK = import.meta.env.STORYBOOK;
/**
* This is a reusable dropdown component that can be used to toggle the visiblity of information
*/
export default function ScheduleListItem({ schedule, dragHandleProps, onClick }: Props): JSX.Element {
export default function ScheduleListItem({ schedule, onClick }: ScheduleListItemProps): JSX.Element {
const [activeSchedule] = useSchedules();
const [isEditing, setIsEditing] = useState(false);
const [editorValue, setEditorValue] = useState(schedule.name);
@@ -101,14 +102,20 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
return (
<div className='h-7.5 rounded bg-white'>
<li className='h-full w-full flex cursor-pointer items-center gap-[1px] text-ut-burntorange'>
<div className='flex cursor-move items-center justify-center focusable' {...dragHandleProps}>
<div className='h-full w-full flex cursor-pointer items-center gap-[1px] text-ut-burntorange'>
{IS_STORYBOOK ? (
<DotsSixVertical
weight='bold'
className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400'
/>
</div>
) : (
<SortableListDragHandle className='flex cursor-move items-center justify-center'>
<DotsSixVertical
weight='bold'
className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400'
/>
</SortableListDragHandle>
)}
<div className='group relative flex flex-1 items-center overflow-x-hidden'>
<div
className='group/circle flex flex-grow items-center gap-spacing-3 overflow-x-hidden'
@@ -140,7 +147,11 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
/>
)}
{!isEditing && (
<Text variant='p' className='flex-1 truncate' onDoubleClick={() => setIsEditing(true)}>
<Text
variant='p'
className='flex-1 select-none truncate'
onDoubleClick={() => setIsEditing(true)}
>
{schedule.name}
</Text>
)}
@@ -203,7 +214,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
</Menu>
</DialogProvider>
</div>
</li>
</div>
</div>
);
}