import React, { useState, useRef, useEffect, useMemo } from "react";
|
import { Button, useTranslate } from "react-admin";
|
import { Fab, useMediaQuery } from "@mui/material";
|
import ContentAdd from "@mui/icons-material/Add";
|
import { styled } from "@mui/material/styles";
|
import { Link } from "react-router-dom";
|
|
const MyCreateButton = (props) => {
|
const translate = useTranslate();
|
const isSmall = useMediaQuery((theme) => theme.breakpoints.down("md"));
|
|
return isSmall ? (
|
<StyledFab
|
color="primary"
|
className={CreateButtonClasses.floating}
|
aria-label={label && translate(label)}
|
onClick={props.onClick}
|
{...props}
|
>
|
{defaultIcon}
|
</StyledFab>
|
) : (
|
<StyledButton
|
className={CreateButtonClasses.floating}
|
label={label}
|
onClick={props.onClick}
|
{...props}
|
>
|
{defaultIcon}
|
</StyledButton>
|
);
|
};
|
|
const label = "ra.action.create";
|
const PREFIX = "RaCreateButton";
|
const defaultIcon = <ContentAdd />;
|
|
export const CreateButtonClasses = {
|
root: `${PREFIX}-root`,
|
floating: `${PREFIX}-floating`,
|
};
|
|
const StyledFab = styled(Fab, {
|
name: PREFIX,
|
overridesResolver: (_props, styles) => styles.root,
|
})(({ theme }) => ({
|
[`&.${CreateButtonClasses.floating}`]: {
|
color: theme.palette.getContrastText(theme.palette.primary.main),
|
margin: 0,
|
top: "auto",
|
right: 20,
|
bottom: 60,
|
left: "auto",
|
position: "fixed",
|
zIndex: 1000,
|
},
|
}));
|
|
const StyledButton = styled(Button, {
|
name: PREFIX,
|
overridesResolver: (_props, styles) => styles.root,
|
})({});
|
|
export default MyCreateButton;
|
