devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Exam generation rework, batch user tables, fastapi endpoint switch

Browse Source
This commit is contained in:
Carlos-Mesquita
2024-11-04 23:29:14 +00:00
parent a2bc997e8f
commit 15c9c4d4bd
148 changed files with 11348 additions and 3901 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/Dropdown.tsx
View File

@@ -2,29 +2,42 @@ import React, { useState, ReactNode, useRef, useEffect } from 'react';
import { animated, useSpring } from '@react-spring/web';
interface DropdownProps {
title: ReactNode;
title?: ReactNode;
open?: boolean;
setIsOpen?: React.Dispatch<React.SetStateAction<boolean>> | ((isOpen: boolean) => void);
className?: string;
contentWrapperClassName?: string;
titleClassName?: string;
bottomPadding?: number;
disabled?: boolean,
wrapperClassName?: string;
customTitle?: ReactNode;
children: ReactNode;
}
const Dropdown: React.FC<DropdownProps> = ({
title,
open = false,
titleClassName = "",
setIsOpen: externalSetIsOpen,
className = "w-full text-left font-semibold flex justify-between items-center p-4",
contentWrapperClassName = "px-6",
bottomPadding = 12,
disabled = false,
customTitle = undefined,
wrapperClassName,
children
}) => {
const [isOpen, setIsOpen] = useState<boolean>(open);
const [internalIsOpen, setInternalIsOpen] = useState<boolean>(open);
const isOpen = externalSetIsOpen !== undefined ? open : internalIsOpen;
const toggleOpen = externalSetIsOpen !== undefined ? externalSetIsOpen : setInternalIsOpen;
const contentRef = useRef<HTMLDivElement>(null);
const [contentHeight, setContentHeight] = useState<number>(0);
useEffect(() => {
let resizeObserver: ResizeObserver | null = null;
if (contentRef.current) {
resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
@@ -38,10 +51,10 @@ const Dropdown: React.FC<DropdownProps> = ({
}
}
});
resizeObserver.observe(contentRef.current);
}
return () => {
if (resizeObserver) {
resizeObserver.disconnect();
@@ -56,28 +69,35 @@ const Dropdown: React.FC<DropdownProps> = ({
});
return (
<>
<div className={wrapperClassName}>
<button
onClick={() => setIsOpen(!isOpen)}
onClick={() => toggleOpen(!isOpen)}
className={className}
disabled={disabled}
>
{title}
<svg
className={`w-4 h-4 transform transition-transform ${isOpen ? 'rotate-180' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
<div className='flex flex-row w-full justify-between items-center'>
{customTitle ? (
customTitle
) : (
<p className={titleClassName}>{title}</p>
)}
<svg
className={`w-4 h-4 transform transition-transform ${isOpen ? 'rotate-180' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</div>
</button>
<animated.div style={springProps} className="overflow-hidden">
<div ref={contentRef} className={contentWrapperClassName} style={{paddingBottom: bottomPadding}}>
<div ref={contentRef} className={contentWrapperClassName} style={{ paddingBottom: bottomPadding }}>
{children}
</div>
</animated.div>
</>
</div>
);
};