Fixed rows not being updated inside beginEditing and started using ge…

…tRows from apiRef
Apollo-Spreadsheet · Oct 20, 2020 · 3c76ac7 · 3c76ac7
1 parent a6fc746
commit 3c76ac7
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 46 deletions.
diff --git a/src/columnGrid/ColumnGrid.tsx b/src/columnGrid/ColumnGrid.tsx
@@ -142,7 +142,7 @@ export const ColumnGrid = React.memo(
 			const children = renderer ? (
 				(renderer(cell) as any)
 			) : cell.tooltip ? (
-				<Tooltip title={title} placement={'top'} {...cell.tooltipProps}>
+				<Tooltip title={cell.tooltip} placement={'top'} {...cell.tooltipProps}>
 					<span>{title}</span>
 				</Tooltip>
 			) : (

diff --git a/src/editorManager/useEditorManager.tsx b/src/editorManager/useEditorManager.tsx
@@ -78,7 +78,7 @@ export function useEditorManager<TRow>({
 	//Detect if row/column has changed or has been deleted (compares with the active editing info)
 	useEffect(() => {
 		if (editorNode && state.current) {
-			const target = rows[state.current.rowIndex] as TRow
+			const target = apiRef.current.getRows()[state.current.rowIndex] as TRow
 			const column = getColumnAt(state.current.colIndex)
 			if (target && column) {
 				const value = target[column.accessor]
@@ -91,7 +91,7 @@ export function useEditorManager<TRow>({
 				stopEditing({ save: false })
 			}
 		}
-	}, [rows, getColumnAt, editorNode])
+	}, [apiRef, getColumnAt, editorNode])
 
 	/**
 	 * Closes the existing editor without saving anything
@@ -218,7 +218,7 @@ export function useEditorManager<TRow>({
 				return
 			}
 
-			const row = rows[coords.rowIndex]
+			const row = apiRef.current.getRows()[coords.rowIndex]
 			if (!row) {
 				return console.warn(
 					`Row not found at ${coords.rowIndex}, therefore we can't start editing at column: ${column.id}`,
@@ -256,7 +256,7 @@ export function useEditorManager<TRow>({
 			setEditorNode(editor)
 			apiRef.current.dispatchEvent(CELL_BEGIN_EDITING, coords)
 		},
-		[getColumnAt, editorNode, rows, stopEditing],
+		[getColumnAt, editorNode, stopEditing],
 	)
 
 	function getEditorState() {

diff --git a/stories/Stretch.stories.tsx b/stories/Stretch.stories.tsx
@@ -11,7 +11,6 @@ const ExampleTable = ({ headerData, data, stretchMode }) => {
 		<ApolloSpreadSheet
 			headers={headerData}
 			rows={data}
-			fixedColumnCount={2}
 			minColumnWidth={120}
 			stretchMode={stretchMode}
 		/>

diff --git a/stories/components/Spreadsheet/Spreadsheet.tsx b/stories/components/Spreadsheet/Spreadsheet.tsx
@@ -45,13 +45,6 @@ const useStyles = makeStyles(() => ({
 		border: '1px solid white',
 		backgroundColor: '#E6EFED',
 		fontSize: '13px',
-		/** @todo This section will be used for cell flashing effect when undo/redo
-		 * but we need a setTimeout with equal time of the tranistion to remove the class
-		 * **/
-		// transition: "background-color 1s linear",
-		// "&:hover": {
-		//   backgroundColor: "red",
-		// },
 	},
 	rowClassDark: {
 		border: '1px solid white',

diff --git a/stories/components/Table/Table.tsx b/stories/components/Table/Table.tsx
@@ -2,17 +2,17 @@ import React, { useRef, useState } from 'react'
 import ApolloSpreadSheet from '../../../src'
 import { Header } from '../../../src/columnGrid/types/header.type'
 import { AddCircle } from '@material-ui/icons'
-import { Box, IconButton } from "@material-ui/core"
+import { Box, IconButton } from '@material-ui/core'
 import { CellChangeParams } from '../../../src/editorManager/useEditorManager'
-import { useApiRef } from "../../../src/api/useApiRef";
+import { useApiRef } from '../../../src/api/useApiRef'
 
 interface DemoRow {
 	id: string
 	name: string
 	city: string
 	country: string
 	job: string
-  order: number
+	order: number
 }
 
 const defaultRow: DemoRow = {
@@ -21,7 +21,7 @@ const defaultRow: DemoRow = {
 	city: '',
 	country: '',
 	job: '',
-  order: 1
+	order: 1,
 }
 export function Table() {
 	const [rows, setRows] = useState<DemoRow[]>([defaultRow])
@@ -56,7 +56,7 @@ export function Table() {
 				city: '',
 				country: '',
 				job: '',
-        order: prev.length + 1
+				order: prev.length + 1,
 			},
 		])
 	}
@@ -68,10 +68,10 @@ export function Table() {
 			accessor: 'order',
 			readOnly: true,
 			tooltip: 'Create your new row',
-      disableBackspace: true,
-      disableCellCut: true,
-      disableCellPaste: true,
-      width: "3%",
+			disableBackspace: true,
+			disableCellCut: true,
+			disableCellPaste: true,
+			width: '3%',
 			renderer: () => {
 				return (
 					<IconButton onClick={onCreateRowClick}>
@@ -84,43 +84,45 @@ export function Table() {
 			id: 'name',
 			title: 'Name',
 			accessor: 'name',
-      width: "20%"
+			width: '20%',
 		},
 		{
 			id: 'city',
 			title: 'City',
 			accessor: 'city',
-      width: "20%"
+			width: '20%',
 		},
 		{
 			id: 'country',
 			title: 'Country',
 			accessor: 'country',
-      width: "20%"
+			width: '20%',
 		},
 	]
 
 	return (
-	  <Box width={"98%"} height={"400px"} style={{ margin: 10 }}>
-      <ApolloSpreadSheet
-        apiRef={apiRef}
-        headers={headers}
-        rows={rows}
-        onCellChange={onCellChange}
-        onCreateRow={onCreateRowClick}
-        minColumnWidth={30}
-        selection={{
-          key: 'id',
-          onHeaderIconClick,
-        }}
-        disableSort={disableSort}
-        nestedHeaders={[
-        	[{
-        	  title: "Nested header example",
-		        colSpan: 5,
-	        }]
-        ]}
-      />
-    </Box>
+		<Box width={'98%'} height={'400px'} style={{ margin: 10 }}>
+			<ApolloSpreadSheet
+				apiRef={apiRef}
+				headers={headers}
+				rows={rows}
+				onCellChange={onCellChange}
+				onCreateRow={onCreateRowClick}
+				minColumnWidth={30}
+				selection={{
+					key: 'id',
+					onHeaderIconClick,
+				}}
+				disableSort={disableSort}
+				nestedHeaders={[
+					[
+						{
+							title: 'Nested header example',
+							colSpan: 5,
+						},
+					],
+				]}
+			/>
+		</Box>
 	)
 }