159 lines
5.4 KiB
TypeScript
159 lines
5.4 KiB
TypeScript
import React, {
|
|
ComponentProps,
|
|
DetailedHTMLProps,
|
|
HTMLAttributes,
|
|
ReactNode,
|
|
} from "react";
|
|
import { twMerge } from "tailwind-merge";
|
|
import Link from "../layout/Link";
|
|
import { twuiAddActiveLinksFn } from "./HeaderNav";
|
|
import Row from "../layout/Row";
|
|
import Divider from "../layout/Divider";
|
|
import Button from "../layout/Button";
|
|
|
|
export type TWUI_LINK_LIST_LINK_OBJECT = {
|
|
title?: string;
|
|
url?: string;
|
|
strict?: boolean;
|
|
icon?: ReactNode;
|
|
iconPosition?: "before" | "after";
|
|
linkProps?: ComponentProps<typeof Link>;
|
|
buttonProps?: Omit<ComponentProps<typeof Button>, "title">;
|
|
linkType?: "button" | "link";
|
|
divider?: ReactNode;
|
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
};
|
|
|
|
export type TWUI_LINK_LIST_PROPS = DetailedHTMLProps<
|
|
HTMLAttributes<HTMLDivElement>,
|
|
HTMLDivElement
|
|
> & {
|
|
links: (
|
|
| TWUI_LINK_LIST_LINK_OBJECT
|
|
| TWUI_LINK_LIST_LINK_OBJECT[]
|
|
| undefined
|
|
)[];
|
|
linkProps?: ComponentProps<typeof Link>;
|
|
buttonProps?: Omit<ComponentProps<typeof Button>, "title">;
|
|
divider?: boolean;
|
|
dividerComponent?: ReactNode;
|
|
linkType?: "button" | "link";
|
|
};
|
|
|
|
/**
|
|
* # Link List Component
|
|
* @description A component that renders a list of links.
|
|
* @className_wrapper twui-link-list
|
|
*/
|
|
export default function LinkList({
|
|
links,
|
|
linkProps,
|
|
buttonProps,
|
|
divider,
|
|
dividerComponent,
|
|
linkType,
|
|
...props
|
|
}: TWUI_LINK_LIST_PROPS) {
|
|
const listRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
React.useEffect(() => {
|
|
twuiAddActiveLinksFn({
|
|
wrapperEl: listRef.current || undefined,
|
|
selector: "a",
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
ref={listRef}
|
|
{...props}
|
|
className={twMerge(
|
|
"flex flex-row items-center gap-1",
|
|
"twui-link-list",
|
|
props.className
|
|
)}
|
|
>
|
|
{links
|
|
.flat()
|
|
.filter((ln) => Boolean(ln))
|
|
.map((link, index) => {
|
|
if (!link) return null;
|
|
|
|
if (link.divider)
|
|
return (
|
|
<React.Fragment key={index}>
|
|
{link.divider}
|
|
</React.Fragment>
|
|
);
|
|
|
|
const finalDivider =
|
|
index < links.length - 1 &&
|
|
(dividerComponent ? (
|
|
dividerComponent
|
|
) : divider ? (
|
|
<Divider />
|
|
) : undefined);
|
|
|
|
if (linkType == "button" || link.linkType == "button") {
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<Button
|
|
title={link.title || "Link Button"}
|
|
variant="ghost"
|
|
{...buttonProps}
|
|
{...link.buttonProps}
|
|
className={twMerge(
|
|
"p-2 cursor-pointer whitespace-nowrap",
|
|
linkProps?.className
|
|
)}
|
|
onClick={(e) => {
|
|
link.onClick?.(e);
|
|
link.buttonProps?.onClick?.(e);
|
|
}}
|
|
>
|
|
<Row>
|
|
{link.icon}
|
|
{link.title}
|
|
</Row>
|
|
</Button>
|
|
{finalDivider}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<Link
|
|
href={link.url}
|
|
title={link.title}
|
|
{...linkProps}
|
|
{...link.linkProps}
|
|
className={twMerge(
|
|
"p-2 cursor-pointer whitespace-nowrap",
|
|
linkProps?.className
|
|
)}
|
|
strict={link.strict}
|
|
onClick={(e) => {
|
|
link.onClick?.(e);
|
|
link.linkProps?.onClick?.(e);
|
|
}}
|
|
>
|
|
<Row>
|
|
{!link.iconPosition ||
|
|
link.iconPosition == "before"
|
|
? link.icon
|
|
: null}
|
|
{link.title}
|
|
{link.iconPosition == "after"
|
|
? link.icon
|
|
: null}
|
|
</Row>
|
|
</Link>
|
|
{finalDivider}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|