import React, { useState, useRef, useEffect, useMemo } from "react";
|
import { useTranslate } from "react-admin";
|
import {
|
Fab,
|
Box,
|
Backdrop,
|
useTheme,
|
} from '@mui/material';
|
import AltRouteIcon from '@mui/icons-material/AltRoute';
|
import CircularProgress from '@mui/material/CircularProgress';
|
import * as Tool from '../tool';
|
|
const RouteFab = (props) => {
|
const { curZone, showRoutes, setShowRoutes, notify } = props;
|
const translate = useTranslate();
|
const theme = useTheme(); // theme.palette.primary.main
|
|
const [loading, setLoading] = React.useState(false);
|
|
const handleClick = () => {
|
if (showRoutes) {
|
Tool.hideRoutes(curZone, setShowRoutes);
|
} else {
|
Tool.showRoutes(curZone, setShowRoutes, setLoading);
|
}
|
}
|
|
return (
|
<>
|
<Fab
|
variant="extended"
|
color={showRoutes ? 'primary' : 'default'}
|
size="small"
|
disabled={loading}
|
onClick={handleClick}
|
>
|
<AltRouteIcon />
|
{translate('page.map.action.route')}
|
{loading && (
|
<>
|
<svg width={0} height={0}>
|
<defs>
|
<linearGradient id="my_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
<stop offset="0%" stopColor="#e01cd5" />
|
<stop offset="100%" stopColor="#1CB5E0" />
|
</linearGradient>
|
</defs>
|
</svg>
|
<CircularProgress size={18} thickness={8} sx={{ 'svg circle': { stroke: 'url(#my_gradient)' } }} />
|
</>
|
)}
|
</Fab>
|
{/* global */}
|
{/* <Backdrop
|
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
open={loading}
|
>
|
<CircularProgress color="inherit" />
|
</Backdrop> */}
|
</>
|
)
|
}
|
|
export default RouteFab;
|