Skip to content

Commit ff9c9d4

Browse files
flamecommitflamecommit
committed
v1.15.0 - rangepicker
1 parent b32e795 commit ff9c9d4

File tree

17 files changed

+406
-42
lines changed

17 files changed

+406
-42
lines changed

‎package/CHANGE.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
## 1.5.0
2+
3+
### What's New?
4+
5+
- add Rangepicker
6+
- change props name - isMultipleCalendar > showsMultipleCalendar, isClearButton > useClearButton
7+
18
## 1.4.0
29

310
### What's New?

‎package/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@shinyongjun/react-datepicker",
3-
"version": "1.4.1",
3+
"version": "1.5.0",
44
"main": "./dist/cjs/index.js",
55
"module": "./dist/esm/index.js",
66
"source": "./src/index.tsx",

‎package/src/assets/ReactDatepicker.css

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,14 +106,31 @@
106106
flex-basis: 100%;
107107
height: 36px;
108108
cursor: pointer;
109+
color: #000;
109110
}
110111
.react-datepicker__neighbor-button {
111-
color: #ccc;
112+
color: #bbb;
112113
}
113114
.react-datepicker__datepicker-button:hover {
114115
background-color: #f7f7f7;
115116
}
116117
.react-datepicker__datepicker-button[data-active='true'] {
117-
background-color: #333;
118+
background-color: #999;
118119
color: #fff;
119120
}
121+
.react-datepicker__datepicker-button[data-hover-active='true'] {
122+
background-color: #eee;
123+
}
124+
.react-datepicker__datepicker-button[data-range-active='true'] {
125+
background-color: #eee;
126+
}
127+
.react-datepicker__datepicker-button[data-start-active='true'] {
128+
background-color: #999;
129+
color: #fff;
130+
border-radius: 6px 0 0 6px;
131+
}
132+
.react-datepicker__datepicker-button[data-end-active='true'] {
133+
background-color: #999;
134+
color: #fff;
135+
border-radius: 0 6px 6px 0;
136+
}

