[FEAT]: Add context provider feature to all components

Author: JinSSJ3

src/files-ui/components/dropzone/DropzoneRipple.scss

@@ -1,5 +1,5 @@
 // RIPPLE
-.dropzone-ui-base-ripple-absolute {
+.filesui-base-ripple-absolute {
   position: absolute;
   display: none;
   width: 100%;
@@ -9,7 +9,7 @@
   box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
-  .dropzone-ui-base-ripple-relative {
+  .filesui-base-ripple-relative {
     width: 100%;
     height: 100%;
     position: relative;

src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.scss

@@ -1,4 +1,4 @@
-.dropzone-ui-disabled-root{
+.filesui-disabled-root{
     position: absolute;
     width: 100%;
     height: 100%;

src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.tsx

@@ -36,7 +36,7 @@ const DropzoneDisabledLayer: React.FC<DropzoneDisabledLayerProps> = (
     handleDropUtil(evt);
   };
   const finalDisabledLayerClassName: string = addClassName(
-    "dropzone-ui-disabled-root",
+    "filesui-disabled-root",
     className
   );
   if (open) {

src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx

@@ -28,6 +28,7 @@ import {
   unexpectedErrorUploadResult,
   getRandomInt,
   addClassName,
+  Localization,
 } from "../../../../core";
 import { mergeProps } from "../../../overridable";
 import InputHidden from "../../../input-hidden/InputHidden";
@@ -54,7 +55,13 @@ import DropzoneHeader from "../DropzoneHeader/DropzoneHeader";
 import DropzoneFooter from "../DropzoneFooter/DropzoneFooter";
 import DropzoneButtons from "../DropzoneButtons/DropzoneButtons";
 import { completeAsureColor } from "../../../../core";
-import { createFuiRippleFromDiv, handleClickInput, handleDragUtil, handleDropUtil } from "../../../../files-ui-react/utils";
+import {
+  createFuiRippleFromDiv,
+  handleClickInput,
+  handleDragUtil,
+  handleDropUtil,
+} from "../../../../files-ui-react/utils";
+import { FilesUiContext } from "../../../../FilesUiProvider/FilesUiContext";
 
 //import { print_manager } from "../../../../../utils";
 
@@ -86,7 +93,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     //label
     label,
     //localization
-    localization,
+    localization: locProps,
     //ripple
     disableRipple,
     //drag operations
@@ -113,6 +120,15 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     ...rest
   } = mergeProps(props, defaultDrozoneProps);
 
+  //context
+  const {
+    // darkMode: darkModeContext,
+    //icons,
+    localization: locContext,
+  } = React.useContext(FilesUiContext);
+  const localization: Localization | undefined =
+    locProps !== undefined ? locProps : locContext;
+
   const {
     url,
     method,
@@ -521,14 +537,14 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     //if (isUploading) return;
     let fileList: FileList = evt.target.files as FileList;
     let extFileListOutput: ExtFile[] = fileListToExtFileArray(fileList);
-    //validate dui files
+    //validate ext files
     if (validateFilesFlag) {
       extFileListOutput = outerFuiValidation(extFileListOutput);
       if (autoClean) {
         extFileListOutput = extFileListOutput.filter((f) => f.valid);
       }
     }
-    //init xhr on each dui file
+    //init xhr on each ext file
     if (url) extFileListOutput = toUploadableExtFileList(extFileListOutput);
 
     // Clean input element to trigger onChange event on input
@@ -646,7 +662,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
       }
     }
 
-    //init xhr on each dui file
+    //init xhr on each ext file
     if (url) extFileListOutput = toUploadableExtFileList(extFileListOutput);
 
     handleFilesChange(extFileListOutput);
@@ -723,12 +739,12 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
         {!disableRipple && (
           <div
             ref={fuiRippleRefAbs}
-            className="dropzone-ui-base-ripple-absolute"
+            className="filesui-base-ripple-absolute"
             style={{ borderRadius: style?.borderRadius }}
           >
             <div
               ref={fuiRippleRefRel}
-              className="dropzone-ui-base-ripple-relative"
+              className="filesui-base-ripple-relative"
             ></div>
           </div>
         )}

src/files-ui/components/file-card/FileCard.tsx

@@ -6,6 +6,7 @@ import "./components/FileCardPaper.scss";
 import {
   fileSizeFormater,
   getLocalFileItemData,
+  Localization,
   //handleClickUtil,
   shrinkWord,
 } from "../../core";
@@ -84,7 +85,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
 
     xhr,
 
-    localization,
+    localization:locProps,
     preview,
     imageUrl,
     videoUrl,
@@ -115,9 +116,16 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
     //} = mergeProps(props, FileCardPropsDefault);
   } = props;
   //context
-  const { darkMode: darkModeContext, icons } = React.useContext(FilesUiContext);
+  const {
+    darkMode: darkModeContext,
+    icons,
+    localization: locContext,
+  } = React.useContext(FilesUiContext);
+  const localization: Localization | undefined =
+    locProps !== undefined ? locProps : locContext;
   const darkMode: boolean | undefined =
     darkModeProp !== undefined ? darkModeProp : darkModeContext;
+  console.log("globalConfig", darkMode, icons);
 
   //ref for anchor element
   const downloadRef = React.useRef<HTMLAnchorElement>(null);

src/files-ui/components/file-input-button/FileInputButton.tsx

@@ -14,6 +14,7 @@ import {
   instantPreparingToUploadOne,
   isUploadAbleExtFile,
   isValidateActive,
+  Localization,
   LocalLabels,
   sanitizeArrExtFile,
   sleepPreparing,
@@ -26,6 +27,7 @@ import {
   validateExtFileList,
 } from "../../core";
 import { handleClickInput } from "../../files-ui-react/utils";
+import { FilesUiContext } from "../../FilesUiProvider/FilesUiContext";
 import useDropzoneFileListUpdater from "../../hooks/useDropzoneFileUpdater";
 import { DropzoneActions } from "../dropzone/components/dropzone/DropzoneProps";
 import DropzoneButtons from "../dropzone/components/DropzoneButtons/DropzoneButtons";
@@ -68,7 +70,7 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
     //label
     label,
     //localization
-    localization,
+    localization: locProps,
     //ripple
     disableRipple,
     //action butotns
@@ -91,8 +93,19 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
 
     variant,
     resetStyles,
+    darkMode: darkModeProp,
     ...rest
   } = mergeProps(props, defaultFileInputButtonProps);
+  //context
+  const {
+    darkMode: darkModeContext,
+    //icons,
+    localization: locContext,
+  } = React.useContext(FilesUiContext);
+  const localization: Localization | undefined =
+    locProps !== undefined ? locProps : locContext;
+  const darkMode: boolean | undefined =
+    darkModeProp !== undefined ? darkModeProp : darkModeContext;
 
   const {
     url,
@@ -518,6 +531,7 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
         resetStyles={resetStyles}
         onClick={handleClick}
         disableRipple={disableRipple}
+        darkMode={darkMode}
         {...rest}
       >
         {children || label}

src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.scss

@@ -1,4 +1,4 @@
-.dui-file-item-size {
+.filesui-file-item-size {
   box-sizing: border-box;
   font-size: 0.7rem;
   border: 0.5px solid wheat;

src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.tsx

@@ -10,7 +10,7 @@ const FileMosaicSize: React.FC<FileItemSizeProps> = (
   return (
     <React.Fragment>
       {sizeFormatted && (
-        <div className="dui-file-item-size">{sizeFormatted}</div>
+        <div className="filesui-file-item-size">{sizeFormatted}</div>
       )}
     </React.Fragment>
   );

src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx

@@ -3,6 +3,7 @@ import {
   addClassName,
   fileSizeFormater,
   getLocalFileItemData,
+  Localization,
   //handleClickUtil,
 } from "../../../../core";
 import "./FileMosaic.scss";
@@ -43,7 +44,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
 
     xhr,
 
-    localization,
+    localization: locProps,
     preview,
     imageUrl,
     videoUrl,
@@ -72,7 +73,13 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
   } = props;
 
   //context
-  const { darkMode: darkModeContext, icons } = React.useContext(FilesUiContext);
+  const {
+    darkMode: darkModeContext,
+    icons,
+    localization: locContext,
+  } = React.useContext(FilesUiContext);
+  const localization: Localization | undefined =
+    locProps !== undefined ? locProps : locContext;
   const darkMode: boolean | undefined =
     darkModeProp !== undefined ? darkModeProp : darkModeContext;
   console.log("globalConfig", darkMode, icons);

src/files-ui/components/icons/UploadingProcess/UploadingProcess.scss

@@ -1,4 +1,4 @@
-@keyframes dui-rotate-spin {
+@keyframes filesui-rotate-spin {
   from {
     transform: rotate(0deg);
   }
@@ -7,12 +7,12 @@
     transform: rotate(360deg);
   }
 }
-.dui-rotate {
+.filesui-rotate {
   cursor: default;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .dui-rotate {
-    animation: dui-rotate-spin infinite 2s linear;
+  .filesui-rotate {
+    animation: filesui-rotate-spin infinite 2s linear;
   }
 }