@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
89 lines (88 loc) • 4.12 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import React, { useContext } from "react";
import classNames from "classnames";
import GridContext from "../grid/context";
import { pxCheck } from "../../utils/px-check";
var defaultProps = {
text: '',
columns: 4,
gap: 9,
center: true,
square: true,
reverse: false,
direction: 'vertical'
};
export var GridItem = function(props) {
var _ref = _object_spread({}, defaultProps, props), children = _ref.children, style = _ref.style, columns = _ref.columns, index = _ref.index, gap = _ref.gap, square = _ref.square, text = _ref.text, center = _ref.center, reverse = _ref.reverse, direction = _ref.direction, className = _ref.className, onClick = _ref.onClick, rest = _object_without_properties(_ref, [
"children",
"style",
"columns",
"index",
"gap",
"square",
"text",
"center",
"reverse",
"direction",
"className",
"onClick"
]);
var classPrefix = 'nut-grid-item';
var classes = classNames(classPrefix, className);
var context = useContext(GridContext);
var rootStyle = function() {
var width = "calc((100% - ".concat(Number(gap) * (Number(columns) - 1), "px) / ").concat(Number(columns), ")");
var styles = _object_spread({
flexBasis: width
}, style);
if (square) {
styles.paddingTop = width;
}
if (gap) {
if ((index + 1) % Number(columns)) {
styles.marginRight = pxCheck(gap);
}
if (index >= Number(columns)) {
styles.marginTop = pxCheck(gap);
}
} else {
styles.borderRadius = 0;
}
return styles;
};
var contentClass = function() {
var _obj;
return classNames("".concat(classPrefix, "-content"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-content-border"), true), _define_property(_obj, "".concat(classPrefix, "-content-surround"), gap), _define_property(_obj, "".concat(classPrefix, "-content-center"), center), _define_property(_obj, "".concat(classPrefix, "-content-square"), square), _define_property(_obj, "".concat(classPrefix, "-content-reverse"), reverse && direction !== 'horizontal'), _define_property(_obj, "".concat(classPrefix, "-content-").concat(direction), !!direction), _define_property(_obj, "".concat(classPrefix, "-content-horizontal-reverse"), reverse && direction === 'horizontal'), _obj));
};
var textClass = function() {
var _obj;
return classNames("".concat(classPrefix, "-text"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-text-reverse"), reverse && direction !== 'horizontal'), _define_property(_obj, "".concat(classPrefix, "-text-horizontal"), direction === 'horizontal'), _define_property(_obj, "".concat(classPrefix, "-text-horizontal-reverse"), reverse && direction === 'horizontal'), _obj));
};
var handleClick = function(e) {
onClick && onClick(e);
context.onClick && context.onClick({
text: text,
index: index,
columns: columns,
gap: gap,
center: center,
square: square,
reverse: reverse,
direction: direction
}, index);
};
return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({
className: classes,
style: rootStyle()
}, rest), {
onClick: handleClick
}), /*#__PURE__*/ React.createElement("div", {
className: contentClass()
}, children && /*#__PURE__*/ React.createElement(React.Fragment, null, children), text && /*#__PURE__*/ React.createElement("div", {
className: textClass()
}, text)));
};
GridItem.displayName = 'NutGridItem';