Upgrade react-datepicker to the latest version

simenko · Sep 6, 2021 · 034c595 · 034c595
1 parent 82480de
commit 034c595
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 63 deletions.
diff --git a/docs/components/ComponentsList.tsx b/docs/components/ComponentsList.tsx
@@ -38,7 +38,7 @@ interface MenuItemProps extends ActionLinkProps {
 const NavItems = styled.div``;
 
 const MenuItem = styled(ActionLink)<MenuItemProps>(
-  themed(
+  themed<MenuItemProps>(
     ({ selected, theme }) => `
   position: relative;
   display: block;

diff --git a/docs/components/Layout.tsx b/docs/components/Layout.tsx
@@ -55,14 +55,14 @@ interface ContentColumn {
 }
 
 const ContentColumn = styled('div')<ContentColumn>(
-  themed(
+  themed<ContentColumn>(
     ({ hasSidebar, theme }) => `
     flex: 1;
     padding: ${distance.xxlarge} ${distance.xlarge};
     ${
       hasSidebar
         ? `margin-left: ${tocColumnWidth}px;`
-        : `width: ${theme.breakpoints.large}px; 
+        : `width: ${theme.breakpoints.large}px;
       margin: 0 auto;`
     }
   `,

diff --git a/docs/components/SectionRenderer.tsx b/docs/components/SectionRenderer.tsx
@@ -19,7 +19,7 @@ interface SectionRendererProps {
 }
 
 const SectionRenderer: React.SFC<SectionRendererProps> = props => {
-  const { description, content, sections, components, depth, slug, pagePerSection } = props;
+  const { description, content, sections, components, depth, slug, pagePerSection, name } = props;
 
   return (
     <section>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,10 +43,9 @@
     }
   },
   "dependencies": {
-    "@types/react-datepicker": "^2.8.0",
     "date-fns": "^2.3.0",
     "memoize-one": "^5.1.0",
-    "react-datepicker": "^2.8.0",
+    "react-datepicker": "^4.2.1",
     "react-onclickoutside": "^6.7.1",
     "typescript-plugin-inner-jsx": "^0.1.9"
   },
@@ -66,6 +65,7 @@
     "@types/jest-image-snapshot": "^2.8.0",
     "@types/puppeteer": "^1.12.1",
     "@types/react": "^16.14.14",
+    "@types/react-datepicker": "^4.1.5",
     "@types/react-dom": "^16.9.14",
     "@types/react-onclickoutside": "^6.7.0",
     "@types/react-router": "^4.4.1",

diff --git a/src/components/DateField/CustomReactDatepicker.part.tsx b/src/components/DateField/CustomReactDatepicker.part.tsx
@@ -331,7 +331,7 @@ const getHeaderRender = ({
   months = defaultMonths,
 }: {
   months: CustomReactDatepickerProps['months'];
-}): ReactDatePickerProps['renderCustomHeader'] => ({ date, increaseMonth, decreaseMonth, changeYear }) => {
+}): ReactDatePickerProps<unknown>['renderCustomHeader'] => ({ date, increaseMonth, decreaseMonth, changeYear }) => {
   const monthName = months[date.getMonth()];
   const year = date.getFullYear();
   return (
@@ -352,7 +352,7 @@ const getHeaderRender = ({
   );
 };
 
-export interface CustomReactDatepickerProps extends ReactDatePickerProps {
+export interface CustomReactDatepickerProps extends ReactDatePickerProps<unknown> {
   months?: Array<string>;
   weekDays?: Array<string>;
 }
@@ -364,7 +364,7 @@ export const CustomReactDatepicker: React.FC<CustomReactDatepickerProps> = ({
   ...props
 }) => (
   <ReactDatePickerContainer>
-    <ReactDatePicker
+    <ReactDatePicker<unknown>
       locale={patchLocale(enGB, weekDays, months)}
       renderCustomHeader={getHeaderRender({ months })}
       showMonthYearPicker={showMonthYearPicker}

diff --git a/src/components/DateField/DateFieldInt.part.tsx b/src/components/DateField/DateFieldInt.part.tsx
@@ -171,7 +171,7 @@ export interface DateFieldBasicProps extends FormContextProps, TextInputProps {
 }
 
 export type DateFieldProps = DateFieldBasicProps &
-  Omit<ReactDatePickerProps, keyof typeof excludedReactDatePickerProps>;
+  Omit<ReactDatePickerProps<unknown>, keyof typeof excludedReactDatePickerProps>;
 
 interface DateFieldState {
   value: string;
@@ -232,15 +232,15 @@ class DateFieldInt extends React.Component<DateFieldProps, DateFieldState> {
     }
   }
 
-  private changeValue: ReactDatePickerProps['onChange'] = inputDate => {
+  private changeValue: ReactDatePickerProps<unknown>['onChange'] = inputDate => {
     const { dateFormat = DefaultDateFormat, locale } = this.props;
     const date = inputDate || undefined;
-    const value = safeDateFormat(date, {
+    const value = safeDateFormat(date as Date, {
       dateFormat,
       locale,
     });
 
-    this.change(date, value);
+    this.change(date as Date, value);
   };
 
   private changeInput = (e: React.FocusEvent<HTMLInputElement>) => {
@@ -322,7 +322,7 @@ class DateFieldInt extends React.Component<DateFieldProps, DateFieldState> {
       ...rest
     } = this.props;
 
-    const datePickerProps = {} as ReactDatePickerProps;
+    const datePickerProps = {} as ReactDatePickerProps<unknown>;
     const customInputProps = {} as Omit<DateFieldBasicProps, 'onChange' | 'children'>;
     Object.keys(rest).forEach(propName => {
       if (excludedReactDatePickerProps[propName]) {