@lobehub/ui/es/Toc/TocMobile.mjs

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

'use client';

import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
import { styles } from "./style.mjs";
import { mapItems } from "./utils.mjs";
import { memo, useMemo } from "react";
import { jsx } from "react/jsx-runtime";
import { Anchor, Collapse, ConfigProvider } from "antd";
import useMergeState from "use-merge-value";
import { PanelTopClose, PanelTopOpen } from "lucide-react";

//#region src/Toc/TocMobile.tsx
const TocMobile = memo(({ items, activeKey, onChange, getContainer, headerHeight = 64, tocWidth = 176 }) => {
	const [activeLink, setActiveLink] = useMergeState("", {
		onChange,
		value: activeKey
	});
	const activeAnchor = items.find((item) => item.id === activeLink);
	const tocItems = useMemo(() => mapItems(items), [items]);
	return /* @__PURE__ */ jsx(ConfigProvider, {
		theme: { token: {
			fontSize: 12,
			sizeStep: 3
		} },
		children: /* @__PURE__ */ jsx("section", {
			className: styles.mobileCtn,
			children: /* @__PURE__ */ jsx(Collapse, {
				className: styles.expand,
				expandIcon: ({ isActive }) => /* @__PURE__ */ jsx(ActionIcon_default, {
					icon: isActive ? PanelTopClose : PanelTopOpen,
					size: "small"
				}),
				expandIconPlacement: "end",
				ghost: true,
				children: /* @__PURE__ */ jsx(Collapse.Panel, {
					forceRender: true,
					header: activeAnchor ? activeAnchor.title : "TOC",
					children: /* @__PURE__ */ jsx(ConfigProvider, {
						theme: { token: {
							fontSize: 14,
							sizeStep: 4
						} },
						children: /* @__PURE__ */ jsx(Anchor, {
							getContainer,
							items: tocItems,
							onChange: (currentLink) => {
								setActiveLink(currentLink.replace("#", ""));
							},
							targetOffset: headerHeight + 48
						})
					})
				}, "toc")
			})
		})
	});
});
TocMobile.displayName = "TocMobile";
var TocMobile_default = TocMobile;

//#endregion
export { TocMobile_default as default };
//# sourceMappingURL=TocMobile.mjs.map