327 lines
9.7 KiB
TypeScript
327 lines
9.7 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Accordion — https://app.subframe.com/f023064a5ca0/library?component=Accordion_d2e81e20-863a-4027-826a-991d8910efd9
|
|
* Avatar — https://app.subframe.com/f023064a5ca0/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2
|
|
* Dropdown Menu — https://app.subframe.com/f023064a5ca0/library?component=Dropdown+Menu_99951515-459b-4286-919e-a89e7549b43b
|
|
*/
|
|
|
|
import React from "react";
|
|
import { FeatherCheck } from "@subframe/core";
|
|
import { FeatherLayers } from "@subframe/core";
|
|
import * as SubframeCore from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
import { Accordion } from "../Accordion";
|
|
import { Avatar } from "../Avatar";
|
|
|
|
export interface DropdownDividerProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownDivider = React.forwardRef<HTMLDivElement, DropdownDividerProps>(
|
|
function DropdownDivider(
|
|
{ className, ...otherProps }: DropdownDividerProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full items-start gap-2 px-1 py-1",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-border-default" />
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
export interface DropdownItemProps
|
|
extends React.ComponentProps<typeof SubframeCore.DropdownMenu.Item> {
|
|
children?: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
iconRight?: React.ReactNode;
|
|
image?: string;
|
|
selected?: boolean;
|
|
showCheckbox?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownItem = React.forwardRef<HTMLDivElement, DropdownItemProps>(
|
|
function DropdownItem(
|
|
{
|
|
children,
|
|
icon = null,
|
|
iconRight = null,
|
|
image,
|
|
selected = false,
|
|
showCheckbox = false,
|
|
className,
|
|
...otherProps
|
|
}: DropdownItemProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<SubframeCore.DropdownMenu.Item asChild={true} {...otherProps}>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/adcae8d6 flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 group/dropdown-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
|
|
{
|
|
"bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
|
|
selected,
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden h-4 w-4 flex-none flex-col items-center justify-center rounded-sm border-2 border-solid border-border-strong bg-surface-neutral-secondary",
|
|
{
|
|
flex: showCheckbox,
|
|
"border-2 border-solid border-brand-brand-border-solid-default bg-brand-brand-surface-solid-default":
|
|
selected,
|
|
}
|
|
)}
|
|
>
|
|
<FeatherCheck
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden text-body-extra-small-semibold-150 font-body-extra-small-semibold-150 text-icon-neutral-on-solid",
|
|
{ "inline-flex": selected }
|
|
)}
|
|
/>
|
|
</div>
|
|
{image ? (
|
|
<img
|
|
className="h-6 w-6 flex-none rounded-round object-cover"
|
|
src={image}
|
|
/>
|
|
) : null}
|
|
{icon ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
|
|
{ "text-icon-neutral-primary": selected }
|
|
)}
|
|
>
|
|
{icon}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
{children ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary",
|
|
{ "text-text-neutral-primary": selected }
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
) : null}
|
|
{iconRight ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
|
|
{ "text-icon-neutral-primary": selected }
|
|
)}
|
|
>
|
|
{iconRight}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
</div>
|
|
</SubframeCore.DropdownMenu.Item>
|
|
);
|
|
}
|
|
);
|
|
|
|
export interface DropdownUserItemProps
|
|
extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
title?: React.ReactNode;
|
|
subtitle?: React.ReactNode;
|
|
image?: string;
|
|
selected?: boolean;
|
|
showCheckbox?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownUserItem = React.forwardRef<
|
|
HTMLDivElement,
|
|
DropdownUserItemProps
|
|
>(function DropdownUserItem(
|
|
{
|
|
title,
|
|
subtitle,
|
|
image,
|
|
selected = false,
|
|
showCheckbox = false,
|
|
className,
|
|
...otherProps
|
|
}: DropdownUserItemProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/0d3c57ad flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 group/user-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
|
|
{
|
|
"bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
|
|
selected,
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden h-4 w-4 flex-none flex-col items-center justify-center rounded-sm border-2 border-solid border-border-strong bg-surface-neutral-secondary",
|
|
{
|
|
flex: showCheckbox,
|
|
"border-2 border-solid border-brand-brand-border-solid-default bg-brand-brand-surface-solid-default":
|
|
selected,
|
|
}
|
|
)}
|
|
>
|
|
<FeatherCheck
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden text-body-extra-small-semibold-150 font-body-extra-small-semibold-150 text-icon-neutral-on-solid",
|
|
{ "inline-flex": selected }
|
|
)}
|
|
/>
|
|
</div>
|
|
<Avatar size="small" image={image}>
|
|
OR
|
|
</Avatar>
|
|
<div className="flex grow shrink-0 basis-0 flex-col items-start">
|
|
{title ? (
|
|
<span className="line-clamp-1 w-full text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
|
|
{title}
|
|
</span>
|
|
) : null}
|
|
{subtitle ? (
|
|
<span className="line-clamp-1 w-full text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary">
|
|
{subtitle}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export interface DropdownCustomItemProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownCustomItem = React.forwardRef<
|
|
HTMLDivElement,
|
|
DropdownCustomItemProps
|
|
>(function DropdownCustomItem(
|
|
{ children, className, ...otherProps }: DropdownCustomItemProps,
|
|
ref
|
|
) {
|
|
return children ? (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full flex-col items-start gap-2 rounded-md px-3 py-2",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
{children}
|
|
</div>
|
|
) : null;
|
|
});
|
|
|
|
export interface DropdownNestedItemProps
|
|
extends React.ComponentProps<typeof Accordion> {
|
|
children?: React.ReactNode;
|
|
label?: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownNestedItem = React.forwardRef<
|
|
React.ElementRef<typeof Accordion>,
|
|
DropdownNestedItemProps
|
|
>(function DropdownNestedItem(
|
|
{
|
|
children,
|
|
label,
|
|
icon = <FeatherLayers />,
|
|
className,
|
|
...otherProps
|
|
}: DropdownNestedItemProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<Accordion
|
|
className={SubframeUtils.twClassNames(
|
|
"group/ca3b20a3 cursor-pointer group/nested-item",
|
|
className
|
|
)}
|
|
variant="ghost"
|
|
trigger={
|
|
<div className="flex h-8 w-full flex-none items-center gap-2 rounded-md px-3 group-hover/ca3b20a3:bg-surface-neutral-tertiary">
|
|
{icon ? (
|
|
<SubframeCore.IconWrapper className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-primary">
|
|
{icon}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
{label ? (
|
|
<span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
|
|
{label}
|
|
</span>
|
|
) : null}
|
|
<Accordion.Chevron />
|
|
</div>
|
|
}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
{children ? (
|
|
<div className="flex w-full flex-col items-start gap-1">{children}</div>
|
|
) : null}
|
|
</Accordion>
|
|
);
|
|
});
|
|
|
|
export interface DropdownMenuRootProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownMenuRoot = React.forwardRef<
|
|
HTMLDivElement,
|
|
DropdownMenuRootProps
|
|
>(function DropdownMenuRoot(
|
|
{ children, className, ...otherProps }: DropdownMenuRootProps,
|
|
ref
|
|
) {
|
|
return children ? (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex min-w-[192px] flex-col items-start rounded-md border border-solid border-border-default bg-surface-neutral-secondary px-1 py-1 shadow-lg",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
{children}
|
|
</div>
|
|
) : null;
|
|
});
|
|
|
|
export const DropdownMenu = Object.assign(DropdownMenuRoot, {
|
|
DropdownDivider,
|
|
DropdownItem,
|
|
DropdownUserItem,
|
|
DropdownCustomItem,
|
|
DropdownNestedItem,
|
|
});
|