Skip to content

Commit

Permalink
Resolves #269 Restores IE10 support
Browse files Browse the repository at this point in the history
  • Loading branch information
bvaughn committed Jun 8, 2016
1 parent b3aff31 commit 01d29eb
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 13 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
Changelog
------------

##### 7.3.3
Fixed unintention regression in IE10 support introduced with `ScalingCellSizeAndPositionManager` extending `CellSizeAndPositionManager`.
Inheritance has been replaced with composition for this case in order to simplify IE10 compatibility.
Notice that Babel `babel-polyfill` is still required in order to support other ES5 features.

##### 7.3.2
Edge-case bug fix for `CellMeasurer` in the event that its `getRowHeight` or `getColumnWidth` method gets called before the initial render completes.

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"description": "React components for efficiently rendering large, scrollable lists and tabular data",
"author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
"user": "bvaughn",
"version": "7.3.2",
"version": "7.3.3",
"homepage": "https://github.com/bvaughn/react-virtualized",
"main": "dist/commonjs/index.js",
"jsnext:main": "dist/es/index.js",
Expand Down
5 changes: 2 additions & 3 deletions source/Grid/defaultCellRangeRenderer.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/** @flow */
import React from 'react'
import CellSizeAndPositionManager from './utils/CellSizeAndPositionManager'

/**
* Default implementation of cellRangeRenderer used by Grid.
Expand Down Expand Up @@ -83,11 +82,11 @@ export default function defaultCellRangeRenderer ({
type DefaultCellRangeRendererParams = {
cellCache: Object,
cellRenderer: Function,
columnSizeAndPositionManager: CellSizeAndPositionManager,
columnSizeAndPositionManager: Object,
columnStartIndex: number,
columnStopIndex: number,
isScrolling: boolean,
rowSizeAndPositionManager: CellSizeAndPositionManager,
rowSizeAndPositionManager: Object,
rowStartIndex: number,
rowStopIndex: number,
scrollLeft: number,
Expand Down
46 changes: 37 additions & 9 deletions source/Grid/utils/ScalingCellSizeAndPositionManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,32 @@ export const DEFAULT_MAX_SCROLL_SIZE = 10000000
/**
* Extends CellSizeAndPositionManager and adds scaling behavior for lists that are too large to fit within a browser's native limits.
*/
export default class ScalingCellSizeAndPositionManager extends CellSizeAndPositionManager {
export default class ScalingCellSizeAndPositionManager {
constructor ({
maxScrollSize = DEFAULT_MAX_SCROLL_SIZE,
...params
}) {
super(params)

// Favor composition over inheritance to simplify IE10 support
this._cellSizeAndPositionManager = new CellSizeAndPositionManager(params)
this._maxScrollSize = maxScrollSize
}

configure (params): void {
this._cellSizeAndPositionManager.configure(params)
}

getCellCount (): number {
return this._cellSizeAndPositionManager.getCellCount()
}

getEstimatedCellSize (): number {
return this._cellSizeAndPositionManager.getEstimatedCellSize()
}

getLastMeasuredIndex (): number {
return this._cellSizeAndPositionManager.getLastMeasuredIndex()
}

/**
* Number of pixels a cell at the given position (offset) should be shifted in order to fit within the scaled container.
* The offset passed to this function is scalled (safe) as well.
Expand All @@ -29,7 +45,7 @@ export default class ScalingCellSizeAndPositionManager extends CellSizeAndPositi
containerSize,
offset // safe
}: ContainerSizeAndOffset): number {
const totalSize = super.getTotalSize()
const totalSize = this._cellSizeAndPositionManager.getTotalSize()
const safeTotalSize = this.getTotalSize()
const offsetPercentage = this._getOffsetPercentage({
containerSize,
Expand All @@ -40,9 +56,17 @@ export default class ScalingCellSizeAndPositionManager extends CellSizeAndPositi
return Math.round(offsetPercentage * (safeTotalSize - totalSize))
}

getSizeAndPositionOfCell (index: number) {
return this._cellSizeAndPositionManager.getSizeAndPositionOfCell(index)
}

getSizeAndPositionOfLastMeasuredCell () {
return this._cellSizeAndPositionManager.getSizeAndPositionOfLastMeasuredCell()
}

/** See CellSizeAndPositionManager#getTotalSize */
getTotalSize (): number {
return Math.min(this._maxScrollSize, super.getTotalSize())
return Math.min(this._maxScrollSize, this._cellSizeAndPositionManager.getTotalSize())
}

/** See CellSizeAndPositionManager#getUpdatedOffsetForIndex */
Expand All @@ -57,7 +81,7 @@ export default class ScalingCellSizeAndPositionManager extends CellSizeAndPositi
offset: currentOffset
})

const offset = super.getUpdatedOffsetForIndex({
const offset = this._cellSizeAndPositionManager.getUpdatedOffsetForIndex({
align,
containerSize,
currentOffset,
Expand All @@ -80,12 +104,16 @@ export default class ScalingCellSizeAndPositionManager extends CellSizeAndPositi
offset
})

return super.getVisibleCellRange({
return this._cellSizeAndPositionManager.getVisibleCellRange({
containerSize,
offset
})
}

resetCell (index: number): void {
this._cellSizeAndPositionManager.resetCell(index)
}

_getOffsetPercentage ({
containerSize,
offset, // safe
Expand All @@ -100,7 +128,7 @@ export default class ScalingCellSizeAndPositionManager extends CellSizeAndPositi
containerSize,
offset // unsafe
}: ContainerSizeAndOffset): number {
const totalSize = super.getTotalSize()
const totalSize = this._cellSizeAndPositionManager.getTotalSize()
const safeTotalSize = this.getTotalSize()

if (totalSize === safeTotalSize) {
Expand All @@ -120,7 +148,7 @@ export default class ScalingCellSizeAndPositionManager extends CellSizeAndPositi
containerSize,
offset // safe
}: ContainerSizeAndOffset): number {
const totalSize = super.getTotalSize()
const totalSize = this._cellSizeAndPositionManager.getTotalSize()
const safeTotalSize = this.getTotalSize()

if (totalSize === safeTotalSize) {
Expand Down
3 changes: 3 additions & 0 deletions source/demo/Application.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// IE 10+ compatibility for demo (must come before other imports)
import 'babel-polyfill'

import ArrowKeyStepperExample from '../ArrowKeyStepper/ArrowKeyStepper.example'
import AutoSizerExample from '../AutoSizer/AutoSizer.example'
import CellMeasurerExample from '../CellMeasurer/CellMeasurer.example'
Expand Down

0 comments on commit 01d29eb

Please sign in to comment.