mirror of https://github.com/lidarr/Lidarr
138 lines
3.8 KiB
JavaScript
138 lines
3.8 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
import Measure from 'react-measure';
|
|
import { align, icons } from 'Helpers/Props';
|
|
import PageContent from 'Components/Page/PageContent';
|
|
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
|
|
import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
|
|
import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
|
|
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
|
|
import FilterMenu from 'Components/Menu/FilterMenu';
|
|
import MenuContent from 'Components/Menu/MenuContent';
|
|
import FilterMenuItem from 'Components/Menu/FilterMenuItem';
|
|
import CalendarLinkModal from './iCal/CalendarLinkModal';
|
|
import Legend from './Legend/Legend';
|
|
import CalendarConnector from './CalendarConnector';
|
|
import styles from './CalendarPage.css';
|
|
|
|
const MINIMUM_DAY_WIDTH = 120;
|
|
|
|
class CalendarPage extends Component {
|
|
|
|
//
|
|
// Lifecycle
|
|
|
|
constructor(props, context) {
|
|
super(props, context);
|
|
|
|
this.state = {
|
|
isCalendarLinkModalOpen: false,
|
|
width: 0
|
|
};
|
|
}
|
|
|
|
//
|
|
// Listeners
|
|
|
|
onMeasure = ({ width }) => {
|
|
this.setState({ width });
|
|
const days = Math.max(3, Math.min(7, Math.floor(width / MINIMUM_DAY_WIDTH)));
|
|
|
|
this.props.onDaysCountChange(days);
|
|
}
|
|
|
|
onFilterMenuItemPress = (filterKey, unmonitored) => {
|
|
this.props.onUnmonitoredChange(unmonitored);
|
|
}
|
|
|
|
onGetCalendarLinkPress = () => {
|
|
this.setState({ isCalendarLinkModalOpen: true });
|
|
}
|
|
|
|
onGetCalendarLinkModalClose = () => {
|
|
this.setState({ isCalendarLinkModalOpen: false });
|
|
}
|
|
|
|
//
|
|
// Render
|
|
|
|
render() {
|
|
const {
|
|
unmonitored,
|
|
colorImpairedMode
|
|
} = this.props;
|
|
|
|
return (
|
|
<PageContent title="Calendar">
|
|
<PageToolbar>
|
|
<PageToolbarSection>
|
|
<PageToolbarButton
|
|
label="iCal Link"
|
|
iconName={icons.CALENDAR}
|
|
onPress={this.onGetCalendarLinkPress}
|
|
/>
|
|
</PageToolbarSection>
|
|
|
|
<PageToolbarSection alignContent={align.RIGHT}>
|
|
<FilterMenu alignMenu={align.RIGHT}>
|
|
<MenuContent>
|
|
<FilterMenuItem
|
|
name="unmonitored"
|
|
value={true}
|
|
filterKey="unmonitored"
|
|
filterValue={unmonitored}
|
|
onPress={this.onFilterMenuItemPress}
|
|
>
|
|
All
|
|
</FilterMenuItem>
|
|
|
|
<FilterMenuItem
|
|
name="unmonitored"
|
|
value={false}
|
|
filterKey="unmonitored"
|
|
filterValue={unmonitored}
|
|
onPress={this.onFilterMenuItemPress}
|
|
>
|
|
Monitored Only
|
|
</FilterMenuItem>
|
|
</MenuContent>
|
|
</FilterMenu>
|
|
</PageToolbarSection>
|
|
</PageToolbar>
|
|
|
|
<PageContentBodyConnector
|
|
className={styles.calendarPageBody}
|
|
innerClassName={styles.calendarInnerPageBody}
|
|
>
|
|
<Measure
|
|
whitelist={['width']}
|
|
onMeasure={this.onMeasure}
|
|
>
|
|
{
|
|
this.state.width > 0 ?
|
|
<CalendarConnector /> :
|
|
<div />
|
|
}
|
|
</Measure>
|
|
|
|
<Legend colorImpairedMode={colorImpairedMode} />
|
|
</PageContentBodyConnector>
|
|
|
|
<CalendarLinkModal
|
|
isOpen={this.state.isCalendarLinkModalOpen}
|
|
onModalClose={this.onGetCalendarLinkModalClose}
|
|
/>
|
|
</PageContent>
|
|
);
|
|
}
|
|
}
|
|
|
|
CalendarPage.propTypes = {
|
|
unmonitored: PropTypes.bool.isRequired,
|
|
colorImpairedMode: PropTypes.bool.isRequired,
|
|
onDaysCountChange: PropTypes.func.isRequired,
|
|
onUnmonitoredChange: PropTypes.func.isRequired
|
|
};
|
|
|
|
export default CalendarPage;
|