Add prettier for codestyle and re-format everything (#1294)

This commit is contained in:
Erik Michelson 2021-06-06 23:14:00 +02:00 committed by GitHub
parent 8b78154075
commit 0aae1f70d2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
319 changed files with 4809 additions and 3936 deletions

View file

@ -21,21 +21,20 @@ export interface ImageLightboxModalProps {
export const ImageLightboxModal: React.FC<ImageLightboxModalProps> = ({ show, onHide, src, alt, title }) => {
return (
<Modal
animation={ true }
centered={ true }
dialogClassName={ 'text-dark lightbox' }
show={ show && !!src }
onHide={ onHide }
size={ 'xl' }>
<Modal.Header closeButton={ true }>
<Modal.Title className={ 'h6' }>
<ForkAwesomeIcon icon={ 'picture-o' }/>
animation={true}
centered={true}
dialogClassName={'text-dark lightbox'}
show={show && !!src}
onHide={onHide}
size={'xl'}>
<Modal.Header closeButton={true}>
<Modal.Title className={'h6'}>
<ForkAwesomeIcon icon={'picture-o'} />
&nbsp;
<span>{ alt ?? title ?? '' }</span>
<span>{alt ?? title ?? ''}</span>
</Modal.Title>
</Modal.Header>
<ProxyImageFrame alt={ alt } src={ src } title={ title } className={ 'w-100 cursor-zoom-out' }
onClick={ onHide }/>
<ProxyImageFrame alt={alt} src={src} title={title} className={'w-100 cursor-zoom-out'} onClick={onHide} />
</Modal>
)
}

View file

@ -9,7 +9,7 @@ import React from 'react'
import { ComponentReplacer } from '../ComponentReplacer'
import { ProxyImageFrame } from './proxy-image-frame'
export type ImageClickHandler = (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void;
export type ImageClickHandler = (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void
export class ImageReplacer extends ComponentReplacer {
private readonly clickHandler?: ImageClickHandler
@ -21,16 +21,18 @@ export class ImageReplacer extends ComponentReplacer {
public getReplacement(node: DomElement): React.ReactElement | undefined {
if (node.name === 'img' && node.attribs) {
return <ProxyImageFrame
id={ node.attribs.id }
className={ `${ node.attribs.class } cursor-zoom-in` }
src={ node.attribs.src }
alt={ node.attribs.alt }
title={ node.attribs.title }
width={ node.attribs.width }
height={ node.attribs.height }
onClick={ this.clickHandler }
/>
return (
<ProxyImageFrame
id={node.attribs.id}
className={`${node.attribs.class} cursor-zoom-in`}
src={node.attribs.src}
alt={node.attribs.alt}
title={node.attribs.title}
width={node.attribs.width}
height={node.attribs.height}
onClick={this.clickHandler}
/>
)
}
}
}

View file

@ -9,13 +9,7 @@ import { useSelector } from 'react-redux'
import { getProxiedUrl } from '../../../../api/media'
import { ApplicationState } from '../../../../redux'
export const ProxyImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (
{
src,
title,
alt,
...props
}) => {
export const ProxyImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ src, title, alt, ...props }) => {
const [imageUrl, setImageUrl] = useState('')
const imageProxyEnabled = useSelector((state: ApplicationState) => state.config.useImageProxy)
@ -24,10 +18,9 @@ export const ProxyImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>
return
}
getProxiedUrl(src)
.then(proxyResponse => setImageUrl(proxyResponse.src))
.catch(err => console.error(err))
.then((proxyResponse) => setImageUrl(proxyResponse.src))
.catch((err) => console.error(err))
}, [imageProxyEnabled, src])
return <img src={ imageProxyEnabled ? imageUrl : (src ?? '') } title={ title ?? alt ?? '' } alt={ alt } { ...props }/>
return <img src={imageProxyEnabled ? imageUrl : src ?? ''} title={title ?? alt ?? ''} alt={alt} {...props} />
}