[REF]: Refactor for moving logic of drag drop and click utils to a folder outside core

Author: JinSSJ3

src/files-ui/FilesUiProvider/FilesUiContextType.ts

@@ -1,8 +1,20 @@
-import { IconsMap } from "../core";
+import { IconsMap, Localization } from "../core";
 
 export type FilesUiConfig = {
-    darkMode?:boolean;
-    icons?:IconsConfig;
+    /**
+     * If true, dark mode colors are used in FileMosaic and FIleCard components.
+     */
+    darkMode?: boolean;
+    /**
+     * Set of icons to override the existing ones
+     */
+    icons?: IconsConfig;
+    /**
+     * The language in which text labels are shown.
+     * @default "EN-en"
+     */
+    localization?: Localization;
+    //fontFamily?:string;
 }
 
-export type IconsConfig=IconsMap;
+export type IconsConfig = IconsMap;

src/files-ui/components/download-hidden/DownloadHidden.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { handleClickUtil } from "../../core";
+//import { handleClickUtil } from "../../core";
 export type DownloadHiddenProps = {
   downloadUrl?: string;
   anchorRef: React.RefObject<HTMLAnchorElement>;
@@ -23,6 +23,7 @@ const DownloadHidden: React.FC<DownloadHiddenProps> = (
         href={downloadUrl}
         download={fileName}
         hidden
+        rel={"noopener noreferrer"}
         onClick={handleClick}
       >
         download_file

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

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { addClassName, handleClickUtil, handleDragUtil, handleDropUtil } from "../../../../core";
+import {
+  addClassName,
+  //handleClickUtil,
+  //handleDragUtil,
+  //handleDropUtil,
+} from "../../../../core";
+import { handleClickUtil, handleDragUtil, handleDropUtil } from "../../../../files-ui-react/utils";
 import "./DropzoneDisabledLayer.scss";
 export declare type DropzoneDisabledLayerProps = {
   open?: boolean;
@@ -24,12 +30,15 @@ const DropzoneDisabledLayer: React.FC<DropzoneDisabledLayerProps> = (
     handleDragUtil(evt);
   };
 
-  const handleDrop : React.DragEventHandler<HTMLDivElement> = async (
+  const handleDrop: React.DragEventHandler<HTMLDivElement> = async (
     evt: React.DragEvent<HTMLDivElement>
   ): Promise<void> => {
     handleDropUtil(evt);
-  }
-  const finalDisabledLayerClassName:string = addClassName("dropzone-ui-disabled-root",className);
+  };
+  const finalDisabledLayerClassName: string = addClassName(
+    "dropzone-ui-disabled-root",
+    className
+  );
   if (open) {
     return (
       <div

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

@@ -3,10 +3,11 @@ import {
   addClassName,
   DropzoneLocalizerSelector,
   FunctionLabel,
-  handleClickUtil,
+  //handleClickUtil,
   Localization,
   LocalLabels,
 } from "../../../../core";
+import { handleClickUtil } from "../../../../files-ui-react/utils";
 import { FooterConfig } from "../dropzone/DropzoneProps";
 
 export interface DropzoneFooterProps extends FooterConfig {
@@ -48,7 +49,7 @@ const DropzoneFooter: React.FC<DropzoneFooterProps> = (
   }
   const finalClassName = resetStyles
     ? className
-    : addClassName("files-ui-footer" + " " + firstClassName, className);
+    : addClassName(`files-ui-footer ${firstClassName}`, className);
 
   const finalStyle = resetStyles
     ? style

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

@@ -7,10 +7,10 @@ import {
   validateExtFileList,
   FileValidatorProps,
   isValidateActive,
-  handleClickInput,
-  handleDragUtil,
+  //handleClickInput,
+  //handleDragUtil,
   createFuiRippleFromDiv,
-  handleDropUtil,
+  //handleDropUtil,
   UploadConfig,
   ExtFileInstance,
   FunctionLabel,
@@ -54,6 +54,7 @@ import DropzoneHeader from "../DropzoneHeader/DropzoneHeader";
 import DropzoneFooter from "../DropzoneFooter/DropzoneFooter";
 import DropzoneButtons from "../DropzoneButtons/DropzoneButtons";
 import { completeAsureColor } from "../../../../core";
+import { handleClickInput, handleDragUtil, handleDropUtil } from "../../../../files-ui-react/utils";
 
 //import { print_manager } from "../../../../../utils";
 

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

@@ -3,7 +3,12 @@ import { FileCardProps } from "./FileCardProps";
 import "./FileCard.scss";
 import "./../icons/IconStyles.scss";
 import "./components/FileCardPaper.scss";
-import { fileSizeFormater, getLocalFileItemData, handleClickUtil, shrinkWord } from "../../core";
+import {
+  fileSizeFormater,
+  getLocalFileItemData,
+  //handleClickUtil,
+  shrinkWord,
+} from "../../core";
 import useProgress from "../file-mosaic/hooks/useProgress";
 import useFileMosaicInitializer from "../file-mosaic/hooks/useFileMosaicInitializer";
 import { useIsUploading } from "../file-mosaic/hooks/useIsUploading";
@@ -17,6 +22,7 @@ import FileCardUploadLayer from "./components/FileCardUploadLayer";
 import { Tooltip } from "../tooltip";
 import DownloadHidden from "../download-hidden/DownloadHidden";
 import { FilesUiContext } from "../../FilesUiProvider/FilesUiContext";
+import { handleClickUtil } from "../../files-ui-react/utils";
 
 const setFinalElevation = (elevation: string | number): number => {
   //  let finalElevation: number  = "";
@@ -84,7 +90,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
     videoUrl,
     info,
     backgroundBlurImage = true,
-    darkMode:darkModeProp,
+    darkMode: darkModeProp,
 
     alwaysActive = true,
 
@@ -108,11 +114,10 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
     smartImgFit = "orientation",
     //} = mergeProps(props, FileCardPropsDefault);
   } = props;
-//context
-const { darkMode: darkModeContext , icons} = React.useContext(FilesUiContext);
-const darkMode: boolean | undefined =
-  darkModeProp !== undefined ? darkModeProp : darkModeContext;
-
+  //context
+  const { darkMode: darkModeContext, icons } = React.useContext(FilesUiContext);
+  const darkMode: boolean | undefined =
+    darkModeProp !== undefined ? darkModeProp : darkModeContext;
 
   //ref for anchor element
   const downloadRef = React.useRef<HTMLAnchorElement>(null);

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

@@ -10,7 +10,7 @@ import {
   FileValidatorProps,
   getRandomInt,
   //FunctionLabel,
-  handleClickInput,
+  //handleClickInput,
   instantPreparingToUploadOne,
   isUploadAbleExtFile,
   isValidateActive,
@@ -25,6 +25,7 @@ import {
   //UploadResponse,
   validateExtFileList,
 } from "../../core";
+import { handleClickInput } from "../../files-ui-react/utils";
 import useDropzoneFileListUpdater from "../../hooks/useDropzoneFileUpdater";
 import { DropzoneActions } from "../dropzone/components/dropzone/DropzoneProps";
 import DropzoneButtons from "../dropzone/components/DropzoneButtons/DropzoneButtons";
@@ -459,7 +460,7 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
 
   // HANDLERS for CLICK
   function handleClick(): void {
-    console.log("HAAAAAAAA");
+    //console.log("HAAAAAAAA");
     //handleClickUtil(evt);
     if (disabled) return;
 

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

@@ -3,7 +3,7 @@ import {
   addClassName,
   fileSizeFormater,
   getLocalFileItemData,
-  handleClickUtil,
+  //handleClickUtil,
 } from "../../../../core";
 import "./FileMosaic.scss";
 import "./../../../icons/IconStyles.scss";
@@ -22,6 +22,7 @@ import useProgress from "../../hooks/useProgress";
 import DownloadHidden from "../../../download-hidden/DownloadHidden";
 import FileMosaicMainLayer from "../FileMosaicMainLayer.tsx/FileMosaicMainLayer";
 import { FilesUiContext } from "../../../../FilesUiProvider/FilesUiContext";
+import { handleClickUtil } from "../../../../files-ui-react/utils";
 
 const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
   const {

src/files-ui/components/icons/Cancel/Cancel.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { parseSize } from "../utils/utils";
 import { CancelProps } from "./CancelProps";
-import { handleClickUtil } from "../../../core";
+import { handleClickUtil } from "../../../files-ui-react/utils";
 
 const Cancel: React.FC<CancelProps> = (props: CancelProps) => {
   const { size, color, colorFill, onClick, style, className } = props;

src/files-ui/components/icons/Clear/Clear.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { parseSize } from "../utils/utils";
 import { ClearProps } from "./ClearProps";
-import { handleClickUtil } from "../../../core";
+import { handleClickUtil } from "../../../files-ui-react/utils";
 
 const Clear: React.FC<ClearProps> = (props: ClearProps) => {
   const { size, color, colorFill, onClick, style, className } = props;