49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import { FC, MouseEvent, useMemo } from 'react';
|
|
import { FaFlag, FaTimes } from 'react-icons/fa';
|
|
import { Base, Column, ColumnProps, Flex } from '..';
|
|
|
|
interface NitroCardHeaderViewProps extends ColumnProps
|
|
{
|
|
headerText: string;
|
|
isGalleryPhoto?: boolean;
|
|
noCloseButton?: boolean;
|
|
onReportPhoto?: (event: MouseEvent) => void;
|
|
onCloseClick: (event: MouseEvent) => void;
|
|
}
|
|
|
|
export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
|
|
{
|
|
const { headerText = null, isGalleryPhoto = false, noCloseButton = false, onReportPhoto = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
|
|
|
|
const getClassNames = useMemo(() =>
|
|
{
|
|
const newClassNames: string[] = [ 'drag-handler', 'container-fluid', 'nitro-card-header' ];
|
|
|
|
if(classNames.length) newClassNames.push(...classNames);
|
|
|
|
return newClassNames;
|
|
}, [ classNames ]);
|
|
|
|
const onMouseDown = (event: MouseEvent<HTMLDivElement>) =>
|
|
{
|
|
event.stopPropagation();
|
|
event.nativeEvent.stopImmediatePropagation();
|
|
}
|
|
|
|
return (
|
|
<Column center position="relative" classNames={ getClassNames } { ...rest }>
|
|
<Flex fullWidth center>
|
|
<span className="nitro-card-header-text">{ headerText }</span>
|
|
{ isGalleryPhoto &&
|
|
<Base position="absolute" className="end-4 nitro-card-header-report-camera" onClick={ onReportPhoto }>
|
|
<FaFlag className="fa-icon" />
|
|
</Base>
|
|
}
|
|
<Flex center position="absolute" className="end-2 nitro-card-header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
|
|
<FaTimes className="fa-icon w-12 h-12" />
|
|
</Flex>
|
|
</Flex>
|
|
</Column>
|
|
);
|
|
}
|