@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
101 lines (100 loc) • 4.87 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "GridItem", {
enumerable: true,
get: function() {
return GridItem;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _context = /*#__PURE__*/ _interop_require_default._(require("../grid/context"));
var _pxcheck = require("../../utils/px-check");
var defaultProps = {
text: '',
columns: 4,
gap: 9,
center: true,
square: true,
reverse: false,
direction: 'vertical'
};
var GridItem = function GridItem(props) {
var _ref = (0, _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 = (0, _object_without_properties._)(_ref, [
"children",
"style",
"columns",
"index",
"gap",
"square",
"text",
"center",
"reverse",
"direction",
"className",
"onClick"
]);
var classPrefix = 'nut-grid-item';
var classes = (0, _classnames.default)(classPrefix, className);
var context = (0, _react.useContext)(_context.default);
var rootStyle = function rootStyle() {
var width = "calc((100% - ".concat(Number(gap) * (Number(columns) - 1), "px) / ").concat(Number(columns), ")");
var styles = (0, _object_spread._)({
flexBasis: width
}, style);
if (square) {
styles.paddingTop = width;
}
if (gap) {
if ((index + 1) % Number(columns)) {
styles.marginRight = (0, _pxcheck.pxCheck)(gap);
}
if (index >= Number(columns)) {
styles.marginTop = (0, _pxcheck.pxCheck)(gap);
}
} else {
styles.borderRadius = 0;
}
return styles;
};
var contentClass = function contentClass() {
var _obj;
return (0, _classnames.default)("".concat(classPrefix, "-content"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-content-border"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-content-surround"), gap), (0, _define_property._)(_obj, "".concat(classPrefix, "-content-center"), center), (0, _define_property._)(_obj, "".concat(classPrefix, "-content-square"), square), (0, _define_property._)(_obj, "".concat(classPrefix, "-content-reverse"), reverse && direction !== 'horizontal'), (0, _define_property._)(_obj, "".concat(classPrefix, "-content-").concat(direction), !!direction), (0, _define_property._)(_obj, "".concat(classPrefix, "-content-horizontal-reverse"), reverse && direction === 'horizontal'), _obj));
};
var textClass = function textClass() {
var _obj;
return (0, _classnames.default)("".concat(classPrefix, "-text"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-text-reverse"), reverse && direction !== 'horizontal'), (0, _define_property._)(_obj, "".concat(classPrefix, "-text-horizontal"), direction === 'horizontal'), (0, _define_property._)(_obj, "".concat(classPrefix, "-text-horizontal-reverse"), reverse && direction === 'horizontal'), _obj));
};
var handleClick = function handleClick(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.default.createElement("div", (0, _object_spread_props._)((0, _object_spread._)({
className: classes,
style: rootStyle()
}, rest), {
onClick: handleClick
}), /*#__PURE__*/ _react.default.createElement("div", {
className: contentClass()
}, children && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, children), text && /*#__PURE__*/ _react.default.createElement("div", {
className: textClass()
}, text)));
};
GridItem.displayName = 'NutGridItem';