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

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

parent 4ed6bc89
No related branches found
No related tags found
No related merge requests found
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>
);
......
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>
);
......
......@@ -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
......
......@@ -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
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment