pre release code amendments

patryk0493 · patryk0493 · commit 6ea210465fe9 · 2021-02-22T12:40:56.000+01:00
diff --git a/src/index.tsx b/src/index.tsx
@@ -5,7 +5,8 @@ import { ReactGrid } from './lib/Components/ReactGrid';
 // import './test/theming-test.scss';
 import {
   config, enablePinnedToBodyConfig, disabledInitialFocusLocationConfig, enableAdditionalContentConfig,
-  enableAdditionalContentWithFlexRowConfig, enableSymetric, enableResponsiveSticky, enableResponsiveStickyPinnedToBody, enableSpannedCells
+  enableAdditionalContentWithFlexRowConfig, enableSymetric, enableResponsiveSticky, enableResponsiveStickyPinnedToBody,
+  enableSpannedCells
 } from './test/testEnvConfig';
 
 let component = <ExtTestGrid
diff --git a/src/lib/Components/CellFocus.tsx b/src/lib/Components/CellFocus.tsx
@@ -1,50 +1,56 @@
 import * as React from 'react';
+import { translateLocationIdxToLookupKey } from '../Model/CellMatrix';
 import { Location } from '../Model/InternalModel';
 import { State } from '../Model/State';
 
-interface CellFocusProps {
-    state?: State;
+
+interface FeaturedCellProps {
     location: Location;
-    isHighlight?: boolean;
+    state?: State;
     borderColor?: string;
     className?: string;
 }
-export const Highlight: React.FC<CellFocusProps> = ({ borderColor, isHighlight, location, className, state }) => {
-    const colIdx = location.column.idx;
-    const rowIdx = location.row.idx;
-    const range = state?.cellMatrix.rangesToRender[state.cellMatrix.getLocationToFindRangeByIds(colIdx, rowIdx)]?.range;
+
+export const CellHighlight: React.FC<FeaturedCellProps> = ({ borderColor, location, className, state }) => {
+    const { idx: colIdx } = location.column;
+    const { idx: rowIdx } = location.row;
+    const range = state?.cellMatrix.rangesToRender[translateLocationIdxToLookupKey(colIdx, rowIdx)]?.range;
     if (!range) {
         return null;
     }
     return (
-        <div
-            key={borderColor}
-            className={`${isHighlight ? 'rg-cell-highlight' : 'rg-cell-focus'} ${className || ''}`}
-            style={{
-                top: location.row.top - (location.row.top === 0 ? 0 : 1),
-                left: location.column.left - (location.column.left === 0 ? 0 : 1),
-                width: range.width + (location.column.left === 0 ? 0 : 1),
-                height: range.height + (location.row.top === 0 ? 0 : 1),
-                borderColor: `${borderColor}`,
-            }}
+        <FeaturedCell
+            location={location}
+            className={`rg-cell-highlight ${className || ''}`}
+            borderColor={borderColor}
+            width={range.width}
+            height={range.height}
         />
     );
 }
 
-// TODO make HOC for highlights 
-export const CellFocus: React.FC<CellFocusProps> = ({ borderColor, isHighlight, location, className }) => {
+export const CellFocus: React.FC<FeaturedCellProps> = ({ borderColor, location, className }) => {
+    return <FeaturedCell
+        location={location}
+        className={`rg-cell-focus ${className || ''}`}
+        borderColor={borderColor}
+        width={location.column.width}
+        height={location.row.height}
+    />
+}
 
-    return (
-        <div
-            key={borderColor}
-            className={`${isHighlight ? 'rg-cell-highlight' : 'rg-cell-focus'} ${className || ''}`}
-            style={{
-                top: location.row.top - (location.row.top === 0 ? 0 : 1),
-                left: location.column.left - (location.column.left === 0 ? 0 : 1),
-                width: location.column.width + (location.column.left === 0 ? 0 : 1),
-                height: location.row.height + (location.row.top === 0 ? 0 : 1),
-                borderColor: `${borderColor}`,
-            }}
-        />
-    );
-}
+const FeaturedCell: React.FC<FeaturedCellProps & { width: number, height: number }> =
+    ({ className, location, borderColor, height, width }) => {
+        return (
+            <div
+                className={className}
+                style={{
+                    top: location.row.top - (location.row.top === 0 ? 0 : 1),
+                    left: location.column.left - (location.column.left === 0 ? 0 : 1),
+                    width: width + (location.column.left === 0 ? 0 : 1),
+                    height: height + (location.row.top === 0 ? 0 : 1),
+                    borderColor: `${borderColor}`,
+                }}
+            />
+        )
+    }
diff --git a/src/lib/Components/Pane.tsx b/src/lib/Components/Pane.tsx
@@ -3,7 +3,7 @@ import { Range } from '../Model/Range';
 import { State } from '../Model/State';
 import { Borders } from '../Model/InternalModel';
 import { Highlight } from '../Model/PublicModel';
-import { CellFocus, Highlight as CellHighlight } from './CellFocus';
+import { CellFocus, CellHighlight } from './CellFocus';
 import { RowRenderer } from './RowRenderer';
 import { CellRendererProps } from './CellRenderer';
 import { isMobileDevice } from '../Functions/isMobileDevice';
@@ -62,7 +62,7 @@ function renderHighlights(state: State, range: Range) {
         try {
             const location = state.cellMatrix.getLocationById(highlight.rowId, highlight.columnId);
             return location && range.contains(location) &&
-                <CellHighlight key={id} location={location} state={state} borderColor={highlight.borderColor} isHighlight />;
+                <CellHighlight key={id} location={location} state={state} borderColor={highlight.borderColor} />;
         } catch (error) {
             console.error(`Cell location fot found while rendering highlights at: ${(error as Error).message}`);
             return null;
diff --git a/src/lib/Components/RowRenderer.tsx b/src/lib/Components/RowRenderer.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { translateLocationIdxToLookupKey } from '../Model/CellMatrix';
 import { GridRow, GridColumn, Borders, Location } from '../Model/InternalModel';
 import { State } from '../Model/State';
 import { CellRendererProps } from './CellRenderer';
@@ -26,11 +27,11 @@ const MappedColumns: React.FC<RowRendererProps> = ({ columns, row, cellRenderer,
     return (
         <>
             {columns.map(column => {
-                const location: Location = { row, column };
-                const range = state.cellMatrix.rangesToRender[state.cellMatrix.getLocationToFindRangeByIds(column.idx, row.idx)]?.range;
+                const range = state.cellMatrix.rangesToRender[translateLocationIdxToLookupKey(column.idx, row.idx)]?.range;
                 if (!range) {
                     return null;
                 }
+                const location: Location = { row, column };
                 return <CellRenderer
                     key={row.idx + '-' + column.idx}
                     borders={{
diff --git a/src/lib/Model/CellMatrix.ts b/src/lib/Model/CellMatrix.ts
@@ -66,7 +66,7 @@ export class CellMatrix<TStickyRanges extends StickyRanges = StickyRanges, TCell
             const column = this.columns[this.columnIndexLookup[columnId]];
             return this.validateLocation({ row, column });
         } catch (error) {
-            throw new EvalError(`column: '${columnId}', row: '${rowId}'`)
+            throw new RangeError(`column: '${columnId}', row: '${rowId}'`)
         }
     }
 
@@ -76,10 +76,6 @@ export class CellMatrix<TStickyRanges extends StickyRanges = StickyRanges, TCell
         return this.getLocation(rowIdx, colIdx);
     }
 
-    getLocationToFindRangeByIds(idx: number, idy: number): string {
-        return `${idx}, ${idy}`;
-    }
-
     validateRange(range: Range): Range {
         return this.getRange(this.validateLocation(range.first), this.validateLocation(range.last));
     }
@@ -89,3 +85,7 @@ export class CellMatrix<TStickyRanges extends StickyRanges = StickyRanges, TCell
     }
 
 }
+
+export function translateLocationIdxToLookupKey(idx: number, idy: number): string {
+    return `${idx}, ${idy}`;
+}
diff --git a/src/lib/Model/CellMatrixBuilder.ts b/src/lib/Model/CellMatrixBuilder.ts
@@ -1,4 +1,4 @@
-import { CellMatrix, CellMatrixProps, StickyRanges, Span } from './CellMatrix';
+import { CellMatrix, CellMatrixProps, StickyRanges, translateLocationIdxToLookupKey } from './CellMatrix';
 import { GridColumn, GridRow } from './InternalModel';
 import { Range } from './Range';
 
@@ -76,22 +76,26 @@ export class CellMatrixBuilder implements ICellMatrixBuilder {
                 const { rowspan = 0, colspan = 0 } = cell;
                 const rows = rowspan ? this.cellMatrix.rows.slice(idy, idy + rowspan) : [this.cellMatrix.rows[idy]];
                 const columns = colspan ? this.cellMatrix.columns.slice(idx, idx + colspan) : [this.cellMatrix.columns[idx]];
-                const range = new Range(rows, columns)
-                rangesToExclude = rangesToExclude.concat(this.getRangesToRender(range));
-                this.cellMatrix.spanCellLookup[this.cellMatrix.getLocationToFindRangeByIds(idx, idy)] = {
-                    range: range
-                }
+                const range = new Range(rows, columns);
+                rangesToExclude = [...rangesToExclude, ...this.getRangesToRender(range)];
+                this.cellMatrix.spanCellLookup[translateLocationIdxToLookupKey(idx, idy)] = { range };
             })
         });
-        const keys = rangesToExclude.map(range => `${range.columns[0].idx}, ${range.rows[0].idx}`);
-        Object.keys(this.cellMatrix.spanCellLookup).filter(key => !keys.includes(key)).forEach(key => this.cellMatrix.rangesToRender[key] = this.cellMatrix.spanCellLookup[key]);
+
+        // TODO try to optimize by using only lookup
+        const keys = rangesToExclude.map(range => translateLocationIdxToLookupKey(range.first.column.idx, range.first.row.idx));
+        Object
+            .keys(this.cellMatrix.spanCellLookup)
+            .forEach(key => {
+                if (!keys.includes(key)) {
+                    this.cellMatrix.rangesToRender[key] = this.cellMatrix.spanCellLookup[key]
+                }
+            });
         return this;
     }
 
     getRangesToRender(range: Range): Range[] {
-        const result = range.rows.flatMap(row => range.columns.map(column => new Range([row], [column])));
-        result.shift();
-        return result;
+        return range.rows.flatMap(row => range.columns.map(column => new Range([row], [column]))).slice(1);
     }
 
     fillSticky(edges: StickyEdges = { leftStickyColumns: 0, topStickyRows: 0 }): CellMatrixBuilder {
diff --git a/src/test/TestGrid.tsx b/src/test/TestGrid.tsx
@@ -93,8 +93,6 @@ export const TestGrid: React.FC<TestGridProps> = (props) => {
                             { value: 'angular', label: 'Angular' }
                         ], currentValue: 'react', isDisabled: false
                     }
-                // case 9: // TODO allow user to pass non focusable cell (header cell) with arrows
-                //     return { type: 'header', text: `${ri} - ${ci}` }
                 default:
                     return { type: 'text', text: `${ri} - ${ci}`, validator: (text: string): boolean => true }
             }
@@ -367,7 +365,6 @@ export const TestGridOptionsSelect: React.FC<{ isPro?: boolean }> = ({ isPro })
                 <option value='/enableResponsiveSticky'>Enable responsive sticky</option>
                 <option value='/enableResponsiveStickyPinnedToBody'>Enable responsive sticky pinned to body</option>
                 <option value='/enableSpannedCells'>Enable spanned cells</option>
-
                 {isPro && <>
                     <option value='/enableColumnAndRowSelection'>Enable column and row selection</option>
                     <option value='/enableColumnAndRowSelectionWithSticky'>Enable column and row selection with sticky</option>

Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ export class CellMatrix<TStickyRanges extends StickyRanges = StickyRanges, TCell`
`66`	`66`	`const column = this.columns[this.columnIndexLookup[columnId]];`
`67`	`67`	`return this.validateLocation({ row, column });`
`68`	`68`	`} catch (error) {`
`69`		- throw new EvalError(`column: '${columnId}', row: '${rowId}'`)
	`69`	+ throw new RangeError(`column: '${columnId}', row: '${rowId}'`)
`70`	`70`	`}`
`71`	`71`	`}`
`72`	`72`
`@@ -76,10 +76,6 @@ export class CellMatrix<TStickyRanges extends StickyRanges = StickyRanges, TCell`
`76`	`76`	`return this.getLocation(rowIdx, colIdx);`
`77`	`77`	`}`
`78`	`78`
`79`		`- getLocationToFindRangeByIds(idx: number, idy: number): string {`
`80`		- return `${idx}, ${idy}`;
`81`		`- }`
`82`		`-`
`83`	`79`	`validateRange(range: Range): Range {`
`84`	`80`	`return this.getRange(this.validateLocation(range.first), this.validateLocation(range.last));`
`85`	`81`	`}`
`@@ -89,3 +85,7 @@ export class CellMatrix<TStickyRanges extends StickyRanges = StickyRanges, TCell`
`89`	`85`	`}`
`90`	`86`
`91`	`87`	`}`
	`88`	`+`
	`89`	`+export function translateLocationIdxToLookupKey(idx: number, idy: number): string {`
	`90`	+ return `${idx}, ${idy}`;
	`91`	`+}`