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);
});