‎package/src/components/Controller.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ interface IProps {
1818
setViewType: (value: TViewType) => void;
1919
viewDate: string;
2020
labelFormat: string;
21-
isMultipleCalendar: boolean;
21+
showsMultipleCalendar: boolean;
2222
setViewDateByType: (
2323
value: string | number,
2424
type: 'year' | 'month' | 'date'
@@ -30,7 +30,7 @@ function Controller({
3030
viewType,
3131
labelFormat,
3232
setViewType,
33-
isMultipleCalendar,
33+
showsMultipleCalendar,
3434
setViewDateByType,
3535
}: IProps) {
3636
const setMonthLabel = (date: string, addMonth = 0) => {
@@ -133,7 +133,7 @@ function Controller({
133133
>
134134
{setLabel(viewDate, viewType)}
135135
</button>
136-
{isMultipleCalendar && viewType === 'month' && (
136+
{showsMultipleCalendar && viewType === 'month' && (
137137
<button
138138
type="button"
139139
className={`${NAME_SPACE}__label`}

‎package/src/components/Datepicker.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,28 @@ import * as React from 'react';
55
import { useState, useMemo, useRef, useEffect } from 'react';
66
import { formatDate } from '../utils/datetime';
77
import { setMonthPage } from '../utils/page';
8-
import ViewCentury from './view/Century';
98
import { NAME_SPACE } from '../constants/core';
10-
import ViewDecade from './view/Decade';
11-
import ViewYear from './view/Year';
12-
import ViewMonth from './view/Month';
9+
import DatepickerMonth from './datepicker/Month';
10+
import DatepickerYear from './datepicker/Year';
11+
import DatepickerDecade from './datepicker/Decade';
12+
import DatepickerCentury from './datepicker/Century';
1313
import useOutsideClick from '../hooks/useOutsideClick';
1414
import ControllerContainer from './controller/Container';
1515
import InputDate from './input/Date';
1616

1717
interface IProps {
1818
initValue?: Date | null;
19-
isClearButton?: boolean;
20-
isMultipleCalendar?: boolean;
19+
useClearButton?: boolean;
20+
showsMultipleCalendar?: boolean;
2121
valueFormat?: string;
2222
labelFormat?: string;
2323
onChange?: (activeDate: Date | null) => void;
2424
}
2525

2626
function Datepicker({
2727
initValue = null,
28-
isClearButton = false,
29-
isMultipleCalendar = false,
28+
useClearButton = false,
29+
showsMultipleCalendar = false,
3030
valueFormat = 'YYYY-MM-DD',
3131
labelFormat = 'YYYY / MM',
3232
onChange,
@@ -65,29 +65,29 @@ function Datepicker({
6565
setValue={setValue}
6666
valueFormat={valueFormat}
6767
setIsVisible={setIsVisible}
68-
isClearButton={isClearButton}
68+
useClearButton={useClearButton}
6969
/>
7070
{isVisible && (
7171
<div className={`${NAME_SPACE}__datepicker-container`} ref={container}>
7272
<ControllerContainer
7373
viewDate={viewDate}
7474
viewType={viewType}
7575
labelFormat={labelFormat}
76-
isMultipleCalendar={isMultipleCalendar}
76+
showsMultipleCalendar={showsMultipleCalendar}
7777
setViewType={setViewType}
7878
setViewDate={setViewDate}
7979
/>
8080
<div className={`${NAME_SPACE}__datepicker`}>
8181
{viewType === 'month' && (
8282
<>
83-
<ViewMonth
83+
<DatepickerMonth
8484
value={value}
8585
valueFormat={valueFormat}
8686
monthPage={monthPage}
8787
setValue={setValue}
8888
/>
89-
{isMultipleCalendar && (
90-
<ViewMonth
89+
{showsMultipleCalendar && (
90+
<DatepickerMonth
9191
value={value}
9292
valueFormat={valueFormat}
9393
monthPage={monthPage + 1}
@@ -97,23 +97,23 @@ function Datepicker({
9797
</>
9898
)}
9999
{viewType === 'year' && (
100-
<ViewYear
100+
<DatepickerYear
101101
value={value}
102102
viewDate={viewDate}
103103
setViewDate={setViewDate}
104104
setViewType={setViewType}
105105
/>
106106
)}
107107
{viewType === 'decade' && (
108-
<ViewDecade
108+
<DatepickerDecade
109109
value={value}
110110
viewDate={viewDate}
111111
setViewDate={setViewDate}
112112
setViewType={setViewType}
113113
/>
114114
)}
115115
{viewType === 'century' && (
116-
<ViewCentury
116+
<DatepickerCentury
117117
value={value}
118118
viewDate={viewDate}
119119
setViewDate={setViewDate}

‎package/src/components/Rangepicker.tsx

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
'use client';
2+
3+
import '../../assets/ReactDatepicker.css';
4+
import * as React from 'react';
5+
import { useState, useMemo, useRef, useEffect } from 'react';
6+
import { formatDate } from '../utils/datetime';
7+
import { setMonthPage } from '../utils/page';
8+
import { NAME_SPACE } from '../constants/core';
9+
import RangepickerMonth from './rangepicker/Month';
10+
import DatepickerYear from './datepicker/Year';
11+
import DatepickerDecade from './datepicker/Decade';
12+
import DatepickerCentury from './datepicker/Century';
13+
import useOutsideClick from '../hooks/useOutsideClick';
14+
import ControllerContainer from './controller/Container';
15+
import InputRange from './input/Range';
16+
17+
interface IProps {
18+
// initValue?: Date | null;
19+
useClearButton?: boolean;
20+
showsMultipleCalendar?: boolean;
21+
valueFormat?: string;
22+
labelFormat?: string;
23+
onChange?: (activeDate: Date | null) => void;
24+
}
25+
26+
function Rangepicker({
27+
// initValue = null,
28+
useClearButton = false,
29+
showsMultipleCalendar = false,
30+
valueFormat = 'YYYY-MM-DD',
31+
labelFormat = 'YYYY / MM',
32+
onChange,
33+
}: IProps) {
34+
// 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
35+
const NEW_DATE = new Date();
36+
const [startValue, setStartValue] = useState<Date | null>(null);
37+
const [endValue, setEndValue] = useState<Date | null>(null);
38+
const [hoverValue, setHoverValue] = useState<Date | null>(null);
39+
const [viewDate, setViewDate] = useState<string>(
40+
formatDate(startValue || NEW_DATE, 'YYYY-MM-DD')
41+
);
42+
const [viewType, setViewType] = useState<
43+
'century' | 'decade' | 'year' | 'month'
44+
>('month');
45+
const [isVisible, setIsVisible] = useState<boolean>(false);
46+
47+
const monthPage = useMemo(() => setMonthPage(viewDate), [viewDate]);
48+
const container = useRef(null);
49+
50+
useOutsideClick(container, () => {
51+
setIsVisible(false);
52+
});
53+
54+
useEffect(() => {
55+
if (endValue !== null) {
56+
// setIsVisible(false);
57+
setViewDate(formatDate(startValue || NEW_DATE, 'YYYY-MM-DD'));
58+
}
59+
// eslint-disable-next-line react-hooks/exhaustive-deps
60+
}, [endValue, onChange, setViewDate]);
61+
62+
return (
63+
<div className={`${NAME_SPACE}__wrapper`}>
64+
<InputRange
65+
startValue={startValue}
66+
endValue={endValue}
67+
valueFormat={valueFormat}
68+
useClearButton={useClearButton}
69+
setIsVisible={setIsVisible}
70+
setStartValue={setStartValue}
71+
setEndValue={setEndValue}
72+
/>
73+
{isVisible && (
74+
<div className={`${NAME_SPACE}__datepicker-container`} ref={container}>
75+
<ControllerContainer
76+
viewDate={viewDate}
77+
viewType={viewType}
78+
labelFormat={labelFormat}
79+
showsMultipleCalendar={showsMultipleCalendar}
80+
setViewType={setViewType}
81+
setViewDate={setViewDate}
82+
/>
83+
<div className={`${NAME_SPACE}__datepicker`}>
84+
{viewType === 'month' && (
85+
<>
86+
<RangepickerMonth
87+
startValue={startValue}
88+
endValue={endValue}
89+
hoverValue={hoverValue}
90+
valueFormat={valueFormat}
91+
monthPage={monthPage}
92+
setStartValue={setStartValue}
93+
setEndValue={setEndValue}
94+
setHoverValue={setHoverValue}
95+
/>
96+
{showsMultipleCalendar && (
97+
<RangepickerMonth
98+
startValue={startValue}
99+
endValue={endValue}
100+
hoverValue={hoverValue}
101+
valueFormat={valueFormat}
102+
monthPage={monthPage + 1}
103+
setStartValue={setStartValue}
104+
setEndValue={setEndValue}
105+
setHoverValue={setHoverValue}
106+
/>
107+
)}
108+
</>
109+
)}
110+
{viewType === 'year' && (
111+
<DatepickerYear
112+
value={startValue}
113+
viewDate={viewDate}
114+
setViewDate={setViewDate}
115+
setViewType={setViewType}
116+
/>
117+
)}
118+
{viewType === 'decade' && (
119+
<DatepickerDecade
120+
value={startValue}
121+
viewDate={viewDate}
122+
setViewDate={setViewDate}
123+
setViewType={setViewType}
124+
/>
125+
)}
126+
{viewType === 'century' && (
127+
<DatepickerCentury
128+
value={startValue}
129+
viewDate={viewDate}
130+
setViewDate={setViewDate}
131+
setViewType={setViewType}
132+
/>
133+
)}
134+
</div>
135+
</div>
136+
)}
137+
</div>
138+
);
139+
}
140+
141+
export default Rangepicker;

‎package/src/components/controller/Container.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ interface IProps {
1111
viewDate: string;
1212
viewType: TViewType;
1313
labelFormat: string;
14-
isMultipleCalendar: boolean;
14+
showsMultipleCalendar: boolean;
1515
setViewType: (value: TViewType) => void;
1616
setViewDate: (value: string) => void;
1717
}
@@ -20,7 +20,7 @@ function ControllerContainer({
2020
viewDate,
2121
viewType,
2222
labelFormat,
23-
isMultipleCalendar,
23+
showsMultipleCalendar,
2424
setViewType,
2525
setViewDate,
2626
}: IProps) {
@@ -35,7 +35,7 @@ function ControllerContainer({
3535
<ControllerLabel
3636
viewDate={viewDate}
3737
viewType={viewType}
38-
isMultipleCalendar={isMultipleCalendar}
38+
showsMultipleCalendar={showsMultipleCalendar}
3939
labelFormat={labelFormat}
4040
setViewType={setViewType}
4141
/>

‎package/src/components/controller/Label.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,15 @@ interface IProps {
1717
viewDate: string;
1818
viewType: TViewType;
1919
labelFormat: string;
20-
isMultipleCalendar: boolean;
20+
showsMultipleCalendar: boolean;
2121
setViewType: (value: TViewType) => void;
2222
}
2323

2424
function ControllerLabel({
2525
viewDate,
2626
viewType,
2727
labelFormat,
28-
isMultipleCalendar,
28+
showsMultipleCalendar,
2929
setViewType,
3030
}: IProps) {
3131
const setMonthLabel = (date: string, addMonth = 0) => {
@@ -84,7 +84,7 @@ function ControllerLabel({
8484
>
8585
{setLabel(viewDate, viewType)}
8686
</button>
87-
{isMultipleCalendar && viewType === 'month' && (
87+
{showsMultipleCalendar && viewType === 'month' && (
8888
<button
8989
type="button"
9090
className={`${NAME_SPACE}__label`}

‎package/src/components/view/Century.tsx renamed to ‎package/src/components/datepicker/Century.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,12 @@ interface IProps {
1313
setViewType: (value: 'decade') => void;
1414
}
1515

16-
function ViewCentury({ value, viewDate, setViewDate, setViewType }: IProps) {
16+
function DatepickerCentury({
17+
value,
18+
viewDate,
19+
setViewDate,
20+
setViewType,
21+
}: IProps) {
1722
const centuryPage = useMemo(() => setCenturyPage(viewDate), [viewDate]);
1823
const valueYear = value?.getFullYear();
1924

@@ -49,4 +54,4 @@ function ViewCentury({ value, viewDate, setViewDate, setViewType }: IProps) {
4954
);
5055
}
5156

52-
export default ViewCentury;
57+
export default DatepickerCentury;

0 commit comments

Comments
 (0)