fix: upgrade react-datepicker

Adslot · Jun 21, 2024 · 7058bcd · 7058bcd
1 parent ac27992
commit 7058bcd
Show file tree

Hide file tree

Showing 7 changed files with 1,452 additions and 2,481 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -113,7 +113,6 @@
     "cross-env": "^7.0.3",
     "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
-    "date-fns": "^2.30.0",
     "eslint": "^8.57.0",
     "eslint-config-adslot": "^1.8.3",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -165,14 +164,15 @@
     "@draft-js-plugins/editor": "^4.1.4",
     "@draft-js-plugins/mention": "^5.3.0",
     "@types/draft-js": "^0.11.18",
-    "@types/react-datepicker": "^4.19.6",
+    "@types/react": "^18.3.3",
+    "@types/react-datepicker": "^6.2.0",
     "@types/react-slick": "^0.23.13",
     "cropperjs": "^1.6.1",
     "diff-match-patch": "^1.0.5",
     "draft-js": "^0.11.7",
     "draft-js-export-html": "^1.4.1",
     "draft-js-import-html": "^1.4.1",
-    "react-datepicker": "^4.25.0",
+    "react-datepicker": "^7.1.0",
     "react-popper": "^2.3.0",
     "react-select": "^5.8.0",
     "react-slick": "^0.30.2",

