v0.7.0: + react-list

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redux-octavius",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": true,
   "description": "Боль и унижение!",
   "main": "index.js",

src/components/Letters.js

@@ -6,6 +6,7 @@ import {bindActionCreators} from 'redux';
 
 import * as selectionActions from '../actions/selection';
 
+import ReactList from 'react-list';
 import LettersItem from './LettersItem';
 
 @connect(
@@ -32,14 +33,21 @@ export default class Letters extends Component {
 		const fragment = (
 			<div className="dataset-letters">
 				<div className={classes}>
-					<div className="dataset__items">{models.map((model) => {
-						return <LettersItem
-							key={model.id}
-							model={model}
-							selected={selection[model.id]}
-							onToggleSelect={(evt) => this.handleToggleSelect(evt, model)}
-						/>
-					})}</div>
+					<ReactList
+						itemsRenderer={(items, ref) => <div ref={ref} className="dataset__items">{items}</div>}
+						itemRenderer={(idx, key) => {
+							const model = models[idx];
+
+							return <LettersItem
+								key={key}
+								model={model}
+								selected={selection[model.id]}
+								onToggleSelect={(evt) => this.handleToggleSelect(evt, model)}
+							/>
+						}}
+						length={models.length}
+						type="simple"
+					  />
 				</div>
 			</div>
 		);