feat(components): add hideChangeButton prop to ImagePreviewInput and …

…height prop to TotalLayoutFooterContainer - Add hideChangeButton prop to ImagePreviewInput to optionally hide the change button - Add height prop to TotalLayoutFooterContainer with a default value of 72 - Update propTypes and defaultProps for both components
leemonade · Sep 13, 2024 · 9211db6 · 9211db6
1 parent 7cb977f
commit 9211db6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js b/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js
@@ -10,6 +10,7 @@ import { ImageLoader } from '../../misc/ImageLoader';
 import { ImagePreviewInputStyles } from './ImagePreviewInput.styles';
 
 export const IMAGE_PREVIEW_INPUT_DEFAULT_PROPS = {
+  hideChangeButton: false,
   labels: {
     changeImage: '',
     uploadButton: '',
@@ -36,6 +37,8 @@ export const IMAGE_PREVIEW_INPUT_PROP_TYPES = {
   objectFit: PropTypes.string,
   width: PropTypes.number,
   height: PropTypes.number,
+  hideChangeButton: PropTypes.bool,
+  onShowDrawer: PropTypes.func,
 };
 
 const ImagePreviewInput = ({
@@ -53,6 +56,7 @@ const ImagePreviewInput = ({
   objectFit,
   width,
   height,
+  hideChangeButton,
 }) => {
   const [imagePreview, setImagePreview] = useState(previewURL);
   const [imageValue, setImageValue] = useState(value);
@@ -144,16 +148,18 @@ const ImagePreviewInput = ({
               >
                 {labels.removeButton}
               </Button>
-              <Button
-                variant="link"
-                size="sm"
-                compact
-                leftIcon={<SynchronizeArrowsIcon />}
-                onClick={handleShowDrawer}
-                useAria={useAria}
-              >
-                {labels.changeImage}
-              </Button>
+              {!hideChangeButton && (
+                <Button
+                  variant="link"
+                  size="sm"
+                  compact
+                  leftIcon={<SynchronizeArrowsIcon />}
+                  onClick={handleShowDrawer}
+                  useAria={useAria}
+                >
+                  {labels.changeImage}
+                </Button>
+              )}
             </Box>
           ) : null}
         </Stack>

diff --git a/...omponents/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js b/...omponents/src/layout/TotalLayout/TotalLayoutFooterContainer/TotalLayoutFooterContainer.js
@@ -15,6 +15,7 @@ const TotalLayoutFooterContainer = ({
   showFooterBorder: _showFooterBorder,
   style,
   width,
+  height = 72,
   clean,
   rectRef,
   skipOffset,
@@ -86,7 +87,7 @@ const TotalLayoutFooterContainer = ({
   return (
     <Stack justifyContent="center" fullWidth>
       <Box className={classes.footer} style={{ ...style, ...footerStyles }}>
-        <Stack fullWidth style={{ height: 72, padding: clean ? 0 : '16px 24px' }}>
+        <Stack fullWidth style={{ height, padding: clean ? 0 : '16px 24px' }}>
           <Stack direction="row" spacing={2} noFlex>
             {leftZone}
           </Stack>
@@ -100,7 +101,9 @@ const TotalLayoutFooterContainer = ({
   );
 };
 
-TotalLayoutFooterContainer.defaultProps = {};
+TotalLayoutFooterContainer.defaultProps = {
+  height: 72,
+};
 TotalLayoutFooterContainer.propTypes = {
   leftOffset: PropTypes.number,
   scrollRef: PropTypes.any,
@@ -112,6 +115,7 @@ TotalLayoutFooterContainer.propTypes = {
   showFooterBorder: PropTypes.bool,
   style: PropTypes.object,
   width: PropTypes.number,
+  height: PropTypes.number,
   clean: PropTypes.bool,
   rectRef: PropTypes.object,
   skipOffset: PropTypes.bool,