@tarojsx/ui
Version:
We reinvents the UI for Taro3+
36 lines • 2.38 kB
JavaScript
import React from 'react';
import classNames from 'classnames';
import _chunk from 'lodash/chunk';
import { Image, Text, View } from '@tarojs/components';
import '../style/Grid.scss';
export const Grid = (props) => {
const { className, data = [], mode = 'square', columnNum = 3, hasBorder = true, onClick } = props;
if (!Array.isArray(data) || data.length === 0) {
return null;
}
const gridGroup = _chunk(data, columnNum);
return (React.createElement(View, { className: classNames('at-grid', className) }, gridGroup.map((item, i) => (React.createElement(View, { className: "at-grid__flex", key: `at-grid-group-${i}` }, item.map((childItem, index) => {
var _a;
return (React.createElement(View, { key: `at-grid-item-${index}`, className: classNames('at-grid__flex-item', 'at-grid-item', `at-grid-item--${mode}`, {
'at-grid-item--no-border': !hasBorder,
'at-grid-item--last': index === columnNum - 1,
}), onClick: (e) => {
if (!onClick)
return;
e.detail = {
value: childItem,
index,
};
onClick(e);
}, style: { flex: `0 0 ${100 / columnNum}%` } },
React.createElement(View, { className: "at-grid-item__content" },
React.createElement(View, { className: "at-grid-item__content-inner" },
React.createElement(View, { className: "content-inner__icon" },
childItem.image && (React.createElement(Image, { className: "content-inner__img", src: childItem.image, mode: "scaleToFill" })),
childItem.iconInfo && !childItem.image && (React.createElement(Text, { className: classNames(childItem.iconInfo.prefixClass || 'at-icon', {
[`${childItem.iconInfo.prefixClass || 'at-icon'}-${childItem.iconInfo.value}`]: childItem.iconInfo.value,
}, childItem.iconInfo.className), style: Object.assign({ color: childItem.iconInfo.color, fontSize: `${childItem.iconInfo.size || 24}px` }, (((_a = childItem.iconInfo) === null || _a === void 0 ? void 0 : _a.style) || {})) }))),
React.createElement(Text, { className: "content-inner__text" }, childItem.value)))));
}))))));
};
//# sourceMappingURL=Grid.js.map