|  |  | 
 |  |  | 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'; | 
 |  |  | 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 translate = useTranslate(); | 
 |  |  |   const isSmall = useMediaQuery((theme) => theme.breakpoints.down("md")); | 
 |  |  |  | 
 |  |  |     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> | 
 |  |  |   ); | 
 |  |  | }; | 
 |  |  |  | 
 |  |  |     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 label = "ra.action.create"; | 
 |  |  | const PREFIX = "RaCreateButton"; | 
 |  |  | const defaultIcon = <ContentAdd />; | 
 |  |  |  | 
 |  |  | export const CreateButtonClasses = { | 
 |  |  |     root: `${PREFIX}-root`, | 
 |  |  |     floating: `${PREFIX}-floating`, | 
 |  |  |   root: `${PREFIX}-root`, | 
 |  |  |   floating: `${PREFIX}-floating`, | 
 |  |  | }; | 
 |  |  |  | 
 |  |  | const StyledFab = styled(Fab, { | 
 |  |  |     name: PREFIX, | 
 |  |  |     overridesResolver: (_props, styles) => styles.root, | 
 |  |  |   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, | 
 |  |  |     }, | 
 |  |  |   [`&.${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, | 
 |  |  |   name: PREFIX, | 
 |  |  |   overridesResolver: (_props, styles) => styles.root, | 
 |  |  | })({}); | 
 |  |  |  | 
 |  |  | export default MyCreateButton; | 
 |  |  | export default MyCreateButton; |