@lobehub/ui/es/base-ui/DraggablePanel/DraggablePanel.mjs

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

"use client";
import { AXES } from "./core/axes.mjs";
import { DraggablePanelContent, DraggablePanelHandle, DraggablePanelRoot, DraggablePanelToggle } from "./atoms.mjs";
import { memo, useCallback } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
//#region src/base-ui/DraggablePanel/DraggablePanel.tsx
const toNumber = (value) => typeof value === "number" ? Math.max(value, 0) : void 0;
const DraggablePanel = memo(({ backgroundColor, children, className, classNames, collapseThreshold, defaultExpand, defaultSize, expand, expandable = true, maxHeight, maxWidth, minHeight, minWidth, mode = "fixed", onExpandChange, onSizeChange, onSizeDragging, placement = "right", showBorder = true, showHandleWhenCollapsed, showHandleWideArea = true, size, style, styles: customStyles, ...rest }) => {
	const { vertical } = AXES[placement];
	const toSize = useCallback((value) => vertical ? {
		height: value,
		width: "100%"
	} : {
		height: "100%",
		width: value
	}, [vertical]);
	const toDelta = useCallback((value) => vertical ? {
		height: value,
		width: 0
	} : {
		height: 0,
		width: value
	}, [vertical]);
	const handleSizeChange = useCallback((next, delta) => onSizeChange?.(toDelta(delta), toSize(next)), [
		onSizeChange,
		toDelta,
		toSize
	]);
	const handleSizeDragging = useCallback((next, delta) => onSizeDragging?.(toDelta(delta), toSize(next)), [
		onSizeDragging,
		toDelta,
		toSize
	]);
	return /* @__PURE__ */ jsxs(DraggablePanelRoot, {
		backgroundColor,
		className,
		collapseThreshold,
		defaultExpand,
		defaultSize: toNumber(vertical ? defaultSize?.height : defaultSize?.width),
		expand,
		expandable,
		max: toNumber(vertical ? maxHeight : maxWidth),
		min: toNumber(vertical ? minHeight : minWidth) ?? 0,
		mode,
		placement,
		showBorder,
		size: toNumber(vertical ? size?.height : size?.width),
		onExpandChange,
		onSizeChange: handleSizeChange,
		onSizeDragging: handleSizeDragging,
		...rest,
		children: [
			/* @__PURE__ */ jsx(DraggablePanelToggle, { showHandleWhenCollapsed }),
			/* @__PURE__ */ jsx(DraggablePanelContent, {
				className: cx(classNames?.content),
				style: {
					...customStyles?.content,
					...style
				},
				children
			}),
			/* @__PURE__ */ jsx(DraggablePanelHandle, { wideArea: showHandleWideArea })
		]
	});
});
DraggablePanel.displayName = "DraggablePanel";
//#endregion
export { DraggablePanel as default };

//# sourceMappingURL=DraggablePanel.mjs.map