Shared:Calendar:Add scroll to calendar.

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

@@ -2,11 +2,13 @@ import IconCalendar from "PUBLIC_DIR/images/calendar.info.panel.react.svg?url";
 import { useState, useEffect, useRef } from "react";
 import styled, { css } from "styled-components";
 import moment from "moment";
-import {Calendar} from "@docspace/shared/components/calendar"
+import { Calendar } from "@docspace/shared/components/calendar";
-import { Portal } from "@docspace/shared/components/portal";
 import { isMobile } from "@docspace/shared/utils";
 import { ReactSVG } from "react-svg";
 
+const heightCalendar = 376;
+const heightCalendarMobile = 420;
+
 const StyledCalendarComponent = styled.div`
   position: relative;
 
@@ -17,8 +19,10 @@ const StyledCalendarComponent = styled.div`
 
 const StyledCalendar = styled(Calendar)`
   position: absolute;
-  top: 134px;
+  top: 20px;
-  right: 16px;
+  right: -30px;
+
+  height: ${(props) => props.height + "px"};
 
   ${(props) =>
     props.isMobile &&
@@ -27,24 +31,42 @@ const StyledCalendar = styled(Calendar)`
       bottom: 0;
       top: auto;
       right: auto;
+      left: 0;
+      height: ${heightCalendarMobile + "px"};
     `}
 `;
 
 const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState(null);
+  const [height, setHeight] = useState(heightCalendar);
 
   const calendarRef = useRef();
   const calendarButtonRef = useRef();
 
   useEffect(() => {
     document.addEventListener("click", handleClick, { capture: true });
+    window.addEventListener("resize", onChangeHeight);
+    onChangeHeight();
+
     return () => {
       document.removeEventListener("click", handleClick, { capture: true });
+      window.removeEventListener("resize", onChangeHeight);
       setCalendarDay(null);
     };
   }, []);
 
