gab-social/app/javascript/gabsocial/components/image.js

80 lines
1.4 KiB
JavaScript
Raw Normal View History

2020-02-19 23:57:07 +00:00
import classNames from 'classnames/bind'
const cx = classNames.bind(_s)
export default class Image extends PureComponent {
2020-04-08 02:06:59 +01:00
2020-02-19 23:57:07 +00:00
static propTypes = {
2020-04-08 02:06:59 +01:00
alt: PropTypes.string.isRequired,
2020-02-19 23:57:07 +00:00
src: PropTypes.string,
className: PropTypes.string,
2020-04-23 07:13:29 +01:00
width: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
height: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
2020-02-19 23:57:07 +00:00
fit: PropTypes.oneOf(['contain', 'cover', 'tile', 'none']),
2020-04-04 00:18:26 +01:00
nullable: PropTypes.bool,
2020-04-08 02:06:59 +01:00
lazy: PropTypes.bool,
2020-05-01 06:50:27 +01:00
imageRef: PropTypes.func,
2020-02-19 23:57:07 +00:00
}
static defaultProps = {
width: '100%',
fit: 'cover',
}
2020-04-04 00:18:26 +01:00
state = {
error: false,
}
handleOnError = () => {
this.setState({ error: true })
}
2020-02-19 23:57:07 +00:00
render() {
2020-04-08 02:06:59 +01:00
const {
2020-04-24 04:17:27 +01:00
alt,
2020-04-08 02:06:59 +01:00
src,
fit,
className,
nullable,
lazy,
2020-05-01 06:50:27 +01:00
imageRef,
2020-04-08 02:06:59 +01:00
...otherProps
} = this.props
2020-04-04 00:18:26 +01:00
const { error } = this.state
2020-02-19 23:57:07 +00:00
const classes = cx(className, {
default: 1,
2020-04-08 02:06:59 +01:00
objectFitCover: !!src && fit === 'cover',
2020-04-29 23:32:49 +01:00
bgSecondary: 1,
2020-02-19 23:57:07 +00:00
})
2020-04-04 00:18:26 +01:00
//If error and not our own image
if (error && nullable) {
return null
}
2020-04-08 02:06:59 +01:00
if (!src) {
return (
<div className={classes} />
)
}
2020-02-19 23:57:07 +00:00
return (
<img
2020-04-24 04:17:27 +01:00
alt={alt}
2020-02-19 23:57:07 +00:00
className={classes}
{...otherProps}
2020-05-01 06:50:27 +01:00
ref={imageRef}
2020-04-08 02:06:59 +01:00
src={src}
2020-04-04 00:18:26 +01:00
onError={this.handleOnError}
2020-02-19 23:57:07 +00:00
/>
)
}
2020-04-08 02:06:59 +01:00
2020-02-19 23:57:07 +00:00
}