Merge pull request #216 from Saifullah-dev/214-feat/className-style-props

feat: add className and style props to FileManager component for cust…

Author: Saifullah-dev

frontend/src/FileManager/FileManager.jsx

@@ -53,6 +53,8 @@ const FileManager = ({
   permissions: userPermissions = {},
   collapsibleNav = false,
   defaultNavExpanded = true,
+  className = "",
+  style = {},
 }) => {
   const [isNavigationPaneOpen, setNavigationPaneOpen] = useState(defaultNavExpanded);
   const triggerAction = useTriggerAction();
@@ -71,7 +73,11 @@ const FileManager = ({
   );
 
   return (
-    <main className="file-explorer" onContextMenu={(e) => e.preventDefault()} style={customStyles}>
+    <main
+      className={`file-explorer ${className}`}
+      onContextMenu={(e) => e.preventDefault()}
+      style={{ ...customStyles, ...style }}
+    >
       <Loader loading={isLoading} />
       <TranslationProvider language={language}>
         <FilesProvider filesData={files} onError={onError}>
@@ -209,6 +215,8 @@ FileManager.propTypes = {
   }),
   collapsibleNav: PropTypes.bool,
   defaultNavExpanded: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
 };
 
 export default FileManager;

frontend/src/FileManager/FileManager.scss

@@ -34,12 +34,13 @@ svg {
   height: 100%;
   width: 100%;
   font-family: var(--file-manager-font-family);
+  border: 1px solid $border-color;
+  border-radius: 8px;
 
   button {
     font-family: var(--file-manager-font-family);
   }
 
-  border-radius: 8px;
   position: relative;
   background-color: white;
   cursor: default;