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

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

import { _ as __rest } from "./tslib.es6.js";
import React__default, { useContext } from "react";
import classNames from "classnames";
import { p as pxCheck } from "./px-check.js";
const gridContext = {
  onClick: (item, index) => {
  }
};
const GridContext = React__default.createContext(gridContext);
const defaultProps = {
  text: "",
  columns: 4,
  gap: 0,
  center: true,
  square: false,
  reverse: false,
  direction: "vertical"
};
const GridItem = (props) => {
  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, style, columns, index, gap, square, text, center, reverse, direction, className, onClick } = _a, rest = __rest(_a, ["children", "style", "columns", "index", "gap", "square", "text", "center", "reverse", "direction", "className", "onClick"]);
  const classPrefix = "nut-grid-item";
  const classes = classNames(classPrefix, className);
  const context = useContext(GridContext);
  const rootStyle = () => {
    const styles = Object.assign({ flexBasis: `${100 / +columns}%` }, style);
    if (square) {
      styles.paddingTop = `${100 / +columns}%`;
    } else if (gap) {
      styles.paddingRight = pxCheck(gap);
      if (index >= Number(columns)) {
        styles.marginTop = pxCheck(gap);
      }
    }
    return styles;
  };
  const contentClass = () => {
    return classNames(`${classPrefix}-content`, {
      [`${classPrefix}-content-border`]: true,
      [`${classPrefix}-content-surround`]: gap,
      [`${classPrefix}-content-center`]: center,
      [`${classPrefix}-content-square`]: square,
      [`${classPrefix}-content-reverse`]: reverse,
      [`${classPrefix}-content-${direction}`]: !!direction
    });
  };
  const handleClick = (e) => {
    onClick && onClick(e);
    context.onClick && context.onClick({
      text,
      index,
      columns,
      gap,
      center,
      square,
      reverse,
      direction
    }, index);
  };
  return React__default.createElement(
    "div",
    Object.assign({ className: classes, style: rootStyle() }, rest, { onClick: handleClick }),
    React__default.createElement(
      "div",
      { className: contentClass() },
      children && React__default.createElement(React__default.Fragment, null, children),
      text && React__default.createElement("div", { className: `${classPrefix}-text` }, text)
    )
  );
};
GridItem.displayName = "NutGridItem";
export {
  GridItem as G,
  GridContext as a
};