2023-01-24 02:04:04 +01:00
|
|
|
import * as React from "react";
|
|
|
|
import { Lock, Public } from "@mui/icons-material";
|
|
|
|
import Box from "@mui/material/Box";
|
|
|
|
|
|
|
|
export const PermissionReadWrite = React.forwardRef((props, ref) => <PermissionInternal icon={Public} ref={ref} {...props} />);
|
|
|
|
|
|
|
|
export const PermissionDenyAll = React.forwardRef((props, ref) => <PermissionInternal icon={Lock} ref={ref} {...props} />);
|
|
|
|
|
2023-02-01 03:39:30 +01:00
|
|
|
export const PermissionRead = React.forwardRef((props, ref) => <PermissionInternal icon={Public} text="R" ref={ref} {...props} />);
|
2023-01-24 02:04:04 +01:00
|
|
|
|
2023-02-01 03:39:30 +01:00
|
|
|
export const PermissionWrite = React.forwardRef((props, ref) => <PermissionInternal icon={Public} text="W" ref={ref} {...props} />);
|
2023-01-24 02:04:04 +01:00
|
|
|
|
2023-02-01 03:39:30 +01:00
|
|
|
const PermissionInternal = React.forwardRef((props, ref) => {
|
2023-01-24 02:04:04 +01:00
|
|
|
const size = props.size ?? "medium";
|
2023-02-01 03:39:30 +01:00
|
|
|
const Icon = props.icon;
|
2023-01-24 02:04:04 +01:00
|
|
|
return (
|
2023-02-01 03:39:30 +01:00
|
|
|
<Box
|
|
|
|
ref={ref}
|
|
|
|
{...props}
|
|
|
|
style={{
|
|
|
|
position: "relative",
|
|
|
|
display: "inline-flex",
|
|
|
|
verticalAlign: "middle",
|
|
|
|
height: "24px",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Icon fontSize={size} sx={{ color: "gray" }} />
|
|
|
|
{props.text && (
|
|
|
|
<Box
|
|
|
|
sx={{
|
|
|
|
position: "absolute",
|
|
|
|
right: "-6px",
|
|
|
|
bottom: "5px",
|
|
|
|
fontSize: 10,
|
|
|
|
fontWeight: 600,
|
|
|
|
color: "gray",
|
|
|
|
width: "8px",
|
|
|
|
height: "8px",
|
|
|
|
marginTop: "3px",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{props.text}
|
|
|
|
</Box>
|
2023-05-23 21:13:01 +02:00
|
|
|
)}
|
|
|
|
</Box>
|
2023-01-24 02:04:04 +01:00
|
|
|
);
|
|
|
|
});
|