Skip to content

Commit da71c22

Browse files
caseywebdevcaseywebdev
committed
Close #116 Merge branch 'use-static-size'
2 parents 3d92a23 + 0404592 commit da71c22

3 files changed

Lines changed: 66 additions & 42 deletions

File tree

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,14 @@ viewport ever need to be drawn. The size of the first item will be used to
137137
infer the size of every other item. Multiple items per row are also supported
138138
with this type.
139139

140+
##### useStaticSize (defaults to `false`)
141+
142+
Set to `true` if the item size will never change (as a result of responsive
143+
layout changing or otherwise). This prop is only used when the prop `type` is
144+
set to `uniform`. This is an opt-in optimization that will cause the very first
145+
element's size to be used for all elements for the duration of the component's
146+
life.
147+
140148
##### useTranslate3d (defaults to `false`)
141149

142150
A boolean to determine whether the `translate3d` CSS property should be used for

‎react-list.es6‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export default class extends Component {
3737
scrollParentGetter: PropTypes.func,
3838
threshold: PropTypes.number,
3939
type: PropTypes.oneOf(['simple', 'variable', 'uniform']),
40+
useStaticSize: PropTypes.bool,
4041
useTranslate3d: PropTypes.bool
4142
};
4243

@@ -48,6 +49,7 @@ export default class extends Component {
4849
pageSize: 10,
4950
threshold: 100,
5051
type: 'simple',
52+
useStaticSize: false,
5153
useTranslate3d: false
5254
};
5355

@@ -165,6 +167,12 @@ export default class extends Component {
165167
}
166168

