coded out "Show More" intractive link on historyBlockItem

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import Text from "@docspace/components/text";
 import Link from "@docspace/components/link";
@@ -12,10 +12,14 @@ import {
 import { RoomsType } from "@docspace/common/constants";
 
 export const HistoryBlockItemList = ({
+  t,
   items,
   getItemIcon,
   openFileAction,
 }) => {
+  const [isShowMore, setIsShowMore] = useState(items.length <= 3);
+  const onShowMore = () => setIsShowMore(true);
+
   const changeUrl = (item) => {
     const id = item.ExtraLocationUrl.split("folderid=")[1];
     const viewUrl = item.ExtraLocationUrl;
@@ -40,7 +44,9 @@ export const HistoryBlockItemList = ({
 
   return (
     <StyledHistoryBlockFilesList>
-      {parsedItems.map((item, i) => (
+      {parsedItems.map((item, i) => {
+        if (!isShowMore && i > 2) return null;
+        return (
           <StyledHistoryBlockFile isRoom={item.isRoom} key={i}>
             <ReactSVG className="icon" src={getItemIcon(item, 24)} />
             <div className="item-title">
@@ -55,7 +61,13 @@ export const HistoryBlockItemList = ({
               onClick={() => changeUrl(item)}
             />
           </StyledHistoryBlockFile>
-      ))}
+        );
+      })}
+      {!isShowMore && (
+        <Text className="show_more-link" onClick={onShowMore}>
+          {t("Common:ShowMore")}
+        </Text>
+      )}
     </StyledHistoryBlockFilesList>
   );
 };