Skip to content

Commit 0404592

Browse files
caseywebdevcaseywebdev
committed
Add useStaticSize prop
1 parent 9b0d2c7 commit 0404592

3 files changed

Lines changed: 69 additions & 45 deletions

File tree

‎README.md‎

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

131+
##### useStaticSize (defaults to `false`)
132+
133+
Set to `true` if the item size will never change (as a result of responsive
134+
layout changing or otherwise). This prop is only used when the prop `type` is
135+
set to `uniform`. This is an opt-in optimization that will cause the very first
136+
element's size to be used for all elements for the duration of the component's
137+
life.
138+
131139
##### useTranslate3d (defaults to `false`)
132140

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

‎react-list.es6‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,28 +28,30 @@ export default class extends Component {
2828
static propTypes = {
2929
axis: PropTypes.oneOf(['x', 'y']),
3030
initialIndex: PropTypes.number,
31-
itemSizeGetter: PropTypes.func,
3231
itemRenderer: PropTypes.func,
32+
itemSizeGetter: PropTypes.func,
3333
itemsRenderer: PropTypes.func,
3434
length: PropTypes.number,
3535
pageSize: PropTypes.number,
3636
scrollParentGetter: PropTypes.func,
3737
threshold: PropTypes.number,
3838
type: PropTypes.oneOf(['simple', 'variable', 'uniform']),
39+
useStaticSize: PropTypes.bool,
3940
useTranslate3d: PropTypes.bool
4041
};
4142

4243
static defaultProps = {
4344
axis: 'y',
4445
initialIndex: null,
45-
itemSizeGetter: null,
4646
itemRenderer: (index, key) => <div key={key}>{index}</div>,
47+
itemSizeGetter: null,
4748
itemsRenderer: (items, ref) => <div ref={ref}>{items}</div>,
4849
length: 0,
4950
pageSize: 10,
5051
scrollParentGetter: null,
5152
threshold: 100,
5253
type: 'simple',
54+
useStaticSize: false,
5355
useTranslate3d: false
5456
};
5557

@@ -167,6 +169,12 @@ export default class extends Component {
167169
}
168170

169171
getItemSizeAndItemsPerRow() {
172+
const {axis, useStaticSize} = this.props;
173+
let {itemSize, itemsPerRow} = this.state;
174+
if (useStaticSize && itemSize && itemsPerRow) {
175+
return {itemSize, itemsPerRow};
176+
}
177+
170178
const itemEls = findDOMNode(this.items).children;
171179
if (!itemEls.length) return {};
172180

@@ -176,8 +184,6 @@ export default class extends Component {
176184
// thousandths of a pixel) different size for the same element between
177185
// renders. This can cause an infinite render loop, so only change the
178186
// itemSize when it is significantly different.
179-
let {itemSize} = this.state;
180-
const {axis} = this.props;
181187
const firstElSize = firstEl[OFFSET_SIZE_KEYS[axis]];
182188
const delta = Math.abs(firstElSize - itemSize);
183189
if (isNaN(delta) || delta >= 1) itemSize = firstElSize;
@@ -186,7 +192,7 @@ export default class extends Component {
186192

187193
const startKey = OFFSET_START_KEYS[axis];
188194
const firstStart = firstEl[startKey];
189-
let itemsPerRow = 1;
195+
itemsPerRow = 1;
190196
for (
191197
let item = itemEls[itemsPerRow];
192198
item && item[startKey] === firstStart;

‎react-list.js‎

Lines changed: 50 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,15 @@
6363
value: {
6464
axis: _react.PropTypes.oneOf(['x', 'y']),
6565
initialIndex: _react.PropTypes.number,
66-
itemSizeGetter: _react.PropTypes.func,
6766
itemRenderer: _react.PropTypes.func,
67+
itemSizeGetter: _react.PropTypes.func,
6868
itemsRenderer: _react.PropTypes.func,
6969
length: _react.PropTypes.number,
7070
pageSize: _react.PropTypes.number,
7171
scrollParentGetter: _react.PropTypes.func,
7272
threshold: _react.PropTypes.number,
7373
type: _react.PropTypes.oneOf(['simple', 'variable', 'uniform']),
74+
useStaticSize: _react.PropTypes.bool,
7475
useTranslate3d: _react.PropTypes.bool
7576
},
7677
enumerable: true
@@ -79,14 +80,14 @@
7980
value: {
8081
axis: 'y',
8182
initialIndex: null,
82-
itemSizeGetter: null,
8383
itemRenderer: function itemRenderer(index, key) {
8484
return _React['default'].createElement(
8585
'div',
8686
{ key: key },
8787
index
8888
);
8989
},
90+
itemSizeGetter: null,
9091
itemsRenderer: function itemsRenderer(items, ref) {
9192
return _React['default'].createElement(
9293
'div',
@@ -99,6 +100,7 @@
99100
scrollParentGetter: null,
100101
threshold: 100,
101102
type: 'simple',
103+
useStaticSize: false,
102104
useTranslate3d: false
103105
},
104106
enumerable: true
@@ -255,6 +257,17 @@
255257
}, {
256258
key: 'getItemSizeAndItemsPerRow',
257259
value: function getItemSizeAndItemsPerRow() {
260+
var _props4 = this.props;
261+
var axis = _props4.axis;
262+
var useStaticSize = _props4.useStaticSize;
263+
var _state2 = this.state;
264+
var itemSize = _state2.itemSize;
265+
var itemsPerRow = _state2.itemsPerRow;
266+
267+
if (useStaticSize && itemSize && itemsPerRow) {
268+
return { itemSize: itemSize, itemsPerRow: itemsPerRow };
269+
}
270+
258271
var itemEls = findDOMNode(this.items).children;
259272
if (!itemEls.length) return {};
260273

@@ -264,9 +277,6 @@
264277
// thousandths of a pixel) different size for the same element between
265278
// renders. This can cause an infinite render loop, so only change the
266279
// itemSize when it is significantly different.
267-
var itemSize = this.state.itemSize;
268-
var axis = this.props.axis;
269-
270280
var firstElSize = firstEl[OFFSET_SIZE_KEYS[axis]];
271281
var delta = Math.abs(firstElSize - itemSize);
272282
if (isNaN(delta) || delta >= 1) itemSize = firstElSize;
@@ -275,7 +285,7 @@
275285

276286
var startKey = OFFSET_START_KEYS[axis];
277287
var firstStart = firstEl[startKey];
278-
var itemsPerRow = 1;
288+
itemsPerRow = 1;
279289
for (var item = itemEls[itemsPerRow]; item && item[startKey] === firstStart; item = itemEls[itemsPerRow]) {
280290
++itemsPerRow;
281291
}return { itemSize: itemSize, itemsPerRow: itemsPerRow };
@@ -327,9 +337,9 @@
327337

328338
if (elEnd > end) return cb();
329339

330-
var _props4 = this.props;
331-
var pageSize = _props4.pageSize;
332-
var length = _props4.length;
340+
var _props5 = this.props;
341+
var pageSize = _props5.pageSize;
342+
var length = _props5.length;
333343

334344
this.setState({ size: Math.min(this.state.size + pageSize, length) }, cb);
335345
}
@@ -342,9 +352,9 @@
342352

343353
var start = _getStartAndEnd2.start;
344354
var end = _getStartAndEnd2.end;
345-
var _props5 = this.props;
346-
var length = _props5.length;
347-
var pageSize = _props5.pageSize;
355+
var _props6 = this.props;
356+
var length = _props6.length;
357+
var pageSize = _props6.pageSize;
348358

349359
var space = 0;
350360
var from = 0;
@@ -402,9 +412,9 @@
402412
if (cache[index] != null) return cache[index];
403413

404414
// Try the static itemSize.
405-
var _state2 = this.state;
406-
var itemSize = _state2.itemSize;
407-
var itemsPerRow = _state2.itemsPerRow;
415+
var _state3 = this.state;
416+
var itemSize = _state3.itemSize;
417+
var itemsPerRow = _state3.itemsPerRow;
408418

409419
if (itemSize) {
410420
return cache[index] = Math.floor(index / itemsPerRow) * itemSize;
@@ -442,14 +452,14 @@
442452
value: function getSizeOf(index) {
443453
var cache = this.cache;
444454
var items = this.items;
445-
var _props6 = this.props;
446-
var axis = _props6.axis;
447-
var itemSizeGetter = _props6.itemSizeGetter;
448-
var type = _props6.type;
449-
var _state3 = this.state;
450-
var from = _state3.from;
451-
var itemSize = _state3.itemSize;
452-
var size = _state3.size;
455+
var _props7 = this.props;
456+
var axis = _props7.axis;
457+
var itemSizeGetter = _props7.itemSizeGetter;
458+
var type = _props7.type;
459+
var _state4 = this.state;
460+
var from = _state4.from;
461+
var itemSize = _state4.itemSize;
462+
var size = _state4.size;
453463

454464
// Try the static itemSize.
455465
if (itemSize) return itemSize;
@@ -505,9 +515,9 @@
505515
}, {
506516
key: 'getVisibleRange',
507517
value: function getVisibleRange() {
508-
var _state4 = this.state;
509-
var from = _state4.from;
510-
var size = _state4.size;
518+
var _state5 = this.state;
519+
var from = _state5.from;
520+
var size = _state5.size;
511521

512522
var _getStartAndEnd4 = this.getStartAndEnd(0);
513523

@@ -530,12 +540,12 @@
530540
value: function renderItems() {
531541
var _this = this;
532542

533-
var _props7 = this.props;
534-
var itemRenderer = _props7.itemRenderer;
535-
var itemsRenderer = _props7.itemsRenderer;
536-
var _state5 = this.state;
537-
var from = _state5.from;
538-
var size = _state5.size;
543+
var _props8 = this.props;
544+
var itemRenderer = _props8.itemRenderer;
545+
var itemsRenderer = _props8.itemsRenderer;
546+
var _state6 = this.state;
547+
var from = _state6.from;
548+
var size = _state6.size;
539549

540550
var items = [];
541551
for (var i = 0; i < size; ++i) {
@@ -547,14 +557,14 @@
547557
}, {
548558
key: 'render',
549559
value: function render() {
550-
var _props8 = this.props;
551-
var axis = _props8.axis;
552-
var length = _props8.length;
553-
var type = _props8.type;
554-
var useTranslate3d = _props8.useTranslate3d;
555-
var _state6 = this.state;
556-
var from = _state6.from;
557-
var itemsPerRow = _state6.itemsPerRow;
560+
var _props9 = this.props;
561+
var axis = _props9.axis;
562+
var length = _props9.length;
563+
var type = _props9.type;
564+
var useTranslate3d = _props9.useTranslate3d;
565+
var _state7 = this.state;
566+
var from = _state7.from;
567+
var itemsPerRow = _state7.itemsPerRow;
558568

559569
var items = this.renderItems();
560570
if (type === 'simple') return items;

0 commit comments

Comments
 (0)