Merge pull request #6040 from qburst/enhancement/docs-site/tsx-examples

Enhance the readability of doc-sites examples

Author: martijnrusschen

docs-site/src/examples/ts/calendarContainer.tsx

@@ -23,7 +23,7 @@ const CustomCalendarContainer = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       calendarContainer={MyContainer}
     />
   );

docs-site/src/examples/ts/calendarIcon.tsx

@@ -2,11 +2,7 @@ const CalendarIcon = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
-    <DatePicker
-      showIcon
-      selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
-    />
+    <DatePicker showIcon selected={selectedDate} onChange={setSelectedDate} />
   );
 };
 

docs-site/src/examples/ts/calendarIconExternal.tsx

@@ -5,7 +5,7 @@ const CalendarIconExternal = () => {
     <DatePicker
       showIcon
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       icon="fa fa-calendar"
     />
   );

docs-site/src/examples/ts/calendarIconSvgIcon.tsx

@@ -5,7 +5,7 @@ const CalendarIconSvgIcon = () => {
     <DatePicker
       showIcon
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       icon={
         <svg
           xmlns="http://www.w3.org/2000/svg"

docs-site/src/examples/ts/calendarStartDay.tsx

@@ -4,7 +4,7 @@ const CalendarStartDay = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       calendarStartDay={3}
     />
   );

docs-site/src/examples/ts/children.tsx

@@ -2,10 +2,7 @@ const Children = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
-    <DatePicker
-      selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
-    >
+    <DatePicker selected={selectedDate} onChange={setSelectedDate}>
       <div style={{ color: "red" }}>Don't forget to check the weather!</div>
     </DatePicker>
   );

docs-site/src/examples/ts/clearInput.tsx

@@ -4,7 +4,7 @@ const ClearInput = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       isClearable
       placeholderText="I have been cleared!"
     />

docs-site/src/examples/ts/closeOnScroll.tsx

@@ -5,7 +5,7 @@ const CloseOnScroll = () => {
     <DatePicker
       closeOnScroll
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
     />
   );
 };

docs-site/src/examples/ts/closeOnScrollCallback.tsx

@@ -5,7 +5,7 @@ const CloseOnScrollCallback = () => {
     <DatePicker
       closeOnScroll={(e: Event): boolean => e.target === document}
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
     />
   );
 };

docs-site/src/examples/ts/configureFloatingUI.tsx

@@ -4,7 +4,7 @@ const ConfigureFloatingUI = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       popperClassName="some-custom-class"
       popperPlacement="top-end"
       popperModifiers={[