React

by Kikketer

HTML

<script src="https://unpkg.com/[email protected]/dist/umd/react-virtualized.js"></script>
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class ListManager extends React.Component {
	constructor() {
  super()
  	this.state = {items: [
      	{ id: 'a', text: "Learn JavaScript", done: false },
        { id: 'b', text: "Learn React", done: false },
        { id: 'c', text: "Play around in JSFiddle", done: true },
        { id: 'd', text: "Build something awesome", done: true }
      ]}
      this.removeItem = this.removeItem.bind(this)
  }
  
  loadMore() {
  	console.log('Asked to load more')
  	return this.state.items
  }
  
	removeItem(id) {
  	let resultingItems = this.state.items.slice()
    const popIndex = resultingItems.findIndex(i => i.id === id)
    resultingItems.splice(popIndex, 1)
  	this.setState({
    	items: resultingItems
    })
  }
  
  render() {
  return (
  	<App items={this.state.items} removeItem={this.removeItem} />
  )
  }
}

class App extends React.Component {
	constructor() {
	  super()
    this.loadedRows = []
    this.cellMeasurerCache = new ReactVirtualized.CellMeasurerCache({
      minHeight: 40,
      fixedWidth: true
    })
    
    this.listRef = React.createRef()
    
    this.rowStyles = {
    	a: {height: 50, background: 'orange'},
      b: {height: 100, background: 'blue'},
      c: {height: 150, background: 'purple'},
      d: {height: 400, background: 'lightblue'}
    }
    
    this.isRowLoaded = this.isRowLoaded.bind(this)
    this.loadMoreRows = this.loadMoreRows.bind(this)
    this.renderRow = this.renderRow.bind(this)
  }
  
  removeRow(id) {
  	return () => {
    	console.log('Removing the item: ', id)
	    this.props.removeItem(id)
    }
  }
  
  isRowLoaded({ index }) {
    return !!this.loadedRows[index]
  }

  loadMoreRows({ startIndex, stopIndex }) {
  	console.log('Loading more')
    return props.loadMore()
  }
  
  renderRow({ index, key, style, parent }) {
	  const itemId = this.props.items[index].id
  	return (
    	<ReactVirtualized.CellMeasurer cache={this.cellMeasurerCache} columnIndex={0} key={itemId} rowIndex={index} parent={parent}>
     ...