diff --git a/src/files-ui/components/download-hidden/DownloadHidden.tsx b/src/files-ui/components/download-hidden/DownloadHidden.tsx
index 3c3150e66a579084ca9983361904d39ec737bdd3..9596cac9acffca6af0f7cfaf14c5a10a5fb1d8ed 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 a9c9ebd51f4daace080349bd329e32b62f3440e0..5162e6eaeffacf045b5e444ff8361469fe51d168 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 065c9abbc9cfa85901b5c6f8adde2a7e84904d90..10f8b974a13d0949e2890557279144f14ba9bf37 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 2cb660fb57fe4bd2aed77502de10d51b0e4da399..602a1c2b47d1226c8ac6683c657cdd19e04ac972 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 85513f547bea57a1f50be667ef1d87d2c90fec4a..efc624b4cedba0abc07b40b019f2e53b5b16c23e 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 e42acf7d8fd25eef2a1e09d447980a36d59263d4..2ec545930eb6b1d3ef4f614fbc8bb06a743c0120 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 23e29424be4489b2ddfc784c7907393c639a47b2..aec6fa83682efa0436e6c6e455024c6055a22709 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 e5806f2dc41e6cb2f0f1e10cc51af6aa8622976d..a1b9c4d9a81fd952e30a7db83351bdeda5e7e366 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 8c3ea45a140be99810f8887c08d7b34725b87f22..738852e46547149f2729e84d2c0d94e43fd1702c 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 2ad7d87fb47f9d03b45a9e60a030f1182677f9e1..d3d02038662bb49ae8f6afae71ee9a7cab810fa4 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 1f79755dfe13d9d26407b430e097ec757c398513..637cd2750855e264d3d0b5678f766c52e0ea1ba9 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 99f2a5e997ad56a6d68ec62a0eadfe7beaf43861..b2fd9946161e151851204086f849dea96d649ea7 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 007c28e6435818a04abb030944ede746b79ff938..025f2fcb2d620257288d416cecb054ee28351b25 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 299058c421f1f77e0ff02c376aca11634a364b6c..28728757b23e03b11bea222b9cd03a8709535bd6 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 75f3b0279123c044a8d1709ff2ba9a454c5b09d0..a80ab2ec117e9042793cba1acd3bb6d59e1af26c 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 7a6fa22162f5cbddc104aa2b4aadb00535679194..220897f1cacfb8ab7a126f3999b48794449ee6ff 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 2698476a7e9ae6471180b4cac0450f787a07b516..690eb31b2f434eb3e11a83f073e16bd61e8ffd6c 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 3a83c8c5b000002506a6f4516988151f46f4280d..ee6ebd88425025a48a731a01950c4e3d4df4e260 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 711a057f72ebb8307b51bc3ff7f3da974fa27642..a1d6068337dc728f7069cafc535923bf42f01d04 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 bc805e91da39cd7b8844265c889d31fac57bea28..539862ea8e91567a693333121b839b78f22376a6 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 5e29c150246ee6ae6bb9ee45b1e7252f397a45cc..5545cfe4ce1cee985edcbb60bea302e890b734bf 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 0000000000000000000000000000000000000000..709d6e5473b0d1199b7d7923b8287d2ecc92f2ef
--- /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 e692f35258d9d6bde0fe04f88f74759c5377e7a8..a91e6a99917705b1bb7be27e4aa5a97a887af925 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