From 2f848cd51e8c48d7663583a34abf51866da882e8 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Thu, 23 Mar 2023 16:23:58 -0500
Subject: [PATCH] [REF]: Refactor for moving logic of drag drop and click utils
to a folder outside core
---
.../FilesUiProvider/FilesUiContextType.ts | 20 ++++-
.../download-hidden/DownloadHidden.tsx | 3 +-
.../DropzoneDisabledLayer.tsx | 17 +++-
.../DropzoneFooter/DropzoneFooter.tsx | 5 +-
.../dropzone/components/dropzone/Dropzone.tsx | 7 +-
.../components/file-card/FileCard.tsx | 19 +++--
.../file-input-button/FileInputButton.tsx | 5 +-
.../components/file-mosaic/FileMosaic.tsx | 3 +-
.../components/icons/Cancel/Cancel.tsx | 2 +-
src/files-ui/components/icons/Clear/Clear.tsx | 2 +-
.../components/icons/CloudDone/CloudDone.tsx | 2 +-
.../icons/DownloadFile/DownloadFile.tsx | 2 +-
.../components/icons/InfoBlack/InfoBlack.tsx | 2 +-
.../icons/InfoDisney/InfoDisney.tsx | 2 +-
.../components/icons/Person/Person.tsx | 2 +-
.../icons/PhotoCamera/PhotoCamera.tsx | 2 +-
.../components/icons/Play/PlayIcon.tsx | 2 +-
.../components/icons/Remove/Remove.tsx | 2 +-
.../components/icons/Remove/RemoveOutline.tsx | 2 +-
.../icons/Visibility/Visibility.tsx | 2 +-
.../files-ui-react/utils/click.utils.ts | 24 ++++++
.../files-ui-react/utils/dragdrop.utils.ts | 21 +++++
src/files-ui/files-ui-react/utils/index.ts | 4 +
.../files-ui-react/utils/ripple/index.ts | 1 +
.../files-ui-react/utils/ripple/ripple.ts | 81 +++++++++++++++++++
25 files changed, 198 insertions(+), 36 deletions(-)
create mode 100644 src/files-ui/files-ui-react/utils/click.utils.ts
create mode 100644 src/files-ui/files-ui-react/utils/dragdrop.utils.ts
create mode 100644 src/files-ui/files-ui-react/utils/index.ts
create mode 100644 src/files-ui/files-ui-react/utils/ripple/index.ts
create mode 100644 src/files-ui/files-ui-react/utils/ripple/ripple.ts
diff --git a/src/files-ui/FilesUiProvider/FilesUiContextType.ts b/src/files-ui/FilesUiProvider/FilesUiContextType.ts
index 4f848a9..014def9 100644
--- a/src/files-ui/FilesUiProvider/FilesUiContextType.ts
+++ b/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;
\ No newline at end of file
+export type IconsConfig = IconsMap;
\ No newline at end of file
diff --git a/src/files-ui/components/download-hidden/DownloadHidden.tsx b/src/files-ui/components/download-hidden/DownloadHidden.tsx
index 9596cac..966c226 100644
--- a/src/files-ui/components/download-hidden/DownloadHidden.tsx
+++ b/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
diff --git a/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.tsx b/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.tsx
index 16677b3..5eb7f2a 100644
--- a/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.tsx
+++ b/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
diff --git a/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx b/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx
index ccf25a7..5d5ac60 100644
--- a/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx
+++ b/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
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index 7ceae5a..1dcddf1 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/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";
diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
index 25a19eb..9dbd635 100644
--- a/src/files-ui/components/file-card/FileCard.tsx
+++ b/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);
diff --git a/src/files-ui/components/file-input-button/FileInputButton.tsx b/src/files-ui/components/file-input-button/FileInputButton.tsx
index b3e276d..4f257e1 100644
--- a/src/files-ui/components/file-input-button/FileInputButton.tsx
+++ b/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;
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
index 8700e91..a80ff71 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
+++ b/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 {
diff --git a/src/files-ui/components/icons/Cancel/Cancel.tsx b/src/files-ui/components/icons/Cancel/Cancel.tsx
index 77709d1..a6fc7b4 100644
--- a/src/files-ui/components/icons/Cancel/Cancel.tsx
+++ b/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;
diff --git a/src/files-ui/components/icons/Clear/Clear.tsx b/src/files-ui/components/icons/Clear/Clear.tsx
index d3d0203..45999d5 100644
--- a/src/files-ui/components/icons/Clear/Clear.tsx
+++ b/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;
diff --git a/src/files-ui/components/icons/CloudDone/CloudDone.tsx b/src/files-ui/components/icons/CloudDone/CloudDone.tsx
index 637cd27..c279285 100644
--- a/src/files-ui/components/icons/CloudDone/CloudDone.tsx
+++ b/src/files-ui/components/icons/CloudDone/CloudDone.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { CloudDoneProps } from "./CloudDoneProps";
-import { handleClickUtil } from "../../../core";
+import { handleClickUtil } from "../../../files-ui-react/utils";
const CloudDone: React.FC<CloudDoneProps> = (props: CloudDoneProps) => {
const { size, color, colorFill, onClick, style, className } = props;
diff --git a/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx b/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx
index b2fd994..bce0da9 100644
--- a/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx
+++ b/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx
@@ -1,5 +1,5 @@
import * as React from "react";
-import { handleClickUtil } from "../../../core";
+import { handleClickUtil } from "../../../files-ui-react/utils";
import { parseSize } from "../utils/utils";
import { DownloadFileProps } from "./DownloadFileProps";
diff --git a/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx b/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx
index 025f2fc..cb37bfe 100644
--- a/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx
+++ b/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { InfoBlackProps } from "./InfoBlackProps";
-import { handleClickUtil } from "../../../core";
+import { handleClickUtil } from "../../../files-ui-react/utils";
const InfoBlack: React.FC<InfoBlackProps> = (props: InfoBlackProps) => {
const { size, color, colorFill, onClick, style, className } = props;
diff --git a/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx b/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx
index 2872875..80b9e2a 100644
--- a/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx
+++ b/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { InfoDisneyProps } from "./InfoDisneyProps";
-import { handleClickUtil } from "../../../core";
+import { handleClickUtil } from "../../../files-ui-react/utils";
const InfoDisney: React.FC<InfoDisneyProps> = (props: InfoDisneyProps) => {
const {
diff --git a/src/files-ui/components/icons/Person/Person.tsx b/src/files-ui/components/icons/Person/Person.tsx
index a80ab2e..fe87a3f 100644
--- a/src/files-ui/components/icons/Person/Person.tsx
+++ b/src/files-ui/components/icons/Person/Person.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { PersonProps } from "./PersonProps";
-import { handleClickUtil } from "../../../core";
+import { handleClickUtil } from "../../../files-ui-react/utils";
const Person: React.FC<PersonProps> = (props: PersonProps) => {
const { size, color, colorFill, onClick, style, className } = props;
diff --git a/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx b/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx
index 220897f..b7a70ff 100644
--- a/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx
+++ b/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { PhotoCameraProps } from "./PhotoCameraProps";
-import { handleClickUtil } from "../../../core";
+import { handleClickUtil } from "../../../files-ui-react/utils";
const PhotoCamera: React.FC<PhotoCameraProps> = (props: PhotoCameraProps) => {
const { size, color, colorFill, onClick, style, className } = props;
diff --git a/src/files-ui/components/icons/Play/PlayIcon.tsx b/src/files-ui/components/icons/Play/PlayIcon.tsx
index 690eb31..b37b94f 100644
--- a/src/files-ui/components/icons/Play/PlayIcon.tsx
+++ b/src/files-ui/components/icons/Play/PlayIcon.tsx
@@ -1,7 +1,7 @@
import React, { FC } from "react";
import { parseSize } from "../utils/utils";
import { PlayIconProps } from "./PlayIconProps";
-import { handleClickUtil } from "../../../core";
+import { handleClickUtil } from "../../../files-ui-react/utils";
const PlayIcon: FC<PlayIconProps> = (props: PlayIconProps) => {
const { size, color, colorFill, onClick, style, className } = props;
diff --git a/src/files-ui/components/icons/Remove/Remove.tsx b/src/files-ui/components/icons/Remove/Remove.tsx
index ee6ebd8..83cf251 100644
--- a/src/files-ui/components/icons/Remove/Remove.tsx
+++ b/src/files-ui/components/icons/Remove/Remove.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { RemoveProps } from "./RemoveProps";
-import { handleClickUtil } from "../../../core";
+import { handleClickUtil } from "../../../files-ui-react/utils";
const Remove: React.FC<RemoveProps> = (props: RemoveProps) => {
const { size, color, colorFill, onClick, style, className } = props;
diff --git a/src/files-ui/components/icons/Remove/RemoveOutline.tsx b/src/files-ui/components/icons/Remove/RemoveOutline.tsx
index a1d6068..526995f 100644
--- a/src/files-ui/components/icons/Remove/RemoveOutline.tsx
+++ b/src/files-ui/components/icons/Remove/RemoveOutline.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { RemoveProps } from "./RemoveProps";
-import { handleClickUtil } from "../../../core";
+import { handleClickUtil } from "../../../files-ui-react/utils";
const RemoveOutline: React.FC<RemoveProps> = (props: RemoveProps) => {
const { size, color, colorFill, onClick, style, className } = props;
diff --git a/src/files-ui/components/icons/Visibility/Visibility.tsx b/src/files-ui/components/icons/Visibility/Visibility.tsx
index 539862e..d7d9e41 100644
--- a/src/files-ui/components/icons/Visibility/Visibility.tsx
+++ b/src/files-ui/components/icons/Visibility/Visibility.tsx
@@ -1,7 +1,7 @@
import React, { FC } from "react";
import { parseSize } from "../utils/utils";
import { VisibilityProps } from "./VisibilityProps";
-import { handleClickUtil } from "../../../core";
+import { handleClickUtil } from "../../../files-ui-react/utils";
const Visibility: FC<VisibilityProps> = (props: VisibilityProps) => {
const { size, color, colorFill, onClick, style, className } = props;
diff --git a/src/files-ui/files-ui-react/utils/click.utils.ts b/src/files-ui/files-ui-react/utils/click.utils.ts
new file mode 100644
index 0000000..a91e6a9
--- /dev/null
+++ b/src/files-ui/files-ui-react/utils/click.utils.ts
@@ -0,0 +1,24 @@
+/**
+ * Performs stopPropagation and preventDefault functions on an click event instance
+ * @param evt click event handler object
+ */
+export function
+ handleClickUtil<T extends HTMLDivElement | HTMLButtonElement | HTMLAnchorElement | SVGSVGElement | HTMLInputElement>
+ (
+ evt: React.MouseEvent<T, MouseEvent>
+ ) {
+ evt.preventDefault();
+ evt.stopPropagation();
+}
+/**
+ * Click programatically an input element.
+ * If the input element is null, nothing will happend
+ * @param input the input element target to make a click
+ */
+export const handleClickInput = (
+ input: HTMLInputElement | null
+) => {
+ console.log("handleClickInput:", input);
+ if (!input) return;
+ input.click();
+}
\ No newline at end of file
diff --git a/src/files-ui/files-ui-react/utils/dragdrop.utils.ts b/src/files-ui/files-ui-react/utils/dragdrop.utils.ts
new file mode 100644
index 0000000..9a04abb
--- /dev/null
+++ b/src/files-ui/files-ui-react/utils/dragdrop.utils.ts
@@ -0,0 +1,21 @@
+/**
+ * Performs stopPropagation and preventDefault functions on an drop event instance
+ * @param evt drag event handler object
+ */
+export const handleDropUtil: React.DragEventHandler<HTMLDivElement> = (
+ evt: React.DragEvent<HTMLDivElement>
+) => {
+ evt.stopPropagation();
+ evt.preventDefault();
+};
+/**
+ * Performs stopPropagation and preventDefault functions on an drop event instance
+ * and also specifies that the drop effect is link
+ * @param evt drag event handler object
+ */
+export const handleDragUtil: React.DragEventHandler<HTMLDivElement> = (
+ evt: React.DragEvent<HTMLDivElement>
+) => {
+
+ evt.dataTransfer.dropEffect = "link"; handleDropUtil(evt);
+};
\ No newline at end of file
diff --git a/src/files-ui/files-ui-react/utils/index.ts b/src/files-ui/files-ui-react/utils/index.ts
new file mode 100644
index 0000000..10f6843
--- /dev/null
+++ b/src/files-ui/files-ui-react/utils/index.ts
@@ -0,0 +1,4 @@
+export { handleDragUtil, handleDropUtil } from "./dragdrop.utils";
+export { handleClickInput, handleClickUtil } from "./click.utils";
+
+export { createFuiRippleFromDiv, createRippleButton } from "./ripple";
diff --git a/src/files-ui/files-ui-react/utils/ripple/index.ts b/src/files-ui/files-ui-react/utils/ripple/index.ts
new file mode 100644
index 0000000..62b0479
--- /dev/null
+++ b/src/files-ui/files-ui-react/utils/ripple/index.ts
@@ -0,0 +1 @@
+export { createFuiRippleFromDiv,createRippleButton } from "./ripple";
\ No newline at end of file
diff --git a/src/files-ui/files-ui-react/utils/ripple/ripple.ts b/src/files-ui/files-ui-react/utils/ripple/ripple.ts
new file mode 100644
index 0000000..28a73f3
--- /dev/null
+++ b/src/files-ui/files-ui-react/utils/ripple/ripple.ts
@@ -0,0 +1,81 @@
+import { completeAsureColor, hexColorToRGB } from "../../../core";
+
+const asureRippleColor = (color: string): string => {
+ return completeAsureColor(color,
+ 0.4
+ );
+}
+
+
+export function createFuiRippleFromDiv
+ <T extends HTMLButtonElement | HTMLAnchorElement | HTMLDivElement>
+ (
+ fuiContainerAbs: T | null,
+ fuiContainerRel: T | null,
+ color: string
+ ) {
+ if (!fuiContainerRel || !fuiContainerAbs) return;
+
+ fuiContainerAbs.style.display = "block";
+ //removeRippleIfExist(fuiContainerRel, "dui-ripple");
+ // creating the span circle ripple
+ const circle: HTMLSpanElement = document.createElement("span");
+ //for searching
+ circle.id = "dui-ripple";
+ //for styles
+ circle.className = "ripple";
+ // calculates the diameter
+ const diameter: number = Math.max(
+ fuiContainerRel.clientWidth,
+ fuiContainerRel.clientHeight
+ );
+
+ //const rippleCircleRadius: number = diameter / 2;
+
+ //console.log("w,h", fuiContainerRel.clientWidth, fuiContainerRel.clientHeight);
+
+ circle.style.width = circle.style.height = `${diameter}px`;
+ circle.style.backgroundColor = asureRippleColor(color);
+
+ fuiContainerRel.appendChild(circle);
+ //remove trash
+ setTimeout(() => {
+ fuiContainerAbs.style.display = "none";
+ circle?.remove();
+ }, 501);
+}
+
+
+export function createRippleButton<
+ T extends HTMLButtonElement | HTMLAnchorElement | HTMLDivElement
+>(event: React.MouseEvent<T, MouseEvent>, variant: string, color: string) {
+ const buttonAnchorDiv = event.currentTarget;
+
+ const circle: HTMLSpanElement = document.createElement("span");
+
+ const diameter = Math.max(
+ buttonAnchorDiv.clientWidth,
+ buttonAnchorDiv.clientHeight
+ );
+ //const radius = diameter / 2;
+
+ circle.style.width = circle.style.height = `${diameter}px`;
+ /* circle.style.left = `${event.clientX - radius
+ }px`;
+ circle.style.top = `${event.clientY - radius
+ }px`; */
+
+ circle.classList.add("ripple");
+
+ if (variant !== "contained") {
+ circle.style.backgroundColor = asureRippleColor(color);
+ } else {
+
+ circle.style.backgroundColor = hexColorToRGB("#ffffff", 0.4);
+ }
+ buttonAnchorDiv.appendChild(circle);
+
+ setTimeout(() => {
+ circle?.remove();
+ }, 501);
+}
\ No newline at end of file
--
GitLab