From bbafc6f0bc12223a52692650458e2e2cc9e4d3d1 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Fri, 10 Mar 2023 12:20:19 -0500
Subject: [PATCH] [REF]: Add preventdefault in all icons, refactor file card
and mosaic for download also added stoppropagation. Add section for extra
components. [BUG]: chick <input/> is not workng
---
.../download-hidden/DownloadHidden.tsx | 10 ++-
.../components/file-card/FileCard.scss | 27 +++++++
.../components/file-card/FileCard.tsx | 72 +++++++++----------
.../components/FileCardRightActions.tsx | 2 +-
.../file-input-button/FileInputButton.tsx | 1 +
.../components/file-mosaic-layer/Layer.tsx | 12 +++-
.../components/file-mosaic/FileMosaic.scss | 3 +
.../components/file-mosaic/FileMosaic.tsx | 52 ++++++++------
.../components/icons/Cancel/Cancel.tsx | 6 +-
src/files-ui/components/icons/Clear/Clear.tsx | 6 +-
.../components/icons/CloudDone/CloudDone.tsx | 6 +-
.../icons/DownloadFile/DownloadFile.tsx | 6 +-
.../components/icons/InfoBlack/InfoBlack.tsx | 6 +-
.../icons/InfoDisney/InfoDisney.tsx | 6 +-
.../components/icons/Person/Person.tsx | 6 +-
.../icons/PhotoCamera/PhotoCamera.tsx | 6 +-
.../components/icons/Play/PlayIcon.tsx | 6 +-
.../components/icons/Remove/Remove.tsx | 6 +-
.../components/icons/Remove/RemoveOutline.tsx | 6 +-
.../icons/Visibility/Visibility.tsx | 6 +-
.../components/input-hidden/InputHidden.tsx | 7 ++
src/files-ui/core/download/downloadFile.ts | 17 +++++
src/files-ui/core/utils/click.utils.ts | 3 +-
23 files changed, 198 insertions(+), 80 deletions(-)
create mode 100644 src/files-ui/core/download/downloadFile.ts
diff --git a/src/files-ui/components/download-hidden/DownloadHidden.tsx b/src/files-ui/components/download-hidden/DownloadHidden.tsx
index 3c3150e..9596cac 100644
--- a/src/files-ui/components/download-hidden/DownloadHidden.tsx
+++ b/src/files-ui/components/download-hidden/DownloadHidden.tsx
@@ -1,4 +1,5 @@
import * as React from "react";
+import { handleClickUtil } from "../../core";
export type DownloadHiddenProps = {
downloadUrl?: string;
anchorRef: React.RefObject<HTMLAnchorElement>;
@@ -9,13 +10,20 @@ const DownloadHidden: React.FC<DownloadHiddenProps> = (
props: DownloadHiddenProps
) => {
const { downloadUrl, anchorRef, fileName } = props;
+ function handleClick<T extends HTMLAnchorElement>(
+ evt: React.MouseEvent<T, MouseEvent>
+ ): void {
+ evt.stopPropagation();
+ }
if (downloadUrl)
return (
<a
ref={anchorRef}
+ target={"_blank"}
href={downloadUrl}
download={fileName}
- style={{ display: "none" }}
+ hidden
+ onClick={handleClick}
>
download_file
</a>
diff --git a/src/files-ui/components/file-card/FileCard.scss b/src/files-ui/components/file-card/FileCard.scss
index a9c9ebd..5162e6e 100644
--- a/src/files-ui/components/file-card/FileCard.scss
+++ b/src/files-ui/components/file-card/FileCard.scss
@@ -126,6 +126,7 @@
}
.file-card-upload-layer-container {
+ cursor: default;
display: flex;
box-sizing: border-box;
//background-color: rgba(0, 0, 0, 0.5);
@@ -147,6 +148,8 @@
height: 100%;
}
.file-card-info-layer-container {
+ cursor: default;
+
display: flex;
box-sizing: border-box;
//background-color: rgba(0, 0, 0, 0.5);
@@ -211,4 +214,28 @@
}
}
}
+ &.clickable{
+ cursor: pointer;
+ }
}
+
+//// ICONS
+.files-ui-file-icon {
+ font-size: 0.7rem;
+ min-width: 19px;
+ min-height: 19px;
+ margin: 0;
+ padding: 2px 2px;
+ border-radius: 50%;
+ background-color: rgba(32, 33, 36, 0.65);
+ word-break: break-word;
+ &:hover {
+ background-color: rgba(32, 33, 36, 0.85);
+ }
+ &.dark-mode {
+ background-color: rgba(154, 160, 166, 0.65);
+ &:hover {
+ background-color: rgba(154, 160, 166, 0.85);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
index 065c9ab..10f8b97 100644
--- a/src/files-ui/components/file-card/FileCard.tsx
+++ b/src/files-ui/components/file-card/FileCard.tsx
@@ -3,7 +3,7 @@ import { FileCardProps } from "./FileCardProps";
import "./FileCard.scss";
import "./components/FileCardPaper.scss";
import { getLocalFileItemData } from "../file-item/utils/getLocalFileItemData";
-import { fileSizeFormater, shrinkWord } from "../../core";
+import { fileSizeFormater, 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";
@@ -15,6 +15,7 @@ import FileCardInfoLayer from "./components/FileCardInfoLayer";
import FileMosaicStatus from "../file-mosaic/components/FileMosaicStatus/FileMosaicStatus";
import FileCardUploadLayer from "./components/FileCardUploadLayer";
import { Tooltip } from "../tooltip";
+import DownloadHidden from "../download-hidden/DownloadHidden";
const setFinalElevation = (elevation: string | number): number => {
// let finalElevation: number = "";
@@ -35,7 +36,8 @@ const setFinalElevation = (elevation: string | number): number => {
const makeFileCardClassName = (
elevation: FileCardProps["elevation"],
darkMode: boolean | undefined,
- className: string | undefined
+ className: string | undefined,
+ clickable?: boolean
): string => {
console.log("FileCard makeFileCardClassName", elevation, darkMode, className);
let finalClassName: string =
@@ -47,6 +49,7 @@ const makeFileCardClassName = (
if (darkMode) {
finalClassName += " dark-mode";
}
+ if (clickable) finalClassName += " clickable";
if (className) {
finalClassName += ` ${className}`;
}
@@ -112,7 +115,8 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
const finalClassName: string = makeFileCardClassName(
elevation,
darkMode,
- className
+ className,
+ onClick !== undefined
);
// local properties from file
@@ -176,14 +180,12 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
React.useEffect(() => {
//console.log("Change isUploading", isUploading);
- if (isUploading && showInfo) {
- handleCloseInfo();
- }
+ if (isUploading && showInfo) handleCloseInfo();
+
// eslint-disable-next-line
}, [isUploading]);
/*************** Click ***************/
- /*************** CLICK ***************/
/**
* TO-DO: Add functionallity on click event
* @param e event object
@@ -198,9 +200,8 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = (
evt: React.MouseEvent
): void => {
- alert("double click on file");
+ //alert("double click on file");
evt.preventDefault();
-
onDoubleClick?.(evt);
};
function handleRightClick(evt: React.MouseEvent) {
@@ -235,6 +236,11 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
}
};
+ const handleAbort = () => {
+ xhr?.abort();
+ onAbort?.(id);
+ };
+
if (isReady) {
return (
<div
@@ -246,10 +252,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
onDoubleClick={handleDoubleClick}
onContextMenu={handleRightClick}
>
- <LayerContainer
- className="files-ui-file-card-main-layer-container"
- style={style}
- >
+ <LayerContainer className="files-ui-file-card-main-layer-container">
<Layer className="file-card-main-layer" visible={true}>
<div className="file-card-icon-plus-data">
{/** ICON + STATUS */}
@@ -262,8 +265,8 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
>
<FileMosaicImageLayer
imageSource={imageSource}
- url={url}
fileName={localName}
+ url={url}
isBlur={true}
/>
</Layer>
@@ -297,15 +300,13 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
</div>
</div>
</Layer>
-
- {/* <Layer
- className="files-ui-file-card-right-layer"
- visible={!isUploading}
- > */}
-
- {/* </Layer> */}
-
- <Layer className="file-card-info-layer-container" visible={showInfo}>
+
+ {/** INFO LAYER */}
+ <Layer
+ className="file-card-info-layer-container"
+ visible={showInfo}
+ onClick={handleClickUtil}
+ >
<FileCardInfoLayer
onCloseInfo={handleCloseInfo}
valid={valid}
@@ -320,30 +321,24 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
<Layer
className="file-card-upload-layer-container"
visible={isUploading}
+ onClick={handleClickUtil}
>
<div className="files-ui-file-card-upload-layer">
<FileCardUploadLayer
uploadStatus={uploadStatus}
progress={localProgress}
onCancel={onCancel ? () => onCancel?.(id) : undefined}
- onAbort={
- onAbort
- ? () => {
- xhr?.abort();
- onAbort?.(id);
- }
- : undefined
- }
+ onAbort={onAbort ? handleAbort : undefined}
localization={localization}
/>
</div>
</Layer>
- </LayerContainer>
+ </LayerContainer>
<FileCardRightActions
deleteIcon={onDelete !== undefined}
onDelete={handleDelete}
- darkMode={darkMode}
+ darkMode={darkMode}
imageIcon={isImage && onSee !== undefined}
onSee={() => onSee?.(imageSource)}
videoIcon={isVideo && onWatch !== undefined}
@@ -355,7 +350,6 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
isActive={alwaysActive || hovering}
visible={!isUploading && !showInfo}
/>
-
<Tooltip
open={resultOnTooltip}
uploadStatus={uploadStatus}
@@ -363,11 +357,11 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
errors={errors}
uploadMessage={uploadMessage}
/>
- {downloadUrl && (
- <a ref={downloadRef} href={downloadUrl} download={localName} hidden>
- download_file
- </a>
- )}
+ <DownloadHidden
+ fileName={localName}
+ anchorRef={downloadRef}
+ downloadUrl={downloadUrl}
+ />
</div>
);
}
diff --git a/src/files-ui/components/file-card/components/FileCardRightActions.tsx b/src/files-ui/components/file-card/components/FileCardRightActions.tsx
index 2cb660f..602a1c2 100644
--- a/src/files-ui/components/file-card/components/FileCardRightActions.tsx
+++ b/src/files-ui/components/file-card/components/FileCardRightActions.tsx
@@ -51,7 +51,7 @@ const FileCardRightActions: React.FC<FileCardRightActionsProps> = (
if (visible)
return (
<>
- <div className="file-card-right-layer-header">
+ <div className="file-card-right-layer-header" >
{isActive && deleteIcon && (
<Clear
className={
diff --git a/src/files-ui/components/file-input-button/FileInputButton.tsx b/src/files-ui/components/file-input-button/FileInputButton.tsx
index 85513f5..efc624b 100644
--- a/src/files-ui/components/file-input-button/FileInputButton.tsx
+++ b/src/files-ui/components/file-input-button/FileInputButton.tsx
@@ -365,6 +365,7 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
};
// HANDLERS for CLICK
function handleClick(): void {
+ console.log("HAAAAAAAA");
//handleClickUtil(evt);
if (disabled) return;
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.tsx
index e42acf7..2ec5459 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.tsx
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.tsx
@@ -3,19 +3,25 @@ import { addClassName } from "../../../../core";
import { OverridableComponentProps } from "../../../overridable";
import "./Layer.scss";
-interface LayerProps extends OverridableComponentProps {
+interface LayerPropsMap extends OverridableComponentProps {
visible?: boolean;
}
+type DefDivProps = React.HTMLProps<HTMLDivElement>;
+type DivPropsOmitInputButtonFullProps = Omit<DefDivProps, keyof LayerPropsMap>;
+
+type LayerProps = DivPropsOmitInputButtonFullProps & {
+ [D in keyof LayerPropsMap]: LayerPropsMap[D];
+};
const Layer: React.FC<LayerProps> = (props: LayerProps) => {
- const { style, className, children, visible } = props;
+ const { style, className, children, visible, ...otherProps } = props;
const finalClassName: string = addClassName(
className || "",
"files-ui-layer"
);
if (visible)
return (
- <div className={finalClassName} style={style}>
+ <div className={finalClassName} style={style} {...otherProps}>
{children}
</div>
);
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
index 23e2942..aec6fa8 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
@@ -164,6 +164,9 @@
}
+ &.clickable{
+ cursor: pointer;
+ }
}
//// ICONS
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 e5806f2..a1b9c4d 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
@@ -1,5 +1,9 @@
import * as React from "react";
-import { addClassName, fileSizeFormater } from "../../../../core";
+import {
+ addClassName,
+ fileSizeFormater,
+ handleClickUtil,
+} from "../../../../core";
import { FileMosaicProps } from "./FileMosaicProps";
import "./FileMosaic.scss";
import LayerContainer from "../file-mosaic-layer/LayerContainer";
@@ -11,9 +15,11 @@ import useFileMosaicInitializer from "../../hooks/useFileMosaicInitializer";
import FileMosaicImageLayer from "../FIleMosaicImageLayer/FileMosaicImageLayer";
import { useIsUploading } from "../../hooks/useIsUploading";
import { Tooltip } from "../../../tooltip";
-import FileMosaicMainLayer from "../FileMosaicMainLayer.tsx/FileMosaicMainLayer";
+
import FileMosaicInfoLayer from "../FileMosaicInfoLayer/FileMosaicInfoLayer";
import useProgress from "../../hooks/useProgress";
+import DownloadHidden from "../../../download-hidden/DownloadHidden";
+import FileMosaicMainLayer from "../FileMosaicMainLayer.tsx/FileMosaicMainLayer";
const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
const {
@@ -61,13 +67,15 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
onRightClick,
} = props;
- // console.log("FileMosaic progress " + id, progress);
//ref for anchor download element
const downloadRef = React.useRef<HTMLAnchorElement>(null);
const finalClassName: string = addClassName(
- "files-ui-file-mosaic-main-container files-ui-tooltip",
- className
+ addClassName(
+ "files-ui-file-mosaic-main-container files-ui-tooltip",
+ className
+ ),
+ onClick ? "clickable" : undefined
);
const fileMosaicFileNameClassName: string = darkMode
@@ -82,10 +90,6 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
] = getLocalFileItemData(file, propName, propType, propSize);
// handle progress
- /* const localProgress: number | undefined = React.useMemo(
- () => getProgress(progress, xhr),
- [progress, xhr]
- ); */
const localProgress: number | undefined = useProgress(progress, xhr);
//console.log("FileMosaic progress localProgress " + localProgress);
@@ -198,6 +202,10 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
innerDownload();
}
};
+ const handleAbort = () => {
+ xhr?.abort();
+ onAbort?.(id);
+ };
if (isReady)
return (
@@ -265,7 +273,11 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
</Layer>
{/** INFO LAYER */}
- <Layer className="files-ui-file-mosaic-info-layer" visible={showInfo}>
+ <Layer
+ className="files-ui-file-mosaic-info-layer"
+ visible={showInfo}
+ onClick={handleClickUtil}
+ >
<FileMosaicInfoLayer
onCloseInfo={handleCloseInfo}
valid={valid}
@@ -280,19 +292,13 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
<Layer
className="files-ui-file-mosaic-upload-layer"
visible={isUploading}
+ onClick={handleClickUtil}
>
<FileMosaicUploadLayer
uploadStatus={uploadStatus}
progress={localProgress}
onCancel={onCancel ? () => onCancel?.(id) : undefined}
- onAbort={
- onAbort
- ? () => {
- xhr?.abort();
- onAbort?.(id);
- }
- : undefined
- }
+ onAbort={onAbort ? handleAbort : undefined}
localization={localization}
/>
</Layer>
@@ -309,11 +315,11 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
errors={errors}
uploadMessage={uploadMessage}
/>
- {downloadUrl && (
- <a ref={downloadRef} target={"_blank"} href={downloadUrl} download={localName} hidden>
- download_file
- </a>
- )}
+ <DownloadHidden
+ fileName={localName}
+ anchorRef={downloadRef}
+ downloadUrl={downloadUrl}
+ />
</div>
);
return <></>;
diff --git a/src/files-ui/components/icons/Cancel/Cancel.tsx b/src/files-ui/components/icons/Cancel/Cancel.tsx
index 8c3ea45..738852e 100644
--- a/src/files-ui/components/icons/Cancel/Cancel.tsx
+++ b/src/files-ui/components/icons/Cancel/Cancel.tsx
@@ -1,6 +1,7 @@
import React, { FC } from "react";
import { parseSize } from "../utils/utils";
import { CancelProps } from "./CancelProps";
+import { handleClickUtil } from "../../../core";
const Cancel: FC<CancelProps> = (props: CancelProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -9,7 +10,10 @@ const Cancel: FC<CancelProps> = (props: CancelProps) => {
return (
<svg
style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
xmlns="http://www.w3.org/2000/svg"
height={`${finalSize}px`}
viewBox="0 0 24 24"
diff --git a/src/files-ui/components/icons/Clear/Clear.tsx b/src/files-ui/components/icons/Clear/Clear.tsx
index 2ad7d87..d3d0203 100644
--- a/src/files-ui/components/icons/Clear/Clear.tsx
+++ b/src/files-ui/components/icons/Clear/Clear.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { ClearProps } from "./ClearProps";
+import { handleClickUtil } from "../../../core";
const Clear: React.FC<ClearProps> = (props: ClearProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const Clear: React.FC<ClearProps> = (props: ClearProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path d="M0 0h24v24H0V0z" fill={colorFill || "none"} />
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
diff --git a/src/files-ui/components/icons/CloudDone/CloudDone.tsx b/src/files-ui/components/icons/CloudDone/CloudDone.tsx
index 1f79755..637cd27 100644
--- a/src/files-ui/components/icons/CloudDone/CloudDone.tsx
+++ b/src/files-ui/components/icons/CloudDone/CloudDone.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { CloudDoneProps } from "./CloudDoneProps";
+import { handleClickUtil } from "../../../core";
const CloudDone: React.FC<CloudDoneProps> = (props: CloudDoneProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -16,7 +17,10 @@ const CloudDone: React.FC<CloudDoneProps> = (props: CloudDoneProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color || "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path d="M0 0h24v24H0V0z" fill={colorFill || "none"} />
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3zm-9-3.82l-2.09-2.09L6.5 13.5 10 17l6.01-6.01-1.41-1.41z" />
diff --git a/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx b/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx
index 99f2a5e..b2fd994 100644
--- a/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx
+++ b/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx
@@ -1,4 +1,5 @@
import * as React from "react";
+import { handleClickUtil } from "../../../core";
import { parseSize } from "../utils/utils";
import { DownloadFileProps } from "./DownloadFileProps";
@@ -18,7 +19,10 @@ const DownloadFile: React.FC<DownloadFileProps> = (
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color || "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<g>
<rect fill={colorFill || "none"} height={finalSize} width={finalSize} />
diff --git a/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx b/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx
index 007c28e..025f2fc 100644
--- a/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx
+++ b/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { InfoBlackProps } from "./InfoBlackProps";
+import { handleClickUtil } from "../../../core";
const InfoBlack: React.FC<InfoBlackProps> = (props: InfoBlackProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const InfoBlack: React.FC<InfoBlackProps> = (props: InfoBlackProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color || "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path d="M0 0h24v24H0z" fill={colorFill || "none"} />
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
diff --git a/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx b/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx
index 299058c..2872875 100644
--- a/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx
+++ b/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { InfoDisneyProps } from "./InfoDisneyProps";
+import { handleClickUtil } from "../../../core";
const InfoDisney: React.FC<InfoDisneyProps> = (props: InfoDisneyProps) => {
const {
@@ -28,7 +29,10 @@ const InfoDisney: React.FC<InfoDisneyProps> = (props: InfoDisneyProps) => {
xmlns="http://www.w3.org/2000/svg"
height={`${finalSize}px`}
width={`${finalSize}px`}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
//style="height: 32px; min-width: 32px; width: 32px; z-index: auto;"
//class="sc-htoDjs bUEQUS"
>
diff --git a/src/files-ui/components/icons/Person/Person.tsx b/src/files-ui/components/icons/Person/Person.tsx
index 75f3b02..a80ab2e 100644
--- a/src/files-ui/components/icons/Person/Person.tsx
+++ b/src/files-ui/components/icons/Person/Person.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { PersonProps } from "./PersonProps";
+import { handleClickUtil } from "../../../core";
const Person: React.FC<PersonProps> = (props: PersonProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const Person: React.FC<PersonProps> = (props: PersonProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path
d="M0 0h24v24H0z"
diff --git a/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx b/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx
index 7a6fa22..220897f 100644
--- a/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx
+++ b/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { PhotoCameraProps } from "./PhotoCameraProps";
+import { handleClickUtil } from "../../../core";
const PhotoCamera: React.FC<PhotoCameraProps> = (props: PhotoCameraProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const PhotoCamera: React.FC<PhotoCameraProps> = (props: PhotoCameraProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path
d="M0 0h24v24H0V0z"
diff --git a/src/files-ui/components/icons/Play/PlayIcon.tsx b/src/files-ui/components/icons/Play/PlayIcon.tsx
index 2698476..690eb31 100644
--- a/src/files-ui/components/icons/Play/PlayIcon.tsx
+++ b/src/files-ui/components/icons/Play/PlayIcon.tsx
@@ -1,6 +1,7 @@
import React, { FC } from "react";
import { parseSize } from "../utils/utils";
import { PlayIconProps } from "./PlayIconProps";
+import { handleClickUtil } from "../../../core";
const PlayIcon: FC<PlayIconProps> = (props: PlayIconProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const PlayIcon: FC<PlayIconProps> = (props: PlayIconProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path
d="M0 0h24v24H0V0z"
diff --git a/src/files-ui/components/icons/Remove/Remove.tsx b/src/files-ui/components/icons/Remove/Remove.tsx
index 3a83c8c..ee6ebd8 100644
--- a/src/files-ui/components/icons/Remove/Remove.tsx
+++ b/src/files-ui/components/icons/Remove/Remove.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { RemoveProps } from "./RemoveProps";
+import { handleClickUtil } from "../../../core";
const Remove: React.FC<RemoveProps> = (props: RemoveProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const Remove: React.FC<RemoveProps> = (props: RemoveProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path
d="M0 0h24v24H0V0z"
diff --git a/src/files-ui/components/icons/Remove/RemoveOutline.tsx b/src/files-ui/components/icons/Remove/RemoveOutline.tsx
index 711a057..a1d6068 100644
--- a/src/files-ui/components/icons/Remove/RemoveOutline.tsx
+++ b/src/files-ui/components/icons/Remove/RemoveOutline.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { RemoveProps } from "./RemoveProps";
+import { handleClickUtil } from "../../../core";
const RemoveOutline: React.FC<RemoveProps> = (props: RemoveProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const RemoveOutline: React.FC<RemoveProps> = (props: RemoveProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path
d="M0 0h24v24H0V0z"
diff --git a/src/files-ui/components/icons/Visibility/Visibility.tsx b/src/files-ui/components/icons/Visibility/Visibility.tsx
index bc805e9..539862e 100644
--- a/src/files-ui/components/icons/Visibility/Visibility.tsx
+++ b/src/files-ui/components/icons/Visibility/Visibility.tsx
@@ -1,6 +1,7 @@
import React, { FC } from "react";
import { parseSize } from "../utils/utils";
import { VisibilityProps } from "./VisibilityProps";
+import { handleClickUtil } from "../../../core";
const Visibility: FC<VisibilityProps> = (props: VisibilityProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -16,7 +17,10 @@ const Visibility: FC<VisibilityProps> = (props: VisibilityProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path
diff --git a/src/files-ui/components/input-hidden/InputHidden.tsx b/src/files-ui/components/input-hidden/InputHidden.tsx
index 5e29c15..5545cfe 100644
--- a/src/files-ui/components/input-hidden/InputHidden.tsx
+++ b/src/files-ui/components/input-hidden/InputHidden.tsx
@@ -1,8 +1,14 @@
import * as React from "react";
+import { handleClickUtil } from "../../core";
import { InputHiddenProps } from "./InputHiddenProps";
const InputHidden: React.FC<InputHiddenProps> = (props: InputHiddenProps) => {
const { onChange, inputRef, accept, multiple } = props;
+ function handleClick<T extends HTMLInputElement>(
+ evt: React.MouseEvent<T, MouseEvent>
+ ): void {
+ handleClickUtil(evt);
+ }
return (
<React.Fragment>
<input
@@ -13,6 +19,7 @@ const InputHidden: React.FC<InputHiddenProps> = (props: InputHiddenProps) => {
type="file"
accept={accept}
multiple={multiple}
+ onClick={handleClick}
/>
</React.Fragment>
);
diff --git a/src/files-ui/core/download/downloadFile.ts b/src/files-ui/core/download/downloadFile.ts
new file mode 100644
index 0000000..709d6e5
--- /dev/null
+++ b/src/files-ui/core/download/downloadFile.ts
@@ -0,0 +1,17 @@
+export const downloadFileAnchor=async(fileName?:string, downloadUrl?:string)=>{
+
+}
+export const downloadFileXHR=async(fileName?:string, downloadUrl?:string)=>{
+
+
+}
+export const downloadFileFetch=async(fileName?:string, downloadUrl?:string)=>{
+
+
+}
+
+export const downloadAnchor=async(fileName?:string, downloadUrl?:string)=>{
+
+const anchorElement:HTMLAnchorElement = document.createElement("a");
+
+}
\ No newline at end of file
diff --git a/src/files-ui/core/utils/click.utils.ts b/src/files-ui/core/utils/click.utils.ts
index e692f35..a91e6a9 100644
--- a/src/files-ui/core/utils/click.utils.ts
+++ b/src/files-ui/core/utils/click.utils.ts
@@ -3,7 +3,7 @@
* @param evt click event handler object
*/
export function
- handleClickUtil<T extends HTMLDivElement | HTMLButtonElement | HTMLAnchorElement>
+ handleClickUtil<T extends HTMLDivElement | HTMLButtonElement | HTMLAnchorElement | SVGSVGElement | HTMLInputElement>
(
evt: React.MouseEvent<T, MouseEvent>
) {
@@ -18,6 +18,7 @@ export function
export const handleClickInput = (
input: HTMLInputElement | null
) => {
+ console.log("handleClickInput:", input);
if (!input) return;
input.click();
}
\ No newline at end of file
--
GitLab