[FEAT]: Add localization labels in info layer on FileCard and FileMosaic

Author: JinSSJ3

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>
   );

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>
   );

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

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