petehunt / react-gss

react-gss

constraint layout system for components using grid stylesheets

var VerticalCenter = React.createClass({
  render: function() {
    return this.transferPropsTo(
      <AutoLayout>
        <Box name="inner" height="inner[intrinsic-height]" centerY="this[centerY]">{this.props.children}</Box>
      </AutoLayout>
    );
  }
});

var App = React.createClass({
  render: function() {
    // You can prefix the props on Box with >= or <= for more control
    return (
      <AutoLayout top="window[top]" bottom="window[bottom]" left="window[left]" right="window[right]">
        <Box
          name="heading"
          left="this[left]"
          right="this[right]"
          top="this[top]"
          height="heading[intrinsic-height]">
          <h1>Heading</h1>
        </Box>
        <Box
          name="leftNav"
          right="heading[left] + 64"
          top="heading[bottom]"
          left="this[left]">
          <div>Left nav</div>
        </Box>
        <Box
          name="content"
          left="leftNav[right]"
          right="this[right]"
          top="leftNav[top]"
          bottom="this[bottom]">
          <VerticalCenter><div>Content</div></VerticalCenter>
        </Box>
      </AutoLayout>
    );
  }
});

react-gss's Issues

Invariant Violation: Unknown layout prop "ref" with react-router

Not sure yet why, but React.Children is being passed my route from react-router when going between pages. Yet, the routes are on the top level and the AutoLayout doesn't occur until further down.

Logging at the breakpoint before the error: http://cl.ly/image/0J1T1B1p031L

Happens when checking children:

React.Children.forEach(this.props.children, function(box) {
  constraints += this.getConstraintsForProps(box.props, true);
}, this);

At this line: https://github.com/petehunt/react-gss/blob/master/index.js#L127

Can be reproduced in this repo, when navigating between Home and Gallery, then back to Home: https://github.com/natew/react-base/tree/0ecca0

I'm guessing that this is really something to do with react-router and how it routes between pages using components, somehow passing the route component in as a child of a component in the viewer page. But, not exactly sure.

"this" should always be valid

Currently "this" works when an AutoLayout is the first child of a Box but not if the AutoLayout is nested further inside. This might be fine but it would be nice if "this" had the bounds of the parent element even if that element isn't being sized by Grid.

Make it easier to include in other projects

It would be nice if there was a single file (or small number of files) that could be included in an external project and export the AutoLayout and Box. That would make it easy to use this library and update it when needed without have to redo modifications.

Throw error when targets or attributes don't exist

<Box left="otherBox[right]">

In the above example, "left", "otherBox", and "right" should all be valid targets or attributes. If they aren't it would be nice to at least see a console error to make debugging easier.

GSS issue error when changing layouts

I have two react classes and depending on the window width I display one or the other. But when I change the width and cross the boundary I get the following JS error and the layout is completely broken until I refresh:

Uncaught Error: Uncaught (c.InternalError) Objective function is unbounded in optimize (http://localhost:5000/static/js/gss/worker.js:17) gss.js:22167Engine.handleError

This is what the relevant part of my render function looks like. The props passed in are all instances of other react classes.

var content;
if ($(window).width() < 500) {
  content = <NarrowPresenterApp deckMain={deckMain} slideControls={slideControls} deckPreview={deckPreview} clock={clock} />;
} else {
  content = <WidePresenterApp deckMain={deckMain} slideControls={slideControls} deckPreview={deckPreview} clock={clock} />;
}

return <SiteTemplate>{content}</SiteTemplate>

Option to hide boxes until layout is complete

It would be nice if there was an option to have boxes hidden initially and unhide them only after the layout is complete.

Historical constraints aren't correctly forgotten in some instances

In the example provided below, there are three squares at the top of the window, one of them always 2x bigger than the others. When the text inside one of the boxes is clicked on, THAT box becomes the "selected one" and hence becomes the box that is 2x in size.

Initially "square2" is the big one. However, when "square1" is selected, you'll notice it doesn't become 2x in size, even though the constraint rules enforce this. However, if you manually set the sizes of the boxes in the initial state to select "square1" (i.e. set sizes to 2,1,1 in getInitialState) it works correctly.

Intutively, it appears as if old constraints that are no longer applicable are still being enforced by the GSS engine, leading to an incorrect layout.

Given that the app operates correctly if given the right state at the beginning, but incorrectly when given the same state at a later time, it suggests some state in the DOM (or in the GSS constraint engine) is not being replaced properly by the react-gss library.

I think this points to a bug in this library- If I am wrong, please let me know my oversight.

### Substitute the text below in app.js to reproduce the issue

/** @jsx React.DOM */  

var React = require('react');  
var mq = require('react-responsive');  
var {AutoLayout, Box} = require('./index');  

var App = React.createClass({  
getInitialState: function(){  
        return ({  
            square1Size: 1,  
            square2Size: 2,  
            square3Size: 1  
        });  
    },  
  render: function() {  
    return (  
      <AutoLayout left="window.left" right="window.right" top="window.top" bottom="window.bottom">  
        <Box name="square1" height="square1.width" top="0" left="0" ><div style={{border: '1px solid black'}} onClick={this.square1Click} >Square1</div></Box>  
        <Box name="square2" height="square2.width" top="0" left="square1.right" width={"square1.width * "+(this.state.square2Size/this.state.square1Size)}><div style={{border: '1px solid black'}} onClick={this.square2Click} >Square2</div></Box>  
        <Box name="square3" height="square3.width" top="0" left="square2.right" right="this.right" width={"square2.width * "+(this.state.square3Size/this.state.square2Size)}><div style={{border: '1px solid black'}} onClick={this.square3Click} >Square3</div></Box>
      </AutoLayout>
    );
  },
  square1Click: function(evt) {
      this.setState({
          square1Size: 2,
          square2Size: 1,  
          square3Size: 1}) 
      },
  square2Click: function(evt) {
      this.setState({
          square1Size: 1,
          square2Size: 2,  
          square3Size: 1}) 
      },
  square3Click: function(evt) {
      this.setState({
          square1Size: 1,
          square2Size: 1,  
          square3Size: 2}) 
      }

});

GSS.once('afterLoaded', function() {
  React.renderComponent(<App />, document.body);
});

<AutoLayout> doesn't have intrinsic height

ffffff

    return (
      <AutoLayout>
        <Box name="test1" top="this.top + 100" height="test1.intrinsicHeight">
          <AutoLayout>
            <Box name="content" top="this.top" height="content.intrinsicHeight" width="100">
              <div>test 1</div>
            </Box>
          </AutoLayout>
        </Box>
        <Box name="test2" top="test1.bottom"><div>test 2</div></Box>
      </AutoLayout>
    );