@lobehub/ui/es/Mermaid/FullFeatured.mjs

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

'use client';

import FlexBasic_default from "../Flex/FlexBasic.mjs";
import Text_default from "../Text/Text.mjs";
import { stopPropagation } from "../utils/dom.mjs";
import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
import CopyButton_default from "../CopyButton/CopyButton.mjs";
import MaterialFileTypeIcon_default from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
import { bodyVariants, headerVariants, variants } from "../Highlighter/style.mjs";
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import { ChevronDown, ChevronRight } from "lucide-react";

//#region src/Mermaid/FullFeatured.tsx
const MermaidHeaderLanguage = memo(({ fileName, language, showLanguage }) => {
	if (!showLanguage) return null;
	return /* @__PURE__ */ jsxs(FlexBasic_default, {
		align: "center",
		className: "languageTitle",
		flex: 1,
		gap: 4,
		horizontal: true,
		justify: "flex-start",
		paddingInline: 8,
		children: [/* @__PURE__ */ jsx(MaterialFileTypeIcon_default, {
			fallbackUnknownType: false,
			filename: fileName || language,
			size: 18,
			type: "file",
			variant: "raw"
		}), /* @__PURE__ */ jsx(Text_default, {
			ellipsis: true,
			fontSize: 13,
			children: fileName || "Mermaid"
		})]
	});
}, (prev, next) => prev.fileName === next.fileName && prev.language === next.language && prev.showLanguage === next.showLanguage);
const MermaidFullFeatured = memo(({ showLanguage, styles: customStyles, classNames, content, children, className, copyable, actionsRender, style, variant, shadow, language = "mermaid", fileName, defaultExpand = true, ...rest }) => {
	const [expand, setExpand] = useState(defaultExpand);
	const contentRef = useRef(content);
	useEffect(() => {
		contentRef.current = content;
	}, [content]);
	const getContent = useCallback(() => contentRef.current, []);
	const originalActions = useMemo(() => {
		if (!copyable) return null;
		return /* @__PURE__ */ jsx(CopyButton_default, {
			content: getContent,
			size: "small"
		});
	}, [copyable, getContent]);
	const actions = useMemo(() => {
		if (!actionsRender) return originalActions;
		return actionsRender({
			actionIconSize: "small",
			content,
			getContent,
			originalNode: originalActions
		});
	}, [
		actionsRender,
		content,
		getContent,
		originalActions
	]);
	const handleToggleExpand = useCallback(() => {
		setExpand((prev) => !prev);
	}, []);
	return /* @__PURE__ */ jsxs(FlexBasic_default, {
		className: cx(variants({
			shadow,
			variant
		}), className),
		"data-code-type": "mermaid",
		style,
		...rest,
		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
			align: "center",
			className: cx(headerVariants({ variant }), classNames?.header),
			horizontal: true,
			justify: "space-between",
			onClick: handleToggleExpand,
			style: customStyles?.header,
			children: [/* @__PURE__ */ jsx(MermaidHeaderLanguage, {
				fileName,
				language,
				showLanguage
			}), /* @__PURE__ */ jsxs(FlexBasic_default, {
				align: "center",
				flex: "none",
				gap: 4,
				horizontal: true,
				onClick: stopPropagation,
				children: [/* @__PURE__ */ jsx(FlexBasic_default, {
					align: "center",
					className: "panel-actions",
					flex: "none",
					gap: 4,
					horizontal: true,
					children: actions
				}), /* @__PURE__ */ jsx(ActionIcon_default, {
					icon: expand ? ChevronDown : ChevronRight,
					onClick: handleToggleExpand,
					size: "small"
				})]
			})]
		}), /* @__PURE__ */ jsx(FlexBasic_default, {
			className: cx(bodyVariants({ expand }), classNames?.body),
			style: customStyles?.body,
			children
		})]
	});
});
var FullFeatured_default = MermaidFullFeatured;

//#endregion
export { FullFeatured_default as default };
//# sourceMappingURL=FullFeatured.mjs.map