r-layout
Version:
Layout made simple. Screw CSS!
1,337 lines (1,169 loc) • 683 kB
JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
window.__debugLayout = false;
var React = __webpack_require__(11),
$__0= __webpack_require__(4),Layout=$__0.Layout,resizeMixin=$__0.resizeMixin,Spacer=$__0.Spacer,
Simple = __webpack_require__(1),
LongChild = __webpack_require__(2),
BasicLayoutTest = __webpack_require__(3);
var RefCopyTest = __webpack_require__(5),
CenterSpacerSize = __webpack_require__(6),
MatchChildTest = __webpack_require__(7),
PerformanceTest = __webpack_require__(8),
PassPropsTest = __webpack_require__(9),
AbsolutelyFreeTest = __webpack_require__(10);
var ShowcaseContainer = React.createClass({displayName: "ShowcaseContainer",
render:function() {
return (
React.createElement(Layout, React.__spread({}, this.props),
React.createElement(Layout, {size: "50px"},
React.createElement("button", {onClick: function() {return this.props.switchView("root");}.bind(this)}, "Back")
),
React.createElement(Layout, null,
this.props.show
)
)
);
}
});
var Root = React.createClass({displayName: "Root",
render:function() {
var debugTestViews;
if (this.props.showDebug) {
debugTestViews = React.createElement(Layout, null,
React.createElement("button", {onClick: function() {return this.props.switchView("refCopyTest");}.bind(this)}, "refCopyTest"), React.createElement("br", null),
React.createElement("button", {onClick: function() {return this.props.switchView("centerSpacerSize");}.bind(this)}, "centerSpacerSize"), React.createElement("br", null),
React.createElement("button", {onClick: function() {return this.props.switchView("PassPropsTest");}.bind(this)}, "PassPropsTest"), React.createElement("br", null),
React.createElement("button", {onClick: function() {return this.props.switchView("PerformanceTest");}.bind(this)}, "PerformanceTest"), React.createElement("br", null),
React.createElement("button", {onClick: function() {return this.props.switchView("MatchChildTest");}.bind(this)}, "MatchChildTest"), React.createElement("br", null),
React.createElement("button", {onClick: function() {return this.props.switchView("AbsolutelyFreeTest");}.bind(this)}, "AbsolutelyFreeTest"), React.createElement("br", null)
);
}
return (
React.createElement(Layout, React.__spread({}, this.props),
React.createElement(Layout, {size: "100px"},
React.createElement("h1", null, "Choose example:")
),
React.createElement(Layout, null,
React.createElement("button", {onClick: function() {return this.props.switchView("simple");}.bind(this)}, "Simple layout"),
"Using composed layout elements", React.createElement("br", null),
React.createElement("button", {onClick: function() {return this.props.switchView("basicTest");}.bind(this)}, "Basic test layout"),
"Only using 'Layout'", React.createElement("br", null),
React.createElement("button", {onClick: function() {return this.props.switchView("longChild");}.bind(this)}, "Long child"),
"Example with a child thats longer than the parent", React.createElement("br", null)
),
debugTestViews
)
);
}
});
var App = React.createClass({displayName: "App",
mixins: [resizeMixin],
getInitialState:function() {
return { current: "root" };
},
goBack:function() {
this.setState({ current: "root" });
},
switchView:function(view) {
this.setState({ current: view });
},
render:function() {
var show = {
root: Root,
simple: React.createElement(Simple, null),
longChild: React.createElement(LongChild, null),
basicTest: React.createElement(BasicLayoutTest, null),
refCopyTest: React.createElement(RefCopyTest, null),
centerSpacerSize: React.createElement(CenterSpacerSize, null),
PassPropsTest: React.createElement(PassPropsTest, null),
PerformanceTest: React.createElement(PerformanceTest, null),
MatchChildTest: React.createElement(MatchChildTest, null),
AbsolutelyFreeTest: React.createElement(AbsolutelyFreeTest, null),
}[this.state.current];
if (this.state.current === "root") {
show = React.createElement(Root, {switchView: this.switchView, showDebug: window.__debugLayout});
} else {
show = React.createElement(ShowcaseContainer, {switchView: this.switchView, show: show});
}
return (
/* The root instance needs a fixes height and width */
React.createElement(Layout, {calculatedWidth: window.innerWidth, calculatedHeight: window.innerHeight},
show
)
);
}
});
React.render(React.createElement(App, null), document.querySelector('body'));
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(11),
$__0= __webpack_require__(4),Layout=$__0.Layout,Center=$__0.Center,CenterHorizontal=$__0.CenterHorizontal,CenterVertical=$__0.CenterVertical;
var Simple = React.createClass({displayName: "Simple",
render:function() {
var style = function(color) {return {
background: color
};};
var outline = {
outline: "1px solid #000"
};
return (
React.createElement(Layout, React.__spread({}, this.props),
React.createElement(CenterVertical, {contentSize: "weight 2", style: style("AliceBlue")},
React.createElement(Layout, {style: outline}, "This is vertically centered!")
),
React.createElement(CenterHorizontal, {contentSize: "weight 1", style: style("Bisque")},
React.createElement(Layout, {style: outline},
React.createElement("img", {src: "https://www.google.com/images/srpr/logo11w.png"}),
"This image is horizontally centered!"
)
),
React.createElement(Center, {contentWidth: "0.25 ofParent", contentHeight: "0.25 ofParent", style: style("DarkSeaGreen")},
React.createElement(Layout, {style: outline}, "This is totally centered! check this out!")
)
)
);
}
});
module.exports = Simple;
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(11),
$__0= __webpack_require__(4),Layout=$__0.Layout;
var LongChild = React.createClass({displayName: "LongChild",
render:function() {
var outline = {
outline: "1px solid #000"
};
return (
React.createElement(Layout, React.__spread({}, this.props, {orientation: "vertical"}),
React.createElement(Layout, {size: "300px", style: outline},
"I'm 300px."
),
React.createElement(Layout, {style: outline},
"I'm 1."
),
React.createElement(Layout, {orientation: "horizontal", size: "weight 3", style: {overflowX: "auto", overflowY: "hidden"}},
React.createElement(Layout, {size: "2 ofParent", orientation: "horizontal"},
React.createElement(Layout, {style: outline}, "Page 1: I'm 3 high and half a page wide"),
React.createElement(Layout, {size: "weight 2", style: outline}, "Page 2: I'm 3 high and a whole page wide"),
React.createElement(Layout, {style: outline}, "Page 3: I'm 3 high and half a page wide")
)
),
React.createElement(Layout, {size: "0.2 ofParent", style: outline},
"I'm 0.2 ofParent."
)
)
);
}
});
module.exports = LongChild;
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(11),
$__0= __webpack_require__(4),Layout=$__0.Layout;
var BasicLayoutTest = React.createClass({displayName: "BasicLayoutTest",
render:function() {
var outline = {
outline: "1px solid #000"
};
return (
React.createElement(Layout, React.__spread({}, this.props, {orientation: "vertical"}),
React.createElement(Layout, {orientation: "horizontal", size: "weight 1"},
React.createElement(Layout, {size: "weight 1", style: outline},
"I fill the rest of the page"
),
React.createElement(Layout, {size: "500px", style: outline},
"Yo! I'm exactely 500px!"
)
),
React.createElement(Layout, {orientation: "horizontal", size: "weight 3"},
React.createElement(Layout, {size: "weight 1", style: outline},
"left"
),
React.createElement(Layout, {size: "weight 3", style: outline},
React.createElement(Layout, null, "I fill the rest!"),
React.createElement(Layout, {size: "0.3 ofParent", style: outline}, "I'm 30% of my parent!"),
React.createElement(Layout, {size: "50px"}, "I'm 50px")
),
React.createElement(Layout, {size: "weight 1", style: {overflow: "auto"}},
"Section 1.10.32 of \"de Finibus Bonorum et Malorum\", written by Cicero in 45 BC" + ' ' +
"\"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?\""
)
),
React.createElement(Layout, {size: "weight 1", style: outline},
"I'm at the bottom!"
)
)
);
}
});
module.exports = BasicLayoutTest;
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var resizeMixin = {
resize:function() {
this.forceUpdate();
},
componentDidMount:function() {
window.addEventListener('resize', this.resize);
},
componentWillUnmount:function() {
window.removeEventListener('resize', this.resize);
}
};
module.exports = {
Layout: __webpack_require__(12),
resizeMixin: resizeMixin,
Center: __webpack_require__(13),
CenterHorizontal: __webpack_require__(14),
CenterVertical: __webpack_require__(15),
Spacer: __webpack_require__(16),
};
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
// This test checks if we can use key attributes.
//
"use strict";
var React = __webpack_require__(11),
$__0= __webpack_require__(4),Layout=$__0.Layout;
var RefCopyTest = React.createClass({displayName: "RefCopyTest",
clicked:function(e) {
console.log("Should contain three objects: ");
console.log(this.refs);
console.log("e.target: ");
console.log(e.target);
console.log("should be the same as doing this.refs[ref].getDOMNode()");
},
render:function() {
return (
React.createElement(Layout, React.__spread({}, this.props),
React.createElement("div", null, React.createElement("a", {ref: "test", onClick: this.clicked}, "Click me (wraped in div)")),
React.createElement("a", {ref: "test2", onClick: this.clicked}, "Click me (not wraped)"),
React.createElement(Layout, {ref: "test3", onClick: this.clicked}, "Click me (I'm a layout and causing trouble)")
)
);
}
});
module.exports = RefCopyTest;
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(11),
$__0= __webpack_require__(4),Layout=$__0.Layout,Center=$__0.Center;
var CenterSpacerSizeTest = React.createClass({displayName: "CenterSpacerSizeTest",
render:function() {
return (
React.createElement(Center, React.__spread({}, this.props, {horizontalSpacer: "0.1 ofParent", verticalSpacer: "50px"}),
React.createElement(Layout, {style: {outline: "1px solid #000"}},
"Left and rigth of me are 0.1 ofParent," + ' ' +
"Top and bottom are 50px."
)
)
);
}
});
module.exports = CenterSpacerSizeTest;
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(11),
$__0= __webpack_require__(4),Layout=$__0.Layout;
var matchChildTest = React.createClass({displayName: "matchChildTest",
render:function() {
return (
React.createElement(Layout, React.__spread({}, this.props),
React.createElement(Layout, {size: "matchChild"},
React.createElement("div", null,
React.createElement("h1", null, " Hallo! "),
"Some text!", React.createElement("br", null),
"What about an image?",
React.createElement("img", {src: "https://www.google.com/images/srpr/logo11w.png"})
)
),
React.createElement(Layout, {size: "matchChild"},
React.createElement(Im200, null)
),
React.createElement(Layout, null,
"Fill the rest"
)
)
);
}
});
var Im200 = React.createClass({displayName: "Im200",
getDefaultProps:function() {
return { size: "200px" };
},
render:function() {
return (
React.createElement(Layout, React.__spread({}, this.props),
"This is 200px!"
)
);
}
});
module.exports = matchChildTest;
/***/ },
/* 8 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(11),
$__0= React.addons,Perf=$__0.Perf,PureRenderMixin=$__0.PureRenderMixin,
$__1= __webpack_require__(4),Layout=$__1.Layout,Center=$__1.Center;
var PerformanceTest = React.createClass({displayName: "PerformanceTest",
getInitialState:function() {
return {
rotation: 0
};
},
rotate:function() {
var newRot = (this.state.rotation > 360) ? this.state.rotation - 360 : this.state.rotation;
var anim = window.requestAnimationFrame(this.rotate);
this.setState({
rotation: newRot + 1,
anim: anim
});
},
componentDidMount:function() {
Perf.start();
window.requestAnimationFrame(this.rotate);
},
componentWillUnmount:function() {
window.cancelAnimationFrame(this.state.anim);
Perf.stop();
console.log("Inclusive Times");
Perf.printInclusive();
console.log("Exclusive Times");
Perf.printExclusive();
console.log("Wasted");
Perf.printWasted();
console.log("Dom");
Perf.printDOM();
},
render:function() {
var rotatingStyle = {
outline: "1px solid #000",
WebkitTransform: "rotateY(" + this.state.rotation + "deg)"
};
return (
React.createElement(Center, React.__spread({}, this.props, {horizontalSpacer: "0.1 ofParent", verticalSpacer: "50px"}),
React.createElement(Layout, {style: {outline: "1px solid #000"}, size: "matchChild"},
"I'm not changing and always as big as my containing test!"
),
React.createElement(Layout, {style: {outline: "1px solid #000"}},
React.createElement(Layout, {style: {outline: "1px solid #000"}},
"I'm rotating!"
),
React.createElement(Layout, {style: rotatingStyle},
"I'm rotating!"
),
React.createElement(Layout, {style: {outline: "1px solid #000"}},
"I'm rotating!"
)
),
React.createElement(Layout, {style: {outline: "1px solid #000"}, size: "0.2 ofParent"},
"I'm not changing and always 0.2 of my parent!"
)
)
);
}
});
module.exports = PerformanceTest;
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(11),
$__0= __webpack_require__(4),Layout=$__0.Layout,Center=$__0.Center;
var test = React.createClass({displayName: "test",
render:function() {
var innerStyle = {
style: {outline: "1px solid red"}
};
var outerStyle = {
outline: "1px solid green"
};
return (
React.createElement(Center, React.__spread({}, this.props, {style: outerStyle, horizontalSpacer: "0.1 ofParent", verticalSpacer: "50px", containerProps: innerStyle}),
"My container received those props: ", JSON.stringify(innerStyle)
)
);
}
});
module.exports = test;
/***/ },
/* 10 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(11),
$__0= __webpack_require__(4),Layout=$__0.Layout,Center=$__0.Center,Spacer=$__0.Spacer;
var AbsolutelyFreeTest = React.createClass({displayName: "AbsolutelyFreeTest",
render:function() {
return (
React.createElement(Layout, React.__spread({}, this.props),
React.createElement(Layout, {style: {outline: "1px solid #000"}},
"Am I still selectable?"
),
React.createElement(Layout, {orientation: "horizontal", style: {outline: "1px solid #000"}},
React.createElement(Layout, {style: {outline: "1px solid #000"}}),
React.createElement(Layout, {style: {outline: "1px solid #000"}},
"And what about me?"
),
React.createElement(Layout, {style: {outline: "1px solid #000"}}),
/* absolute */
React.createElement(Center, {absolute: true,
contentHeight: "weight 3",
contentWidth: "weight 3",
orientation: "horizontal",
style: {outline: "1px solid red"},
containerProps: {style: {outline: "1px solid green"}}},
"absolute",
React.createElement(Spacer, null),
React.createElement(Layout, {size: "30px"},
React.createElement(Layout, {size: "30px", style: {outline: "1px solid yellow"}}),
React.createElement(Spacer, null)
)
),
/* free */
React.createElement(Center, {free: true,
contentHeight: "weight 5",
contentWidth: "weight 5",
orientation: "horizontal",
style: {outline: "1px solid orange"},
containerProps: {style: {outline: "1px solid pink"}}},
"free",
React.createElement(Spacer, null),
React.createElement(Layout, {size: "30px"},
React.createElement(Layout, {size: "30px", style: {outline: "1px solid yellow"}}),
React.createElement(Spacer, null)
)
)
),
React.createElement(Layout, {style: {outline: "1px solid #000"}})
)
);
}
});
module.exports = AbsolutelyFreeTest;
/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(17);
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var React = __webpack_require__(11);
var $__0= __webpack_require__(18),toArray=$__0.toArray;
__webpack_require__(19);
// regexes for parsing the size property
var pxRegex = /((\d*\.)?\d+)px/;
var ofParentRegex = /((\d*\.)?\d+) ofParent/;
var weigthRegex = /weight ((\d*\.)?\d+)/;
var matchChildRegex = /matchChild/;
// create a combined regex, ORing each regex.
var anyOf = function(regexes) {
var res = "";
regexes.forEach(function(r) {
res += "(" + r.source + ")|";
});
return new RegExp("^(" + res.slice(0, -1) + ")$");
};
var validSizeRegex = anyOf([pxRegex, ofParentRegex, weigthRegex, matchChildRegex]);
// tries to get the encoded number with a regex, returns 0 if that fails.
var parseNum = function(string, regex) {
var res = regex.exec(string);
return (res) ? parseFloat(res[1]) : 0;
};
var Layout = React.createClass({displayName: "Layout",
propTypes: {
orientation:function(props, propName, componentName) {
if (!/^((vertical)|(horizontal))$/.test(props[propName])) {
return new Error('Orientation needs to be either "vertical" or "horizontal"');
}
},
size:function(props, propName, componentName) {
if ( !validSizeRegex.test(props[propName]) ) {
return new Error('"size" needs to be either: "matchChild", "weight 42", "42px" or "0.42 ofParent"');
}
}
},
getDefaultProps:function() {
return {
orientation: "vertical",
size: "weight 1"
};
},
getInitialState:function() {
return {
childSizes: []
};
},
componentDidMount:function() {
var childIndexes = toArray(this.props.children).map(function(c, i) {
if (c && c.props && matchChildRegex.test(c.props.size)){
return i;
}
return -1;
}).filter(function(i) {return i !== -1;});
if (childIndexes.length > 0) {
var node = this.getDOMNode();
var orientation = (this.props.orientation === "vertical") ? "offsetHeight" : "offsetWidth";
var childSizes = childIndexes.map(function(i) {
var test = node.children[i];
var size = test[orientation];
if (size === 0) {
if (test.children.length > 0) {
return test.children[0][orientation];
}
return 0;
}
return size;
});
var map = {};
for(var j = 0; j < childIndexes.length; j += 1) {
map[childIndexes[j]] = childSizes[j];
}
this.setState({ childSizes: map });
}
},
render:function() {
// break if the 'break' is set, useful for debugging.
if (this.props.break) {
debugger;
}
var orientation = this.props.orientation,
width = this.props.calculatedWidth,
height = this.props.calculatedHeight,
left = this.props.calculatedLeft || 0,
top = this.props.calculatedTop || 0;
var isVertical = orientation === "vertical";
var parentSize = (isVertical) ? height : width;
var children = toArray(this.props.children);
var getPixelSize = function(size) {
return parseNum(size, pxRegex);
};
var getOfParentSize = function(size) {
return parseNum(size, ofParentRegex) * parentSize;
};
var getWeigth = function(size) {
return parseNum(size || "weight 1", weigthRegex);
};
var getMatchChildSize = function(child, i, s) {
if (!matchChildRegex.test(s)) {
return 0;
}
if (this.state && this.state.childSizes){
return this.state.childSizes[i];
}
return 0;
}.bind(this);
var oneOf = function(fns, string) {
for (var i=0; i < fns.length; i++) {
var res = fns[i](string);
if (res > 0) {
return res;
}
}
return 0;
};
var weightIndexes = [], pxIndexes = [];
var finalSizes = children.map(function(c, i) {
if (React.isValidElement(c)) {
if (c.props.absolute || c.props.free) {
// absolute or free layout elements take up no space
return 0;
}
var size = c.props.size;
var px = oneOf([getPixelSize, getOfParentSize, function(s) {return getMatchChildSize(c, i, s);}], size);
if (px !== 0) {
pxIndexes.push(i);
return px;
} else {
weightIndexes.push(i);
return getWeigth(size);
}
}
return 0;
});
var totalWeight = weightIndexes.reduce(function(acc, i) {return acc + finalSizes[i];}, 0);
var totalSizePx = pxIndexes.reduce(function(acc, i) {return acc + finalSizes[i];}, 0);
var unitSize = (totalWeight === 0) ? 0 : Math.max((parentSize - totalSizePx) / totalWeight, 0);
weightIndexes.forEach(function(i) {
finalSizes[i] *= unitSize;
});
var currentPosition = 0;
var childComponents = children.map(function(c, i) {
if (React.isValidElement(c)) {
var size = finalSizes[i];
var childW = width;//(isVertical) ? width : size;
var childH = height;//(isVertical) ? size : height;
var isntFree = !c.props.absolute && !c.props.free;
var newTop = 0;
var newLeft = 0;
if (isntFree) {
if (isVertical) {
childH = size;
newTop = currentPosition;
} else {
childW = size;
newLeft = currentPosition;
}
} if (c.props.free) {
childH = window.innerHeight;
childW = window.innerWidth;
}
var newProps = {
calculatedWidth: childW,
calculatedHeight: childH,
calculatedTop: newTop,
calculatedLeft: newLeft,
key: c.props.key || i,
};
currentPosition += size;
var debug = c.props.debug || this.props.debug,
ref = c.ref;
if (debug) {
newProps.debug = debug;
} if (ref) {
// TODO: Figure out how to preserve ref.
// Waiting for this might be the only solution:
// https://github.com/facebook/react/issues/1373
// In the meanwhile, return the original and hope that nobody passes a ref to a Layout tag...
return c;
}
return React.addons.cloneWithProps(c, newProps);
}
return c;
}.bind(this));
var isMatchChild = matchChildRegex.test(this.props.size);
var layoutStyle = {
width: (isMatchChild && width === 0) ? undefined : width+"px",
height: (isMatchChild && height === 0) ? undefined : height+"px",
top: top+"px",
left: left+"px",
position: this.props.free ? "fixed" : "absolute"
};
if (this.props.debug) {
var randByte = function() {return Math.floor(Math.random()*256);};
var debugColor = "rgba("+randByte()+","+randByte()+","+randByte()+",0.2)";
layoutStyle.background = debugColor;
}
var combinedStyle = Object.assign(layoutStyle, this.props.style);
if (this.props.dontRender) {
return null;
}
return (
React.createElement("div", React.__spread({}, this.props, {style: combinedStyle}),
childComponents
)
);
}
});
module.exports = Layout;
/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var React = __webpack_require__(11);
var CenterHorizontal = __webpack_require__(14);
var CenterVertical = __webpack_require__(15);
var Center = React.createClass({displayName: "Center",
getDefaultProps:function() {
return {
contentWidth: "weight 1",
contentHeight: "weight 1",
verticalSpacer: "weight 1",
horizontalSpacer: "weight 1",
};
},
render:function() {
var $__0= this.props,containerProps=$__0.containerProps,orientation=$__0.orientation,otherProps=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{containerProps:1,orientation:1});
return (
React.createElement(CenterVertical, React.__spread({}, otherProps, {contentSize: this.props.contentHeight, spacerSize: this.props.verticalSpacer}),
React.createElement(CenterHorizontal, {contentSize: this.props.contentWidth,
spacerSize: this.props.horizontalSpacer,
orientation: orientation,
containerProps: containerProps},
this.props.children
)
)
);
}
});
module.exports = Center;
/***/ },
/* 14 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var React = __webpack_require__(11);
var Layout = __webpack_require__(12);
var Spacer = __webpack_require__(16);
var CenterHorizontal = React.createClass({displayName: "CenterHorizontal",
getDefaultProps:function() {
return {
contentSize: "weight 1",
spacerSize: "weight 1",
};
},
render:function() {
var $__0= this.props,containerProps=$__0.containerProps,orientation=$__0.orientation,otherProps=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{containerProps:1,orientation:1});
return (
React.createElement(Layout, React.__spread({}, otherProps, {orientation: "horizontal"}),
React.createElement(Spacer, {size: this.props.spacerSize}),
React.createElement(Layout, React.__spread({}, containerProps, {orientation: orientation, size: this.props.contentSize}),
this.props.children
),
React.createElement(Spacer, {size: this.props.spacerSize})
)
);
}
});
module.exports = CenterHorizontal;
/***/ },
/* 15 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var React = __webpack_require__(11);
var Layout = __webpack_require__(12);
var Spacer = __webpack_require__(16);
var CenterVertical = React.createClass({displayName: "CenterVertical",
getDefaultProps:function() {
return {
contentSize: "weight 1",
spacerSize: "weight 1",
};
},
render:function() {
var $__0= this.props,containerProps=$__0.containerProps,orientation=$__0.orientation,otherProps=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{containerProps:1,orientation:1});
return (
React.createElement(Layout, React.__spread({}, otherProps, {orientation: "vertical"}),
React.createElement(Spacer, {size: this.props.spacerSize}),
React.createElement(Layout, React.__spread({}, containerProps, {orientation: orientation, size: this.props.contentSize}),
this.props.children
),
React.createElement(Spacer, {size: this.props.spacerSize})
)
);
}
});
module.exports = CenterVertical;
/***/ },
/* 16 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var React = __webpack_require__(11);
var Layout = __webpack_require__(12);
var Spacer = React.createClass({displayName: "Spacer",
getDefaultProps:function() {
return { size: "weight 1" };
},
render:function() {
var $__0= this.props,children=$__0.children,newProps=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{children:1});
return (
React.createElement(Layout, React.__spread({}, newProps, {dontRender: true}))
);
}
});
module.exports = Spacer;
/***/ },
/* 17 */
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright 2013-2014, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactWithAddons
*/
/**
* This module exists purely in the open source project, and is meant as a way
* to create a separate standalone build of React. This build has "addons", or
* functionality we've built and think might be useful but doesn't have a good
* place to live inside React core.
*/
"use strict";
var LinkedStateMixin = __webpack_require__(20);
var React = __webpack_require__(21);
var ReactComponentWithPureRenderMixin =
__webpack_require__(22);
var ReactCSSTransitionGroup = __webpack_require__(23);
var ReactTransitionGroup = __webpack_require__(24);
var ReactUpdates = __webpack_require__(25);
var cx = __webpack_require__(26);
var cloneWithProps = __webpack_require__(27);
var update = __webpack_require__(28);
React.addons = {
CSSTransitionGroup: ReactCSSTransitionGroup,
LinkedStateMixin: LinkedStateMixin,
PureRenderMixin: ReactComponentWithPureRenderMixin,
TransitionGroup: ReactTransitionGroup,
batchedUpdates: ReactUpdates.batchedUpdates,
classSet: cx,
cloneWithProps: cloneWithProps,
update: update
};
if ("production" !== process.env.NODE_ENV) {
React.addons.Perf = __webpack_require__(29);
React.addons.TestUtils = __webpack_require__(30);
}
module.exports = React;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(31)))
/***/ },
/* 18 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
module.exports = {
toArray: function(children) {
var childs = children;
if (!Array.isArray(children)) {
childs = [children];
}
return childs;
}
};
/***/ },
/* 19 */
/***/ function(module, exports, __webpack_require__) {
// object.assign polyfill from
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
if (!Object.assign) {
Object.defineProperty(Object, "assign", {
enumerable: false,
configurable: true,
writable: true,
value: function(target, firstSource) {
if (target === undefined || target === null) {
throw new TypeError("Cannot convert first argument to object");
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) { continue; }
var keysArray = Object.keys(Object(nextSource));
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) { to[nextKey] = nextSource[nextKey]; }
}
}
return to;
}
});
}
module.exports = {};
/***/ },
/* 20 */
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2013-2014, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule LinkedStateMixin
* @typechecks static-only
*/
"use strict";
var ReactLink = __webpack_require__(56);
var ReactStateSetters = __webpack_require__(57);
/**
* A simple mixin around ReactLink.forState().
*/
var LinkedStateMixin = {
/**
* Create a ReactLink that's linked to part of this component's state. The
* ReactLink will have the current value of this.state[key] and will call
* setState() when a change is requested.
*
* @param {string} key state key to update. Note: you may want to use keyOf()
* if you're using Google Closure Compiler advanced mode.
* @return {ReactLink} ReactLink instance linking to the state.
*/
linkState: function(key) {
return new ReactLink(
this.state[key],
ReactStateSetters.createStateKeySetter(this, key)
);
}
};
module.exports = LinkedStateMixin;
/***/ },
/* 21 */
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright 2013-2014, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule React
*/
"use strict";
var DOMPropertyOperations = __webpack_require__(32);
var EventPluginUtils = __webpack_require__(33);
var ReactChildren = __webpack_require__(34);
var ReactComponent = __webpack_require__(35);
var ReactCompositeComponent = __webpack_require__(36);
var ReactContext = __webpack_require__(37);
var ReactCurrentOwner = __webpack_require__(38);
var ReactElement = __webpack_require__(39);
var ReactElementValidator = __webpack_require__(40);
var ReactDOM = __webpack_require__(41);
var ReactDOMComponent = __webpack_require__(42);
var ReactDefaultInjection = __webpack_require__(43);
var ReactInstanceHandles = __webpack_require__(44);
var ReactLegacyElement = __webpack_require__(45);
var ReactMount = __webpack_require__(46);
var ReactMultiChild = __webpack_require__(47);
var ReactPerf = __webpack_require__(48);
var ReactPropTypes = __webpack_require__(49);
var ReactServerRendering = __webpack_require__(50);
var ReactTextComponent = __webpack_require__(51);
var assign = __webpack_require__(52);
var deprecated = __webpack_require__(53);
var onlyChild = __webpack_require__(54);
ReactDefaultInjection.inject();
var createElement = ReactElement.createElement;
var createFactory = ReactElement.createFactory;
if ("production" !== process.env.NODE_ENV) {
createElement = ReactElementValidator.createElement;
createFactory = ReactElementValidator.createFactory;
}
// TODO: Drop legacy elements once classes no longer export these factories
createElement = ReactLegacyElement.wrapCreateElement(
createElement
);
createFactory = ReactLegacyElement.wrapCreateFactory(
createFactory
);
var render = ReactPerf.measure('React', 'render', ReactMount.render);
var React = {
Children: {
map: ReactChildren.map,
forEach: ReactChildren.forEach,
count: ReactChildren.count,
only: onlyChild
},
DOM: ReactDOM,
PropTypes: ReactPropTypes,
initializeTouchEvents: function(shouldUseTouch) {
EventPluginUtils.useTouchEvents = shouldUseTouch;
},
createClass: ReactCompositeComponent.createClass,
createElement: createElement,
createFactory: createFactory,
constructAndRenderComponent: ReactMount.constructAndRenderComponent,
constructAndRenderComponentByID: ReactMount.constructAndRenderComponentByID,
render: render,
renderToString: ReactServerRendering.renderToString,
renderToStaticMarkup: ReactServerRendering.renderToStaticMarkup,
unmountComponentAtNode: ReactMount.unmountComponentAtNode,
isValidClass: ReactLegacyElement.isValidClass,
isValidElement: ReactElement.isValidElement,
withContext: ReactContext.withContext,
// Hook for JSX spread, don't use this for anything else.
__spread: assign,
// Deprecations (remove for 0.13)
renderComponent: deprecated(
'React',
'renderComponent',
'render',
this,
render
),
renderComponentToString: deprecated(
'React',
'renderComponentToString',
'renderToString',
this,
ReactServerRendering.renderToString
),
renderComponentToStaticMarkup: deprecated(
'React',
'renderComponentToStaticMarkup',
'renderToStaticMarkup',
this,
ReactServerRendering.renderToStaticMarkup
),
isValidComponent: deprecated(
'React',
'isValidComponent',
'isValidElement',
this,
ReactElement.isValidElement
)
};
// Inject the runtime into a devtools global hook regardless of browser.
// Allows for debugging when the hook is injected on the page.
if (
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject === 'function') {
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject({
Component: ReactComponent,
CurrentOwner: ReactCurrentOwner,
DOMComponent: ReactDOMComponent,
DOMPropertyOperations: DOMPropertyOperations,
InstanceHandles: ReactInstanceHandles,
Mount: ReactMount,
MultiChild: ReactMultiChild,
TextComponent: ReactTextComponent
});
}
if ("production" !== process.env.NODE_ENV) {
var ExecutionEnvironment = __webpack_require__(55);
if (ExecutionEnvironment.canUseDOM && window.top === window.self) {
// If we're in Chrome, look for the devtools marker and provide a download
// link if not installed.
if (navigator.userAgent.indexOf('Chrome') > -1) {
if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
console.debug(
'Download the React DevTools for a better development experience: ' +
'http://fb.me/react-devtools'
);
}
}
var expectedFeatures = [
// shims
Array.isArray,
Array.prototype.every,
Array.prototype.forEach,
Array.prototype.indexOf,
Array.prototype.map,
Date.now,
Function.prototype.bind,
Object.keys,
String.prototype.split,
String.prototype.trim,
// shams
Object.create,
Object.freeze
];
for (var i = 0; i < expectedFeatures.length; i++) {
if (!expectedFeatures[i]) {
console.error(
'One or more ES5 shim/shams expected by React are not available: ' +
'http://fb.me/react-warning-polyfills'
);
break;
}
}
}
}
// Version exists only in the open-source version of React, not in Facebook's
// internal version.
React.version = '0.12.2';
module.exports = React;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(31)))
/***/ },
/* 22 */
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2013-2014, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactComponentWithPureRenderMixin
*/
"use strict";
var shallowEqual = __webpack_require__(58);
/**
* If your React component's render function is "pure", e.g. it will render the
* same result given the same props and state, provide this Mixin for a
* considerable performance boost.
*
* Most React components have pure render functions.
*
* Example:
*
* var ReactComponentWithPureRenderMixin =
* require('ReactComponentWithPureRenderMixin');
* React.createClass({
* mixins: [ReactComponentWithPureRenderMixin],
*
* render: function() {
* return <div className={this.props.className}>foo</div>;
* }
* });
*
* Note: This only checks shallow equality for props and state. If these contain
* complex data structures this mixin may have false-negatives for deeper
* differences. Only mixin to components which have simple props and state, or
* use `forceUpdate()` when you know deep data structures have changed.
*/
var ReactComponentWithPureRenderMixin = {
shouldComponentUpdate: function(nextProps, nextState) {
return !shallowEqual(this.props, nextProps) ||
!shallowEqual(this.state, nextState);
}
};
module.exports = ReactComponentWithPureRenderMixin;
/***/ },
/* 23 */
/***/ function(module, exports, _