Fixed stretch stories

Fixed horizontal scroll and removed from grid wrapper
Removed data from extra props in ScrollHandler and adjusted its Prop types
Renamed some scroll handler methods and also fixed native onScroll to read from target
Fixed dummy cells styling that were adding border into merged cells

src/column-grid/__tests__/ColumnGrid.spec.tsx

@@ -12,7 +12,6 @@ describe('<ColumnGrid />', () => {
 		width: 100,
 		scrollLeft: 0,
 		isScrolling: false,
-		onScroll: () => {},
 		height: 100,
 		coords: { rowIndex: 0, colIndex: 0}
 	}

src/core/GridWrapper.tsx

@@ -63,7 +63,6 @@ interface Props extends GridWrapperCommonProps {
 	scrollLeft: number;
 	scrollTop: number;
 	isScrolling: boolean;
-	onScroll: (params: ScrollParams) => any;
 	height: number;
 	registerChild: Function;
 	gridContainerRef: HTMLDivElement | null;
@@ -281,13 +280,13 @@ const GridWrapper = forwardRef((props: Props, componentRef: any) => {
 			  style.border = "1px solid blue"
 		  } else {
 			  //Bind default border
-			  if (!props.theme || !props.theme.cellClass) {
+			  if (!props.theme || !props.theme.cellClass && !cell.dummy) {
 				  style.border = "1px solid rgb(204, 204, 204)"
 			  }
 		  }
 
 		  //Non navigable columns get now a custom disable style
-		  if (props.headers[0][columnIndex]?.disableNavigation) {
+		  if (props.headers[0][columnIndex]?.disableNavigation && !cell.dummy) {
 			  /** @todo We can apply the custom class if theme has it by using a class builder such as clsx **/
 			  style.opacity = 0.6
 		  }
@@ -301,17 +300,18 @@ const GridWrapper = forwardRef((props: Props, componentRef: any) => {
 		   * @todo The children renderer has to be controlled via the custom column configuration
 		   * */
 
+		  const cellClassName = !cell.dummy && isRowSelected && props.theme?.currentRowClass
+		    ? clsx(props.theme?.cellClass, props.theme?.currentRowClass)
+		    : !cell.dummy ? props.theme?.cellClass: undefined
+
+		  //Ensure dummies does not have border
+		  if (cell.dummy){
+			  style.border = '0px'
+		  }
+
 		  return (
 			<div
-			  /**
-			  *  @todo Removing most of the custom styling on dummy cells! it is applying borders and other things
-			  that must not be on dummies, dummies are supposed to be invisible
-				*/
-			  className={
-				  isRowSelected && props.theme?.currentRowClass
-					? clsx(props.theme?.cellClass, props.theme?.currentRowClass)
-					: props.theme?.cellClass
-			  }
+			  className={cellClassName}
 			  style={{
 				  display: "flex",
 				  justifyContent: cell?.dummy ? 'top' : "center",

src/core/ScrollHandler.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback, useImperativeHandle, forwardRef } from 'react'
+import React, {useState, useRef, useEffect, useCallback, useImperativeHandle, forwardRef, useMemo} from 'react'
 import { createPortal } from 'react-dom'
 import { WindowScroller } from 'react-virtualized'
 import { debounce } from 'lodash'
@@ -12,7 +12,7 @@ const useStyles = makeStyles(() => ({
 		height: '10px',
 	},
 	root: {
-		overflowX: 'auto',
+		overflowX: 'hidden',
 		minHeight: '10px',
 		'&::-webkit-scrollbar-track': {
 			borderRadius: '10px',
@@ -30,12 +30,30 @@ const useStyles = makeStyles(() => ({
 			'-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,.3)',
 		},
 		'&:hover': {
-			//overflowX: 'auto',
+			overflowX: 'auto',
 		},
 	},
 }))
+
+interface ScrollHandlerChildrenProps {
+	height: number
+	isScrolling: boolean
+	scrollTop: number
+	scrollLeft: number
+	headerRef: React.MutableRefObject<any>
+	gridRef: React.MutableRefObject<any>
+}
+
+export type ScrollHandlerChildrenFn = (props: ScrollHandlerChildrenProps) => any
+interface Props {
+	stretchMode: StretchMode
+	totalColumnWidth: number
+	width: number
+	scrollContainer: Element | null
+	children: ScrollHandlerChildrenFn
+}
 const ScrollHandler = forwardRef(
-	({ children, scrollContainer, width, totalColumnWidth, stretchMode }: any, componentRef: any) => {
+	({ children, scrollContainer, width, totalColumnWidth, stretchMode }: Props, componentRef: any) => {
 		const scrollChildRef = useRef<any>(null)
 		const headerRef = useRef<any>(null)
 		const gridRef = useRef<any>(null)
@@ -67,7 +85,7 @@ const ScrollHandler = forwardRef(
 			}
 
 			fakeScrollerRef.current.scrollLeft = scrollLeft
-		}, [scrollLeft])
+		})
 
 		// update sticky status of fake scroller on each update if not scrolling
 		useEffect(() => {
@@ -78,7 +96,7 @@ const ScrollHandler = forwardRef(
 			const clientRect = scrollChildRef.current.getBoundingClientRect()
 
 			setStickyScroller(clientRect.bottom > window.innerHeight)
-		}, [scrolling])
+		})
 
 		// reset scrolling flag when scroll stops
 		const setNotScrolling = useCallback(
@@ -88,7 +106,7 @@ const ScrollHandler = forwardRef(
 			[],
 		)
 
-		const handleScroll = useCallback(
+		const handleHorizontalScroll = useCallback(
 			({ scrollLeft: paramScrollLeft }) => {
 				//Prevent a re-render when the target scroll left hasn't change
 				if (scrollLeft === paramScrollLeft) {
@@ -110,6 +128,18 @@ const ScrollHandler = forwardRef(
 			[],
 		)
 
+		console.log({
+			totalColumnWidth,
+			width,
+			stretchMode,
+			displayScroll: stretchMode === StretchMode.None && totalColumnWidth > width,
+			fakeScrollerRef: fakeScrollerRef.current,
+			scrollChildRef: scrollChildRef.current
+		})
+		const displayHorizontalScroll = useMemo(() => {
+			return stretchMode === StretchMode.None && totalColumnWidth > width
+		}, [width, totalColumnWidth, stretchMode])
+
 		/**
 		 * @todo Consider the possibility of using WindowScroller + ScrollSync or just ScrollSync (we will need the scroll sync feature probably for fixed rows/columns and also for horizontal scroll precision)
 		 * */
@@ -125,15 +155,13 @@ const ScrollHandler = forwardRef(
 						>
 							{children({
 								height,
-								onScroll: handleScroll,
 								isScrolling: isScrolling || scrolling,
 								scrollTop,
 								scrollLeft,
 								headerRef,
 								gridRef,
 							})}
-							{/** @todo Consider stretch mode to disable horizontal scrolling **/}
-							{ stretchMode === StretchMode.None && totalColumnWidth > width && (
+							{ displayHorizontalScroll && (
 								<div
 									id="fake-scroller"
 									className={classes.root}
@@ -142,7 +170,9 @@ const ScrollHandler = forwardRef(
 										position: stickyScroller ? 'sticky' : 'relative',
 										bottom: stickyScroller ? '0px' : 'unset',
 									}}
-									onScroll={handleScroll}
+									onScroll={e => {
+										handleHorizontalScroll({ scrollLeft: e.target['scrollLeft']})
+									}}
 									ref={fakeScrollerRef}
 								>
 									<div

src/index.tsx

@@ -12,7 +12,7 @@ import { FixedColumnWidthRecord } from './column-grid/types/fixed-column-width-r
 import { createFixedWidthMapping } from './column-grid/utils/createFixedWidthMapping'
 import { Column } from './column-grid/types/header.type'
 import shallowDiffers from './helpers/shallowDiffers'
-import {insertDummyCells} from "./core/insertDummyCells";
+import {insertDummyCells} from "./core/insertDummyCells"
 
 const CONTAINER_SCROLL_WIDTH = 5
 /** @todo Make it 15 or 10 to be a little bit wider **/
@@ -21,6 +21,7 @@ const useStyles = makeStyles(() => ({
 		height: '100%',
 		overflowY: 'hidden',
 		overflowX: 'hidden',
+		/** @todo Max height must be removed, this is just experimental **/
 		maxHeight: 500,
 		margin: 15,
 		'&:hover': {
@@ -89,6 +90,7 @@ export const ApolloSpreadSheet = forwardRef((props: Props, componentRef: any) =>
 	/**
 	 * Stores the main headers only, nested headers are not required in here
 	 * because this is used as an utility
+	 * @todo Improve support for nested headers receiving in a new prop like mergedData
 	 */
 	const mainHeaders: Column[] = useMemo(() => {
 		if (Array.isArray(props.headers[0])) {
@@ -175,9 +177,11 @@ export const ApolloSpreadSheet = forwardRef((props: Props, componentRef: any) =>
 
 	const getTotalColumnWidth = useCallback(
 		getColumnWidth => {
-			return mainHeaders.reduce((acc, e, i) => {
-				return acc + getColumnWidthHelper(getColumnWidth)({ index: i })
-			}, 0)
+			let value = 0
+			for(let i = 0; i < columnCount; i++){
+				value += getColumnWidthHelper(getColumnWidth)({ index: i })
+			}
+			return value
 		},
 		[mainHeaders],
 	)
@@ -190,16 +194,15 @@ export const ApolloSpreadSheet = forwardRef((props: Props, componentRef: any) =>
 					columnCount={calculatingColumnCount}
 					width={buildColumnTotalWidth(width)}
 				>
-					{({ registerChild, getColumnWidth }) => (
+					{({  registerChild, getColumnWidth }) => (
 						<ScrollHandler
 							scrollContainer={gridContainerRef.current}
 							width={width - CONTAINER_SCROLL_WIDTH}
-							data={props.data}
 							totalColumnWidth={getTotalColumnWidth(getColumnWidth)}
 							stretchMode={props.stretchMode ?? StretchMode.None}
 							ref={componentRef}
 						>
-							{({ scrollTop, scrollLeft, isScrolling, gridRef, headerRef, onScroll, height }) => (
+							{({ scrollTop, scrollLeft, isScrolling, gridRef, headerRef, height }) => (
 								<>
 									<ColumnGrid
 										headers={props.headers}
@@ -228,7 +231,6 @@ export const ApolloSpreadSheet = forwardRef((props: Props, componentRef: any) =>
 										ref={gridRef}
 										scrollLeft={scrollLeft}
 										isScrolling={isScrolling}
-										onScroll={onScroll}
 										height={height}
 										columnCount={columnCount}
 										coords={coords}

src/stories/Stretch.stories.tsx

@@ -21,8 +21,13 @@ const ExampleTable = ({ headerData, data, stretchMode }) => {
 
 storiesOf('Stretch Modes', module)
 	.add('None (with remaining width left and no scroll)', () => {
-		const { headerData, data } = getSimpleData(10, 3)
-		return <ExampleTable headerData={headerData} data={data} stretchMode={StretchMode.None} />
+		const { data } = getSimpleData(10, 3)
+		const headers: Column[] = [
+			createColumnMock({ width: '20%', title: 'First' }),
+			createColumnMock({ width: '20%', title: 'Second' }),
+			createColumnMock({ width: '50%', title: 'Third' }),
+		]
+		return <ExampleTable headerData={[headers]} data={data} stretchMode={StretchMode.None} />
 	})
 	.add('None (fixed widths with scroll)', () => {
 		const headers: Column[] = [