Skip to content

Commit 36311de

Browse files
flamecommitflamecommit
committed
feat : active style in calendar
1 parent 212d5a8 commit 36311de

File tree

8 files changed

+48
-16
lines changed

8 files changed

+48
-16
lines changed

‎package/src/assets/ReactDatepicker.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,13 +70,13 @@
7070
height: 36px;
7171
cursor: pointer;
7272
}
73-
.react-datepicker__datepicker-button[data-active='true'] {
74-
background-color: #333;
75-
color: #fff;
73+
.react-datepicker__neighbor-button {
74+
color: #ccc;
7675
}
7776
.react-datepicker__datepicker-button:hover {
7877
background-color: #f7f7f7;
7978
}
80-
.react-datepicker__neighbor-button {
81-
color: #ccc;
79+
.react-datepicker__datepicker-button[data-active='true'] {
80+
background-color: #333;
81+
color: #fff;
8282
}

‎package/src/components/Container.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@ import '../../assets/ReactDatepicker.css';
44
import * as React from 'react';
55
import { useState, useMemo, useRef, useEffect } from 'react';
66
import { getFormatDatetime } from '../utils/datetime';
7-
import { setCenturyPage, setDecadePage, setMonthPage } from '../utils/page';
7+
import {
8+
setCenturyPage,
9+
setDecadePage,
10+
setYearPage,
11+
setMonthPage,
12+
} from '../utils/page';
813
import ViewCentury from './view/Century';
914
import { NAME_SPACE } from './constants/core';
1015
import Controller from './Controller';
@@ -32,7 +37,7 @@ function Container({ initValue = new Date(), onChange }: Iprops) {
3237

3338
const centuryPage = useMemo(() => setCenturyPage(viewDate), [viewDate]);
3439
const decadePage = useMemo(() => setDecadePage(viewDate), [viewDate]);
35-
// const yearPage = useMemo(() => setYearPage(viewDate), [viewDate]);
40+
const yearPage = useMemo(() => setYearPage(viewDate), [viewDate]);
3641
const monthPage = useMemo(() => setMonthPage(viewDate), [viewDate]);
3742
const container = useRef(null);
3843

@@ -80,10 +85,11 @@ function Container({ initValue = new Date(), onChange }: Iprops) {
8085

8186
useEffect(() => {
8287
setIsVisible(false);
88+
setViewDate(getFormatDatetime(value, 'YYYY-MM-DD'));
8389
if (onChange) {
8490
onChange(value);
8591
}
86-
}, [value, onChange]);
92+
}, [value, onChange, setViewDate]);
8793

8894
return (
8995
<div className={`${NAME_SPACE}__wrapper`}>
@@ -106,26 +112,30 @@ function Container({ initValue = new Date(), onChange }: Iprops) {
106112
<div className={`${NAME_SPACE}__datepicker`}>
107113
{viewType === 'month' && (
108114
<ViewMonth
109-
monthPage={monthPage}
110115
value={value}
116+
monthPage={monthPage}
111117
setValue={setValue}
112118
/>
113119
)}
114120
{viewType === 'year' && (
115121
<ViewYear
122+
value={value}
123+
yearPage={yearPage}
116124
setViewDateByType={setViewDateByType}
117125
setViewType={setViewType}
118126
/>
119127
)}
120128
{viewType === 'decade' && (
121129
<ViewDecade
130+
value={value}
122131
decadePage={decadePage}
123132
setViewDateByType={setViewDateByType}
124133
setViewType={setViewType}
125134
/>
126135
)}
127136
{viewType === 'century' && (
128137
<ViewCentury
138+
value={value}
129139
centuryPage={centuryPage}
130140
setViewDateByType={setViewDateByType}
131141
setViewType={setViewType}

‎package/src/components/Controller.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,6 @@ function Controller({
8383
};
8484

8585
const handleControl = (action: string) => {
86-
console.log(viewDate);
87-
8886
const isExtra = action.startsWith('extra');
8987
const unit = viewType === 'month' && !isExtra ? 'month' : 'year';
9088

‎package/src/components/view/Century.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,23 @@ import * as React from 'react';
44
import { NAME_SPACE } from '../constants/core';
55

66
interface IProps {
7+
value: Date;
78
centuryPage: number;
89
setViewDateByType: (value: string, type: 'year') => void;
910
setViewType: (value: 'decade') => void;
1011
}
1112

12-
function ViewCentury({ centuryPage, setViewDateByType, setViewType }: IProps) {
13+
function ViewCentury({
14+
value,
15+
centuryPage,
16+
setViewDateByType,
17+
setViewType,
18+
}: IProps) {
1319
const handleViewDateType = (year: string) => {
1420
setViewDateByType(year, 'year');
1521
setViewType('decade');
1622
};
23+
const valueYear = value.getFullYear();
1724

1825
return (
1926
<div className={`${NAME_SPACE}__century-view`}>
@@ -28,6 +35,9 @@ function ViewCentury({ centuryPage, setViewDateByType, setViewType }: IProps) {
2835
className={`${NAME_SPACE}__datepicker-button`}
2936
key={i}
3037
onClick={() => handleViewDateType(startYear)}
38+
data-active={
39+
valueYear >= Number(startYear) && valueYear <= Number(endYear)
40+
}
3141
>
3242
{startYear} - {endYear}
3343
</button>

‎package/src/components/view/Decade.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,23 @@ import * as React from 'react';
44
import { NAME_SPACE } from '../constants/core';
55

66
interface IProps {
7+
value: Date;
78
decadePage: number;
89
setViewDateByType: (value: string, type: 'year') => void;
910
setViewType: (value: 'year') => void;
1011
}
1112

12-
function ViewDecade({ decadePage, setViewDateByType, setViewType }: IProps) {
13+
function ViewDecade({
14+
value,
15+
decadePage,
16+
setViewDateByType,
17+
setViewType,
18+
}: IProps) {
1319
const handleViewDateType = (year: string) => {
1420
setViewDateByType(year, 'year');
1521
setViewType('year');
1622
};
23+
const valueYear = value.getFullYear();
1724

1825
return (
1926
<div className={`${NAME_SPACE}__decade-view`}>
@@ -26,6 +33,7 @@ function ViewDecade({ decadePage, setViewDateByType, setViewType }: IProps) {
2633
className={`${NAME_SPACE}__datepicker-button`}
2734
key={i}
2835
onClick={() => handleViewDateType(year)}
36+
data-active={valueYear === Number(year)}
2937
>
3038
{year}
3139
</button>

‎package/src/components/view/Month.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { NAME_SPACE } from '../constants/core';
55
import { getFormatDatetime } from '../../utils/datetime';
66

77
interface Iprops {
8-
monthPage: number;
98
value: Date;
9+
monthPage: number;
1010
setValue: (value: Date) => void;
1111
}
1212

‎package/src/components/view/Year.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,21 @@ import { NAME_SPACE } from '../constants/core';
55
import { addLeadingZero } from '../../utils/string';
66

77
interface Iprops {
8+
value: Date;
9+
yearPage: number;
810
setViewDateByType: (value: string, type: 'month') => void;
911
setViewType: (value: 'month') => void;
1012
}
1113

12-
function ViewYear({ setViewDateByType, setViewType }: Iprops) {
14+
function ViewYear({ value, yearPage, setViewDateByType, setViewType }: Iprops) {
1315
const handleViewDateType = (month: string) => {
1416
setViewDateByType(month, 'month');
1517
setViewType('month');
1618
};
1719

20+
const valueYear = value.getFullYear();
21+
const valueMonth = value.getMonth();
22+
1823
return (
1924
<div className={`${NAME_SPACE}__year-view`}>
2025
{Array.apply(0, Array(12)).map((x, i) => {
@@ -25,6 +30,7 @@ function ViewYear({ setViewDateByType, setViewType }: Iprops) {
2530
className={`${NAME_SPACE}__datepicker-button`}
2631
key={i}
2732
onClick={() => handleViewDateType(month)}
33+
data-active={valueYear === yearPage && valueMonth === i}
2834
>
2935
{i + 1}
3036
</button>

‎test/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Datepicker } from '@shinyongjun/react-datepicker';
33
import { useState } from 'react';
44

55
function App() {
6-
const [dateValue, setDateValue] = useState<Date>(new Date('2001-11-11'));
6+
const [dateValue] = useState<Date>(new Date('2001-11-11'));
77

88
return (
99
<div>

0 commit comments

Comments
 (0)