const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_index = require("./utils/index.js");
const require_useGridStyle = require("./hooks/useGridStyle.js");
let react = require("react");
react = require_runtime.__toESM(react);
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
require("./PisellBasicGrid.less");
//#region src/components/PisellBasicGrid/PisellBasicGrid.tsx
/**
* PisellBasicGrid 基础布局组件
* @description 基于 Flexbox 的基础布局组件，主要用于控制循环型数据组件的排列方式
* @template T - 数据源项的类型
* @example
* // children 模式
* <PisellBasicGrid columns={4} gap={16} wrap="wrap">
*   {items.map(item => <Card key={item.id}>{item.name}</Card>)}
* </PisellBasicGrid>
*
* @example
* // dataSource 模式
* <PisellBasicGrid
*   columns={4}
*   gap={16}
*   wrap="wrap"
*   dataSource={items}
*   rowKey="id"
*   renderItem={(item) => <Card>{item.name}</Card>}
* />
*/
const PisellBasicGrid = (props) => {
	const { children, className, style, direction = "horizontal", wrap = "nowrap", columns, equalWidth = false, gap, rowGap, columnGap, justify = "start", align = "stretch", alignContent = "stretch", dataSource, renderItem, rowKey, startSlot, endSlot } = props;
	/**
	* 获取布局样式
	*/
	const { containerStyle, itemStyle } = require_useGridStyle.default({
		direction,
		wrap,
		columns,
		equalWidth,
		gap,
		rowGap,
		columnGap,
		justify,
		align,
		alignContent
	});
	/**
	* 合并容器样式
	*/
	const mergedStyle = (0, react.useMemo)(() => {
		return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, containerStyle), style);
	}, [containerStyle, style]);
	/**
	* 渲染内容
	* @description
	* - dataSource 为 undefined 时，渲染 children
	* - dataSource 为空数组时，不渲染任何内容
	* - dataSource 有数据时，使用 renderItem 渲染
	*/
	const renderContent = () => {
		if (dataSource === void 0) {
			if (columns !== void 0 || equalWidth) return react.default.Children.map(children, (child, index) => {
				var _child$key;
				if (!react.default.isValidElement(child)) return child;
				return /* @__PURE__ */ react.default.createElement("div", {
					key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
					className: `${require_index.COMPONENT_PREFIX}-item`,
					style: itemStyle
				}, child);
			});
			return children;
		}
		if (dataSource.length === 0) return null;
		return dataSource.map((item, index) => {
			const key = require_index.getRowKey(item, index, rowKey);
			const content = renderItem === null || renderItem === void 0 ? void 0 : renderItem(item, index);
			return /* @__PURE__ */ react.default.createElement("div", {
				key,
				className: `${require_index.COMPONENT_PREFIX}-item`,
				style: itemStyle
			}, content);
		});
	};
	return /* @__PURE__ */ react.default.createElement("div", {
		className: (0, classnames.default)(require_index.COMPONENT_PREFIX, className),
		style: mergedStyle
	}, startSlot, " ", renderContent(), " ", endSlot);
};
/**
* 使用 memo 优化组件性能
* @description 当 props 没有变化时，避免不必要的重新渲染
*/
const MemoizedPisellBasicGrid = (0, react.memo)(PisellBasicGrid);
//#endregion
exports.default = MemoizedPisellBasicGrid;
