2021-10-08 11:23:29 +02:00
|
|
|
import { useMediaQuery } from '@material-ui/core';
|
2021-07-07 11:04:36 +02:00
|
|
|
import ConditionallyRender from '../ConditionallyRender';
|
2021-10-08 11:23:29 +02:00
|
|
|
import PermissionButton from '../PermissionButton/PermissionButton';
|
|
|
|
import PermissionIconButton from '../PermissionIconButton/PermissionIconButton';
|
2022-02-25 10:55:39 +01:00
|
|
|
import React from 'react';
|
2021-07-07 11:04:36 +02:00
|
|
|
|
|
|
|
interface IResponsiveButtonProps {
|
|
|
|
Icon: React.ElementType;
|
|
|
|
onClick: () => void;
|
2021-10-01 12:15:02 +02:00
|
|
|
disabled?: boolean;
|
2022-03-01 13:22:47 +01:00
|
|
|
permission: string;
|
2021-10-20 12:05:44 +02:00
|
|
|
projectId?: string;
|
2022-01-14 15:50:02 +01:00
|
|
|
environmentId?: string;
|
2021-07-07 11:04:36 +02:00
|
|
|
maxWidth: string;
|
2022-03-01 13:22:47 +01:00
|
|
|
className?: string;
|
2021-07-07 11:04:36 +02:00
|
|
|
}
|
|
|
|
|
2021-07-16 15:41:54 +02:00
|
|
|
const ResponsiveButton: React.FC<IResponsiveButtonProps> = ({
|
2021-07-07 11:04:36 +02:00
|
|
|
Icon,
|
|
|
|
onClick,
|
|
|
|
maxWidth,
|
2021-10-01 12:15:02 +02:00
|
|
|
disabled = false,
|
2021-07-16 15:41:54 +02:00
|
|
|
children,
|
2021-10-08 11:23:29 +02:00
|
|
|
permission,
|
2022-01-14 15:50:02 +01:00
|
|
|
environmentId,
|
2021-10-20 12:05:44 +02:00
|
|
|
projectId,
|
2021-09-30 11:44:30 +02:00
|
|
|
...rest
|
2021-07-16 15:41:54 +02:00
|
|
|
}) => {
|
2021-07-07 11:04:36 +02:00
|
|
|
const smallScreen = useMediaQuery(`(max-width:${maxWidth})`);
|
|
|
|
|
|
|
|
return (
|
2021-10-08 11:23:29 +02:00
|
|
|
<ConditionallyRender
|
|
|
|
condition={smallScreen}
|
|
|
|
show={
|
|
|
|
<PermissionIconButton
|
|
|
|
disabled={disabled}
|
|
|
|
onClick={onClick}
|
|
|
|
permission={permission}
|
2021-10-20 12:05:44 +02:00
|
|
|
projectId={projectId}
|
2022-01-14 15:50:02 +01:00
|
|
|
environmentId={environmentId}
|
2021-10-08 11:23:29 +02:00
|
|
|
data-loading
|
|
|
|
{...rest}
|
|
|
|
>
|
|
|
|
<Icon />
|
|
|
|
</PermissionIconButton>
|
|
|
|
}
|
|
|
|
elseShow={
|
|
|
|
<PermissionButton
|
|
|
|
onClick={onClick}
|
|
|
|
permission={permission}
|
2021-10-20 12:05:44 +02:00
|
|
|
projectId={projectId}
|
2021-10-08 11:23:29 +02:00
|
|
|
color="primary"
|
|
|
|
variant="contained"
|
|
|
|
disabled={disabled}
|
2022-01-14 15:50:02 +01:00
|
|
|
environmentId={environmentId}
|
2021-10-08 11:23:29 +02:00
|
|
|
data-loading
|
|
|
|
{...rest}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</PermissionButton>
|
|
|
|
}
|
|
|
|
/>
|
2021-07-07 11:04:36 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ResponsiveButton;
|