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

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

"use client";
import { styles } from "./style.mjs";
import ListRow from "./ListRow.mjs";
import { memo, useState } from "react";
import { jsx } from "react/jsx-runtime";
import { cx } from "antd-style";
//#region src/base-ui/List/List.tsx
const isDivider = (item) => item.type === "divider";
const variantClass = {
	borderless: void 0,
	filled: styles.filled,
	outlined: styles.outlined
};
const List = memo(({ activeKey, className, classNames, compact = false, defaultActiveKey, items, onActiveChange, onClick, ref, selectable = false, styles: customStyles, variant = "borderless", ...rest }) => {
	const [innerKey, setInnerKey] = useState(defaultActiveKey);
	const currentKey = activeKey === void 0 ? innerKey : activeKey;
	const handleSelect = (item, domEvent) => {
		const info = {
			domEvent,
			item,
			key: item.key
		};
		item.onClick?.(info);
		onClick?.(info);
		if (!selectable || item.key === currentKey) return;
		if (activeKey === void 0) setInnerKey(item.key);
		onActiveChange?.(item.key);
	};
	return /* @__PURE__ */ jsx("ul", {
		className: cx(styles.root, variantClass[variant], compact && styles.compact, className),
		ref,
		role: "list",
		...rest,
		children: items.map((item, index) => isDivider(item) ? /* @__PURE__ */ jsx("li", {
			className: styles.divider,
			role: "separator"
		}, item.key ?? `divider-${index}`) : /* @__PURE__ */ jsx(ListRow, {
			active: currentKey !== void 0 && currentKey !== null && item.key === currentKey,
			classNames,
			item,
			styles: customStyles,
			onSelect: handleSelect
		}, item.key))
	});
});
List.displayName = "List";
//#endregion
export { List as default };

//# sourceMappingURL=List.mjs.map