reactui
Version:
A components library for ReactJS. This is part of the Gearz project
1,541 lines (1,294 loc) • 680 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define(["react"], factory);
else if(typeof exports === 'object')
exports["ReactUI"] = factory(require("react"));
else
root["ReactUI"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_12__) {
return /******/ (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 _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
var Textbox = _interopRequire(__webpack_require__(1));
var FormGroup = _interopRequire(__webpack_require__(2));
var StackPanel = _interopRequire(__webpack_require__(3));
var TreeView = _interopRequire(__webpack_require__(4));
var TreeRow = _interopRequire(__webpack_require__(5));
var Tab = _interopRequire(__webpack_require__(6));
var TabControl = _interopRequire(__webpack_require__(7));
var TabHeader = _interopRequire(__webpack_require__(8));
var ComponentBuilder = _interopRequire(__webpack_require__(9));
var Link = _interopRequire(__webpack_require__(10));
var Pager = _interopRequire(__webpack_require__(11));
module.exports = {
Textbox: Textbox,
FormGroup: FormGroup,
StackPanel: StackPanel,
TreeView: TreeView,
TreeRow: TreeRow,
Tab: Tab,
TabControl: TabControl,
TabHeader: TabHeader,
ComponentBuilder: ComponentBuilder,
Link: Link,
Pager: Pager
};
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
var React = _interopRequire(__webpack_require__(12));
var gearzMixin = _interopRequire(__webpack_require__(13));
var Textbox = React.createClass({
displayName: "Textbox",
mixins: [gearzMixin],
propTypes: {
// The input id
id: React.PropTypes.string.isRequired,
// The textbox value
value: React.PropTypes.string,
// Event raised when the textbox value is changed by the user
onChange: React.PropTypes.func,
// Text to be prepended to the component
prependText: React.PropTypes.string,
// Text to be appended to the component
appendText: React.PropTypes.string,
// Placeholder
placeholder: React.PropTypes.string,
// Whether or not the component is disabled
disabled: React.PropTypes.bool,
// Whether or not the component is invalid
invalid: React.PropTypes.bool,
// Whether or not the component is required
required: React.PropTypes.bool,
// Event raised when anything is changed in the component
onAnyChange: React.PropTypes.func
},
render: function render() {
var id = this.get("id");
var value = this.get("value");
var prependText = this.get("prependText");
var appendText = this.get("appendText");
var placeholder = this.get("placeholder");
var disabled = this.get("disabled");
var input = React.createElement("input", {
id: id,
type: "textbox",
className: "form-control has-error",
placeholder: placeholder,
value: value,
disabled: disabled,
onChange: (function (e) {
return this.set(e, "value", e.target.value);
}).bind(this)
});
// if there's any add-on
if (prependText || appendText) {
return React.createElement(
"div",
{ className: "input-group" },
prependText ? React.createElement(
"div",
{ className: "input-group-addon" },
prependText
) : null,
input,
appendText ? React.createElement(
"div",
{ className: "input-group-addon" },
appendText
) : null
);
} else {
return input;
}
}
});
module.exports = Textbox;
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(12);
var gearzMixin = __webpack_require__(13);
var FormGroup = React.createClass({
displayName: "FormGroup",
mixins: [gearzMixin],
propTypes: {
// The display name
displayName: React.PropTypes.string.isRequired,
// The child (single one) that represents the inner-control to be rendered inside the FormGroup
children: React.PropTypes.element.isRequired
},
render: function render() {
var displayName = this.get("displayName");
var childId = this.props.children.props.id;
var childInvalid = this.props.children.props.invalid;
return React.createElement(
"div",
{ className: childInvalid ? "form-group has-error" : "form-group" },
React.createElement(
"label",
{ htmlFor: childId, className: "control-label" },
displayName
),
this.props.children
);
}
});
module.exports = FormGroup;
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(12);
var gearzMixin = __webpack_require__(13);
var StackPanel = React.createClass({
displayName: "StackPanel",
mixins: [gearzMixin],
propTypes: {},
render: function render() {
return React.createElement(
"div",
null,
this.props.children
);
}
});
module.exports = StackPanel;
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(14);
var TreeRow = __webpack_require__(5);
var gearzMixin = __webpack_require__(13);
var TreeView = React.createClass({
displayName: "TreeView",
mixins: [gearzMixin],
propTypes: {
nodes: React.PropTypes.object.isRequired
},
/**
* ReactJS function to get the component initial state.
* @returns {{nodesCache: {}}}
*/
getInitialState: function getInitialState() {
return {
nodesCache: {}
};
},
/**
* Returns a list containing information about all nodes in a nodes collection.
* @param nodes {Object | Array}
* An object or array representing a nodes collection.
* Each key of this object or array, contains a child node.
* A child node may have an arbitrary set of properties, but children must be in a property called 'nodes'.
* @param path {Array=}
* Path to the node to which the passed nodes collection belongs.
* @param output {Array=}
* Optional array to which items will be pushed, and then returned.
* If none is passed, then a new array is created, and returned.
* @returns {Array}
* An array containing information about all nodes in the tree analysed in pre-order.
* Take a look at http://en.wikipedia.org/wiki/Tree_traversal#Pre-order
*/
flattenNodes: function flattenNodes(nodes, path, output) {
var flatData = output || [];
for (var key in nodes) if (nodes.hasOwnProperty(key)) {
var info = {
node: nodes[key],
path: (path || []).concat(key)
};
flatData.push(info);
this.flattenNodes(info.node.nodes, info.path, flatData);
}
return flatData;
},
/**
* Gets the nodes corresponding to each key in a `path`.
* E.g.:
* `nodes` = {A: {B: {C: {}}}}
* `path` = ["A", "B", "C"]
* `return` => [{B: {C: {}}}]
* @param nodes {Object | Array}
* An object or array representing a nodes collection.
* Each key of this object or array, contains a child node.
* A child node may have an arbitrary set of properties, but children must be in a property called 'nodes'.
* @param path {Array}
* Path to get the nodes from. Each `path` key will be mapped to the corresponding node in the tree.
* @param output {Array=}
* Optional array to which items will be pushed, and then returned.
* If none is passed, then a new array is created, and returned.
* @returns {Array}
* An array containing the nodes that correspond to each `path` key.
*/
getPathNodes: function getPathNodes(nodes, path, output) {
var sequence = output || [];
for (var it = 0; it < path.length; it++) {
var key = path[it];
if (!nodes || !nodes.hasOwnProperty(key)) break;
var node = nodes[key];
sequence.push(node);
nodes = node.nodes;
}
return sequence;
},
/**
* Merges two nodes, the main node with all needed descendants and values,
* and another source with default descendants and values.
* @param main {Object|Array}
* An object or array containing the main descendants and values,
* that have precedence over the descendants and values from the default node.
* @param defaults {Object|Array}
* An object or array containing default descendants and values,
* that are alternatives for elements missing from the main node.
* @returns {Object|Array}
* An object or array containing the merged descendants and values from the main node and the default node.
*/
mergeNodeValues: function mergeNodeValues(main, defaults) {
var result = typeof main == "object" ? {} : Array.isArray(main) ? [] : null;
if (!result) throw new Error("Argument `main` must be an object or an array.");
if (typeof defaults != "object" && Array.isArray(defaults)) throw new Error("Argument `defaults` must be an object or an array.");
for (var key2 in defaults) if (defaults.hasOwnProperty(key2) && key2 != "nodes") result[key2] = defaults[key2];
for (var key3 in main) if (main.hasOwnProperty(key3)) if (defaults.hasOwnProperty(key3) && key3 == "nodes") result[key3] = this.mergeNodeCollections(main[key3], defaults[key3]);else result[key3] = main[key3];
return result;
},
/**
* Merges two node-collections.
* @param main {Object}
* @param defaults {Object}
* @returns {Object}
*/
mergeNodeCollections: function mergeNodeCollections(main, defaults) {
var result = {};
for (var key1 in main) if (main.hasOwnProperty(key1)) if (defaults.hasOwnProperty(key1)) result[key1] = this.mergeNodeValues(main[key1], defaults[key1]);else result[key1] = main[key1];
return result;
},
/**
* Handles all node changes and triggers events indicating what node changed,
* and what value of the node changed.
* @param eventObject {Object}
* An object containing information about the event.
*/
onNodeChange: function onNodeChange(eventObject) {
function mergeOrCreate(previousValue) {
return function (value) {
return React.addons.update(typeof value != "object" ? {} : value, previousValue);
};
}
// Input:
// eventObject.path = ["app","page","editPanel"]
// eventObject.key = "collapsed"
// eventObject.value = true
// Output:
// merger = {nodes: {$mergeOrCreate: {app: {$mergeOrCreate: {page: {$mergeOrCreate: {editPanel: {$mergeOrCreate: {collapsed: {$set: true}}}}}}}}}}
var setter = {};
setter[eventObject.key] = { $set: eventObject.value };
var merger = eventObject.path.reduceRight(function (innerMerger, currentPathItem) {
var itemMerger = {};
itemMerger[currentPathItem] = { $apply: mergeOrCreate(innerMerger) };
var nodesMerger = { nodes: { $apply: mergeOrCreate(itemMerger) } };
return nodesMerger;
}, setter);
// determining what is the new state
var newState = React.addons.update(this.state, { nodesCache: merger.nodes });
this.setState(newState);
// calling external event handlers
if (eventObject.trigger(eventObject.genericEventName)) {
return;
}if (eventObject.trigger(eventObject.specificEventName)) {
}
},
/**
* Determined whether a node visible or not.
* A node is invisible when any ancestor node is collapsed.
* @param nodes {Object|Array}
* An object or array that represents the root node, from which path nodes will be taken.
* @param path {Array}
* An array containing the path components into the passed node.
* @returns {boolean}
* True if the node is hidden; otherwise false.
*/
isNodeHidden: function isNodeHidden(nodes, path) {
var ancestors = this.getPathNodes(nodes, path);
ancestors.pop();
return ancestors.map(function (x) {
return x.collapsed;
}).reduce(function (a, b) {
return a || b;
}, false);
},
/**
* ReactJS rendering function.
* @returns {XML}
*/
render: function render() {
var _this = this;
var nodes = this.get("nodes");
var mergedNodes = this.mergeNodeCollections(nodes, this.state.nodesCache);
var flattenNodes = this.flattenNodes(mergedNodes);
var children = flattenNodes.map(function (info) {
return _this.isNodeHidden(mergedNodes, info.path) ? null : React.createElement(TreeRow, {
nodes: info.node.nodes,
collapsed: info.node.collapsed,
display: info.node.display,
path: info.path,
onAnyChange: function (e) {
var newPath = Object.freeze([].concat(info.path));
var eventData = e.merge({
target: _this,
path: newPath,
specificEventName: "Node" + e.specificEventName
});
_this.onNodeChange(eventData);
}
});
});
return React.createElement(
"ul",
{ className: "list-group" },
children
);
}
});
module.exports = TreeView;
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(12);
var gearzMixin = __webpack_require__(13);
var TreeRow = React.createClass({
displayName: "TreeRow",
mixins: [gearzMixin],
propTypes: {
onAnyChange: React.PropTypes.func,
onCollapsedChange: React.PropTypes.func,
path: React.PropTypes.array.isRequired
},
hasChildren: function hasChildren(nodes) {
if (Array.isArray(nodes)) {
return nodes.length > 0;
}if (typeof nodes == "object") {
return Object.keys(nodes).length > 0;
}return !!nodes;
},
cardinality: function cardinality(nodes) {
if (Array.isArray(nodes)) {
return nodes.length;
}if (typeof nodes == "object") {
return Object.keys(nodes).length;
}return null;
},
render: function render() {
var nodes = this.get("nodes");
var collapsed = !!this.get("collapsed");
var display = this.get("display");
var path = this.get("path");
var hasChildren = this.hasChildren(nodes);
var cardinality = this.cardinality(nodes);
var indentation = 10 + path.length * 15 + "px";
return React.createElement(
"li",
{ className: "list-group-item noselect", style: { paddingLeft: indentation } },
React.createElement("span", {
className: !hasChildren ? "treeView-toggle-button glyphicon glyphicon-leaf" : collapsed ? "treeView-toggle-button glyphicon glyphicon-triangle-right" : "treeView-toggle-button glyphicon glyphicon-triangle-bottom",
onClick: this.setter("collapsed", !collapsed) }),
React.createElement(
"span",
{ className: "treeView-content" },
display
),
hasChildren && cardinality !== null ? React.createElement(
"span",
{ className: "badge" },
cardinality
) : null
);
}
});
module.exports = TreeRow;
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(12);
var gearzMixin = __webpack_require__(13);
var Tab = React.createClass({
displayName: "Tab",
mixins: [gearzMixin],
propTypes: {
// the tab name
name: React.PropTypes.string.isRequired,
// the tab display name
displayName: React.PropTypes.string.isRequired },
render: function render() {
return React.createElement(
"div",
null,
this.props.children
);
}
});
module.exports = Tab;
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(12);
var TabHeader = __webpack_require__(8);
var gearzMixin = __webpack_require__(13);
var TabControl = React.createClass({
displayName: "TabControl",
mixins: [gearzMixin],
propTypes: {
// current tab
activeTab: React.PropTypes.string.isRequired,
// A collection of Tab controls
children: React.PropTypes.array.isRequired
},
getInitialState: function getInitialState() {
return {};
},
activeTabChanged: function activeTabChanged(e) {
this.set("activeTab", e.value);
},
render: function render() {
var tabs = this.props.children;
var activeTab = this.get("activeTab");
var tabHeaderItems = [];
for (var i = 0; i < tabs.length; i++) {
var tab = tabs[i];
tabHeaderItems.push({ name: tab.props.name, displayName: tab.props.displayName });
}
return React.createElement(
"div",
{ className: "tabControl" },
React.createElement(TabHeader, { tabs: tabHeaderItems, activeTab: activeTab, onActiveTabChange: this.activeTabChanged }),
React.createElement(
"div",
{ className: "tabControl-content" },
this.props.children.map(function (item) {
var tabName = item.props.name;
return React.createElement(
"div",
{ className: activeTab == tabName ? "tab activeTab" : "tab" },
item
);
})
)
);
}
});
module.exports = TabControl;
/***/ },
/* 8 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(12);
var gearzMixin = __webpack_require__(13);
var TabHeader = React.createClass({
displayName: "TabHeader",
mixins: [gearzMixin],
propTypes: {
// Active tab name
activeTab: React.PropTypes.string.isRequired,
// tab array. Each element is of type { name (string), displayName (string) }
tabs: React.PropTypes.array.isRequired
},
render: function render() {
var that = this;
var activeTab = this.get("activeTab");
var tabs = this.get("tabs");
return React.createElement(
"ul",
{ className: "nav nav-tabs tabControl" },
tabs.map(function (item) {
return React.createElement(
"li",
{ role: "presentation", className: item.name == activeTab ? "active" : "" },
React.createElement(
"a",
{ onClick: that.setter("activeTab", item.name) },
item.displayName
)
);
})
);
}
});
module.exports = TabHeader;
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(12);
var gearzMixin = __webpack_require__(13);
var ComponentBuilder = React.createClass({
displayName: "ComponentBuilder",
mixins: [gearzMixin],
propTypes: {},
isUpper: function isUpper(x) {
var u = x.toUpperCase(),
l = x.toLowerCase();
return x == u && x != l;
},
isLower: function isLower(x) {
var u = x.toUpperCase(),
l = x.toLowerCase();
return x == l && x != u;
},
getComponents: function getComponents(data) {
if (!data) {
return [];
}var array = Array.isArray(data) ? data : [data];
return array.map((function (item) {
if (!item) return null;
if (typeof item == "string") return item;
var args = [];
// React convention:
// first letter lower-case named components are HTML tags
// first letter upper-case named components are custom React components
if (this.isUpper(item.type[0]) && window[item.type]) args.push(window[item.type]);else if (this.isLower(item.type[0])) args.push(item.type);else return null;
args.push(item.props);
args.push.apply(args, this.getComponents(item.children));
return React.createElement.apply(React, args);
}).bind(this));
},
render: function render() {
var data = this.get("data");
if (!data) {
return React.createElement(
"div",
null,
"No components to render"
);
}var components = this.getComponents(data);
return React.createElement(
"div",
null,
components
);
}
});
module.exports = ComponentBuilder;
/***/ },
/* 10 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(12);
var gearzMixin = __webpack_require__(13);
var Link = React.createClass({
displayName: "Link",
mixins: [gearzMixin],
processAjaxData: function processAjaxData(response, urlPath) {
document.getElementById("content").innerHTML = response.html;
document.title = response.pageTitle;
window.history.pushState({ html: response.html, pageTitle: response.pageTitle }, "", urlPath);
},
navigator: function navigator(routeInfo) {
return (function (e) {
var onNavigate = this.props.onNavigate;
onNavigate && onNavigate(e);
if (routeInfo.routeData.isClient) {
//var currentInfo = this.props.router.getCurrentLocationInfo();
var Component = window[routeInfo.routeData.pageComponent];
var targetElement = document.getElementById(this.props.target);
if (Component && targetElement) {
React.render(React.createElement(Component, null), targetElement);
window.history.pushState({
pageComponent: routeInfo.routeData.pageComponent,
viewData: {},
pageTitle: "TITLE"
}, null, routeInfo.uri);
}
}
e.preventDefault();
}).bind(this);
},
render: function render() {
var href = this.props.href,
router = this.props.router,
onNavigate = this.props.onNavigate; // triggered when navigating through this link
var routeInfo = router.getInfo(href);
return React.createElement(
"a",
{ href: routeInfo.uri, onClick: this.navigator(routeInfo) },
routeInfo.uri
);
}
});
module.exports = Link;
/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(12);
var gearzMixin = __webpack_require__(13);
var Pager = React.createClass({
displayName: "Pager",
mixins: [gearzMixin],
render: function render() {
var page = this.get("page");
var pageCount = this.props.count / this.props.pageSize,
children = [];
for (var it = 0; it < pageCount; it++) {
var setter = this.setter("page", it + 1);
children.push(React.createElement(
"li",
{
className: [page - 1 == it ? "active" : "", "item"].join(" "),
onMouseDown: setter,
key: "pg-" + it + 1 },
React.createElement(
"a",
{ href: "#" },
it
)
));
}
return React.createElement(
"nav",
null,
React.createElement(
"ul",
{ className: "pagination" },
children
)
);
}
});
module.exports = Pager;
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __WEBPACK_EXTERNAL_MODULE_12__;
/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var gearz = {
getInitialState: function getInitialState() {
return {};
},
// 'get' is used to get properties that may be stored in 'state' or in 'props'
// this happens when a value is defined throw a 'setter'
get: function get(propName) {
return this.state.hasOwnProperty(propName) ? this.state[propName] : this.props[propName];
},
/**
* 'set' is used to define the value of a property, given the name of the
* property and the new value to assign. It can also receive a third parameter,
* representing the context of the change. For example: you can pass the
* event data when the change is caused by a DOM event.
* This will raise events that can be listened by parent components,
* so that they know when the child component changes.
* @param propName {String}
* Name of the property that is being changed.
* This is usually the name of a `prop` of the component.
* @param newValue {*}
* @param context {Object}
*/
set: function set(propName, newValue, context) {
var prevDef = false,
isOriginalNewValue = true;
var name = propName == "value" ? "" : propName[0].toUpperCase() + propName.substr(1);
var specificEventName = name + "Change";
// properties of an event object that cannot be overridden
var defaultProps = ["previous", "context", "originalNewValue", "genericEventName", "value", "isOriginalNewValue", "preventDefault", "merge", "trigger"];
var eventObject = Object.defineProperties({
target: this,
key: propName,
previous: this.props[propName],
context: context,
originalNewValue: newValue,
specificEventName: specificEventName,
genericEventName: "AnyChange",
/**
* Prevents the default behavior of storing the data internally in the state of the component.
* This is generally used to indicate that the state is going to be stored externally from the component.
*/
preventDefault: function preventDefault() {
prevDef = true;
},
/**
* Merges this event object, with another object, in order to include additional data to this event object.
* You cannot override the default properties.
* @param other {object} Containing properties to merged in a new event object.
* @returns {object} The merging result between this event object and another object.
*/
merge: function merge(other) {
var result = Object.create(this);
for (var key in other) if (other.hasOwnProperty(key) && defaultProps.indexOf(key) < 0) Object.defineProperty(result, key, { value: other[key] });
return Object.freeze(result);
},
/**
* Triggers an event handler (a function), if preventDefault was not called yet,
* and returning whether the handler called preventDefault itself.
* @param eventHandler {Function|String}
* Function representing an event handler that will receive the current event object;
* Or a string representing a named event, that may be present in a `prop`.
* @returns {Boolean}
* Indicates whether preventDefault was called.
*/
trigger: function trigger(eventHandler) {
if (typeof eventHandler == "string") eventHandler = this.target.props["on" + eventHandler];
if (!prevDef && typeof eventHandler == "function") eventHandler(this);
return prevDef;
}
}, {
value: {
get: function () {
return newValue;
},
set: function (value) {
newValue = value;
isOriginalNewValue = this.originalNewValue === newValue;
},
configurable: true,
enumerable: true
},
isOriginalNewValue: {
get: function () {
return isOriginalNewValue;
},
configurable: true,
enumerable: true
}
});
Object.freeze(eventObject);
if (eventObject.trigger(specificEventName)) {
return;
}if (eventObject.trigger(this.props.onAnyChange)) {
return;
}var newState = {};
newState[propName] = newValue;
this.setState(newState);
},
// 'setter' is used to create a function that changes the value of an
// attribute used by this component in response to a DOM event,
// raising other events to notify parent components,
// and with a default behaviour of storing changes
// in the component internal 'state'
setter: function setter(propName, newValue) {
return (function (e) {
return this.set(propName, newValue, { domEvent: e });
}).bind(this);
}
};
module.exports = gearz;
/***/ },
/* 14 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(15);
/***/ },
/* 15 */
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2013-2015, 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__(16);
var React = __webpack_require__(17);
var ReactComponentWithPureRenderMixin =
__webpack_require__(18);
var ReactCSSTransitionGroup = __webpack_require__(19);
var ReactFragment = __webpack_require__(20);
var ReactTransitionGroup = __webpack_require__(21);
var ReactUpdates = __webpack_require__(22);
var cx = __webpack_require__(23);
var cloneWithProps = __webpack_require__(24);
var update = __webpack_require__(25);
React.addons = {
CSSTransitionGroup: ReactCSSTransitionGroup,
LinkedStateMixin: LinkedStateMixin,
PureRenderMixin: ReactComponentWithPureRenderMixin,
TransitionGroup: ReactTransitionGroup,
batchedUpdates: ReactUpdates.batchedUpdates,
classSet: cx,
cloneWithProps: cloneWithProps,
createFragment: ReactFragment.create,
update: update
};
if (false) {
React.addons.Perf = require("./ReactDefaultPerf");
React.addons.TestUtils = require("./ReactTestUtils");
}
module.exports = React;
/***/ },
/* 16 */
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2013-2015, 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__(26);
var ReactStateSetters = __webpack_require__(27);
/**
* 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;
/***/ },
/* 17 */
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2013-2015, 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
*/
/* globals __REACT_DEVTOOLS_GLOBAL_HOOK__*/
'use strict';
var EventPluginUtils = __webpack_require__(28);
var ReactChildren = __webpack_require__(29);
var ReactComponent = __webpack_require__(30);
var ReactClass = __webpack_require__(31);
var ReactContext = __webpack_require__(32);
var ReactCurrentOwner = __webpack_require__(33);
var ReactElement = __webpack_require__(34);
var ReactElementValidator = __webpack_require__(35);
var ReactDOM = __webpack_require__(36);
var ReactDOMTextComponent = __webpack_require__(37);
var ReactDefaultInjection = __webpack_require__(38);
var ReactInstanceHandles = __webpack_require__(39);
var ReactMount = __webpack_require__(40);
var ReactPerf = __webpack_require__(41);
var ReactPropTypes = __webpack_require__(42);
var ReactReconciler = __webpack_require__(43);
var ReactServerRendering = __webpack_require__(44);
var assign = __webpack_require__(45);
var findDOMNode = __webpack_require__(46);
var onlyChild = __webpack_require__(47);
ReactDefaultInjection.inject();
var createElement = ReactElement.createElement;
var createFactory = ReactElement.createFactory;
var cloneElement = ReactElement.cloneElement;
if (false) {
createElement = ReactElementValidator.createElement;
createFactory = ReactElementValidator.createFactory;
cloneElement = ReactElementValidator.cloneElement;
}
var render = ReactPerf.measure('React', 'render', ReactMount.render);
var React = {
Children: {
map: ReactChildren.map,
forEach: ReactChildren.forEach,
count: ReactChildren.count,
only: onlyChild
},
Component: ReactComponent,
DOM: ReactDOM,
PropTypes: ReactPropTypes,
initializeTouchEvents: function(shouldUseTouch) {
EventPluginUtils.useTouchEvents = shouldUseTouch;
},
createClass: ReactClass.createClass,
createElement: createElement,
cloneElement: cloneElement,
createFactory: createFactory,
createMixin: function(mixin) {
// Currently a noop. Will be used to validate and trace mixins.
return mixin;
},
constructAndRenderComponent: ReactMount.constructAndRenderComponent,
constructAndRenderComponentByID: ReactMount.constructAndRenderComponentByID,
findDOMNode: findDOMNode,
render: render,
renderToString: ReactServerRendering.renderToString,
renderToStaticMarkup: ReactServerRendering.renderToStaticMarkup,
unmountComponentAtNode: ReactMount.unmountComponentAtNode,
isValidElement: ReactElement.isValidElement,
withContext: ReactContext.withContext,
// Hook for JSX spread, don't use this for anything else.
__spread: assign
};
// 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({
CurrentOwner: ReactCurrentOwner,
InstanceHandles: ReactInstanceHandles,
Mount: ReactMount,
Reconciler: ReactReconciler,
TextComponent: ReactDOMTextComponent
});
}
if (false) {
var ExecutionEnvironment = require("./ExecutionEnvironment");
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;
}
}
}
}
React.version = '0.13.1';
module.exports = React;
/***/ },
/* 18 */
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2013-2015, 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__(48);
/**
* 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;
/***/ },
/* 19 */
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2013-2015, 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__(17);
var assign = __webpack_require__(45);
var ReactTransitionGroup = React.createFactory(
__webpack_require__(21)
);
var ReactCSSTransitionGroupChild = React.createFactory(
__webpack_require__(49)
);
var ReactCSSTransitionGroup = React.createClass({
displayName: 'ReactCSSTransitionGroup',
propTypes: {
transitionName: React.PropTypes.string.isRequired,
transitionAppear: React.PropTypes.bool,
transitionEnter: React.PropTypes.bool,
transitionLeave: React.PropTypes.bool
},
getDefaultProps: function() {
return {
transitionAppear: false,
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,
appear: this.props.transitionAppear,
enter: this.props.transitionEnter,
leave: this.props.transitionLeave
},
child
);
},
render: function() {
return (
ReactTransitionGroup(
assign({}, this.props, {childFactory: this._wrapChild})
)
);
}
});
module.exports = ReactCSSTransitionGroup;
/***/ },
/* 20 */
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2015, 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 ReactFragment
*/
'use strict';
var ReactElement = __webpack_require__(34);
var warning = __webpack_require__(50);
/**
* We used to allow keyed objects to serve as a collection of ReactElements,
* or nested sets. This allowed us a way to explicitly key a set a fragment of
* components. This is now being replaced with an opaque data structure.
* The upgrade path is to call React.addons.createFragment({ key: value }) to
* create a keyed fragment. The resulting data structure is opaque, for now.
*/
if (false) {
var fragmentKey = '_reactFragment';
var didWarnKey = '_reactDidWarn';
var canWarnForReactFragment = false;
try {
// Feature test. Don't even try to issue this warning if we can't use
// enumerable: false.
var dummy = function() {
return 1;
};
Object.defineProperty(
{},
fragmentKey,
{enumerable: false, value: true}
);
Object.defineProperty(
{},
'key',
{enumerable: true, get: dummy}
);
canWarnForReactFragment = true;
} catch (x) { }
var proxyPropertyAccessWithWarning = function(obj, key) {
Object.defineProperty(obj, key, {
enumerable: true,
get: function() {
("production" !== process.env.NODE_ENV ? warning(
this[didWarnKey],
'A ReactFragment is an opaque type. Accessing any of its ' +
'properties is deprecated. Pass it to one of the React.Children ' +
'helpers.'
) : null);
this[didWarnKey] = true;
return this[fragmentKey][key];
},
set: function(value) {
("production" !== process.env.NODE_ENV ? warning(
this[didWarnKey],
'A ReactFragment is an immutable opaque type. Mutating its ' +
'properties is deprecated.'
) : null);
this[didWarnKey] = true;
this[fragmentKey][key] = value;
}
});
};
var issuedWarnings = {};
var didWarnForFragment = function(fragment) {
// We use the keys and the type of the value as a heuristic to dedupe the
// warning to avoid spamming too much.
var fragmentCacheKey = '';
for (var key in fragment) {
fragmentCacheKey += key + ':' + (typeof fragment[key]) + ',';
}
var alreadyWarnedOnce = !!issuedWarnings[fragmentCacheKey];
issuedWarnings[fragmentCacheKey] = true;
return alreadyWarnedOnce;
};
}
var ReactFragment = {
// Wrap a keyed object in an opaque proxy that warns you if you access any
// of its properties.
create: function(object) {
if (false) {
if (typeof object !== 'object' || !object || Array.isArray(object)) {
("production" !== process.env.NODE_ENV ? warning(
false,
'React.addons.createFragment only accepts a single object.',
object
) : null);
return object;
}
if (ReactElement.isValidElement(object)) {
("production" !== process.env.NODE_ENV ? warning(
false,
'React.addons.createFragment does not accept a ReactElement ' +
'without a wrapper object.'
) : null);
return object;
}
if (canWarnForReactFragment) {
var proxy = {};
Object.defineProperty(proxy, fragmentKey, {
enumerable: false,
value: object
});
Object.defineProperty(proxy, didWarnKey, {
writable: true,
enumerable: false,
value: false
});
for (var key in object) {
proxyPropertyAccessWithWarning(proxy, key);
}
Object.preventExtensions(proxy);
return proxy;
}
}
return object;
},
// Extract the original keyed object from the fragment opaque type. Warn if
// a plain object is passed here.
extract: function(fragment) {
if (false) {
if (canWarnForReactFragment) {
if (!fragment[fragmentKey]) {
("production" !== process.env.NODE_ENV ? warning(
didWarnForFragment(fragment),
'Any use of a keyed object should be wrapped in ' +
'React.addons.createFragment(object) before being passed as a ' +
'child.'
) : null);
return fragment;
}
return fragment[fragmentKey];
}
}
return fragment;
},
// Check if this is a fragment and if so, extract the keyed object. If it
// is a fragment-like object, warn that it should be wrapped. Ignore if we
// can't determine what kind of object this is.
extractIfFragment: function(fragment) {
if (false) {
if (canWarnForReactFragment) {
// If it is t