replace monthHeight with rowHeight

Skyscanner · Nov 6, 2023 · fa77fb8 · fa77fb8
1 parent f0ffeb2
commit fa77fb8
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 28 deletions.
diff --git a/examples/bpk-component-scrollable-calendar/examples.js b/examples/bpk-component-scrollable-calendar/examples.js
@@ -149,7 +149,7 @@ const DefaultExampleWithCustomHeight = () => (
       type: CALENDAR_SELECTION_TYPE.single,
       date: new Date(2020, 3, 15),
     }}
-    monthHeight={10}
+    rowHeight={3}
   />
 );
 

diff --git a/packages/bpk-component-calendar/src/BpkCalendarContainer.d.ts b/packages/bpk-component-calendar/src/BpkCalendarContainer.d.ts
@@ -41,7 +41,7 @@ export type Props = {
     initiallyFocusedDate?: Date | null;
     markToday?: boolean;
     markOutsideDays?: boolean;
-    monthHeight?: number;
+    rowHeight?: number;
 };
 type InjectedProps = {
     onDateClick: ((date: Date) => void) | null;
@@ -106,7 +106,7 @@ declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>)
         initiallyFocusedDate: null;
         markToday: boolean;
         markOutsideDays: boolean;
-        monthHeight?: number;
+        rowHeight?: number;
     };
     contextType?: import("react").Context<any> | undefined;
 };
@@ -159,7 +159,7 @@ declare const _default: {
         initiallyFocusedDate: null;
         markToday: boolean;
         markOutsideDays: boolean;
-        monthHeight?: number;
+        rowHeight?: number;
     };
     contextType?: import("react").Context<any> | undefined;
 };

