@seasketch/geoprocessing/dist/src/components/ResultsCard.js

Geoprocessing and reporting framework for SeaSketch 2.0

import React from "react";
import { useTranslation } from "react-i18next";
import Card from "./Card.js";
import { useFunction } from "../hooks/useFunction.js";
import { styled } from "styled-components";
import Skeleton from "./Skeleton.js";
import { ProgressBar, ProgressBarWrapper } from "./ProgressBar.js";
import { ReportError } from "./ReportError.js";
import { ErrorStatus } from "./ErrorStatus.js";
const DefaultSkeleton = () => (React.createElement("div", null,
    React.createElement(Skeleton, null),
    React.createElement(Skeleton, null),
    React.createElement(Skeleton, null),
    React.createElement(Skeleton, { style: { width: "25%" } })));
export const EstimateLabel = styled.div `
  height: 20px;
  margin-top: 5px;
  padding-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
  width: 100%;
  text-align: center;
  display: none;
`;
export function ResultsCard({ functionName, skeleton, children, title, titleStyle = {}, style = {}, useChildCard = false, extraParams = {}, }) {
    if (!functionName) {
        throw new Error("No function specified for ResultsCard");
    }
    const { t } = useTranslation();
    const resultsCardNoResultMsg = t("ResultsCard - no result message", "Report run completed, but no results returned");
    const cardProps = {
        style,
        title,
        titleStyle,
    };
    const { task, loading, error } = useFunction(functionName, extraParams);
    let theError = error;
    let taskEstimate = 5;
    if (task && task.estimate) {
        taskEstimate = Math.round(task.estimate / 1000);
    }
    if (task && !task.data && !loading) {
        if (task.error) {
            theError = task.error;
        }
        else {
            theError = resultsCardNoResultMsg;
        }
    }
    let contents;
    if (theError) {
        contents = (React.createElement(Card, { ...cardProps },
            React.createElement("div", { role: "alert", "aria-label": "Error alert" },
                React.createElement(ErrorStatus, { msg: React.createElement(React.Fragment, null, theError) }))));
    }
    else if (loading) {
        contents = (React.createElement(Card, { ...cardProps },
            React.createElement("div", { role: "progressbar", "aria-label": "Awaiting results" },
                skeleton || React.createElement(DefaultSkeleton, null),
                React.createElement(ProgressBarWrapper, null,
                    React.createElement(ProgressBar, { "$duration": taskEstimate })))));
    }
    else if (task && task.data) {
        const renderedChildren = children(task.data);
        if (useChildCard) {
            // Assume caller will provide card in children
            contents = React.createElement(React.Fragment, null, renderedChildren);
        }
        else {
            // Default card
            contents = React.createElement(Card, { ...cardProps }, renderedChildren);
        }
    }
    else {
        throw new Error("ResultsCard error"); // trigger ReportError boundary
    }
    return React.createElement(ReportError, null, contents);
}
export default ResultsCard;
//# sourceMappingURL=ResultsCard.js.map