diff --git a/src/files-ui/components/file-card/components/FileCardInfoLayer.tsx b/src/files-ui/components/file-card/components/FileCardInfoLayer.tsx index 823437c92e429479beb2ec5598ac138bcac3dd7e..4a36ce738f497d2e003ded6c8fdc5456314206df 100644 --- a/src/files-ui/components/file-card/components/FileCardInfoLayer.tsx +++ b/src/files-ui/components/file-card/components/FileCardInfoLayer.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import { FileItemLocalizerSelector, LocalLabels } from "../../../core"; import { FileMosaicInfoLayerProps } from "../../file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayerProps"; import FileMosaicStatus from "../../file-mosaic/components/FileMosaicStatus/FileMosaicStatus"; import { Cancel } from "../../icons"; @@ -15,25 +16,27 @@ const FileCardInfoLayer: React.FC<FileCardInfoLayerProps> = ( sizeFormatted, localType, } = props; + const FileItemLocalizer: LocalLabels = + FileItemLocalizerSelector(localization); + + const { + name: nameLabel, + size: sizeLabel, + type: typeLabel, + } = FileItemLocalizer.fullInfoLayer as LocalLabels; return ( <div className="file-card-file-info"> - {/* <FileMosaicStatus - style={{ margin: 0, right: 5, bottom: 0, position:"absolute" }} - valid={valid} - uploadStatus={uploadStatus} - localization={localization} - /> */} - <Cancel - style={{ margin: 0, right: 5, top: 0, position:"absolute" }} - color="rgba(255,255,255,0.8)" - onClick={onCloseInfo} - colorFill="black" - /> - <div className="heading">Name:</div> + <Cancel + style={{ margin: 0, right: 5, top: 0, position: "absolute" }} + color="rgba(255,255,255,0.8)" + onClick={onCloseInfo} + colorFill="black" + /> + <div className="heading">{nameLabel as string}</div> <div className="label">{localName}</div> - <div className="heading">Size:</div> + <div className="heading">{sizeLabel as string}</div> <div className="label">{sizeFormatted}</div> - <div className="heading">Type:</div> + <div className="heading">{typeLabel as string}</div> <div className="label">{localType}</div> </div> ); diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayer.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayer.tsx index 21a2e6a43af382f3c94f0312e33e16247c379e6e..2c8359f01623848c496c8034d9f7d044d059b012 100644 --- a/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayer.tsx +++ b/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayer.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import { FileItemLocalizerSelector, LocalLabels } from "../../../../core"; import { Cancel } from "../../../icons"; import FileMosaicStatus from "../FileMosaicStatus/FileMosaicStatus"; import { FileMosaicInfoLayerProps } from "./FileMosaicInfoLayerProps"; @@ -15,6 +16,16 @@ const FileMosaicInfoLayer: React.FC<FileMosaicInfoLayerProps> = ( sizeFormatted, localType, } = props; + + const FileItemLocalizer: LocalLabels = + FileItemLocalizerSelector(localization); + + const { + name: nameLabel, + size: sizeLabel, + type: typeLabel, + } = FileItemLocalizer.fullInfoLayer as LocalLabels; + return ( <React.Fragment> <div className="files-ui-file-mosaic-info-layer-header"> @@ -30,11 +41,11 @@ const FileMosaicInfoLayer: React.FC<FileMosaicInfoLayerProps> = ( localization={localization} /> </div> - <div className="heading">Name:</div> + <div className="heading">{nameLabel as string}</div> <div className="label">{localName}</div> - <div className="heading">Size:</div> + <div className="heading">{sizeLabel as string}</div> <div className="label">{sizeFormatted}</div> - <div className="heading">Type:</div> + <div className="heading">{typeLabel as string}</div> <div className="label">{localType}</div> </React.Fragment> ); 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 c6b9d6332635ef655a5b6a435a42b41cd3aab31b..6593fc47ec5fc0c448def26687abfab9fb87a0bf 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 @@ -67,6 +67,8 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => { onRightClick, smartImgFit, } = props; +//localizers + //ref for anchor download element const downloadRef = React.useRef<HTMLAnchorElement>(null); @@ -208,6 +210,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => { onAbort?.(id); }; + if (isReady) return ( <div diff --git a/src/files-ui/core/types/localization.ts b/src/files-ui/core/types/localization.ts index 8a206f36c0d7da9cc3183cc7d31d6aa986e13cfb..8a97004cc8e4209aa8bf9dc7d04d7317d34799c4 100644 --- a/src/files-ui/core/types/localization.ts +++ b/src/files-ui/core/types/localization.ts @@ -12,7 +12,7 @@ export type Localization = export type FunctionLabel = ((s1: string | number, s2?: string | number, s3?: string) => string); -export interface LocalLabels { +export type LocalLabels = { [label: string]: string | FunctionLabel | LocalLabels; } //export const DropzoneLocalizer