|
| 1 | +import PropTypes from 'prop-types' |
| 2 | + |
| 3 | +import {Article, Code, H2, Paragraph} from '@s-ui/documentation-library' |
| 4 | + |
| 5 | +import MoleculePhotoUploader from '../../src/index.js' |
| 6 | +import { |
| 7 | + _addPhotoTextButton, |
| 8 | + _addPhotoTextSkeleton, |
| 9 | + _callbackPhotosRejected, |
| 10 | + _callbackPhotosUploaded, |
| 11 | + _callbackUploadPhoto, |
| 12 | + _dragPhotoDividerTextInitialContent, |
| 13 | + _dragPhotoTextInitialContent, |
| 14 | + _dropPhotosHere, |
| 15 | + _errorCorruptedPhotoUploaded, |
| 16 | + _errorFileExcededMaxSize, |
| 17 | + _errorFormatPhotoUploaded, |
| 18 | + _errorInitialPhotoDownloadError, |
| 19 | + _limitPhotosUploaded, |
| 20 | + _limitPhotosUploadedNotification, |
| 21 | + _mainPhotoLabel, |
| 22 | + _maxPhotos, |
| 23 | + _notificationErrorFormatPhotoUploaded, |
| 24 | + _uploadingPhotosText |
| 25 | +} from '../config.js' |
| 26 | +import { |
| 27 | + _addMorePhotosIcon, |
| 28 | + _deleteIcon, |
| 29 | + _dragPhotosIcon, |
| 30 | + _infoIcon, |
| 31 | + _rejectPhotosIcon, |
| 32 | + _retryErrorPhotosIcon, |
| 33 | + _rotateIcon |
| 34 | +} from '../icons.js' |
| 35 | + |
| 36 | +const HideDeleteButtonArticle = ({className}) => { |
| 37 | + return ( |
| 38 | + <Article className={className}> |
| 39 | + <H2>Hide Delete Button</H2> |
| 40 | + <Paragraph> |
| 41 | + When <Code>showDeleteButton</Code> prop is set to <Code>false</Code>, the delete button will be hidden from the |
| 42 | + thumb cards. This is useful when you want to prevent users from deleting uploaded photos. |
| 43 | + </Paragraph> |
| 44 | + <Paragraph>Try uploading some photos below to see how the delete button is hidden:</Paragraph> |
| 45 | + <MoleculePhotoUploader |
| 46 | + addMorePhotosIcon={_addMorePhotosIcon} |
| 47 | + addPhotoTextButton={_addPhotoTextButton} |
| 48 | + addPhotoTextSkeleton={_addPhotoTextSkeleton} |
| 49 | + callbackPhotosRejected={_callbackPhotosRejected} |
| 50 | + callbackPhotosUploaded={_callbackPhotosUploaded} |
| 51 | + callbackUploadPhoto={_callbackUploadPhoto} |
| 52 | + deleteIcon={_deleteIcon} |
| 53 | + dragPhotosIcon={_dragPhotosIcon} |
| 54 | + dragPhotoTextInitialContent={_dragPhotoTextInitialContent} |
| 55 | + dragPhotoDividerTextInitialContent={_dragPhotoDividerTextInitialContent} |
| 56 | + dropPhotosHereText={_dropPhotosHere} |
| 57 | + errorCorruptedPhotoUploadedText={_errorCorruptedPhotoUploaded} |
| 58 | + errorFileExcededMaxSizeText={_errorFileExcededMaxSize} |
| 59 | + errorFormatPhotoUploadedText={_errorFormatPhotoUploaded} |
| 60 | + errorInitialPhotoDownloadErrorText={_errorInitialPhotoDownloadError} |
| 61 | + showDeleteButton={false} |
| 62 | + infoIcon={_infoIcon} |
| 63 | + limitPhotosUploadedText={_limitPhotosUploaded} |
| 64 | + limitPhotosUploadedNotification={_limitPhotosUploadedNotification} |
| 65 | + mainPhotoLabel={_mainPhotoLabel} |
| 66 | + maxPhotos={_maxPhotos} |
| 67 | + notificationErrorFormatPhotoUploaded={_notificationErrorFormatPhotoUploaded} |
| 68 | + rejectPhotosIcon={_rejectPhotosIcon} |
| 69 | + retryIcon={_retryErrorPhotosIcon} |
| 70 | + rotateIcon={_rotateIcon} |
| 71 | + uploadingPhotosText={_uploadingPhotosText} |
| 72 | + /> |
| 73 | + </Article> |
| 74 | + ) |
| 75 | +} |
| 76 | + |
| 77 | +HideDeleteButtonArticle.displayName = 'ShowDeleteButtonArticle' |
| 78 | + |
| 79 | +HideDeleteButtonArticle.propTypes = { |
| 80 | + className: PropTypes.string |
| 81 | +} |
| 82 | + |
| 83 | +export default HideDeleteButtonArticle |
0 commit comments