|  |  |  | 
|---|
|  |  |  | 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; | 
|---|