114 lines
3.1 KiB
TypeScript
114 lines
3.1 KiB
TypeScript
import type { BoxProps } from '@mui/material/Box';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import MenuList from '@mui/material/MenuList';
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
import { usePopover } from 'minimal-shared/hooks';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { CustomPopover } from 'src/components/custom-popover';
|
|
import { Iconify } from 'src/components/iconify';
|
|
import { RouterLink } from 'src/routes/components';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
type Props = BoxProps & {
|
|
backHref: string;
|
|
editHref: string;
|
|
liveHref: string;
|
|
publish: string;
|
|
onChangePublish: (newValue: string) => void;
|
|
publishOptions: { value: string; label: string }[];
|
|
};
|
|
|
|
export function ProductDetailsToolbar({
|
|
sx,
|
|
publish,
|
|
backHref,
|
|
editHref,
|
|
liveHref,
|
|
publishOptions,
|
|
onChangePublish,
|
|
...other
|
|
}: Props) {
|
|
const menuActions = usePopover();
|
|
const { t } = useTranslation();
|
|
|
|
const renderMenuActions = () => (
|
|
<CustomPopover
|
|
open={menuActions.open}
|
|
anchorEl={menuActions.anchorEl}
|
|
onClose={menuActions.onClose}
|
|
slotProps={{ arrow: { placement: 'top-right' } }}
|
|
>
|
|
<MenuList>
|
|
{publishOptions.map((option) => (
|
|
<MenuItem
|
|
key={option.value}
|
|
selected={option.value === publish}
|
|
onClick={() => {
|
|
menuActions.onClose();
|
|
onChangePublish(option.value);
|
|
}}
|
|
>
|
|
{option.value === 'published' && <Iconify icon="eva:cloud-upload-fill" />}
|
|
{option.value === 'draft' && <Iconify icon="solar:file-text-bold" />}
|
|
{option.label}
|
|
</MenuItem>
|
|
))}
|
|
</MenuList>
|
|
</CustomPopover>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
sx={[
|
|
{ gap: 1.5, display: 'flex', mb: { xs: 3, md: 5 } },
|
|
...(Array.isArray(sx) ? sx : [sx]),
|
|
]}
|
|
{...other}
|
|
>
|
|
<Button
|
|
component={RouterLink}
|
|
href={backHref}
|
|
startIcon={<Iconify icon="eva:arrow-ios-back-fill" width={16} />}
|
|
>
|
|
{t('back')}
|
|
</Button>
|
|
|
|
<Box sx={{ flexGrow: 1 }} />
|
|
|
|
{publish === 'published' && (
|
|
<Tooltip title="Go Live">
|
|
<IconButton component={RouterLink} href={liveHref}>
|
|
<Iconify icon="eva:external-link-fill" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
)}
|
|
|
|
<Tooltip title="Edit">
|
|
<IconButton component={RouterLink} href={editHref}>
|
|
<Iconify icon="solar:pen-bold" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
|
|
<Button
|
|
color="inherit"
|
|
variant="contained"
|
|
loading={!publish}
|
|
loadingIndicator="Loading…"
|
|
endIcon={<Iconify icon="eva:arrow-ios-downward-fill" />}
|
|
onClick={menuActions.onOpen}
|
|
sx={{ textTransform: 'capitalize' }}
|
|
>
|
|
{publish}
|
|
</Button>
|
|
</Box>
|
|
|
|
{renderMenuActions()}
|
|
</>
|
|
);
|
|
}
|