max at 4, use fewer if not enough maps

This commit is contained in:
Connor Turland 2016-10-20 18:09:20 -04:00
parent b1a7e548a2
commit 103ed5cbd7

View file

@ -4,6 +4,7 @@ import MapperCard from './MapperCard'
import MapCard from './MapCard' import MapCard from './MapCard'
const MAP_WIDTH = 252 const MAP_WIDTH = 252
const MAX_COLUMNS = 4
class Maps extends Component { class Maps extends Component {
@ -17,13 +18,20 @@ class Maps extends Component {
this.resize() this.resize()
} }
componentDidUpdate() {
this.resize()
}
componentWillUnmount() { componentWillUnmount() {
window && window.removeEventListener('resize', this.resize) window && window.removeEventListener('resize', this.resize)
} }
resize = () => { resize = () => {
const { maps, user, currentUser } = this.props
const numCards = maps.length + (user || currentUser ? 1 : 0)
const mapSpaces = Math.floor(document.body.clientWidth / MAP_WIDTH) const mapSpaces = Math.floor(document.body.clientWidth / MAP_WIDTH)
this.setState({ mapsWidth: mapSpaces * MAP_WIDTH }) const mapsWidth = Math.min(MAX_COLUMNS, Math.min(numCards, mapSpaces)) * MAP_WIDTH
this.setState({ mapsWidth })
} }
render = () => { render = () => {