@etsoo/materialui
Version:
TypeScript Material-UI Implementation
43 lines (42 loc) • 2.15 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MobileListItemRenderer = MobileListItemRenderer;
const jsx_runtime_1 = require("react/jsx-runtime");
const MoreFab_1 = require("./MoreFab");
const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
const Card_1 = __importDefault(require("@mui/material/Card"));
const CardHeader_1 = __importDefault(require("@mui/material/CardHeader"));
const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
/**
* Default mobile list item renderer
* @param param0 List renderer props
* @param margin Margin
* @param renderer Renderer for card content
* @returns Component
*/
function MobileListItemRenderer({ data, itemHeight, margins }, renderer) {
// Loading
if (data == null)
return (0, jsx_runtime_1.jsx)(LinearProgress_1.default, {});
// Elements
const [title, subheader, actions, children, cardActions] = renderer(data);
return ((0, jsx_runtime_1.jsxs)(Card_1.default, { sx: {
height: itemHeight,
...margins
}, children: [(0, jsx_runtime_1.jsx)(CardHeader_1.default, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? ((0, jsx_runtime_1.jsx)(MoreFab_1.MoreFab, { iconButton: true, size: "small", anchorOrigin: {
vertical: "bottom",
horizontal: "right"
}, transformOrigin: {
vertical: "top",
horizontal: "right"
}, actions: actions })) : (actions), title: title, subheader: subheader, slotProps: {
title: { variant: "body2" },
subheader: { variant: "caption" }
} }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { sx: {
paddingTop: 0,
paddingBottom: cardActions == null ? Reflect.get(margins, "marginBottom") : 0
}, children: children }), cardActions] }));
}