Merge pull request #11 from codeuniversity/fix-scroll-issue

Fix scroll issue and adjusting weekeends

Author: yoavweber

.github/workflows/size.yml

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0",
+  "version": "2.0.1",
   "license": "MIT",
   "main": "dist/antd-weekly-calendar.umd.js",
   "module": "dist/antd-weekly-calendar.es.js",
@@ -89,7 +89,7 @@
     "storybook": "^8.2.9",
     "typescript": "^5.5.4",
     "vite": "^4.0.0",
-    "vite-plugin-dts": "^4.0.3",
+    "vite-plugin-dts": "^4.2.1",
     "vitest": "^0.32.2"
   },
   "eslintConfig": {

package.json

@@ -13,18 +13,21 @@ export function WeeklyCalendar<T extends GenericEvent>({
   onSelectDate,
   weekends = false,
   currentDate,
+  value
 }: CalendarContainerProps<T>) {
-  const [startWeek, setStartWeek] = useState(startOfWeek(currentDate || new Date(), { weekStartsOn: 0 }));
+  const dateToUse = currentDate || value;
+
+  const [startWeek, setStartWeek] = useState(startOfWeek(dateToUse || new Date(), { weekStartsOn: 0 }));
   const weekPeriod = {
     startDate: startWeek,
     endDate: endOfWeek(startWeek),
   };
 
   useEffect(() => {
-    if (currentDate && startOfWeek(currentDate).getTime() !== startWeek.getTime()) {
-      setStartWeek(currentDate);
+    if (dateToUse && startOfWeek(dateToUse).getTime() !== startWeek.getTime()) {
+      setStartWeek(dateToUse);
     }
-  }, [currentDate]);
+  }, [dateToUse]);
 
   useEffect(() => {
     onSelectDate && onSelectDate(startWeek);

src/WeeklyCalendar.tsx

@@ -1,11 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 import { Table, Grid } from 'antd';
 
-import {
-  GenericEvent,
-  CalendarBodyProps,
-} from './types';
-import { getDayHoursEvents } from './utils';
+import { GenericEvent, CalendarBodyProps } from './types';
+import { getDayHoursEvents, calculateScrollOffset } from './utils';
 import { createDayColumns, SCROLL_TO_ROW } from './columns';
 
 const ALL_DAY_ROW = 0;
@@ -18,17 +15,30 @@ function Calendar<T extends GenericEvent>({
   weekends,
 }: CalendarBodyProps<T>) {
   const rowRef = useRef<null | HTMLDivElement>(null);
+  const tableContainerRef = useRef<null | HTMLDivElement>(null);
+
   const screens = useBreakpoint();
 
   useEffect(() => {
-    if (rowRef.current) {
-      rowRef.current.scrollIntoView();
+    if (rowRef.current && tableContainerRef.current && 'scrollTo' in tableContainerRef.current) {
+      const scrollOffset = calculateScrollOffset(tableContainerRef.current, rowRef.current);
+      tableContainerRef.current.scrollTo({ top: scrollOffset, behavior: 'smooth' });
     }
-  }, [rowRef]);
+  }, [SCROLL_TO_ROW]);
 
-  const fontSize = screens.xs ? '12px' : '14px'
+  const fontSize = screens.xs ? '12px' : '14px';
   const hourColumn = {
-    title: <div style={{ fontSize: screens.xs ? '14px' : '16px', textAlign: 'center', padding: '8px 0' }}>Hours</div>,
+    title: (
+      <div
+        style={{
+          fontSize: screens.xs ? '14px' : '16px',
+          textAlign: 'center',
+          padding: '8px 0',
+        }}
+      >
+        Hours
+      </div>
+    ),
     dataIndex: 'hour',
     key: 'hour',
     width: screens.xs ? 50 : 1,
@@ -37,7 +47,7 @@ function Calendar<T extends GenericEvent>({
         props: {
           style: {
             width: screens.xs ? '30%' : '10%',
-            fontSize: fontSize
+            fontSize: fontSize,
           },
         },
         children: SCROLL_TO_ROW === id ? (
@@ -55,7 +65,7 @@ function Calendar<T extends GenericEvent>({
       <div
         style={{
           whiteSpace: 'nowrap',
-          fontSize: fontSize
+          fontSize: fontSize,
         }}
       >
         {/*  @ts-ignore */}
@@ -67,9 +77,16 @@ function Calendar<T extends GenericEvent>({
   const tableColumns = [hourColumn, ...dayColumns];
 
   return (
-    <div style={{ overflowX: 'scroll' }}>
+    <div
+      ref={tableContainerRef}
+
+      style={{
+        height: '80vh', // Set a fixed height for the container
+        overflow: 'auto', // Allow both vertical and horizontal scrolling within the container only
+      }}
+    >
       <Table
-        rowKey={record => record.id}
+        rowKey={(record) => record.id}
         dataSource={getDayHoursEvents(weekDatesRange, getDayEvents)}
         columns={tableColumns}
         pagination={false}
@@ -81,26 +98,23 @@ function Calendar<T extends GenericEvent>({
               style: {
                 backgroundColor: 'white',
                 position: 'sticky',
-                boxShadow: 'rgba(0, 0, 0, 0.05) -1px 4px 4px ',
-                zIndex: 1,
+                boxShadow: 'rgba(0, 0, 0, 0.05) -1px 4px 4px',
+                zIndex: 3,
                 top: 0,
                 padding: '8px 0',
               },
             };
-          }
+          } 
           return {
             style: {
-              padding: '8px 0', // Add padding for each row
+              padding: '8px 0',
             },
           };
         }}
-        scroll={{
-          y: screens.xs ? 300 : 1000,
-          x: 'max-content',
-        }}
+
       />
     </div>
   );
 }
 
-export default Calendar;
+export default Calendar;

src/components/CalendarBody.tsx

@@ -9,7 +9,7 @@ import {
 } from './types';
 import { EventBlock } from './Event';
 
-export const SCROLL_TO_ROW = 19;
+export const SCROLL_TO_ROW = 6;
 
 
 

src/components/columns.tsx

@@ -20,6 +20,11 @@ export interface BaseCalendarProps<T extends GenericEvent = GenericEvent> {
 export interface CalendarContainerProps<T extends GenericEvent = GenericEvent>
   extends BaseCalendarProps<T> {
   events: T[];
+  /**
+   * @deprecated Use `currentDate` instead.
+   */
+  value?: Date;
+
   currentDate?: Date;
 }
 

src/components/types.tsx

@@ -205,3 +205,20 @@ export const sizeEventBox = <T extends GenericEvent>(event: T, hour: Date) => {
       : differenceInMinutes(eventStartTime, hour) * HOUR_TO_DECIMAL;
   return { boxPosition: boxPosition, boxSize: boxSize };
 };
+
+/**
+ * calculateScrollOffset - A  to calculate the scroll offset needed to bring a specific row into view.
+ * 
+ * @param {HTMLDivElement} container - The container element that is scrollable.
+ * @param {HTMLDivElement} row - The row element that needs to be scrolled into view.
+ * @returns {number} - The calculated scroll offset value.
+ * 
+ * This function calculates how much the container needs to be scrolled to bring the target row into view.
+ * It determines the difference between the container's top position and the row's top position, and adjusts
+ * the scroll position accordingly, with an extra offset to position the row appropriately in the view.
+ */
+export function calculateScrollOffset(container: HTMLDivElement, row: HTMLDivElement): number {
+  const containerTop = container.getBoundingClientRect().top;
+  const rowTop = row.getBoundingClientRect().top;
+  return rowTop - containerTop  // Adjust to scroll just enough to show the row
+}

src/components/utils.ts

@@ -0,0 +1,11 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+      "outDir": "./dist",
+      "noEmit": false,
+      "removeComments": true,
+      "sourceMap": false
+    },
+    "exclude": ["node_modules", "dist", "**/*.stories.*", "**/*.test.*", "**/*.spec.*"]
+  }
+  

tsconfig.build.json

@@ -1,9 +1,12 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
+import dts from 'vite-plugin-dts'
 
 export default defineConfig({
-    plugins: [react()],
+    plugins: [react(), dts({
+        tsconfigPath: './tsconfig.build.json',
+    }),],
     build: {
         lib: {
             entry: path.resolve(__dirname, 'src/index.ts'),  // This is correct
@@ -20,6 +23,7 @@ export default defineConfig({
                 },
             },
         },
+
         emptyOutDir: false,  // Prevent Vite from clearing the output directory
     },
 });