Can export data from UI
This commit is contained in:
		@@ -0,0 +1,67 @@
 | 
			
		||||
import {
 | 
			
		||||
  Button,
 | 
			
		||||
  CircularProgress,
 | 
			
		||||
  Dialog,
 | 
			
		||||
  DialogActions,
 | 
			
		||||
  DialogContent,
 | 
			
		||||
  DialogContentText,
 | 
			
		||||
  DialogTitle,
 | 
			
		||||
} from "@mui/material";
 | 
			
		||||
import React, { PropsWithChildren } from "react";
 | 
			
		||||
 | 
			
		||||
type LoadingMessageContext = {
 | 
			
		||||
  show: (message: string) => void;
 | 
			
		||||
  hide: () => void;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const LoadingMessageContextK =
 | 
			
		||||
  React.createContext<LoadingMessageContext | null>(null);
 | 
			
		||||
 | 
			
		||||
export function LoadingMessageProvider(
 | 
			
		||||
  p: PropsWithChildren
 | 
			
		||||
): React.ReactElement {
 | 
			
		||||
  const [open, setOpen] = React.useState(false);
 | 
			
		||||
 | 
			
		||||
  const [message, setMessage] = React.useState("");
 | 
			
		||||
 | 
			
		||||
  const hook: LoadingMessageContext = {
 | 
			
		||||
    show(message) {
 | 
			
		||||
      setMessage(message);
 | 
			
		||||
      setOpen(true);
 | 
			
		||||
    },
 | 
			
		||||
    hide() {
 | 
			
		||||
      setMessage("");
 | 
			
		||||
      setOpen(false);
 | 
			
		||||
    },
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <>
 | 
			
		||||
      <LoadingMessageContextK.Provider value={hook}>
 | 
			
		||||
        {p.children}
 | 
			
		||||
      </LoadingMessageContextK.Provider>
 | 
			
		||||
 | 
			
		||||
      <Dialog open={open}>
 | 
			
		||||
        <DialogContent>
 | 
			
		||||
          <DialogContentText>
 | 
			
		||||
            <div
 | 
			
		||||
              style={{
 | 
			
		||||
                display: "flex",
 | 
			
		||||
                alignItems: "center",
 | 
			
		||||
                justifyContent: "center",
 | 
			
		||||
              }}
 | 
			
		||||
            >
 | 
			
		||||
              <CircularProgress style={{ marginRight: "15px" }} />
 | 
			
		||||
 | 
			
		||||
              {message}
 | 
			
		||||
            </div>
 | 
			
		||||
          </DialogContentText>
 | 
			
		||||
        </DialogContent>
 | 
			
		||||
      </Dialog>
 | 
			
		||||
    </>
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function useLoadingMessage(): LoadingMessageContext {
 | 
			
		||||
  return React.useContext(LoadingMessageContextK)!;
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user