public render()

in fronts-client/src/components/inputs/InputImage.tsx [306:488]
174 lines of code
30 McCabe index (conditional complexity)

	public render() {
		const {
			small = false,
			input,
			gridUrl: gridBaseUrl,
			useDefault,
			defaultImageUrl,
			message = 'Replace image',
			hasVideo,
			disabled,
			isSelected,
			isInvalid,
			criteria,
		} = this.props;

		const imageDims = this.getCurrentImageDimensions();

		if (!gridBaseUrl) {
			return (
				<div>
					<code>gridUrl</code> config value missing
				</div>
			);
		}

		const isImgFromGrid = defaultImageUrl
			? regexToCheckGridImage.test(defaultImageUrl)
			: false;

		const hasImage = !useDefault && !!input.value && !!input.value.thumb;
		const imageUrl =
			!useDefault && input.value && input.value.thumb
				? input.value.thumb
				: defaultImageUrl;

		// e.g. https://media.guim.co.uk/db6bf997dee6d43f8dca1ab9cd2c7402725434b6/0_214_3960_2376/500.jpg
		const maybeDefaultImagePathParts =
			defaultImageUrl && new URL(defaultImageUrl).pathname.split('/');
		const maybeDefaultImageId = maybeDefaultImagePathParts?.[1]; // pathname starts with / so index 0 is empty string
		const maybeDefaultCropId = maybeDefaultImagePathParts?.[2];
		const gridUrl =
			this.state.isRecropping && maybeDefaultImageId && maybeDefaultCropId
				? `${gridBaseUrl}/images/${maybeDefaultImageId}/crop?seedCropId=${maybeDefaultCropId}&`
				: `${gridBaseUrl}?`;
		const gridModalUrl = `${gridUrl}${new URLSearchParams(
			this.criteriaToGridQueryParams(),
		).toString()}`;

		const portraitImage = !!(
			!useDefault &&
			imageDims &&
			imageDims.height > imageDims.width
		);
		const shouldShowPortrait =
			criteria != null &&
			this.compareAspectRatio(portraitCardImageCriteria, criteria);
		const shouldShowLandscape54 =
			criteria != null &&
			this.compareAspectRatio(landscape5To4CardImageCriteria, criteria);
		const showSquare =
			criteria != null &&
			this.compareAspectRatio(squareImageCriteria, criteria);

		return (
			<InputImageContainer
				small={small}
				isDragging={this.state.isDragging}
				isSelected={isSelected}
				isInvalid={isInvalid}
				confirmDelete={this.state.confirmDelete}
			>
				<GridModal
					url={gridModalUrl}
					isOpen={this.state.modalOpen}
					onClose={this.closeModal}
					onMessage={this.onMessage}
				/>
				<DragIntentContainer
					active
					onIntentConfirm={() => this.setState({ isDragging: true })}
					onDragIntentStart={() => this.setState({ isDragging: true })}
					onDragIntentEnd={() => this.setState({ isDragging: false })}
				>
					<ImageContainer
						small={small}
						shouldShowPortrait={shouldShowPortrait}
						shouldShowLandscape54={shouldShowLandscape54}
						showSquare={showSquare}
					>
						<ImageComponent
							style={{
								backgroundImage: `url(${imageUrl}`,
							}}
							draggable
							onDragStart={this.handleDragStart}
							onDrop={this.handleDrop}
							small={small}
							portrait={portraitImage}
							shouldShowLandscape54={shouldShowLandscape54}
							showSquare={showSquare}
							shouldShowPortrait={shouldShowPortrait}
						>
							{hasImage ? (
								<>
									<ButtonDelete
										type="button"
										priority="primary"
										onClick={this.handleDelete}
										disabled={disabled}
										confirmDelete={this.state.confirmDelete}
									>
										<DeleteIconOptions>
											{this.state.confirmDelete ? (
												<ConfirmDeleteIcon size="s" />
											) : (
												<RubbishBinIcon size="s" />
											)}
										</DeleteIconOptions>
									</ButtonDelete>

									{isInvalid ? (
										<ButtonWarning>
											<IconWarning>
												<WarningIcon size="s" />
											</IconWarning>
										</ButtonWarning>
									) : null}
								</>
							) : (
								<AddImageViaGridModalButton>
									<AddImageButton
										type="button"
										onClick={this.openModal(false)}
										small={small}
										disabled={disabled}
									>
										<AddImageIcon size="l" />
										{!!small ? null : <Label size="sm">{message}</Label>}
									</AddImageButton>
									{isImgFromGrid && (
										<AddImageButton
											type="button"
											onClick={this.openModal(true)}
											small={small}
											disabled={disabled}
										>
											<CropIcon size="l" fill={theme.colors.white} />
											{!!small ? null : <Label size="sm">Recrop image</Label>}
										</AddImageButton>
									)}
								</AddImageViaGridModalButton>
							)}
							{hasVideo && useDefault && (
								<VideoIconContainer title="This media has video content.">
									<VideoIcon />
								</VideoIconContainer>
							)}
						</ImageComponent>
						{!!small ? null : (
							<AddImageViaUrlInput>
								<ImageUrlInput
									name="paste-url"
									placeholder=" Paste crop url"
									defaultValue={
										this.state.imageSrc || (input.value && input.value.origin)
									}
									onChange={this.handlePasteImgSrcChange}
									onFocus={this.handleFocus}
									ref={this.inputRef}
									disabled={disabled}
								/>
								<InputLabel hidden htmlFor="paste-url">
									Paste crop url
								</InputLabel>
							</AddImageViaUrlInput>
						)}
					</ImageContainer>
				</DragIntentContainer>
				{this.state.isDragging && <ImageDragIntentIndicator />}
				{this.state.isValidating && <ValidatingSpinnerOverlay />}
			</InputImageContainer>
		);
	}