@etsoo/materialui
Version:
TypeScript Material-UI Implementation
108 lines (107 loc) • 4.5 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListMoreDisplay = ListMoreDisplay;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const react_2 = require("@etsoo/react");
const LoadingButton_1 = require("./LoadingButton");
const ReactApp_1 = require("./app/ReactApp");
const Card_1 = __importDefault(require("@mui/material/Card"));
const CardHeader_1 = __importDefault(require("@mui/material/CardHeader"));
const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
const CardActions_1 = __importDefault(require("@mui/material/CardActions"));
/**
* ListMoreDisplay
* @param props Props
* @returns Component
*/
function ListMoreDisplay(props) {
// Global app
const app = (0, ReactApp_1.useAppContext)();
// Destruct
const { batchSize = 6, children, defaultOrderBy, headerRenderer, autoLoad = headerRenderer == null, headerTitle, loadBatchSize, loadData, moreLabel = app?.get("more1"), fieldTemplate, threshold, ...rest } = props;
// Refs
const refs = react_1.default.useRef({
queryPaging: {
currentPage: 0,
orderBy: defaultOrderBy,
batchSize
},
autoLoad,
hasNextPage: true,
isNextPageLoading: false,
loadedItems: 0,
selectedItems: [],
idCache: {}
});
const ref = refs.current;
// States
const [states, setStates] = react_1.default.useReducer((currentStates, newStates) => {
return { ...currentStates, ...newStates };
}, { completed: false });
// Load data
const loadDataLocal = async (reset = false) => {
// Prevent multiple loadings
if (!ref.hasNextPage || ref.isNextPageLoading)
return;
// Update state
ref.isNextPageLoading = true;
// Parameters
const { queryPaging, data } = ref;
const loadProps = {
queryPaging,
data
};
const mergedData = (0, react_2.GridDataGet)(loadProps, fieldTemplate);
const items = await loadData(mergedData);
if (items == null || ref.isMounted === false) {
return;
}
ref.isMounted = true;
const newItems = items.length;
const hasNextPage = newItems >= batchSize;
ref.lastLoadedItems = newItems;
ref.isNextPageLoading = false;
ref.hasNextPage = hasNextPage;
// Next page
var currentPage = ref.queryPaging.currentPage ?? 0;
ref.queryPaging.currentPage = currentPage + 1;
// Update rows
if (states.items == null || reset) {
setStates({ items, completed: !hasNextPage });
}
else {
setStates({
items: [...states.items, ...items],
completed: !hasNextPage
});
}
};
const reset = (data) => {
// Update the form data
ref.data = data;
// Reset page number
ref.isNextPageLoading = false;
ref.queryPaging.currentPage = 0;
ref.hasNextPage = true;
// Load data
loadDataLocal(true);
};
react_1.default.useEffect(() => {
if (autoLoad)
loadDataLocal();
}, [autoLoad]);
react_1.default.useEffect(() => {
return () => {
ref.isMounted = false;
};
}, []);
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [headerRenderer && headerRenderer(reset), (0, jsx_runtime_1.jsxs)(Card_1.default, { ...rest, children: [(0, jsx_runtime_1.jsx)(CardHeader_1.default, { title: headerTitle }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { sx: {
paddingTop: 0,
paddingBottom: states.completed ? 0 : "inherit"
}, children: states.items == null ? ((0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 20 })) : (states.items.map((item, index) => children(item, index))) }), !states.completed && ((0, jsx_runtime_1.jsx)(CardActions_1.default, { sx: { justifyContent: "flex-end" }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { onClick: async () => await loadDataLocal(), children: moreLabel }) }))] })] }));
}