diff --git a/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx b/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx
@@ -66,7 +66,7 @@ export type Props = {
   initiallyFocusedDate?: Date | null;
   markToday?: boolean;
   markOutsideDays?: boolean;
-  monthHeight?: number;
+  rowHeight?: number;
 };
 
 type InjectedProps = {

diff --git a/packages/bpk-component-calendar/src/composeCalendar.d.ts b/packages/bpk-component-calendar/src/composeCalendar.d.ts
@@ -71,7 +71,7 @@ export type Props = {
     preventKeyboardFocus?: boolean;
     selectionConfiguration?: SelectionConfiguration;
     gridClassName?: string | null;
-    monthHeight?: number;
+    rowHeight?: number;
     /**
      * Key to be used to pick the desired weekDay format from the `daysOfWeek` object, for example: `nameAbbr` or `nameNarrow`.
      */

diff --git a/packages/bpk-component-calendar/src/composeCalendar.tsx b/packages/bpk-component-calendar/src/composeCalendar.tsx
@@ -85,7 +85,7 @@ export type Props = {
   preventKeyboardFocus?: boolean;
   selectionConfiguration?: SelectionConfiguration;
   gridClassName?: string | null;
-  monthHeight?: number;
+  rowHeight?: number;
   /**
    * Key to be used to pick the desired weekDay format from the `daysOfWeek` object, for example: `nameAbbr` or `nameNarrow`.
    */
@@ -133,14 +133,14 @@ const composeCalendar = (
     maxDate,
     minDate,
     month,
-    monthHeight,
     navProps = {},
     nextMonthLabel = null,
     onDateClick = null,
     onDateKeyDown = null,
     onMonthChange = null,
     preventKeyboardFocus = false,
     previousMonthLabel = null,
+    rowHeight,
     selectionConfiguration = {
       type: CALENDAR_SELECTION_TYPE.single,
       date: null,
@@ -218,7 +218,7 @@ const composeCalendar = (
           className={gridClasses.join(' ')}
           dateProps={dateProps}
           selectionConfiguration={selectionConfiguration}
-          monthHeight={monthHeight}
+          rowHeight={rowHeight}
           {...gridProps}
         />
       </div>

diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx
@@ -80,7 +80,7 @@ describe('BpkCalendarScrollGridList', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render correctly with a custom "monthHeight" attribute', () => {
+  it('should render correctly with a custom "rowHeight" attribute', () => {
     const { asFragment } = render(
       <BpkScrollableCalendarGridList
         minDate={DateUtils.addDays(testDate, -1)}
@@ -90,7 +90,7 @@ describe('BpkCalendarScrollGridList', () => {
         formatDateFull={formatDateFull}
         DateComponent={BpkCalendarScrollDate}
         weekStartsOn={0}
-        monthHeight={10}
+        rowHeight={3}
       />,
     );
     expect(asFragment()).toMatchSnapshot();

diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts
@@ -29,7 +29,7 @@ type Props = Partial<BpkCalendarGridProps> & {
     focusedDate?: Date | null;
     selectionConfiguration?: SelectionConfiguration;
     className?: string | null;
-    monthHeight?: number;
+    rowHeight?: number;
 };
 declare const BpkScrollableCalendarGridList: (props: Props) => JSX.Element;
 export default BpkScrollableCalendarGridList;
diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx
@@ -35,6 +35,15 @@ import { getMonthsArray, getMonthItemHeights } from './utils';
 
 const getClassName = cssModules(STYLES);
 
+// These constants are here to facilitate calculating the height
+// This is the additional height of each grid without any rows.
+const BASE_MONTH_ITEM_HEIGHT = 8.125;
+const COLUMN_COUNT = 7;
+// Most browsers have by default 16px root font size
+const DEFAULT_ROOT_FONT_SIZE = 16;
+// Minimum month item width (useful for server-side rendering. This value will be overridden with an accurate width after mounting)
+const ESTIMATED_MONTH_ITEM_WIDTH = BASE_MONTH_ITEM_HEIGHT * 7 * DEFAULT_ROOT_FONT_SIZE;
+
 type Props = Partial<BpkCalendarGridProps> & {
   minDate: Date;
   maxDate: Date;
@@ -46,15 +55,15 @@ type Props = Partial<BpkCalendarGridProps> & {
   focusedDate?: Date | null;
   selectionConfiguration?: SelectionConfiguration;
   className?: string | null;
-  monthHeight?: number;
+  rowHeight?: number;
 };
 
 const BpkScrollableCalendarGridList = (props: Props) => {
   const {
     className = null,
     focusedDate = null,
     minDate,
-    monthHeight = 8.125,
+    rowHeight = 2.75,
     selectionConfiguration,
     ...rest
   } = props;
@@ -63,19 +72,11 @@ const BpkScrollableCalendarGridList = (props: Props) => {
   const endDate = startOfDay(startOfMonth(rest.maxDate));
   const monthsCount = DateUtils.differenceInCalendarMonths(endDate, startDate);
 
-  // These constants are here to facilitate calculating the height
   // Row and month item heights are defined in rem to support text scaling
-  const ROW_HEIGHT = 2.75;
-  // This is the additional height of each grid without any rows.
-  const BASE_MONTH_ITEM_HEIGHT = monthHeight;
-  const COLUMN_COUNT = 7;
-  // Most browsers have by default 16px root font size
-  const DEFAULT_ROOT_FONT_SIZE = 16;
+  const ROW_HEIGHT = rowHeight;
   // Most calendar grids have 5 rows. Calculate height in px as this is what react-window expects.
   const ESTIMATED_MONTH_ITEM_HEIGHT =
     (BASE_MONTH_ITEM_HEIGHT + 5 * ROW_HEIGHT) * DEFAULT_ROOT_FONT_SIZE;
-  // Minimum month item width (useful for server-side rendering. This value will be overridden with an accurate width after mounting)
-  const ESTIMATED_MONTH_ITEM_WIDTH = BASE_MONTH_ITEM_HEIGHT * 7 * DEFAULT_ROOT_FONT_SIZE;
 
   const getInitialRootFontSize = () =>
     parseFloat(getComputedStyle(document.documentElement).fontSize) ||

diff --git a/...mponent-scrollable-calendar/src/__snapshots__/BpkScrollableCalendarGridList-test.tsx.snap b/...mponent-scrollable-calendar/src/__snapshots__/BpkScrollableCalendarGridList-test.tsx.snap
@@ -1261,7 +1261,7 @@ exports[`BpkCalendarScrollGridList should render correctly with a "dateModifiers
 </DocumentFragment>
 `;
 
-exports[`BpkCalendarScrollGridList should render correctly with a custom "monthHeight" attribute 1`] = `
+exports[`BpkCalendarScrollGridList should render correctly with a custom "rowHeight" attribute 1`] = `
 <DocumentFragment>
   <div
     class="bpk-scrollable-calendar-grid-list"
@@ -1270,13 +1270,13 @@ exports[`BpkCalendarScrollGridList should render correctly with a custom "monthH
       style="overflow: visible; height: 0px; width: 0px;"
     >
       <div
-        style="position: relative; height: 380px; width: 1120px; overflow: auto; will-change: transform; direction: ltr;"
+        style="position: relative; height: 370px; width: 910px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
-          style="height: 4940px; width: 100%;"
+          style="height: 4810px; width: 100%;"
         >
           <div
-            style="position: absolute; left: 0px; top: 0px; height: 380px; width: 100%;"
+            style="position: absolute; left: 0px; top: 0px; height: 370px; width: 100%;"
           >
             <div
               class="bpk-scrollable-calendar-grid bpk-scrollable-calendar-grid-list__item"
@@ -1889,7 +1889,7 @@ exports[`BpkCalendarScrollGridList should render correctly with a custom "monthH
             </div>
           </div>
           <div
-            style="position: absolute; left: 0px; top: 380px; height: 380px; width: 100%;"
+            style="position: absolute; left: 0px; top: 370px; height: 370px; width: 100%;"
           >
             <div
               class="bpk-scrollable-calendar-grid bpk-scrollable-calendar-grid-list__item"