r-layout
Version:
Layout made simple. Screw CSS!
1,502 lines (1,301 loc) • 664 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";
var React = __webpack_require__(11),
$__0= __webpack_require__(4),Layout=$__0.Layout,resizeMixin=$__0.resizeMixin;
var color = function(c) {return { backgroundColor: c};};
var App = React.createClass({displayName: "App",
render:function() {
return (
/*{...this.props} makes sure that the <App> component behaves just like a Layout component.*/
React.createElement(Layout, React.__spread({}, this.props, {orientation: "horizontal", style: {outline: "1px #000 solid"}}),
React.createElement(Layout, {size: "weight 2", style: color("#D6E6FF")},
"I'm on the left, 2/7 of the remaining space wide."
),
React.createElement(Layout, {size: "weight 5", style: color("lightBlue")},
"I'm in the center, taking 5/7 of the remaining space."
),
React.createElement(Layout, {size: "60px", style: color("#4EC8CF")},
"I'm on the right, 60px wide."
)
)
);
}
});
var Root = React.createClass({displayName: "Root",
mixins: [resizeMixin],
render:function() {
return (
/* The root instance needs a fixes height and width */
React.createElement(Layout, {calculatedWidth: window.innerWidth, calculatedHeight: window.innerHeight},
React.createElement(Layout, {style: color("#FFEFD6")},
"Header, fills the remaining space."
),
/* Notice that we can control the size of the <App> component just the same as any other Layout */
React.createElement(App, {size: "0.7 ofParent"}),
React.createElement(Layout, {size: "50px", style: color("#FFEFD6")},
"Footer, fixed height of 50px."
)
)
);
}
});
React.render(React.createElement(Root, null), document.querySelector('body'));
/***/ },
/* 1 */,
/* 2 */,
/* 3 */,
/* 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 */,
/* 6 */,
/* 7 */,
/* 8 */,
/* 9 */,
/* 10 */,
/* 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, __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.
*
* @typechecks
* @providesModule ReactCSSTransitionGroup
*/
"use strict";
var React = __webpack_require__(21);
var assign = __webpack_require__(52);
var ReactTransitionGroup = React.createFactory(
__webpack_require__(24)
);
var ReactCSSTransitionGroupChild = React.createFactory(
__webpack_require__(59)
);
var ReactCSSTransitionGroup = React.createClass({
displayName: 'ReactCSSTransitionGroup',
propTypes: {
transitionName: React.PropTypes.string.isRequired,
transitionEnter: React.PropTypes.bool,
transitionLeave: React.PropTypes.bool
},
getDefaultProps: function() {
return {
transitionEnter: true,
transitionLeave: true
};
},
_wrapChild: function(child) {
// We need to provide this childFactory so that
// ReactCSSTransitionGroupChild can receive updates to name, enter, and
// leave while it is leaving.
return ReactCSSTransitionGroupChild(
{
name: this.props.transitionName,
enter: this.props.transitionEnter,
leave: this.props.transitionLeave
},
child
);
},
render: function() {
return (
ReactTransitionGroup(
assign({}, this.props, {childFactory: this._wrapChild})
)
);
}
});
module.exports = ReactCSSTransitionGroup;
/***/ },
/* 24 */
/***/ 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 ReactTransitionGroup
*/
"use strict";
var React = __webpack_require__(21);
var ReactTransitionChildMapping = __webpack_require__(60);
var assign = __webpack_require__(52);
var cloneWithProps = __webpack_require__(27);
var emptyFunction = __webpack_require__(61);
var ReactTransitionGroup = React.createClass({
displayName: 'ReactTransitionGroup',
propTypes: {
component: React.PropTypes.any,
childFactory: React.PropTypes.func
},
getDefaultProps: function() {
return {
component: 'span',
childFactory: emptyFunction.thatReturnsArgument
};
},
getInitialState: function() {
return {
children: ReactTransitionChildMapping.getChildMapping(this.props.children)
};
},
componentWillReceiveProps: function(nextProps) {
var nextChildMapping = ReactTransitionChildMapping.getChildMapping(
nextProps.children
);
var prevChildMapping = this.state.children;
this.setState({
children: ReactTransitionChildMapping.mergeChildMappings(
prevChildMapping,
nextChildMapping
)
});
var key;
for (key in nextChildMapping) {
var hasPrev = prevChildMapping && prevChildMapping.hasOwnProperty(key);
if (nextChildMapping[key] && !hasPrev &&
!this.currentlyTransitioningKeys[key]) {
this.keysToEnter.push(key);
}
}
for (key in prevChildMapping) {
var hasNext = nextChildMapping && nextChildMapping.hasOwnProperty(key);
if (prevChildMapping[key] && !hasNext &&
!this.currentlyTransitioningKeys[key]) {
this.keysToLeave.push(key);
}
}
// If we want to someday check for reordering, we could do it here.
},
componentWillMount: function() {
this.currentlyTransitioningKeys = {};
this.keysToEnter = [];
this.keysToLeave = [];
},
componentDidUpdate: function() {
var keysToEnter = this.keysToEnter;
this.keysToEnter = [];
keysToEnter.forEach(this.performEnter);
var keysToLeave = this.keysToLeave;
this.keysToLeave = [];
keysToLeave.forEach(this.performLeave);
},
performEnter: function(key) {
this.currentlyTransitioningKeys[key] = true;
var component = this.refs[key];
if (component.componentWillEnter) {
component.componentWillEnter(
this._handleDoneEntering.bind(this, key)
);
} else {
this._handleDoneEntering(key);
}
},
_handleDoneEntering: function(key) {
var component = this.refs[key];
if (component.componentDidEnter) {
component.componentDidEnter();
}
delete this.currentlyTransitioningKeys[key];
var currentChildMapping = ReactTransitionChildMapping.getChildMapping(
this.props.children
);
if (!currentChildMapping || !currentChildMapping.hasOwnProperty(key)) {
// This was removed before it had fully entered. Remove it.
this.performLeave(key);
}
},
performLeave: function(key) {
this.currentlyTransitioningKeys[key] = true;
var component = this.refs[key];
if (component.componentWillLeave) {
component.componentWillLeave(this._handleDoneLeaving.bind(this, key));
} else {
// Note that this is somewhat dangerous b/c it calls setState()
// again, effectively mutating the component before all the work
// is done.
this._handleDoneLeaving(key);
}
},
_handleDoneLeaving: function(key) {
var component = this.refs[key];
if (component.componentDidLeave) {
component.componentDidLeave();
}
delete this.currentlyTransitioningKeys[key];
var currentChildMapping = ReactTransitionChildMapping.getChildMapping(
this.props.children
);
if (currentChildMapping && currentChildMapping.hasOwnProperty(key)) {
// This entered again before it fully left. Add it again.
this.performEnter(key);
} else {
var newChildren = assign({}, this.state.children);
delete newChildren[key];
this.setState({children: newChildren});
}
},
render: function() {
// TODO: we could get rid of the need for the wrapper node
// by cloning a single child
var childrenToRender = {};
for (var key in this.state.children) {
var child = this.state.children[key];
if (child) {
// You may need to apply reactive updates to a child as it is leaving.
// The normal React way to do it won't work since the child will have
// already been removed. In case you need this behavior you can provide
// a childFactory function to wrap every child, even the ones that are
// leaving.
childrenToRender[key] = cloneWithProps(
this.props.childFactory(child),
{ref: key}
);
}
}
return React.createElement(
this.props.component,
this.props,
childrenToRender
);
}
});
module.exports = ReactTransitionGroup;
/***/ },
/* 25 */
/***/ 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 ReactUpdates
*/
"use strict";
var CallbackQueue = __webpack_require__(62);
var PooledClass = __webpack_require__(63);
var ReactCurrentOwner = __webpack_require__(38);
var ReactPerf = __webpack_require__(48);
var Transaction = __webpack_require__(64);
var assign = __webpack_require__(52);
var invariant = __webpack_require__(65);
var warning = __webpack_require__(66);
var dirtyComponents = [];
var asapCallbackQueue = CallbackQueue.getPooled();
var asapEnqueued = false;
var batchingStrategy = null;
function ensureInjected() {
("production" !== process.env.NODE_ENV ? invariant(
ReactUpdates.ReactReconcileTransaction && batchingStrategy,
'ReactUpdates: must inject a reconcile transaction class and batching ' +
'strategy'
) : invariant(ReactUpdates.ReactReconcileTransaction && batchingStrategy));
}
var NESTED_UPDATES = {
initialize: function() {
this.dirtyComponentsLength = dirtyComponents.length;
},
close: function() {
if (this.dirtyComponentsLength !== dirtyComponents.length) {
// Additional updates were enqueued by componentDidUpdate handlers or
// similar; before our own UPDATE_QUEUEING wrapper closes, we want to run
// these new updates so that if A's componentDidUpdate calls setState on
// B, B will update before the callback A's updater provided when calling
// setState.
dirtyComponents.splice(0, this.dirtyComponentsLength);
flushBatchedUpdates();
} else {
dirtyComponents.length = 0;
}
}
};
var UPDATE_QUEUEING = {
initialize: function() {
this.callbackQueue.reset();
},
close: function() {
this.callbackQueue.notifyAll();
}
};
var TRANSACTION_WRAPPERS = [NESTED_UPDATES, UPDATE_QUEUEING];
function ReactUpdatesFlushTransaction() {
this.reinitializeTransaction();
this.dirtyComponentsLength = null;
this.callbackQueue = CallbackQueue.getPooled();
this.reconcileTransaction =
ReactUpdates.ReactReconcileTransaction.getPooled();
}
assign(
ReactUpdatesFlushTransaction.prototype,
Transaction.Mixin, {
getTransactionWrappers: function() {
return TRANSACTION_WRAPPERS;
},
destructor: function() {
this.dirtyComponentsLength = null;
CallbackQueue.release(this.callbackQueue);
this.callbackQueue = null;
ReactUpdates.ReactReconcileTransaction.release(this.reconcileTransaction);
this.reconcileTransaction = null;
},
perform: function(method, scope, a) {
// Essentially calls `this.reconcileTransaction.perform(method, scope, a)`
// with this transaction's wrappers around it.
return Transaction.Mixin.perform.call(
this,
this.reconcileTransaction.perform,
this.reconcileTransaction,
method,
scope,
a
);
}
});
PooledClass.addPoolingTo(ReactUpdatesFlushTransaction);
function batchedUpdates(callback, a, b) {
ensureInjected();
batchingStrategy.batchedUpdates(callback, a, b);
}
/**
* Array comparator for ReactComponents by owner depth
*
* @param {ReactComponent} c1 first component you're comparing
* @param {ReactComponent} c2 second component you're comparing
* @return {number} Return value usable by Array.prototype.sort().
*/
function mountDepthComparator(c1, c2) {
return c1._mountDepth - c2._mountDepth;
}
function runBatchedUpdates(transaction) {
var len = transaction.dirtyComponentsLength;
("production" !== process.env.NODE_ENV ? invariant(
len === dirtyComponents.length,
'Expected flush transaction\'s stored dirty-components length (%s) to ' +
'match dirty-components array length (%s).',
len,
dirtyComponents.length
) : invariant(len === dirtyComponents.length));
// Since reconciling a component higher in the owner hierarchy usually (not
// always -- see shouldComponentUpdate()) will reconcile children, reconcile
// them before their children by sorting the array.
dirtyComponents.sort(mountDepthComparator);
for (var i = 0; i < len; i++) {
// If a component is unmounted before pending changes apply, ignore them
// TODO: Queue unmounts in the same list to avoid this happening at all
var component = dirtyComponents[i];
if (component.isMounted()) {
// If performUpdateIfNecessary happens to enqueue any new updates, we
// shouldn't execute the callbacks until the next render happens, so
// stash the callbacks first
var callbacks = component._pendingCallbacks;
component._pendingCallbacks = null;
component.performUpdateIfNecessary(transaction.reconcileTransaction);
if (callbacks) {
for (var j = 0; j < callbacks.length; j++) {
transaction.callbackQueue.enqueue(
callbacks[j],
component
);
}
}
}
}
}
var flushBatchedUpdates = ReactPerf.measure(
'ReactUpdates',
'flushBatchedUpdates',
function() {
// ReactUpdatesFlushTransaction's wrappers will clear the dirtyComponents
// array and perform any updates enqueued by mount-ready handlers (i.e.,
// componentDidUpdate) but we need to check here too in order to catch
// updates enqueued by setState callbacks and asap calls.
while (dirtyComponents.length || asapEnqueued) {
if (dirtyComponents.length) {
var transaction = ReactUpdatesFlushTransaction.getPooled();
transaction.perform(runBatchedUpdates, null, transaction);
ReactUpdatesFlushTransaction.release(transaction);
}
if (asapEnqueued) {
asapEnqueued = false;
var queue = asapCallbackQueue;
asapCallbackQueue = CallbackQueue.getPooled();
queue.notifyAll();
CallbackQueue.release(queue);
}
}
}
);
/**
* Mark a component as needing a rerender, adding an optional callback to a
* list of functions which will be executed once the rerender occurs.
*/
function enqueueUpdate(component, callback) {
("production" !== process.env.NODE_ENV ? invariant(
!callback || typeof callback === "function",
'enqueueUpdate(...): You called `setProps`, `replaceProps`, ' +
'`setState`, `replaceState`, or `forceUpdate` with a callback that ' +
'isn\'t callable.'
) : invariant(!callback || typeof callback === "function"));
ensureInjected();
// Various parts of our code (such as ReactCompositeComponent's
// _renderValidatedComponent) assume that calls to render aren't nested;
// verify that that's the case. (This is called by each top-level update
// function, like setProps, setState, forceUpdate, etc.; creation and
// destruction of top-level components is guarded in ReactMount.)
("production" !== process.env.NODE_ENV ? warning(
ReactCurrentOwner.current == null,
'enqueueUpdate(): Render methods should be a pure function of props ' +
'and state; triggering nested component updates from render is not ' +
'allowed. If necessary, trigger nested updates in ' +
'componentDidUpdate.'
) : null);
if (!batchingStrategy.isBatchingUpdates) {
batchingStrategy.batchedUpdates(enqueueUpdate, component, callback);
return;
}
dirtyComponents.push(component);
if (callback) {
if (component._pendingCallbacks) {
component._pendingCallbacks.push(callback);
} else {
component._pendingCallbacks = [callback];
}
}
}
/**
* Enqueue a callback to be run at the end of the current batching cycle. Throws
* if no updates are currently being performed.
*/
function asap(callback, context) {
("production" !== process.env.NODE_ENV ? invariant(
batchingStrategy.isBatchingUpdates,
'ReactUpdates.asap: Can\'t enqueue an asap callback in a context where' +
'updates are not being batched.'
) : invariant(batchingStrategy.isBatchingUpdates));
asapCallbackQueue.enqueue(callback, context);
asapEnqueued = true;
}
var ReactUpdatesInjection = {
injectReconcileTransaction: function(ReconcileTransaction) {
("production" !== process.env.NODE_ENV ? invariant(
ReconcileTransaction,
'ReactUpdates: must provide a reconcile transaction class'
) : invariant(ReconcileTransaction));
ReactUpdates.ReactReconcileTransaction = ReconcileTransaction;
},
injectBatchingStrategy: function(_batchingStrategy) {
("production" !== process.env.NODE_ENV ? invariant(
_batchingStrategy,
'ReactUpdates: must provide a batching strategy'
) : invariant(_batchingStrategy));
("production" !== process.env.NODE_ENV ? invariant(
typeof _batchingStrategy.batchedUpdates === 'function',
'ReactUpdates: must provide a batchedUpdates() function'
) : invariant(typeof _batchingStrategy.batchedUpdates === 'function'));
("production" !== process.env.NODE_ENV ? invariant(
typeof _batchingStrategy.isBatchingUpdates === 'boolean',
'ReactUpdates: must provide an isBatchingUpdates boolean attribute'
) : invariant(typeof _batchingStrategy.isBatchingUpdates === 'boolean'));
batchingStrategy = _batchingStrategy;
}
};
var ReactUpdates = {
/**
* React references `ReactReconcileTransaction` using this property in order
* to allow dependency injection.
*
* @internal
*/
ReactReconcileTransaction: null,
batchedUpdates: batchedUpdates,
enqueueUpdate: enqueueUpdate,
flushBatchedUpdates: flushBatchedUpdates,
injection: ReactUpdatesInjection,
asap: asap
};
module.exports = ReactUpdates;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(31)))
/***/ },
/* 26 */
/***/ 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 cx
*/
/**
* This function is used to mark string literals representing CSS class names
* so that they can be transformed statically. This allows for modularization
* and minification of CSS class names.
*
* In static_upstream, this function is actually implemented, but it should
* eventually be replaced with something more descriptive, and the transform
* that is used in the main stack should be ported for use elsewhere.
*
* @param string|object className to modularize, or an object of key/values.
* In the object case, the values are conditions that
* determine if the className keys should be included.
* @param [string ...] Variable list of classNames in the string case.
* @return string Renderable space-separated CSS className.
*/
function cx(classNames) {
if (typeof classNames == 'object') {
return Object.keys(classNames).filter(function(className) {
return classNames[className];
}).join(' ');
} else {
return Array.prototype.join.call(arguments, ' ');
}
}
module.exports = cx;
/***/ },
/* 27 */
/***/ 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 fil