4752f5860a
* 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>
71 lines
3.5 KiB
TypeScript
71 lines
3.5 KiB
TypeScript
import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from '@headlessui/react';
|
|
import { CaretDown, CaretUp } from '@phosphor-icons/react';
|
|
import Text from '@views/components/common/Text/Text';
|
|
import useSchedules from '@views/hooks/useSchedules';
|
|
import React from 'react';
|
|
|
|
/**
|
|
* Props for the Dropdown component.
|
|
*/
|
|
export type ScheduleDropdownProps = {
|
|
defaultOpen?: boolean;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
/**
|
|
* This is a reusable dropdown component that can be used to toggle the visiblity of information
|
|
*/
|
|
export default function ScheduleDropdown({ defaultOpen, children }: ScheduleDropdownProps) {
|
|
const [activeSchedule] = useSchedules();
|
|
|
|
return (
|
|
<div className='border border-ut-offwhite rounded border-solid bg-white'>
|
|
<Disclosure defaultOpen={defaultOpen}>
|
|
{({ open }) => (
|
|
<>
|
|
<DisclosureButton className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
|
|
<div className='flex-1'>
|
|
<Text as='div' variant='h3' className='w-100% text-ut-burntorange normal-case!'>
|
|
{activeSchedule ? activeSchedule.name : 'Schedule'}
|
|
</Text>
|
|
<div className='flex gap-2.5 text-theme-black leading-[75%]!'>
|
|
<div className='flex gap-1.25'>
|
|
<Text variant='h4'>{activeSchedule ? activeSchedule.hours : 0}</Text>
|
|
<Text variant='h4' className='font-all-small-caps!'>
|
|
{activeSchedule.hours === 1 ? 'HOUR' : 'HOURS'}
|
|
</Text>
|
|
</div>
|
|
<div className='flex gap-1.25'>
|
|
<Text variant='h4'>{activeSchedule ? activeSchedule.courses.length : 0}</Text>
|
|
<Text variant='h4' className='font-all-small-caps!'>
|
|
{activeSchedule.courses.length === 1 ? 'COURSE' : 'COURSES'}
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Text className='text-ut-burntorange text-2xl! font-normal!'>
|
|
{open ? <CaretDown weight='fill' /> : <CaretUp weight='fill' />}
|
|
</Text>
|
|
</DisclosureButton>
|
|
|
|
<Transition
|
|
as='div'
|
|
className='overflow-hidden'
|
|
enter='transition-[max-height,opacity,padding] duration-300 ease-in-out-expo'
|
|
enterFrom='max-h-0 opacity-0 p-0.5'
|
|
enterTo='max-h-[440px] opacity-100 p-0'
|
|
leave='transition-[max-height,opacity,padding] duration-300 ease-in-out-expo'
|
|
leaveFrom='max-h-[440px] opacity-100 p-0'
|
|
leaveTo='max-h-0 opacity-0 p-0.5'
|
|
>
|
|
<div className='px-3.5 pb-2.5 pt-2'>
|
|
<DisclosurePanel>{children}</DisclosurePanel>
|
|
</div>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Disclosure>
|
|
</div>
|
|
);
|
|
}
|