Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-29 01:28:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

separate functions for month rows and days

Browse source
This commit is contained in:
svetlagasheva 2019-03-19 11:15:26 +02:00
parent 4639d15e80
commit c1b8a7a469
1 changed files with 59 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
src/routes/Calendar/Calendar.js
View file

@ -91,9 +91,7 @@ class Calendar extends Component {
};
}
renderMonthButton(month) {
const date = new Date(new Date(month).setDate(1));
renderMonthButton(date) {
return (
date.getMonth() === this.state.date.getMonth() ?
<div className={styles['month']}>{months[date.getMonth()]}</div>
@ -102,9 +100,63 @@ class Calendar extends Component {
);
}
render() {
renderMonthRows = () => {
const { padsCount, daysCount, rowsCount } = this.getMonthInfo(this.state.date);
var rows = [];
for (let row = 0; row < rowsCount; row++) {
rows.push(
<div key={row} className={styles['row']}>
{this.renderMonthDays(row, rowsCount, padsCount, daysCount)}
</div>
)
}
return rows;
}
renderMonthDays = (row, rowsCount, padsCount, daysCount) => {
var days = [];
for (let day = 0; day < 7; day++) {
days.push(
day < padsCount && row === 0
?
<div key={day} className={styles['pad']} />
:
(row * 7) + (day - padsCount) < daysCount
?
<Input key={day}
className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}
type={'button'}
data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1)).getTime()}
onClick={this.changeDate}
>
<div className={styles['date-container']}>
<div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && new Date().getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
</div>
<div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
{this.props.metaItems
.map((metaitem) => metaitem.videos
.filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
.map((video) =>
<div key={video.id}
style={{ backgroundImage: `url('${metaitem.poster}')` }}
className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
data-video-id={video.id}
onClick={this.showVideoInfo}
/>
)
)}
</div>
</Input>
:
null
)
}
return days;
}
render() {
const videosDates = this.props.metaItems
.map((metaitem) => metaitem.videos
.filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth()))
@ -119,70 +171,15 @@ class Calendar extends Component {
<div className={styles['calendar-container']}>
<div className={styles['calendar']}>
<div className={styles['months']}>
{this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() - 1)))}
{this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() - 1), 1)}
{this.renderMonthButton(this.state.date)}
{this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1)))}
{this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() + 1), 1)}
</div>
<div className={styles['month-days']}>
<div className={styles['week-days']}>
{days.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
</div>
{
(() => {
var rows = [];
for (let row = 0; row < rowsCount; row++) {
rows.push(
<div key={row} className={styles['row']}>
{
(() => {
var days = [];
for (let day = 0; day < 7; day++) {
days.push(
day < padsCount && row === 0
?
<div key={day} className={styles['pad']} />
:
(row * 7) + (day - padsCount) < daysCount
?
<Input key={day}
className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}
type={'button'}
data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1)).getTime()}
onClick={this.changeDate}
>
<div className={styles['date-container']}>
<div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && new Date().getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
</div>
<div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
{this.props.metaItems
.map((metaitem) => metaitem.videos
.filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
.map((video) =>
<div key={video.id}
style={{ backgroundImage: `url('${metaitem.poster}')` }}
className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
data-video-id={video.id}
onClick={this.showVideoInfo}
/>
)
)}
</div>
</Input>
:
null
)
}
return days;
})()
}
</div>
)
}
return rows;
})()
}
{this.renderMonthRows()}
</div>
</div>
<div ref={this.videosScrollContainerRef} className={styles['videos-scroll-container']}>