167169
getItemSizeAndItemsPerRow() {
170+
const {axis, useStaticSize} = this.props;
171+
let {itemSize, itemsPerRow} = this.state;
172+
if (useStaticSize && itemSize && itemsPerRow) {
173+
return {itemSize, itemsPerRow};
174+
}
175+
168176
const itemEls = findDOMNode(this.items).children;
169177
if (!itemEls.length) return {};
170178

@@ -174,8 +182,6 @@ export default class extends Component {
174182
// thousandths of a pixel) different size for the same element between
175183
// renders. This can cause an infinite render loop, so only change the
176184
// itemSize when it is significantly different.
177-
let {itemSize} = this.state;
178-
const {axis} = this.props;
179185
const firstElSize = firstEl[OFFSET_SIZE_KEYS[axis]];
180186
const delta = Math.abs(firstElSize - itemSize);
181187
if (isNaN(delta) || delta >= 1) itemSize = firstElSize;
@@ -184,7 +190,7 @@ export default class extends Component {
184190

185191
const startKey = OFFSET_START_KEYS[axis];
186192
const firstStart = firstEl[startKey];
187-
let itemsPerRow = 1;
193+
itemsPerRow = 1;
188194
for (
189195
let item = itemEls[itemsPerRow];
190196
item && item[startKey] === firstStart;

‎react-list.js‎

Lines changed: 49 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
scrollParentGetter: _react.PropTypes.func,
7373
threshold: _react.PropTypes.number,
7474
type: _react.PropTypes.oneOf(['simple', 'variable', 'uniform']),
75+
useStaticSize: _react.PropTypes.bool,
7576
useTranslate3d: _react.PropTypes.bool
7677
},
7778
enumerable: true
@@ -97,6 +98,7 @@
9798
pageSize: 10,
9899
threshold: 100,
99100
type: 'simple',
101+
useStaticSize: false,
100102
useTranslate3d: false
101103
},
102104
enumerable: true
@@ -253,6 +255,17 @@
253255
}, {
254256
key: 'getItemSizeAndItemsPerRow',
255257
value: function getItemSizeAndItemsPerRow() {
258+
var _props4 = this.props;
259+
var axis = _props4.axis;
260+
var useStaticSize = _props4.useStaticSize;
261+
var _state2 = this.state;
262+
var itemSize = _state2.itemSize;
263+
var itemsPerRow = _state2.itemsPerRow;
264+
265+
if (useStaticSize && itemSize && itemsPerRow) {
266+
return { itemSize: itemSize, itemsPerRow: itemsPerRow };
267+
}
268+
256269
var itemEls = findDOMNode(this.items).children;
257270
if (!itemEls.length) return {};
258271

@@ -262,9 +275,6 @@
262275
// thousandths of a pixel) different size for the same element between
263276
// renders. This can cause an infinite render loop, so only change the
264277
// itemSize when it is significantly different.
265-
var itemSize = this.state.itemSize;
266-
var axis = this.props.axis;
267-
268278
var firstElSize = firstEl[OFFSET_SIZE_KEYS[axis]];
269279
var delta = Math.abs(firstElSize - itemSize);
270280
if (isNaN(delta) || delta >= 1) itemSize = firstElSize;
@@ -273,7 +283,7 @@
273283

274284
var startKey = OFFSET_START_KEYS[axis];
275285
var firstStart = firstEl[startKey];
276-
var itemsPerRow = 1;
286+
itemsPerRow = 1;
277287
for (var item = itemEls[itemsPerRow]; item && item[startKey] === firstStart; item = itemEls[itemsPerRow]) {
278288
++itemsPerRow;
279289
}return { itemSize: itemSize, itemsPerRow: itemsPerRow };
@@ -325,9 +335,9 @@
325335

326336
if (elEnd > end) return cb();
327337

328-
var _props4 = this.props;
329-
var pageSize = _props4.pageSize;
330-
var length = _props4.length;
338+
var _props5 = this.props;
339+
var pageSize = _props5.pageSize;
340+
var length = _props5.length;
331341

332342
this.setState({ size: Math.min(this.state.size + pageSize, length) }, cb);
333343
}
@@ -340,9 +350,9 @@
340350

341351
var start = _getStartAndEnd2.start;
342352
var end = _getStartAndEnd2.end;
343-
var _props5 = this.props;
344-
var length = _props5.length;
345-
var pageSize = _props5.pageSize;
353+
var _props6 = this.props;
354+
var length = _props6.length;
355+
var pageSize = _props6.pageSize;
346356

347357
var space = 0;
348358
var from = 0;
@@ -400,9 +410,9 @@
400410
if (cache[index] != null) return cache[index];
401411

402412
// Try the static itemSize.
403-
var _state2 = this.state;
404-
var itemSize = _state2.itemSize;
405-
var itemsPerRow = _state2.itemsPerRow;
413+
var _state3 = this.state;
414+
var itemSize = _state3.itemSize;
415+
var itemsPerRow = _state3.itemsPerRow;
406416

407417
if (itemSize) {
408418
return cache[index] = Math.floor(index / itemsPerRow) * itemSize;
@@ -440,15 +450,15 @@
440450
value: function getSizeOf(index) {
441451
var cache = this.cache;
442452
var items = this.items;
443-
var _props6 = this.props;
444-
var axis = _props6.axis;
445-
var itemSizeGetter = _props6.itemSizeGetter;
446-
var itemSizeEstimator = _props6.itemSizeEstimator;
447-
var type = _props6.type;
448-
var _state3 = this.state;
449-
var from = _state3.from;
450-
var itemSize = _state3.itemSize;
451-
var size = _state3.size;
453+
var _props7 = this.props;
454+
var axis = _props7.axis;
455+
var itemSizeGetter = _props7.itemSizeGetter;
456+
var itemSizeEstimator = _props7.itemSizeEstimator;
457+
var type = _props7.type;
458+
var _state4 = this.state;
459+
var from = _state4.from;
460+
var itemSize = _state4.itemSize;
461+
var size = _state4.size;
452462

453463
// Try the static itemSize.
454464
if (itemSize) return itemSize;
@@ -507,9 +517,9 @@
507517
}, {
508518
key: 'getVisibleRange',
509519
value: function getVisibleRange() {
510-
var _state4 = this.state;
511-
var from = _state4.from;
512-
var size = _state4.size;
520+
var _state5 = this.state;
521+
var from = _state5.from;
522+
var size = _state5.size;
513523

514524
var _getStartAndEnd4 = this.getStartAndEnd(0);
515525

@@ -532,12 +542,12 @@
532542
value: function renderItems() {
533543
var _this = this;
534544

535-
var _props7 = this.props;
536-
var itemRenderer = _props7.itemRenderer;
537-
var itemsRenderer = _props7.itemsRenderer;
538-
var _state5 = this.state;
539-
var from = _state5.from;
540-
var size = _state5.size;
545+
var _props8 = this.props;
546+
var itemRenderer = _props8.itemRenderer;
547+
var itemsRenderer = _props8.itemsRenderer;
548+
var _state6 = this.state;
549+
var from = _state6.from;
550+
var size = _state6.size;
541551

542552
var items = [];
543553
for (var i = 0; i < size; ++i) {
@@ -549,14 +559,14 @@
549559
}, {
550560
key: 'render',
551561
value: function render() {
552-
var _props8 = this.props;
553-
var axis = _props8.axis;
554-
var length = _props8.length;
555-
var type = _props8.type;
556-
var useTranslate3d = _props8.useTranslate3d;
557-
var _state6 = this.state;
558-
var from = _state6.from;
559-
var itemsPerRow = _state6.itemsPerRow;
562+
var _props9 = this.props;
563+
var axis = _props9.axis;
564+
var length = _props9.length;
565+
var type = _props9.type;
566+
var useTranslate3d = _props9.useTranslate3d;
567+
var _state7 = this.state;
568+
var from = _state7.from;
569+
var itemsPerRow = _state7.itemsPerRow;
560570

561571
var items = this.renderItems();
562572
if (type === 'simple') return items;

0 commit comments

Comments
 (0)