From 52334bd490b75e37baa042ff01ebc3e7f9e03065 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Mon, 13 Mar 2023 12:10:53 -0500
Subject: [PATCH] [FEAT]: Add localization labels in info layer on FileCard and
 FileMosaic

---
 .../components/FileCardInfoLayer.tsx          | 33 ++++++++++---------
 .../FileMosaicInfoLayer.tsx                   | 17 ++++++++--
 .../components/file-mosaic/FileMosaic.tsx     |  3 ++
 src/files-ui/core/types/localization.ts       |  2 +-
 4 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/files-ui/components/file-card/components/FileCardInfoLayer.tsx b/src/files-ui/components/file-card/components/FileCardInfoLayer.tsx
index 823437c..4a36ce7 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 21a2e6a..2c8359f 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 c6b9d63..6593fc4 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 8a206f3..8a97004 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
-- 
GitLab