Skip to content

Commit 9ba7e15

Browse files
author
신용준
committed
v1.2.0
1 parent a41ccfa commit 9ba7e15

File tree

15 files changed

+83
-27
lines changed

15 files changed

+83
-27
lines changed

‎package/CHANGE.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## 1.2.0
2+
3+
### What's New?
4+
5+
- New Props - isClearButton
6+
17
## 1.1.2
28

39
### Fix

‎package/README.md‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
# React Datepicker
22

3-
This is a Datepicker library that operates in React.
3+
![Datepicker](https://github.com/shinyj1991/react-datepicker/raw/main/package/public/readme-1.png)
44

5-
[Demo](https://shinyongjun.com/react-datepicker/example)
5+
Example - [Here](https://shinyongjun.com/react-datepicker/example)
66

7-
[Document](https://shinyongjun.com/react-datepicker/document)
7+
Document - [Document](https://shinyongjun.com/react-datepicker/document)
88

9-
[Issues](https://github.com/shinyj1991/react-datepicker/issues)
10-
11-
[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fshinyj1991%2Freact-datepicker&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com)
9+
Issues - [Issues](https://github.com/shinyj1991/react-datepicker/issues)

‎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.1.2",
3+
"version": "1.2.0",
44
"main": "./dist/cjs/index.js",
55
"module": "./dist/esm/index.js",
66
"source": "./src/index.tsx",

‎package/public/readme-1.png‎

5.35 KB
Loading

‎package/src/assets/ReactDatepicker.css‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,38 @@
11
.react-datepicker__wrapper {
22
position: relative;
33
background: #fff;
4+
font-size: 14px;
5+
}
6+
.react-datepicker__input-container {
7+
position: relative;
8+
display: inline-flex;
9+
width: 200px;
10+
}
11+
.react-datepicker__input {
12+
box-sizing: border-box;
13+
display: block;
14+
width: 100%;
15+
height: 36px;
16+
padding: 0 10px;
17+
border: 1px solid #ccc;
18+
}
19+
.react-datepicker__clear {
20+
position: absolute;
21+
top: 1px;
22+
right: 1px;
23+
width: 34px;
24+
height: 34px;
25+
background-image: url(./clear.svg);
26+
background-repeat: no-repeat;
27+
background-position: center;
28+
border: none;
29+
background-color: transparent;
30+
font-size: 0;
31+
cursor: pointer;
32+
}
33+
.react-datepicker__clear:hover {
34+
background-color: #f7f7f7;
435
}
5-
636
.react-datepicker__datepicker-container {
737
position: absolute;
838
width: 252px;

‎package/src/assets/clear.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎package/src/components/Container.tsx‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,21 @@ import { addLeadingZero } from '../utils/string';
2020
import useOutsideClick from '../hooks/useOutsideClick';
2121

2222
interface Iprops {
23-
initValue?: Date;
24-
onChange?: (activeDate: Date) => void;
23+
initValue?: Date | null;
24+
isClearButton?: boolean;
25+
onChange?: (activeDate: Date | null) => void;
2526
}
2627

27-
function Container({ initValue = new Date(), onChange }: Iprops) {
28+
function Container({
29+
initValue = null,
30+
isClearButton = false,
31+
onChange,
32+
}: Iprops) {
2833
// 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
29-
const [value, setValue] = useState<Date>(initValue);
34+
const NEW_DATE = new Date();
35+
const [value, setValue] = useState<Date | null>(initValue);
3036
const [viewDate, setViewDate] = useState<string>(
31-
getFormatDatetime(initValue, 'YYYY-MM-DD')
37+
getFormatDatetime(value || NEW_DATE, 'YYYY-MM-DD')
3238
);
3339
const [viewType, setViewType] = useState<
3440
'century' | 'decade' | 'year' | 'month'
@@ -85,21 +91,31 @@ function Container({ initValue = new Date(), onChange }: Iprops) {
8591

8692
useEffect(() => {
8793
setIsVisible(false);
88-
setViewDate(getFormatDatetime(value, 'YYYY-MM-DD'));
94+
setViewDate(getFormatDatetime(value || NEW_DATE, 'YYYY-MM-DD'));
8995
if (onChange) {
9096
onChange(value);
9197
}
98+
// eslint-disable-next-line react-hooks/exhaustive-deps
9299
}, [value, onChange, setViewDate]);
93100

94101
return (
95102
<div className={`${NAME_SPACE}__wrapper`}>
96103
<div className={`${NAME_SPACE}__input-container`}>
97104
<input
105+
className={`${NAME_SPACE}__input`}
98106
type="text"
99107
value={getFormatDatetime(value, 'YYYY-MM-DD')}
100108
readOnly
101109
onFocus={handleFocus}
102110
/>
111+
{isClearButton && value && (
112+
<button
113+
className={`${NAME_SPACE}__clear`}
114+
onClick={() => setValue(null)}
115+
>
116+
Clear
117+
</button>
118+
)}
103119
</div>
104120
{isVisible && (
105121
<div className={`${NAME_SPACE}__datepicker-container`} ref={container}>

‎package/src/components/Controller.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,14 +134,14 @@ function Controller({
134134
className={`${NAME_SPACE}__controller-arrow ${NAME_SPACE}__controller-next`}
135135
onClick={() => handleControl('next')}
136136
>
137-
Extra Next
137+
Next
138138
</button>
139139
{viewType !== 'century' && (
140140
<button
141141
className={`${NAME_SPACE}__controller-arrow ${NAME_SPACE}__controller-extra-next`}
142142
onClick={() => handleControl('extraNext')}
143143
>
144-
Next
144+
Extra Next
145145
</button>
146146
)}
147147
</div>

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as React from 'react';
44
import { NAME_SPACE } from '../constants/core';
55

66
interface IProps {
7-
value: Date;
7+
value: Date | null;
88
centuryPage: number;
99
setViewDateByType: (value: string, type: 'year') => void;
1010
setViewType: (value: 'decade') => void;
@@ -20,7 +20,7 @@ function ViewCentury({
2020
setViewDateByType(year, 'year');
2121
setViewType('decade');
2222
};
23-
const valueYear = value.getFullYear();
23+
const valueYear = value?.getFullYear();
2424

2525
return (
2626
<div className={`${NAME_SPACE}__century-view`}>
@@ -36,7 +36,9 @@ function ViewCentury({
3636
key={i}
3737
onClick={() => handleViewDateType(startYear)}
3838
data-active={
39-
valueYear >= Number(startYear) && valueYear <= Number(endYear)
39+
valueYear &&
40+
valueYear >= Number(startYear) &&
41+
valueYear <= Number(endYear)
4042
}
4143
>
4244
{startYear} - {endYear}

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

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

66
interface IProps {
7-
value: Date;
7+
value: Date | null;
88
decadePage: number;
99
setViewDateByType: (value: string, type: 'year') => void;
1010
setViewType: (value: 'year') => void;
@@ -20,7 +20,7 @@ function ViewDecade({
2020
setViewDateByType(year, 'year');
2121
setViewType('year');
2222
};
23-
const valueYear = value.getFullYear();
23+
const valueYear = value?.getFullYear();
2424

2525
return (
2626
<div className={`${NAME_SPACE}__decade-view`}>

0 commit comments

Comments
 (0)