93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from "react";
|
|
import { usePlatformLanguage } from "../i18n/LanguageContext";
|
|
import type { PlatformInterfaceIdentityProps } from "../types";
|
|
|
|
export type ActionToolbarDensity = "compact" | "default";
|
|
export type ActionToolbarSurface = "plain" | "subtle" | "panel-header" | "section-header";
|
|
export type ActionToolbarWrap = "responsive" | "always" | "never";
|
|
export type ActionToolbarJustify = "start" | "between" | "end";
|
|
|
|
export type ActionToolbarProps = PlatformInterfaceIdentityProps & Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
children: ReactNode;
|
|
label?: string;
|
|
density?: ActionToolbarDensity;
|
|
justify?: ActionToolbarJustify;
|
|
surface?: ActionToolbarSurface;
|
|
wrap?: ActionToolbarWrap;
|
|
};
|
|
|
|
export default function ActionToolbar({
|
|
children,
|
|
label,
|
|
density = "default",
|
|
justify = "start",
|
|
surface = "plain",
|
|
wrap = "responsive",
|
|
className = "",
|
|
role,
|
|
"aria-label": ariaLabel,
|
|
interfaceId,
|
|
helpContextId,
|
|
helpModuleId,
|
|
helpTopicId,
|
|
...props
|
|
}: ActionToolbarProps) {
|
|
const { translateText } = usePlatformLanguage();
|
|
const translatedLabel = label || ariaLabel ? translateText(label ?? ariaLabel ?? "") : undefined;
|
|
|
|
return (
|
|
<div
|
|
{...props}
|
|
className={[
|
|
"action-toolbar",
|
|
`action-toolbar-density-${density}`,
|
|
`action-toolbar-justify-${justify}`,
|
|
`action-toolbar-surface-${surface}`,
|
|
`action-toolbar-wrap-${wrap}`,
|
|
className
|
|
].filter(Boolean).join(" ")}
|
|
role={role ?? (translatedLabel ? "toolbar" : undefined)}
|
|
aria-label={translatedLabel}
|
|
data-help-scope="toolbar"
|
|
data-interface-id={interfaceId}
|
|
data-help-context-id={helpContextId}
|
|
data-help-module-id={helpModuleId}
|
|
data-help-topic-id={helpTopicId}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type ToolbarGroupProps = HTMLAttributes<HTMLDivElement> & {
|
|
children: ReactNode;
|
|
align?: "start" | "center" | "end";
|
|
grow?: boolean;
|
|
};
|
|
|
|
export function ToolbarGroup({
|
|
children,
|
|
align = "start",
|
|
grow = false,
|
|
className = "",
|
|
...props
|
|
}: ToolbarGroupProps) {
|
|
return (
|
|
<div
|
|
{...props}
|
|
className={[
|
|
"action-toolbar-group",
|
|
`action-toolbar-group-${align}`,
|
|
grow ? "action-toolbar-group-grow" : "",
|
|
className
|
|
].filter(Boolean).join(" ")}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ToolbarSpacer({ className = "", ...props }: HTMLAttributes<HTMLSpanElement>) {
|
|
return <span {...props} className={["action-toolbar-spacer", className].filter(Boolean).join(" ")} aria-hidden="true" />;
|
|
}
|