Skip to content

Commit 0be7c51

Browse files
alfdocimoalfdocimo
authored
Merge pull request #2962 from SUI-Components/feat/hide-rotate-icon-photo-uploader
Feat/hide rotate icon photo uploader
2 parents 082dd9b + 1bf464c commit 0be7c51

File tree

7 files changed

+209
-18
lines changed

7 files changed

+209
-18
lines changed

‎components/molecule/photoUploader/demo/articles/HideBothButtonsArticle.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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 HideBothButtonsArticle = ({className}) => {
37+
return (
38+
<Article className={className}>
39+
<H2>Hide Both Delete and Rotate Buttons</H2>
40+
<Paragraph>
41+
When both <Code>showDeleteButton</Code> and <Code>showRotateButton</Code> props are set to <Code>false</Code>,
42+
both the delete and rotate buttons will be hidden from the thumb cards. This creates a read-only view where
43+
users can only view uploaded photos without any editing capabilities.
44+
</Paragraph>
45+
<Paragraph>Try uploading some photos below to see how both action buttons are hidden:</Paragraph>
46+
<MoleculePhotoUploader
47+
addMorePhotosIcon={_addMorePhotosIcon}
48+
addPhotoTextButton={_addPhotoTextButton}
49+
addPhotoTextSkeleton={_addPhotoTextSkeleton}
50+
callbackPhotosRejected={_callbackPhotosRejected}
51+
callbackPhotosUploaded={_callbackPhotosUploaded}
52+
callbackUploadPhoto={_callbackUploadPhoto}
53+
deleteIcon={_deleteIcon}
54+
dragPhotosIcon={_dragPhotosIcon}
55+
dragPhotoTextInitialContent={_dragPhotoTextInitialContent}
56+
dragPhotoDividerTextInitialContent={_dragPhotoDividerTextInitialContent}
57+
dropPhotosHereText={_dropPhotosHere}
58+
errorCorruptedPhotoUploadedText={_errorCorruptedPhotoUploaded}
59+
errorFileExcededMaxSizeText={_errorFileExcededMaxSize}
60+
errorFormatPhotoUploadedText={_errorFormatPhotoUploaded}
61+
errorInitialPhotoDownloadErrorText={_errorInitialPhotoDownloadError}
62+
showDeleteButton={false}
63+
showRotateButton={false}
64+
infoIcon={_infoIcon}
65+
limitPhotosUploadedText={_limitPhotosUploaded}
66+
limitPhotosUploadedNotification={_limitPhotosUploadedNotification}
67+
mainPhotoLabel={_mainPhotoLabel}
68+
maxPhotos={_maxPhotos}
69+
notificationErrorFormatPhotoUploaded={_notificationErrorFormatPhotoUploaded}
70+
rejectPhotosIcon={_rejectPhotosIcon}
71+
retryIcon={_retryErrorPhotosIcon}
72+
rotateIcon={_rotateIcon}
73+
uploadingPhotosText={_uploadingPhotosText}
74+
/>
75+
</Article>
76+
)
77+
}
78+
79+
HideBothButtonsArticle.displayName = 'HideBothButtonsArticle'
80+
81+
HideBothButtonsArticle.propTypes = {
82+
className: PropTypes.string
83+
}
84+
85+
export default HideBothButtonsArticle

