@nutui/nutui-react/dist/esm/Grid.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as __rest } from "./tslib.es6.js";
import React__default from "react";
import classNames from "classnames";
import { a as GridContext, G as GridItem } from "./griditem2.js";
import { p as pxCheck } from "./px-check.js";
const defaultProps = {
  columns: 4,
  gap: 0,
  center: true,
  square: false,
  reverse: false,
  direction: "vertical"
};
const Grid = (props) => {
  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, columns, gap, center, square, reverse, direction, style, className, onClick } = _a, rest = __rest(_a, ["children", "columns", "gap", "center", "square", "reverse", "direction", "style", "className", "onClick"]);
  const childrenDom = React__default.Children.toArray(children);
  const classPrefix = "nut-grid";
  const rootClass = () => {
    return classNames(classPrefix, {
      [`${classPrefix}-border`]: !gap
    }, className);
  };
  const rootStyle = () => {
    let styleSelf = {};
    if (style) {
      styleSelf = style;
    }
    if (gap) {
      styleSelf.paddingLeft = pxCheck(gap);
    }
    return styleSelf;
  };
  return React__default.createElement(
    "div",
    Object.assign({ className: rootClass(), style: rootStyle() }, rest),
    React__default.createElement(GridContext.Provider, { value: { onClick } }, childrenDom.map((item, idex) => {
      return React__default.cloneElement(item, {
        index: idex,
        columns,
        center,
        gap,
        square,
        reverse,
        direction
      });
    }))
  );
};
Grid.displayName = "NutGrid";
Grid.Item = GridItem;
export {
  Grid as default
};