Web: Files: Tiles: refactoring
This commit is contained in:
parent
ce3eb5543e
commit
ff32ffae0e
@ -444,6 +444,24 @@ class FilesContent extends React.Component {
|
||||
.catch((err) => toastr.error(err));
|
||||
};
|
||||
|
||||
renderFileExst = () => {
|
||||
const { item } = this.props;
|
||||
const { fileExst } = item;
|
||||
return (
|
||||
<Text
|
||||
className="badge-ext"
|
||||
as="span"
|
||||
color="#A3A9AE"
|
||||
fontSize="15px"
|
||||
fontWeight={600}
|
||||
title={fileExst}
|
||||
truncate={true}
|
||||
>
|
||||
{fileExst}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { itemTitle, showConvertDialog, newItems } = this.state;
|
||||
|
||||
@ -463,10 +481,6 @@ class FilesContent extends React.Component {
|
||||
id,
|
||||
fileExst,
|
||||
access,
|
||||
locked,
|
||||
fileStatus,
|
||||
title,
|
||||
versionGroup,
|
||||
createdBy,
|
||||
updated,
|
||||
providerKey,
|
||||
@ -497,6 +511,8 @@ class FilesContent extends React.Component {
|
||||
? { noHover: true }
|
||||
: { onClick: this.onFilesClick };
|
||||
|
||||
const fileExstElement = this.renderFileExst();
|
||||
|
||||
return isEdit ? (
|
||||
<EditingWrapperComponent
|
||||
itemTitle={itemTitle}
|
||||
@ -533,34 +549,10 @@ class FilesContent extends React.Component {
|
||||
isTextOverflow
|
||||
>
|
||||
{titleWithoutExt}
|
||||
{fileExst && viewAs === "tile" ? (
|
||||
<Text
|
||||
className="badge-ext"
|
||||
as="span"
|
||||
color="#A3A9AE"
|
||||
fontSize="15px"
|
||||
fontWeight={600}
|
||||
title={fileExst}
|
||||
truncate={true}
|
||||
>
|
||||
{fileExst}
|
||||
</Text>
|
||||
) : null}
|
||||
{fileExst && viewAs === "tile" ? fileExstElement : null}
|
||||
</Link>
|
||||
<div className="badges">
|
||||
{fileExst && viewAs !== "tile" ? (
|
||||
<Text
|
||||
className="badge-ext"
|
||||
as="span"
|
||||
color="#A3A9AE"
|
||||
fontSize="15px"
|
||||
fontWeight={600}
|
||||
title={fileExst}
|
||||
truncate={true}
|
||||
>
|
||||
{fileExst}
|
||||
</Text>
|
||||
) : null}
|
||||
{fileExst && viewAs !== "tile" ? fileExstElement : null}
|
||||
<Badges
|
||||
item={item}
|
||||
newItems={this.state.newItems}
|
||||
|
@ -1,11 +1,13 @@
|
||||
import Checkbox from "@appserver/components/checkbox";
|
||||
import ContextMenuButton from "@appserver/components/context-menu-button";
|
||||
import PropTypes from "prop-types";
|
||||
import { ReactSVG } from "react-svg";
|
||||
import React from "react";
|
||||
//import equal from "fast-deep-equal/react";
|
||||
import styled, { css } from "styled-components";
|
||||
import ContextMenu from "@appserver/components/context-menu";
|
||||
|
||||
const svgLoader = () => <div style={{ width: "96px" }}></div>;
|
||||
const FlexBoxStyles = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -39,19 +41,19 @@ const StyledFileTileTop = styled.div`
|
||||
padding: 13px;
|
||||
height: 157px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
||||
.thumbnailImage {
|
||||
& > .injected-svg {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.temporary-icon {
|
||||
.temporary-icon > .injected-svg {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
`;
|
||||
@ -127,6 +129,16 @@ class Tile extends React.Component {
|
||||
this.tile = React.createRef();
|
||||
}
|
||||
|
||||
getIconFile() {
|
||||
const { item, temporaryIcon } = this.props;
|
||||
|
||||
const icon = item.thumbnail ? item.thumbnail : temporaryIcon;
|
||||
let className = "thumbnailImage";
|
||||
if (!item.thumbnail) className += " temporary-icon";
|
||||
|
||||
return <ReactSVG className={className} src={icon} loading={svgLoader} />;
|
||||
}
|
||||
|
||||
render() {
|
||||
//console.log("Row render");
|
||||
const {
|
||||
@ -140,7 +152,6 @@ class Tile extends React.Component {
|
||||
onSelect,
|
||||
isFolder,
|
||||
rowContextClick,
|
||||
temporaryIcon,
|
||||
} = this.props;
|
||||
|
||||
const renderCheckbox = Object.prototype.hasOwnProperty.call(
|
||||
@ -174,6 +185,8 @@ class Tile extends React.Component {
|
||||
this.cm.current.show(e);
|
||||
};
|
||||
|
||||
const icon = this.getIconFile();
|
||||
|
||||
return (
|
||||
<StyledTile ref={this.tile} {...this.props} onContextMenu={onContextMenu}>
|
||||
{isFolder ? (
|
||||
@ -207,19 +220,6 @@ class Tile extends React.Component {
|
||||
) : (
|
||||
<>
|
||||
<StyledFileTileTop>
|
||||
{item.thumbnail ? (
|
||||
<img
|
||||
className="thumbnailImage"
|
||||
src={item.thumbnail}
|
||||
alt="thumbnail"
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
className="thumbnailImage temporary-icon"
|
||||
src={temporaryIcon}
|
||||
alt="thumbnail"
|
||||
/>
|
||||
)}
|
||||
{renderCheckbox && (
|
||||
<StyledCheckbox>
|
||||
<Checkbox
|
||||
@ -229,9 +229,7 @@ class Tile extends React.Component {
|
||||
/>
|
||||
</StyledCheckbox>
|
||||
)}
|
||||
{
|
||||
//<BadgesFileTile item={item} />
|
||||
}
|
||||
{icon}
|
||||
</StyledFileTileTop>
|
||||
<StyledFileTileBottom>
|
||||
<StyledElement>{element}</StyledElement>
|
||||
|
Loading…
Reference in New Issue
Block a user