‎components/molecule/photoUploader/demo/articles/HideRotateButtonArticle.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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 HideRotateButtonArticle = ({className}) => {
37+
return (
38+
<Article className={className}>
39+
<H2>Hide Rotate Button</H2>
40+
<Paragraph>
41+
When <Code>showRotateButton</Code> prop is set to <Code>false</Code>, the rotate button will be hidden from the
42+
thumb cards. This is useful when you want to prevent users from rotating uploaded photos.
43+
</Paragraph>
44+
<Paragraph>Try uploading some photos below to see how the rotate 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+
showRotateButton={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+
HideRotateButtonArticle.displayName = 'HideRotateButtonArticle'
78+
79+
HideRotateButtonArticle.propTypes = {
80+
className: PropTypes.string
81+
}
82+
83+
export default HideRotateButtonArticle

‎components/molecule/photoUploader/demo/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import {Code, H1, Paragraph} from '@s-ui/documentation-library'
22

33
import DefaultArticle from './articles/DefaultArticle.js'
4+
import HideBothButtonsArticle from './articles/HideBothButtonsArticle.js'
45
import HideDeleteButtonArticle from './articles/HideDeleteButtonArticle.js'
6+
import HideRotateButtonArticle from './articles/HideRotateButtonArticle.js'
57
import InitialPhotosArticle from './articles/InitialPhotosArticle.js'
68
import WithContentArticle from './articles/WithContentArticle.js'
79
import {CLASS_DEMO_SECTION} from './config.js'
@@ -18,6 +20,10 @@ const Demo = () => {
1820
<br />
1921
<HideDeleteButtonArticle className={CLASS_DEMO_SECTION} />
2022
<br />
23+
<HideRotateButtonArticle className={CLASS_DEMO_SECTION} />
24+
<br />
25+
<HideBothButtonsArticle className={CLASS_DEMO_SECTION} />
26+
<br />
2127
<InitialPhotosArticle className={CLASS_DEMO_SECTION} />
2228
<br />
2329
<WithContentArticle className={CLASS_DEMO_SECTION} />

‎components/molecule/photoUploader/src/PhotosPreview/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const PhotosPreview = ({
4444
errorInitialPhotoDownloadErrorText,
4545
files,
4646
showDeleteButton,
47+
showRotateButton,
4748
inputId,
4849
isPhotoUploaderFully,
4950
mainPhotoLabel,
@@ -180,6 +181,7 @@ const PhotosPreview = ({
180181
deleteIcon={deleteIcon()}
181182
dragIcon={dragIcon()}
182183
showDeleteButton={showDeleteButton}
184+
showRotateButton={showRotateButton}
183185
iconSize={thumbIconSize}
184186
image={file}
185187
index={index}
@@ -256,6 +258,7 @@ PhotosPreview.propTypes = {
256258
errorInitialPhotoDownloadErrorText: PropTypes.string.isRequired,
257259
files: PropTypes.array.isRequired,
258260
showDeleteButton: PropTypes.bool,
261+
showRotateButton: PropTypes.bool,
259262
inputId: PropTypes.string.isRequired,
260263
isPhotoUploaderFully: PropTypes.bool.isRequired,
261264
mainPhotoLabel: PropTypes.string.isRequired,

‎components/molecule/photoUploader/src/ThumbCard/index.js‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const ThumbCard = ({
2323
deleteIcon,
2424
dragIcon,
2525
showDeleteButton = true,
26+
showRotateButton = true,
2627
iconSize = ATOM_ICON_SIZES.small,
2728
image,
2829
index,
@@ -45,7 +46,8 @@ const ThumbCard = ({
4546
})
4647

4748
const imageThumbClass = cx(IMAGE_THUMB_CARD_CLASS_NAME, {
48-
[`${IMAGE_THUMB_CARD_CLASS_NAME}--ratioDisabled`]: outputImageAspectRatioDisabled
49+
[`${IMAGE_THUMB_CARD_CLASS_NAME}--ratioDisabled`]: outputImageAspectRatioDisabled,
50+
[`${IMAGE_THUMB_CARD_CLASS_NAME}--rotateAndDeleteButtonsHidden`]: !showDeleteButton && !showRotateButton
4951
})
5052

5153
const thumbCardLabel = index === 0 && isDefaultView ? mainPhotoLabel : index + 1
@@ -105,23 +107,25 @@ const ThumbCard = ({
105107
</AtomButton>
106108
</div>
107109
) : (
108-
<div className={BUTTON_THUMB_CARD_CLASS_NAME}>
109-
<AtomButton
110-
aria-label={`${rotateButtonAriaLabel} ${thumbCardLabel}`}
111-
design={atomButtonDesigns.LINK}
112-
fullWidth
113-
onClick={() => callbackRotateItem(index)}
114-
size={atomButtonSizes.SMALL}
115-
tabIndex="0"
116-
type="button"
117-
>
118-
<div className={`${BUTTON_THUMB_CARD_CLASS_NAME}Icon`}>
119-
<AtomIcon color={ATOM_ICON_COLORS.currentColor} size={iconSize}>
120-
{rotateIcon}
121-
</AtomIcon>
122-
</div>
123-
</AtomButton>
124-
</div>
110+
showRotateButton && (
111+
<div className={BUTTON_THUMB_CARD_CLASS_NAME}>
112+
<AtomButton
113+
aria-label={`${rotateButtonAriaLabel} ${thumbCardLabel}`}
114+
design={atomButtonDesigns.LINK}
115+
fullWidth
116+
onClick={() => callbackRotateItem(index)}
117+
size={atomButtonSizes.SMALL}
118+
tabIndex="0"
119+
type="button"
120+
>
121+
<div className={`${BUTTON_THUMB_CARD_CLASS_NAME}Icon`}>
122+
<AtomIcon color={ATOM_ICON_COLORS.currentColor} size={iconSize}>
123+
{rotateIcon}
124+
</AtomIcon>
125+
</div>
126+
</AtomButton>
127+
</div>
128+
)
125129
)}
126130
</div>
127131
</div>
@@ -139,6 +143,7 @@ ThumbCard.propTypes = {
139143
deleteIcon: PropTypes.node.isRequired,
140144
dragIcon: PropTypes.node.isRequired,
141145
showDeleteButton: PropTypes.bool,
146+
showRotateButton: PropTypes.bool,
142147
iconSize: PropTypes.oneOf(Object.keys(ATOM_ICON_SIZES)),
143148
image: PropTypes.object.isRequired,
144149
index: PropTypes.number,

‎components/molecule/photoUploader/src/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ const MoleculePhotoUploader = forwardRef(
6969
errorInitialPhotoDownloadErrorText,
7070
errorSaveImageEndpoint,
7171
showDeleteButton = true,
72+
showRotateButton = true,
7273
id = DEFAULT_INPUT_ID,
7374
infoIcon = noop,
7475
initialPhotos = [],
@@ -315,6 +316,7 @@ const MoleculePhotoUploader = forwardRef(
315316
dragDelay={dragDelay}
316317
dragIcon={dragIcon}
317318
showDeleteButton={showDeleteButton}
319+
showRotateButton={showRotateButton}
318320
errorInitialPhotoDownloadErrorText={errorInitialPhotoDownloadErrorText}
319321
files={files}
320322
inputId={id}
@@ -459,6 +461,9 @@ MoleculePhotoUploader.propTypes = {
459461
/** Show the delete button on thumb cards */
460462
showDeleteButton: PropTypes.bool,
461463

464+
/** Show the rotate button on thumb cards */
465+
showRotateButton: PropTypes.bool,
466+
462467
/** Id of the input element */
463468
id: PropTypes.string,
464469

‎components/molecule/photoUploader/src/styles/index.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,10 @@ $skeleton-class: '#{$base-class}-skeleton';
270270
object-fit: cover;
271271
width: $w-photo-uploader-thumb-image;
272272

273+
&--rotateAndDeleteButtonsHidden {
274+
border-radius: $bdrs-photo-uploader-thumb-card;
275+
}
276+
273277
@include media-breakpoint-up(m) {
274278
height: $h-photo-uploader-thumb-image-desktop;
275279
width: $w-photo-uploader-thumb-image-desktop;

0 commit comments

Comments
 (0)