@lobehub/ui/es/dashboard/FilterSidebar/FilterSidebar.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import Button from "../../base-ui/Button/Button.mjs";
import Drawer from "../../base-ui/Drawer/Drawer.mjs";
import DraggablePanel from "../../base-ui/DraggablePanel/DraggablePanel.mjs";
import { styles } from "../Surface/style.mjs";
import { useIsCompact, useLocalStorage } from "../hooks.mjs";
import { FilterSplitProvider } from "./context.mjs";
import { styles as styles$1 } from "./style.mjs";
import { clampSidebarWidth, sidebarWidth } from "./width.mjs";
import { useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Filter } from "lucide-react";
//#region src/dashboard/FilterSidebar/FilterSidebar.tsx
function usePageSidebar(wide, storageKey) {
	const fallback = wide ? sidebarWidth.wide : sidebarWidth.narrow;
	const [prefs, setPrefs] = useLocalStorage(storageKey, {
		expand: true,
		width: fallback
	});
	return {
		expand: prefs.expand !== false,
		onExpandChange: (expand) => setPrefs((current) => ({
			...current,
			expand
		})),
		onSizeChange: (size) => {
			const next = typeof size.width === "number" ? size.width : fallback;
			setPrefs((current) => ({
				...current,
				width: clampSidebarWidth(next, fallback)
			}));
		},
		width: clampSidebarWidth(Number(prefs.width), fallback)
	};
}
function FilterSidebar({ body, children, flush, head, header, label, storageKey, summary, wide }) {
	const isCompact = useIsCompact();
	const [drawerOpen, setDrawerOpen] = useState(false);
	const sidebar = usePageSidebar(wide, storageKey);
	const close = () => setDrawerOpen(false);
	if (isCompact) return /* @__PURE__ */ jsx(FilterSplitProvider, {
		active: !flush,
		children: /* @__PURE__ */ jsxs("div", {
			className: styles$1.layout,
			children: [
				header,
				/* @__PURE__ */ jsx(Button, {
					block: true,
					icon: Filter,
					onClick: () => setDrawerOpen(true),
					children: summary
				}),
				/* @__PURE__ */ jsx(Drawer, {
					open: drawerOpen,
					placement: "left",
					title: label,
					width: 300,
					onClose: close,
					children: /* @__PURE__ */ jsxs("div", {
						className: styles$1.drawerPanel,
						children: [head?.(close), body(close)]
					})
				}),
				/* @__PURE__ */ jsx("div", {
					className: styles$1.content,
					children
				})
			]
		})
	});
	return /* @__PURE__ */ jsx(FilterSplitProvider, {
		active: !flush,
		children: /* @__PURE__ */ jsxs("div", {
			className: flush ? styles$1.layout : `${styles$1.layout} ${styles.card}`,
			"data-flush": flush ? true : void 0,
			"data-page-layout": flush ? "flush" : void 0,
			"data-split-card": flush ? void 0 : true,
			children: [/* @__PURE__ */ jsxs(DraggablePanel, {
				expandable: true,
				showHandleWhenCollapsed: true,
				"aria-label": label,
				className: styles$1.sidebar,
				classNames: { content: styles$1.panel },
				collapseThreshold: sidebarWidth.collapse,
				"data-flush": flush ? true : void 0,
				defaultSize: { width: wide ? sidebarWidth.wide : sidebarWidth.narrow },
				expand: sidebar.expand,
				maxWidth: sidebarWidth.max,
				minWidth: sidebarWidth.min,
				mode: "fixed",
				placement: "left",
				showBorder: false,
				size: { width: sidebar.width },
				onExpandChange: sidebar.onExpandChange,
				onSizeChange: (_delta, size) => sidebar.onSizeChange(size),
				children: [head ? /* @__PURE__ */ jsx("div", {
					className: styles$1.head,
					children: head(close)
				}) : null, /* @__PURE__ */ jsx("div", {
					className: styles$1.body,
					"data-flush": flush ? true : void 0,
					children: body(close)
				})]
			}), /* @__PURE__ */ jsxs("div", {
				className: styles$1.content,
				"data-flush": flush ? true : void 0,
				children: [header, children]
			})]
		})
	});
}
FilterSidebar.displayName = "FilterSidebar";
function FilterRow({ count, name }) {
	return /* @__PURE__ */ jsxs("span", {
		className: styles$1.row,
		children: [/* @__PURE__ */ jsx("span", {
			className: styles$1.name,
			children: name
		}), count !== void 0 ? /* @__PURE__ */ jsx("span", {
			className: styles$1.count,
			children: count
		}) : null]
	});
}
FilterRow.displayName = "FilterRow";
function FilterOption({ count, icon, label, name, onClick, selected, title }) {
	return /* @__PURE__ */ jsxs("button", {
		"aria-label": label,
		"aria-pressed": selected,
		className: styles$1.option,
		title,
		type: "button",
		onClick,
		children: [
			icon,
			/* @__PURE__ */ jsx("span", {
				className: styles$1.name,
				children: name
			}),
			count !== void 0 ? /* @__PURE__ */ jsx("span", {
				className: styles$1.count,
				children: count
			}) : null
		]
	});
}
FilterOption.displayName = "FilterOption";
//#endregion
export { FilterOption, FilterRow, FilterSidebar as default };

//# sourceMappingURL=FilterSidebar.mjs.map