restructured historyBlock to block ItemList
This commit is contained in:
parent
ff5783cae1
commit
75ea0bf88f
@ -0,0 +1,142 @@
|
||||
import React from "react";
|
||||
|
||||
import Text from "@docspace/components/text";
|
||||
import Link from "@docspace/components/link";
|
||||
import IconButton from "@docspace/components/icon-button";
|
||||
import { ReactSVG } from "react-svg";
|
||||
import {
|
||||
StyledHistoryBlockFile,
|
||||
StyledHistoryBlockFilesList,
|
||||
StyledUserNameLink,
|
||||
} from "../../styles/history";
|
||||
import { RoomsType } from "@docspace/common/constants";
|
||||
|
||||
export const HistoryBlockItemList = ({
|
||||
items,
|
||||
getItemIcon,
|
||||
openFileAction,
|
||||
}) => {
|
||||
const changeUrl = (item) => {
|
||||
const id = item.ExtraLocationUrl.split("folderid=")[1];
|
||||
const viewUrl = item.ExtraLocationUrl;
|
||||
|
||||
if (!id || !viewUrl) return;
|
||||
openFileAction({ id, viewUrl, fileExst: item.fileExst, isFolder: true });
|
||||
};
|
||||
|
||||
const parsedItems = items.map((item) => {
|
||||
const splitTitle = item.Title.split(".");
|
||||
return {
|
||||
...item,
|
||||
isRoom: item.Item === "room",
|
||||
isFolder: item.Item === "folder",
|
||||
roomType: RoomsType[item.AdditionalInfo],
|
||||
title: splitTitle[0],
|
||||
fileExst: splitTitle[1] ? `.${splitTitle[1]}` : null,
|
||||
id: item.ItemId.split("_")[0],
|
||||
viewUrl: item.itemId,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<StyledHistoryBlockFilesList>
|
||||
{parsedItems.map((item, i) => (
|
||||
<StyledHistoryBlockFile isRoom={item.isRoom} key={i}>
|
||||
<ReactSVG className="icon" src={getItemIcon(item, 24)} />
|
||||
<div className="item-title">
|
||||
<span className="name">{item.title}</span>
|
||||
{item.fileExst && <span className="exst">{item.fileExst}</span>}
|
||||
</div>
|
||||
<IconButton
|
||||
className="location-btn"
|
||||
iconName="/static/images/folder-location.react.svg"
|
||||
size="16"
|
||||
isFill={true}
|
||||
onClick={() => changeUrl(item)}
|
||||
/>
|
||||
</StyledHistoryBlockFile>
|
||||
))}
|
||||
</StyledHistoryBlockFilesList>
|
||||
);
|
||||
};
|
||||
|
||||
// const HistoryBlockContent = ({ t, feed }) => {
|
||||
// return (
|
||||
// <StyledHistoryBlockContent>
|
||||
// {action === "message" ? (
|
||||
// <Text>{details.message}</Text>
|
||||
// ) : action === "appointing" ? (
|
||||
// <div className="appointing">
|
||||
// {`${t("appointed")}
|
||||
// ${details.appointedRole} `}{" "}
|
||||
// <UserNameLink user={details.appointedUser} />
|
||||
// </div>
|
||||
// ) : action === "users" ? (
|
||||
// <div className="users">
|
||||
// <div className="user-list">
|
||||
// added users{" "}
|
||||
// {details.users.map((user, i) => (
|
||||
// <UserNameLink
|
||||
// key={user.id}
|
||||
// user={user}
|
||||
// withComma={i + 1 !== details.users.length}
|
||||
// />
|
||||
// ))}
|
||||
// </div>
|
||||
// </div>
|
||||
// ) : action === "files" ? (
|
||||
// <div className="files">
|
||||
// <Text>add new 2 files into the folder “My project”</Text>
|
||||
// <div className="files-list">
|
||||
// {details.files.map((file) => (
|
||||
// <div className="file" key={file.id}>
|
||||
// <ReactSVG className="icon" src={file.icon} />
|
||||
// <div className="file-title">
|
||||
// <span className="name">{file.title.split(".")[0]}</span>
|
||||
// <span className="exst">{file.fileExst}</span>
|
||||
// </div>
|
||||
// <IconButton
|
||||
// className="location-btn"
|
||||
// iconName="/static/images/folder-location.react.svg"
|
||||
// size="16"
|
||||
// isFill={true}
|
||||
// onClick={() => {}}
|
||||
// />
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
// </div>
|
||||
// ) : null}
|
||||
// </StyledHistoryBlockContent>
|
||||
// );
|
||||
// };
|
||||
|
||||
// const UserNameLink = ({ user, withComma }) => {
|
||||
// const username = user.displayName || user.email;
|
||||
// const space = <div className="space"></div>;
|
||||
|
||||
// return (
|
||||
// <StyledUserNameLink className="user">
|
||||
// {user.profileUrl ? (
|
||||
// <Link
|
||||
// className="username link"
|
||||
// isHovered
|
||||
// type="action"
|
||||
// href={user.profileURl}
|
||||
// >
|
||||
// {username}
|
||||
// {withComma ? "," : ""}
|
||||
// {withComma && space}
|
||||
// </Link>
|
||||
// ) : (
|
||||
// <div className="username text" key={user.id}>
|
||||
// {username}
|
||||
// {withComma ? "," : ""}
|
||||
// {withComma && space}
|
||||
// </div>
|
||||
// )}
|
||||
// </StyledUserNameLink>
|
||||
// );
|
||||
// };
|
||||
|
||||
export default HistoryBlockItemList;
|
Loading…
Reference in New Issue
Block a user