diff --git a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx index dc0d040e7a73370fbe5ab4aefdc945a74cf40318..7b3d48c48c4b33538da42cd413ce6b971e7c0d58 100644 --- a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx +++ b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx @@ -45,7 +45,7 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = ( className = "", resetStyles, color, - firstClassName="", + firstClassName = "", } = props; const DropzoneHeaderLocalizer: LocalLabels = DropzoneLocalizerSelector( @@ -77,8 +77,9 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = ( const maxFileSizeMessenger: FunctionLabel = DropzoneHeaderLocalizer.maxSizeMessage as FunctionLabel; - if (maxFileSize) { - result.push(maxFileSizeMessenger(fileSizeFormater(maxFileSize))); + const maxFileSizeFormatted = fileSizeFormater(maxFileSize); + if (maxFileSizeFormatted) { + result.push(maxFileSizeMessenger(maxFileSizeFormatted)); result.push(<React.Fragment>{","} </React.Fragment>); } const validFileSizeMessenger: FunctionLabel = diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx index 625e4d406273e1aef087905053e3899ee01eff01..7dc71ff89002a3c34ea4ba125e2b92b5c84046fe 100644 --- a/src/files-ui/components/file-card/FileCard.tsx +++ b/src/files-ui/components/file-card/FileCard.tsx @@ -2,8 +2,7 @@ import * as React from "react"; import { FileCardProps } from "./FileCardProps"; import "./FileCard.scss"; import "./components/FileCardPaper.scss"; -import { getLocalFileItemData } from "../file-item/utils/getLocalFileItemData"; -import { fileSizeFormater, 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"; diff --git a/src/files-ui/components/file-item/components/FileItem/FileItem.scss b/src/files-ui/components/file-item/components/FileItem/FileItem.scss deleted file mode 100644 index 3d956551cd8d0cc858e838a2b181969c53c35794..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItem/FileItem.scss +++ /dev/null @@ -1,272 +0,0 @@ -@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900); - -.file-item-full-container-container { - cursor: text; - box-sizing: border-box; - font-family: "Poppins", sans-serif; - width: 132px; - word-break: break-word; - font-size: 15px; - font-weight: 400; - //background-color: cadetblue; - - &.hovering { - // background-color: aqua; - border-radius: 8px; - } - - //outline: 1px solid rgb(20, 130, 220); - .file-item-icon-container { - position: relative; - height: 132px; - width: 132px; - border-radius: 8px; - box-sizing: border-box; - - .full-info { - &::-webkit-scrollbar { - width: 9px; - } - - &::-webkit-scrollbar-track { - background: transparent; - } - - &::-webkit-scrollbar-thumb { - background-color: #646c7fa9; - border-radius: 20px; - border: transparent; - } - - text-align: left; - position: absolute; - left: 0; - top: 0; - - scrollbar-width: thin; - line-height: 1.5; - letter-spacing: 0.02857em; - //border: 1px solid white; - font-family: "Poppins", sans-serif; - width: inherit; - background-color: rgba(0, 0, 0, 0.85); - word-break: break-word; - //margin: 1% 4%; - // padding: 1% 1%; - border-radius: 7px; - //z-index: 100; - height: 100%; - width: 100%; - - font-size: 0.8rem; - transition: all 0.5s ease 0s; - //overflow: hidden; - overflow: auto; - color: white; - - .name { - //margin: -7px 0 0 0; - padding: 0 5px; - font-weight: 399; - // text-align: center; - - .sub-label { - font-weight: 600; - } - - &.success { - border: 1px dashed #2e7d32; - background-color: #1b5e20; - //margin: 0 2px; - font-size: 0.7rem; - - border-radius: 4px; - } - - &.error { - background-color: #c62828; - border: 1px dashed #d32f2f; - font-size: 0.7rem; - - //margin: 0 2px; - border-radius: 4px; - } - } - - .size { - // margin-top: 5px; - padding: 0 5px; - font-weight: 500; - - .sub-label { - font-weight: 600; - } - } - - .mime { - //display: none; - //text-align: left; - - padding: 0 5px; - font-weight: 399; - - .sub-label { - font-weight: 600; - } - } - - &.hide { - //height: 0%; - display: none; - } - } - } - - .file-item-name { - margin-top: 3px; - height: 31px; - text-align: center; - //width: 133px; - width: 100%; - color: black; - //font-size: 0.95rem; - font-size: 15px; - //line-height: 0.9rem; - line-height: 15px; - font-weight: 400; - letter-spacing: 0.07rem; - word-break: break-all; - padding: 0.5px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; /* number of lines to show */ - line-clamp: 2; - -webkit-box-orient: vertical; - &.dark-mode { - color: rgba(255, 255, 255, 0.7); - } - &.not-allowed { - background-color: rgba(180, 16, 16, 0.7); - } - } -} - -.file-item-container { - background-repeat: no-repeat; - background-size: cover; - background-position: center; -} - -.dui-file-item-icon { - font-size: 0.7rem; - //border: 1px solid wheat; - //color: white; - 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); - //outline: 0.5px solid wheat; - } -} - -////////////////// TOOLTIP -.dz-ui-file-item-container { - &.dz-ui-tooltip { - cursor: default; - position: relative; - display: inline-block; - - // border-bottom: 1px dotted black; - &:hover { - z-index: 2; - - .dropzone-ui-tooltiptext { - visibility: visible; - opacity: 1; - z-index: 2; - } - } - - .dropzone-ui-tooltiptext { - font-family: "Poppins", sans-serif; - font-size: 0.8rem; - visibility: hidden; - width: 133px; - // background-color: green; - color: #fff; - text-align: center; - border-radius: 6px; - padding: 2px 2px; - position: absolute; - //z-index: 2; - //top: 190px; - top: 180px; - left: 66px; - margin-left: -60px; - - /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ - opacity: 0; - transition: opacity 1s; - - &.not-valid-error { - background: linear-gradient(to top, #c62828, #d32f2f); - - &::after { - border-color: transparent transparent #d32f2f transparent; - } - } - - &.success { - //background-color: green; - background: linear-gradient(to top, #1b5e20, #2e7d32); - - &::after { - border-color: transparent transparent #2e7d32 transparent; - } - } - - &::after { - content: ""; - position: absolute; - bottom: 100%; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - //border-color: transparent transparent green transparent; - } - } - } - - - - - &.dz-ui-paper-elevation-1 { - box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), - 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); - } - - .dz-ui-paper-elevation-2 { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - } - - .dz-ui-paper-elevation-3 { - box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), - 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); - } - - .dz-ui-paper-elevation-4 { - box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), - 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); - } -} diff --git a/src/files-ui/components/file-item/components/FileItem/FileItem.tsx b/src/files-ui/components/file-item/components/FileItem/FileItem.tsx deleted file mode 100644 index a23de8e55543210458fe9a937734a485f5633023..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItem/FileItem.tsx +++ /dev/null @@ -1,301 +0,0 @@ -import * as React from "react"; -import { fileSizeFormater } from "../../../../core"; -import DownloadHidden from "../../../download-hidden/DownloadHidden"; -import { mergeProps } from "../../../overridable"; -import { Tooltip } from "../../../tooltip"; -import useFileItemRootClassName from "../../hooks/useFileItemClassName"; -import { getLocalFileItemData } from "../../utils/getLocalFileItemData"; -import { showFileItemComponent } from "../../utils/showFileItemComponent"; -import { FileItemProps, FileItemPropsDefault } from "./FileItemProps"; -import "./FileItem.scss"; -import FileItemImage from "../FileItemImage/FileItemImage"; -import useFileItemInitializer from "../../hooks/useFileItemInitializer"; -import FileItemMainLayer from "../FileItemMainLayer/MainLayer/FileItemMainLayer"; -import useFileItemProgress from "../../hooks/useFileItemProgress"; -import FileItemFullInfoLayer from "../FileItemFullInfoLayer/FileItemFullInfoLayer"; - -const FileItem: React.FC<FileItemProps> = (props: FileItemProps) => { - const { - style, - className, - - file, - name: propName, - size: propSize, - type: propType, - - id, - valid, - errors, - uploadStatus, - uploadMessage, - progress, - - xhr, - - localization, - preview, - imageUrl, - info, - backgroundBlurImage = true, - darkMode, - - alwaysActive, - - resultOnTooltip, - - onDelete, - onCancel, - onAbort, - - onDownload, - onSee, - onWatch, - - onlyImage, - - //hd, - - downloadUrl, - - showProgress, - - onDoubleClick, - onRightClick, - } = mergeProps(props, FileItemPropsDefault); - - //ref for anchor element - const downloadAnchorRef = React.useRef<HTMLAnchorElement>(null); - - /*************** HOVERING ***************/ - const [hovering, setHOvering] = React.useState<boolean>(false); - const handleOnHoverEnter: React.MouseEventHandler<HTMLDivElement> = () => { - setHOvering(true); - }; - const handleOnHoverLeave: React.MouseEventHandler<HTMLDivElement> = () => { - setHOvering(false); - }; - //className created - const rootClassNameCreated: string | undefined = useFileItemRootClassName( - resultOnTooltip, - className, - hovering - ); - - const showFileItem: boolean = showFileItemComponent( - file, - propName - // Boolean(rootClassNameCreated) - ); - - // local properties from file - const [localName, localType, localSize]: [ - string, - string | undefined, - number | undefined - ] = getLocalFileItemData(file, propName, propType, propSize); - - // handle progress - const localProgress = useFileItemProgress(progress, showProgress, xhr); - - //Initialize File Item - const [isImage, isVideo, url, imageSource]: [ - boolean, - boolean, - string, - string | undefined - ] = useFileItemInitializer( - file, - propName, - propType, - valid, - preview as boolean, - imageUrl - ); - - //The size formatted and rounded in 2 decimals - const sizeFormatted: string = localSize - ? fileSizeFormater(localSize) - : "0 KB"; - //alwaysActive - const [showInfo, setShowInfo] = React.useState<boolean>(false); - - /*************** Click ***************/ - /** - * TO-DO: Add functionallity on click event - * @param e event object - */ - function handleClick<T extends HTMLDivElement>( - e: React.MouseEvent<T, MouseEvent> - ): void { - //avoid children to trigger onClick ripple from parent - e.stopPropagation(); - } - - /***************** HANDLERS **********/ - //delete file item - const handleDelete = (): void => { - onDelete?.(id); - }; - //open info layer - const handleOpenInfo = () => { - setShowInfo(true); - }; - //close info layer - const handleCloseInfo = () => { - setShowInfo(false); - }; - //handle watch video - const handleOpenVideo = async () => { - if (file) onWatch?.(file); - }; - //open image - const handleOpenImage = async () => { - if (imageSource) { - // if (hd) { - // const response = await readImagePromise(file); - // onSee?.(response || ""); - // } else { - onSee?.(imageSource); - //} - } - }; - - /********** DOWNLOAD HANDLERS **********/ - /** - * onDownload, form 1 - * Trigger dowload directly performing a click on anchor element - */ - const innerDownload = () => { - const anchorElement = downloadAnchorRef.current; - if (anchorElement) { - anchorElement.click(); - } - }; - /** - * onDownlad, form 2 - * Handle the download triggering an outside event - */ - const handleDownload = () => { - if (onDownload) { - onDownload?.(id, downloadUrl); - } else if (typeof downloadUrl == "string") { - innerDownload(); - } - }; - /** - * Perform abort event when xhr is given - */ - const handleAbort = (): void => { - //trigger abort event - xhr?.abort(); - // handle externally the abort event - onAbort?.(id); - }; - /** - * Handle onCancel event - */ - const handleCancel = (): void => { - // handle externally the cancel event - onCancel?.(id); - }; - - const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = ( - evt: React.MouseEvent - ): void => { - alert("double click on file"); - evt.preventDefault(); - - onDoubleClick?.(evt); - }; - function handleRightClick(evt: React.MouseEvent) { - // alert("right click!!!!"); - //get coordinates - //zindex - //create menu component - // evt.preventDefault(); - onRightClick?.(evt); - } - //console.log("FileItem onCancel", onCancel); - - if (showFileItem) { - return ( - <div - className={rootClassNameCreated} - style={style} - onMouseEnter={handleOnHoverEnter} - onMouseLeave={handleOnHoverLeave} - onClick={handleClick} - onDoubleClick={handleDoubleClick} - onContextMenu={handleRightClick} - > - <div className={`file-item-icon-container ${showInfo ? " hide" : ""}`}> - <FileItemImage - imageSource={imageSource} - url={url} - fileName={localName} - backgroundBlurImage={backgroundBlurImage as boolean} - /> - <FileItemMainLayer - showInfo={showInfo} - fileName={localName} - onDelete={onDelete ? handleDelete : undefined} - onOpenImage={onSee && preview ? handleOpenImage : undefined} - onOpenVideo={onWatch && preview ? handleOpenVideo : undefined} - onDownloadFile={ - onDownload || downloadUrl ? handleDownload : undefined - } - isVideo={isVideo} - onOpenInfo={handleOpenInfo} - info={info || false} - valid={valid} - isImage={isImage} - sizeFormatted={sizeFormatted} - uploadStatus={uploadStatus} - localization={localization} - hovering={alwaysActive || hovering} - progress={localProgress} - onAbort={onAbort ? handleAbort : undefined} - onCancel={onCancel ? handleCancel : undefined} - /> - <FileItemFullInfoLayer - showInfo={showInfo} - errors={errors} - fileName={localName} - fileSize={sizeFormatted} - fileType={localType} - valid={valid} - onClose={handleCloseInfo} - uploadStatus={uploadStatus} - uploadMessage={uploadMessage} - localization={localization} - resultOnTooltip={resultOnTooltip} - /> - </div> - {!onlyImage && ( - <div - className={darkMode ? "file-item-name dark-mode" : "file-item-name"} - > - {/* {shrinkWord(localName)} */} - {localName} - </div> - )} - <Tooltip - open={resultOnTooltip} - //open={true} - uploadStatus={uploadStatus} - valid={valid} - errors={errors} - uploadMessage={uploadMessage} - ></Tooltip> - <DownloadHidden - downloadUrl={downloadUrl} - anchorRef={downloadAnchorRef} - fileName={localName} - /> - </div> - ); - } - return <></>; -}; -export default FileItem; diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.scss b/src/files-ui/components/file-item/components/FileItem/FileItemNeo.scss deleted file mode 100644 index 6a352b6f8cadf790ae4852b7321bb378d4c5acaa..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.scss +++ /dev/null @@ -1,227 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); -//@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap"); -@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,900"); -/* .file-item-full-list { - display: inline-flex; -} */ -.file-item-full-container-container { - cursor: text; - box-sizing: border-box; - font-family: "Poppins", sans-serif; - //margin: 8px; - //height: 157px; - width: 132px; - word-break: break-word; - //outline: 1px solid rgb(20, 130, 220); - .file-item-icon-container { - position: relative; - height: 132px; - width: 132px; - border-radius: 8px; - .full-info { - &::-webkit-scrollbar { - width: 9px; - } - &::-webkit-scrollbar-track { - background: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: #646c7fa9; - border-radius: 20px; - border: transparent; - } - text-align: left; - position: absolute; - left: 0; - top: 0; - - scrollbar-width: thin; - line-height: 1.5; - letter-spacing: 0.02857em; - //border: 1px solid white; - font-family: "Poppins", sans-serif; - width: inherit; - background-color: rgba(0, 0, 0, 0.85); - word-break: break-word; - //margin: 1% 4%; - // padding: 1% 1%; - border-radius: 7px; - //z-index: 100; - height: 100%; - width: 100%; - font-size: 0.8rem; - transition: all 0.5s ease 0s; - //overflow: hidden; - overflow: auto; - color: white; - .name { - //margin: -7px 0 0 0; - padding: 0 5px; - font-weight: 399; - // text-align: center; - - .sub-label { - font-weight: 600; - } - &.success { - border: 1px dashed #2e7d32; - background-color: #1b5e20; - //margin: 0 2px; - font-size: 0.7rem; - - border-radius: 4px; - } - &.error { - background-color: #c62828; - border: 1px dashed #d32f2f; - font-size: 0.7rem; - - //margin: 0 2px; - border-radius: 4px; - } - } - .size { - // margin-top: 5px; - padding: 0 5px; - font-weight: 500; - .sub-label { - font-weight: 600; - } - } - .mime { - //display: none; - //text-align: left; - - padding: 0 5px; - font-weight: 399; - .sub-label { - font-weight: 600; - } - } - - &.hide { - //height: 0%; - display: none; - } - } - } - .file-item-name { - margin-top: 3px; - height: 37px; - width: 133px; - color: black; - font-size: 0.95rem; - line-height: 0.85rem; - font-weight: 400; - letter-spacing: 0.125em; - word-break: break-all; - padding: 0.5px; - text-align: center; - &.not-allowed { - background-color: rgba(180, 16, 16, 0.7); - } - } -} - -.file-item-container { - background-repeat: no-repeat; - background-size: cover; - background-position: center; -} - -.dui-file-item-icon { - font-size: 0.7rem; - //border: 1px solid wheat; - //color: white; - 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); - //outline: 0.5px solid wheat; - } -} - -////////////////// TOOLTIP -.dz-ui-file-item-container { - &.dz-ui-tooltip { - cursor: default; - position: relative; - display: inline-block; - // border-bottom: 1px dotted black; - &:hover { - z-index: 2; - .dropzone-ui-tooltiptext { - visibility: visible; - opacity: 1; - z-index: 2; - } - } - .dropzone-ui-tooltiptext { - font-family: "Poppins", sans-serif; - font-size: 0.8rem; - visibility: hidden; - width: 133px; - // background-color: green; - color: #fff; - text-align: center; - border-radius: 6px; - padding: 2px 2px; - position: absolute; - //z-index: 2; - //top: 190px; - top: 180px; - left: 66px; - margin-left: -60px; - - /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ - opacity: 0; - transition: opacity 1s; - - &.not-valid-error { - background: linear-gradient(to top, #c62828, #d32f2f); - &::after { - border-color: transparent transparent #d32f2f transparent; - } - } - &.success { - //background-color: green; - background: linear-gradient(to top, #1b5e20, #2e7d32); - &::after { - border-color: transparent transparent #2e7d32 transparent; - } - } - &::after { - content: ""; - position: absolute; - bottom: 100%; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - //border-color: transparent transparent green transparent; - } - } - } - &.dz-ui-paper-elevation-1 { - box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), - 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); - } - .dz-ui-paper-elevation-2 { - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - } - .dz-ui-paper-elevation-3 { - box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), - 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); - } - .dz-ui-paper-elevation-4 { - box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), - 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); - } -} diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.tsx b/src/files-ui/components/file-item/components/FileItem/FileItemNeo.tsx deleted file mode 100644 index 85b823e32162fe3cf6311756a5a4f9f9cb46d4e2..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.tsx +++ /dev/null @@ -1,247 +0,0 @@ -import * as React from "react"; -import "./FileItemNeo.scss"; - -import FileItemFullInfoLayer from "../FileItemFullInfoLayer/FileItemFullInfoLayer"; -import FileItemImage from "../FileItemImage/FileItemImage"; -import Tooltip from "../../../tooltip/components/Tooltip"; -import useFileItemNeoClassName from "../../hooks/useFileItemNeoClassName"; -import { FileItemPropsNeo, FileItemNeoPropsDefault } from "./FileItemPropsNeo"; -import useFileItemNeoInitializer from "./useFileItemNeoInitializer"; - -import FileItemImageNeo from "../FileItemImage/FileItemImageNeo"; -import useFileItemProgress from "../../hooks/useFileItemProgress"; -import FuiSkeleton from "../../../skeleton/FuiSkeleton"; -import { fileSizeFormater, shrinkWord } from "../../../../core"; -import { mergeProps } from "../../../overridable"; -import FileItemMainLayerNeo from "../FileItemMainLayer/MainLayer/FileItemMainLayerNeo"; - -const FileItem: React.FC<FileItemPropsNeo> = (props: FileItemPropsNeo) => { - const { - file, - onDelete, - onSee, - onWatch, - style, - preview, - onlyImage, - info, - id, - valid, - uploadStatus, - uploadMessage, - hd, - localization, - errors, - imageUrl, - elevation, - alwaysActive, - resultOnTooltip, - downloadUrl, - onDownload, - progress, - onAbort, - xhr, - onCancel, - showProgress, - } = mergeProps(props, FileItemNeoPropsDefault); - //ref for anchor element - const dui_anchor_ref = React.useRef<HTMLAnchorElement>(null); - //Initialize image properties for FileItem - const localProgress = useFileItemProgress(progress, showProgress, xhr); - - const [isImage, isVideo, url, imageSource]: [ - boolean, - boolean, - string, - string | undefined - ] = useFileItemNeoInitializer(file, valid, preview as boolean, imageUrl); - //console.table({isImage, isVideo, url, imageSource, localProgress} ); - //className created - const classNameCreated = useFileItemNeoClassName( - resultOnTooltip as boolean, - elevation - ); - //state for actionOnHover - const [hovering, setHOvering] = React.useState<boolean>(false); - const handleOnHoverEnter: React.MouseEventHandler<HTMLDivElement> = () => { - setHOvering(true); - }; - const handleOnHoverLeave: React.MouseEventHandler<HTMLDivElement> = () => { - setHOvering(false); - }; - - //size - const sizeFormatted: string = file ? fileSizeFormater(file.size) : "0 KB"; - //alwaysActive - const [showInfo, setShowInfo] = React.useState<boolean>(false); - //delete file item - const handleDelete = (): void => { - onDelete?.(id); - }; - //open info layer - const handleOpenInfo = () => { - setShowInfo(true); - }; - //close info layer - const handleCloseInfo = () => { - setShowInfo(false); - }; - //handle watch video - const handleOpenVideo = async () => { - if (file) onWatch?.(file); - }; - //open image - const handleOpenImage = async () => { - if (imageSource && file) { - // if (hd) { - // const response = await readImagePromise(file); - // onSee?.(response || ""); - // } else { - onSee?.(imageSource); - //} - } - }; - function handleClick<T extends HTMLDivElement>( - e: React.MouseEvent<T, MouseEvent> - ): void { - //avoid children to trigger onClick ripple from parent - e.stopPropagation(); - } - /** - * onDownload, form 1 - * Trigger dowload directly performing a click on anchor element - */ - const innerDownload = () => { - const anchorElement = dui_anchor_ref.current; - if (anchorElement) { - anchorElement.click(); - } - }; - /** - * onDownlad, form 2 - * Handle the download triggering an outside event - */ - const handleDownload = () => { - if (onDownload) { - onDownload?.(id, downloadUrl); - } else if (typeof downloadUrl == "string") { - innerDownload(); - } - }; - /** - * Perform abort event when xhr is given - */ - const handleAbort = (): void => { - //trigger abort event - xhr?.abort(); - // handle externally the abort event - onAbort?.(id); - }; - /** - * Handle onCancel event - */ - const handleCancel = (): void => { - // handle externally the cancel event - onCancel?.(id); - }; - - const handleDoubleClick = (): void => { - alert("double click on file"); - }; - if (file && typeof file.name == "string") { - if (classNameCreated) { - return ( - <div - className={classNameCreated} - style={style} - onClick={handleClick} - onMouseEnter={handleOnHoverEnter} - onMouseLeave={handleOnHoverLeave} - onDoubleClick={handleDoubleClick} - > - <div - className={`file-item-icon-container ${showInfo ? " hide" : ""}`} - > - <FileItemImageNeo - imageSource={imageSource} - url={url} - fileName={file.name} - /> - - <FileItemMainLayerNeo - showInfo={showInfo} - fileName={file.name} - onDelete={onDelete ? handleDelete : undefined} - onOpenImage={onSee && preview ? handleOpenImage : undefined} - onOpenVideo={onWatch && preview ? handleOpenVideo : undefined} - onDownloadFile={ - onDownload || downloadUrl ? handleDownload : undefined - } - isVideo={isVideo} - onOpenInfo={handleOpenInfo} - info={info || false} - valid={valid} - isImage={isImage} - sizeFormatted={sizeFormatted} - uploadStatus={uploadStatus} - localization={localization} - hovering={alwaysActive || hovering} - progress={localProgress} - onAbort={onAbort ? handleAbort : undefined} - onCancel={onCancel ? handleCancel : undefined} - /> - - <FileItemFullInfoLayer - showInfo={showInfo} - errors={errors} - fileName={file.name} - fileSize={fileSizeFormater(file.size)} - fileType={file.type} - valid={valid} - onClose={handleCloseInfo} - uploadStatus={uploadStatus} - uploadMessage={uploadMessage} - localization={localization} - resultOnTooltip={resultOnTooltip} - /> - </div> - - {!onlyImage && ( - <div className="file-item-name">{shrinkWord(file.name)}</div> - )} - { - //resultOnTooltip && ( - <Tooltip - open={resultOnTooltip && hovering} - //open={true} - uploadStatus={uploadStatus} - valid={valid} - errors={errors} - uploadMessage={uploadMessage} - ></Tooltip> - //) - } - {downloadUrl && ( - <a - hidden - ref={dui_anchor_ref} - href={downloadUrl} - download={file.name} - > - download_file - </a> - )} - </div> - ); - } else { - return ( - <React.Fragment> - <FuiSkeleton /> - </React.Fragment> - ); - } - } else { - return <React.Fragment></React.Fragment>; - } -}; -export default FileItem; diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemProps.ts b/src/files-ui/components/file-item/components/FileItem/FileItemProps.ts deleted file mode 100644 index 7f5366bac2e083037293eb353739b605e96e66ed..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItem/FileItemProps.ts +++ /dev/null @@ -1,199 +0,0 @@ -import { Localization, UPLOADSTATUS } from "../../../../core"; -import { OverridableComponentProps } from "../../../overridable"; - -export interface FileItemPropsMap extends OverridableComponentProps { - /** - * The file object obtained from client drop or selection - */ - file?: File; - /** - * The name of the file - */ - name?: string; - /** - * The file mime type - */ - type?: string; - /** - * the size of the file in bytes - */ - size?: number; - /** - * A function of what to do when close button is pressed or clicked - */ - onDelete?: (fileId: number | string | undefined) => void; - /** - * A function that return a file object when "see" button is pressed or clicked - */ - onSee?: (imageUrl: string) => void; - /** - * A function that return a file object when "play" button is presssed or clicked - */ - onWatch?: (videoUrl: File) => void; - /** - * Whether to see as grid or inline (horizontal list) - */ - errors?: string[]; - /** - * individual validator for each file - */ - //validator?: FileItemValidator; - /** - * identifier for the file - */ - id?: string | number; - /** - * if true, and if the file is an image, - * makes visible the "view" button that will get the image url - * Also, it will be visible only when file is valid - */ - preview?: boolean; - /** - * whether to show a valid or rejected message ("ok", "rejected") - * by def. valid is false (if not present, it's false too) - * This value wil affect preview behaviour, - * If not valid, the preview will not be shown, nor the view button - */ - valid?: boolean | null; - /** - * This feature is hidden, it is not present on the documentation - * because it's experimental. If you found this prop, you can test it - * and comment us if any issue is found. Thanks in advance. - * - * Make file name, info layer, size and "valid message" - * not visible - */ - onlyImage?: boolean; - /** - * whether to show the info layer or not - * and whether to make visible the info button or not. - * Only works when image file is given - */ - info?: boolean; - /** - * A string representation or web url of the image - * that will be set to the "src" prop of an <img/> tag - * <img src={`${url}`} /> - */ - imageUrl?: string; - /** - * The message from server - */ - uploadMessage?: string; - /** - * where to place the file name - * [in construction] - */ - //fileName?: "bottom" | "inside"; - /** - * The current upload status of the file - */ - uploadStatus?: UPLOADSTATUS; - /** - * If present, preview on full screen will - * be presented in the real image resolution - */ - hd?: boolean | undefined; - /** - * language to be used - * for now - * only English and Spanish is supported - */ - localization?: Localization; - /** - * The elevation or shadow of container - * range of shadows is from 0 to 4, - * other number o values are considered as 0 - */ - elevation?: "1" | "2" | "3" | "4" | 1 | 2 | 3 | 4 | false; - /** - * Flag that determines whether actions are visible always, or only on hover event - */ - alwaysActive?: boolean; - /** - * Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem - */ - resultOnTooltip?: boolean; - /** - * Url to perform a GET request in order to download the file. - * This action is triggered when download button is clicked or pressed. - * In case onDownload prop is given - */ - downloadUrl?: string; - /** - * Event that is triggered when download button is clicked or pressed - */ - onDownload?: (fileId: number | string | undefined, downloadUrl?: string) => void; - /** - * the current percentage upload progress - * - */ - progress?: number; - /** - * Whether to show progress or not. - * @default true if xhr is initialized - * @default false if xhr is not given - */ - showProgress?: boolean; - /** - * abort event - */ - onAbort?: Function; - /** - * cancel when preparing event - */ - onCancel?: Function; - /** - * A reference to the XHR object that allows the upload and abort event. - * and progress - */ - xhr?: XMLHttpRequest; - /** - * Event that is triggered when user duble clicks the component - */ - onDoubleClick?: (evt: React.MouseEvent) => void; - /** - * Event that is triggered when user duble clicks the component - */ - onRightClick?: (evt: React.MouseEvent) => void; - - /** - * Flag that indicates whether to show a background blur image or not - */ - backgroundBlurImage?: boolean; - /** - * Flag that indicates whether to activates dark mode for component or not - */ - darkMode?: boolean; -} - -export type FileItemProps = { - [F in keyof FileItemPropsMap]: FileItemPropsMap[F] -} - -/** - * Base default props - */ -export const FileItemPropsDefault: FileItemProps = { - onDelete: undefined, - file: undefined, - color: "#071e25", - // validator: undefined, - id: undefined, - style: {}, - preview: false, - valid: undefined, - info: false, - hd: undefined, - localization: "EN-en", - onlyImage: false, - imageUrl: undefined, - errors: undefined, - elevation: false, - alwaysActive: undefined, - progress: undefined, - resultOnTooltip: true, - backgroundBlurImage: true, - darkMode: false, - //fileName: "bottom" -} diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemPropsNeo.ts b/src/files-ui/components/file-item/components/FileItem/FileItemPropsNeo.ts deleted file mode 100644 index 81fa8390ddecae3d7d79383bc23996f721524469..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItem/FileItemPropsNeo.ts +++ /dev/null @@ -1,167 +0,0 @@ -import { Localization, UPLOADSTATUS } from "../../../../core"; -import { OverridableComponentProps } from "../../../overridable"; - - - -export interface FileItemPropsNeoMap extends OverridableComponentProps { - /** - * The file object - */ - file?: File; - /** - * A function of what to do when close button is pressed or clicked - */ - onDelete?: (fileId: number | string | undefined) => void; - /** - * A function that return a file object when "see" button is pressed or clicked - */ - onSee?: (imageUrl: string) => void; - /** - * A function that return a file object when "play" button is presssed or clicked - */ - onWatch?: (videoUrl: File) => void; - /** - * Whether to see as grid or inline (horizontal list) - */ - errors?: string[]; - /** - * individual validator for each file - */ - //validator?: FileItemValidator; - /** - * identifier for the file - */ - id?: string | number; - /** - * if true, and if the file is an image, - * makes visible the "view" button that will get the image url - * Also, it will be visible only when file is valid - */ - preview?: boolean; - /** - * whether to show a valid or rejected message ("ok", "rejected") - * by def. valid is false (if not present, it's false too) - * This value wil affect preview behaviour, - * If not valid, the preview will not be shown, nor the view button - */ - valid?: boolean | null; - /** - * This feature is hidden, it is not present on the documentation - * because it's experimental. If you found this prop, you can test it - * and comment us if any issue is found. Thanks in advance. - * - * Make file name, info layer, size and "valid message" - * not visible - */ - onlyImage?: boolean; - /** - * whether to show the info layer or not - * also whether to make visible the info button or not , - * Only works when given a image file - */ - info?: boolean; - /** - * A string representation or web url of the image - * that will be set to the "src" prop of an <img/> tag - * <img src={`${url}`} /> - */ - imageUrl?: string; - /** - * The message from server - */ - uploadMessage?: string; - /** - * where to place the file name - * [in construction] - */ - //fileName?: "bottom" | "inside"; - /** - * The current upload status of the file - */ - uploadStatus?: UPLOADSTATUS; - /** - * If present, preview on full screen will - * be presented in the real image resolution - */ - hd?: boolean | undefined; - /** - * language to be used - * for now - * only English and Spanish is supported - */ - localization?: Localization; - /** - * The elevation or shadow of container - * range of shadows is from 0 to 4, - * other number o values are considered as 0 - */ - elevation?: "1" | "2" | "3" | "4" | 1 | 2 | 3 | 4 | false; - /** - * Flag that determines whether actions are visible always, or only on hover event - */ - alwaysActive?: boolean; - /** - * Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem - */ - resultOnTooltip?: boolean; - /** - * Url to perform a GET request in order to download the file. - * This action is triggered when download button is clicked or pressed. - * In case onDownload prop is given - */ - downloadUrl?: string; - /** - * Event that is triggered when download button is clicked or pressed - */ - onDownload?: (fileId: number | string | undefined, downloadUrl?: string) => void; - /** - * the current percentage upload progress - * - */ - progress?: number; - /** - * Whether to show progress or not. - * @default true if xhr is initialized - */ - showProgress?: boolean; - /** - * abort event - */ - onAbort?: Function; - /** - * cancel when preparing event - */ - onCancel?: Function; - /** - * A reference to the XHR object that allows the upload and abort event. - * and progress - */ - xhr?: XMLHttpRequest; -} -export type FileItemPropsNeo = { - [F in keyof FileItemPropsNeoMap]: FileItemPropsNeoMap[F] -} -/** - * Base default props - */ -export const FileItemNeoPropsDefault: FileItemPropsNeo = { - onDelete: undefined, - file: undefined, - //color: "#071e25", - // validator: undefined, - id: undefined, - style: {}, - preview: false, - valid: undefined, - info: false, - hd: undefined, - localization: "EN-en", - onlyImage: false, - imageUrl: undefined, - errors: undefined, - elevation: false, - alwaysActive: undefined, - progress: undefined, - showProgress: true - //fileName: "bottom" -} diff --git a/src/files-ui/components/file-item/components/FileItem/useFileItemNeoInitializer.ts b/src/files-ui/components/file-item/components/FileItem/useFileItemNeoInitializer.ts deleted file mode 100644 index 94e5c582a215ffafd552d17de1ef5d948369f525..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItem/useFileItemNeoInitializer.ts +++ /dev/null @@ -1,90 +0,0 @@ -import * as React from "react"; -import { getURLFileIco, readAsDataURL } from "../../../../core"; - -/** - * Initializer hook for FileItemNeo - * @param file The file Object - * @param valid Whether the file is valid, not valid or not set - * @param preview Whether to show a preview on FileItem - * @param imageUrl The image url - * @param xhr the xhr object - * @param progress the current progress given by props - * @returns an array thta contains the following properties [isImage, isVideo, url, imageSource, localProgress] - */ -const useFileItemNeoInitializer = ( - file: File | undefined, - valid: boolean | undefined | null, - preview: boolean, - imageUrl: string | undefined, - xhr?: XMLHttpRequest, - -): [boolean, boolean, string, string | undefined] => { - - const [isImage, setIsImage] = React.useState<boolean>(false); - const [isVideo, setIsVideo] = React.useState<boolean>(false); - const [url, setUrl] = React.useState<string>(""); - const [imageSource, setImageSource] = React.useState<string | undefined>(undefined); - - - - const init = async ( - file: File | undefined, - valid: boolean | undefined | null, - preview: boolean, - imageUrl: string | undefined, - xhr?: XMLHttpRequest, - progress?: number - ) => { - ////////////////////////////// - if (!file) return; - const { url } = getURLFileIco(file as File); - //console.log("init", url); - setUrl(url); - if (imageUrl) { - setIsImage(true); - setImageSource(imageUrl); - return; - } else { - const headerMime: string = file.type ? file.type.split("/")[0] : "octet"; - const tailMime: string = file.type ? file.type.split("/")[1] : "octet"; - setIsImage(headerMime === "image"); - setIsVideo( - headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime) - ); - if ( - preview && - (valid || typeof valid === "undefined" || valid === null) && - headerMime === "image" - ) { - const response = await readAsDataURL(file); - //console.log("response image", response); - if (response) { - setImageSource(response as string); - //check if resize image is enabled - } else { - setImageSource(undefined); - } - } - } - /////////////// UPLOAD OBJECT /////////////// - - //if (!localProgress) { - //handleProgress(1); - //} - }; - - - - ////// EFFECT - React.useEffect(() => { - init(file, valid, preview || false, imageUrl); - return () => { - setImageSource(undefined); - setIsImage(false); - setIsVideo(false); - }; - // eslint-disable-next-line - }, [file, valid, preview, imageUrl,]); - return [isImage, isVideo, url, imageSource]; -} -export default useFileItemNeoInitializer; \ No newline at end of file diff --git a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.scss b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.scss deleted file mode 100644 index c6360df97f6d598e21696943e631e8503a522517..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.scss +++ /dev/null @@ -1,49 +0,0 @@ -.file-item-list-container { - // padding: 5px; - //z-index: 1; - &::-webkit-scrollbar { - width: 9px; - } - &::-webkit-scrollbar-track { - background: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: #646c7fa9; - border-radius: 20px; - border: transparent; - } - //margin: 25px 0; - //background-color: rgba(255, 255, 255, 0.596); - background-color: transparent; - color: black; - height: 100%; - //width: 100%; - width: 100%; - //margin: 100px 0; - //width: inherit; - - // padding: 2%; - align-items: center; - scrollbar-width: thin; - &.file-item-list-grid { - overflow: auto; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-evenly; - } - &.file-item-list-no-scroll{ - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-evenly; - overflow: unset; - } - &.file-item-list-list { - overflow: auto; - //flex-wrap: wrap; - align-items: center; - //justify-content: center; - display: inline-flex; - } -} diff --git a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.tsx b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.tsx deleted file mode 100644 index a61211c3b26d787f6d1cbce529d0f9168664d002..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import "./FileItemContainer.scss"; - -import React, { FC } from "react"; -import { FileItemContainerProps } from "./FileItemContainerProps"; - -const FileItemContainer: FC<FileItemContainerProps> = ( - props: FileItemContainerProps, -) => { - const { children, view, style, disableScroll } = props; - const finalView = disableScroll ? "no-scroll" : view || "list"; - /* function handleClick<T extends HTMLDivElement>( - e: React.MouseEvent<T, MouseEvent> - ): void { - e.preventDefault(); - } */ - return ( - <div - className={`file-item-list-container file-item-list-${finalView}`} - style={style} - //onClick={handleClick} - > - {children} - </div> - ); -}; -export default FileItemContainer; diff --git a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainerProps.ts b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainerProps.ts deleted file mode 100644 index aa3cc9463dad11e4b2ad9eea988ab824099fbcca..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainerProps.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { OverridableComponentProps } from "../../../overridable"; - -export interface FileItemContainerProps extends OverridableComponentProps { - /** - * `grid` will display files in a grid layout. `list` will display - * files in a horizontal list. - * Convenient for saving space in page. - */ - view?: "grid" | "list"; - /** - * if present or true, removes scrolls - * and sets the Dropzone in a grid view - */ - disableScroll?: boolean; -} \ No newline at end of file diff --git a/src/files-ui/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx b/src/files-ui/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx deleted file mode 100644 index e0d859f802e988f0f8bedcc7f791593130545305..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import * as React from "react"; -import { - FileItemLocalizerSelector, - Localization, - LocalLabels, - UPLOADSTATUS, -} from "../../../../core"; -import { Cancel } from "../../../icons"; -import FileItemStatus from "../FileItemStatus/FileItemStatus"; - -const FileItemFullInfoLayer: React.FC<FileItemFullInfoLayerProps> = ( - props: FileItemFullInfoLayerProps -) => { - const { - showInfo, - valid, - onClose, - fileName, - fileSize, - fileType, - uploadStatus, - uploadMessage, - localization, - errors, - resultOnTooltip, - } = props; - const FileItemFullInfoLocalizer: LocalLabels = FileItemLocalizerSelector( - localization as Localization - ).fullInfoLayer as LocalLabels; - const handleCloseInfo = () => { - onClose?.(); - }; - return ( - <div className={showInfo ? "full-info" : "full-info hide"}> - <span - style={{ - display: "flex", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "space-between", - }} - > - <Cancel - style={{ margin: 0, right: 0, top: 0 }} - color="rgba(255,255,255,0.8)" - onClick={handleCloseInfo} - colorFill="black" - /> - {uploadStatus && uploadStatus !== "uploading" ? ( - <FileItemStatus - uploadStatus={uploadStatus} - localization={localization as Localization} - /> - ) : ( - <FileItemStatus - valid={valid} - localization={localization as Localization} - /> - )} - </span> - - {!resultOnTooltip && !uploadMessage && errors && errors.length > 0 && ( - <div className={`name error`}> - {errors.map((error, index) => ( - <div key={index + 1}>{`- ${error}.\n`}</div> - ))} - </div> - )} - {!resultOnTooltip && uploadMessage && ( - <div className={`name ${uploadStatus}`}>{uploadMessage}</div> - )} - <div className="name"> - <span className="sub-label"> - {FileItemFullInfoLocalizer.name as string} - {/* localization === "ES-es" ? "Nombre: " : "Name: " */} - </span> - </div> - <div className="name">{fileName}</div> - {/** FILE SIZE */} - <div className="size"> - <span className="sub-label"> - {FileItemFullInfoLocalizer.size as string} - </span> - </div> - <div className="name">{fileSize}</div> - {/** FILE TYPE */} - <div className="mime"> - <span className="sub-label"> - {FileItemFullInfoLocalizer.type as string} - </span> - </div> - {fileType && <div className="mime">{fileType}</div>} - </div> - ); -}; -export default FileItemFullInfoLayer; - -export interface FileItemFullInfoLayerProps { - showInfo: boolean; - fileName: string; - fileSize: string; - fileType?: string; - valid?: boolean | null; - onClose: Function; - uploadMessage?: string; - uploadStatus?: UPLOADSTATUS; - /** - * language to be used - * for now - * only English and Spanish is supported - */ - localization?: Localization; - errors?: string[]; - /** - * Whether to display result of validation on InfoLayer or in tooltip on Hover FileItem - */ - resultOnTooltip?: boolean; -} diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.scss b/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.scss deleted file mode 100644 index 6bba9ac25397b7af26585c8110bfafe5090e0722..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.scss +++ /dev/null @@ -1,34 +0,0 @@ -.fui-img-container { - &.blur { - img { - filter: blur(4px); - width: 200%; - height: 200%; - } - } - &.card { - position: relative; - width: 80px; - //height: 80px; - } - position: absolute; - left: 0; - top: 0; - width: inherit; - height: inherit; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - overflow: hidden; - border-radius: 8px; - //z-index: -1; - img { - //filter: blur(0); - width: 100%; - //height: 100%; - background-repeat: no-repeat; - background-size: cover; - background-position: center; - } -} diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.tsx b/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.tsx deleted file mode 100644 index a557543c96df541fd34bca5b5720560dec5b851d..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from "react"; -import { ImagePreview } from "../../../previews"; -import "./FileItemImage.scss"; -export interface FileItemImageProps { - /** - * The image source - */ - imageSource: string | undefined; - /** - * the url file icon - */ - url: string; - /** - * The name to be used as alt - */ - fileName: string; - /** - * Flag that indicates whether to show a background blur image or not - */ - backgroundBlurImage: boolean; - /** - * - */ - card?: boolean; -} - -const FileItemImage: React.FC<FileItemImageProps> = ( - props: FileItemImageProps -) => { - const { imageSource, url, fileName, backgroundBlurImage, card } = props; - const [source, setSource] = React.useState<string | undefined>(undefined); - const [error, setError] = React.useState<boolean>(false); - React.useEffect(() => { - setSource(imageSource || url); - }, [imageSource, url]); - const handleError = () => { - setError(true); - setSource(url); - }; - return ( - <React.Fragment> - {!card && backgroundBlurImage && imageSource && !error && ( - <div className="fui-img-container blur"> - <ImagePreview src={imageSource} alt={`blur ${fileName}`} /> - </div> - )} - <div className={!card ? "fui-img-container" : "fui-img-container card"}> - <ImagePreview - onError={handleError} - src={source} - style={{ borderRadius: "0px" }} - alt={`preview ${fileName}`} - /> - </div> - </React.Fragment> - ); -}; -export default FileItemImage; diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.scss b/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.scss deleted file mode 100644 index 2c8763f883114987478426dde35b042bd0b06e31..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.scss +++ /dev/null @@ -1,29 +0,0 @@ -.dui-img-container { - &.blur { - img { - filter: blur(4px); - width: 200%; - height: 200%; - } - } - position: absolute; - left: 0; - top: 0; - width: inherit; - height: inherit; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - overflow: hidden; - border-radius: 8px; - //z-index: -1; - img { - //filter: blur(0); - width: 100%; - //height: 100%; - background-repeat: no-repeat; - background-size: cover; - background-position: center; - } - } \ No newline at end of file diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.tsx b/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.tsx deleted file mode 100644 index 88993471f8af008a6c406be22c8bee90735c9557..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from "react"; -import { ImagePreview } from "../../../previews"; -import "./FileItemImageNeo.scss"; -export interface FileItemImageNeoProps { - /** - * The image source - */ - imageSource: string | undefined; - /** - * the url file icon - */ - url: string; - /** - * The name to be used as alt - */ - fileName: string; -} - -const FileItemImageNeo: React.FC<FileItemImageNeoProps> = ( - props: FileItemImageNeoProps -) => { - const { imageSource, url, fileName } = props; - return ( - <React.Fragment> - {imageSource && ( - <div className="dui-img-container blur"> - <ImagePreview - //className="dui-img-container blur" - - src={imageSource} - alt={`blur ${fileName}`} - /> - </div> - )} - <div className="dui-img-container"> - <ImagePreview - // className="dui-img-container" - src={imageSource || url} - style={{ borderRadius: "0px" }} - alt={`preview ${fileName}`} - /> - </div> - </React.Fragment> - ); -}; -export default FileItemImageNeo; diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.scss deleted file mode 100644 index eb1e1d29f5e7895420292eeceb47994c6fdae58a..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.scss +++ /dev/null @@ -1,76 +0,0 @@ -.dui-loader-container { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; -} - -.svg_circle_loader { - border-radius: 50%; -} - -text.dui-text-dynamic-loader { - text-anchor: middle; - font-size: 1em; - fill: aliceblue; -} -.loader-container { - height: 60px; - width: 60px; - position: relative; - outline: 1px solid skyblue; -} - -//////////////////////////////////// - -.dui-main-loader-container { - position: relative; - min-width: 60px; - min-height: 60px; - background-color: rgba(0, 0, 0, 0.41); - border-radius: 50%; - - &.clickable{ - cursor: pointer; - } - &:hover { - background-color: rgba(0, 0, 0, 0.61); - } - .dui-abort-icon-container { - position: absolute; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - .dui-dynamic-preparing-loader-container { - position: absolute; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } -} -.x-button-abort { - position: absolute; - left: 8px; - top: 8px; - width: calc(100% - 16px); - height: calc(100% - 16px); - border-radius: 50%; - overflow: hidden; - fill: rgba(255, 255, 255, 0.808); -} -.x-button-abort:hover { - fill: rgba(255, 255, 255, 0.925); -} -.circle_loader { - fill: none; - stroke: #14ff00; - stroke-width: 6px; - transform-origin: center; - transform: rotate(-90deg); -} diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx deleted file mode 100644 index 590375f840c3a7667d1e8cc36bb5174d2ff45af1..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import * as React from "react"; -import { - FileItemLocalizerSelector, - Localization, - LocalLabels, - UPLOADSTATUS, -} from "../../../../../core"; -import { Clear } from "../../../../icons"; -import { DynamicLoader, BasePreparingLoader } from "../../../../loader"; -import DefaultLoaderNeo from "../../../../loader/DefaultLoader/DefaultLoader"; -import "./FileItemLoader.scss"; -interface FileItemLoaderProps { - height?: number; - width?: number; - uploadStatus?: UPLOADSTATUS; - /** - * language to be used for now - * only English, Russian, Chinesse, French, protuguese and Spanish is supported - */ - localization?: Localization; - /** - * the current percentage upload progress - */ - progress?: number; - /** - * abort event - */ - onAbort?: Function; - /** - * cancel event - */ - onCancel?: Function; -} -const FileItemLoader: React.FC<FileItemLoaderProps> = ( - props: FileItemLoaderProps -) => { - const { - uploadStatus, - localization, - progress, - onAbort, - width, - //height, - onCancel, - } = props; - //console.log("uploadStatus cancel",uploadStatus, onCancel); - const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector( - localization - ).status as LocalLabels; - // console.log("Loader", progress); - const circleRef: React.RefObject<SVGCircleElement> = - React.useRef<SVGCircleElement>(null); - - function setProgress( - percent: number, - myCircle: SVGCircleElement, - circumference: number - ) { - myCircle.style.strokeDashoffset = `${circumference * (1 - percent / 100)}`; - } - - React.useEffect(() => { - const myCircle: SVGCircleElement | null = circleRef.current; - if (myCircle && progress) { - //console.log("CIRCLE", progress, progress === 0 ? 1 : progress); - let circumference: number = 2 * Math.PI * myCircle.r.baseVal.value; - myCircle.style.strokeDasharray = `${circumference} 1000`; - setProgress(progress === 0 ? 1 : progress, myCircle, circumference); - } - }, [progress]); - const handleAbort = () => { - onAbort?.(); - }; - const handleCancel = () => { - onCancel?.(); - }; - //console.log("Loader onCancel", onCancel); - if (!uploadStatus) { - return <></>; - } - return ( - <React.Fragment> - {uploadStatus === "preparing" && ( - <React.Fragment> - <div - className="dui-main-loader-container clickable" - onClick={handleCancel} - > - {onCancel && ( - <div className="dui-abort-icon-container"> - <Clear - color="rgba(255,255,255,0.70)" - size={60} - colorFill="transparent" - /> - </div> - )} - - <div className="dui-dynamic-preparing-loader-container"> - <BasePreparingLoader - size={width || 60} - x={50} - y={50} - radius={46} - /> - </div> - </div> - </React.Fragment> - )} - - {uploadStatus === "uploading" && ( - <React.Fragment> - {typeof progress === "undefined" ? ( - <DefaultLoaderNeo - label={FileItemStatusLocalizer.uploading as string} - /> - ) : ( - <div - className={`dui-main-loader-container${ - onAbort ? " clickable" : "" - }`} - onClick={handleAbort} - > - <div className="dui-abort-icon-container"> - {onAbort && ( - <Clear - color="rgba(255,255,255,0.70)" - size={60} - colorFill="transparent" - /> - )} - </div> - <div className="dui-dynamic-preparing-loader-container"> - <DynamicLoader - size={width || 60} - x={30} - y={30} - radius={27} - percentage={progress} - width={6} - hidePerncentage={onAbort !== undefined} - /> - </div> - </div> - )} - </React.Fragment> - )} - </React.Fragment> - ); -}; -export default FileItemLoader; diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.scss deleted file mode 100644 index 2ffe154f923c891c9a3143862d8600097d853b55..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.scss +++ /dev/null @@ -1,19 +0,0 @@ -.dui-file-item-size { - font-size: 0.7rem; - border: 0.5px solid wheat; - //outline: 0.5px solid wheat; - text-align: center; - //border: none; - color: rgba(255, 255, 255, 0.89); - //margin: 1.5px 1.5px 0% 0%; - padding: 2px 1.5px; - border-radius: 7px; - background-color: rgba(32, 33, 36, 0.75); - min-width: 45px; - word-break: break-word; - font-family: inherit; - &:hover { - background-color: rgba(32, 33, 36, 0.85); - color: rgba(255, 255, 255, 0.97); - } -} diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.tsx deleted file mode 100644 index 4f431faaa02967d5ae1d872a560b0eb3ce717722..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from "react"; -import "./FileItemSize.scss"; -export type FileItemSizeProps = { - sizeFormatted?: string; -}; -const FileItemSize: React.FC<FileItemSizeProps> = ( - props: FileItemSizeProps -) => { - const { sizeFormatted } = props; - return ( - <React.Fragment> - {sizeFormatted && ( - <div className="dui-file-item-size">{sizeFormatted}</div> - )} - </React.Fragment> - ); -}; -export default FileItemSize; diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.scss deleted file mode 100644 index b72e2de0161a506e0aa4345ce276bc3ece9028fd..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.scss +++ /dev/null @@ -1,13 +0,0 @@ -.dui-main-layer-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - position: relative; - height: inherit; - width: 100%; - border-radius: 8px; - &.loading{ - background-color: rgba(0, 0, 0, 0.185); - } -} \ No newline at end of file diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.tsx deleted file mode 100644 index 716a3eda50cad83872c09e421c868bba7e87aa16..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import * as React from "react"; -import "./FileItemMainLayer.scss"; - -import MainLayerHeaderNeo from "../MainLayerHeader/MainLayerHeaderNeo"; -import MainLayerBodyNeo from "../MainLayerBody/MainLayerBodyNeo"; -import MainLayerFooterNeo from "../MainLayerFooter/MainLayerFooterNeo"; -import { Localization, UPLOADSTATUS } from "../../../../../core"; - -export interface FileItemMainLayerProps { - onOpenInfo: Function; - onOpenImage: Function | undefined; - onOpenVideo: Function | undefined; - onDelete: Function | undefined; - onDownloadFile: Function | undefined; - //fileNamePosition: FileItemProps["fileName"]; - fileName: string; - info: boolean; - /** - * whether show a valid or rejected message - * by def. valid is false (if not present, is false too) - */ - valid?: boolean | null; - isImage: boolean; - isVideo: boolean; - uploadStatus?: UPLOADSTATUS; - sizeFormatted: string; - /** - * language to be used - * for now - * only English and Spanish is supported - */ - localization?: Localization; - hovering?: boolean; - /** - * the current percentage upload progress - * - */ - progress?: number; - /** - * abort event - */ - onAbort?: Function; - onCancel?: Function; - showInfo: boolean; -} - -const FileItemMainLayer: React.FC<FileItemMainLayerProps> = ( - props: FileItemMainLayerProps -) => { - const { - onDelete, - info, - valid, - isImage, - isVideo, - showInfo, - onOpenInfo, - onOpenImage, - onOpenVideo, - onDownloadFile, - sizeFormatted, - uploadStatus, - localization, - hovering, - progress, - onAbort, - onCancel, - } = props; - //console.log("MainLayer onCancel", onCancel); - - return ( - <React.Fragment> - <div className={"dui-main-layer-container"}> - <MainLayerHeaderNeo - hide={showInfo} - onDelete={onDelete} - uploadStatus={uploadStatus} - hovering={hovering} - /> - - <MainLayerBodyNeo - hide={showInfo} - uploadStatus={uploadStatus} - localization={localization} - progress={progress} - onAbort={onAbort} - valid={valid} - hovering={hovering} - onCancel={onCancel} - /> - <MainLayerFooterNeo - hide={showInfo} - uploadStatus={uploadStatus} - // uploadComplete={uploadComplete} - localization={localization} - sizeFormatted={sizeFormatted} - valid={valid} - info={info} - isImage={isImage} - isVideo={isVideo} - onDownloadFile={onDownloadFile} - onOpenImage={onOpenImage} - onOpenVideo={onOpenVideo} - onOpenInfo={onOpenInfo} - hovering={hovering} - /> - </div> - </React.Fragment> - ); -}; -export default FileItemMainLayer; diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayerNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayerNeo.tsx deleted file mode 100644 index d7963b893a699eb40538ca78810e17577447a73e..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayerNeo.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from "react"; -//import { FileItemProps } from "../FileItem/FileItemProps"; -//import FileItemStatus from "../FileItemStatus/FileItemStatus"; - -import "./FileItemMainLayer.scss"; - -import MainLayerHeaderNeo from "../MainLayerHeader/MainLayerHeaderNeo"; -import MainLayerBodyNeo from "../MainLayerBody/MainLayerBodyNeo"; -import MainLayerFooterNeo from "../MainLayerFooter/MainLayerFooterNeo"; -import { Localization, UPLOADSTATUS } from "../../../../../core"; -//import {shrinkWord} from "./../../utils"; -export interface FileItemMainLayerNeoProps { - onOpenInfo: Function; - onOpenImage: Function | undefined; - onOpenVideo: Function | undefined; - onDelete: Function | undefined; - onDownloadFile: Function | undefined; - //fileNamePosition: FileItemProps["fileName"]; - fileName: string; - info: boolean; - /** - * whether show a valid or rejected message - * by def. valid is false (if not present, is false too) - */ - valid?: boolean | null; - isImage: boolean; - isVideo: boolean; - uploadStatus?: UPLOADSTATUS; - sizeFormatted: string; - /** - * language to be used - * for now - * only English and Spanish is supported - */ - localization?: Localization; - hovering?: boolean; - /** - * the current percentage upload progress - * - */ - progress?: number; - /** - * abort event - */ - onAbort?: Function; - onCancel?: Function; - showInfo: boolean; -} - -const FileItemMainLayerNeo: React.FC<FileItemMainLayerNeoProps> = ( - props: FileItemMainLayerNeoProps -) => { - const { - onDelete, - info, - valid, - isImage, - isVideo, - showInfo, - onOpenInfo, - onOpenImage, - onOpenVideo, - onDownloadFile, - sizeFormatted, - uploadStatus, - localization, - hovering, - progress, - onAbort, - onCancel, - } = props; - - return ( - <React.Fragment> - <div className={"dui-main-layer-container"}> - <MainLayerHeaderNeo - hide={showInfo} - onDelete={onDelete} - uploadStatus={uploadStatus} - hovering={hovering} - /> - - <MainLayerBodyNeo - hide={showInfo} - uploadStatus={uploadStatus} - localization={localization} - progress={progress} - onAbort={onAbort} - valid={valid} - hovering={hovering} - onCancel={onCancel} - /> - <MainLayerFooterNeo - hide={showInfo} - uploadStatus={uploadStatus} - // uploadComplete={uploadComplete} - localization={localization} - sizeFormatted={sizeFormatted} - valid={valid} - info={info} - isImage={isImage} - isVideo={isVideo} - onDownloadFile={onDownloadFile} - onOpenImage={onOpenImage} - onOpenVideo={onOpenVideo} - onOpenInfo={onOpenInfo} - hovering={hovering} - /> - </div> - </React.Fragment> - ); -}; -export default FileItemMainLayerNeo; diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.scss deleted file mode 100644 index 4f2ad701889d34ac17a9cb1ee2976124674200c3..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.scss +++ /dev/null @@ -1,13 +0,0 @@ -.dui-file-item-main-layer-body { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - position: relative; - .dui-file-status-absolute-container { - position: absolute; - bottom: 0; - left: 0; - } -} diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.tsx deleted file mode 100644 index d4033b24967d4b64cf66a8a1a31e91349f802a75..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import * as React from "react"; -import { Localization, UPLOADSTATUS } from "../../../../../core"; - -import FileItemStatus from "../../FileItemStatus/FileItemStatus"; -import FileItemLoader from "../FileItemLoader/FileItemLoader"; -import "./MainLayerBody.scss"; -export type MainLayerBodyProps = { - /** - * whether show a valid or rejected message - * by def. valid is false (if not present, is false too) - */ - valid?: boolean | null; - - showInfo: boolean; - /** - * This feature is hidden, it is not present on the documentation - * because it's experimental. If you found this prop, you can test it - * and comment us if any issue is found. Thanks in advance. - * - * Make file name, info layer, size and "valid message" - * not visible - */ - onlyImage?: boolean; - uploadStatus?: UPLOADSTATUS; - - /** - * language to be used - * for now - * only English and Spanish is supported - */ - localization?: Localization; - hovering?: boolean; - /** - * the current percentage upload progress - * - */ - progress?: number; - /** - * abort event - */ - onAbort?: Function; - onCancel?: Function; - uploadComplete?: boolean; -}; -const MainLayerBody: React.FC<MainLayerBodyProps> = ( - props: MainLayerBodyProps -) => { - const { - uploadStatus, - showInfo, - hovering, - //uploadComplete, - localization, - onAbort, - progress, - onlyImage, - valid, - onCancel, - } = props; - - const [uploadComplete, setUploadComplete] = React.useState<boolean>(false); - React.useEffect(() => { - if ( - uploadStatus && - ["success", "error", "success", "aborted"].includes(uploadStatus) - ) { - setTimeout(() => { - setUploadComplete(true); - }, 2000); - } - return () => { - setUploadComplete(false); - }; - }, [uploadStatus]); - -/* React.useEffect(() => { - console.log("MainLayerBody", uploadStatus, uploadComplete,progress); - }, [uploadStatus, uploadComplete]); */ - - return ( - <div className="dui-file-item-main-layer-body"> - {/** UPLOADING, upload isn't completed, showInfo=false and uploadStatus != undef */} - {(uploadStatus === "preparing" || - uploadStatus === "uploading") && - !showInfo && - !uploadComplete ? ( - <React.Fragment> - <FileItemLoader - uploadStatus={uploadStatus} - localization={localization as Localization} - progress={progress} - onAbort={onAbort} - height={60} - width={60} - onCancel={onCancel} - /> - <div className="dui-file-status-absolute-container"> - {!showInfo && !onlyImage && hovering && ( - <React.Fragment> - {/** When always actie or hovering he file status validation must be visible - * valid, not valid - * - */} - {uploadStatus && - uploadStatus !== "preparing" && - uploadStatus !== "uploading" ? ( - <FileItemStatus - uploadStatus={uploadStatus} - localization={localization as Localization} - /> - ) : ( - <FileItemStatus - valid={valid} - localization={localization as Localization} - /> - )} - </React.Fragment> - )} - </div> - </React.Fragment> - ) : ( - <React.Fragment> - {/** Upload ststus or valid status depending on the value on the corner */} - <div className="dui-file-status-aboslute-container"> - {!showInfo && !onlyImage && hovering && ( - <React.Fragment> - {uploadStatus ? ( - <FileItemStatus - uploadStatus={uploadStatus} - localization={localization as Localization} - /> - ) : ( - <FileItemStatus - valid={valid} - localization={localization as Localization} - /> - )} - </React.Fragment> - )} - </div> - </React.Fragment> - )} - </div> - ); -}; -export default MainLayerBody; diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo.tsx deleted file mode 100644 index a0ee09d1d76d928bb849e0a64ba897b03b0a10f9..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import * as React from "react"; -import { Localization, UPLOADSTATUS } from "../../../../../core"; - -import FileItemUploadStatus from "../../FileItemStatus/FileItemUploadStatus"; -import FileItemValidStatus from "../../FileItemStatus/FileItemValidStatus"; -import FileItemLoader from "../FileItemLoader/FileItemLoader"; -import "./MainLayerBody.scss"; - -export type MainLayerBodyNeoProps = { - /** - * whether show a valid or rejected message - * by def. valid is false (if not present, is false too) - */ - valid?: boolean | null; - hide?: boolean; - uploadStatus?: UPLOADSTATUS; - - /** - * language to be used - * for now - * only English and Spanish is supported - */ - localization?: Localization; - hovering?: boolean; - /** - * the current percentage upload progress - * - */ - progress?: number; - /** - * abort event - */ - onAbort?: Function; - onCancel?: Function; - uploadComplete?: boolean; -}; -const MainLayerBodyNeo: React.FC<MainLayerBodyNeoProps> = ( - props: MainLayerBodyNeoProps -) => { - const { - uploadStatus, - hide, - hovering, - //uploadComplete, - localization, - onAbort, - progress, - - valid, - onCancel, - } = props; - - const [uploadComplete, setUploadComplete] = React.useState<boolean>(false); - React.useEffect(() => { - if ( - uploadStatus && - ["success", "error", "aborted"].includes(uploadStatus) - ) { - setTimeout(() => { - setUploadComplete(true); - }, 2000); - } - return () => { - setUploadComplete(false); - }; - }, [uploadStatus]); - //console.log("MainLayerBody onCancel", onCancel); - return ( - <div className="dui-file-item-main-layer-body"> - {/** Uploading or preparing stage? */} - {!hide && !uploadComplete && ( - <React.Fragment> - <FileItemLoader - uploadStatus={uploadStatus} - localization={localization as Localization} - progress={progress} - onAbort={onAbort} - height={60} - width={60} - onCancel={onCancel} - /> - <FileItemUploadStatus - uploadStatus={uploadStatus} - localization={localization} - /> - </React.Fragment> - )} - <div className="dui-file-status-absolute-container"> - {!hide && hovering && ( - <React.Fragment> - {uploadComplete ? ( - <FileItemUploadStatus - uploadStatus={uploadStatus} - localization={localization} - /> - ) : ( - <FileItemValidStatus valid={valid} localization={localization} /> - )} - </React.Fragment> - )} - </div> - </div> - ); -}; -export default MainLayerBodyNeo; diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/PrincipalState.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/PrincipalState.tsx deleted file mode 100644 index 7a80e89a0a12fd053814ff034d1f5a250067435f..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/PrincipalState.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from "react"; -import { UPLOADSTATUS } from "../../../../../core"; -import DefaultLoaderNeo from "../../../../loader/DefaultLoader/DefaultLoader"; -export type PrincipalStateProps = { - uploadStatus?: UPLOADSTATUS; - valid?: boolean; -}; -const PrincipalState: React.FC<PrincipalStateProps> = ( - props: PrincipalStateProps -) => { - const { uploadStatus, valid } = props; - const [isUploading, setIsUploading] = React.useState<boolean | undefined>( - undefined - ); - const [isValid, setIsValid] = React.useState<boolean | undefined>(undefined); - React.useEffect(() => { - setIsUploading( - uploadStatus && - ["preparing", "uploading"].includes(uploadStatus) - ); - }, [uploadStatus]); - return ( - <div> - <DefaultLoaderNeo color="green" /> - </div> - ); -}; -export default PrincipalState; diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/SecondaryState.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/SecondaryState.tsx deleted file mode 100644 index 5c1e541be19ca6c69e60822849a19b859aeed398..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/SecondaryState.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from "react"; -export type SecondaryStateProps = { - uploadComplete?: boolean; -}; -const SecondaryState: React.FC<SecondaryStateProps> = ( - props: SecondaryStateProps -) => { - const { uploadComplete } = props; - //uploa status - if (uploadComplete) { - return <div></div>; - } - //valid - return <div></div>; -}; -export default SecondaryState; diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.scss deleted file mode 100644 index e93b6352c8f3dc173a90c165faf472ae6409bb4b..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.scss +++ /dev/null @@ -1,29 +0,0 @@ -.dui-main-layer-footer-container { - min-height: 23px; - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - //position: relative; - .dui-main-layer-footer-status { - //height: 0px; - //position: relative; - //bottom: 0px; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - width: 100%; - } - .dui-main-layer-footer { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - width: 100%; - // min-height: 20px; - } - - //width: inherit; -} diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.tsx deleted file mode 100644 index 16fae2819145a3c60ffb7eac3fd8f9d3fec15880..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.tsx +++ /dev/null @@ -1,166 +0,0 @@ -import * as React from "react"; -import { Localization, UPLOADSTATUS } from "../../../../../core"; -import { - PlayIcon, - DownloadFile, - InfoDisney, - Visibility, -} from "../../../../icons"; - -import FileItemStatus from "../../FileItemStatus/FileItemStatus"; -import FileItemSize from "../FileItemSize"; - -import "./MainLayerFooter.scss"; -export type MainLayerFooterProps = { - hovering?: boolean; - onlyImage?: boolean; - uploadStatus?: UPLOADSTATUS; - // uploadComplete?: boolean; - localization?: Localization; - showInfo?: boolean; - sizeFormatted?: string; - /** - * whether show a valid or rejected message - * by def. valid is false (if not present, is false too) - */ - valid?: boolean | null; - isImage?: boolean; - isVideo?: boolean; - info?: boolean; - onOpenInfo?: Function; - onOpenImage?: Function | undefined; - onOpenVideo?: Function | undefined; - onDownloadFile?: Function | undefined; -}; -const MainLayerFooter: React.FC<MainLayerFooterProps> = ( - props: MainLayerFooterProps -) => { - const { - onlyImage, - uploadStatus, - // uploadComplete, - localization, - showInfo, - sizeFormatted, - valid, - info, - isImage, - isVideo, - onDownloadFile, - onOpenImage, - onOpenVideo, - onOpenInfo, - hovering, - } = props; - const handleOpenInfo = () => { - onOpenInfo?.(); - }; - const handleOpenImage = () => { - onOpenImage?.(); - }; - const handleOpenVideo = () => { - onOpenVideo?.(); - }; - const handleDownloadFile = () => { - onDownloadFile?.(); - }; - - const [uploadComplete, setUploadComplete] = React.useState<boolean>(false); - React.useEffect(() => { - if ( - uploadStatus && - ["success", "error", "success", "aborted"].includes(uploadStatus) - ) { - setTimeout(() => { - setUploadComplete(true); - }, 2000); - } - return () => { - setUploadComplete(false); - }; - }, [uploadStatus]); - -/* React.useEffect(() => { - console.log("MainLayerFooter", uploadStatus, uploadComplete); - }, [uploadStatus, uploadComplete]); - */ - return ( - <React.Fragment> - <div className="dui-main-layer-footer-container"> - {/** Show only when footer is not visible */} - <div className="dui-main-layer-footer-status"> - {!onlyImage && - uploadStatus && - uploadStatus !== "uploading" && - uploadComplete ? ( - <React.Fragment> - {!showInfo && !hovering && ( - <FileItemStatus - uploadStatus={uploadStatus} - localization={localization as Localization} - /> - )} - </React.Fragment> - ) : ( - <React.Fragment> - {!showInfo && !hovering && typeof valid !== "undefined" && ( - <FileItemStatus - valid={valid} - localization={localization as Localization} - /> - )} - </React.Fragment> - )} - </div> - {/** Action buttons and file size */} - <div className="dui-main-layer-footer"> - {!showInfo && hovering && ( - <React.Fragment> - {!onlyImage && <FileItemSize sizeFormatted={sizeFormatted} />} - - {isImage && - onOpenImage && - typeof valid === "boolean" && - valid && ( - <Visibility - className="dui-file-item-icon" - color="rgba(255,255,255,0.851)" - onClick={handleOpenImage} - size="small" - /> - )} - {isVideo && - onOpenVideo && - typeof valid === "boolean" && - valid && ( - <PlayIcon - className="dui-file-item-icon" - color="rgba(255,255,255,0.851)" - onClick={handleOpenVideo} - size="small" - /> - )} - {onDownloadFile && ( - <DownloadFile - className="dui-file-item-icon" - color="rgba(255,255,255,0.851)" - onClick={handleDownloadFile} - size="small" - /> - )} - {!onlyImage && info && ( - <InfoDisney - className="dui-file-item-icon" - onClick={handleOpenInfo} - color="rgba(255,255,255,0.851)" - size="micro" - /> - )} - </React.Fragment> - )} - </div> - </div> - </React.Fragment> - ); -}; -export default MainLayerFooter; diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooterNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooterNeo.tsx deleted file mode 100644 index 93527bb7e556f8784f8ac5cffc2bec4cb95877c9..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooterNeo.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import * as React from "react"; -import { Localization, UPLOADSTATUS } from "../../../../../core"; -import { - PlayIcon, - DownloadFile, - InfoDisney, - Visibility, -} from "../../../../icons"; - -import FileItemStatus from "../../FileItemStatus/FileItemStatus"; -import FileItemSize from "../FileItemSize"; - -import "./MainLayerFooter.scss"; -export type MainLayerFooterNeoProps = { - hovering?: boolean; - uploadStatus?: UPLOADSTATUS; - // uploadComplete?: boolean; - localization?: Localization; - sizeFormatted?: string; - /** - * whether show a valid or rejected message - * by def. valid is false (if not present, is false too) - */ - valid?: boolean | null; - isImage?: boolean; - isVideo?: boolean; - info?: boolean; - onOpenInfo?: Function; - onOpenImage?: Function | undefined; - onOpenVideo?: Function | undefined; - onDownloadFile?: Function | undefined; - hide: boolean; -}; -const MainLayerFooterNeo: React.FC<MainLayerFooterNeoProps> = ( - props: MainLayerFooterNeoProps -) => { - const { - uploadStatus, - hide, - localization, - sizeFormatted, - valid, - info, - isImage, - isVideo, - onDownloadFile, - onOpenImage, - onOpenVideo, - onOpenInfo, - hovering, - } = props; - const handleOpenInfo = () => { - onOpenInfo?.(); - }; - const handleOpenImage = () => { - onOpenImage?.(); - }; - const handleOpenVideo = () => { - onOpenVideo?.(); - }; - const handleDownloadFile = () => { - onDownloadFile?.(); - }; - - const [uploadComplete, setUploadComplete] = React.useState<boolean>(false); - React.useEffect(() => { - if ( - uploadStatus && - ["success", "error", "aborted"].includes(uploadStatus) - ) { - setTimeout(() => { - setUploadComplete(true); - }, 2000); - } - return () => { - setUploadComplete(false); - }; - }, [uploadStatus]); - - return ( - <React.Fragment> - <div className="dui-main-layer-footer-container"> - {/** Show only when footer is not visible */} - <div className="dui-main-layer-footer-status"> - {!hide && - uploadStatus && - uploadStatus !== "uploading" && - uploadComplete ? ( - <React.Fragment> - {!hovering && ( - <FileItemStatus - uploadStatus={uploadStatus} - localization={localization as Localization} - /> - )} - </React.Fragment> - ) : ( - <React.Fragment> - {!hovering && typeof valid !== "undefined" && ( - <FileItemStatus - valid={valid} - localization={localization as Localization} - /> - )} - </React.Fragment> - )} - </div> - {/** Action buttons and file size */} - <div className="dui-main-layer-footer"> - {!hide && hovering && ( - <React.Fragment> - {<FileItemSize sizeFormatted={sizeFormatted} />} - - {isImage && - onOpenImage && - typeof valid === "boolean" && - valid && ( - <Visibility - className="dui-file-item-icon" - color="rgba(255,255,255,0.851)" - onClick={handleOpenImage} - size="small" - /> - )} - {isVideo && - onOpenVideo && - typeof valid === "boolean" && - valid && ( - <PlayIcon - className="dui-file-item-icon" - color="rgba(255,255,255,0.851)" - onClick={handleOpenVideo} - size="small" - /> - )} - {onDownloadFile && ( - <DownloadFile - className="dui-file-item-icon" - color="rgba(255,255,255,0.851)" - onClick={handleDownloadFile} - size="small" - /> - )} - {info && ( - <InfoDisney - className="dui-file-item-icon" - onClick={handleOpenInfo} - color="rgba(255,255,255,0.851)" - size="micro" - /> - )} - </React.Fragment> - )} - </div> - </div> - </React.Fragment> - ); -}; -export default MainLayerFooterNeo; diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.scss deleted file mode 100644 index aeab8b694c95312fe59f79f5ccb27b3f65c7dea2..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.scss +++ /dev/null @@ -1,9 +0,0 @@ -.dui-main-layer-header-container { - min-height: 22px; - width: 100%; - flex-direction: row; - display: flex; - align-items: center; - justify-content: flex-end; - //width: inherit; -} diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.tsx deleted file mode 100644 index 97ff284e499af299d70865f28a9b7622a7000bfb..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from "react"; -import { UPLOADSTATUS } from "../../../../../core"; -import { Clear } from "../../../../icons"; -import "./MainLayerHeader.scss"; - -export type MainLayerHeaderProps = { - onDelete?: Function; - uploadStatus?: UPLOADSTATUS; - hovering?: boolean; - showInfo: boolean; -}; - -const MainLayerHeader: React.FC<MainLayerHeaderProps> = ( - props: MainLayerHeaderProps -) => { - const { uploadStatus, onDelete, hovering, showInfo } = props; - const handleDelete = () => { - onDelete?.(); - }; - - return ( - <div className="dui-main-layer-header-container"> - {!showInfo && hovering && uploadStatus !== "uploading" && onDelete && ( - <Clear - className="dui-file-item-icon" - color="rgba(255,255,255,0.851)" - onClick={handleDelete} - size="small" - colorFill="transparent" - /> - )} - </div> - ); -}; -export default MainLayerHeader; diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeaderNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeaderNeo.tsx deleted file mode 100644 index f3a20534bb898659ff046a9a934d0b9050964486..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeaderNeo.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from "react"; -import { UPLOADSTATUS } from "../../../../../core"; -import { Clear } from "../../../../icons"; -import "./MainLayerHeader.scss"; - -export type MainLayerHeaderNeoProps = { - onDelete?: Function; - uploadStatus?: UPLOADSTATUS; - hovering?: boolean; - hide?: boolean; -}; - -const MainLayerHeaderNeo: React.FC<MainLayerHeaderNeoProps> = ( - props: MainLayerHeaderNeoProps -) => { - const { uploadStatus, onDelete, hovering, hide } = props; - const handleDelete = () => { - onDelete?.(); - }; - - return ( - <div className="dui-main-layer-header-container"> - {hovering && - !hide && - // ![ - uploadStatus !== "preparing" && - uploadStatus !== "uploading" && - // undefined, - //null, - //].includes(uploadStatus) - onDelete && ( - <Clear - className="dui-file-item-icon" - color="rgba(255,255,255,0.851)" - onClick={handleDelete} - size="small" - colorFill="transparent" - /> - )} - </div> - ); -}; -export default MainLayerHeaderNeo; diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.scss deleted file mode 100644 index d8e8c04b3c554002abe34ea837c9ff6d267c858d..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.scss +++ /dev/null @@ -1,49 +0,0 @@ -.dui-file-item-status-container { - text-align: center; - font-size: 0.8rem; - background-color: rgba(255, 255, 255, 0.8); - display: flex; - align-items: center; - flex-direction: row; - border-radius: 4px; - padding: 0.5px; - font-weight: 400; - &.file-status-error { - color: #f44336; - } - &.file-status-ok { - color: #5c7a1f; - } - &.file-status-loading { - &.percentage{ - padding: 7px 4px 2px 5px; - } - // - position: relative; - .abort-button { - position: absolute; - right: -2px; - top: -2px; - } - display: flex; - color: #8b6b10; - align-items: center; - justify-content: center; - flex-direction: column; - background-color: rgba(255, 255, 255, 0.7); - - //background-color: transparent; - .uploading-text { - &.up { - margin-bottom: -22px; - } - &.down { - margin-top: -20px; - } - - p.percentage { - font-weight: 500; - } - } - } -} diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.tsx deleted file mode 100644 index 7aa81245195da46f5f84fe153c4a1b7f53337d6c..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import React, { FC, Fragment } from "react"; - -import Loader from "../../../loader/DefaultLoader/loader"; -import { - CheckCircle, - CloudDone, - DoDisturb, - Remove, - // UploadDone, - UploadError, -} from "../../../icons"; -import { FileItemStatusProps } from "./FileItemStatusProps"; -import "./FileItemStatus.scss"; -import { FileItemLocalizerSelector, LocalLabels } from "../../../../core"; - -const FileItemStatus: FC<FileItemStatusProps> = ( - props: FileItemStatusProps -) => { - const { - valid, - uploadStatus, - //message, - localization, - progress, - onAbort, - } = props; - const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector( - localization - ).status as LocalLabels; - const handleAbort = () => { - onAbort?.(); - }; - return ( - <Fragment> - {uploadStatus ? ( - uploadStatus === "uploading" ? ( - <div - className={`dui-file-item-status-container file-status-loading${ - progress ? " percentage" : "" - }`} - > - {onAbort && ( - <div className="abort-button"> - <Remove - //className="dui-file-item-icon" - color="red" - onClick={handleAbort} - size="semi-medium" - colorFill="transparent" - /> - </div> - )} - - {progress && ( - <div className="uploading-text up"> - <p>{FileItemStatusLocalizer.uploading as string}</p> - </div> - )} - <Loader /> - <div className="uploading-text down"> - {progress ? ( - <p className="percentage"> - {progress.toFixed(0) + "%" || "100%"} - </p> - ) : ( - <p>{FileItemStatusLocalizer.uploading as string}</p> - )} - </div> - </div> - ) : uploadStatus === "aborted" ? ( - <div className="dui-file-item-status-container file-status-error"> - <UploadError - color="#f44336" - size="semi-medium" - className="status-icon" - /> - {FileItemStatusLocalizer.aborted as string} - </div> - ) : uploadStatus === "success" ? ( - <div className="dui-file-item-status-container file-status-ok"> - <CloudDone color="#4caf50" size="small" className="status-icon" /> - {FileItemStatusLocalizer.success as string} - </div> - ) : ( - <div className="dui-file-item-status-container file-status-error"> - <UploadError - color="#f44336" - size="semi-medium" - className="status-icon" - /> - {FileItemStatusLocalizer.error as string} - </div> - ) - ) : valid !== null && typeof valid !== "undefined" ? ( - <Fragment> - {valid ? ( - <div className="dui-file-item-status-container file-status-ok"> - <CheckCircle - color="#4caf50" - size="small" - className="status-icon" - /> - {FileItemStatusLocalizer.valid as string} - </div> - ) : ( - <div className="dui-file-item-status-container file-status-error"> - <DoDisturb color="#f44336" size="small" className="status-icon" /> - {FileItemStatusLocalizer.denied as string} - </div> - )} - </Fragment> - ) : ( - <Fragment></Fragment> - )} - </Fragment> - ); -}; -export default FileItemStatus; diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatusProps.ts b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatusProps.ts deleted file mode 100644 index 118623abe19ccf6e62db54a6b6c39e68baad8e9a..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatusProps.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Localization, UPLOADSTATUS } from "../../../../core"; - - -export interface FileItemStatusProps { - /** - * whether show a valid or rejected message - * by def. valid is false (if not present, is false too) - */ - valid?: boolean | null; - /** - * - */ - uploadStatus?: UPLOADSTATUS; - /** - * A message for the status item - */ - message?: string; - /** - * language to be used - * for now - * only English and Spanish is supported - */ - localization: Localization; - /** - * the current percentage upload progress - * - */ - progress?: number; - /** - * abort event - */ - onAbort?: Function; -} \ No newline at end of file diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.scss deleted file mode 100644 index a69fc3a52a8a6099269f17eccf678bfcbd9812e6..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.scss +++ /dev/null @@ -1,17 +0,0 @@ -.fui-file-item-upload-status-container { - text-align: center; - font-size: 0.8rem; - background-color: rgba(255, 255, 255, 0.8); - display: flex; - align-items: center; - flex-direction: row; - border-radius: 4px; - padding: 0.5px; - font-weight: 400; - &.file-status-error-aborted { - color: #f44336; - } - &.file-status-success { - color: #5c7a1f; - } -} diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.tsx deleted file mode 100644 index 9a3207c853581a3c704a3ab7aa6c2bac08fd5530..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import * as React from "react"; -import { - FileItemLocalizerSelector, - Localization, - LocalLabels, - UPLOADSTATUS, -} from "../../../../core"; -import { CloudDone, UploadError } from "../../../icons"; -import "./FileItemUploadStatus.scss"; -export type FileItemUploadStatusProps = { - /** - * sucess - * error - * aborted - */ - uploadStatus?: UPLOADSTATUS; - /** - * language to be used on labels - */ - localization?: Localization; -}; -/** - * Upload ststaus: "success", "aborted" and "error" - * @returns - */ -const FileItemUploadStatus: React.FC<FileItemUploadStatusProps> = ( - props: FileItemUploadStatusProps -) => { - const { uploadStatus, localization } = props; - const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector( - localization - ).status as LocalLabels; - if ( - uploadStatus && - ["success", "aborted", "error"].includes( - uploadStatus - ) - ) { - const overloadClassName: string = - uploadStatus === "success" - ? " file-status-success" - : " file-status-error-aborted"; - return ( - <div - className={`fui-file-item-upload-status-container${overloadClassName}`} - > - {uploadStatus === "success" ? ( - <> - <CloudDone color="#4caf50" size="small" className="status-icon" /> - {FileItemStatusLocalizer.success as string} - </> - ) : ( - <> - <UploadError - color="#f44336" - size="semi-medium" - className="status-icon" - /> - {uploadStatus === "aborted" ? ( - <>{FileItemStatusLocalizer.aborted as string}</> - ) : ( - <> {FileItemStatusLocalizer.error as string}</> - )} - </> - )} - </div> - ); - } - return <React.Fragment></React.Fragment>; -}; -export default FileItemUploadStatus; diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.scss deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.tsx deleted file mode 100644 index b76e45d8f05e08c776938c0fb2743672e81e7987..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from "react"; -import { FileItemLocalizerSelector, Localization, LocalLabels, UPLOADSTATUS } from "../../../../core"; -import { DefaultLoader } from "../../../loader"; - -export type FileItemUploadingStatusProps = { - /** - * sucess - * error - * aborted - */ - uploadStatus?: UPLOADSTATUS; - /** - * language to be used on labels - */ - localization?: Localization; -}; -const FileItemUploadingStatus: React.FC<FileItemUploadingStatusProps> = ( - props: FileItemUploadingStatusProps -) => { - const { uploadStatus, localization } = props; - const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector( - localization - ).status as LocalLabels; - if (uploadStatus && uploadStatus === "uploading") { - return ( - <DefaultLoader label={FileItemStatusLocalizer.uploading as string} /> - ); - } - return <React.Fragment></React.Fragment>; -}; -export default FileItemUploadingStatus; diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.scss deleted file mode 100644 index e4e14ee692786b46551c5246a33cfb338acc94c4..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.scss +++ /dev/null @@ -1,17 +0,0 @@ -.fui-file-item-valid-status-container { - text-align: center; - font-size: 0.8rem; - background-color: rgba(255, 255, 255, 0.8); - display: flex; - align-items: center; - flex-direction: row; - border-radius: 4px; - padding: 0.5px; - font-weight: 400; - &.file-status-nonvalid { - color: #f44336; - } - &.file-status-valid { - color: #5c7a1f; - } -} diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.tsx deleted file mode 100644 index 84d0bfc6417d644cce8b1242a8f95396502d315f..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from "react"; -import { FileItemLocalizerSelector, Localization, LocalLabels } from "../../../../core"; -import { CheckCircle, DoDisturb } from "../../../icons"; - -import "./FileItemValidStatus.scss"; -export type FileItemValidStatusProps = { - /** - * whether show a valid or rejected message - * by def. valid is false (if not present, is false too) - */ - valid?: boolean | null; - /** - * language to be used - * for now - * only English and Spanish is supported - */ - localization?: Localization; -}; -const FileItemValidStatus: React.FC<FileItemValidStatusProps> = ( - props: FileItemValidStatusProps -) => { - const { valid, localization } = props; - const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector( - localization - ).status as LocalLabels; - if (typeof valid === "boolean") { - const overloadClassName: string = valid - ? " file-status-valid" - : " file-status-nonvalid"; - return ( - <div - className={`fui-file-item-valid-status-container${overloadClassName}`} - > - {valid ? ( - <> - <CheckCircle color="#4caf50" size="small" className="status-icon" /> - {FileItemStatusLocalizer.valid as string} - </> - ) : ( - <> - <DoDisturb color="#f44336" size="small" className="status-icon" /> - {FileItemStatusLocalizer.denied as string} - </> - )} - </div> - ); - } else { - return <React.Fragment></React.Fragment>; - } -}; -export default FileItemValidStatus; diff --git a/src/files-ui/components/file-item/hooks/useDropzoneFileListID.ts b/src/files-ui/components/file-item/hooks/useDropzoneFileListID.ts deleted file mode 100644 index 4f05d381efd6bfc4b8a91e1c724adf9b626852d6..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/hooks/useDropzoneFileListID.ts +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from "react"; -import { print_manager } from "../../../../utils"; -import { ExtFileManager } from "../../../core"; - -const useDropzoneFileListID = ( -): number => { - const [dropzoneId, setDuiFileID] - = React.useState<number | undefined>( - undefined - ); - React.useEffect(() => { - print_manager(undefined, "dropzoneId " + dropzoneId + ""); - if (!dropzoneId) { - const newId: number = ExtFileManager.createFileListMap(); - setDuiFileID(newId); - } - // eslint-disable-next-line - }, [dropzoneId]); - - return dropzoneId || 0; -} -export default useDropzoneFileListID; \ No newline at end of file diff --git a/src/files-ui/components/file-item/hooks/useFileItemClassName.ts b/src/files-ui/components/file-item/hooks/useFileItemClassName.ts deleted file mode 100644 index fce4e5e5e1560a16d3379a09d68afffd1d9c0583..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/hooks/useFileItemClassName.ts +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from "react"; - -/** - * Custom hook that generates the final className for the main container of FleItem - * @param resultOnTooltip whether to show the result on a tooltip or not - * @returns the fiaal classNmae - */ -const useFileItemRootClassName = ( - resultOnTooltip: boolean = false, - className: string | undefined, - hovering: boolean | undefined = false -): string => { - const [classNameCreated, setClassNameCreated] = React.useState<string>("file-item-full-container-container"); - - React.useEffect(() => { - let baseClassName: string = "file-item-full-container-container"; - if (resultOnTooltip) { - baseClassName += " files-ui-tooltip"; - } - if (hovering) { - baseClassName += " hovering"; - } - if (className) { - baseClassName += ` ${className}`; - } - - setClassNameCreated(baseClassName); - }, [resultOnTooltip, className, hovering]); - return classNameCreated; -} -export default useFileItemRootClassName; \ No newline at end of file diff --git a/src/files-ui/components/file-item/hooks/useFileItemInitializer.ts b/src/files-ui/components/file-item/hooks/useFileItemInitializer.ts deleted file mode 100644 index ded597828e78c2b6ae557e1880449a46cfc060ef..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/hooks/useFileItemInitializer.ts +++ /dev/null @@ -1,134 +0,0 @@ -import * as React from "react"; -import { getURLFileIco, readAsDataURL } from "../../../core"; -import { getURLFileIcoFromNameAndType } from "../../../core/mime/mime"; - -/** - * Initializer hook for FileItemNeo - * @param file The file Object - * @param valid Whether the file is valid, not valid or not set - * @param preview Whether to show a preview on FileItem - * @param imageUrl The image url - * @param xhr the xhr object - * @param progress the current progress given by props - * @returns an array thta contains the following properties [isImage, isVideo, url, imageSource, localProgress] - */ -const useFileItemInitializer = ( - file: File | undefined, - name: string | undefined, - type: string | undefined, - valid: boolean | undefined | null, - preview: boolean, - imageUrl: string | undefined, - xhr?: XMLHttpRequest, - -): [boolean, boolean, string, string | undefined] => { - - const [isImage, setIsImage] = React.useState<boolean>(false); - const [isVideo, setIsVideo] = React.useState<boolean>(false); - const [url, setUrl] = React.useState<string>(""); - const [imageSource, setImageSource] = React.useState<string | undefined>(undefined); - - - - const init = async ( - file: File | undefined, - name: string | undefined, - type: string | undefined, - valid: boolean | undefined | null, - preview: boolean, - imageUrl: string | undefined, - xhr?: XMLHttpRequest, - progress?: number - ) => { - ////////////////////////////// - //console.log("init", file, name, type); - - if (!file && (!name && !type)) return; - - const { url } = file ? getURLFileIco(file) : - getURLFileIcoFromNameAndType(name, type); - - //console.log("init", url); - - setUrl(url); - - if (imageUrl) { - setIsImage(true); - setImageSource(imageUrl); - return; - } else { - const [headerMime, tailMime] = getHeaderAndTail(file, type); - - setIsImage(headerMime === "image"); - setIsVideo( - headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime) - ); - if ( - preview && - (valid || typeof valid === "undefined" || valid === null) && - headerMime === "image" - ) { - //lets check for image preview from File - let response: string | undefined = undefined; - if (file) { - response = await readAsDataURL(file); - if (response) { - setImageSource(response as string); - } - } - //console.log("response image", response); - - } - } - /////////////// UPLOAD OBJECT /////////////// - - //if (!localProgress) { - //handleProgress(1); - //} - }; - - - - ////// EFFECT - React.useEffect(() => { - init(file, name, type, valid, preview || false, imageUrl); - return () => { - setImageSource(undefined); - setIsImage(false); - setIsVideo(false); - }; - // eslint-disable-next-line - }, [file, name, type, valid, preview, imageUrl,]); - return [isImage, isVideo, url, imageSource]; -} -export default useFileItemInitializer; - -/* export const identifyFileSource = (file: File | undefined, name: string, fileType: string) => { - if(!file){ - - } -} */ - -const getHeaderAndTail = ( - file: File | undefined, - type: string | undefined, -): [string, string] => { - - if (file) { - if (file.type) { - const splittedType: string[] = file.type.split("/"); - return [splittedType[0], splittedType[1]]; - } else { - return ["octet", "octet"]; - } - } else { - const splittedType: string[] | undefined = type?.split("/"); - if (splittedType && splittedType.length > 1) { - return [splittedType[0], splittedType[1]]; - } else { - return ["octet", "octet"]; - } - } - - -} \ No newline at end of file diff --git a/src/files-ui/components/file-item/hooks/useFileItemNeoClassName.ts b/src/files-ui/components/file-item/hooks/useFileItemNeoClassName.ts deleted file mode 100644 index 940cfddc34681cb09179f5ca0b812a7048b8d46f..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/hooks/useFileItemNeoClassName.ts +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from "react"; -import { FileItemPropsNeo } from "../components/FileItem/FileItemPropsNeo"; -/** - * Custom hook that generates the final className for main container - * on FleItem - * @param resultOnTooltip whether to show the result on tooltip or not - * @param elevation the shadow elevation - * @returns the fiaal classNmae - */ -const useFileItemNeoClassName = ( - resultOnTooltip: boolean, - elevation: FileItemPropsNeo["elevation"] -): string => { - const [classNameCreated, setClassNameCreated] = - React.useState<string>(""); - - React.useEffect(() => { - let baseClassName: string = - "file-item-full-container-container"; - - if (resultOnTooltip) { - baseClassName += " dz-ui-tooltip"; - } - if (elevation && [1, 2, 3, 4, "1", "2", "3", "4"].includes(elevation)) { - baseClassName += ` dz-ui-paper-elevation-${elevation}`; - } - setClassNameCreated(baseClassName); - }, [resultOnTooltip]); - return classNameCreated; -} -export default useFileItemNeoClassName; \ No newline at end of file diff --git a/src/files-ui/components/file-item/hooks/useFileItemProgress.ts b/src/files-ui/components/file-item/hooks/useFileItemProgress.ts deleted file mode 100644 index bd61da06d5264713c06f0b10ef26b94d029f3f5b..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/hooks/useFileItemProgress.ts +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from "react"; - -/** - * - * @param progress - * @param showProgress - * @param xhr - * @returns - */ -const useFileItemProgress = ( - progress: number | undefined, - showProgress: boolean | undefined, - xhr?: XMLHttpRequest, - -): number | undefined => { - - const [localProgress, setLocalProgress] = React.useState<number | undefined>(undefined); - // handlers - const handleProgress = (currentProgress: number): void => { - setLocalProgress(currentProgress); - }; - - React.useEffect(() => { - if (progress && showProgress) - handleProgress(typeof progress === "undefined" || progress === 0 ? 1 : progress); - }, [progress, showProgress]); - - - React.useEffect(() => { - if (xhr && xhr !== null && showProgress && xhr.upload.onprogress === null) { - xhr.upload.onprogress = (event) => { - if (!progress) - handleProgress((event.loaded / event.total) * 100); - }; - handleProgress(1); - } - }, [xhr, showProgress, progress]); - - return localProgress; -} -export default useFileItemProgress; \ No newline at end of file diff --git a/src/files-ui/components/file-item/index.ts b/src/files-ui/components/file-item/index.ts deleted file mode 100644 index 84098b699e8d04173393b8e4466dcdcd59de1be2..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/index.ts +++ /dev/null @@ -1,6 +0,0 @@ - -export {default as FileItem} from "./components/FileItem/FileItem"; -export * from "./components/FileItem/FileItem"; - -export {default as FileItemContainer} from "./components/FileItemContainer/FileItemContainer"; -export * from "./components/FileItemContainer/FileItemContainer"; diff --git a/src/files-ui/components/file-item/utils/showFileItemComponent.ts b/src/files-ui/components/file-item/utils/showFileItemComponent.ts deleted file mode 100644 index 8928339477d3c5b57e88090dcbd04946c631754b..0000000000000000000000000000000000000000 --- a/src/files-ui/components/file-item/utils/showFileItemComponent.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * Checks wheter the file objector at least the file name was given in order to show the file Item component - * @param file the file object - * @param name the file name - * @returns true if the file object or the file name were given and are strings - */ -export const showFileItemComponent = ( - file: File | undefined, - name: string | undefined, - //classNameCreatedReady: boolean -): boolean => { - - let result = false; - if (file && typeof file.name === "string" - //&& classNameCreatedReady - ) { - result = true; - } - if (!result && name && typeof name == "string" - //&& classNameCreatedReady - ) { - result = true; - } - //console.log("showFileItemComponent", file, name, classNameCreatedReady, result); - return result; -} \ No newline at end of file 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 7fb983dbcbdd35ac3a380ea8d93123f4437c01f6..455a3af3a80d58acae140ea45299d490fe4c51b8 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 @@ -2,13 +2,13 @@ import * as React from "react"; import { addClassName, fileSizeFormater, + getLocalFileItemData, handleClickUtil, } from "../../../../core"; import { FileMosaicProps } from "./FileMosaicProps"; import "./FileMosaic.scss"; import LayerContainer from "../file-mosaic-layer/LayerContainer"; import Layer from "../file-mosaic-layer/Layer"; -import { getLocalFileItemData } from "../../../file-item/utils/getLocalFileItemData"; import FileMosaicName from "../FileMosaicName/FileMosaicName"; import FileMosaicUploadLayer from "../FileMosaicUploadLayer/FileMosaicUploadLayer"; import useFileMosaicInitializer from "../../hooks/useFileMosaicInitializer"; diff --git a/src/files-ui/components/index.ts b/src/files-ui/components/index.ts index d7c2c1b7497acd77030797dec177249b834fbea4..3356996ef2650fe53854a2dbb3d513c9e73128d6 100644 --- a/src/files-ui/components/index.ts +++ b/src/files-ui/components/index.ts @@ -4,9 +4,6 @@ export * from "./avatar"; export { Dropzone } from "./dropzone"; export * from "./dropzone"; -export { FileItem } from "./file-item"; -export * from "./file-item"; - export { FileInputButton } from "./file-input-button"; export * from "./file-input-button"; diff --git a/src/files-ui/core/index.ts b/src/files-ui/core/index.ts index e01e5a3825ad26b5a33a257a3a3614eeaa2ce6e1..f59b94970f6bef21c7eb757bcf23957a6b96d2e5 100644 --- a/src/files-ui/core/index.ts +++ b/src/files-ui/core/index.ts @@ -140,7 +140,7 @@ export { sleepPreparing, uploadOne, uploadOneExtFile, - cleanInput, addClassName, getRandomInt, isUploadAbleExtFile + cleanInput, addClassName, getRandomInt, isUploadAbleExtFile, getLocalFileItemData } from "./utils"; export { diff --git a/src/files-ui/components/file-item/utils/getLocalFileItemData.ts b/src/files-ui/core/utils/getLocalFileItemData.ts similarity index 100% rename from src/files-ui/components/file-item/utils/getLocalFileItemData.ts rename to src/files-ui/core/utils/getLocalFileItemData.ts diff --git a/src/files-ui/core/utils/index.ts b/src/files-ui/core/utils/index.ts index 678c2808484b745c11264947b8acbce11c63f7b4..a241cf09e7a4973eae39a8a7d704f4f5e1e209e3 100644 --- a/src/files-ui/core/utils/index.ts +++ b/src/files-ui/core/utils/index.ts @@ -38,4 +38,6 @@ export { cleanInput } from "./input.utils"; export { addClassName } from "./addClassName"; -export {isUploadAbleExtFile} from "./isUploadAbleExtFile"; \ No newline at end of file +export { isUploadAbleExtFile } from "./isUploadAbleExtFile"; + +export { getLocalFileItemData } from "./getLocalFileItemData" \ No newline at end of file diff --git a/src/files-ui/index.ts b/src/files-ui/index.ts index abe520fd0db876004fd8ebb95c2a1a0ba8b5e25c..86b06e27501db0d5945ee8fc7b43468aa848bf9d 100644 --- a/src/files-ui/index.ts +++ b/src/files-ui/index.ts @@ -1,12 +1,12 @@ export { default as Dropzone } from "./components/dropzone/components/dropzone/Dropzone"; export * from "./components/dropzone/components/dropzone/Dropzone"; +export { default as FileInputButton } from "./components/file-input-button/FileInputButton"; +export * from "./components/file-input-button/FileInputButton"; + export { default as Avatar } from "./components/avatar/Avatar"; export * from "./components/avatar/Avatar"; -export { FileItem } from "./components"; -export * from "./components"; - export { default as FileCard } from "./components/file-card/FileCard"; export * from "./components/file-card/FileCard"; @@ -22,6 +22,9 @@ export * from "./components/previews/ImagePreview/ImagePreview"; export { default as VideoPreview } from "./components/previews/VideoPreview/VideoPreview"; export * from "./components/previews/VideoPreview/VideoPreview"; +export { default as MaterialButton } from "./components/material-button/MaterialButton"; +export * from "./components/material-button/MaterialButton"; + export type { FileMosaicProps } from "./components/file-mosaic/components/file-mosaic/FileMosaicProps"; export type { DropzoneProps } from "./components/dropzone/components/dropzone/DropzoneProps"; export type { FileInputButtonProps } from "./components/file-input-button/InputButtonProps"; diff --git a/src/pages/FileItemMock.tsx b/src/pages/FileItemMock.tsx index d118bb015113bf21ce69e53aa50ac832e060c4ff..b66ba990a2a57f5b19cd30cc3fd22b2fd4fde0fe 100644 --- a/src/pages/FileItemMock.tsx +++ b/src/pages/FileItemMock.tsx @@ -1,5 +1,4 @@ import * as React from "react"; -import { FileItem } from "../files-ui"; import { FileMosaic, FileMosaicProps, @@ -154,7 +153,7 @@ const FileItemMock = ({ darkMode = false, mosaic = false }) => { ) : ( <> {files.map((file, index) => ( - <FileItem + <FileMosaic key={file.id || 1 + 10} {...file} preview @@ -163,9 +162,6 @@ const FileItemMock = ({ darkMode = false, mosaic = false }) => { info alwaysActive progress={25} - showProgress - hd - elevation={2} darkMode={darkMode} /> ))}