Web:Added scrolling to element by date selected in the calendar.

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import styled from "styled-components";
+import moment from "moment";
 import Calendar from "@docspace/components/calendar";
 
 const StyledCalendar = styled.div`
@@ -18,14 +19,15 @@ const StyledCalendar = styled.div`
   }
 `;
 
-const CalendarComponent = () => {
+const CalendarComponent = ({ setCalendarDay }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState(null);
 
   const toggleCalendar = () => setIsOpen((open) => !open);
   const onDateSet = (date) => {
-    console.log("date", date);
+    const formattedDate = moment(date.format("YYYY-MM-DD"));
     setSelectedDate(date);
+    setCalendarDay(formattedDate._i);
     setIsOpen(false);
   };
 

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js

@@ -22,6 +22,7 @@ const FilesItemTitle = ({
   setInvitePanelOptions,
   setInviteUsersWarningDialogVisible,
   isPublicRoomType,
+  setCalendarDay,
 }) => {
   const itemTitleRef = useRef();
 
@@ -84,7 +85,9 @@ const FilesItemTitle = ({
         )}
         {selection && (
           <StyledItemOptions>
-            {openHistory && <CalendarComponent />}
+            {openHistory && (
+              <CalendarComponent setCalendarDay={setCalendarDay} />
+            )}
 
             <ItemContextOptions
               t={t}

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js

@@ -17,6 +17,7 @@ const ItemTitle = ({
   roomsView,
   getIcon,
   getUserContextOptions,
+  setCalendarDay,
 }) => {
   if (!selection) return null;
 
@@ -53,12 +54,14 @@ const ItemTitle = ({
       isSeveralItems={isSeveralItems}
       getIcon={getIcon}
       openHistory={openHistory}
+      setCalendarDay={setCalendarDay}
     />
   );
 };
 
 export default inject(({ auth, settingsStore, peopleStore, oformsStore }) => {
-  const { selectionParentRoom, roomsView } = auth.infoPanelStore;
+  const { selectionParentRoom, roomsView, setCalendarDay } =
+    auth.infoPanelStore;
   const { getIcon } = settingsStore;
   const { getUserContextOptions } = peopleStore.contextOptionsStore;
   const { gallerySelected } = oformsStore;
@@ -69,5 +72,6 @@ export default inject(({ auth, settingsStore, peopleStore, oformsStore }) => {
     selectionParentRoom,
     roomsView,
     getIcon,
+    setCalendarDay,
   };
 })(observer(ItemTitle));

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

@@ -41,11 +41,9 @@ const HistoryBlock = ({
     ? initiator.avatarSmall
     : DefaultUserAvatarSmall;
 
-  console.log("json.ModifiedDate", json.ModifiedDate);
-
   return (
     <StyledHistoryBlock
-      id="StyledHistoryBlock"
+      className={json.ModifiedDate}
       withBottomDivider={!isLastEntity}
       isUserAction={isUserAction}
     >

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

@@ -23,6 +23,7 @@ const History = ({
   openUser,
   isVisitor,
   isCollaborator,
+  calendarDay,
 }) => {
   const isMount = useRef(true);
   const abortControllerRef = useRef(new AbortController());
@@ -62,6 +63,37 @@ const History = ({
     fetchHistory(selection.id);
   }, [selection.id]);
 
+  useEffect(() => {
+    if (!calendarDay) return;
+
+    const historyListNode = document.getElementById("history-list-info-panel");
+
+    if (!historyListNode) return;
+
+    const scroll = historyListNode.closest(".scroller");
+    let datesCoincidingWithCalendarDay = [];
+
+    selectionHistory.forEach((item) => {
+      item.feeds.forEach((feed) => {
+        if (feed.json.ModifiedDate.slice(0, 10) === calendarDay)
+          datesCoincidingWithCalendarDay.push(feed.json.ModifiedDate);
+      });
+    });
+
+    if (!datesCoincidingWithCalendarDay.length) return;
+
+    const dayNode = historyListNode.getElementsByClassName(
+      datesCoincidingWithCalendarDay[0]
+    );
+
+    if (!dayNode[0]) return;
+
+    //TODO:const 120
+    const y = dayNode[0].offsetTop - 120;
+
+    scroll.scrollTo(0, y);
+  }, [calendarDay]);
+
   useEffect(() => {
     return () => {
       abortControllerRef.current?.abort();
@@ -72,10 +104,8 @@ const History = ({
   if (!selectionHistory) return <Loaders.InfoPanelViewLoader view="history" />;
   if (!selectionHistory?.length) return <NoHistory t={t} />;
 
-  console.log("selectionHistory", selectionHistory);
-
   return (
-    <StyledHistoryList id="StyledHistoryList">
+    <StyledHistoryList id="history-list-info-panel">
       {selectionHistory.map(({ day, feeds }) => [
         <StyledHistorySubtitle key={day}>{day}</StyledHistorySubtitle>,
         ...feeds.map((feed, i) => (
@@ -110,6 +140,7 @@ export default inject(({ auth, filesStore, filesActionsStore }) => {
     selectionParentRoom,
     getInfoPanelItemIcon,
     openUser,
+    calendarDay,
   } = auth.infoPanelStore;
   const { personal, culture } = auth.settingsStore;
 
@@ -134,5 +165,6 @@ export default inject(({ auth, filesStore, filesActionsStore }) => {
     openUser,
     isVisitor,
     isCollaborator,
+    calendarDay,
   };
 })(withTranslation(["InfoPanel", "Common", "Translations"])(observer(History)));

packages/common/components/Section/sub-components/info-panel-body.js

@@ -30,8 +30,6 @@ const StyledScrollbar = styled(Scrollbar)`
 const SubInfoPanelBody = ({ children, isInfoPanelScrollLocked }) => {
   const content = children?.props?.children;
 
-  console.log("SubInfoPanelBody");
-
   return (
     <StyledScrollbar
       $isScrollLocked={isInfoPanelScrollLocked}

packages/common/store/InfoPanelStore.js

@@ -31,6 +31,7 @@ class InfoPanelStore {
   updateRoomMembers = null;
   isScrollLocked = false;
   historyWithFileList = false;
+  calendarDay = null;
 
   authStore = null;
   settingsStore = null;
@@ -88,6 +89,10 @@ class InfoPanelStore {
     this.isScrollLocked = isScrollLocked;
   };
 
+  setCalendarDay = (calendarDay) => {
+    this.calendarDay = calendarDay;
+  };
+
   // Selection helpers //
 
   getSelectedItems = () => {