140 | );
141 | }
142 | });
143 |
144 | function callOnNthCall(n, fn) {
145 | var calls = 0;
146 | return function () {
147 | calls++;
148 | if (calls === n) {
149 | calls = 0;
150 | return fn.apply(this, arguments);
151 | }
152 | };
153 | }
154 |
155 | module.exports = MagicMove;
156 |
--------------------------------------------------------------------------------
/dist/react-magic-move.min.js:
--------------------------------------------------------------------------------
1 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.ReactMagicMove=e()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;ob.key?1:0})},render:function(){return React.createElement("div",{className:"MagicMoveClones"},this.childrenWithPositions())}}),MagicMove=React.createClass({displayName:"MagicMove",getInitialState:function(){return{animating:!1}},componentDidMount:function(){this.makePortal(),this.renderClonesInitially()},componentWillUnmount:function(){document.body.removeChild(this.portalNode)},componentWillReceiveProps:function(nextProps){this.startAnimation(nextProps)},componentDidUpdate:function(prevProps){this.state.animating&&this.renderClonesToNewPositions(prevProps)},makePortal:function(){this.portalNode=document.createElement("div"),this.portalNode.style.left="-9999px",document.body.appendChild(this.portalNode)},addTransitionEndEvent:function(){this._transitionHandler=callOnNthCall(this.props.children.length,this.finishAnimation),this.portalNode.addEventListener("transitionend",this._transitionHandler)},removeTransitionEndEvent:function(){this.portalNode.removeEventListener("transitionend",this._transitionHandler)},startAnimation:function(nextProps){this.state.animating||(this.addTransitionEndEvent(),nextProps.animating=!0,nextProps.positions=this.getPositions(),this.renderClones(nextProps,function(){this.setState({animating:!0})}.bind(this)))},renderClonesToNewPositions:function(prevProps){prevProps.positions=this.getPositions(),this.renderClones(prevProps)},finishAnimation:function(){this.removeTransitionEndEvent(),this.portalNode.style.position="absolute",this.setState({animating:!1})},getPositions:function(){var positions={};return React.Children.forEach(this.props.children,function(child){var ref=child.key,node=this.refs[ref].getDOMNode(),rect=node.getBoundingClientRect(),computedStyle=getComputedStyle(node),marginTop=parseInt(computedStyle.marginTop,10),marginLeft=parseInt(computedStyle.marginLeft,10),position={top:rect.top-marginTop,left:rect.left-marginLeft,width:rect.width,height:rect.height,position:"absolute"};positions[ref]=position}.bind(this)),positions},renderClonesInitially:function(){this.props.positions=this.getPositions(),React.render(React.createElement(Clones,React.__spread({},this.props)),this.portalNode)},renderClones:function(props,cb){this.portalNode.style.position="",React.render(React.createElement(Clones,React.__spread({},props)),this.portalNode,cb)},childrenWithRefs:function(){return React.Children.map(this.props.children,function(child){return cloneWithProps(child,{ref:child.key})})},render:function(){var style={opacity:this.state.animating?0:1};return React.createElement("div",{style:style},this.childrenWithRefs())}});module.exports=MagicMove},{"react/lib/cloneWithProps":8}],2:[function(_dereq_,module){module.exports=_dereq_("./components/MagicMove")},{"./components/MagicMove":1}],3:[function(_dereq_,module){function assign(target){if(null==target)throw new TypeError("Object.assign target cannot be null or undefined");for(var to=Object(target),hasOwnProperty=Object.prototype.hasOwnProperty,nextIndex=1;nextIndex1){for(var childArray=Array(childrenLength),i=0;childrenLength>i;i++)childArray[i]=arguments[i+2];props.children=childArray}if(type.defaultProps){var defaultProps=type.defaultProps;for(propName in defaultProps)"undefined"==typeof props[propName]&&(props[propName]=defaultProps[propName])}return new ReactElement(type,key,ref,ReactCurrentOwner.current,ReactContext.current,props)},ReactElement.createFactory=function(type){var factory=ReactElement.createElement.bind(null,type);return factory.type=type,factory},ReactElement.cloneAndReplaceProps=function(oldElement,newProps){var newElement=new ReactElement(oldElement.type,oldElement.key,oldElement.ref,oldElement._owner,oldElement._context,newProps);return newElement},ReactElement.isValidElement=function(object){var isElement=!(!object||!object._isReactElement);return isElement},module.exports=ReactElement},{"./ReactContext":4,"./ReactCurrentOwner":5,"./warning":13}],7:[function(_dereq_,module){"use strict";function createTransferStrategy(mergeStrategy){return function(props,key,value){props[key]=props.hasOwnProperty(key)?mergeStrategy(props[key],value):value}}function transferInto(props,newProps){for(var thisKey in newProps)if(newProps.hasOwnProperty(thisKey)){var transferStrategy=TransferStrategies[thisKey];transferStrategy&&TransferStrategies.hasOwnProperty(thisKey)?transferStrategy(props,thisKey,newProps[thisKey]):props.hasOwnProperty(thisKey)||(props[thisKey]=newProps[thisKey])}return props}var assign=_dereq_("./Object.assign"),emptyFunction=_dereq_("./emptyFunction"),invariant=_dereq_("./invariant"),joinClasses=_dereq_("./joinClasses"),transferStrategyMerge=(_dereq_("./warning"),createTransferStrategy(function(a,b){return assign({},b,a)})),TransferStrategies={children:emptyFunction,className:createTransferStrategy(joinClasses),style:transferStrategyMerge},ReactPropTransferer={TransferStrategies:TransferStrategies,mergeProps:function(oldProps,newProps){return transferInto(assign({},oldProps),newProps)},Mixin:{transferPropsTo:function(element){return invariant(element._owner===this),transferInto(element.props,this.props),element}}};module.exports=ReactPropTransferer},{"./Object.assign":3,"./emptyFunction":9,"./invariant":10,"./joinClasses":11,"./warning":13}],8:[function(_dereq_,module){"use strict";function cloneWithProps(child,props){var newProps=ReactPropTransferer.mergeProps(props,child.props);return!newProps.hasOwnProperty(CHILDREN_PROP)&&child.props.hasOwnProperty(CHILDREN_PROP)&&(newProps.children=child.props.children),ReactElement.createElement(child.type,newProps)}var ReactElement=_dereq_("./ReactElement"),ReactPropTransferer=_dereq_("./ReactPropTransferer"),keyOf=_dereq_("./keyOf"),CHILDREN_PROP=(_dereq_("./warning"),keyOf({children:null}));module.exports=cloneWithProps},{"./ReactElement":6,"./ReactPropTransferer":7,"./keyOf":12,"./warning":13}],9:[function(_dereq_,module){function makeEmptyFunction(arg){return function(){return arg}}function emptyFunction(){}emptyFunction.thatReturns=makeEmptyFunction,emptyFunction.thatReturnsFalse=makeEmptyFunction(!1),emptyFunction.thatReturnsTrue=makeEmptyFunction(!0),emptyFunction.thatReturnsNull=makeEmptyFunction(null),emptyFunction.thatReturnsThis=function(){return this},emptyFunction.thatReturnsArgument=function(arg){return arg},module.exports=emptyFunction},{}],10:[function(_dereq_,module){"use strict";var invariant=function(condition,format,a,b,c,d,e,f){if(!condition){var error;if(void 0===format)error=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var args=[a,b,c,d,e,f],argIndex=0;error=new Error("Invariant Violation: "+format.replace(/%s/g,function(){return args[argIndex++]}))}throw error.framesToPop=1,error}};module.exports=invariant},{}],11:[function(_dereq_,module){"use strict";function joinClasses(className){className||(className="");var nextClass,argLength=arguments.length;if(argLength>1)for(var ii=1;argLength>ii;ii++)nextClass=arguments[ii],nextClass&&(className=(className?className+" ":"")+nextClass);return className}module.exports=joinClasses},{}],12:[function(_dereq_,module){var keyOf=function(oneKeyObj){var key;for(key in oneKeyObj)if(oneKeyObj.hasOwnProperty(key))return key;return null};module.exports=keyOf},{}],13:[function(_dereq_,module){"use strict";var emptyFunction=_dereq_("./emptyFunction"),warning=emptyFunction;module.exports=warning},{"./emptyFunction":9}]},{},[2])(2)});
--------------------------------------------------------------------------------
/dist/react-magic-move.js:
--------------------------------------------------------------------------------
1 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.ReactMagicMove=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o b.key) ? 1 : 0;
18 | });
19 | },
20 |
21 | render:function () {
22 | return (
23 | React.createElement("div", {className: "MagicMoveClones"},
24 | this.childrenWithPositions()
25 | )
26 | );
27 | }
28 | });
29 |
30 | var MagicMove = React.createClass({
31 |
32 | displayName: 'MagicMove',
33 |
34 | getInitialState:function () {
35 | return {
36 | animating: false
37 | };
38 | },
39 |
40 | componentDidMount:function () {
41 | this.makePortal();
42 | this.renderClonesInitially();
43 | },
44 |
45 | componentWillUnmount:function () {
46 | document.body.removeChild(this.portalNode);
47 | },
48 |
49 | componentWillReceiveProps:function (nextProps) {
50 | this.startAnimation(nextProps);
51 | },
52 |
53 | componentDidUpdate:function (prevProps) {
54 | if (this.state.animating)
55 | this.renderClonesToNewPositions(prevProps);
56 | },
57 |
58 | makePortal:function () {
59 | this.portalNode = document.createElement('div');
60 | this.portalNode.style.left = '-9999px';
61 | document.body.appendChild(this.portalNode);
62 | },
63 |
64 | addTransitionEndEvent:function () {
65 | // if you click RIGHT before the transition is done, the animation jumps,
66 | // its because the transitionend event fires even though its not quite
67 | // done, not sure how to hack around it yet.
68 | this._transitionHandler = callOnNthCall(this.props.children.length, this.finishAnimation);
69 | this.portalNode.addEventListener('transitionend', this._transitionHandler);
70 | },
71 |
72 | removeTransitionEndEvent:function () {
73 | this.portalNode.removeEventListener('transitionend', this._transitionHandler);
74 | },
75 |
76 | startAnimation:function (nextProps) {
77 | if (this.state.animating)
78 | return;
79 | this.addTransitionEndEvent();
80 | nextProps.animating = true;
81 | nextProps.positions = this.getPositions();
82 | this.renderClones(nextProps, function() {
83 | this.setState({ animating: true });
84 | }.bind(this));
85 | },
86 |
87 | renderClonesToNewPositions:function (prevProps) {
88 | prevProps.positions = this.getPositions();
89 | this.renderClones(prevProps);
90 | },
91 |
92 | finishAnimation:function () {
93 | this.removeTransitionEndEvent();
94 | this.portalNode.style.position = 'absolute';
95 | this.setState({ animating: false });
96 | },
97 |
98 | getPositions:function () {
99 | var positions = {};
100 | React.Children.forEach(this.props.children, function(child) {
101 | var ref = child.key;
102 | var node = this.refs[ref].getDOMNode();
103 | var rect = node.getBoundingClientRect();
104 | var computedStyle = getComputedStyle(node);
105 | var marginTop = parseInt(computedStyle.marginTop, 10);
106 | var marginLeft = parseInt(computedStyle.marginLeft, 10);
107 | var position = {
108 | top: (rect.top - marginTop),
109 | left: (rect.left - marginLeft),
110 | width: rect.width,
111 | height: rect.height,
112 | position: 'absolute'
113 | };
114 | positions[ref] = position;
115 | }.bind(this));
116 | return positions;
117 | },
118 |
119 | renderClonesInitially:function () {
120 | this.props.positions = this.getPositions();
121 | React.render(React.createElement(Clones, React.__spread({}, this.props)), this.portalNode);
122 | },
123 |
124 | renderClones:function (props, cb) {
125 | this.portalNode.style.position = '';
126 | React.render(React.createElement(Clones, React.__spread({}, props)), this.portalNode, cb);
127 | },
128 |
129 | childrenWithRefs:function () {
130 | return React.Children.map(this.props.children, function(child) {
131 | return cloneWithProps(child, { ref: child.key});
132 | });
133 | },
134 |
135 | render:function () {
136 | var style = { opacity: this.state.animating ? 0 : 1 };
137 | return (
138 | React.createElement("div", {style: style},
139 | this.childrenWithRefs()
140 | )
141 | );
142 | }
143 | });
144 |
145 | function callOnNthCall(n, fn) {
146 | var calls = 0;
147 | return function () {
148 | calls++;
149 | if (calls === n) {
150 | calls = 0;
151 | return fn.apply(this, arguments);
152 | }
153 | };
154 | }
155 |
156 | module.exports = MagicMove;
157 |
158 | },{"react/lib/cloneWithProps":8}],2:[function(_dereq_,module,exports){
159 | module.exports = _dereq_('./components/MagicMove');
160 |
161 |
162 | },{"./components/MagicMove":1}],3:[function(_dereq_,module,exports){
163 | /**
164 | * Copyright 2014, Facebook, Inc.
165 | * All rights reserved.
166 | *
167 | * This source code is licensed under the BSD-style license found in the
168 | * LICENSE file in the root directory of this source tree. An additional grant
169 | * of patent rights can be found in the PATENTS file in the same directory.
170 | *
171 | * @providesModule Object.assign
172 | */
173 |
174 | // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.assign
175 |
176 | function assign(target, sources) {
177 | if (target == null) {
178 | throw new TypeError('Object.assign target cannot be null or undefined');
179 | }
180 |
181 | var to = Object(target);
182 | var hasOwnProperty = Object.prototype.hasOwnProperty;
183 |
184 | for (var nextIndex = 1; nextIndex < arguments.length; nextIndex++) {
185 | var nextSource = arguments[nextIndex];
186 | if (nextSource == null) {
187 | continue;
188 | }
189 |
190 | var from = Object(nextSource);
191 |
192 | // We don't currently support accessors nor proxies. Therefore this
193 | // copy cannot throw. If we ever supported this then we must handle
194 | // exceptions and side-effects. We don't support symbols so they won't
195 | // be transferred.
196 |
197 | for (var key in from) {
198 | if (hasOwnProperty.call(from, key)) {
199 | to[key] = from[key];
200 | }
201 | }
202 | }
203 |
204 | return to;
205 | };
206 |
207 | module.exports = assign;
208 |
209 | },{}],4:[function(_dereq_,module,exports){
210 | /**
211 | * Copyright 2013-2014, Facebook, Inc.
212 | * All rights reserved.
213 | *
214 | * This source code is licensed under the BSD-style license found in the
215 | * LICENSE file in the root directory of this source tree. An additional grant
216 | * of patent rights can be found in the PATENTS file in the same directory.
217 | *
218 | * @providesModule ReactContext
219 | */
220 |
221 | "use strict";
222 |
223 | var assign = _dereq_("./Object.assign");
224 |
225 | /**
226 | * Keeps track of the current context.
227 | *
228 | * The context is automatically passed down the component ownership hierarchy
229 | * and is accessible via `this.context` on ReactCompositeComponents.
230 | */
231 | var ReactContext = {
232 |
233 | /**
234 | * @internal
235 | * @type {object}
236 | */
237 | current: {},
238 |
239 | /**
240 | * Temporarily extends the current context while executing scopedCallback.
241 | *
242 | * A typical use case might look like
243 | *
244 | * render: function() {
245 | * var children = ReactContext.withContext({foo: 'foo'}, () => (
246 | *
247 | * ));
248 | * return
{children}
;
249 | * }
250 | *
251 | * @param {object} newContext New context to merge into the existing context
252 | * @param {function} scopedCallback Callback to run with the new context
253 | * @return {ReactComponent|array}
254 | */
255 | withContext: function(newContext, scopedCallback) {
256 | var result;
257 | var previousContext = ReactContext.current;
258 | ReactContext.current = assign({}, previousContext, newContext);
259 | try {
260 | result = scopedCallback();
261 | } finally {
262 | ReactContext.current = previousContext;
263 | }
264 | return result;
265 | }
266 |
267 | };
268 |
269 | module.exports = ReactContext;
270 |
271 | },{"./Object.assign":3}],5:[function(_dereq_,module,exports){
272 | /**
273 | * Copyright 2013-2014, Facebook, Inc.
274 | * All rights reserved.
275 | *
276 | * This source code is licensed under the BSD-style license found in the
277 | * LICENSE file in the root directory of this source tree. An additional grant
278 | * of patent rights can be found in the PATENTS file in the same directory.
279 | *
280 | * @providesModule ReactCurrentOwner
281 | */
282 |
283 | "use strict";
284 |
285 | /**
286 | * Keeps track of the current owner.
287 | *
288 | * The current owner is the component who should own any components that are
289 | * currently being constructed.
290 | *
291 | * The depth indicate how many composite components are above this render level.
292 | */
293 | var ReactCurrentOwner = {
294 |
295 | /**
296 | * @internal
297 | * @type {ReactComponent}
298 | */
299 | current: null
300 |
301 | };
302 |
303 | module.exports = ReactCurrentOwner;
304 |
305 | },{}],6:[function(_dereq_,module,exports){
306 | /**
307 | * Copyright 2014, Facebook, Inc.
308 | * All rights reserved.
309 | *
310 | * This source code is licensed under the BSD-style license found in the
311 | * LICENSE file in the root directory of this source tree. An additional grant
312 | * of patent rights can be found in the PATENTS file in the same directory.
313 | *
314 | * @providesModule ReactElement
315 | */
316 |
317 | "use strict";
318 |
319 | var ReactContext = _dereq_("./ReactContext");
320 | var ReactCurrentOwner = _dereq_("./ReactCurrentOwner");
321 |
322 | var warning = _dereq_("./warning");
323 |
324 | var RESERVED_PROPS = {
325 | key: true,
326 | ref: true
327 | };
328 |
329 | /**
330 | * Warn for mutations.
331 | *
332 | * @internal
333 | * @param {object} object
334 | * @param {string} key
335 | */
336 | function defineWarningProperty(object, key) {
337 | Object.defineProperty(object, key, {
338 |
339 | configurable: false,
340 | enumerable: true,
341 |
342 | get: function() {
343 | if (!this._store) {
344 | return null;
345 | }
346 | return this._store[key];
347 | },
348 |
349 | set: function(value) {
350 | ("production" !== "production" ? warning(
351 | false,
352 | 'Don\'t set the ' + key + ' property of the component. ' +
353 | 'Mutate the existing props object instead.'
354 | ) : null);
355 | this._store[key] = value;
356 | }
357 |
358 | });
359 | }
360 |
361 | /**
362 | * This is updated to true if the membrane is successfully created.
363 | */
364 | var useMutationMembrane = false;
365 |
366 | /**
367 | * Warn for mutations.
368 | *
369 | * @internal
370 | * @param {object} element
371 | */
372 | function defineMutationMembrane(prototype) {
373 | try {
374 | var pseudoFrozenProperties = {
375 | props: true
376 | };
377 | for (var key in pseudoFrozenProperties) {
378 | defineWarningProperty(prototype, key);
379 | }
380 | useMutationMembrane = true;
381 | } catch (x) {
382 | // IE will fail on defineProperty
383 | }
384 | }
385 |
386 | /**
387 | * Base constructor for all React elements. This is only used to make this
388 | * work with a dynamic instanceof check. Nothing should live on this prototype.
389 | *
390 | * @param {*} type
391 | * @param {string|object} ref
392 | * @param {*} key
393 | * @param {*} props
394 | * @internal
395 | */
396 | var ReactElement = function(type, key, ref, owner, context, props) {
397 | // Built-in properties that belong on the element
398 | this.type = type;
399 | this.key = key;
400 | this.ref = ref;
401 |
402 | // Record the component responsible for creating this element.
403 | this._owner = owner;
404 |
405 | // TODO: Deprecate withContext, and then the context becomes accessible
406 | // through the owner.
407 | this._context = context;
408 |
409 | if ("production" !== "production") {
410 | // The validation flag and props are currently mutative. We put them on
411 | // an external backing store so that we can freeze the whole object.
412 | // This can be replaced with a WeakMap once they are implemented in
413 | // commonly used development environments.
414 | this._store = { validated: false, props: props };
415 |
416 | // We're not allowed to set props directly on the object so we early
417 | // return and rely on the prototype membrane to forward to the backing
418 | // store.
419 | if (useMutationMembrane) {
420 | Object.freeze(this);
421 | return;
422 | }
423 | }
424 |
425 | this.props = props;
426 | };
427 |
428 | // We intentionally don't expose the function on the constructor property.
429 | // ReactElement should be indistinguishable from a plain object.
430 | ReactElement.prototype = {
431 | _isReactElement: true
432 | };
433 |
434 | if ("production" !== "production") {
435 | defineMutationMembrane(ReactElement.prototype);
436 | }
437 |
438 | ReactElement.createElement = function(type, config, children) {
439 | var propName;
440 |
441 | // Reserved names are extracted
442 | var props = {};
443 |
444 | var key = null;
445 | var ref = null;
446 |
447 | if (config != null) {
448 | ref = config.ref === undefined ? null : config.ref;
449 | if ("production" !== "production") {
450 | ("production" !== "production" ? warning(
451 | config.key !== null,
452 | 'createElement(...): Encountered component with a `key` of null. In ' +
453 | 'a future version, this will be treated as equivalent to the string ' +
454 | '\'null\'; instead, provide an explicit key or use undefined.'
455 | ) : null);
456 | }
457 | // TODO: Change this back to `config.key === undefined`
458 | key = config.key == null ? null : '' + config.key;
459 | // Remaining properties are added to a new props object
460 | for (propName in config) {
461 | if (config.hasOwnProperty(propName) &&
462 | !RESERVED_PROPS.hasOwnProperty(propName)) {
463 | props[propName] = config[propName];
464 | }
465 | }
466 | }
467 |
468 | // Children can be more than one argument, and those are transferred onto
469 | // the newly allocated props object.
470 | var childrenLength = arguments.length - 2;
471 | if (childrenLength === 1) {
472 | props.children = children;
473 | } else if (childrenLength > 1) {
474 | var childArray = Array(childrenLength);
475 | for (var i = 0; i < childrenLength; i++) {
476 | childArray[i] = arguments[i + 2];
477 | }
478 | props.children = childArray;
479 | }
480 |
481 | // Resolve default props
482 | if (type.defaultProps) {
483 | var defaultProps = type.defaultProps;
484 | for (propName in defaultProps) {
485 | if (typeof props[propName] === 'undefined') {
486 | props[propName] = defaultProps[propName];
487 | }
488 | }
489 | }
490 |
491 | return new ReactElement(
492 | type,
493 | key,
494 | ref,
495 | ReactCurrentOwner.current,
496 | ReactContext.current,
497 | props
498 | );
499 | };
500 |
501 | ReactElement.createFactory = function(type) {
502 | var factory = ReactElement.createElement.bind(null, type);
503 | // Expose the type on the factory and the prototype so that it can be
504 | // easily accessed on elements. E.g. .type === Foo.type.
505 | // This should not be named `constructor` since this may not be the function
506 | // that created the element, and it may not even be a constructor.
507 | factory.type = type;
508 | return factory;
509 | };
510 |
511 | ReactElement.cloneAndReplaceProps = function(oldElement, newProps) {
512 | var newElement = new ReactElement(
513 | oldElement.type,
514 | oldElement.key,
515 | oldElement.ref,
516 | oldElement._owner,
517 | oldElement._context,
518 | newProps
519 | );
520 |
521 | if ("production" !== "production") {
522 | // If the key on the original is valid, then the clone is valid
523 | newElement._store.validated = oldElement._store.validated;
524 | }
525 | return newElement;
526 | };
527 |
528 | /**
529 | * @param {?object} object
530 | * @return {boolean} True if `object` is a valid component.
531 | * @final
532 | */
533 | ReactElement.isValidElement = function(object) {
534 | // ReactTestUtils is often used outside of beforeEach where as React is
535 | // within it. This leads to two different instances of React on the same
536 | // page. To identify a element from a different React instance we use
537 | // a flag instead of an instanceof check.
538 | var isElement = !!(object && object._isReactElement);
539 | // if (isElement && !(object instanceof ReactElement)) {
540 | // This is an indicator that you're using multiple versions of React at the
541 | // same time. This will screw with ownership and stuff. Fix it, please.
542 | // TODO: We could possibly warn here.
543 | // }
544 | return isElement;
545 | };
546 |
547 | module.exports = ReactElement;
548 |
549 | },{"./ReactContext":4,"./ReactCurrentOwner":5,"./warning":13}],7:[function(_dereq_,module,exports){
550 | /**
551 | * Copyright 2013-2014, Facebook, Inc.
552 | * All rights reserved.
553 | *
554 | * This source code is licensed under the BSD-style license found in the
555 | * LICENSE file in the root directory of this source tree. An additional grant
556 | * of patent rights can be found in the PATENTS file in the same directory.
557 | *
558 | * @providesModule ReactPropTransferer
559 | */
560 |
561 | "use strict";
562 |
563 | var assign = _dereq_("./Object.assign");
564 | var emptyFunction = _dereq_("./emptyFunction");
565 | var invariant = _dereq_("./invariant");
566 | var joinClasses = _dereq_("./joinClasses");
567 | var warning = _dereq_("./warning");
568 |
569 | var didWarn = false;
570 |
571 | /**
572 | * Creates a transfer strategy that will merge prop values using the supplied
573 | * `mergeStrategy`. If a prop was previously unset, this just sets it.
574 | *
575 | * @param {function} mergeStrategy
576 | * @return {function}
577 | */
578 | function createTransferStrategy(mergeStrategy) {
579 | return function(props, key, value) {
580 | if (!props.hasOwnProperty(key)) {
581 | props[key] = value;
582 | } else {
583 | props[key] = mergeStrategy(props[key], value);
584 | }
585 | };
586 | }
587 |
588 | var transferStrategyMerge = createTransferStrategy(function(a, b) {
589 | // `merge` overrides the first object's (`props[key]` above) keys using the
590 | // second object's (`value`) keys. An object's style's existing `propA` would
591 | // get overridden. Flip the order here.
592 | return assign({}, b, a);
593 | });
594 |
595 | /**
596 | * Transfer strategies dictate how props are transferred by `transferPropsTo`.
597 | * NOTE: if you add any more exceptions to this list you should be sure to
598 | * update `cloneWithProps()` accordingly.
599 | */
600 | var TransferStrategies = {
601 | /**
602 | * Never transfer `children`.
603 | */
604 | children: emptyFunction,
605 | /**
606 | * Transfer the `className` prop by merging them.
607 | */
608 | className: createTransferStrategy(joinClasses),
609 | /**
610 | * Transfer the `style` prop (which is an object) by merging them.
611 | */
612 | style: transferStrategyMerge
613 | };
614 |
615 | /**
616 | * Mutates the first argument by transferring the properties from the second
617 | * argument.
618 | *
619 | * @param {object} props
620 | * @param {object} newProps
621 | * @return {object}
622 | */
623 | function transferInto(props, newProps) {
624 | for (var thisKey in newProps) {
625 | if (!newProps.hasOwnProperty(thisKey)) {
626 | continue;
627 | }
628 |
629 | var transferStrategy = TransferStrategies[thisKey];
630 |
631 | if (transferStrategy && TransferStrategies.hasOwnProperty(thisKey)) {
632 | transferStrategy(props, thisKey, newProps[thisKey]);
633 | } else if (!props.hasOwnProperty(thisKey)) {
634 | props[thisKey] = newProps[thisKey];
635 | }
636 | }
637 | return props;
638 | }
639 |
640 | /**
641 | * ReactPropTransferer are capable of transferring props to another component
642 | * using a `transferPropsTo` method.
643 | *
644 | * @class ReactPropTransferer
645 | */
646 | var ReactPropTransferer = {
647 |
648 | TransferStrategies: TransferStrategies,
649 |
650 | /**
651 | * Merge two props objects using TransferStrategies.
652 | *
653 | * @param {object} oldProps original props (they take precedence)
654 | * @param {object} newProps new props to merge in
655 | * @return {object} a new object containing both sets of props merged.
656 | */
657 | mergeProps: function(oldProps, newProps) {
658 | return transferInto(assign({}, oldProps), newProps);
659 | },
660 |
661 | /**
662 | * @lends {ReactPropTransferer.prototype}
663 | */
664 | Mixin: {
665 |
666 | /**
667 | * Transfer props from this component to a target component.
668 | *
669 | * Props that do not have an explicit transfer strategy will be transferred
670 | * only if the target component does not already have the prop set.
671 | *
672 | * This is usually used to pass down props to a returned root component.
673 | *
674 | * @param {ReactElement} element Component receiving the properties.
675 | * @return {ReactElement} The supplied `component`.
676 | * @final
677 | * @protected
678 | */
679 | transferPropsTo: function(element) {
680 | ("production" !== "production" ? invariant(
681 | element._owner === this,
682 | '%s: You can\'t call transferPropsTo() on a component that you ' +
683 | 'don\'t own, %s. This usually means you are calling ' +
684 | 'transferPropsTo() on a component passed in as props or children.',
685 | this.constructor.displayName,
686 | typeof element.type === 'string' ?
687 | element.type :
688 | element.type.displayName
689 | ) : invariant(element._owner === this));
690 |
691 | if ("production" !== "production") {
692 | if (!didWarn) {
693 | didWarn = true;
694 | ("production" !== "production" ? warning(
695 | false,
696 | 'transferPropsTo is deprecated. ' +
697 | 'See http://fb.me/react-transferpropsto for more information.'
698 | ) : null);
699 | }
700 | }
701 |
702 | // Because elements are immutable we have to merge into the existing
703 | // props object rather than clone it.
704 | transferInto(element.props, this.props);
705 |
706 | return element;
707 | }
708 |
709 | }
710 | };
711 |
712 | module.exports = ReactPropTransferer;
713 |
714 | },{"./Object.assign":3,"./emptyFunction":9,"./invariant":10,"./joinClasses":11,"./warning":13}],8:[function(_dereq_,module,exports){
715 | /**
716 | * Copyright 2013-2014, Facebook, Inc.
717 | * All rights reserved.
718 | *
719 | * This source code is licensed under the BSD-style license found in the
720 | * LICENSE file in the root directory of this source tree. An additional grant
721 | * of patent rights can be found in the PATENTS file in the same directory.
722 | *
723 | * @typechecks
724 | * @providesModule cloneWithProps
725 | */
726 |
727 | "use strict";
728 |
729 | var ReactElement = _dereq_("./ReactElement");
730 | var ReactPropTransferer = _dereq_("./ReactPropTransferer");
731 |
732 | var keyOf = _dereq_("./keyOf");
733 | var warning = _dereq_("./warning");
734 |
735 | var CHILDREN_PROP = keyOf({children: null});
736 |
737 | /**
738 | * Sometimes you want to change the props of a child passed to you. Usually
739 | * this is to add a CSS class.
740 | *
741 | * @param {object} child child component you'd like to clone
742 | * @param {object} props props you'd like to modify. They will be merged
743 | * as if you used `transferPropsTo()`.
744 | * @return {object} a clone of child with props merged in.
745 | */
746 | function cloneWithProps(child, props) {
747 | if ("production" !== "production") {
748 | ("production" !== "production" ? warning(
749 | !child.ref,
750 | 'You are calling cloneWithProps() on a child with a ref. This is ' +
751 | 'dangerous because you\'re creating a new child which will not be ' +
752 | 'added as a ref to its parent.'
753 | ) : null);
754 | }
755 |
756 | var newProps = ReactPropTransferer.mergeProps(props, child.props);
757 |
758 | // Use `child.props.children` if it is provided.
759 | if (!newProps.hasOwnProperty(CHILDREN_PROP) &&
760 | child.props.hasOwnProperty(CHILDREN_PROP)) {
761 | newProps.children = child.props.children;
762 | }
763 |
764 | // The current API doesn't retain _owner and _context, which is why this
765 | // doesn't use ReactElement.cloneAndReplaceProps.
766 | return ReactElement.createElement(child.type, newProps);
767 | }
768 |
769 | module.exports = cloneWithProps;
770 |
771 | },{"./ReactElement":6,"./ReactPropTransferer":7,"./keyOf":12,"./warning":13}],9:[function(_dereq_,module,exports){
772 | /**
773 | * Copyright 2013-2014, Facebook, Inc.
774 | * All rights reserved.
775 | *
776 | * This source code is licensed under the BSD-style license found in the
777 | * LICENSE file in the root directory of this source tree. An additional grant
778 | * of patent rights can be found in the PATENTS file in the same directory.
779 | *
780 | * @providesModule emptyFunction
781 | */
782 |
783 | function makeEmptyFunction(arg) {
784 | return function() {
785 | return arg;
786 | };
787 | }
788 |
789 | /**
790 | * This function accepts and discards inputs; it has no side effects. This is
791 | * primarily useful idiomatically for overridable function endpoints which
792 | * always need to be callable, since JS lacks a null-call idiom ala Cocoa.
793 | */
794 | function emptyFunction() {}
795 |
796 | emptyFunction.thatReturns = makeEmptyFunction;
797 | emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
798 | emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
799 | emptyFunction.thatReturnsNull = makeEmptyFunction(null);
800 | emptyFunction.thatReturnsThis = function() { return this; };
801 | emptyFunction.thatReturnsArgument = function(arg) { return arg; };
802 |
803 | module.exports = emptyFunction;
804 |
805 | },{}],10:[function(_dereq_,module,exports){
806 | /**
807 | * Copyright 2013-2014, Facebook, Inc.
808 | * All rights reserved.
809 | *
810 | * This source code is licensed under the BSD-style license found in the
811 | * LICENSE file in the root directory of this source tree. An additional grant
812 | * of patent rights can be found in the PATENTS file in the same directory.
813 | *
814 | * @providesModule invariant
815 | */
816 |
817 | "use strict";
818 |
819 | /**
820 | * Use invariant() to assert state which your program assumes to be true.
821 | *
822 | * Provide sprintf-style format (only %s is supported) and arguments
823 | * to provide information about what broke and what you were
824 | * expecting.
825 | *
826 | * The invariant message will be stripped in production, but the invariant
827 | * will remain to ensure logic does not differ in production.
828 | */
829 |
830 | var invariant = function(condition, format, a, b, c, d, e, f) {
831 | if ("production" !== "production") {
832 | if (format === undefined) {
833 | throw new Error('invariant requires an error message argument');
834 | }
835 | }
836 |
837 | if (!condition) {
838 | var error;
839 | if (format === undefined) {
840 | error = new Error(
841 | 'Minified exception occurred; use the non-minified dev environment ' +
842 | 'for the full error message and additional helpful warnings.'
843 | );
844 | } else {
845 | var args = [a, b, c, d, e, f];
846 | var argIndex = 0;
847 | error = new Error(
848 | 'Invariant Violation: ' +
849 | format.replace(/%s/g, function() { return args[argIndex++]; })
850 | );
851 | }
852 |
853 | error.framesToPop = 1; // we don't care about invariant's own frame
854 | throw error;
855 | }
856 | };
857 |
858 | module.exports = invariant;
859 |
860 | },{}],11:[function(_dereq_,module,exports){
861 | /**
862 | * Copyright 2013-2014, Facebook, Inc.
863 | * All rights reserved.
864 | *
865 | * This source code is licensed under the BSD-style license found in the
866 | * LICENSE file in the root directory of this source tree. An additional grant
867 | * of patent rights can be found in the PATENTS file in the same directory.
868 | *
869 | * @providesModule joinClasses
870 | * @typechecks static-only
871 | */
872 |
873 | "use strict";
874 |
875 | /**
876 | * Combines multiple className strings into one.
877 | * http://jsperf.com/joinclasses-args-vs-array
878 | *
879 | * @param {...?string} classes
880 | * @return {string}
881 | */
882 | function joinClasses(className/*, ... */) {
883 | if (!className) {
884 | className = '';
885 | }
886 | var nextClass;
887 | var argLength = arguments.length;
888 | if (argLength > 1) {
889 | for (var ii = 1; ii < argLength; ii++) {
890 | nextClass = arguments[ii];
891 | if (nextClass) {
892 | className = (className ? className + ' ' : '') + nextClass;
893 | }
894 | }
895 | }
896 | return className;
897 | }
898 |
899 | module.exports = joinClasses;
900 |
901 | },{}],12:[function(_dereq_,module,exports){
902 | /**
903 | * Copyright 2013-2014, Facebook, Inc.
904 | * All rights reserved.
905 | *
906 | * This source code is licensed under the BSD-style license found in the
907 | * LICENSE file in the root directory of this source tree. An additional grant
908 | * of patent rights can be found in the PATENTS file in the same directory.
909 | *
910 | * @providesModule keyOf
911 | */
912 |
913 | /**
914 | * Allows extraction of a minified key. Let's the build system minify keys
915 | * without loosing the ability to dynamically use key strings as values
916 | * themselves. Pass in an object with a single key/val pair and it will return
917 | * you the string key of that single record. Suppose you want to grab the
918 | * value for a key 'className' inside of an object. Key/val minification may
919 | * have aliased that key to be 'xa12'. keyOf({className: null}) will return
920 | * 'xa12' in that case. Resolve keys you want to use once at startup time, then
921 | * reuse those resolutions.
922 | */
923 | var keyOf = function(oneKeyObj) {
924 | var key;
925 | for (key in oneKeyObj) {
926 | if (!oneKeyObj.hasOwnProperty(key)) {
927 | continue;
928 | }
929 | return key;
930 | }
931 | return null;
932 | };
933 |
934 |
935 | module.exports = keyOf;
936 |
937 | },{}],13:[function(_dereq_,module,exports){
938 | /**
939 | * Copyright 2014, Facebook, Inc.
940 | * All rights reserved.
941 | *
942 | * This source code is licensed under the BSD-style license found in the
943 | * LICENSE file in the root directory of this source tree. An additional grant
944 | * of patent rights can be found in the PATENTS file in the same directory.
945 | *
946 | * @providesModule warning
947 | */
948 |
949 | "use strict";
950 |
951 | var emptyFunction = _dereq_("./emptyFunction");
952 |
953 | /**
954 | * Similar to invariant but only logs a warning if the condition is not met.
955 | * This can be used to log issues in development environments in critical
956 | * paths. Removing the logging code for production environments will keep the
957 | * same logic and follow the same code paths.
958 | */
959 |
960 | var warning = emptyFunction;
961 |
962 | if ("production" !== "production") {
963 | warning = function(condition, format ) {for (var args=[],$__0=2,$__1=arguments.length;$__0<$__1;$__0++) args.push(arguments[$__0]);
964 | if (format === undefined) {
965 | throw new Error(
966 | '`warning(condition, format, ...args)` requires a warning ' +
967 | 'message argument'
968 | );
969 | }
970 |
971 | if (!condition) {
972 | var argIndex = 0;
973 | console.warn('Warning: ' + format.replace(/%s/g, function() {return args[argIndex++];}));
974 | }
975 | };
976 | }
977 |
978 | module.exports = warning;
979 |
980 | },{"./emptyFunction":9}]},{},[2])
981 | (2)
982 | });
--------------------------------------------------------------------------------