134 lines
3.3 KiB
TypeScript
134 lines
3.3 KiB
TypeScript
import { styled } from '@mui/material/styles';
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import DragHandleIcon from '@mui/icons-material/DragHandle';
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import React from 'react';
|
|
|
|
import { transientOptions } from '../../lib/util';
|
|
import { buttons, colors, lengths, transitions } from './styles';
|
|
|
|
import type { ComponentClass, MouseEvent, ReactNode } from 'react';
|
|
|
|
interface TopBarProps {
|
|
$isVariableTypesList: boolean;
|
|
$collapsed: boolean;
|
|
}
|
|
|
|
const TopBar = styled(
|
|
'div',
|
|
transientOptions,
|
|
)<TopBarProps>(
|
|
({ $isVariableTypesList, $collapsed }) => `
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 44px;
|
|
padding: 2px 8px;
|
|
border-radius: ${
|
|
!$isVariableTypesList
|
|
? $collapsed
|
|
? lengths.borderRadius
|
|
: `${lengths.borderRadius} ${lengths.borderRadius} 0 0`
|
|
: $collapsed
|
|
? `0 ${lengths.borderRadius} ${lengths.borderRadius} ${lengths.borderRadius}`
|
|
: `0 ${lengths.borderRadius} 0 0`
|
|
};
|
|
position: relative;
|
|
`,
|
|
);
|
|
|
|
const TopBarButton = styled('button')`
|
|
${buttons.button};
|
|
color: ${colors.controlLabel};
|
|
background: transparent;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
padding: 0;
|
|
width: 32px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
`;
|
|
|
|
const StyledTitle = styled('div')`
|
|
position: absolute;
|
|
top: 0;
|
|
left: 48px;
|
|
line-height: 40px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 1;
|
|
`;
|
|
|
|
const TopBarButtonSpan = TopBarButton.withComponent('span');
|
|
|
|
const DragIconContainer = styled(TopBarButtonSpan)`
|
|
width: 100%;
|
|
cursor: move;
|
|
`;
|
|
|
|
export interface DragHandleProps {
|
|
dragHandleHOC: (render: () => ReactNode) => ComponentClass;
|
|
}
|
|
|
|
const DragHandle = ({ dragHandleHOC }: DragHandleProps) => {
|
|
const Handle = dragHandleHOC(() => (
|
|
<DragIconContainer>
|
|
<DragHandleIcon />
|
|
</DragIconContainer>
|
|
));
|
|
return <Handle />;
|
|
};
|
|
|
|
export interface ListItemTopBarProps {
|
|
className?: string;
|
|
title: ReactNode;
|
|
collapsed?: boolean;
|
|
onCollapseToggle?: (event: MouseEvent) => void;
|
|
onRemove: (event: MouseEvent) => void;
|
|
dragHandleHOC: (render: () => ReactNode) => ComponentClass;
|
|
isVariableTypesList?: boolean;
|
|
}
|
|
|
|
const ListItemTopBar = ({
|
|
className,
|
|
title,
|
|
collapsed = false,
|
|
onCollapseToggle,
|
|
onRemove,
|
|
dragHandleHOC,
|
|
isVariableTypesList = false,
|
|
}: ListItemTopBarProps) => {
|
|
return (
|
|
<TopBar className={className} $collapsed={collapsed} $isVariableTypesList={isVariableTypesList}>
|
|
{onCollapseToggle ? (
|
|
<IconButton onClick={onCollapseToggle} data-testid="expand-button">
|
|
<ExpandMoreIcon
|
|
sx={{
|
|
transform: `rotateZ(${collapsed ? '-90deg' : '0deg'})`,
|
|
transition: `transform ${transitions.main};`,
|
|
}}
|
|
/>
|
|
</IconButton>
|
|
) : null}
|
|
<StyledTitle key="title" onClick={onCollapseToggle}>
|
|
{title}
|
|
</StyledTitle>
|
|
{dragHandleHOC ? <DragHandle dragHandleHOC={dragHandleHOC} /> : null}
|
|
{onRemove ? (
|
|
<TopBarButton onClick={onRemove}>
|
|
<CloseIcon />
|
|
</TopBarButton>
|
|
) : null}
|
|
</TopBar>
|
|
);
|
|
};
|
|
|
|
export default ListItemTopBar;
|