@etsoo/materialui/lib/mjs/ListMoreDisplay.js

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { GridDataGet } from "@etsoo/react";
import { LoadingButton } from "./LoadingButton";
import { useAppContext } from "./app/ReactApp";
import Card from "@mui/material/Card";
import CardHeader from "@mui/material/CardHeader";
import CardContent from "@mui/material/CardContent";
import CircularProgress from "@mui/material/CircularProgress";
import CardActions from "@mui/material/CardActions";
/**
 * ListMoreDisplay
 * @param props Props
 * @returns Component
 */
export function ListMoreDisplay(props) {
    // Global app
    const app = 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.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.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 = 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.useEffect(() => {
        if (autoLoad)
            loadDataLocal();
    }, [autoLoad]);
    React.useEffect(() => {
        return () => {
            ref.isMounted = false;
        };
    }, []);
    return (_jsxs(React.Fragment, { children: [headerRenderer && headerRenderer(reset), _jsxs(Card, { ...rest, children: [_jsx(CardHeader, { title: headerTitle }), _jsx(CardContent, { sx: {
                            paddingTop: 0,
                            paddingBottom: states.completed ? 0 : "inherit"
                        }, children: states.items == null ? (_jsx(CircularProgress, { size: 20 })) : (states.items.map((item, index) => children(item, index))) }), !states.completed && (_jsx(CardActions, { sx: { justifyContent: "flex-end" }, children: _jsx(LoadingButton, { onClick: async () => await loadDataLocal(), children: moreLabel }) }))] })] }));
}