Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 1x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import AtomIcon, {ATOM_ICON_SIZES} from '@s-ui/react-atom-icon'
import {DEFAULT_VIEW_TYPE, VIEW_TYPE} from './../config.js'
import {
ACTION_THUMB_CARD_CLASS_NAME,
BUTTON_THUMB_CARD_CLASS_NAME,
CONTAINER_THUMB_CARD_CLASS_NAME,
ICON_THUMB_CARD_CLASS_NAME,
IMAGE_THUMB_CARD_CLASS_NAME,
THUMB_CARD_CLASS_NAME
} from './config.js'
const ThumbCard = ({
iconSize = ATOM_ICON_SIZES.small,
callbackDeleteItem,
callbackRetryUpload,
callbackRotateItem,
content: Content = () => null,
deleteIcon,
dragIcon,
index,
image,
mainPhotoLabel,
outputImageAspectRatioDisabled,
rejectPhotosIcon,
retryIcon,
rotateIcon,
viewType
}) => {
const hasErrors = image.hasErrors
const isDefaultView = viewType === DEFAULT_VIEW_TYPE
const isListtView = viewType === VIEW_TYPE.LIST
const counterClass = cx(`${THUMB_CARD_CLASS_NAME}-counter`, {
[`${THUMB_CARD_CLASS_NAME}-mainCounter`]: index === 0 && isDefaultView
})
const imageThumbClass = cx(IMAGE_THUMB_CARD_CLASS_NAME, {
[`${IMAGE_THUMB_CARD_CLASS_NAME}--ratioDisabled`]: outputImageAspectRatioDisabled
})
return (
<div className={THUMB_CARD_CLASS_NAME}>
<div className={counterClass}>{index === 0 && isDefaultView ? mainPhotoLabel : index + 1}</div>
<div className={CONTAINER_THUMB_CARD_CLASS_NAME}>
{hasErrors ? (
<div className={`${ICON_THUMB_CARD_CLASS_NAME}`}>
<AtomIcon size={ATOM_ICON_SIZES.extraLarge}>{rejectPhotosIcon}</AtomIcon>
</div>
) : (
<>
{isListtView && <AtomIcon size={iconSize}>{dragIcon}</AtomIcon>}
<img src={image.preview} className={imageThumbClass} />
</>
)}
</div>
<Content file={image} index={index} />
<div className={ACTION_THUMB_CARD_CLASS_NAME}>
<div className={BUTTON_THUMB_CARD_CLASS_NAME} onClick={() => callbackDeleteItem(index)}>
<AtomIcon size={iconSize}>{deleteIcon}</AtomIcon>
</div>
{hasErrors ? (
<div className={BUTTON_THUMB_CARD_CLASS_NAME} onClick={e => callbackRetryUpload(index)}>
<AtomIcon size={iconSize}>{retryIcon}</AtomIcon>
</div>
) : (
<div className={BUTTON_THUMB_CARD_CLASS_NAME} onClick={e => callbackRotateItem(index)}>
<AtomIcon size={iconSize}>{rotateIcon}</AtomIcon>
</div>
)}
</div>
</div>
)
}
ThumbCard.displayName = 'ThumbCard'
ThumbCard.propTypes = {
iconSize: PropTypes.oneOf(Object.keys(ATOM_ICON_SIZES)),
callbackDeleteItem: PropTypes.func,
callbackRetryUpload: PropTypes.func,
callbackRotateItem: PropTypes.func,
content: PropTypes.func,
deleteIcon: PropTypes.node.isRequired,
dragIcon: PropTypes.node.isRequired,
index: PropTypes.number,
image: PropTypes.object.isRequired,
mainPhotoLabel: PropTypes.string,
outputImageAspectRatioDisabled: PropTypes.bool,
rejectPhotosIcon: PropTypes.node.isRequired,
retryIcon: PropTypes.node.isRequired,
rotateIcon: PropTypes.node.isRequired,
viewType: PropTypes.oneOf(Object.keys(VIEW_TYPE))
}
export default ThumbCard
|