Added ability to click to enlarge profile, cover photo on profile

• Added:
- ability to click to enlarge profile, cover photo on profile
This commit is contained in:
mgabdev
2020-10-22 16:57:22 -05:00
parent 50169fcd7d
commit de5a1f93b8
4 changed files with 105 additions and 58 deletions

View File

@@ -1,6 +1,11 @@
import React from 'react'
import PropTypes from 'prop-types'
import { CX } from '../constants'
import { connect } from 'react-redux'
import {
CX,
MODAL_MEDIA,
} from '../constants'
import { openModal } from '../actions/modal'
class Image extends React.PureComponent {
@@ -12,6 +17,10 @@ class Image extends React.PureComponent {
this.setState({ error: true })
}
handleOnClick = () => {
this.props.onOpenMediaModal()
}
render() {
const {
alt,
@@ -21,6 +30,7 @@ class Image extends React.PureComponent {
nullable,
isLazy,
imageRef,
expandOnClick,
...otherProps
} = this.props
const { error } = this.state
@@ -37,9 +47,7 @@ class Image extends React.PureComponent {
}
if (!src) {
return (
<div className={classes} />
)
return <div className={classes} />
}
return (
@@ -50,6 +58,7 @@ class Image extends React.PureComponent {
ref={imageRef}
src={src}
onError={this.handleOnError}
onClick={expandOnClick ? this.handleOnClick : undefined}
loading={isLazy ? 'lazy' : undefined}
/>
)
@@ -57,6 +66,15 @@ class Image extends React.PureComponent {
}
const mapDispatchToProps = (dispatch, { alt, src }) => ({
onOpenMediaModal() {
dispatch(openModal(MODAL_MEDIA, {
alt,
src,
}))
},
});
Image.propTypes = {
alt: PropTypes.string.isRequired,
isLazy: PropTypes.string,
@@ -73,6 +91,8 @@ Image.propTypes = {
nullable: PropTypes.bool,
lazy: PropTypes.bool,
imageRef: PropTypes.func,
expandOnClick: PropTypes.bool,
onOpenMedia: PropTypes.func.isRequired,
}
Image.defaultProps = {
@@ -80,4 +100,4 @@ Image.defaultProps = {
fit: 'cover',
}
export default Image
export default connect(null, mapDispatchToProps)(Image)