dantrain / react-stonecutter

Animated grid layout component for React
http://dantrain.github.io/react-stonecutter
MIT License
1.21k stars 72 forks source link

Stuck in single-column layout #15

Closed brandonmp closed 7 years ago

brandonmp commented 8 years ago

A part of my project is a layout of cards similar to the react-stonecutter example. I've tried to implement stonecutter into my cards area, but my cards render in a single column (vice a proper responsive layout).

My assumption is I'm missing some obvious setting, but I can't quite figure it out. Is there a simple reason this might be happening?

All the components involved here are either direct from Material-UI or slightly modified versions (e.g., <ListingCard> == <Card>++).

The data structures are Immutable.js, so the methods I'm using (map, filter) aren't native JS, if that matters.

import React from 'react'
import ListingCard from 'components/ListingCard'
import SelectField from 'material-ui/SelectField'
import { SpringGrid, makeResponsive } from 'react-stonecutter';

const Grid = makeResponsive(SpringGrid, { maxWidth: 1020, minPadding: 100, defaultColumns: 4 })

export class ListingsArea extends React.Component {

  render() {
    return (
      <div style={style.wrapper}>
        <div style={style.controlRow}>
          <SelectField
            floatingLabelText="Sorted by..."
            >
            {items}
          </SelectField>

        </div>
        <Grid
          columnWidth={300}
          gutterWidth={5}
          gutterHeight={5}
          itemHeight={500}
          springConfig={{ stiffness: 170, damping: 26 }}
          >

          {
            this.props.userListings
              .filter(/*filter code*/)
              .map((val, key) => {
                return <ListingCard data={val}/>
              })
          }
        </Grid>
      </div>
    )
  }
}

const style = {
  wrapper: {
    marginLeft: '25px',
  },
  controlRow: {
    width: '100%',
  }
}
dantrain commented 8 years ago

Hmm, looks ok. I haven't used Immutable.js too much but do you have to convert back to plain JS?

this.props.userListings
  .filter(/*filter code*/)
  .map((val, key) => {
    return <ListingCard data={val}/>
  })
  .toJS()

I don't know if this is needed. Otherwise perhaps try it without makeResponsive and see if that's where the problem is?