Skip to content
Snippets Groups Projects
Commit bbafc6f0 authored by Jose Manuel Serrano Amaut's avatar Jose Manuel Serrano Amaut
Browse files

[REF]: Add preventdefault in all icons, refactor file card and mosaic for...

[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
parent dbb41688
No related branches found
No related tags found
No related merge requests found
Showing
with 172 additions and 79 deletions
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>
......
......@@ -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
......@@ -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>
......@@ -298,14 +301,12 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
</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,26 +321,20 @@ 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}
......@@ -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>
);
}
......
......@@ -365,6 +365,7 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
};
// HANDLERS for CLICK
function handleClick(): void {
console.log("HAAAAAAAA");
//handleClickUtil(evt);
if (disabled) return;
......
......@@ -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>
);
......
......@@ -164,6 +164,9 @@
}
&.clickable{
cursor: pointer;
}
}
//// ICONS
......
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(
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 <></>;
......
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"
......
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" />
......
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" />
......
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} />
......
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" />
......
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"
>
......
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"
......
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"
......
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"
......
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"
......
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"
......
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
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment