103 lines
1.9 KiB
JavaScript
103 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { connect } from 'react-redux'
|
|
import {
|
|
CX,
|
|
MODAL_MEDIA,
|
|
} from '../constants'
|
|
import { openModal } from '../actions/modal'
|
|
|
|
class Image extends React.PureComponent {
|
|
|
|
state = {
|
|
error: false,
|
|
}
|
|
|
|
handleOnError = () => {
|
|
this.setState({ error: true })
|
|
}
|
|
|
|
handleOnClick = () => {
|
|
this.props.onOpenMediaModal()
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
alt,
|
|
src,
|
|
fit,
|
|
className,
|
|
nullable,
|
|
isLazy,
|
|
imageRef,
|
|
expandOnClick,
|
|
...otherProps
|
|
} = this.props
|
|
const { error } = this.state
|
|
|
|
const classes = CX(className, {
|
|
d: 1,
|
|
objectFitCover: !!src && fit === 'cover',
|
|
bgSecondary: !src,
|
|
})
|
|
|
|
//If error and not our own image
|
|
if (error && nullable) {
|
|
return null
|
|
}
|
|
|
|
if (!src) {
|
|
return <div className={classes} />
|
|
}
|
|
|
|
return (
|
|
<img
|
|
alt={alt}
|
|
className={classes}
|
|
{...otherProps}
|
|
ref={imageRef}
|
|
src={src}
|
|
onError={this.handleOnError}
|
|
onClick={expandOnClick ? this.handleOnClick : undefined}
|
|
loading={isLazy ? 'lazy' : undefined}
|
|
/>
|
|
)
|
|
}
|
|
|
|
}
|
|
|
|
const mapDispatchToProps = (dispatch, { alt, src }) => ({
|
|
onOpenMediaModal() {
|
|
dispatch(openModal(MODAL_MEDIA, {
|
|
alt,
|
|
src,
|
|
}))
|
|
},
|
|
});
|
|
|
|
Image.propTypes = {
|
|
alt: PropTypes.string.isRequired,
|
|
isLazy: PropTypes.string,
|
|
className: PropTypes.string,
|
|
width: PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.number,
|
|
]),
|
|
height: PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.number,
|
|
]),
|
|
fit: PropTypes.oneOf(['contain', 'cover', 'tile', 'none']),
|
|
nullable: PropTypes.bool,
|
|
lazy: PropTypes.bool,
|
|
imageRef: PropTypes.func,
|
|
expandOnClick: PropTypes.bool,
|
|
onOpenMedia: PropTypes.func.isRequired,
|
|
}
|
|
|
|
Image.defaultProps = {
|
|
width: '100%',
|
|
fit: 'cover',
|
|
}
|
|
|
|
export default connect(null, mapDispatchToProps)(Image) |