components.controls.ImageUploader.ImageUploaderItem.jsx Maven / Gradle / Ivy
The newest version!
import React from 'react'
import PropTypes from 'prop-types'
import isEmpty from 'lodash/isEmpty'
import isUndefined from 'lodash/isUndefined'
import isEqual from 'lodash/isEqual'
import get from 'lodash/get'
import omit from 'lodash/omit'
import classNames from 'classnames'
import { Tooltip, Modal } from 'reactstrap'
import { convertSize } from '../FileUploader/utils'
import { Spinner } from '../../snippets/Spinner/Spinner'
class ImageUploaderItem extends React.Component {
state = {
tooltipOpen: false,
modalOpen: false,
}
toggle = () => {
const { tooltipOpen } = this.state
this.setState({
tooltipOpen: !tooltipOpen,
})
}
modalOpen() {
this.setState({ modalOpen: true })
}
modalClose() {
this.setState({ modalOpen: false })
}
render() {
const {
file,
onRemove,
showSize,
showName,
index,
loading,
lightBox,
listType,
customUploaderSize,
showTooltip,
canDelete,
shape,
} = this.props
const { tooltipOpen, modalOpen } = this.state
const cardType = listType === 'card'
const imageType = listType === 'image'
const withInformation = showSize || showName
const shapeCircle = isEqual(shape, 'circle')
const cardWithShapeCircle = cardType && shapeCircle
let imgSrc
if (!isUndefined(file.error)) {
imgSrc = ''
} else if (isUndefined(file.link)) {
imgSrc = URL.createObjectURL(file)
} else {
imgSrc = get(file, 'link')
}
const modifyStyle = size => (cardType && !shapeCircle ? omit(size, 'maxWidth', 'width') : size)
const modifyContainerStyle = size => (cardWithShapeCircle ? omit(size, 'maxWidth', 'width') : size)
return (
{lightBox && isUndefined(file.error) && (
this.modalOpen()}
className="n2o-image-uploader__watch--eye fa fa-eye"
/>
)}
{canDelete && (
onRemove(index, file.id)}
className="n2o-image-uploader__watch--trash fa fa-trash"
/>
)}
{
showTooltip && (!isEmpty(file.error) || !isEmpty(file.response))
? (
{file.response || file.error}
)
: null
}
{cardType && showName && (
{file.name}
)}
{cardType && showSize && {convertSize(file.size)}}
{loading && this.modalClose()}
className="n2o-image-uploader__modal"
>
this.modalClose()}
className="n2o-image-uploader__modal--icon-close fa fa-times"
/>
)
}
}
ImageUploaderItem.propTypes = {
file: PropTypes.object,
onRemove: PropTypes.func,
showSize: PropTypes.bool,
showName: PropTypes.bool,
index: PropTypes.number,
loading: PropTypes.bool,
lightBox: PropTypes.bool,
listType: PropTypes.string,
customUploaderSize: PropTypes.number,
showTooltip: PropTypes.bool,
canDelete: PropTypes.bool,
shape: PropTypes.string,
}
ImageUploaderItem.defaultProps = {
listType: 'image',
}
export default ImageUploaderItem