Skip to content

Commit a0a0e12

Browse files
yuki0410-devyuki0410-dev
committed
Fix #5284: replace JSX.Element to React.ReactElement
1 parent 407051c commit a0a0e12

15 files changed

+90
-79
lines changed

‎src/calendar.tsx‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ type CalendarProps = React.PropsWithChildren<
182182
) => void;
183183
renderCustomHeader?: (
184184
props: ReactDatePickerCustomHeaderProps,
185-
) => JSX.Element;
185+
) => React.ReactElement;
186186
onYearMouseEnter?: YearProps["onYearMouseEnter"];
187187
onYearMouseLeave?: YearProps["onYearMouseLeave"];
188188
monthAriaLabelPrefix?: MonthProps["ariaLabelPrefix"];
@@ -459,14 +459,14 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
459459
);
460460
};
461461

462-
header = (date: Date = this.state.date): JSX.Element[] => {
462+
header = (date: Date = this.state.date): React.ReactElement[] => {
463463
const startOfWeek = getStartOfWeek(
464464
date,
465465
this.props.locale,
466466
this.props.calendarStartDay,
467467
);
468468

469-
const dayNames: JSX.Element[] = [];
469+
const dayNames: React.ReactElement[] = [];
470470
if (this.props.showWeekNumbers) {
471471
dayNames.push(
472472
<div key="W" className="react-datepicker__day-name">
@@ -524,7 +524,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
524524
this.setState({ selectingDate: undefined });
525525
};
526526

527-
renderPreviousButton = (): JSX.Element | void => {
527+
renderPreviousButton = (): React.ReactElement | void => {
528528
if (this.props.renderCustomHeader) {
529529
return;
530530
}
@@ -643,7 +643,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
643643
);
644644
};
645645

646-
renderNextButton = (): JSX.Element | void => {
646+
renderNextButton = (): React.ReactElement | void => {
647647
if (this.props.renderCustomHeader) {
648648
return;
649649
}
@@ -740,7 +740,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
740740
);
741741
};
742742

743-
renderCurrentMonth = (date: Date = this.state.date): JSX.Element => {
743+
renderCurrentMonth = (date: Date = this.state.date): React.ReactElement => {
744744
const classes = ["react-datepicker__current-month"];
745745

746746
if (this.props.showYearDropdown) {
@@ -761,7 +761,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
761761

762762
renderYearDropdown = (
763763
overrideHide: boolean = false,
764-
): JSX.Element | undefined => {
764+
): React.ReactElement | undefined => {
765765
if (!this.props.showYearDropdown || overrideHide) {
766766
return;
767767
}
@@ -778,7 +778,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
778778

779779
renderMonthDropdown = (
780780
overrideHide: boolean = false,
781-
): JSX.Element | undefined => {
781+
): React.ReactElement | undefined => {
782782
if (!this.props.showMonthDropdown || overrideHide) {
783783
return;
784784
}
@@ -794,7 +794,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
794794

795795
renderMonthYearDropdown = (
796796
overrideHide: boolean = false,
797-
): JSX.Element | undefined => {
797+
): React.ReactElement | undefined => {
798798
if (!this.props.showMonthYearDropdown || overrideHide) {
799799
return;
800800
}
@@ -813,7 +813,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
813813
this.props.setPreSelection && this.props.setPreSelection(getStartOfToday());
814814
};
815815

816-
renderTodayButton = (): JSX.Element | undefined => {
816+
renderTodayButton = (): React.ReactElement | undefined => {
817817
if (!this.props.todayButton || this.props.showTimeSelectOnly) {
818818
return;
819819
}
@@ -914,7 +914,11 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
914914
);
915915
};
916916

917-
renderYearHeader = ({ monthDate }: { monthDate: Date }): JSX.Element => {
917+
renderYearHeader = ({
918+
monthDate,
919+
}: {
920+
monthDate: Date;
921+
}): React.ReactElement => {
918922
const {
919923
showYearPicker,
920924
yearItemNumber = Calendar.defaultProps.yearItemNumber,
@@ -936,7 +940,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
936940
}: {
937941
monthDate: Date;
938942
i?: number;
939-
}): JSX.Element | null => {
943+
}): React.ReactElement | null => {
940944
const headerArgs = { monthDate, i };
941945
switch (true) {
942946
case this.props.renderCustomHeader !== undefined:
@@ -950,12 +954,12 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
950954
}
951955
};
952956

953-
renderMonths = (): JSX.Element[] | undefined => {
957+
renderMonths = (): React.ReactElement[] | undefined => {
954958
if (this.props.showTimeSelectOnly || this.props.showYearPicker) {
955959
return;
956960
}
957961

958-
const monthList: JSX.Element[] = [];
962+
const monthList: React.ReactElement[] = [];
959963
const monthsShown =
960964
this.props.monthsShown ?? Calendar.defaultProps.monthsShown;
961965
const monthsToSubtract = this.props.showPreviousMonths
@@ -1005,7 +1009,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
10051009
return monthList;
10061010
};
10071011

1008-
renderYears = (): JSX.Element | undefined => {
1012+
renderYears = (): React.ReactElement | undefined => {
10091013
if (this.props.showTimeSelectOnly) {
10101014
return;
10111015
}
@@ -1029,7 +1033,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
10291033
return;
10301034
};
10311035

1032-
renderTimeSection = (): JSX.Element | undefined => {
1036+
renderTimeSection = (): React.ReactElement | undefined => {
10331037
if (
10341038
this.props.showTimeSelect &&
10351039
(this.state.monthContainer || this.props.showTimeSelectOnly)
@@ -1048,7 +1052,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
10481052
return;
10491053
};
10501054

1051-
renderInputTimeSection = (): JSX.Element | undefined => {
1055+
renderInputTimeSection = (): React.ReactElement | undefined => {
10521056
const time = this.props.selected
10531057
? new Date(this.props.selected)
10541058
: undefined;
@@ -1070,7 +1074,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
10701074
return;
10711075
};
10721076

1073-
renderAriaLiveRegion = (): JSX.Element => {
1077+
renderAriaLiveRegion = (): React.ReactElement => {
10741078
const { startPeriod, endPeriod } = getYearsPeriod(
10751079
this.state.date,
10761080
this.props.yearItemNumber ?? Calendar.defaultProps.yearItemNumber,
@@ -1102,7 +1106,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
11021106
);
11031107
};
11041108

1105-
renderChildren = (): JSX.Element | undefined => {
1109+
renderChildren = (): React.ReactElement | undefined => {
11061110
if (this.props.children) {
11071111
return (
11081112
<div className="react-datepicker__children-container">
@@ -1113,7 +1117,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
11131117
return;
11141118
};
11151119

1116-
render(): JSX.Element {
1120+
render(): React.ReactElement {
11171121
const Container = this.props.container || CalendarContainer;
11181122
return (
11191123
<ClickOutsideWrapper

‎src/calendar_icon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const CalendarIcon: React.FC<CalendarIconProps> = ({
2929
icon,
3030
className = "",
3131
onClick,
32-
}: CalendarIconProps): JSX.Element => {
32+
}: CalendarIconProps): React.ReactElement => {
3333
const defaultClass = "react-datepicker__calendar-icon";
3434

3535
if (typeof icon === "string") {

‎src/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1389,7 +1389,7 @@ export default class DatePicker extends Component<
13891389
});
13901390
};
13911391

1392-
renderClearButton = (): JSX.Element | null => {
1392+
renderClearButton = (): React.ReactElement | null => {
13931393
const {
13941394
isClearable,
13951395
disabled,
@@ -1428,7 +1428,7 @@ export default class DatePicker extends Component<
14281428
}
14291429
};
14301430

1431-
renderInputContainer(): JSX.Element {
1431+
renderInputContainer(): React.ReactElement {
14321432
const {
14331433
showIcon,
14341434
icon,
@@ -1472,7 +1472,7 @@ export default class DatePicker extends Component<
14721472
);
14731473
}
14741474

1475-
render(): JSX.Element | null {
1475+
render(): React.ReactElement | null {
14761476
const calendar = this.renderCalendar();
14771477

14781478
if (this.props.inline) return calendar;

‎src/input_time.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ interface InputTimeProps {
55
date?: Date;
66
timeString?: string;
77
timeInputLabel?: string;
8-
customTimeInput?: JSX.Element;
8+
customTimeInput?: React.ReactElement;
99
}
1010

1111
interface InputTimeState {

‎src/month_dropdown.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,16 @@ export default class MonthDropdown extends Component<
3333
dropdownVisible: false,
3434
};
3535

36-
renderSelectOptions = (monthNames: string[]): JSX.Element[] =>
37-
monthNames.map<JSX.Element>(
38-
(m: string, i: number): JSX.Element => (
36+
renderSelectOptions = (monthNames: string[]): React.ReactElement[] =>
37+
monthNames.map<React.ReactElement>(
38+
(m: string, i: number): React.ReactElement => (
3939
<option key={m} value={i}>
4040
{m}
4141
</option>
4242
),
4343
);
4444

45-
renderSelectMode = (monthNames: string[]): JSX.Element => (
45+
renderSelectMode = (monthNames: string[]): React.ReactElement => (
4646
<select
4747
value={this.props.month}
4848
className="react-datepicker__month-select"
@@ -52,7 +52,10 @@ export default class MonthDropdown extends Component<
5252
</select>
5353
);
5454

55-
renderReadView = (visible: boolean, monthNames: string[]): JSX.Element => (
55+
renderReadView = (
56+
visible: boolean,
57+
monthNames: string[],
58+
): React.ReactElement => (
5659
<div
5760
key="read"
5861
style={{ visibility: visible ? "visible" : "hidden" }}
@@ -66,7 +69,7 @@ export default class MonthDropdown extends Component<
6669
</div>
6770
);
6871

69-
renderDropdown = (monthNames: string[]): JSX.Element => (
72+
renderDropdown = (monthNames: string[]): React.ReactElement => (
7073
<MonthDropdownOptions
7174
key="dropdown"
7275
{...this.props}
@@ -76,7 +79,7 @@ export default class MonthDropdown extends Component<
7679
/>
7780
);
7881

79-
renderScrollMode = (monthNames: string[]): JSX.Element[] => {
82+
renderScrollMode = (monthNames: string[]): React.ReactElement[] => {
8083
const { dropdownVisible } = this.state;
8184
const result = [this.renderReadView(!dropdownVisible, monthNames)];
8285
if (dropdownVisible) {
@@ -97,14 +100,14 @@ export default class MonthDropdown extends Component<
97100
dropdownVisible: !this.state.dropdownVisible,
98101
});
99102

100-
render(): JSX.Element {
103+
render(): React.ReactElement {
101104
const monthNames: string[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
102105
this.props.useShortMonthInDropdown
103106
? (m: number): string => getMonthShortInLocale(m, this.props.locale)
104107
: (m: number): string => getMonthInLocale(m, this.props.locale),
105108
);
106109

107-
let renderedDropdown: JSX.Element | JSX.Element[];
110+
let renderedDropdown: React.ReactElement | React.ReactElement[];
108111
switch (this.props.dropdownMode) {
109112
case "scroll":
110113
renderedDropdown = this.renderScrollMode(monthNames);

‎src/month_dropdown_options.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ interface MonthDropdownOptionsProps {
1212
export default class MonthDropdownOptions extends Component<MonthDropdownOptionsProps> {
1313
isSelectedMonth = (i: number): boolean => this.props.month === i;
1414

15-
renderOptions = (): JSX.Element[] => {
16-
return this.props.monthNames.map<JSX.Element>(
17-
(month: string, i: number): JSX.Element => (
15+
renderOptions = (): React.ReactElement[] => {
16+
return this.props.monthNames.map<React.ReactElement>(
17+
(month: string, i: number): React.ReactElement => (
1818
<div
1919
className={
2020
this.isSelectedMonth(i)
@@ -40,7 +40,7 @@ export default class MonthDropdownOptions extends Component<MonthDropdownOptions
4040

4141
handleClickOutside = (): void => this.props.onCancel();
4242

43-
render(): JSX.Element {
43+
render(): React.ReactElement {
4444
return (
4545
<ClickOutsideWrapper
4646
className="react-datepicker__month-dropdown"

‎src/month_year_dropdown.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default class MonthYearDropdown extends Component<
3535
dropdownVisible: false,
3636
};
3737

38-
renderSelectOptions = (): JSX.Element[] => {
38+
renderSelectOptions = (): React.ReactElement[] => {
3939
let currDate = getStartOfMonth(this.props.minDate);
4040
const lastDate = getStartOfMonth(this.props.maxDate);
4141
const options = [];
@@ -58,7 +58,7 @@ export default class MonthYearDropdown extends Component<
5858
this.onChange(parseInt(event.target.value));
5959
};
6060

61-
renderSelectMode = (): JSX.Element => (
61+
renderSelectMode = (): React.ReactElement => (
6262
<select
6363
value={getTime(getStartOfMonth(this.props.date))}
6464
className="react-datepicker__month-year-select"
@@ -68,7 +68,7 @@ export default class MonthYearDropdown extends Component<
6868
</select>
6969
);
7070

71-
renderReadView = (visible: boolean): JSX.Element => {
71+
renderReadView = (visible: boolean): React.ReactElement => {
7272
const yearMonth = formatDate(
7373
this.props.date,
7474
this.props.dateFormat,
@@ -90,7 +90,7 @@ export default class MonthYearDropdown extends Component<
9090
);
9191
};
9292

93-
renderDropdown = (): JSX.Element => (
93+
renderDropdown = (): React.ReactElement => (
9494
<MonthYearDropdownOptions
9595
key="dropdown"
9696
{...this.props}
@@ -99,7 +99,7 @@ export default class MonthYearDropdown extends Component<
9999
/>
100100
);
101101

102-
renderScrollMode = (): JSX.Element[] => {
102+
renderScrollMode = (): React.ReactElement[] => {
103103
const { dropdownVisible } = this.state;
104104
const result = [this.renderReadView(!dropdownVisible)];
105105
if (dropdownVisible) {
@@ -128,7 +128,7 @@ export default class MonthYearDropdown extends Component<
128128
dropdownVisible: !this.state.dropdownVisible,
129129
});
130130

131-
render(): JSX.Element {
131+
render(): React.ReactElement {
132132
let renderedDropdown;
133133
switch (this.props.dropdownMode) {
134134
case "scroll":

‎src/month_year_dropdown_options.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,9 @@ export default class MonthYearDropdownOptions extends Component<
5858
};
5959
}
6060

61-
renderOptions = (): JSX.Element[] => {
62-
return this.state.monthYearsList.map<JSX.Element>(
63-
(monthYear: Date): JSX.Element => {
61+
renderOptions = (): React.ReactElement[] => {
62+
return this.state.monthYearsList.map<React.ReactElement>(
63+
(monthYear: Date): React.ReactElement => {
6464
const monthYearPoint = getTime(monthYear);
6565
const isSameMonthYear =
6666
isSameYear(this.props.date, monthYear) &&
@@ -97,7 +97,7 @@ export default class MonthYearDropdownOptions extends Component<
9797
this.props.onCancel();
9898
};
9999

100-
render(): JSX.Element {
100+
render(): React.ReactElement {
101101
const dropdownClass = clsx({
102102
"react-datepicker__month-year-dropdown": true,
103103
"react-datepicker__month-year-dropdown--scrollable":

0 commit comments

Comments
 (0)