function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { memo, useMemo } from 'react';
import classNames from 'classnames';
import { useGridStyle } from "./hooks";
import { getRowKey, COMPONENT_PREFIX } from "./utils";
import "./PisellBasicGrid.less";

/**
 * 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>}
 * />
 */
var PisellBasicGrid = function PisellBasicGrid(props) {
  var children = props.children,
    className = props.className,
    style = props.style,
    _props$direction = props.direction,
    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
    _props$wrap = props.wrap,
    wrap = _props$wrap === void 0 ? 'nowrap' : _props$wrap,
    columns = props.columns,
    _props$equalWidth = props.equalWidth,
    equalWidth = _props$equalWidth === void 0 ? false : _props$equalWidth,
    gap = props.gap,
    rowGap = props.rowGap,
    columnGap = props.columnGap,
    _props$justify = props.justify,
    justify = _props$justify === void 0 ? 'start' : _props$justify,
    _props$align = props.align,
    align = _props$align === void 0 ? 'stretch' : _props$align,
    _props$alignContent = props.alignContent,
    alignContent = _props$alignContent === void 0 ? 'stretch' : _props$alignContent,
    dataSource = props.dataSource,
    renderItem = props.renderItem,
    rowKey = props.rowKey,
    startSlot = props.startSlot,
    endSlot = props.endSlot;

  /**
   * 获取布局样式
   */
  var _useGridStyle = useGridStyle({
      direction: direction,
      wrap: wrap,
      columns: columns,
      equalWidth: equalWidth,
      gap: gap,
      rowGap: rowGap,
      columnGap: columnGap,
      justify: justify,
      align: align,
      alignContent: alignContent
    }),
    containerStyle = _useGridStyle.containerStyle,
    itemStyle = _useGridStyle.itemStyle;

  /**
   * 合并容器样式
   */
  var mergedStyle = useMemo(function () {
    return _objectSpread(_objectSpread({}, containerStyle), style);
  }, [containerStyle, style]);

  /**
   * 渲染内容
   * @description
   * - dataSource 为 undefined 时，渲染 children
   * - dataSource 为空数组时，不渲染任何内容
   * - dataSource 有数据时，使用 renderItem 渲染
   */
  var renderContent = function renderContent() {
    // dataSource 为 undefined 时，渲染 children
    if (dataSource === undefined) {
      // 如果有 columns 或 equalWidth，需要给 children 包裹一层 div 来应用 itemStyle
      if (columns !== undefined || equalWidth) {
        return React.Children.map(children, function (child, index) {
          var _child$key;
          if (! /*#__PURE__*/React.isValidElement(child)) {
            return child;
          }
          return /*#__PURE__*/React.createElement("div", {
            key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
            className: "".concat(COMPONENT_PREFIX, "-item"),
            style: itemStyle
          }, child);
        });
      }
      return children;
    }

    // dataSource 为空数组时，不渲染任何内容
    if (dataSource.length === 0) {
      return null;
    }

    // dataSource 模式渲染
    return dataSource.map(function (item, index) {
      var key = getRowKey(item, index, rowKey);
      var content = renderItem === null || renderItem === void 0 ? void 0 : renderItem(item, index);
      return /*#__PURE__*/React.createElement("div", {
        key: key,
        className: "".concat(COMPONENT_PREFIX, "-item"),
        style: itemStyle
      }, content);
    });
  };
  return /*#__PURE__*/React.createElement("div", {
    className: classNames(COMPONENT_PREFIX, className),
    style: mergedStyle
  }, startSlot, " ", renderContent(), " ", endSlot);
};

/**
 * 使用 memo 优化组件性能
 * @description 当 props 没有变化时，避免不必要的重新渲染
 */
var MemoizedPisellBasicGrid = /*#__PURE__*/memo(PisellBasicGrid);
export { MemoizedPisellBasicGrid as PisellBasicGrid };
export default MemoizedPisellBasicGrid;