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

71
resources/scripts/components/elements/dropdown/DropdownItem.tsx
View file

@ -1,43 +1,68 @@
import { forwardRef } from 'react';
import * as React from 'react';
import { Menu } from '@headlessui/react';
import styles from './style.module.css';
import classNames from 'classnames';
import type { MouseEvent, ReactNode, Ref } from 'react';
import { forwardRef } from 'react';
import type { NavLinkProps } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import styles from './style.module.css';
interface Props {
children: React.ReactNode | ((opts: { active: boolean; disabled: boolean }) => JSX.Element);
children: ReactNode | ((opts: { active: boolean; disabled: boolean }) => JSX.Element);
danger?: boolean;
disabled?: boolean;
className?: string;
icon?: JSX.Element;
onClick?: (e: React.MouseEvent) => void;
onClick?: (e: MouseEvent) => void;
}
const DropdownItem = forwardRef<HTMLAnchorElement, Props>(
({ disabled, danger, className, onClick, children, icon: IconComponent }, ref) => {
const DropdownItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props & Partial<Omit<NavLinkProps, 'children'>>>(
({ disabled, danger, className, onClick, children, icon: IconComponent, ...props }, ref) => {
return (
<Menu.Item disabled={disabled}>
{({ disabled, active }) => (
<a
ref={ref}
href={'#'}
className={classNames(
styles.menu_item,
{
[styles.danger]: danger,
[styles.disabled]: disabled,
},
className,
<>
{'to' in props && props.to !== undefined ? (
<NavLink
{...props}
to={props.to}
ref={ref as unknown as Ref<HTMLAnchorElement>}
className={classNames(
styles.menu_item,
{
[styles.danger]: danger,
[styles.disabled]: disabled,
},
className,
)}
onClick={onClick}
>
{IconComponent}
{typeof children === 'function' ? children({ disabled, active }) : children}
</NavLink>
) : (
<button
type="button"
ref={ref as unknown as Ref<HTMLButtonElement>}
className={classNames(
styles.menu_item,
{
[styles.danger]: danger,
[styles.disabled]: disabled,
},
className,
)}
onClick={onClick}
>
{IconComponent}
{typeof children === 'function' ? children({ disabled, active }) : children}
</button>
)}
onClick={onClick}
>
{IconComponent}
{typeof children === 'function' ? children({ disabled, active }) : children}
</a>
</>
)}
</Menu.Item>
);
},
);
export default DropdownItem;
export { DropdownItem };