Migrate conversations to ESLint

This commit is contained in:
Chris Svenningsen 2020-09-14 12:51:27 -07:00 committed by Josh Perez
parent b4f0f3c685
commit 372aa44e49
90 changed files with 1261 additions and 1165 deletions

View file

@ -30,241 +30,162 @@ export interface Props {
onClick?: (attachment: AttachmentType) => void;
}
export class ImageGrid extends React.Component<Props> {
// tslint:disable-next-line max-func-body-length */
public render() {
const {
attachments,
bottomOverlay,
i18n,
isSticker,
stickerSize,
onError,
onClick,
tabIndex,
withContentAbove,
withContentBelow,
} = this.props;
export const ImageGrid = ({
attachments,
bottomOverlay,
i18n,
isSticker,
stickerSize,
onError,
onClick,
tabIndex,
withContentAbove,
withContentBelow,
}: Props): JSX.Element | null => {
const curveTopLeft = !withContentAbove;
const curveTopRight = curveTopLeft;
const curveTopLeft = !Boolean(withContentAbove);
const curveTopRight = curveTopLeft;
const curveBottom = !withContentBelow;
const curveBottomLeft = curveBottom;
const curveBottomRight = curveBottom;
const curveBottom = !Boolean(withContentBelow);
const curveBottomLeft = curveBottom;
const curveBottomRight = curveBottom;
const withBottomOverlay = Boolean(bottomOverlay && curveBottom);
const withBottomOverlay = Boolean(bottomOverlay && curveBottom);
if (!attachments || !attachments.length) {
return null;
}
if (!attachments || !attachments.length) {
return null;
}
if (attachments.length === 1 || !areAllAttachmentsVisual(attachments)) {
const { height, width } = getImageDimensions(
attachments[0],
isSticker ? stickerSize : undefined
);
if (attachments.length === 1 || !areAllAttachmentsVisual(attachments)) {
const { height, width } = getImageDimensions(
attachments[0],
isSticker ? stickerSize : undefined
);
return (
<div
className={classNames(
'module-image-grid',
'module-image-grid--one-image',
isSticker ? 'module-image-grid--with-sticker' : null
)}
>
<Image
alt={getAlt(attachments[0], i18n)}
i18n={i18n}
blurHash={attachments[0].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={isSticker}
noBackground={isSticker}
curveTopLeft={curveTopLeft}
curveTopRight={curveTopRight}
curveBottomLeft={curveBottomLeft}
curveBottomRight={curveBottomRight}
attachment={attachments[0]}
playIconOverlay={isVideoAttachment(attachments[0])}
height={height}
width={width}
url={getUrl(attachments[0])}
tabIndex={tabIndex}
onClick={onClick}
onError={onError}
/>
</div>
);
}
return (
<div
className={classNames(
'module-image-grid',
'module-image-grid--one-image',
isSticker ? 'module-image-grid--with-sticker' : null
)}
>
<Image
alt={getAlt(attachments[0], i18n)}
i18n={i18n}
blurHash={attachments[0].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={isSticker}
noBackground={isSticker}
curveTopLeft={curveTopLeft}
curveTopRight={curveTopRight}
curveBottomLeft={curveBottomLeft}
curveBottomRight={curveBottomRight}
attachment={attachments[0]}
playIconOverlay={isVideoAttachment(attachments[0])}
height={height}
width={width}
url={getUrl(attachments[0])}
tabIndex={tabIndex}
onClick={onClick}
onError={onError}
/>
</div>
);
}
if (attachments.length === 2) {
return (
<div className="module-image-grid">
<Image
alt={getAlt(attachments[0], i18n)}
i18n={i18n}
attachment={attachments[0]}
blurHash={attachments[0].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
curveTopLeft={curveTopLeft}
curveBottomLeft={curveBottomLeft}
playIconOverlay={isVideoAttachment(attachments[0])}
height={149}
width={149}
url={getThumbnailUrl(attachments[0])}
onClick={onClick}
onError={onError}
/>
<Image
alt={getAlt(attachments[1], i18n)}
i18n={i18n}
blurHash={attachments[1].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
curveTopRight={curveTopRight}
curveBottomRight={curveBottomRight}
playIconOverlay={isVideoAttachment(attachments[1])}
height={149}
width={149}
attachment={attachments[1]}
url={getThumbnailUrl(attachments[1])}
onClick={onClick}
onError={onError}
/>
</div>
);
}
if (attachments.length === 2) {
return (
<div className="module-image-grid">
<Image
alt={getAlt(attachments[0], i18n)}
i18n={i18n}
attachment={attachments[0]}
blurHash={attachments[0].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
curveTopLeft={curveTopLeft}
curveBottomLeft={curveBottomLeft}
playIconOverlay={isVideoAttachment(attachments[0])}
height={149}
width={149}
url={getThumbnailUrl(attachments[0])}
onClick={onClick}
onError={onError}
/>
if (attachments.length === 3) {
return (
<div className="module-image-grid">
<Image
alt={getAlt(attachments[0], i18n)}
i18n={i18n}
blurHash={attachments[0].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
curveTopLeft={curveTopLeft}
curveBottomLeft={curveBottomLeft}
attachment={attachments[0]}
playIconOverlay={isVideoAttachment(attachments[0])}
height={200}
width={199}
url={getUrl(attachments[0])}
onClick={onClick}
onError={onError}
/>
<div className="module-image-grid__column">
<Image
alt={getAlt(attachments[1], i18n)}
i18n={i18n}
blurHash={attachments[1].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
curveTopRight={curveTopRight}
curveBottomRight={curveBottomRight}
playIconOverlay={isVideoAttachment(attachments[1])}
height={149}
width={149}
height={99}
width={99}
attachment={attachments[1]}
playIconOverlay={isVideoAttachment(attachments[1])}
url={getThumbnailUrl(attachments[1])}
onClick={onClick}
onError={onError}
/>
</div>
);
}
if (attachments.length === 3) {
return (
<div className="module-image-grid">
<Image
alt={getAlt(attachments[0], i18n)}
alt={getAlt(attachments[2], i18n)}
i18n={i18n}
blurHash={attachments[0].blurHash}
blurHash={attachments[2].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
curveTopLeft={curveTopLeft}
curveBottomLeft={curveBottomLeft}
attachment={attachments[0]}
playIconOverlay={isVideoAttachment(attachments[0])}
height={200}
width={199}
url={getUrl(attachments[0])}
curveBottomRight={curveBottomRight}
height={99}
width={99}
attachment={attachments[2]}
playIconOverlay={isVideoAttachment(attachments[2])}
url={getThumbnailUrl(attachments[2])}
onClick={onClick}
onError={onError}
/>
<div className="module-image-grid__column">
<Image
alt={getAlt(attachments[1], i18n)}
i18n={i18n}
blurHash={attachments[1].blurHash}
curveTopRight={curveTopRight}
height={99}
width={99}
attachment={attachments[1]}
playIconOverlay={isVideoAttachment(attachments[1])}
url={getThumbnailUrl(attachments[1])}
onClick={onClick}
onError={onError}
/>
<Image
alt={getAlt(attachments[2], i18n)}
i18n={i18n}
blurHash={attachments[2].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
curveBottomRight={curveBottomRight}
height={99}
width={99}
attachment={attachments[2]}
playIconOverlay={isVideoAttachment(attachments[2])}
url={getThumbnailUrl(attachments[2])}
onClick={onClick}
onError={onError}
/>
</div>
</div>
);
}
if (attachments.length === 4) {
return (
<div className="module-image-grid">
<div className="module-image-grid__column">
<div className="module-image-grid__row">
<Image
alt={getAlt(attachments[0], i18n)}
i18n={i18n}
blurHash={attachments[0].blurHash}
curveTopLeft={curveTopLeft}
noBorder={false}
attachment={attachments[0]}
playIconOverlay={isVideoAttachment(attachments[0])}
height={149}
width={149}
url={getThumbnailUrl(attachments[0])}
onClick={onClick}
onError={onError}
/>
<Image
alt={getAlt(attachments[1], i18n)}
i18n={i18n}
blurHash={attachments[1].blurHash}
curveTopRight={curveTopRight}
playIconOverlay={isVideoAttachment(attachments[1])}
noBorder={false}
height={149}
width={149}
attachment={attachments[1]}
url={getThumbnailUrl(attachments[1])}
onClick={onClick}
onError={onError}
/>
</div>
<div className="module-image-grid__row">
<Image
alt={getAlt(attachments[2], i18n)}
i18n={i18n}
blurHash={attachments[2].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
curveBottomLeft={curveBottomLeft}
playIconOverlay={isVideoAttachment(attachments[2])}
height={149}
width={149}
attachment={attachments[2]}
url={getThumbnailUrl(attachments[2])}
onClick={onClick}
onError={onError}
/>
<Image
alt={getAlt(attachments[3], i18n)}
i18n={i18n}
blurHash={attachments[3].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
curveBottomRight={curveBottomRight}
playIconOverlay={isVideoAttachment(attachments[3])}
height={149}
width={149}
attachment={attachments[3]}
url={getThumbnailUrl(attachments[3])}
onClick={onClick}
onError={onError}
/>
</div>
</div>
</div>
);
}
const moreMessagesOverlay = attachments.length > 5;
const moreMessagesOverlayText = moreMessagesOverlay
? `+${attachments.length - 5}`
: undefined;
</div>
);
}
if (attachments.length === 4) {
return (
<div className="module-image-grid">
<div className="module-image-grid__column">
@ -274,6 +195,7 @@ export class ImageGrid extends React.Component<Props> {
i18n={i18n}
blurHash={attachments[0].blurHash}
curveTopLeft={curveTopLeft}
noBorder={false}
attachment={attachments[0]}
playIconOverlay={isVideoAttachment(attachments[0])}
height={149}
@ -288,6 +210,7 @@ export class ImageGrid extends React.Component<Props> {
blurHash={attachments[1].blurHash}
curveTopRight={curveTopRight}
playIconOverlay={isVideoAttachment(attachments[1])}
noBorder={false}
height={149}
width={149}
attachment={attachments[1]}
@ -302,11 +225,11 @@ export class ImageGrid extends React.Component<Props> {
i18n={i18n}
blurHash={attachments[2].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={isSticker}
noBorder={false}
curveBottomLeft={curveBottomLeft}
playIconOverlay={isVideoAttachment(attachments[2])}
height={99}
width={99}
height={149}
width={149}
attachment={attachments[2]}
url={getThumbnailUrl(attachments[2])}
onClick={onClick}
@ -317,35 +240,107 @@ export class ImageGrid extends React.Component<Props> {
i18n={i18n}
blurHash={attachments[3].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={isSticker}
noBorder={false}
curveBottomRight={curveBottomRight}
playIconOverlay={isVideoAttachment(attachments[3])}
height={99}
width={98}
height={149}
width={149}
attachment={attachments[3]}
url={getThumbnailUrl(attachments[3])}
onClick={onClick}
onError={onError}
/>
<Image
alt={getAlt(attachments[4], i18n)}
i18n={i18n}
blurHash={attachments[4].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={isSticker}
curveBottomRight={curveBottomRight}
playIconOverlay={isVideoAttachment(attachments[4])}
height={99}
width={99}
darkOverlay={moreMessagesOverlay}
overlayText={moreMessagesOverlayText}
attachment={attachments[4]}
url={getThumbnailUrl(attachments[4])}
onClick={onClick}
onError={onError}
/>
</div>
</div>
</div>
);
}
}
const moreMessagesOverlay = attachments.length > 5;
const moreMessagesOverlayText = moreMessagesOverlay
? `+${attachments.length - 5}`
: undefined;
return (
<div className="module-image-grid">
<div className="module-image-grid__column">
<div className="module-image-grid__row">
<Image
alt={getAlt(attachments[0], i18n)}
i18n={i18n}
blurHash={attachments[0].blurHash}
curveTopLeft={curveTopLeft}
attachment={attachments[0]}
playIconOverlay={isVideoAttachment(attachments[0])}
height={149}
width={149}
url={getThumbnailUrl(attachments[0])}
onClick={onClick}
onError={onError}
/>
<Image
alt={getAlt(attachments[1], i18n)}
i18n={i18n}
blurHash={attachments[1].blurHash}
curveTopRight={curveTopRight}
playIconOverlay={isVideoAttachment(attachments[1])}
height={149}
width={149}
attachment={attachments[1]}
url={getThumbnailUrl(attachments[1])}
onClick={onClick}
onError={onError}
/>
</div>
<div className="module-image-grid__row">
<Image
alt={getAlt(attachments[2], i18n)}
i18n={i18n}
blurHash={attachments[2].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={isSticker}
curveBottomLeft={curveBottomLeft}
playIconOverlay={isVideoAttachment(attachments[2])}
height={99}
width={99}
attachment={attachments[2]}
url={getThumbnailUrl(attachments[2])}
onClick={onClick}
onError={onError}
/>
<Image
alt={getAlt(attachments[3], i18n)}
i18n={i18n}
blurHash={attachments[3].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={isSticker}
playIconOverlay={isVideoAttachment(attachments[3])}
height={99}
width={98}
attachment={attachments[3]}
url={getThumbnailUrl(attachments[3])}
onClick={onClick}
onError={onError}
/>
<Image
alt={getAlt(attachments[4], i18n)}
i18n={i18n}
blurHash={attachments[4].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={isSticker}
curveBottomRight={curveBottomRight}
playIconOverlay={isVideoAttachment(attachments[4])}
height={99}
width={99}
darkOverlay={moreMessagesOverlay}
overlayText={moreMessagesOverlayText}
attachment={attachments[4]}
url={getThumbnailUrl(attachments[4])}
onClick={onClick}
onError={onError}
/>
</div>
</div>
</div>
);
};