1 | import * as React from 'react';
|
2 | import * as R from 'ramda';
|
3 |
|
4 | import { DAYS } from '../utils/days';
|
5 | import { WrapperTable, DaysRow, DaysColumn } from '../DatePicker.styled';
|
6 |
|
7 | interface IProps {
|
8 | year: number;
|
9 | month: number;
|
10 | day: number;
|
11 | dayOfTheWeek: number;
|
12 | onClick: (e?: any, i?: any) => any;
|
13 | selectedDayWeek: (e: number) => void;
|
14 | }
|
15 |
|
16 | export default ({ year, month, day, onClick, selectedDayWeek }: IProps) => {
|
17 | const firstDay = new Date(year, month, 1);
|
18 | const lastDay = new Date(year, month + 1, 0);
|
19 | let offset = firstDay.getDay();
|
20 | let dayCount = 0;
|
21 |
|
22 | const isActive = (condition: boolean, dayWeek: number) => {
|
23 | if (condition) {
|
24 | selectedDayWeek(dayWeek);
|
25 | return true;
|
26 | }
|
27 |
|
28 | return false;
|
29 | }
|
30 |
|
31 | return (
|
32 | <WrapperTable>
|
33 | <thead>
|
34 | <DaysRow>{ DAYS.map(day => <td key={Math.random()}>{day}</td>) }</DaysRow>
|
35 | </thead>
|
36 | <tbody>
|
37 | { R.range(0, 6).map(() => (
|
38 | <tr key={Math.random()}>
|
39 | { R.range(0, 7).map((e, i) => {
|
40 | if (offset === 0) {
|
41 | if (dayCount >= lastDay.getDate()) {
|
42 | return null;
|
43 | }
|
44 | dayCount++;
|
45 | return (
|
46 | <DaysColumn active={isActive(dayCount === day, i)} key={Math.random()}>
|
47 | <button
|
48 | value={dayCount}
|
49 | type='button'
|
50 | onClick={(e) => onClick(e, i)}
|
51 | >
|
52 | {dayCount}
|
53 | </button>
|
54 | </DaysColumn>
|
55 | )
|
56 | }
|
57 | offset--;
|
58 | return <DaysColumn active={false} key={Math.random()}> </DaysColumn>
|
59 | })}
|
60 | </tr>
|
61 | )) }
|
62 | </tbody>
|
63 | </WrapperTable>
|
64 | );
|
65 | } |
\ | No newline at end of file |