[KOA-6227] Make scrollable calendar grid list scalable (#2976)

* Make scrollable calendar grid list scalable * Update package-lock.json file * Fix default height and width * Apply prettier * Fix min width * Update type files * Fix types * Update type files * Fix types * update comments
Skyscanner · Aug 29, 2023 · e53ae08 · e53ae08
1 parent b7af798
commit e53ae08
Show file tree

Hide file tree

Showing 9 changed files with 12,460 additions and 15,298 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "lint:scss:fix": "stylelint 'packages/**/*.scss' --fix",
     "lint-staged": "lint-staged",
     "postinstall": "(cd packages && npm install)",
-    "prettier": "prettier --config .prettierrc --write \"**/*.js\"",
+    "prettier": "prettier --config .prettierrc --write \"**/*.(js|ts|tsx)\"",
     "start": "npm run build && npm run storybook",
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 9001",
     "storybook:dist": "NODE_OPTIONS=--openssl-legacy-provider storybook build -c .storybook -o dist-storybook",
@@ -137,6 +137,7 @@
     "@types/jest-axe": "^3.5.3",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
+    "@types/react-window": "^1.8.5",
     "@types/webpack-env": "^1.18.1",
     "autoprefixer": "^10.0.0",
     "babel-loader": "^8.0.0",
@@ -168,6 +169,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-svg-loader": "^3.0.1",
+    "react-virtualized-auto-sizer": "^1.0.20",
     "sass-loader": "^10.4.1",
     "sassdoc": "^2.7.0",
     "storybook": "^7.1.1",

diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.d.ts b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.d.ts
diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.d.ts b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.d.ts
@@ -16,17 +16,12 @@
  * limitations under the License.
  */
 
-import { PureComponent } from 'react';
+/// <reference types="react" />
 import type { BpkCalendarDateProps } from '../../bpk-component-calendar';
 type Props = Partial<BpkCalendarDateProps> & {
     date: Date;
     isOutside?: boolean;
     [rest: string]: any;
 };
-declare class BpkScrollableCalendarDate extends PureComponent<Props> {
-    static defaultProps: {
-        isOutside: boolean;
-    };
-    render(): JSX.Element | null;
-}
+declare const BpkScrollableCalendarDate: ({ isOutside, ...rest }: Props) => JSX.Element | null;
 export default BpkScrollableCalendarDate;
diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.tsx
@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-import { PureComponent } from 'react';
-
 import { BpkCalendarDate } from '../../bpk-component-calendar';
 import type { BpkCalendarDateProps } from '../../bpk-component-calendar';
 
@@ -26,16 +24,9 @@ type Props = Partial<BpkCalendarDateProps> & {
   isOutside?: boolean;
   [rest: string]: any;
 };
-class BpkScrollableCalendarDate extends PureComponent<Props> {
-  static defaultProps = {
-    isOutside: false,
-  };
-
-  render() {
-    const { isOutside, ...rest } = this.props;
+const BpkScrollableCalendarDate = ({isOutside = false, ...rest}: Props) => 
     // Returning null when isOutside is true ensures only focused month displays in grid
-    return !isOutside ? <BpkCalendarDate {...rest} /> : null;
-  }
-}
+     !isOutside ? <BpkCalendarDate {...rest} /> : null
+
 
 export default BpkScrollableCalendarDate;
diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts
@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
 import type { ElementType } from 'react';
-import type { BpkCalendarGridProps } from '../../bpk-component-calendar';
+import type { BpkCalendarGridProps, SelectionConfiguration } from '../../bpk-component-calendar';
 type Props = Partial<BpkCalendarGridProps> & {
     minDate: Date;
     maxDate: Date;
@@ -28,29 +27,8 @@ type Props = Partial<BpkCalendarGridProps> & {
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     formatMonth: (date: Date) => Date | string;
     focusedDate?: Date | null;
+    selectionConfiguration?: SelectionConfiguration;
+    className?: string | null;
 };
-type State = {
-    months: Date[];
-    monthItemHeights: number[];
-    outerHeight: number;
-};
-declare class BpkScrollableCalendarGridList extends Component<Props, State> {
-    outerDiv: HTMLDivElement | null;
-    static defaultProps: {
-        className: null;
-        focusedDate: null;
-    };
-    constructor(props: Props);
-    componentDidMount: () => void;
-    componentWillUnmount: () => void;
-    getHtmlElement: () => {} | null;
-    getItemSize: (index: number) => number;
-    setComponentHeight: () => void;
-    rowRenderer: ({ index, style }: {
-        index: number;
-        style: {};
-    }) => JSX.Element;
-    calculateOffsetInPixels: (numberOfMonths: number) => number;
-    render(): JSX.Element;
-}
+declare const BpkScrollableCalendarGridList: (props: Props) => JSX.Element;
 export default BpkScrollableCalendarGridList;