[FEAT]: Add headerClassName and footerClassName for overriding css styles on header and footer in dropzone component. Added due to feature request on issue #514

Author: JinSSJ3

src/components/dropzone/components/Dropzone/Dropzone.tsx

@@ -70,6 +70,8 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     fakeUploading,
     localization,
     disableScroll,
+    footerClassName,
+    headerClassName
   } = mergeProps(props, DropzonePropsDefault);
   //ref for ripple
   const dz_ui_ripple_ref = React.useRef<HTMLDivElement>(null);

src/components/dropzone/components/Dropzone/DropzoneProps.ts

@@ -202,6 +202,16 @@ export interface DropzoneProps extends OverridableProps {
    * and sets the Dropzone in a grid view
    */
   disableScroll?: boolean;
+  /**
+   * The classname to override the header css styles
+   * on .css or .sass files
+   */
+  headerClassName?: string;
+  /**
+   * The classname to override the footer css styles
+   * on .css or .sass files
+   */
+  footerClassName?: string;
 }
 
 export const DropzonePropsDefault: DropzoneProps = {
@@ -231,7 +241,7 @@ export const DropzonePropsDefault: DropzoneProps = {
   behaviour: "add",
   label: undefined,
   localization: "EN-en",
-  disableScroll:undefined
+  disableScroll: undefined
 };
 
 

src/components/dropzone/components/DropzoneFooter.tsx/DropzoneFooter.tsx

@@ -7,17 +7,22 @@ import {
 import { DropzoneFooterProps } from "./DropzoneFooterProps";
 
 const DropzoneFooter: React.FC<DropzoneFooterProps> = (
-  props: DropzoneFooterProps
+  props: DropzoneFooterProps,
 ) => {
-  const { accept, message, localization } = props;
+  const { accept, message, localization, footerClassName } = props;
 
   const DropzoneFooterLocalizer: LocalLabels = DropzoneLocalizerSelector(
-    localization
+    localization,
   ).footer as LocalLabels;
   const accepCustomMessenger: FunctionLabel =
     DropzoneFooterLocalizer.acceptCustom as FunctionLabel;
   return (
-    <div className="dz-ui-footer" onClick={undefined}>
+    <div
+      className={
+        footerClassName ? `dz-ui-footer ${footerClassName}` : "dz-ui-footer"
+      }
+      onClick={undefined}
+    >
       <>
         {message
           ? message

src/components/dropzone/components/DropzoneFooter.tsx/DropzoneFooterProps.ts

@@ -9,4 +9,9 @@ export interface DropzoneFooterProps {
     * only English and Spanish is supported
     */
     localization?: Localization;
+    /**
+     * The classname to override the footer css styles
+     * on .css or .sass files
+     */
+    footerClassName?: string;
 }

src/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx

@@ -33,10 +33,15 @@ export interface DropzoneHeaderProps {
    */
   localization?: Localization;
   hideViewIcon?: boolean;
+  /**
+   * The classname to override the header css styles
+   * on .css or .sass files
+   */
+  headerClassName?: string;
 }
 
 const DropzoneHeader: FC<DropzoneHeaderProps> = (
-  props: DropzoneHeaderProps
+  props: DropzoneHeaderProps,
 ) => {
   const {
     maxFileSize,
@@ -51,10 +56,11 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
     urlPresent,
     localization,
     hideViewIcon,
+    headerClassName,
   } = props;
 
   const DropzoneHeaderLocalizer: LocalLabels = DropzoneLocalizerSelector(
-    localization
+    localization,
   ).header as LocalLabels;
 
   const handleClean = () => {
@@ -77,7 +83,7 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
 
               <Upload color="#646c7f" onClick={handleStartUploading} />
             </>
-          </Fragment>
+          </Fragment>,
         );
       }
 
@@ -88,7 +94,7 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
       DropzoneHeaderLocalizer.maxSizeMessage as FunctionLabel;
     if (maxFileSize) {
       result.push(
-        maxFileSizeMessenger(fileSizeFormater(maxFileSize))
+        maxFileSizeMessenger(fileSizeFormater(maxFileSize)),
 
         /* localization === "ES-es"
           ? `Tam. máximo de archivo ${fileSizeFormater(maxFileSize)} | `
@@ -101,7 +107,7 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
 
     if (maxFiles) {
       result.push(
-        validFileSizeMessenger(numberOfValidFiles as number, maxFiles)
+        validFileSizeMessenger(numberOfValidFiles as number, maxFiles),
         /*  localization === "ES-es"
           ? `Archivos ${numberOfValidFiles}/${maxFiles} | Válidos: ${numberOfValidFiles} | `
           : `Files ${numberOfValidFiles}/${maxFiles} | Valid: ${numberOfValidFiles} | `, */
@@ -111,7 +117,7 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
     //clean not valid files on click
     if (onClean) {
       result.push(
-        <Clean color="#646c7f" onClick={handleClean} size="semi-medium" />
+        <Clean color="#646c7f" onClick={handleClean} size="semi-medium" />,
       );
     }
 
@@ -133,7 +139,7 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
               color="#646c7f"
             />
           )}
-        </>
+        </>,
       );
     }
 
@@ -144,14 +150,16 @@ const DropzoneHeader: FC<DropzoneHeaderProps> = (
           //color="rgba(255,255,255,0.8)"
           onClick={() => onReset?.()}
           colorFill="rgba(255,255,255,0.8)"
-        />
+        />,
       );
     }
     return result;
   };
   return (
     <div
-      className="dz-ui-header"
+      className={
+        headerClassName ? `dz-ui-header ${headerClassName}` : "dz-ui-header"
+      }
       onClick={(e) => {
         e.stopPropagation();
       }}