Shared:Calendar:Add scroll to calendar.
This commit is contained in:
parent
1bfa73ac4b
commit
49b78e1e15
@ -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 { Portal } from "@docspace/shared/components/portal";
|
||||
import { Calendar } from "@docspace/shared/components/calendar";
|
||||
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;
|
||||
right: 16px;
|
||||
top: 20px;
|
||||
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
|
||||
element={
|
||||
<StyledCalendar
|
||||
setSelectedDate={onDateSet}
|
||||
selectedDate={selectedDate}
|
||||
minDate={new Date(formattedRoomCreationDate)}
|
||||
maxDate={new Date()}
|
||||
forwardedRef={calendarRef}
|
||||
isMobile={isMobile()}
|
||||
/>
|
||||
}
|
||||
<StyledCalendar
|
||||
height={height}
|
||||
setSelectedDate={onDateSet}
|
||||
selectedDate={selectedDate}
|
||||
minDate={new Date(formattedRoomCreationDate)}
|
||||
maxDate={new Date()}
|
||||
forwardedRef={calendarRef}
|
||||
isMobile={isMobile()}
|
||||
isScroll={!isMobile()}
|
||||
/>
|
||||
)}
|
||||
</StyledCalendarComponent>
|
||||
|
@ -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};
|
||||
|
@ -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 ? (
|
||||
<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}
|
||||
/>
|
||||
)}
|
||||
{CalendarNode}
|
||||
</StyledContainerTheme>
|
||||
);
|
||||
};
|
||||
|
@ -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 {
|
||||
|
@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user