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

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

"use client";
import { styles } from "./style.mjs";
import { Fragment, memo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
//#region src/base-ui/Descriptions/Descriptions.tsx
const Descriptions = memo(({ bordered = false, className, classNames, colon = true, column = 1, extra, items, ref, styles: customStyles, title, ...rest }) => {
	const columnCount = Math.max(1, Math.floor(column));
	let cursor = 0;
	const placements = items.map((item) => {
		const span = Math.min(Math.max(Math.floor(item.span ?? 1), 1), columnCount);
		if (cursor + span > columnCount) cursor = 0;
		const start = cursor;
		cursor = (cursor + span) % columnCount;
		return {
			span,
			start
		};
	});
	return /* @__PURE__ */ jsxs("div", {
		className: cx(styles.root, className),
		ref,
		...rest,
		children: [(title != null || extra != null) && /* @__PURE__ */ jsxs("div", {
			className: styles.header,
			children: [/* @__PURE__ */ jsx("div", {
				className: styles.title,
				children: title
			}), extra != null && /* @__PURE__ */ jsx("div", {
				className: styles.extra,
				children: extra
			})]
		}), /* @__PURE__ */ jsx("dl", {
			className: cx(styles.list, bordered && styles.bordered),
			style: { gridTemplateColumns: `repeat(${columnCount}, auto minmax(0, 1fr))` },
			children: items.map((item, index) => {
				const { span, start } = placements[index];
				const contentStart = String(start * 2 + 2);
				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("dt", {
					className: cx(styles.label, classNames?.label),
					style: {
						gridColumn: String(start * 2 + 1),
						...customStyles?.label
					},
					children: [item.label, colon && item.label != null ? ":" : null]
				}), /* @__PURE__ */ jsx("dd", {
					className: cx(styles.content, classNames?.content),
					style: {
						gridColumn: span > 1 ? `${contentStart} / span ${span * 2 - 1}` : contentStart,
						...customStyles?.content
					},
					children: item.children
				})] }, item.key ?? index);
			})
		})]
	});
});
Descriptions.displayName = "Descriptions";
//#endregion
export { Descriptions as default };

//# sourceMappingURL=Descriptions.mjs.map