Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(admin): fix users list

Browse source
This commit is contained in:
Matthew Penner 2023-01-25 11:14:39 -07:00
parent 5063db7d95
commit 4b82ca1042
No known key found for this signature in database
5 changed files with 126 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

34
resources/scripts/components/elements/dropdown/Dropdown.tsx
View file

@ -1,27 +1,29 @@
import { ElementType, forwardRef, useMemo } from 'react';
import * as React from 'react';
import { Menu, Transition } from '@headlessui/react';
import styles from './style.module.css';
import classNames from 'classnames';
import DropdownItem from '@/components/elements/dropdown/DropdownItem';
import DropdownButton from '@/components/elements/dropdown/DropdownButton';
import type { ElementType, ReactNode } from 'react';
import { Children as ReactChildren } from 'react';
import { forwardRef, useMemo } from 'react';
import { DropdownButton } from '@/components/elements/dropdown/DropdownButton';
import { DropdownItem } from '@/components/elements/dropdown/DropdownItem';
import styles from './style.module.css';
interface Props {
as?: ElementType;
children: React.ReactNode;
children: ReactNode;
}
const DropdownGap = ({ invisible }: { invisible?: boolean }) => (
<div className={classNames('m-2 border', { 'border-neutral-700': !invisible, 'border-transparent': invisible })} />
);
type TypedChild = (React.ReactChild | React.ReactFragment | React.ReactPortal) & {
type TypedChild = ReactNode & {
type?: JSX.Element;
};
const Dropdown = forwardRef<typeof Menu, Props>(({ as, children }, ref) => {
const [Button, items] = useMemo(() => {
const list = React.Children.toArray(children) as unknown as TypedChild[];
const list = ReactChildren.toArray(children) as unknown as TypedChild[];
return [
list.filter(child => child.type === DropdownButton),
@ -34,18 +36,18 @@ const Dropdown = forwardRef<typeof Menu, Props>(({ as, children }, ref) => {
}
return (
<Menu as={as || 'div'} className={styles.menu} ref={ref}>
<Menu as={as ?? 'div'} className={styles.menu} ref={ref}>
{Button}
<Transition
enter={'transition duration-100 ease-out'}
enterFrom={'transition scale-95 opacity-0'}
enterTo={'transform scale-100 opacity-100'}
leave={'transition duration-75 ease-out'}
leaveFrom={'transform scale-100 opacity-100'}
leaveTo={'transform scale-95 opacity-0'}
enter="transition duration-100 ease-out"
enterFrom="transition scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Menu.Items className={classNames(styles.items_container, 'w-56')}>
<div className={'px-1 py-1'}>{items}</div>
<div className="px-1 py-1">{items}</div>
</Menu.Items>
</Transition>
</Menu>