65 lines
2 KiB
TypeScript
65 lines
2 KiB
TypeScript
|
import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
|
||
|
|
import Info from '@mui/icons-material/Info';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
||
|
|
import IconButton from '@mui/material/IconButton';
|
||
|
|
import Tooltip from '@mui/material/Tooltip';
|
||
|
|
import React, { FC, useCallback, useState } from 'react';
|
||
|
|
|
||
|
|
const OverviewCell: FC<ActivityLogEntry> = ({ Overview, ShortOverview }) => {
|
||
|
|
const displayValue = ShortOverview ?? Overview;
|
||
|
|
const [ open, setOpen ] = useState(false);
|
||
|
|
|
||
|
|
const onTooltipClose = useCallback(() => {
|
||
|
|
setOpen(false);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const onTooltipOpen = useCallback(() => {
|
||
|
|
setOpen(true);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
if (!displayValue) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: 'flex',
|
||
|
|
width: '100%',
|
||
|
|
alignItems: 'center'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
flexGrow: 1,
|
||
|
|
overflow: 'hidden',
|
||
|
|
textOverflow: 'ellipsis'
|
||
|
|
}}
|
||
|
|
component='div'
|
||
|
|
title={displayValue}
|
||
|
|
>
|
||
|
|
{displayValue}
|
||
|
|
</Box>
|
||
|
|
{ShortOverview && Overview && (
|
||
|
|
<ClickAwayListener onClickAway={onTooltipClose}>
|
||
|
|
<Tooltip
|
||
|
|
title={Overview}
|
||
|
|
placement='top'
|
||
|
|
arrow
|
||
|
|
onClose={onTooltipClose}
|
||
|
|
open={open}
|
||
|
|
disableFocusListener
|
||
|
|
disableHoverListener
|
||
|
|
disableTouchListener
|
||
|
|
>
|
||
|
|
<IconButton onClick={onTooltipOpen}>
|
||
|
|
<Info />
|
||
|
|
</IconButton>
|
||
|
|
</Tooltip>
|
||
|
|
</ClickAwayListener>
|
||
|
|
)}
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default OverviewCell;
|