36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import { Button, ConfigProvider } from "antd";
|
|
import { RotateCcw } from "lucide-react";
|
|
import { useState, type ReactNode } from "react";
|
|
|
|
/** 内容库的浏览控件，不复用后台表格的筛选外框。 */
|
|
export function CollectionToolbar({ children, trailing, active, onReset, label = "搜索与筛选" }: {
|
|
children: ReactNode;
|
|
trailing?: ReactNode;
|
|
active?: boolean;
|
|
onReset?: () => void;
|
|
label?: string;
|
|
}) {
|
|
const [inputModality, setInputModality] = useState<"keyboard" | "pointer">("keyboard");
|
|
|
|
return <section
|
|
className="collection-toolbar"
|
|
aria-label={label}
|
|
data-input-modality={inputModality}
|
|
onPointerDownCapture={() => setInputModality("pointer")}
|
|
onKeyDownCapture={(event) => {
|
|
if (!event.altKey && !event.ctrlKey && !event.metaKey) setInputModality("keyboard");
|
|
}}
|
|
onBlurCapture={(event) => {
|
|
if (!event.currentTarget.contains(event.relatedTarget)) setInputModality("keyboard");
|
|
}}
|
|
>
|
|
<ConfigProvider select={{ variant: "filled", classNames: { popup: { root: "workspace-quiet-popup" } } }}>
|
|
<div className="collection-toolbar-controls">{children}</div>
|
|
</ConfigProvider>
|
|
<div className="collection-toolbar-actions">
|
|
{active && onReset ? <Button type="text" icon={<RotateCcw />} onClick={onReset}>重置</Button> : null}
|
|
{trailing}
|
|
</div>
|
|
</section>;
|
|
}
|