Repository: Hacker0x01/react-datepicker
Pull request #4708 (2024-04-19 19:54:34)

[typescript-migration] input_time.jsx 
---
name: Migrate input_time.jsx
---

## Description
**Linked issue**: https://github.com/Hacker0x01/react-datepicker/issues/4700

**Changes**
`input_time.jsx` was migrated to ts + added JSDocs

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.



Patch:
diff --git a/src/calendar.jsx b/src/calendar.jsx
index dca56b40..b12e2ada 100644
--- a/src/calendar.jsx
+++ b/src/calendar.jsx
@@ -4,7 +4,7 @@ import MonthYearDropdown from "./month_year_dropdown";
 import Month from "./month";
 import Time from "./time";
 import Year from "./year";
-import InputTime from "./inputTime";
+import InputTime from "./input_time";
 import React from "react";
 import PropTypes from "prop-types";
 import { clsx } from "clsx";
diff --git a/src/inputTime.jsx b/src/input_time.tsx
similarity index 51%
rename from src/inputTime.jsx
rename to src/input_time.tsx
index e6e84cd6..dba934a8 100644
--- a/src/inputTime.jsx
+++ b/src/input_time.tsx
@@ -1,16 +1,38 @@
 import React from "react";
-import PropTypes from "prop-types";
 
-export default class inputTime extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func,
-    date: PropTypes.instanceOf(Date),
-    timeString: PropTypes.string,
-    timeInputLabel: PropTypes.string,
-    customTimeInput: PropTypes.element,
-  };
+interface InputTimeProps {
+  onChange?: (date: Date) => void;
+  date?: Date;
+  timeString?: string;
+  timeInputLabel?: string;
+  customTimeInput?: JSX.Element;
+}
 
-  constructor(props) {
+interface InputTimeState {
+  time?: string;
+}
+
+/**
+ * `InputTime` is a React component that manages time input.
+ *
+ * @component
+ * @example
+ * <InputTime timeString="12:00" />
+ *
+ * @param props - The properties that define the `InputTime` component.
+ * @param props.onChange - Function that is called when the date changes.
+ * @param props.date - The initial date value.
+ * @param props.timeString - The initial time string value.
+ * @param props.timeInputLabel - The label for the time input.
+ * @param props.customTimeInput - An optional custom time input element.
+ *
+ * @returns The `InputTime` component.
+ */
+export default class InputTime extends React.Component<
+  InputTimeProps,
+  InputTimeState
+> {
+  constructor(props: InputTimeProps) {
     super(props);
 
     this.state = {
@@ -18,7 +40,10 @@ export default class inputTime extends React.Component {
     };
   }
 
-  static getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(
+    props: InputTimeProps,
+    state: InputTimeState
+  ) {
     if (props.timeString !== state.time) {
       return {
         time: props.timeString,
@@ -29,17 +54,20 @@ export default class inputTime extends React.Component {
     return null;
   }
 
-  onTimeChange = (time) => {
+  onTimeChange = (time: InputTimeState["time"]) => {
     this.setState({ time });
 
     const { date: propDate } = this.props;
-    const isPropDateValid = propDate instanceof Date && !isNaN(propDate);
+    const isPropDateValid = propDate instanceof Date && !isNaN(+propDate);
     const date = isPropDateValid ? propDate : new Date();
 
-    date.setHours(time.split(":")[0]);
-    date.setMinutes(time.split(":")[1]);
+    if (time?.includes(":")) {
+      const [hours, minutes] = time.split(":") as [string, string];
+      date.setHours(Number(hours));
+      date.setMinutes(Number(minutes));
+    }
 
-    this.props.onChange(date);
+    this.props.onChange?.(date);
   };
 
   renderTimeInput = () => {


Test patch:
diff --git a/test/time_input_test.test.js b/test/time_input_test.test.js
index c74116d5..0703d939 100644
--- a/test/time_input_test.test.js
+++ b/test/time_input_test.test.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 import DatePicker from "../src/index.jsx";
-import InputTimeComponent from "../src/inputTime.jsx";
+import InputTimeComponent from "../src/input_time.tsx";
 import CustomTimeInput from "./helper_components/custom_time_input.jsx";
 
 describe("timeInput", () => {