IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Files : Home : Added share button at row

Browse Source
This commit is contained in:
Ilya Oleshko 2020-10-09 17:08:29 +03:00
parent 5e8a4727ac
commit a129bda5ee
1 changed files with 225 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

415
products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js
View File

@ -14,6 +14,7 @@ import {
Link, Link,
DragAndDrop, DragAndDrop,
Box, Box,
Text
} from "asc-web-components"; } from "asc-web-components";
import EmptyFolderContainer from "./EmptyFolderContainer"; import EmptyFolderContainer from "./EmptyFolderContainer";
import FilesRowContent from "./FilesRowContent"; import FilesRowContent from "./FilesRowContent";
@ -121,6 +122,13 @@ const SimpleFilesRow = styled(Row)`
width: 0px; width: 0px;
} }
`} `}
.share-button:hover {
cursor: pointer;
div {
color: "#657077"
}
}
`; `;
class SectionBodyContent extends React.Component { class SectionBodyContent extends React.Component {
@ -382,13 +390,11 @@ class SectionBodyContent extends React.Component {
copy( copy(
isFile isFile
? isMediaOrImage(item.fileExst) ? isMediaOrImage(item.fileExst)
? `${window.location.origin + settings.homepage}/filter?folder=${ ? `${window.location.origin + settings.homepage}/filter?folder=${item.folderId
item.folderId }&preview=${item.id}`
}&preview=${item.id}`
: item.webUrl : item.webUrl
: `${window.location.origin + settings.homepage}/filter?folder=${ : `${window.location.origin + settings.homepage}/filter?folder=${item.id
item.id }`
}`
); );
toastr.success(t("LinkCopySuccess")); toastr.success(t("LinkCopySuccess"));
@ -979,8 +985,8 @@ class SectionBodyContent extends React.Component {
const mouseButton = e.which const mouseButton = e.which
? e.which !== 1 ? e.which !== 1
: e.button : e.button
? e.button !== 0 ? e.button !== 0
: false; : false;
const label = e.currentTarget.getAttribute("label"); const label = e.currentTarget.getAttribute("label");
if (mouseButton || e.currentTarget.tagName !== "DIV" || label) { if (mouseButton || e.currentTarget.tagName !== "DIV" || label) {
return; return;
@ -1025,8 +1031,8 @@ class SectionBodyContent extends React.Component {
const mouseButton = e.which const mouseButton = e.which
? e.which !== 1 ? e.which !== 1
: e.button : e.button
? e.button !== 0 ? e.button !== 0
: false; : false;
if (mouseButton || !this.tooltipRef.current || !dragging) { if (mouseButton || !this.tooltipRef.current || !dragging) {
return; return;
} }
@ -1277,6 +1283,30 @@ class SectionBodyContent extends React.Component {
}); });
}; };
getSharedButton = () => {
return (
<Text
className="share-button"
as='span'
title={"Share"}
fontSize='12px'
fontWeight={400}
color='#A3A9AE'
display="inline-flex"
onClick={this.onClickShare}
>
<IconButton
className="share-button"
color='#a3a9ae'
hoverColor="#657077"
size={16}
iconName='CatalogSharedIcon'
style={{ marginRight: "8px" }}
/>
Share
</Text>)
}
render() { render() {
const { const {
files, files,
@ -1349,195 +1379,200 @@ class SectionBodyContent extends React.Component {
parentId === 0 ? ( parentId === 0 ? (
this.renderEmptyRootFolderContainer() this.renderEmptyRootFolderContainer()
) : ( ) : (
this.renderEmptyFolderContainer() this.renderEmptyFolderContainer()
) )
) : !fileAction.id && items.length === 0 ? ( ) : !fileAction.id && items.length === 0 ? (
firstLoad ? ( firstLoad ? (
<Loaders.Rows /> <Loaders.Rows />
) : ( ) : (
this.renderEmptyFilterContainer() this.renderEmptyFilterContainer()
) )
) : ( ) : (
<> <>
{showMoveToPanel && ( {showMoveToPanel && (
<OperationsPanel <OperationsPanel
{...operationsPanelProps} {...operationsPanelProps}
isCopy={false} isCopy={false}
visible={showMoveToPanel} visible={showMoveToPanel}
onClose={this.onMoveAction} onClose={this.onMoveAction}
/> />
)} )}
{showCopyPanel && ( {showCopyPanel && (
<OperationsPanel <OperationsPanel
{...operationsPanelProps} {...operationsPanelProps}
isCopy={true} isCopy={true}
visible={showCopyPanel} visible={showCopyPanel}
onClose={this.onCopyAction} onClose={this.onCopyAction}
/> />
)} )}
<CustomTooltip ref={this.tooltipRef}>{tooltipLabel}</CustomTooltip> <CustomTooltip ref={this.tooltipRef}>{tooltipLabel}</CustomTooltip>
{viewAs === "tile" ? ( {viewAs === "tile" ? (
<TileContainer <TileContainer
className="tileContainer" className="tileContainer"
draggable draggable
useReactWindow={false} useReactWindow={false}
headingFolders={t("Folders")} headingFolders={t("Folders")}
headingFiles={t("Files")} headingFiles={t("Files")}
> >
{items.map((item) => { {items.map((item) => {
const isEdit = const isEdit =
!!fileAction.type && !!fileAction.type &&
editingId === item.id && editingId === item.id &&
item.fileExst === fileAction.extension; item.fileExst === fileAction.extension;
const contextOptions = this.getFilesContextOptions( const contextOptions = this.getFilesContextOptions(
item, item,
viewer viewer
).filter((o) => o); ).filter((o) => o);
const contextOptionsProps = const contextOptionsProps =
!contextOptions.length || isEdit ? {} : { contextOptions }; !contextOptions.length || isEdit ? {} : { contextOptions };
const checked = isFileSelected(selection, item.id, item.parentId); const checked = isFileSelected(selection, item.id, item.parentId);
const checkedProps = isEdit || item.id <= 0 ? {} : { checked }; const checkedProps = isEdit || item.id <= 0 ? {} : { checked };
const element = this.getItemIcon(item, isEdit || item.id <= 0); const element = this.getItemIcon(item, isEdit || item.id <= 0);
const selectedItem = selection.find( const selectedItem = selection.find(
(x) => x.id === item.id && x.fileExst === item.fileExst (x) => x.id === item.id && x.fileExst === item.fileExst
); );
const isFolder = selectedItem const isFolder = selectedItem
? false ? false
: item.fileExst : item.fileExst
? false ? false
: true; : true;
const draggable = selectedItem && currentFolderType !== "Trash"; const draggable = selectedItem && currentFolderType !== "Trash";
let value = item.fileExst let value = item.fileExst
? `file_${item.id}` ? `file_${item.id}`
: `folder_${item.id}`; : `folder_${item.id}`;
value += draggable ? "_draggable" : ""; value += draggable ? "_draggable" : "";
const classNameProp = const classNameProp =
isFolder && item.access < 2 ? { className: " dropable" } : {}; isFolder && item.access < 2 ? { className: " dropable" } : {};
return ( return (
<DragAndDrop <DragAndDrop
{...classNameProp} {...classNameProp}
onDrop={this.onDrop.bind(this, item)} onDrop={this.onDrop.bind(this, item)}
onMouseDown={this.onMouseDown} onMouseDown={this.onMouseDown}
dragging={dragging && isFolder && item.access < 2} dragging={dragging && isFolder && item.access < 2}
key={`dnd-key_${item.id}`} key={`dnd-key_${item.id}`}
{...contextOptionsProps} {...contextOptionsProps}
value={value} value={value}
isFolder={!item.fileExst} isFolder={!item.fileExst}
> >
<Tile <Tile
key={item.id} key={item.id}
item={item} item={item}
isFolder={!item.fileExst} isFolder={!item.fileExst}
element={element} element={element}
onSelect={this.onContentRowSelect} onSelect={this.onContentRowSelect}
editing={editingId} editing={editingId}
viewAs={viewAs} viewAs={viewAs}
{...checkedProps} {...checkedProps}
{...contextOptionsProps} {...contextOptionsProps}
needForUpdate={this.needForUpdate} needForUpdate={this.needForUpdate}
> >
<FilesTileContent <FilesTileContent
item={item} item={item}
viewer={viewer} viewer={viewer}
culture={settings.culture} culture={settings.culture}
onEditComplete={this.onEditComplete} onEditComplete={this.onEditComplete}
onMediaFileClick={this.onMediaFileClick} onMediaFileClick={this.onMediaFileClick}
/> />
</Tile> </Tile>
</DragAndDrop> </DragAndDrop>
); );
})} })}
</TileContainer> </TileContainer>
) : ( ) : (
<RowContainer draggable useReactWindow={false}> <RowContainer draggable useReactWindow={false}>
{items.map((item) => { {items.map((item) => {
const { checked, isFolder, value, contextOptions } = item; const { checked, isFolder, value, contextOptions } = item;
const isEdit = const isEdit =
!!fileAction.type && !!fileAction.type &&
editingId === item.id && editingId === item.id &&
item.fileExst === fileAction.extension; item.fileExst === fileAction.extension;
const contextOptionsProps = const contextOptionsProps =
contextOptions && contextOptions.length > 0 contextOptions && contextOptions.length > 0
? { ? {
contextOptions: this.getFilesContextOptions( contextOptions: this.getFilesContextOptions(
contextOptions, contextOptions,
item item
), ),
} }
: {}; : {};
const checkedProps = isEdit || item.id <= 0 ? {} : { checked }; const checkedProps = isEdit || item.id <= 0 ? {} : { checked };
const element = this.getItemIcon(item, isEdit || item.id <= 0); const element = this.getItemIcon(item, isEdit || item.id <= 0);
const classNameProp = const classNameProp =
isFolder && item.access < 2 ? { className: " dropable" } : {}; isFolder && item.access < 2 ? { className: " dropable" } : {};
return ( const sharedButton = this.getSharedButton();
<DragAndDrop const displayShareButton = widthProp > 500 ? '96px' : '26px';
{...classNameProp}
onDrop={this.onDrop.bind(this, item)} return (
onMouseDown={this.onMouseDown} <DragAndDrop
dragging={dragging && isFolder && item.access < 2} {...classNameProp}
key={`dnd-key_${item.id}`} onDrop={this.onDrop.bind(this, item)}
{...contextOptionsProps} onMouseDown={this.onMouseDown}
value={value} dragging={dragging && isFolder && item.access < 2}
> key={`dnd-key_${item.id}`}
<SimpleFilesRow {...contextOptionsProps}
widthProp={widthProp} value={value}
key={item.id} >
data={item} <SimpleFilesRow
element={element} widthProp={widthProp}
onSelect={this.onContentRowSelect} key={item.id}
editing={editingId} data={item}
{...checkedProps} element={element}
{...contextOptionsProps} contentElement={sharedButton}
needForUpdate={this.needForUpdate} onSelect={this.onContentRowSelect}
selectItem={this.onSelectItem.bind(this, item)} editing={editingId}
> {...checkedProps}
<FilesRowContent {...contextOptionsProps}
widthProp={widthProp} needForUpdate={this.needForUpdate}
isMobile={isMobile} selectItem={this.onSelectItem.bind(this, item)}
item={item} contextButtonSpacerWidth={displayShareButton}
viewer={viewer} >
culture={settings.culture} <FilesRowContent
onEditComplete={this.onEditComplete} widthProp={widthProp}
onMediaFileClick={this.onMediaFileClick} isMobile={isMobile}
/> item={item}
</SimpleFilesRow> viewer={viewer}
</DragAndDrop> culture={settings.culture}
); onEditComplete={this.onEditComplete}
})} onMediaFileClick={this.onMediaFileClick}
</RowContainer> />
)} </SimpleFilesRow>
{playlist.length > 0 && mediaViewerVisible && ( </DragAndDrop>
<MediaViewer );
currentFileId={currentMediaFileId} })}
allowConvert={true} //TODO </RowContainer>
canDelete={(fileId) => { )}
return true; {playlist.length > 0 && mediaViewerVisible && (
}} //TODO <MediaViewer
canDownload={(fileId) => { currentFileId={currentMediaFileId}
return true; allowConvert={true} //TODO
}} //TODO canDelete={(fileId) => {
visible={mediaViewerVisible} return true;
playlist={playlist} }} //TODO
onDelete={this.onDeleteMediaFile} canDownload={(fileId) => {
onDownload={this.onDownloadMediaFile} return true;
onClose={this.onMediaViewerClose} }} //TODO
onEmptyPlaylistError={this.onMediaViewerClose} visible={mediaViewerVisible}
extsMediaPreviewed={mediaFormats.extsMediaPreviewed} //TODO playlist={playlist}
extsImagePreviewed={mediaFormats.extsImagePreviewed} //TODO onDelete={this.onDeleteMediaFile}
/> onDownload={this.onDownloadMediaFile}
)} onClose={this.onMediaViewerClose}
{showSharingPanel && ( onEmptyPlaylistError={this.onMediaViewerClose}
<SharingPanel extsMediaPreviewed={mediaFormats.extsMediaPreviewed} //TODO
onClose={this.onClickShare} extsImagePreviewed={mediaFormats.extsImagePreviewed} //TODO
visible={showSharingPanel} />
/> )}
)} {showSharingPanel && (
</> <SharingPanel
); onClose={this.onClickShare}
visible={showSharingPanel}
/>
)}
</>
);
} }
} }