mirror of
https://github.com/Radarr/Radarr.git
synced 2024-08-18 16:29:41 +02:00
New: Calendar month view will scroll to today on load and press
(cherry picked from commit 7c0d3444376caa8a116b5c2084821c326beb01a1) Closes #8501
This commit is contained in:
parent
572c410f54
commit
3468f1144d
@ -1,64 +0,0 @@
|
|||||||
import classNames from 'classnames';
|
|
||||||
import moment from 'moment';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import * as calendarViews from 'Calendar/calendarViews';
|
|
||||||
import CalendarEventConnector from 'Calendar/Events/CalendarEventConnector';
|
|
||||||
import styles from './CalendarDay.css';
|
|
||||||
|
|
||||||
function CalendarDay(props) {
|
|
||||||
const {
|
|
||||||
date,
|
|
||||||
time,
|
|
||||||
isTodaysDate,
|
|
||||||
events,
|
|
||||||
view,
|
|
||||||
onEventModalOpenToggle
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={classNames(
|
|
||||||
styles.day,
|
|
||||||
view === calendarViews.DAY && styles.isSingleDay
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
view === calendarViews.MONTH &&
|
|
||||||
<div className={classNames(
|
|
||||||
styles.dayOfMonth,
|
|
||||||
isTodaysDate && styles.isToday,
|
|
||||||
!moment(date).isSame(moment(time), 'month') && styles.isDifferentMonth
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{moment(date).date()}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
<div>
|
|
||||||
{
|
|
||||||
events.map((event) => {
|
|
||||||
return (
|
|
||||||
<CalendarEventConnector
|
|
||||||
key={event.id}
|
|
||||||
movieId={event.id}
|
|
||||||
date={date}
|
|
||||||
{...event}
|
|
||||||
onEventModalOpenToggle={onEventModalOpenToggle}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
CalendarDay.propTypes = {
|
|
||||||
date: PropTypes.string.isRequired,
|
|
||||||
time: PropTypes.string.isRequired,
|
|
||||||
isTodaysDate: PropTypes.bool.isRequired,
|
|
||||||
events: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
||||||
view: PropTypes.string.isRequired,
|
|
||||||
onEventModalOpenToggle: PropTypes.func.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CalendarDay;
|
|
67
frontend/src/Calendar/Day/CalendarDay.tsx
Normal file
67
frontend/src/Calendar/Day/CalendarDay.tsx
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import classNames from 'classnames';
|
||||||
|
import moment from 'moment';
|
||||||
|
import React from 'react';
|
||||||
|
import * as calendarViews from 'Calendar/calendarViews';
|
||||||
|
import CalendarEventConnector from 'Calendar/Events/CalendarEventConnector';
|
||||||
|
import CalendarEvent from 'typings/CalendarEvent';
|
||||||
|
import styles from './CalendarDay.css';
|
||||||
|
|
||||||
|
interface CalendarDayProps {
|
||||||
|
date: string;
|
||||||
|
time: string;
|
||||||
|
isTodaysDate: boolean;
|
||||||
|
events: CalendarEvent[];
|
||||||
|
view: string;
|
||||||
|
onEventModalOpenToggle(...args: unknown[]): unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
function CalendarDay(props: CalendarDayProps) {
|
||||||
|
const { date, time, isTodaysDate, events, view, onEventModalOpenToggle } =
|
||||||
|
props;
|
||||||
|
|
||||||
|
const ref = React.useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (isTodaysDate && view === calendarViews.MONTH && ref.current) {
|
||||||
|
ref.current.scrollIntoView();
|
||||||
|
}
|
||||||
|
}, [time, isTodaysDate, view]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={classNames(
|
||||||
|
styles.day,
|
||||||
|
view === calendarViews.DAY && styles.isSingleDay
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{view === calendarViews.MONTH && (
|
||||||
|
<div
|
||||||
|
className={classNames(
|
||||||
|
styles.dayOfMonth,
|
||||||
|
isTodaysDate && styles.isToday,
|
||||||
|
!moment(date).isSame(moment(time), 'month') &&
|
||||||
|
styles.isDifferentMonth
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{moment(date).date()}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
{events.map((event) => {
|
||||||
|
return (
|
||||||
|
<CalendarEventConnector
|
||||||
|
key={event.id}
|
||||||
|
{...event}
|
||||||
|
movieId={event.id}
|
||||||
|
date={date as string}
|
||||||
|
onEventModalOpenToggle={onEventModalOpenToggle}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CalendarDay;
|
@ -25,6 +25,7 @@ class CalendarEvent extends Component {
|
|||||||
title,
|
title,
|
||||||
titleSlug,
|
titleSlug,
|
||||||
genres,
|
genres,
|
||||||
|
date,
|
||||||
monitored,
|
monitored,
|
||||||
certification,
|
certification,
|
||||||
hasFile,
|
hasFile,
|
||||||
@ -33,8 +34,7 @@ class CalendarEvent extends Component {
|
|||||||
showMovieInformation,
|
showMovieInformation,
|
||||||
showCutoffUnmetIcon,
|
showCutoffUnmetIcon,
|
||||||
fullColorEvents,
|
fullColorEvents,
|
||||||
colorImpairedMode,
|
colorImpairedMode
|
||||||
date
|
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const isDownloading = !!(queueItem || grabbed);
|
const isDownloading = !!(queueItem || grabbed);
|
||||||
@ -148,17 +148,18 @@ CalendarEvent.propTypes = {
|
|||||||
inCinemas: PropTypes.string,
|
inCinemas: PropTypes.string,
|
||||||
physicalRelease: PropTypes.string,
|
physicalRelease: PropTypes.string,
|
||||||
digitalRelease: PropTypes.string,
|
digitalRelease: PropTypes.string,
|
||||||
|
date: PropTypes.string.isRequired,
|
||||||
monitored: PropTypes.bool.isRequired,
|
monitored: PropTypes.bool.isRequired,
|
||||||
certification: PropTypes.string,
|
certification: PropTypes.string,
|
||||||
hasFile: PropTypes.bool.isRequired,
|
hasFile: PropTypes.bool.isRequired,
|
||||||
grabbed: PropTypes.bool,
|
grabbed: PropTypes.bool,
|
||||||
queueItem: PropTypes.object,
|
queueItem: PropTypes.object,
|
||||||
showMovieInformation: PropTypes.bool.isRequired,
|
// These props come from the connector, not marked as required to appease TS for now.
|
||||||
showCutoffUnmetIcon: PropTypes.bool.isRequired,
|
showMovieInformation: PropTypes.bool,
|
||||||
fullColorEvents: PropTypes.bool.isRequired,
|
showCutoffUnmetIcon: PropTypes.bool,
|
||||||
timeFormat: PropTypes.string.isRequired,
|
fullColorEvents: PropTypes.bool,
|
||||||
colorImpairedMode: PropTypes.bool.isRequired,
|
timeFormat: PropTypes.string,
|
||||||
date: PropTypes.string.isRequired
|
colorImpairedMode: PropTypes.bool
|
||||||
};
|
};
|
||||||
|
|
||||||
CalendarEvent.defaultProps = {
|
CalendarEvent.defaultProps = {
|
||||||
|
5
frontend/src/typings/CalendarEvent.ts
Normal file
5
frontend/src/typings/CalendarEvent.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import Movie from 'Movie/Movie';
|
||||||
|
|
||||||
|
type CalendarEvent = Movie;
|
||||||
|
|
||||||
|
export default CalendarEvent;
|
Loading…
Reference in New Issue
Block a user