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

coded out "Show More" intractive link on historyBlockItem

Browse Source
This commit is contained in:
mushka 2022-09-26 14:19:28 +03:00
parent 2bae8265ad
commit 096dcb6a8d
1 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockItemList.js
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useState } from "react";
import Text from "@docspace/components/text"; import Text from "@docspace/components/text";
import Link from "@docspace/components/link"; import Link from "@docspace/components/link";
@ -12,10 +12,14 @@ import {
import { RoomsType } from "@docspace/common/constants"; import { RoomsType } from "@docspace/common/constants";
export const HistoryBlockItemList = ({ export const HistoryBlockItemList = ({
t,
items, items,
getItemIcon, getItemIcon,
openFileAction, openFileAction,
}) => { }) => {
const [isShowMore, setIsShowMore] = useState(items.length <= 3);
const onShowMore = () => setIsShowMore(true);
const changeUrl = (item) => { const changeUrl = (item) => {
const id = item.ExtraLocationUrl.split("folderid=")[1]; const id = item.ExtraLocationUrl.split("folderid=")[1];
const viewUrl = item.ExtraLocationUrl; const viewUrl = item.ExtraLocationUrl;
@ -40,22 +44,30 @@ export const HistoryBlockItemList = ({
return ( return (
<StyledHistoryBlockFilesList> <StyledHistoryBlockFilesList>
{parsedItems.map((item, i) => ( {parsedItems.map((item, i) => {
<StyledHistoryBlockFile isRoom={item.isRoom} key={i}> if (!isShowMore && i > 2) return null;
<ReactSVG className="icon" src={getItemIcon(item, 24)} /> return (
<div className="item-title"> <StyledHistoryBlockFile isRoom={item.isRoom} key={i}>
<span className="name">{item.title}</span> <ReactSVG className="icon" src={getItemIcon(item, 24)} />
{item.fileExst && <span className="exst">{item.fileExst}</span>} <div className="item-title">
</div> <span className="name">{item.title}</span>
<IconButton {item.fileExst && <span className="exst">{item.fileExst}</span>}
className="location-btn" </div>
iconName="/static/images/folder-location.react.svg" <IconButton
size="16" className="location-btn"
isFill={true} iconName="/static/images/folder-location.react.svg"
onClick={() => changeUrl(item)} size="16"
/> isFill={true}
</StyledHistoryBlockFile> onClick={() => changeUrl(item)}
))} />
</StyledHistoryBlockFile>
);
})}
{!isShowMore && (
<Text className="show_more-link" onClick={onShowMore}>
{t("Common:ShowMore")}
</Text>
)}
</StyledHistoryBlockFilesList> </StyledHistoryBlockFilesList>
); );
}; };