diff --git a/scripts/generate-types/typesPostFixes.js b/scripts/generate-types/typesPostFixes.js
@@ -63,26 +63,25 @@ exports.replacements = (componentName) => ({
       [
         `import * as React from 'react';`,
         `import * as React from 'react';
-       import { ReactDatePickerProps } from "react-datepicker";
+       import { DatePickerProps as LibProps } from "react-datepicker";
   import { Moment } from "moment";`,
       ],
       [
         `export interface DatePickerProps {`,
         `
-      export interface DatePickerProps {
-      selected?: Moment | Date | null;
-      onChange?(date: Moment | Date | null): void;
-      startDate?: Moment | Date | null;
-      endDate?: Moment | Date | null;
-      minDate?: Moment | Date | null;
-      maxDate?: Moment | Date | null;`,
+        export type DatePickerProps = Omit<LibProps, 'onSelect' | 'excludeScrollbar' | 'onChange' | 'selected' | 'startDate' | 'endDate' | 'minDate' | 'maxDate'> & {
+        onSelect?: LibProps['onSelect'];
+        excludeScrollbar?: LibProps['excludeScrollbar'];`,
       ],
       [
-        `declare const DatePicker: React.FC<DatePickerProps>;`,
-        `declare const DatePicker: ${withForwardRef(
-          'DatePickerProps & Omit<ReactDatePickerProps, keyof DatePickerProps>'
-        )};`,
+        `onChange: (...args: any[])=>any;`,
+        `onChange: (date: Moment | Date | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void`,
       ],
+      [`selected?: Object;`, `selected?: Moment | Date | null;`],
+      [`startDate?: Object;`, `startDate?: Moment | Date | null;`],
+      [`endDate?: Object;`, `endDate?: Moment | Date | null;`],
+      [`minDate?: Object;`, `minDate?: Moment | Date | null;`],
+      [`maxDate?: Object;`, `maxDate?: Moment | Date | null;`],
     ],
   },
   ImageCropper: {
@@ -154,7 +153,7 @@ exports.replacements = (componentName) => ({
       Async: typeof AsyncSelect;
       AsyncCreatable: typeof AsyncCreatableSelect;
       createFilter: typeof createFilter;
-    };      
+    };
 
     export default Select;
     `,

diff --git a/src/components/DatePicker/DatePicker.stories.tsx b/src/components/DatePicker/DatePicker.stories.tsx
@@ -14,13 +14,20 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const Demo = () => {
+  const [date, setDate] = React.useState(() => new Date());
+
+  return (
+    <DatePicker
+      className="form-control"
+      dateFormat="DD MMM YYYY"
+      onChange={setDate}
+      selected={date}
+      placeholderText="Date e.g. 03 Sep 2016"
+    />
+  );
+};
+
 export const Default: Story = {
-  args: {
-    className: 'form-control',
-    dateFormat: 'dd MMM yyyy',
-    selected: new Date(),
-    placeholderText: 'Date e.g. 03 Sep 2016',
-    disableInlineEditing: false,
-    disableMomentFormat: true,
-  },
+  render: () => <Demo />,
 };
diff --git a/src/components/DatePicker/index.d.ts b/src/components/DatePicker/index.d.ts
@@ -1,27 +1,33 @@
 import * as React from 'react';
-import { ReactDatePickerProps } from 'react-datepicker';
+import { DatePickerProps as LibProps } from 'react-datepicker';
 import { Moment } from 'moment';
 
-export interface DatePickerProps {
-  selected?: Moment | Date | null;
-  onChange?(date: Moment | Date | null): void;
-  startDate?: Moment | Date | null;
-  endDate?: Moment | Date | null;
-  minDate?: Moment | Date | null;
-  maxDate?: Moment | Date | null;
+export type DatePickerProps = Omit<
+  LibProps,
+  'onSelect' | 'excludeScrollbar' | 'onChange' | 'selected' | 'startDate' | 'endDate' | 'minDate' | 'maxDate'
+> & {
+  onSelect?: LibProps['onSelect'];
+  excludeScrollbar?: LibProps['excludeScrollbar'];
   disableInlineEditing?: boolean;
-  dts?: string;
   /**
    * "dateFormat" prop is using momentjs format tokens.
    * set this prop to "true" to enable unicode tokens.
    * read more https://git.io/fxCyr
    */
   disableMomentFormat?: boolean;
-}
+  dateFormat?: string;
+  dts?: string;
+  onChange: (
+    date: Moment | Date | null,
+    event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+  ) => void;
+  selected?: Moment | Date | null;
+  startDate?: Moment | Date | null;
+  endDate?: Moment | Date | null;
+  minDate?: Moment | Date | null;
+  maxDate?: Moment | Date | null;
+};
 
-declare const DatePicker: React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<DatePickerProps & Omit<ReactDatePickerProps, keyof DatePickerProps>> &
-    React.RefAttributes<((...args: any[]) => any) | Element>
->;
+declare const DatePicker: React.FC<DatePickerProps>;
 
 export default DatePicker;
diff --git a/src/components/DatePicker/index.jsx b/src/components/DatePicker/index.jsx
@@ -8,38 +8,19 @@ import './styles.css';
 
 const momentToDate = (date) => (!date || date instanceof Date ? date : date.toDate());
 
-const withMoment = (DatePickerComponent) =>
-  React.forwardRef(
-    ({ selected, onChange, startDate, endDate, minDate, maxDate, dateFormat, disableMomentFormat, ...props }, ref) => {
-      const _dateFormat = React.useMemo(
-        () => (disableMomentFormat ? dateFormat : transform(dateFormat)),
-        [dateFormat, disableMomentFormat]
-      );
-
-      const isDate = selected instanceof Date;
-      const handleChange = React.useCallback(
-        (newDate) => {
-          onChange?.(isDate || !newDate ? newDate : moment(newDate));
-        },
-        [isDate, onChange]
-      );
-      return (
-        <DatePickerComponent
-          ref={ref}
-          {...props}
-          selected={momentToDate(selected)}
-          startDate={momentToDate(startDate)}
-          endDate={momentToDate(endDate)}
-          minDate={momentToDate(minDate)}
-          maxDate={momentToDate(maxDate)}
-          dateFormat={_dateFormat}
-          onChange={handleChange}
-        />
-      );
-    }
-  );
-
-const DatePicker = withMoment(({ disableInlineEditing, dts, ...rest }) => {
+const DatePicker = ({
+  disableInlineEditing = false,
+  disableMomentFormat = false,
+  dateFormat,
+  dts,
+  onChange,
+  selected,
+  startDate,
+  endDate,
+  minDate,
+  maxDate,
+  ...rest
+}) => {
   const datePickerProps = disableInlineEditing
     ? {
         onChangeRaw: (event) => {
@@ -48,27 +29,52 @@ const DatePicker = withMoment(({ disableInlineEditing, dts, ...rest }) => {
       }
     : {};
 
+  const _dateFormat = React.useMemo(
+    () => (disableMomentFormat ? dateFormat : transform(dateFormat)),
+    [dateFormat, disableMomentFormat]
+  );
+
+  const isDate = selected instanceof Date;
+  const handleChange = React.useCallback(
+    (newDate) => {
+      onChange?.(isDate || !newDate ? newDate : moment(newDate));
+    },
+    [isDate, onChange]
+  );
+
   return (
     <div data-testid="date-picker-wrapper" className="aui--date-picker" data-test-selector={dts}>
-      <ReactDatePicker {...rest} {...datePickerProps} />
+      <ReactDatePicker
+        {...rest}
+        {...datePickerProps}
+        dateFormat={_dateFormat}
+        onChange={handleChange}
+        selected={momentToDate(selected)}
+        startDate={momentToDate(startDate)}
+        endDate={momentToDate(endDate)}
+        minDate={momentToDate(minDate)}
+        maxDate={momentToDate(maxDate)}
+      />
     </div>
   );
-});
+};
 
 DatePicker.propTypes = {
   disableInlineEditing: PropTypes.bool,
-  dts: PropTypes.string,
   /**
    * "dateFormat" prop is using momentjs format tokens.
    * set this prop to "true" to enable unicode tokens.
    * read more https://git.io/fxCyr
    */
   disableMomentFormat: PropTypes.bool,
-};
-
-DatePicker.defaultProps = {
-  disableInlineEditing: false,
-  disableMomentFormat: false,
+  dateFormat: PropTypes.string,
+  dts: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  selected: PropTypes.object,
+  startDate: PropTypes.object,
+  endDate: PropTypes.object,
+  minDate: PropTypes.object,
+  maxDate: PropTypes.object,
 };
 
 export default DatePicker;
diff --git a/src/components/DatePicker/index.spec.jsx b/src/components/DatePicker/index.spec.jsx
@@ -4,7 +4,7 @@ import { render, screen, user } from 'testing';
 import DatePicker from '.';
 
 it('should render with defaults', () => {
-  render(<DatePicker className="test" dts="test" />);
+  render(<DatePicker className="test" dts="test" onChange={jest.fn()} />);
 
   expect(screen.getByTestId('date-picker-wrapper')).toHaveClass('aui--date-picker');
   expect(screen.getByTestId('date-picker-wrapper')).toHaveAttribute('data-test-selector', 'test');