+  const onChangeHeight = () => {
+    const hightTop = calendarButtonRef?.current?.getBoundingClientRect().top;
+    const hightIconCalendar = 20;
+    const hightWindow = document.documentElement.clientHeight;
+    const hightScroll = hightWindow - hightIconCalendar - hightTop;
+
+    if (hightScroll !== heightCalendar && hightScroll > heightCalendar) {
+      setHeight(heightCalendar);
+    } else setHeight(hightScroll);
+  };
+
   const handleClick = (e) => {
     !calendarButtonRef?.current?.contains(e.target) &&
       !calendarRef?.current?.contains(e.target) &&
@@ -74,17 +96,15 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => {
       </div>
 
       {isOpen && (
-        <Portal
+        <StyledCalendar
-          element={
+          height={height}
-            <StyledCalendar
+          setSelectedDate={onDateSet}
-              setSelectedDate={onDateSet}
+          selectedDate={selectedDate}
-              selectedDate={selectedDate}
+          minDate={new Date(formattedRoomCreationDate)}
-              minDate={new Date(formattedRoomCreationDate)}
+          maxDate={new Date()}
-              maxDate={new Date()}
+          forwardedRef={calendarRef}
-              forwardedRef={calendarRef}
+          isMobile={isMobile()}
-              isMobile={isMobile()}
+          isScroll={!isMobile()}
-            />
-          }
         />
       )}
     </StyledCalendarComponent>

packages/shared/components/calendar/Calendar.styled.tsx

@@ -78,6 +78,7 @@ ButtonsContainer.displayName = "ButtonsContainer";
 const CalendarContainer = styled.div<{
   isMobile?: boolean;
   big?: boolean;
+  isScroll?: boolean;
 }>`
   ${(props) =>
     !props.isMobile &&
@@ -109,19 +110,37 @@ const CalendarContainer = styled.div<{
     props.big ? "repeat(4, 1fr)" : "repeat(7, 1fr)"};
   box-sizing: border-box;
   padding: ${(props) => (props.big ? "14px 6px 6px 6px" : "0 6px")};
+  ${(props) =>
+    props.isScroll &&
+    css`
+      margin-bottom: 28px;
+    `};
 `;
 
 CalendarContainer.defaultProps = { theme: Base };
 
-const Container = styled.div<{ isMobile?: boolean }>`
+const Container = styled.div<{ isMobile?: boolean; isScroll?: boolean }>`
   box-sizing: border-box;
   width: ${(props) => (props.isMobile ? "100%" : "362px")};
   height: ${(props) => (props.isMobile ? "420px" : "376px")};
-  padding: ${(props) => (props.isMobile ? "16px" : "30px 28px 28px 28px")};
+  padding: ${(props) =>
+    props.isMobile
+      ? "16px"
+      : props.isScroll
+        ? "0px 0px 0px 28px"
+        : "30px 28px 28px 28px"};
   box-shadow: ${(props) => props.theme.calendar.boxShadow};
   border-radius: 6px;
   z-index: 320;
   background-color: ${(props) => props.theme.backgroundColor};
+
+  ${(props) =>
+    props.isScroll &&
+    css`
+      header {
+        padding: 30px 23px 0 12px !important;
+      }
+    `};
 `;
 
 Container.defaultProps = { theme: Base };
@@ -317,6 +336,7 @@ Weekday.defaultProps = { theme: Base };
 const StyledContainerTheme = styled(Container)<{
   $currentColorScheme?: TColorScheme;
   isMobile?: boolean;
+  isScroll?: boolean;
 }>`
   ${HeaderActionIcon} {
     border-color: ${(props) => props.$currentColorScheme?.main?.accent};

packages/shared/components/calendar/Calendar.tsx

@@ -30,6 +30,7 @@ import { useTheme } from "styled-components";
 import moment from "moment";
 import "moment/locale/ar-sa";
 
+import { Scrollbar } from "@docspace/shared/components/scrollbar";
 import { Days, Months, Years } from "./sub-components";
 
 import { getValidDates } from "./utils";
@@ -49,6 +50,7 @@ const Calendar = ({
   onChange,
   isMobile,
   forwardedRef,
+  isScroll = false,
 }: CalendarProps) => {
   moment.locale(locale);
 
@@ -105,6 +107,49 @@ const Calendar = ({
     setObservedDate(date);
   }, [initialDate, maxDate, minDate]);
 
+  const CalendarBodyNode =
+    selectedScene === 0 ? (
+      <Days
+        observedDate={observedDate}
+        setObservedDate={setObservedDate}
+        setSelectedScene={setSelectedScene}
+        selectedDate={selectedDate}
+        handleDateChange={handleDateChange}
+        minDate={resultMinDate}
+        maxDate={resultMaxDate}
+        isMobile={isMobile || false}
+        isScroll={isScroll}
+      />
+    ) : selectedScene === 1 ? (
+      <Months
+        observedDate={observedDate}
+        setObservedDate={setObservedDate}
+        setSelectedScene={setSelectedScene}
+        selectedDate={selectedDate}
+        minDate={resultMinDate}
+        maxDate={resultMaxDate}
+        isMobile={isMobile || false}
+        isScroll={isScroll}
+      />
+    ) : (
+      <Years
+        observedDate={observedDate}
+        setObservedDate={setObservedDate}
+        setSelectedScene={setSelectedScene}
+        selectedDate={selectedDate}
+        minDate={resultMinDate}
+        maxDate={resultMaxDate}
+        isMobile={isMobile || false}
+        isScroll={isScroll}
+      />
+    );
+
+  const CalendarNode = isScroll ? (
+    <Scrollbar>{CalendarBodyNode}</Scrollbar>
+  ) : (
+    CalendarBodyNode
+  );
+
   return (
     <StyledContainerTheme
       id={id}
@@ -114,39 +159,9 @@ const Calendar = ({
       ref={forwardedRef}
       $currentColorScheme={theme?.currentColorScheme}
       data-testid="calendar"
+      isScroll={isScroll}
     >
-      {selectedScene === 0 ? (
+      {CalendarNode}
-        <Days
-          observedDate={observedDate}
-          setObservedDate={setObservedDate}
-          setSelectedScene={setSelectedScene}
-          selectedDate={selectedDate}
-          handleDateChange={handleDateChange}
-          minDate={resultMinDate}
-          maxDate={resultMaxDate}
-          isMobile={isMobile || false}
-        />
-      ) : selectedScene === 1 ? (
-        <Months
-          observedDate={observedDate}
-          setObservedDate={setObservedDate}
-          setSelectedScene={setSelectedScene}
-          selectedDate={selectedDate}
-          minDate={resultMinDate}
-          maxDate={resultMaxDate}
-          isMobile={isMobile || false}
-        />
-      ) : (
-        <Years
-          observedDate={observedDate}
-          setObservedDate={setObservedDate}
-          setSelectedScene={setSelectedScene}
-          selectedDate={selectedDate}
-          minDate={resultMinDate}
-          maxDate={resultMaxDate}
-          isMobile={isMobile || false}
-        />
-      )}
     </StyledContainerTheme>
   );
 };

packages/shared/components/calendar/Calendar.types.tsx

@@ -49,6 +49,7 @@ export interface CalendarProps {
   initialDate?: moment.Moment | Date;
   isMobile?: boolean;
   forwardedRef?: React.RefObject<HTMLDivElement>;
+  isScroll?: boolean;
 }
 
 export interface DaysProps {
@@ -60,6 +61,7 @@ export interface DaysProps {
   minDate: moment.Moment;
   maxDate: moment.Moment;
   isMobile: boolean;
+  isScroll?: boolean;
 }
 
 export interface DaysHeaderProps {
@@ -78,6 +80,7 @@ export interface DaysBodyProps {
   minDate: moment.Moment;
   maxDate: moment.Moment;
   isMobile: boolean;
+  isScroll?: boolean;
 }
 
 export interface HeaderButtonsProps {
@@ -96,6 +99,7 @@ export interface MonthsProps {
   minDate: moment.Moment;
   maxDate: moment.Moment;
   isMobile: boolean;
+  isScroll?: boolean;
 }
 
 export interface MonthsBodyProps {
@@ -106,6 +110,7 @@ export interface MonthsBodyProps {
   minDate: moment.Moment;
   maxDate: moment.Moment;
   isMobile: boolean;
+  isScroll?: boolean;
 }
 
 export interface MonthsHeaderProps {
@@ -125,6 +130,7 @@ export interface YearsProps {
   minDate: moment.Moment;
   maxDate: moment.Moment;
   isMobile: boolean;
+  isScroll?: boolean;
 }
 
 export interface YearsHeaderProps {

packages/shared/components/calendar/sub-components/Days.tsx

@@ -38,6 +38,7 @@ export const Days = ({
   minDate,
   maxDate,
   isMobile,
+  isScroll,
 }: DaysProps) => {
   return (
     <>
@@ -56,6 +57,7 @@ export const Days = ({
         minDate={minDate}
         maxDate={maxDate}
         isMobile={isMobile}
+        isScroll={isScroll}
       />
     </>
   );

packages/shared/components/calendar/sub-components/DaysBody.tsx

@@ -37,6 +37,7 @@ export const DaysBody = ({
   minDate,
   maxDate,
   isMobile,
+  isScroll,
 }: DaysBodyProps) => {
   const daysElements = getDayElements(
     observedDate,
@@ -49,7 +50,7 @@ export const DaysBody = ({
   const weekdayElements = getWeekdayElements(isMobile);
 
   return (
-    <CalendarContainer isMobile={isMobile}>
+    <CalendarContainer isMobile={isMobile} isScroll={isScroll}>
       {weekdayElements} {daysElements}
     </CalendarContainer>
   );

packages/shared/components/calendar/sub-components/Months.tsx

@@ -38,6 +38,7 @@ export const Months = ({
   minDate,
   maxDate,
   isMobile,
+  isScroll,
 }: MonthsProps) => {
   return (
     <>
@@ -57,6 +58,7 @@ export const Months = ({
         minDate={minDate}
         maxDate={maxDate}
         isMobile={isMobile}
+        isScroll={isScroll}
       />
     </>
   );

packages/shared/components/calendar/sub-components/MonthsBody.tsx

@@ -37,6 +37,7 @@ export const MonthsBody = ({
   minDate,
   maxDate,
   isMobile,
+  isScroll,
 }: MonthsBodyProps) => {
   const months = getCalendarMonths(observedDate);
   const monthsElements = getMonthElements(
@@ -50,7 +51,7 @@ export const MonthsBody = ({
   );
 
   return (
-    <CalendarContainer big isMobile={isMobile}>
+    <CalendarContainer big isMobile={isMobile} isScroll={isScroll}>
       {monthsElements}
     </CalendarContainer>
   );

packages/shared/components/calendar/sub-components/Years.tsx

@@ -37,6 +37,7 @@ export const Years = ({
   minDate,
   maxDate,
   isMobile,
+  isScroll,
 }: YearsProps) => {
   return (
     <>
@@ -55,6 +56,7 @@ export const Years = ({
         minDate={minDate}
         maxDate={maxDate}
         isMobile={isMobile}
+        isScroll={isScroll}
       />
     </>
   );

packages/shared/components/calendar/sub-components/YearsBody.tsx

@@ -38,6 +38,7 @@ export const YearsBody = ({
   minDate,
   maxDate,
   isMobile,
+  isScroll,
 }: YearsProps) => {
   const years = getCalendarYears(observedDate);
   const yearElements = getYearElements(
@@ -51,7 +52,7 @@ export const YearsBody = ({
   );
 
   return (
-    <CalendarContainer big isMobile={isMobile}>
+    <CalendarContainer big isMobile={isMobile} isScroll={isScroll}>
       {yearElements}
     </CalendarContainer>
   );