mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-03-17 23:13:51 +01:00
Remove most of Radix UI
This commit is contained in:
Gregory Schier
@@ -1,341 +1,229 @@
|
||||
import * as D from '@radix-ui/react-dropdown-menu';
|
||||
import { CheckIcon } from '@radix-ui/react-icons';
|
||||
import classnames from 'classnames';
|
||||
import { motion } from 'framer-motion';
|
||||
import type { ForwardedRef, ReactElement, ReactNode } from 'react';
|
||||
import {
|
||||
forwardRef,
|
||||
memo,
|
||||
useCallback,
|
||||
useImperativeHandle,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
export interface DropdownMenuRadioItem {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface DropdownMenuRadioProps {
|
||||
children: ReactElement<typeof DropdownMenuTrigger>;
|
||||
onValueChange: ((v: DropdownMenuRadioItem) => void) | null;
|
||||
value: string;
|
||||
label?: string;
|
||||
items: DropdownMenuRadioItem[];
|
||||
}
|
||||
|
||||
export const DropdownMenuRadio = memo(function DropdownMenuRadio({
|
||||
children,
|
||||
items,
|
||||
onValueChange,
|
||||
label,
|
||||
value,
|
||||
}: DropdownMenuRadioProps) {
|
||||
const handleChange = useCallback(
|
||||
(value: string) => {
|
||||
const item = items.find((item) => item.value === value);
|
||||
if (item && onValueChange) {
|
||||
onValueChange(item);
|
||||
}
|
||||
},
|
||||
[items, onValueChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<D.Root>
|
||||
{children}
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuContent>
|
||||
{label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
|
||||
<D.DropdownMenuRadioGroup onValueChange={handleChange} value={value}>
|
||||
{items.map((item) => (
|
||||
<DropdownMenuRadioItem key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</DropdownMenuRadioItem>
|
||||
))}
|
||||
</D.DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenuPortal>
|
||||
</D.Root>
|
||||
);
|
||||
});
|
||||
import type { CSSProperties, HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
|
||||
import { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useKeyPressEvent } from 'react-use';
|
||||
import { Portal } from '../Portal';
|
||||
import { Separator } from './Separator';
|
||||
import { VStack } from './Stacks';
|
||||
|
||||
export type DropdownItem =
|
||||
| {
|
||||
label: string;
|
||||
onSelect?: () => void;
|
||||
disabled?: boolean;
|
||||
hidden?: boolean;
|
||||
leftSlot?: ReactNode;
|
||||
rightSlot?: ReactNode;
|
||||
onSelect?: () => void;
|
||||
}
|
||||
| '-----';
|
||||
|
||||
export interface DropdownProps {
|
||||
children: ReactElement<typeof DropdownMenuTrigger>;
|
||||
children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
|
||||
items: DropdownItem[];
|
||||
}
|
||||
|
||||
export const Dropdown = memo(function Dropdown({ children, items }: DropdownProps) {
|
||||
return (
|
||||
<D.Root>
|
||||
{children}
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuContent>
|
||||
{items.map((item, i) => {
|
||||
if (item === '-----') {
|
||||
return <DropdownMenuSeparator key={i} />;
|
||||
} else {
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={i}
|
||||
onSelect={() => item.onSelect?.()}
|
||||
disabled={item.disabled}
|
||||
leftSlot={item.leftSlot}
|
||||
>
|
||||
{item.label}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenuPortal>
|
||||
</D.Root>
|
||||
export function Dropdown({ children, items }: DropdownProps) {
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const ref = useRef<HTMLButtonElement>(null);
|
||||
const child = useMemo(
|
||||
() =>
|
||||
cloneElement(Children.only(children) as never, {
|
||||
ref,
|
||||
'aria-has-popup': 'true',
|
||||
onClick: (e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setOpen((o) => !o);
|
||||
},
|
||||
}),
|
||||
[children],
|
||||
);
|
||||
});
|
||||
|
||||
interface DropdownMenuPortalProps {
|
||||
children: ReactNode;
|
||||
const handleClose = useCallback(() => {
|
||||
setOpen(false);
|
||||
ref.current?.focus();
|
||||
}, [ref.current]);
|
||||
|
||||
useEffect(() => {
|
||||
ref.current?.setAttribute('aria-expanded', open.toString());
|
||||
}, [open]);
|
||||
|
||||
const triggerRect = useMemo(() => {
|
||||
if (!open) return null;
|
||||
return ref.current?.getBoundingClientRect();
|
||||
}, [ref.current, open]);
|
||||
|
||||
return (
|
||||
<div className="pointer-events-auto">
|
||||
{child}
|
||||
{open && triggerRect && (
|
||||
<Menu items={items} triggerRect={triggerRect} onClose={handleClose} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const DropdownMenuPortal = memo(function DropdownMenuPortal({ children }: DropdownMenuPortalProps) {
|
||||
const container = document.querySelector<Element>('#radix-portal');
|
||||
if (container === null) return null;
|
||||
const initial = useMemo(() => ({ opacity: 0 }), []);
|
||||
const animate = useMemo(() => ({ opacity: 1 }), []);
|
||||
return (
|
||||
<D.Portal>
|
||||
<motion.div initial={initial} animate={animate}>
|
||||
{children}
|
||||
</motion.div>
|
||||
</D.Portal>
|
||||
);
|
||||
});
|
||||
interface MenuProps {
|
||||
className?: string;
|
||||
items: DropdownProps['items'];
|
||||
triggerRect: DOMRect;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const _DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProps>(
|
||||
function DropdownMenuContent(
|
||||
{ className, children, ...props }: D.DropdownMenuContentProps,
|
||||
ref: ForwardedRef<HTMLDivElement>,
|
||||
) {
|
||||
const [styles, setStyles] = useState<{ maxHeight: number }>();
|
||||
const [divRef, setDivRef] = useState<HTMLDivElement | null>(null);
|
||||
useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => divRef);
|
||||
function Menu({ className, items, onClose, triggerRect }: MenuProps) {
|
||||
if (triggerRect === undefined) return null;
|
||||
|
||||
const initDivRef = useCallback((ref: HTMLDivElement | null) => {
|
||||
setDivRef(ref);
|
||||
}, []);
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const [menuStyles, setMenuStyles] = useState<CSSProperties>({});
|
||||
|
||||
// Calculate the max height so we can scroll
|
||||
useLayoutEffect(() => {
|
||||
if (divRef === null) return;
|
||||
// Needs to be in a setTimeout because the ref is not positioned yet
|
||||
// TODO: Make this better?
|
||||
const t = setTimeout(() => {
|
||||
const windowBox = document.documentElement.getBoundingClientRect();
|
||||
const menuBox = divRef.getBoundingClientRect();
|
||||
const styles = { maxHeight: windowBox.height - menuBox.top - 5 };
|
||||
setStyles(styles);
|
||||
});
|
||||
return () => clearTimeout(t);
|
||||
}, [divRef]);
|
||||
// Calculate the max height so we can scroll
|
||||
const initMenu = useCallback((el: HTMLDivElement | null) => {
|
||||
if (el === null) return {};
|
||||
const windowBox = document.documentElement.getBoundingClientRect();
|
||||
const menuBox = el.getBoundingClientRect();
|
||||
setMenuStyles({ maxHeight: windowBox.height - menuBox.top - 5 });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<D.Content
|
||||
ref={initDivRef}
|
||||
align="start"
|
||||
style={styles}
|
||||
className={classnames(
|
||||
className,
|
||||
'bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 p-1.5 border border-gray-200',
|
||||
'overflow-auto m-1',
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</D.Content>
|
||||
);
|
||||
},
|
||||
);
|
||||
const DropdownMenuContent = memo(_DropdownMenuContent);
|
||||
|
||||
type DropdownMenuItemProps = D.DropdownMenuItemProps & ItemInnerProps;
|
||||
|
||||
const DropdownMenuItem = memo(function DropdownMenuItem({
|
||||
leftSlot,
|
||||
rightSlot,
|
||||
className,
|
||||
children,
|
||||
disabled,
|
||||
...props
|
||||
}: DropdownMenuItemProps) {
|
||||
return (
|
||||
<D.Item
|
||||
asChild
|
||||
disabled={disabled}
|
||||
className={classnames(className, disabled && 'opacity-disabled')}
|
||||
{...props}
|
||||
>
|
||||
<ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
|
||||
{children}
|
||||
</ItemInner>
|
||||
</D.Item>
|
||||
);
|
||||
});
|
||||
|
||||
// type DropdownMenuCheckboxItemProps = DropdownMenu.DropdownMenuCheckboxItemProps & ItemInnerProps;
|
||||
//
|
||||
// function DropdownMenuCheckboxItem({
|
||||
// leftSlot,
|
||||
// rightSlot,
|
||||
// children,
|
||||
// ...props
|
||||
// }: DropdownMenuCheckboxItemProps) {
|
||||
// return (
|
||||
// <DropdownMenu.CheckboxItem asChild {...props}>
|
||||
// <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
|
||||
// {children}
|
||||
// </ItemInner>
|
||||
// </DropdownMenu.CheckboxItem>
|
||||
// );
|
||||
// }
|
||||
|
||||
// type DropdownMenuSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps & ItemInnerProps;
|
||||
//
|
||||
// function DropdownMenuSubTrigger({
|
||||
// leftSlot,
|
||||
// rightSlot,
|
||||
// children,
|
||||
// ...props
|
||||
// }: DropdownMenuSubTriggerProps) {
|
||||
// return (
|
||||
// <DropdownMenu.SubTrigger asChild {...props}>
|
||||
// <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
|
||||
// {children}
|
||||
// </ItemInner>
|
||||
// </DropdownMenu.SubTrigger>
|
||||
// );
|
||||
// }
|
||||
|
||||
type DropdownMenuRadioItemProps = Omit<D.DropdownMenuRadioItemProps & ItemInnerProps, 'leftSlot'>;
|
||||
|
||||
const DropdownMenuRadioItem = memo(function DropdownMenuRadioItem({
|
||||
rightSlot,
|
||||
children,
|
||||
...props
|
||||
}: DropdownMenuRadioItemProps) {
|
||||
return (
|
||||
<D.RadioItem asChild {...props}>
|
||||
<ItemInner
|
||||
rightSlot={rightSlot}
|
||||
leftSlot={
|
||||
<D.ItemIndicator>
|
||||
<CheckIcon />
|
||||
</D.ItemIndicator>
|
||||
useKeyPressEvent('ArrowUp', () => {
|
||||
setSelectedIndex((currIndex) => {
|
||||
let nextIndex = (currIndex ?? 0) - 1;
|
||||
const maxTries = items.length;
|
||||
for (let i = 0; i < maxTries; i++) {
|
||||
if (items[nextIndex] === '-----') {
|
||||
nextIndex--;
|
||||
} else if (nextIndex < 0) {
|
||||
nextIndex = items.length - 1;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return nextIndex;
|
||||
});
|
||||
});
|
||||
|
||||
useKeyPressEvent('ArrowDown', () => {
|
||||
setSelectedIndex((currIndex) => {
|
||||
let nextIndex = (currIndex ?? -1) + 1;
|
||||
const maxTries = items.length;
|
||||
for (let i = 0; i < maxTries; i++) {
|
||||
if (items[nextIndex] === '-----') {
|
||||
nextIndex++;
|
||||
} else if (nextIndex >= items.length) {
|
||||
nextIndex = 0;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return nextIndex;
|
||||
});
|
||||
});
|
||||
|
||||
const containerStyles: CSSProperties = useMemo(() => {
|
||||
const docWidth = document.documentElement.getBoundingClientRect().width;
|
||||
const spaceRemaining = docWidth - triggerRect.left;
|
||||
if (spaceRemaining < 200) {
|
||||
return {
|
||||
top: triggerRect?.bottom,
|
||||
right: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
top: triggerRect?.bottom,
|
||||
left: triggerRect?.left,
|
||||
};
|
||||
}, [triggerRect]);
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(i: DropdownItem) => {
|
||||
onClose();
|
||||
setSelectedIndex(null);
|
||||
if (i !== '-----') {
|
||||
i.onSelect?.();
|
||||
}
|
||||
},
|
||||
[onClose],
|
||||
);
|
||||
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
|
||||
|
||||
return (
|
||||
<Portal name="dropdown">
|
||||
<button aria-hidden title="close" className="fixed inset-0" onClick={onClose} />
|
||||
<div
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
dir="ltr"
|
||||
ref={containerRef}
|
||||
style={containerStyles}
|
||||
className={classnames(className, 'pointer-events-auto fixed z-50')}
|
||||
>
|
||||
{children}
|
||||
</ItemInner>
|
||||
</D.RadioItem>
|
||||
{containerStyles && (
|
||||
<VStack
|
||||
ref={initMenu}
|
||||
style={menuStyles}
|
||||
tabIndex={-1}
|
||||
className={classnames(
|
||||
className,
|
||||
'h-auto bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 py-1.5 border',
|
||||
'border-gray-200 overflow-auto m-1',
|
||||
)}
|
||||
>
|
||||
{items.map((item, i) => {
|
||||
if (item === '-----') return <Separator key={i} className="my-1.5" />;
|
||||
if (item.hidden) return null;
|
||||
return (
|
||||
<MenuItem
|
||||
focused={i === selectedIndex}
|
||||
onSelect={handleSelect}
|
||||
key={i + item.label}
|
||||
item={item}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</VStack>
|
||||
)}
|
||||
</div>
|
||||
</Portal>
|
||||
);
|
||||
});
|
||||
|
||||
// const DropdownMenuSubContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenuSubContentProps>(
|
||||
// function DropdownMenuSubContent(
|
||||
// { className, ...props }: DropdownMenu.DropdownMenuSubContentProps,
|
||||
// ref,
|
||||
// ) {
|
||||
// return (
|
||||
// <DropdownMenu.SubContent
|
||||
// ref={ref}
|
||||
// alignOffset={0}
|
||||
// sideOffset={4}
|
||||
// className={classnames(className, dropdownMenuClasses)}
|
||||
// {...props}
|
||||
// />
|
||||
// );
|
||||
// },
|
||||
// );
|
||||
|
||||
const DropdownMenuLabel = memo(function DropdownMenuLabel({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: D.DropdownMenuLabelProps) {
|
||||
return (
|
||||
<D.Label asChild {...props}>
|
||||
<ItemInner noHover className={classnames(className, 'opacity-50 uppercase text-sm')}>
|
||||
{children}
|
||||
</ItemInner>
|
||||
</D.Label>
|
||||
);
|
||||
});
|
||||
|
||||
const DropdownMenuSeparator = memo(function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: D.DropdownMenuSeparatorProps) {
|
||||
return (
|
||||
<D.Separator
|
||||
className={classnames(className, 'h-[1px] bg-gray-400 bg-opacity-30 my-1')}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
type DropdownMenuTriggerProps = D.DropdownMenuTriggerProps & {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const DropdownMenuTrigger = memo(function DropdownMenuTrigger({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: DropdownMenuTriggerProps) {
|
||||
return (
|
||||
<D.Trigger asChild className={classnames(className)} {...props}>
|
||||
{children}
|
||||
</D.Trigger>
|
||||
);
|
||||
});
|
||||
|
||||
interface ItemInnerProps {
|
||||
leftSlot?: ReactNode;
|
||||
rightSlot?: ReactNode;
|
||||
children: ReactNode;
|
||||
noHover?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const _ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
|
||||
{ leftSlot, rightSlot, children, className, noHover, ...props }: ItemInnerProps,
|
||||
ref,
|
||||
) {
|
||||
interface MenuItemProps {
|
||||
className?: string;
|
||||
item: DropdownItem;
|
||||
onSelect: (item: DropdownItem) => void;
|
||||
focused: boolean;
|
||||
}
|
||||
|
||||
function MenuItem({ className, focused, item, onSelect, ...props }: MenuItemProps) {
|
||||
const handleClick = useCallback(() => onSelect?.(item), [item, onSelect]);
|
||||
|
||||
const initRef = useCallback(
|
||||
(el: HTMLButtonElement | null) => {
|
||||
if (el === null) return;
|
||||
if (focused) {
|
||||
setTimeout(() => el.focus(), 0);
|
||||
}
|
||||
},
|
||||
[focused],
|
||||
);
|
||||
|
||||
if (item === '-----') return <Separator className="my-1.5" />;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
<button
|
||||
ref={initRef}
|
||||
onMouseEnter={(e) => e.currentTarget.focus()}
|
||||
onMouseLeave={(e) => e.currentTarget.blur()}
|
||||
onClick={handleClick}
|
||||
className={classnames(
|
||||
className,
|
||||
'min-w-[8rem] outline-none px-2 h-7 flex items-center text-sm text-gray-700 whitespace-nowrap pr-4',
|
||||
!noHover && 'focus:bg-highlight focus:text-gray-900 rounded',
|
||||
'min-w-[8rem] outline-none px-2 mx-1.5 h-7 flex items-center text-sm text-gray-700 whitespace-nowrap pr-4',
|
||||
'focus:bg-highlight focus:text-gray-900 rounded',
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{leftSlot && <div className="w-6">{leftSlot}</div>}
|
||||
<div>{children}</div>
|
||||
{rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
|
||||
</div>
|
||||
{item.leftSlot && <div className="w-6">{item.leftSlot}</div>}
|
||||
<div>{item.label}</div>
|
||||
{item.rightSlot && <div className="ml-auto pl-3">{item.rightSlot}</div>}
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
const ItemInner = memo(_ItemInner);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user