├── .eslintignore
├── .npmignore
├── .gitignore
├── src
├── Tappable.js
├── touchStyles.js
├── Pinchable.js
├── TapAndPinchable.js
├── PinchableBaseMixin.js
├── getComponent.js
├── PinchableMixin.js
└── TappableMixin.js
├── lib
├── touchStyles.js
├── Tappable.js
├── Pinchable.js
├── TapAndPinchable.js
├── PinchableBaseMixin.js
├── getComponent.js
├── PinchableMixin.js
└── TappableMixin.js
├── .editorconfig
├── .eslintrc
├── gulpfile.js
├── bower.json
├── LICENSE
├── example
├── dist
│ ├── index.html
│ ├── pinch.html
│ ├── example.css
│ ├── pinch.js
│ └── example.js
└── src
│ ├── index.html
│ ├── pinch.html
│ ├── pinch.js
│ ├── example.less
│ └── example.js
├── package.json
├── CHANGES.md
├── README.md
└── dist
└── react-tappable.min.js
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist/*
2 | lib/*
3 | example/dist/*
4 | node_modules/*
5 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | bower.json
2 | dist/
3 | example
4 | gulpfile.js
5 | src/
6 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Coverage tools
11 | lib-cov
12 | coverage
13 |
14 | # Compiled binary addons (http://nodejs.org/api/addons.html)
15 | build/Release
16 |
17 | # Dependency directory
18 | node_modules
19 |
20 | # Deploy directory
21 | .publish
22 |
--------------------------------------------------------------------------------
/src/Tappable.js:
--------------------------------------------------------------------------------
1 | var TappableMixin = require('./TappableMixin');
2 | var getComponent = require('./getComponent');
3 | var touchStyles = require('./touchStyles');
4 |
5 | var Component = getComponent([TappableMixin]);
6 |
7 | module.exports = Component;
8 | module.exports.touchStyles = touchStyles;
9 | module.exports.Mixin = TappableMixin;
10 |
--------------------------------------------------------------------------------
/lib/touchStyles.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var touchStyles = {
4 | WebkitTapHighlightColor: 'rgba(0,0,0,0)',
5 | WebkitTouchCallout: 'none',
6 | WebkitUserSelect: 'none',
7 | KhtmlUserSelect: 'none',
8 | MozUserSelect: 'none',
9 | msUserSelect: 'none',
10 | userSelect: 'none',
11 | cursor: 'pointer'
12 | };
13 |
14 | module.exports = touchStyles;
--------------------------------------------------------------------------------
/lib/Tappable.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var TappableMixin = require('./TappableMixin');
4 | var getComponent = require('./getComponent');
5 | var touchStyles = require('./touchStyles');
6 |
7 | var Component = getComponent([TappableMixin]);
8 |
9 | module.exports = Component;
10 | module.exports.touchStyles = touchStyles;
11 | module.exports.Mixin = TappableMixin;
--------------------------------------------------------------------------------
/src/touchStyles.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var touchStyles = {
4 | WebkitTapHighlightColor: 'rgba(0,0,0,0)',
5 | WebkitTouchCallout: 'none',
6 | WebkitUserSelect: 'none',
7 | KhtmlUserSelect: 'none',
8 | MozUserSelect: 'none',
9 | msUserSelect: 'none',
10 | userSelect: 'none',
11 | cursor: 'pointer'
12 | };
13 |
14 | module.exports = touchStyles;
15 |
--------------------------------------------------------------------------------
/src/Pinchable.js:
--------------------------------------------------------------------------------
1 | var PinchableBaseMixin = require('./PinchableBaseMixin');
2 | var PinchableMixin = require('./PinchableMixin');
3 | var getComponent = require('./getComponent');
4 | var touchStyles = require('./touchStyles');
5 |
6 | var Component = getComponent([PinchableBaseMixin, PinchableMixin]);
7 |
8 | module.exports = Component;
9 | module.exports.touchStyles = touchStyles;
10 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # This file is for unifying the coding style for different editors and IDEs
2 | # editorconfig.org
3 | root = true
4 |
5 | [*]
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 | indent_style = tab
11 |
12 | [*.json]
13 | indent_style = space
14 | indent_size = 2
15 |
16 | [*.yml]
17 | indent_style = space
18 | indent_size = 2
19 |
--------------------------------------------------------------------------------
/lib/Pinchable.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var PinchableBaseMixin = require('./PinchableBaseMixin');
4 | var PinchableMixin = require('./PinchableMixin');
5 | var getComponent = require('./getComponent');
6 | var touchStyles = require('./touchStyles');
7 |
8 | var Component = getComponent([PinchableBaseMixin, PinchableMixin]);
9 |
10 | module.exports = Component;
11 | module.exports.touchStyles = touchStyles;
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "env": {
4 | "browser": true,
5 | "node": true
6 | },
7 | "plugins": [
8 | "react"
9 | ],
10 | "rules": {
11 | "curly": [2, "multi-line"],
12 | "no-shadow": 0,
13 | "no-underscore-dangle": 0,
14 | "no-unused-expressions": 0,
15 | "quotes": [2, "single", "avoid-escape"],
16 | "react/jsx-uses-react": 1,
17 | "react/jsx-uses-vars": 1,
18 | "react/react-in-jsx-scope": 1,
19 | "semi": 2,
20 | "strict": 0
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/TapAndPinchable.js:
--------------------------------------------------------------------------------
1 | var TappableMixin = require('./TappableMixin');
2 | var PinchableMixin = require('./PinchableMixin');
3 | var getComponent = require('./getComponent');
4 | var touchStyles = require('./touchStyles');
5 |
6 | var Component = getComponent([TappableMixin, PinchableMixin]);
7 |
8 | module.exports = Component;
9 | module.exports.touchStyles = touchStyles;
10 | module.exports.Mixin = Object.assign({}, TappableMixin, {
11 | onPinchStart: PinchableMixin.onPinchStart,
12 | onPinchMove: PinchableMixin.onPinchMove,
13 | onPinchEnd: PinchableMixin.onPinchEnd
14 | });
15 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var initGulpTasks = require('react-component-gulp-tasks');
3 |
4 | var taskConfig = {
5 |
6 | component: {
7 | name: 'Tappable',
8 | dependencies: [
9 | 'react',
10 | 'react-dom'
11 | ]
12 | },
13 |
14 | example: {
15 | src: 'example/src',
16 | dist: 'example/dist',
17 | files: [
18 | 'index.html',
19 | 'pinch.html',
20 | '.gitignore'
21 | ],
22 | scripts: [
23 | 'example.js',
24 | 'pinch.js'
25 | ],
26 | less: [
27 | 'example.less'
28 | ]
29 | }
30 |
31 | };
32 |
33 | initGulpTasks(gulp, taskConfig);
34 |
--------------------------------------------------------------------------------
/lib/TapAndPinchable.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var TappableMixin = require('./TappableMixin');
4 | var PinchableMixin = require('./PinchableMixin');
5 | var getComponent = require('./getComponent');
6 | var touchStyles = require('./touchStyles');
7 |
8 | var Component = getComponent([TappableMixin, PinchableMixin]);
9 |
10 | module.exports = Component;
11 | module.exports.touchStyles = touchStyles;
12 | module.exports.Mixin = Object.assign({}, TappableMixin, {
13 | onPinchStart: PinchableMixin.onPinchStart,
14 | onPinchMove: PinchableMixin.onPinchMove,
15 | onPinchEnd: PinchableMixin.onPinchEnd
16 | });
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-tappable",
3 | "main": "dist/react-tappable.min.js",
4 | "version": "1.0.0",
5 | "homepage": "https://github.com/JedWatson/react-tappable",
6 | "authors": [
7 | "Jed Watson"
8 | ],
9 | "description": "Touch / Tappable Event Handling Component for React",
10 | "moduleType": [
11 | "amd",
12 | "globals",
13 | "node"
14 | ],
15 | "keywords": [
16 | "react",
17 | "react-component",
18 | "tap",
19 | "tappable",
20 | "touch",
21 | "mobile"
22 | ],
23 | "license": "MIT",
24 | "ignore": [
25 | ".editorconfig",
26 | ".gitignore",
27 | "package.json",
28 | "src",
29 | "node_modules",
30 | "example",
31 | "test"
32 | ]
33 | }
34 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Jed Watson
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/example/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | React-Tappable Example
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
React Tappable
15 |
16 |
17 |
18 | Events in the area on the left will be logged on the right.
19 | Toggle scrolling to test event cancel on scroll (touch devices only).
20 |
21 |
24 |
14 |
React Tappable
15 |
16 |
17 |
18 | Events in the area on the left will be logged on the right.
19 | Toggle scrolling to test event cancel on scroll (touch devices only).
20 |
21 |
24 |
14 |
React Tappable
15 |
16 |
17 |
18 | Events in the area on the left will be logged on the right.
19 | Toggle scrolling to test event cancel on scroll (touch devices only).
20 |
21 |
24 |
14 |
React Tappable
15 |
16 |
17 |
18 | Events in the area on the left will be logged on the right.
19 | Toggle scrolling to test event cancel on scroll (touch devices only).
20 |
21 |
24 |
31 |
32 |
Tappable area:
33 |
34 | Touch me
35 | Nested Pinchable
36 |
37 |
38 |
39 |
Event log:
40 |
41 | {this.state.events.map(function (ev, i) {
42 | return
{ev}
;
43 | })}
44 |
45 |
46 |
50 |
51 |
52 | Toggle Scrolling: {this.state.scrolling ? 'on' : 'off'}
53 |
54 |
55 |
56 |
Tappable area:
57 | Tappable Button
58 |
59 | Touch me
60 | Nested Tappable
61 |
62 |
63 |
64 |
Event log:
65 |
66 | {this.state.events.map(function (ev, i) {
67 | return
{ev}
;
68 | })}
69 |
70 |
71 |
Hello, {name}!
;
240 | * }
241 | *
242 | * @return {ReactComponent}
243 | * @required
244 | */
245 | render: 'DEFINE_ONCE',
246 |
247 | // ==== Delegate methods ====
248 |
249 | /**
250 | * Invoked when the component is initially created and about to be mounted.
251 | * This may have side effects, but any external subscriptions or data created
252 | * by this method must be cleaned up in `componentWillUnmount`.
253 | *
254 | * @optional
255 | */
256 | componentWillMount: 'DEFINE_MANY',
257 |
258 | /**
259 | * Invoked when the component has been mounted and has a DOM representation.
260 | * However, there is no guarantee that the DOM node is in the document.
261 | *
262 | * Use this as an opportunity to operate on the DOM when the component has
263 | * been mounted (initialized and rendered) for the first time.
264 | *
265 | * @param {DOMElement} rootNode DOM element representing the component.
266 | * @optional
267 | */
268 | componentDidMount: 'DEFINE_MANY',
269 |
270 | /**
271 | * Invoked before the component receives new props.
272 | *
273 | * Use this as an opportunity to react to a prop transition by updating the
274 | * state using `this.setState`. Current props are accessed via `this.props`.
275 | *
276 | * componentWillReceiveProps: function(nextProps, nextContext) {
277 | * this.setState({
278 | * likesIncreasing: nextProps.likeCount > this.props.likeCount
279 | * });
280 | * }
281 | *
282 | * NOTE: There is no equivalent `componentWillReceiveState`. An incoming prop
283 | * transition may cause a state change, but the opposite is not true. If you
284 | * need it, you are probably looking for `componentWillUpdate`.
285 | *
286 | * @param {object} nextProps
287 | * @optional
288 | */
289 | componentWillReceiveProps: 'DEFINE_MANY',
290 |
291 | /**
292 | * Invoked while deciding if the component should be updated as a result of
293 | * receiving new props, state and/or context.
294 | *
295 | * Use this as an opportunity to `return false` when you're certain that the
296 | * transition to the new props/state/context will not require a component
297 | * update.
298 | *
299 | * shouldComponentUpdate: function(nextProps, nextState, nextContext) {
300 | * return !equal(nextProps, this.props) ||
301 | * !equal(nextState, this.state) ||
302 | * !equal(nextContext, this.context);
303 | * }
304 | *
305 | * @param {object} nextProps
306 | * @param {?object} nextState
307 | * @param {?object} nextContext
308 | * @return {boolean} True if the component should update.
309 | * @optional
310 | */
311 | shouldComponentUpdate: 'DEFINE_ONCE',
312 |
313 | /**
314 | * Invoked when the component is about to update due to a transition from
315 | * `this.props`, `this.state` and `this.context` to `nextProps`, `nextState`
316 | * and `nextContext`.
317 | *
318 | * Use this as an opportunity to perform preparation before an update occurs.
319 | *
320 | * NOTE: You **cannot** use `this.setState()` in this method.
321 | *
322 | * @param {object} nextProps
323 | * @param {?object} nextState
324 | * @param {?object} nextContext
325 | * @param {ReactReconcileTransaction} transaction
326 | * @optional
327 | */
328 | componentWillUpdate: 'DEFINE_MANY',
329 |
330 | /**
331 | * Invoked when the component's DOM representation has been updated.
332 | *
333 | * Use this as an opportunity to operate on the DOM when the component has
334 | * been updated.
335 | *
336 | * @param {object} prevProps
337 | * @param {?object} prevState
338 | * @param {?object} prevContext
339 | * @param {DOMElement} rootNode DOM element representing the component.
340 | * @optional
341 | */
342 | componentDidUpdate: 'DEFINE_MANY',
343 |
344 | /**
345 | * Invoked when the component is about to be removed from its parent and have
346 | * its DOM representation destroyed.
347 | *
348 | * Use this as an opportunity to deallocate any external resources.
349 | *
350 | * NOTE: There is no `componentDidUnmount` since your component will have been
351 | * destroyed by that point.
352 | *
353 | * @optional
354 | */
355 | componentWillUnmount: 'DEFINE_MANY',
356 |
357 | // ==== Advanced methods ====
358 |
359 | /**
360 | * Updates the component's currently mounted DOM representation.
361 | *
362 | * By default, this implements React's rendering and reconciliation algorithm.
363 | * Sophisticated clients may wish to override this.
364 | *
365 | * @param {ReactReconcileTransaction} transaction
366 | * @internal
367 | * @overridable
368 | */
369 | updateComponent: 'OVERRIDE_BASE'
370 | };
371 |
372 | /**
373 | * Mapping from class specification keys to special processing functions.
374 | *
375 | * Although these are declared like instance properties in the specification
376 | * when defining classes using `React.createClass`, they are actually static
377 | * and are accessible on the constructor instead of the prototype. Despite
378 | * being static, they must be defined outside of the "statics" key under
379 | * which all other static methods are defined.
380 | */
381 | var RESERVED_SPEC_KEYS = {
382 | displayName: function(Constructor, displayName) {
383 | Constructor.displayName = displayName;
384 | },
385 | mixins: function(Constructor, mixins) {
386 | if (mixins) {
387 | for (var i = 0; i < mixins.length; i++) {
388 | mixSpecIntoComponent(Constructor, mixins[i]);
389 | }
390 | }
391 | },
392 | childContextTypes: function(Constructor, childContextTypes) {
393 | if ("production" !== 'production') {
394 | validateTypeDef(Constructor, childContextTypes, 'childContext');
395 | }
396 | Constructor.childContextTypes = _assign(
397 | {},
398 | Constructor.childContextTypes,
399 | childContextTypes
400 | );
401 | },
402 | contextTypes: function(Constructor, contextTypes) {
403 | if ("production" !== 'production') {
404 | validateTypeDef(Constructor, contextTypes, 'context');
405 | }
406 | Constructor.contextTypes = _assign(
407 | {},
408 | Constructor.contextTypes,
409 | contextTypes
410 | );
411 | },
412 | /**
413 | * Special case getDefaultProps which should move into statics but requires
414 | * automatic merging.
415 | */
416 | getDefaultProps: function(Constructor, getDefaultProps) {
417 | if (Constructor.getDefaultProps) {
418 | Constructor.getDefaultProps = createMergedResultFunction(
419 | Constructor.getDefaultProps,
420 | getDefaultProps
421 | );
422 | } else {
423 | Constructor.getDefaultProps = getDefaultProps;
424 | }
425 | },
426 | propTypes: function(Constructor, propTypes) {
427 | if ("production" !== 'production') {
428 | validateTypeDef(Constructor, propTypes, 'prop');
429 | }
430 | Constructor.propTypes = _assign({}, Constructor.propTypes, propTypes);
431 | },
432 | statics: function(Constructor, statics) {
433 | mixStaticSpecIntoComponent(Constructor, statics);
434 | },
435 | autobind: function() {}
436 | };
437 |
438 | function validateTypeDef(Constructor, typeDef, location) {
439 | for (var propName in typeDef) {
440 | if (typeDef.hasOwnProperty(propName)) {
441 | // use a warning instead of an _invariant so components
442 | // don't show up in prod but only in __DEV__
443 | if ("production" !== 'production') {
444 | warning(
445 | typeof typeDef[propName] === 'function',
446 | '%s: %s type `%s` is invalid; it must be a function, usually from ' +
447 | 'React.PropTypes.',
448 | Constructor.displayName || 'ReactClass',
449 | ReactPropTypeLocationNames[location],
450 | propName
451 | );
452 | }
453 | }
454 | }
455 | }
456 |
457 | function validateMethodOverride(isAlreadyDefined, name) {
458 | var specPolicy = ReactClassInterface.hasOwnProperty(name)
459 | ? ReactClassInterface[name]
460 | : null;
461 |
462 | // Disallow overriding of base class methods unless explicitly allowed.
463 | if (ReactClassMixin.hasOwnProperty(name)) {
464 | _invariant(
465 | specPolicy === 'OVERRIDE_BASE',
466 | 'ReactClassInterface: You are attempting to override ' +
467 | '`%s` from your class specification. Ensure that your method names ' +
468 | 'do not overlap with React methods.',
469 | name
470 | );
471 | }
472 |
473 | // Disallow defining methods more than once unless explicitly allowed.
474 | if (isAlreadyDefined) {
475 | _invariant(
476 | specPolicy === 'DEFINE_MANY' || specPolicy === 'DEFINE_MANY_MERGED',
477 | 'ReactClassInterface: You are attempting to define ' +
478 | '`%s` on your component more than once. This conflict may be due ' +
479 | 'to a mixin.',
480 | name
481 | );
482 | }
483 | }
484 |
485 | /**
486 | * Mixin helper which handles policy validation and reserved
487 | * specification keys when building React classes.
488 | */
489 | function mixSpecIntoComponent(Constructor, spec) {
490 | if (!spec) {
491 | if ("production" !== 'production') {
492 | var typeofSpec = typeof spec;
493 | var isMixinValid = typeofSpec === 'object' && spec !== null;
494 |
495 | if ("production" !== 'production') {
496 | warning(
497 | isMixinValid,
498 | "%s: You're attempting to include a mixin that is either null " +
499 | 'or not an object. Check the mixins included by the component, ' +
500 | 'as well as any mixins they include themselves. ' +
501 | 'Expected object but got %s.',
502 | Constructor.displayName || 'ReactClass',
503 | spec === null ? null : typeofSpec
504 | );
505 | }
506 | }
507 |
508 | return;
509 | }
510 |
511 | _invariant(
512 | typeof spec !== 'function',
513 | "ReactClass: You're attempting to " +
514 | 'use a component class or function as a mixin. Instead, just use a ' +
515 | 'regular object.'
516 | );
517 | _invariant(
518 | !isValidElement(spec),
519 | "ReactClass: You're attempting to " +
520 | 'use a component as a mixin. Instead, just use a regular object.'
521 | );
522 |
523 | var proto = Constructor.prototype;
524 | var autoBindPairs = proto.__reactAutoBindPairs;
525 |
526 | // By handling mixins before any other properties, we ensure the same
527 | // chaining order is applied to methods with DEFINE_MANY policy, whether
528 | // mixins are listed before or after these methods in the spec.
529 | if (spec.hasOwnProperty(MIXINS_KEY)) {
530 | RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins);
531 | }
532 |
533 | for (var name in spec) {
534 | if (!spec.hasOwnProperty(name)) {
535 | continue;
536 | }
537 |
538 | if (name === MIXINS_KEY) {
539 | // We have already handled mixins in a special case above.
540 | continue;
541 | }
542 |
543 | var property = spec[name];
544 | var isAlreadyDefined = proto.hasOwnProperty(name);
545 | validateMethodOverride(isAlreadyDefined, name);
546 |
547 | if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {
548 | RESERVED_SPEC_KEYS[name](Constructor, property);
549 | } else {
550 | // Setup methods on prototype:
551 | // The following member methods should not be automatically bound:
552 | // 1. Expected ReactClass methods (in the "interface").
553 | // 2. Overridden methods (that were mixed in).
554 | var isReactClassMethod = ReactClassInterface.hasOwnProperty(name);
555 | var isFunction = typeof property === 'function';
556 | var shouldAutoBind =
557 | isFunction &&
558 | !isReactClassMethod &&
559 | !isAlreadyDefined &&
560 | spec.autobind !== false;
561 |
562 | if (shouldAutoBind) {
563 | autoBindPairs.push(name, property);
564 | proto[name] = property;
565 | } else {
566 | if (isAlreadyDefined) {
567 | var specPolicy = ReactClassInterface[name];
568 |
569 | // These cases should already be caught by validateMethodOverride.
570 | _invariant(
571 | isReactClassMethod &&
572 | (specPolicy === 'DEFINE_MANY_MERGED' ||
573 | specPolicy === 'DEFINE_MANY'),
574 | 'ReactClass: Unexpected spec policy %s for key %s ' +
575 | 'when mixing in component specs.',
576 | specPolicy,
577 | name
578 | );
579 |
580 | // For methods which are defined more than once, call the existing
581 | // methods before calling the new property, merging if appropriate.
582 | if (specPolicy === 'DEFINE_MANY_MERGED') {
583 | proto[name] = createMergedResultFunction(proto[name], property);
584 | } else if (specPolicy === 'DEFINE_MANY') {
585 | proto[name] = createChainedFunction(proto[name], property);
586 | }
587 | } else {
588 | proto[name] = property;
589 | if ("production" !== 'production') {
590 | // Add verbose displayName to the function, which helps when looking
591 | // at profiling tools.
592 | if (typeof property === 'function' && spec.displayName) {
593 | proto[name].displayName = spec.displayName + '_' + name;
594 | }
595 | }
596 | }
597 | }
598 | }
599 | }
600 | }
601 |
602 | function mixStaticSpecIntoComponent(Constructor, statics) {
603 | if (!statics) {
604 | return;
605 | }
606 | for (var name in statics) {
607 | var property = statics[name];
608 | if (!statics.hasOwnProperty(name)) {
609 | continue;
610 | }
611 |
612 | var isReserved = name in RESERVED_SPEC_KEYS;
613 | _invariant(
614 | !isReserved,
615 | 'ReactClass: You are attempting to define a reserved ' +
616 | 'property, `%s`, that shouldn\'t be on the "statics" key. Define it ' +
617 | 'as an instance property instead; it will still be accessible on the ' +
618 | 'constructor.',
619 | name
620 | );
621 |
622 | var isInherited = name in Constructor;
623 | _invariant(
624 | !isInherited,
625 | 'ReactClass: You are attempting to define ' +
626 | '`%s` on your component more than once. This conflict may be ' +
627 | 'due to a mixin.',
628 | name
629 | );
630 | Constructor[name] = property;
631 | }
632 | }
633 |
634 | /**
635 | * Merge two objects, but throw if both contain the same key.
636 | *
637 | * @param {object} one The first object, which is mutated.
638 | * @param {object} two The second object
639 | * @return {object} one after it has been mutated to contain everything in two.
640 | */
641 | function mergeIntoWithNoDuplicateKeys(one, two) {
642 | _invariant(
643 | one && two && typeof one === 'object' && typeof two === 'object',
644 | 'mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.'
645 | );
646 |
647 | for (var key in two) {
648 | if (two.hasOwnProperty(key)) {
649 | _invariant(
650 | one[key] === undefined,
651 | 'mergeIntoWithNoDuplicateKeys(): ' +
652 | 'Tried to merge two objects with the same key: `%s`. This conflict ' +
653 | 'may be due to a mixin; in particular, this may be caused by two ' +
654 | 'getInitialState() or getDefaultProps() methods returning objects ' +
655 | 'with clashing keys.',
656 | key
657 | );
658 | one[key] = two[key];
659 | }
660 | }
661 | return one;
662 | }
663 |
664 | /**
665 | * Creates a function that invokes two functions and merges their return values.
666 | *
667 | * @param {function} one Function to invoke first.
668 | * @param {function} two Function to invoke second.
669 | * @return {function} Function that invokes the two argument functions.
670 | * @private
671 | */
672 | function createMergedResultFunction(one, two) {
673 | return function mergedResult() {
674 | var a = one.apply(this, arguments);
675 | var b = two.apply(this, arguments);
676 | if (a == null) {
677 | return b;
678 | } else if (b == null) {
679 | return a;
680 | }
681 | var c = {};
682 | mergeIntoWithNoDuplicateKeys(c, a);
683 | mergeIntoWithNoDuplicateKeys(c, b);
684 | return c;
685 | };
686 | }
687 |
688 | /**
689 | * Creates a function that invokes two functions and ignores their return vales.
690 | *
691 | * @param {function} one Function to invoke first.
692 | * @param {function} two Function to invoke second.
693 | * @return {function} Function that invokes the two argument functions.
694 | * @private
695 | */
696 | function createChainedFunction(one, two) {
697 | return function chainedFunction() {
698 | one.apply(this, arguments);
699 | two.apply(this, arguments);
700 | };
701 | }
702 |
703 | /**
704 | * Binds a method to the component.
705 | *
706 | * @param {object} component Component whose method is going to be bound.
707 | * @param {function} method Method to be bound.
708 | * @return {function} The bound method.
709 | */
710 | function bindAutoBindMethod(component, method) {
711 | var boundMethod = method.bind(component);
712 | if ("production" !== 'production') {
713 | boundMethod.__reactBoundContext = component;
714 | boundMethod.__reactBoundMethod = method;
715 | boundMethod.__reactBoundArguments = null;
716 | var componentName = component.constructor.displayName;
717 | var _bind = boundMethod.bind;
718 | boundMethod.bind = function(newThis) {
719 | for (
720 | var _len = arguments.length,
721 | args = Array(_len > 1 ? _len - 1 : 0),
722 | _key = 1;
723 | _key < _len;
724 | _key++
725 | ) {
726 | args[_key - 1] = arguments[_key];
727 | }
728 |
729 | // User is trying to bind() an autobound method; we effectively will
730 | // ignore the value of "this" that the user is trying to use, so
731 | // let's warn.
732 | if (newThis !== component && newThis !== null) {
733 | if ("production" !== 'production') {
734 | warning(
735 | false,
736 | 'bind(): React component methods may only be bound to the ' +
737 | 'component instance. See %s',
738 | componentName
739 | );
740 | }
741 | } else if (!args.length) {
742 | if ("production" !== 'production') {
743 | warning(
744 | false,
745 | 'bind(): You are binding a component method to the component. ' +
746 | 'React does this for you automatically in a high-performance ' +
747 | 'way, so you can safely remove this call. See %s',
748 | componentName
749 | );
750 | }
751 | return boundMethod;
752 | }
753 | var reboundMethod = _bind.apply(boundMethod, arguments);
754 | reboundMethod.__reactBoundContext = component;
755 | reboundMethod.__reactBoundMethod = method;
756 | reboundMethod.__reactBoundArguments = args;
757 | return reboundMethod;
758 | };
759 | }
760 | return boundMethod;
761 | }
762 |
763 | /**
764 | * Binds all auto-bound methods in a component.
765 | *
766 | * @param {object} component Component whose method is going to be bound.
767 | */
768 | function bindAutoBindMethods(component) {
769 | var pairs = component.__reactAutoBindPairs;
770 | for (var i = 0; i < pairs.length; i += 2) {
771 | var autoBindKey = pairs[i];
772 | var method = pairs[i + 1];
773 | component[autoBindKey] = bindAutoBindMethod(component, method);
774 | }
775 | }
776 |
777 | var IsMountedPreMixin = {
778 | componentDidMount: function() {
779 | this.__isMounted = true;
780 | }
781 | };
782 |
783 | var IsMountedPostMixin = {
784 | componentWillUnmount: function() {
785 | this.__isMounted = false;
786 | }
787 | };
788 |
789 | /**
790 | * Add more to the ReactClass base class. These are all legacy features and
791 | * therefore not already part of the modern ReactComponent.
792 | */
793 | var ReactClassMixin = {
794 | /**
795 | * TODO: This will be deprecated because state should always keep a consistent
796 | * type signature and the only use case for this, is to avoid that.
797 | */
798 | replaceState: function(newState, callback) {
799 | this.updater.enqueueReplaceState(this, newState, callback);
800 | },
801 |
802 | /**
803 | * Checks whether or not this composite component is mounted.
804 | * @return {boolean} True if mounted, false otherwise.
805 | * @protected
806 | * @final
807 | */
808 | isMounted: function() {
809 | if ("production" !== 'production') {
810 | warning(
811 | this.__didWarnIsMounted,
812 | '%s: isMounted is deprecated. Instead, make sure to clean up ' +
813 | 'subscriptions and pending requests in componentWillUnmount to ' +
814 | 'prevent memory leaks.',
815 | (this.constructor && this.constructor.displayName) ||
816 | this.name ||
817 | 'Component'
818 | );
819 | this.__didWarnIsMounted = true;
820 | }
821 | return !!this.__isMounted;
822 | }
823 | };
824 |
825 | var ReactClassComponent = function() {};
826 | _assign(
827 | ReactClassComponent.prototype,
828 | ReactComponent.prototype,
829 | ReactClassMixin
830 | );
831 |
832 | /**
833 | * Creates a composite component class given a class specification.
834 | * See https://facebook.github.io/react/docs/top-level-api.html#react.createclass
835 | *
836 | * @param {object} spec Class specification (which must define `render`).
837 | * @return {function} Component constructor function.
838 | * @public
839 | */
840 | function createClass(spec) {
841 | // To keep our warnings more understandable, we'll use a little hack here to
842 | // ensure that Constructor.name !== 'Constructor'. This makes sure we don't
843 | // unnecessarily identify a class without displayName as 'Constructor'.
844 | var Constructor = identity(function(props, context, updater) {
845 | // This constructor gets overridden by mocks. The argument is used
846 | // by mocks to assert on what gets mounted.
847 |
848 | if ("production" !== 'production') {
849 | warning(
850 | this instanceof Constructor,
851 | 'Something is calling a React component directly. Use a factory or ' +
852 | 'JSX instead. See: https://fb.me/react-legacyfactory'
853 | );
854 | }
855 |
856 | // Wire up auto-binding
857 | if (this.__reactAutoBindPairs.length) {
858 | bindAutoBindMethods(this);
859 | }
860 |
861 | this.props = props;
862 | this.context = context;
863 | this.refs = emptyObject;
864 | this.updater = updater || ReactNoopUpdateQueue;
865 |
866 | this.state = null;
867 |
868 | // ReactClasses doesn't have constructors. Instead, they use the
869 | // getInitialState and componentWillMount methods for initialization.
870 |
871 | var initialState = this.getInitialState ? this.getInitialState() : null;
872 | if ("production" !== 'production') {
873 | // We allow auto-mocks to proceed as if they're returning null.
874 | if (
875 | initialState === undefined &&
876 | this.getInitialState._isMockFunction
877 | ) {
878 | // This is probably bad practice. Consider warning here and
879 | // deprecating this convenience.
880 | initialState = null;
881 | }
882 | }
883 | _invariant(
884 | typeof initialState === 'object' && !Array.isArray(initialState),
885 | '%s.getInitialState(): must return an object or null',
886 | Constructor.displayName || 'ReactCompositeComponent'
887 | );
888 |
889 | this.state = initialState;
890 | });
891 | Constructor.prototype = new ReactClassComponent();
892 | Constructor.prototype.constructor = Constructor;
893 | Constructor.prototype.__reactAutoBindPairs = [];
894 |
895 | injectedMixins.forEach(mixSpecIntoComponent.bind(null, Constructor));
896 |
897 | mixSpecIntoComponent(Constructor, IsMountedPreMixin);
898 | mixSpecIntoComponent(Constructor, spec);
899 | mixSpecIntoComponent(Constructor, IsMountedPostMixin);
900 |
901 | // Initialize the defaultProps property after all mixins have been merged.
902 | if (Constructor.getDefaultProps) {
903 | Constructor.defaultProps = Constructor.getDefaultProps();
904 | }
905 |
906 | if ("production" !== 'production') {
907 | // This is a tag to indicate that the use of these method names is ok,
908 | // since it's used with createClass. If it's not, then it's likely a
909 | // mistake so we'll warn you to use the static property, property
910 | // initializer or constructor respectively.
911 | if (Constructor.getDefaultProps) {
912 | Constructor.getDefaultProps.isReactClassApproved = {};
913 | }
914 | if (Constructor.prototype.getInitialState) {
915 | Constructor.prototype.getInitialState.isReactClassApproved = {};
916 | }
917 | }
918 |
919 | _invariant(
920 | Constructor.prototype.render,
921 | 'createClass(...): Class specification must implement a `render` method.'
922 | );
923 |
924 | if ("production" !== 'production') {
925 | warning(
926 | !Constructor.prototype.componentShouldUpdate,
927 | '%s has a method called ' +
928 | 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' +
929 | 'The name is phrased as a question because the function is ' +
930 | 'expected to return a value.',
931 | spec.displayName || 'A component'
932 | );
933 | warning(
934 | !Constructor.prototype.componentWillRecieveProps,
935 | '%s has a method called ' +
936 | 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',
937 | spec.displayName || 'A component'
938 | );
939 | }
940 |
941 | // Reduce time spent doing lookups by setting these on the prototype.
942 | for (var methodName in ReactClassInterface) {
943 | if (!Constructor.prototype[methodName]) {
944 | Constructor.prototype[methodName] = null;
945 | }
946 | }
947 |
948 | return Constructor;
949 | }
950 |
951 | return createClass;
952 | }
953 |
954 | module.exports = factory;
955 |
956 | },{"fbjs/lib/emptyObject":5,"fbjs/lib/invariant":6,"fbjs/lib/warning":7,"object-assign":8}],3:[function(require,module,exports){
957 | /**
958 | * Copyright 2013-present, Facebook, Inc.
959 | * All rights reserved.
960 | *
961 | * This source code is licensed under the BSD-style license found in the
962 | * LICENSE file in the root directory of this source tree. An additional grant
963 | * of patent rights can be found in the PATENTS file in the same directory.
964 | *
965 | */
966 |
967 | 'use strict';
968 |
969 | var React = require('react');
970 | var factory = require('./factory');
971 |
972 | if (typeof React === 'undefined') {
973 | throw Error(
974 | 'create-react-class could not find the React object. If you are using script tags, ' +
975 | 'make sure that React is being loaded before create-react-class.'
976 | );
977 | }
978 |
979 | // Hack to grab NoopUpdateQueue from isomorphic React
980 | var ReactNoopUpdateQueue = new React.Component().updater;
981 |
982 | module.exports = factory(
983 | React.Component,
984 | React.isValidElement,
985 | ReactNoopUpdateQueue
986 | );
987 |
988 | },{"./factory":2,"react":undefined}],4:[function(require,module,exports){
989 | "use strict";
990 |
991 | /**
992 | * Copyright (c) 2013-present, Facebook, Inc.
993 | * All rights reserved.
994 | *
995 | * This source code is licensed under the BSD-style license found in the
996 | * LICENSE file in the root directory of this source tree. An additional grant
997 | * of patent rights can be found in the PATENTS file in the same directory.
998 | *
999 | *
1000 | */
1001 |
1002 | function makeEmptyFunction(arg) {
1003 | return function () {
1004 | return arg;
1005 | };
1006 | }
1007 |
1008 | /**
1009 | * This function accepts and discards inputs; it has no side effects. This is
1010 | * primarily useful idiomatically for overridable function endpoints which
1011 | * always need to be callable, since JS lacks a null-call idiom ala Cocoa.
1012 | */
1013 | var emptyFunction = function emptyFunction() {};
1014 |
1015 | emptyFunction.thatReturns = makeEmptyFunction;
1016 | emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
1017 | emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
1018 | emptyFunction.thatReturnsNull = makeEmptyFunction(null);
1019 | emptyFunction.thatReturnsThis = function () {
1020 | return this;
1021 | };
1022 | emptyFunction.thatReturnsArgument = function (arg) {
1023 | return arg;
1024 | };
1025 |
1026 | module.exports = emptyFunction;
1027 | },{}],5:[function(require,module,exports){
1028 | /**
1029 | * Copyright (c) 2013-present, Facebook, Inc.
1030 | * All rights reserved.
1031 | *
1032 | * This source code is licensed under the BSD-style license found in the
1033 | * LICENSE file in the root directory of this source tree. An additional grant
1034 | * of patent rights can be found in the PATENTS file in the same directory.
1035 | *
1036 | */
1037 |
1038 | 'use strict';
1039 |
1040 | var emptyObject = {};
1041 |
1042 | if ("production" !== 'production') {
1043 | Object.freeze(emptyObject);
1044 | }
1045 |
1046 | module.exports = emptyObject;
1047 | },{}],6:[function(require,module,exports){
1048 | /**
1049 | * Copyright (c) 2013-present, Facebook, Inc.
1050 | * All rights reserved.
1051 | *
1052 | * This source code is licensed under the BSD-style license found in the
1053 | * LICENSE file in the root directory of this source tree. An additional grant
1054 | * of patent rights can be found in the PATENTS file in the same directory.
1055 | *
1056 | */
1057 |
1058 | 'use strict';
1059 |
1060 | /**
1061 | * Use invariant() to assert state which your program assumes to be true.
1062 | *
1063 | * Provide sprintf-style format (only %s is supported) and arguments
1064 | * to provide information about what broke and what you were
1065 | * expecting.
1066 | *
1067 | * The invariant message will be stripped in production, but the invariant
1068 | * will remain to ensure logic does not differ in production.
1069 | */
1070 |
1071 | var validateFormat = function validateFormat(format) {};
1072 |
1073 | if ("production" !== 'production') {
1074 | validateFormat = function validateFormat(format) {
1075 | if (format === undefined) {
1076 | throw new Error('invariant requires an error message argument');
1077 | }
1078 | };
1079 | }
1080 |
1081 | function invariant(condition, format, a, b, c, d, e, f) {
1082 | validateFormat(format);
1083 |
1084 | if (!condition) {
1085 | var error;
1086 | if (format === undefined) {
1087 | error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
1088 | } else {
1089 | var args = [a, b, c, d, e, f];
1090 | var argIndex = 0;
1091 | error = new Error(format.replace(/%s/g, function () {
1092 | return args[argIndex++];
1093 | }));
1094 | error.name = 'Invariant Violation';
1095 | }
1096 |
1097 | error.framesToPop = 1; // we don't care about invariant's own frame
1098 | throw error;
1099 | }
1100 | }
1101 |
1102 | module.exports = invariant;
1103 | },{}],7:[function(require,module,exports){
1104 | /**
1105 | * Copyright 2014-2015, Facebook, Inc.
1106 | * All rights reserved.
1107 | *
1108 | * This source code is licensed under the BSD-style license found in the
1109 | * LICENSE file in the root directory of this source tree. An additional grant
1110 | * of patent rights can be found in the PATENTS file in the same directory.
1111 | *
1112 | */
1113 |
1114 | 'use strict';
1115 |
1116 | var emptyFunction = require('./emptyFunction');
1117 |
1118 | /**
1119 | * Similar to invariant but only logs a warning if the condition is not met.
1120 | * This can be used to log issues in development environments in critical
1121 | * paths. Removing the logging code for production environments will keep the
1122 | * same logic and follow the same code paths.
1123 | */
1124 |
1125 | var warning = emptyFunction;
1126 |
1127 | if ("production" !== 'production') {
1128 | var printWarning = function printWarning(format) {
1129 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
1130 | args[_key - 1] = arguments[_key];
1131 | }
1132 |
1133 | var argIndex = 0;
1134 | var message = 'Warning: ' + format.replace(/%s/g, function () {
1135 | return args[argIndex++];
1136 | });
1137 | if (typeof console !== 'undefined') {
1138 | console.error(message);
1139 | }
1140 | try {
1141 | // --- Welcome to debugging React ---
1142 | // This error was thrown as a convenience so that you can use this stack
1143 | // to find the callsite that caused this warning to fire.
1144 | throw new Error(message);
1145 | } catch (x) {}
1146 | };
1147 |
1148 | warning = function warning(condition, format) {
1149 | if (format === undefined) {
1150 | throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
1151 | }
1152 |
1153 | if (format.indexOf('Failed Composite propType: ') === 0) {
1154 | return; // Ignore CompositeComponent proptype check.
1155 | }
1156 |
1157 | if (!condition) {
1158 | for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
1159 | args[_key2 - 2] = arguments[_key2];
1160 | }
1161 |
1162 | printWarning.apply(undefined, [format].concat(args));
1163 | }
1164 | };
1165 | }
1166 |
1167 | module.exports = warning;
1168 | },{"./emptyFunction":4}],8:[function(require,module,exports){
1169 | /*
1170 | object-assign
1171 | (c) Sindre Sorhus
1172 | @license MIT
1173 | */
1174 |
1175 | 'use strict';
1176 | /* eslint-disable no-unused-vars */
1177 | var getOwnPropertySymbols = Object.getOwnPropertySymbols;
1178 | var hasOwnProperty = Object.prototype.hasOwnProperty;
1179 | var propIsEnumerable = Object.prototype.propertyIsEnumerable;
1180 |
1181 | function toObject(val) {
1182 | if (val === null || val === undefined) {
1183 | throw new TypeError('Object.assign cannot be called with null or undefined');
1184 | }
1185 |
1186 | return Object(val);
1187 | }
1188 |
1189 | function shouldUseNative() {
1190 | try {
1191 | if (!Object.assign) {
1192 | return false;
1193 | }
1194 |
1195 | // Detect buggy property enumeration order in older V8 versions.
1196 |
1197 | // https://bugs.chromium.org/p/v8/issues/detail?id=4118
1198 | var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
1199 | test1[5] = 'de';
1200 | if (Object.getOwnPropertyNames(test1)[0] === '5') {
1201 | return false;
1202 | }
1203 |
1204 | // https://bugs.chromium.org/p/v8/issues/detail?id=3056
1205 | var test2 = {};
1206 | for (var i = 0; i < 10; i++) {
1207 | test2['_' + String.fromCharCode(i)] = i;
1208 | }
1209 | var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
1210 | return test2[n];
1211 | });
1212 | if (order2.join('') !== '0123456789') {
1213 | return false;
1214 | }
1215 |
1216 | // https://bugs.chromium.org/p/v8/issues/detail?id=3056
1217 | var test3 = {};
1218 | 'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
1219 | test3[letter] = letter;
1220 | });
1221 | if (Object.keys(Object.assign({}, test3)).join('') !==
1222 | 'abcdefghijklmnopqrst') {
1223 | return false;
1224 | }
1225 |
1226 | return true;
1227 | } catch (err) {
1228 | // We don't expect any of the above to throw, but better to be safe.
1229 | return false;
1230 | }
1231 | }
1232 |
1233 | module.exports = shouldUseNative() ? Object.assign : function (target, source) {
1234 | var from;
1235 | var to = toObject(target);
1236 | var symbols;
1237 |
1238 | for (var s = 1; s < arguments.length; s++) {
1239 | from = Object(arguments[s]);
1240 |
1241 | for (var key in from) {
1242 | if (hasOwnProperty.call(from, key)) {
1243 | to[key] = from[key];
1244 | }
1245 | }
1246 |
1247 | if (getOwnPropertySymbols) {
1248 | symbols = getOwnPropertySymbols(from);
1249 | for (var i = 0; i < symbols.length; i++) {
1250 | if (propIsEnumerable.call(from, symbols[i])) {
1251 | to[symbols[i]] = from[symbols[i]];
1252 | }
1253 | }
1254 | }
1255 | }
1256 |
1257 | return to;
1258 | };
1259 |
1260 | },{}]},{},[1]);
1261 |
--------------------------------------------------------------------------------
/example/dist/example.js:
--------------------------------------------------------------------------------
1 | require=(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);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;oHello World;
180 | * }
181 | * });
182 | *
183 | * The class specification supports a specific protocol of methods that have
184 | * special meaning (e.g. `render`). See `ReactClassInterface` for
185 | * more the comprehensive protocol. Any other properties and methods in the
186 | * class specification will be available on the prototype.
187 | *
188 | * @interface ReactClassInterface
189 | * @internal
190 | */
191 | var ReactClassInterface = {
192 | /**
193 | * An array of Mixin objects to include when defining your component.
194 | *
195 | * @type {array}
196 | * @optional
197 | */
198 | mixins: 'DEFINE_MANY',
199 |
200 | /**
201 | * An object containing properties and methods that should be defined on
202 | * the component's constructor instead of its prototype (static methods).
203 | *
204 | * @type {object}
205 | * @optional
206 | */
207 | statics: 'DEFINE_MANY',
208 |
209 | /**
210 | * Definition of prop types for this component.
211 | *
212 | * @type {object}
213 | * @optional
214 | */
215 | propTypes: 'DEFINE_MANY',
216 |
217 | /**
218 | * Definition of context types for this component.
219 | *
220 | * @type {object}
221 | * @optional
222 | */
223 | contextTypes: 'DEFINE_MANY',
224 |
225 | /**
226 | * Definition of context types this component sets for its children.
227 | *
228 | * @type {object}
229 | * @optional
230 | */
231 | childContextTypes: 'DEFINE_MANY',
232 |
233 | // ==== Definition methods ====
234 |
235 | /**
236 | * Invoked when the component is mounted. Values in the mapping will be set on
237 | * `this.props` if that prop is not specified (i.e. using an `in` check).
238 | *
239 | * This method is invoked before `getInitialState` and therefore cannot rely
240 | * on `this.state` or use `this.setState`.
241 | *
242 | * @return {object}
243 | * @optional
244 | */
245 | getDefaultProps: 'DEFINE_MANY_MERGED',
246 |
247 | /**
248 | * Invoked once before the component is mounted. The return value will be used
249 | * as the initial value of `this.state`.
250 | *
251 | * getInitialState: function() {
252 | * return {
253 | * isOn: false,
254 | * fooBaz: new BazFoo()
255 | * }
256 | * }
257 | *
258 | * @return {object}
259 | * @optional
260 | */
261 | getInitialState: 'DEFINE_MANY_MERGED',
262 |
263 | /**
264 | * @return {object}
265 | * @optional
266 | */
267 | getChildContext: 'DEFINE_MANY_MERGED',
268 |
269 | /**
270 | * Uses props from `this.props` and state from `this.state` to render the
271 | * structure of the component.
272 | *
273 | * No guarantees are made about when or how often this method is invoked, so
274 | * it must not have side effects.
275 | *
276 | * render: function() {
277 | * var name = this.props.name;
278 | * return Hello, {name}!
;
279 | * }
280 | *
281 | * @return {ReactComponent}
282 | * @required
283 | */
284 | render: 'DEFINE_ONCE',
285 |
286 | // ==== Delegate methods ====
287 |
288 | /**
289 | * Invoked when the component is initially created and about to be mounted.
290 | * This may have side effects, but any external subscriptions or data created
291 | * by this method must be cleaned up in `componentWillUnmount`.
292 | *
293 | * @optional
294 | */
295 | componentWillMount: 'DEFINE_MANY',
296 |
297 | /**
298 | * Invoked when the component has been mounted and has a DOM representation.
299 | * However, there is no guarantee that the DOM node is in the document.
300 | *
301 | * Use this as an opportunity to operate on the DOM when the component has
302 | * been mounted (initialized and rendered) for the first time.
303 | *
304 | * @param {DOMElement} rootNode DOM element representing the component.
305 | * @optional
306 | */
307 | componentDidMount: 'DEFINE_MANY',
308 |
309 | /**
310 | * Invoked before the component receives new props.
311 | *
312 | * Use this as an opportunity to react to a prop transition by updating the
313 | * state using `this.setState`. Current props are accessed via `this.props`.
314 | *
315 | * componentWillReceiveProps: function(nextProps, nextContext) {
316 | * this.setState({
317 | * likesIncreasing: nextProps.likeCount > this.props.likeCount
318 | * });
319 | * }
320 | *
321 | * NOTE: There is no equivalent `componentWillReceiveState`. An incoming prop
322 | * transition may cause a state change, but the opposite is not true. If you
323 | * need it, you are probably looking for `componentWillUpdate`.
324 | *
325 | * @param {object} nextProps
326 | * @optional
327 | */
328 | componentWillReceiveProps: 'DEFINE_MANY',
329 |
330 | /**
331 | * Invoked while deciding if the component should be updated as a result of
332 | * receiving new props, state and/or context.
333 | *
334 | * Use this as an opportunity to `return false` when you're certain that the
335 | * transition to the new props/state/context will not require a component
336 | * update.
337 | *
338 | * shouldComponentUpdate: function(nextProps, nextState, nextContext) {
339 | * return !equal(nextProps, this.props) ||
340 | * !equal(nextState, this.state) ||
341 | * !equal(nextContext, this.context);
342 | * }
343 | *
344 | * @param {object} nextProps
345 | * @param {?object} nextState
346 | * @param {?object} nextContext
347 | * @return {boolean} True if the component should update.
348 | * @optional
349 | */
350 | shouldComponentUpdate: 'DEFINE_ONCE',
351 |
352 | /**
353 | * Invoked when the component is about to update due to a transition from
354 | * `this.props`, `this.state` and `this.context` to `nextProps`, `nextState`
355 | * and `nextContext`.
356 | *
357 | * Use this as an opportunity to perform preparation before an update occurs.
358 | *
359 | * NOTE: You **cannot** use `this.setState()` in this method.
360 | *
361 | * @param {object} nextProps
362 | * @param {?object} nextState
363 | * @param {?object} nextContext
364 | * @param {ReactReconcileTransaction} transaction
365 | * @optional
366 | */
367 | componentWillUpdate: 'DEFINE_MANY',
368 |
369 | /**
370 | * Invoked when the component's DOM representation has been updated.
371 | *
372 | * Use this as an opportunity to operate on the DOM when the component has
373 | * been updated.
374 | *
375 | * @param {object} prevProps
376 | * @param {?object} prevState
377 | * @param {?object} prevContext
378 | * @param {DOMElement} rootNode DOM element representing the component.
379 | * @optional
380 | */
381 | componentDidUpdate: 'DEFINE_MANY',
382 |
383 | /**
384 | * Invoked when the component is about to be removed from its parent and have
385 | * its DOM representation destroyed.
386 | *
387 | * Use this as an opportunity to deallocate any external resources.
388 | *
389 | * NOTE: There is no `componentDidUnmount` since your component will have been
390 | * destroyed by that point.
391 | *
392 | * @optional
393 | */
394 | componentWillUnmount: 'DEFINE_MANY',
395 |
396 | // ==== Advanced methods ====
397 |
398 | /**
399 | * Updates the component's currently mounted DOM representation.
400 | *
401 | * By default, this implements React's rendering and reconciliation algorithm.
402 | * Sophisticated clients may wish to override this.
403 | *
404 | * @param {ReactReconcileTransaction} transaction
405 | * @internal
406 | * @overridable
407 | */
408 | updateComponent: 'OVERRIDE_BASE'
409 | };
410 |
411 | /**
412 | * Mapping from class specification keys to special processing functions.
413 | *
414 | * Although these are declared like instance properties in the specification
415 | * when defining classes using `React.createClass`, they are actually static
416 | * and are accessible on the constructor instead of the prototype. Despite
417 | * being static, they must be defined outside of the "statics" key under
418 | * which all other static methods are defined.
419 | */
420 | var RESERVED_SPEC_KEYS = {
421 | displayName: function(Constructor, displayName) {
422 | Constructor.displayName = displayName;
423 | },
424 | mixins: function(Constructor, mixins) {
425 | if (mixins) {
426 | for (var i = 0; i < mixins.length; i++) {
427 | mixSpecIntoComponent(Constructor, mixins[i]);
428 | }
429 | }
430 | },
431 | childContextTypes: function(Constructor, childContextTypes) {
432 | if ("production" !== 'production') {
433 | validateTypeDef(Constructor, childContextTypes, 'childContext');
434 | }
435 | Constructor.childContextTypes = _assign(
436 | {},
437 | Constructor.childContextTypes,
438 | childContextTypes
439 | );
440 | },
441 | contextTypes: function(Constructor, contextTypes) {
442 | if ("production" !== 'production') {
443 | validateTypeDef(Constructor, contextTypes, 'context');
444 | }
445 | Constructor.contextTypes = _assign(
446 | {},
447 | Constructor.contextTypes,
448 | contextTypes
449 | );
450 | },
451 | /**
452 | * Special case getDefaultProps which should move into statics but requires
453 | * automatic merging.
454 | */
455 | getDefaultProps: function(Constructor, getDefaultProps) {
456 | if (Constructor.getDefaultProps) {
457 | Constructor.getDefaultProps = createMergedResultFunction(
458 | Constructor.getDefaultProps,
459 | getDefaultProps
460 | );
461 | } else {
462 | Constructor.getDefaultProps = getDefaultProps;
463 | }
464 | },
465 | propTypes: function(Constructor, propTypes) {
466 | if ("production" !== 'production') {
467 | validateTypeDef(Constructor, propTypes, 'prop');
468 | }
469 | Constructor.propTypes = _assign({}, Constructor.propTypes, propTypes);
470 | },
471 | statics: function(Constructor, statics) {
472 | mixStaticSpecIntoComponent(Constructor, statics);
473 | },
474 | autobind: function() {}
475 | };
476 |
477 | function validateTypeDef(Constructor, typeDef, location) {
478 | for (var propName in typeDef) {
479 | if (typeDef.hasOwnProperty(propName)) {
480 | // use a warning instead of an _invariant so components
481 | // don't show up in prod but only in __DEV__
482 | if ("production" !== 'production') {
483 | warning(
484 | typeof typeDef[propName] === 'function',
485 | '%s: %s type `%s` is invalid; it must be a function, usually from ' +
486 | 'React.PropTypes.',
487 | Constructor.displayName || 'ReactClass',
488 | ReactPropTypeLocationNames[location],
489 | propName
490 | );
491 | }
492 | }
493 | }
494 | }
495 |
496 | function validateMethodOverride(isAlreadyDefined, name) {
497 | var specPolicy = ReactClassInterface.hasOwnProperty(name)
498 | ? ReactClassInterface[name]
499 | : null;
500 |
501 | // Disallow overriding of base class methods unless explicitly allowed.
502 | if (ReactClassMixin.hasOwnProperty(name)) {
503 | _invariant(
504 | specPolicy === 'OVERRIDE_BASE',
505 | 'ReactClassInterface: You are attempting to override ' +
506 | '`%s` from your class specification. Ensure that your method names ' +
507 | 'do not overlap with React methods.',
508 | name
509 | );
510 | }
511 |
512 | // Disallow defining methods more than once unless explicitly allowed.
513 | if (isAlreadyDefined) {
514 | _invariant(
515 | specPolicy === 'DEFINE_MANY' || specPolicy === 'DEFINE_MANY_MERGED',
516 | 'ReactClassInterface: You are attempting to define ' +
517 | '`%s` on your component more than once. This conflict may be due ' +
518 | 'to a mixin.',
519 | name
520 | );
521 | }
522 | }
523 |
524 | /**
525 | * Mixin helper which handles policy validation and reserved
526 | * specification keys when building React classes.
527 | */
528 | function mixSpecIntoComponent(Constructor, spec) {
529 | if (!spec) {
530 | if ("production" !== 'production') {
531 | var typeofSpec = typeof spec;
532 | var isMixinValid = typeofSpec === 'object' && spec !== null;
533 |
534 | if ("production" !== 'production') {
535 | warning(
536 | isMixinValid,
537 | "%s: You're attempting to include a mixin that is either null " +
538 | 'or not an object. Check the mixins included by the component, ' +
539 | 'as well as any mixins they include themselves. ' +
540 | 'Expected object but got %s.',
541 | Constructor.displayName || 'ReactClass',
542 | spec === null ? null : typeofSpec
543 | );
544 | }
545 | }
546 |
547 | return;
548 | }
549 |
550 | _invariant(
551 | typeof spec !== 'function',
552 | "ReactClass: You're attempting to " +
553 | 'use a component class or function as a mixin. Instead, just use a ' +
554 | 'regular object.'
555 | );
556 | _invariant(
557 | !isValidElement(spec),
558 | "ReactClass: You're attempting to " +
559 | 'use a component as a mixin. Instead, just use a regular object.'
560 | );
561 |
562 | var proto = Constructor.prototype;
563 | var autoBindPairs = proto.__reactAutoBindPairs;
564 |
565 | // By handling mixins before any other properties, we ensure the same
566 | // chaining order is applied to methods with DEFINE_MANY policy, whether
567 | // mixins are listed before or after these methods in the spec.
568 | if (spec.hasOwnProperty(MIXINS_KEY)) {
569 | RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins);
570 | }
571 |
572 | for (var name in spec) {
573 | if (!spec.hasOwnProperty(name)) {
574 | continue;
575 | }
576 |
577 | if (name === MIXINS_KEY) {
578 | // We have already handled mixins in a special case above.
579 | continue;
580 | }
581 |
582 | var property = spec[name];
583 | var isAlreadyDefined = proto.hasOwnProperty(name);
584 | validateMethodOverride(isAlreadyDefined, name);
585 |
586 | if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {
587 | RESERVED_SPEC_KEYS[name](Constructor, property);
588 | } else {
589 | // Setup methods on prototype:
590 | // The following member methods should not be automatically bound:
591 | // 1. Expected ReactClass methods (in the "interface").
592 | // 2. Overridden methods (that were mixed in).
593 | var isReactClassMethod = ReactClassInterface.hasOwnProperty(name);
594 | var isFunction = typeof property === 'function';
595 | var shouldAutoBind =
596 | isFunction &&
597 | !isReactClassMethod &&
598 | !isAlreadyDefined &&
599 | spec.autobind !== false;
600 |
601 | if (shouldAutoBind) {
602 | autoBindPairs.push(name, property);
603 | proto[name] = property;
604 | } else {
605 | if (isAlreadyDefined) {
606 | var specPolicy = ReactClassInterface[name];
607 |
608 | // These cases should already be caught by validateMethodOverride.
609 | _invariant(
610 | isReactClassMethod &&
611 | (specPolicy === 'DEFINE_MANY_MERGED' ||
612 | specPolicy === 'DEFINE_MANY'),
613 | 'ReactClass: Unexpected spec policy %s for key %s ' +
614 | 'when mixing in component specs.',
615 | specPolicy,
616 | name
617 | );
618 |
619 | // For methods which are defined more than once, call the existing
620 | // methods before calling the new property, merging if appropriate.
621 | if (specPolicy === 'DEFINE_MANY_MERGED') {
622 | proto[name] = createMergedResultFunction(proto[name], property);
623 | } else if (specPolicy === 'DEFINE_MANY') {
624 | proto[name] = createChainedFunction(proto[name], property);
625 | }
626 | } else {
627 | proto[name] = property;
628 | if ("production" !== 'production') {
629 | // Add verbose displayName to the function, which helps when looking
630 | // at profiling tools.
631 | if (typeof property === 'function' && spec.displayName) {
632 | proto[name].displayName = spec.displayName + '_' + name;
633 | }
634 | }
635 | }
636 | }
637 | }
638 | }
639 | }
640 |
641 | function mixStaticSpecIntoComponent(Constructor, statics) {
642 | if (!statics) {
643 | return;
644 | }
645 | for (var name in statics) {
646 | var property = statics[name];
647 | if (!statics.hasOwnProperty(name)) {
648 | continue;
649 | }
650 |
651 | var isReserved = name in RESERVED_SPEC_KEYS;
652 | _invariant(
653 | !isReserved,
654 | 'ReactClass: You are attempting to define a reserved ' +
655 | 'property, `%s`, that shouldn\'t be on the "statics" key. Define it ' +
656 | 'as an instance property instead; it will still be accessible on the ' +
657 | 'constructor.',
658 | name
659 | );
660 |
661 | var isInherited = name in Constructor;
662 | _invariant(
663 | !isInherited,
664 | 'ReactClass: You are attempting to define ' +
665 | '`%s` on your component more than once. This conflict may be ' +
666 | 'due to a mixin.',
667 | name
668 | );
669 | Constructor[name] = property;
670 | }
671 | }
672 |
673 | /**
674 | * Merge two objects, but throw if both contain the same key.
675 | *
676 | * @param {object} one The first object, which is mutated.
677 | * @param {object} two The second object
678 | * @return {object} one after it has been mutated to contain everything in two.
679 | */
680 | function mergeIntoWithNoDuplicateKeys(one, two) {
681 | _invariant(
682 | one && two && typeof one === 'object' && typeof two === 'object',
683 | 'mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.'
684 | );
685 |
686 | for (var key in two) {
687 | if (two.hasOwnProperty(key)) {
688 | _invariant(
689 | one[key] === undefined,
690 | 'mergeIntoWithNoDuplicateKeys(): ' +
691 | 'Tried to merge two objects with the same key: `%s`. This conflict ' +
692 | 'may be due to a mixin; in particular, this may be caused by two ' +
693 | 'getInitialState() or getDefaultProps() methods returning objects ' +
694 | 'with clashing keys.',
695 | key
696 | );
697 | one[key] = two[key];
698 | }
699 | }
700 | return one;
701 | }
702 |
703 | /**
704 | * Creates a function that invokes two functions and merges their return values.
705 | *
706 | * @param {function} one Function to invoke first.
707 | * @param {function} two Function to invoke second.
708 | * @return {function} Function that invokes the two argument functions.
709 | * @private
710 | */
711 | function createMergedResultFunction(one, two) {
712 | return function mergedResult() {
713 | var a = one.apply(this, arguments);
714 | var b = two.apply(this, arguments);
715 | if (a == null) {
716 | return b;
717 | } else if (b == null) {
718 | return a;
719 | }
720 | var c = {};
721 | mergeIntoWithNoDuplicateKeys(c, a);
722 | mergeIntoWithNoDuplicateKeys(c, b);
723 | return c;
724 | };
725 | }
726 |
727 | /**
728 | * Creates a function that invokes two functions and ignores their return vales.
729 | *
730 | * @param {function} one Function to invoke first.
731 | * @param {function} two Function to invoke second.
732 | * @return {function} Function that invokes the two argument functions.
733 | * @private
734 | */
735 | function createChainedFunction(one, two) {
736 | return function chainedFunction() {
737 | one.apply(this, arguments);
738 | two.apply(this, arguments);
739 | };
740 | }
741 |
742 | /**
743 | * Binds a method to the component.
744 | *
745 | * @param {object} component Component whose method is going to be bound.
746 | * @param {function} method Method to be bound.
747 | * @return {function} The bound method.
748 | */
749 | function bindAutoBindMethod(component, method) {
750 | var boundMethod = method.bind(component);
751 | if ("production" !== 'production') {
752 | boundMethod.__reactBoundContext = component;
753 | boundMethod.__reactBoundMethod = method;
754 | boundMethod.__reactBoundArguments = null;
755 | var componentName = component.constructor.displayName;
756 | var _bind = boundMethod.bind;
757 | boundMethod.bind = function(newThis) {
758 | for (
759 | var _len = arguments.length,
760 | args = Array(_len > 1 ? _len - 1 : 0),
761 | _key = 1;
762 | _key < _len;
763 | _key++
764 | ) {
765 | args[_key - 1] = arguments[_key];
766 | }
767 |
768 | // User is trying to bind() an autobound method; we effectively will
769 | // ignore the value of "this" that the user is trying to use, so
770 | // let's warn.
771 | if (newThis !== component && newThis !== null) {
772 | if ("production" !== 'production') {
773 | warning(
774 | false,
775 | 'bind(): React component methods may only be bound to the ' +
776 | 'component instance. See %s',
777 | componentName
778 | );
779 | }
780 | } else if (!args.length) {
781 | if ("production" !== 'production') {
782 | warning(
783 | false,
784 | 'bind(): You are binding a component method to the component. ' +
785 | 'React does this for you automatically in a high-performance ' +
786 | 'way, so you can safely remove this call. See %s',
787 | componentName
788 | );
789 | }
790 | return boundMethod;
791 | }
792 | var reboundMethod = _bind.apply(boundMethod, arguments);
793 | reboundMethod.__reactBoundContext = component;
794 | reboundMethod.__reactBoundMethod = method;
795 | reboundMethod.__reactBoundArguments = args;
796 | return reboundMethod;
797 | };
798 | }
799 | return boundMethod;
800 | }
801 |
802 | /**
803 | * Binds all auto-bound methods in a component.
804 | *
805 | * @param {object} component Component whose method is going to be bound.
806 | */
807 | function bindAutoBindMethods(component) {
808 | var pairs = component.__reactAutoBindPairs;
809 | for (var i = 0; i < pairs.length; i += 2) {
810 | var autoBindKey = pairs[i];
811 | var method = pairs[i + 1];
812 | component[autoBindKey] = bindAutoBindMethod(component, method);
813 | }
814 | }
815 |
816 | var IsMountedPreMixin = {
817 | componentDidMount: function() {
818 | this.__isMounted = true;
819 | }
820 | };
821 |
822 | var IsMountedPostMixin = {
823 | componentWillUnmount: function() {
824 | this.__isMounted = false;
825 | }
826 | };
827 |
828 | /**
829 | * Add more to the ReactClass base class. These are all legacy features and
830 | * therefore not already part of the modern ReactComponent.
831 | */
832 | var ReactClassMixin = {
833 | /**
834 | * TODO: This will be deprecated because state should always keep a consistent
835 | * type signature and the only use case for this, is to avoid that.
836 | */
837 | replaceState: function(newState, callback) {
838 | this.updater.enqueueReplaceState(this, newState, callback);
839 | },
840 |
841 | /**
842 | * Checks whether or not this composite component is mounted.
843 | * @return {boolean} True if mounted, false otherwise.
844 | * @protected
845 | * @final
846 | */
847 | isMounted: function() {
848 | if ("production" !== 'production') {
849 | warning(
850 | this.__didWarnIsMounted,
851 | '%s: isMounted is deprecated. Instead, make sure to clean up ' +
852 | 'subscriptions and pending requests in componentWillUnmount to ' +
853 | 'prevent memory leaks.',
854 | (this.constructor && this.constructor.displayName) ||
855 | this.name ||
856 | 'Component'
857 | );
858 | this.__didWarnIsMounted = true;
859 | }
860 | return !!this.__isMounted;
861 | }
862 | };
863 |
864 | var ReactClassComponent = function() {};
865 | _assign(
866 | ReactClassComponent.prototype,
867 | ReactComponent.prototype,
868 | ReactClassMixin
869 | );
870 |
871 | /**
872 | * Creates a composite component class given a class specification.
873 | * See https://facebook.github.io/react/docs/top-level-api.html#react.createclass
874 | *
875 | * @param {object} spec Class specification (which must define `render`).
876 | * @return {function} Component constructor function.
877 | * @public
878 | */
879 | function createClass(spec) {
880 | // To keep our warnings more understandable, we'll use a little hack here to
881 | // ensure that Constructor.name !== 'Constructor'. This makes sure we don't
882 | // unnecessarily identify a class without displayName as 'Constructor'.
883 | var Constructor = identity(function(props, context, updater) {
884 | // This constructor gets overridden by mocks. The argument is used
885 | // by mocks to assert on what gets mounted.
886 |
887 | if ("production" !== 'production') {
888 | warning(
889 | this instanceof Constructor,
890 | 'Something is calling a React component directly. Use a factory or ' +
891 | 'JSX instead. See: https://fb.me/react-legacyfactory'
892 | );
893 | }
894 |
895 | // Wire up auto-binding
896 | if (this.__reactAutoBindPairs.length) {
897 | bindAutoBindMethods(this);
898 | }
899 |
900 | this.props = props;
901 | this.context = context;
902 | this.refs = emptyObject;
903 | this.updater = updater || ReactNoopUpdateQueue;
904 |
905 | this.state = null;
906 |
907 | // ReactClasses doesn't have constructors. Instead, they use the
908 | // getInitialState and componentWillMount methods for initialization.
909 |
910 | var initialState = this.getInitialState ? this.getInitialState() : null;
911 | if ("production" !== 'production') {
912 | // We allow auto-mocks to proceed as if they're returning null.
913 | if (
914 | initialState === undefined &&
915 | this.getInitialState._isMockFunction
916 | ) {
917 | // This is probably bad practice. Consider warning here and
918 | // deprecating this convenience.
919 | initialState = null;
920 | }
921 | }
922 | _invariant(
923 | typeof initialState === 'object' && !Array.isArray(initialState),
924 | '%s.getInitialState(): must return an object or null',
925 | Constructor.displayName || 'ReactCompositeComponent'
926 | );
927 |
928 | this.state = initialState;
929 | });
930 | Constructor.prototype = new ReactClassComponent();
931 | Constructor.prototype.constructor = Constructor;
932 | Constructor.prototype.__reactAutoBindPairs = [];
933 |
934 | injectedMixins.forEach(mixSpecIntoComponent.bind(null, Constructor));
935 |
936 | mixSpecIntoComponent(Constructor, IsMountedPreMixin);
937 | mixSpecIntoComponent(Constructor, spec);
938 | mixSpecIntoComponent(Constructor, IsMountedPostMixin);
939 |
940 | // Initialize the defaultProps property after all mixins have been merged.
941 | if (Constructor.getDefaultProps) {
942 | Constructor.defaultProps = Constructor.getDefaultProps();
943 | }
944 |
945 | if ("production" !== 'production') {
946 | // This is a tag to indicate that the use of these method names is ok,
947 | // since it's used with createClass. If it's not, then it's likely a
948 | // mistake so we'll warn you to use the static property, property
949 | // initializer or constructor respectively.
950 | if (Constructor.getDefaultProps) {
951 | Constructor.getDefaultProps.isReactClassApproved = {};
952 | }
953 | if (Constructor.prototype.getInitialState) {
954 | Constructor.prototype.getInitialState.isReactClassApproved = {};
955 | }
956 | }
957 |
958 | _invariant(
959 | Constructor.prototype.render,
960 | 'createClass(...): Class specification must implement a `render` method.'
961 | );
962 |
963 | if ("production" !== 'production') {
964 | warning(
965 | !Constructor.prototype.componentShouldUpdate,
966 | '%s has a method called ' +
967 | 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' +
968 | 'The name is phrased as a question because the function is ' +
969 | 'expected to return a value.',
970 | spec.displayName || 'A component'
971 | );
972 | warning(
973 | !Constructor.prototype.componentWillRecieveProps,
974 | '%s has a method called ' +
975 | 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',
976 | spec.displayName || 'A component'
977 | );
978 | }
979 |
980 | // Reduce time spent doing lookups by setting these on the prototype.
981 | for (var methodName in ReactClassInterface) {
982 | if (!Constructor.prototype[methodName]) {
983 | Constructor.prototype[methodName] = null;
984 | }
985 | }
986 |
987 | return Constructor;
988 | }
989 |
990 | return createClass;
991 | }
992 |
993 | module.exports = factory;
994 |
995 | },{"fbjs/lib/emptyObject":5,"fbjs/lib/invariant":6,"fbjs/lib/warning":7,"object-assign":8}],3:[function(require,module,exports){
996 | /**
997 | * Copyright 2013-present, Facebook, Inc.
998 | * All rights reserved.
999 | *
1000 | * This source code is licensed under the BSD-style license found in the
1001 | * LICENSE file in the root directory of this source tree. An additional grant
1002 | * of patent rights can be found in the PATENTS file in the same directory.
1003 | *
1004 | */
1005 |
1006 | 'use strict';
1007 |
1008 | var React = require('react');
1009 | var factory = require('./factory');
1010 |
1011 | if (typeof React === 'undefined') {
1012 | throw Error(
1013 | 'create-react-class could not find the React object. If you are using script tags, ' +
1014 | 'make sure that React is being loaded before create-react-class.'
1015 | );
1016 | }
1017 |
1018 | // Hack to grab NoopUpdateQueue from isomorphic React
1019 | var ReactNoopUpdateQueue = new React.Component().updater;
1020 |
1021 | module.exports = factory(
1022 | React.Component,
1023 | React.isValidElement,
1024 | ReactNoopUpdateQueue
1025 | );
1026 |
1027 | },{"./factory":2,"react":undefined}],4:[function(require,module,exports){
1028 | "use strict";
1029 |
1030 | /**
1031 | * Copyright (c) 2013-present, Facebook, Inc.
1032 | * All rights reserved.
1033 | *
1034 | * This source code is licensed under the BSD-style license found in the
1035 | * LICENSE file in the root directory of this source tree. An additional grant
1036 | * of patent rights can be found in the PATENTS file in the same directory.
1037 | *
1038 | *
1039 | */
1040 |
1041 | function makeEmptyFunction(arg) {
1042 | return function () {
1043 | return arg;
1044 | };
1045 | }
1046 |
1047 | /**
1048 | * This function accepts and discards inputs; it has no side effects. This is
1049 | * primarily useful idiomatically for overridable function endpoints which
1050 | * always need to be callable, since JS lacks a null-call idiom ala Cocoa.
1051 | */
1052 | var emptyFunction = function emptyFunction() {};
1053 |
1054 | emptyFunction.thatReturns = makeEmptyFunction;
1055 | emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
1056 | emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
1057 | emptyFunction.thatReturnsNull = makeEmptyFunction(null);
1058 | emptyFunction.thatReturnsThis = function () {
1059 | return this;
1060 | };
1061 | emptyFunction.thatReturnsArgument = function (arg) {
1062 | return arg;
1063 | };
1064 |
1065 | module.exports = emptyFunction;
1066 | },{}],5:[function(require,module,exports){
1067 | /**
1068 | * Copyright (c) 2013-present, Facebook, Inc.
1069 | * All rights reserved.
1070 | *
1071 | * This source code is licensed under the BSD-style license found in the
1072 | * LICENSE file in the root directory of this source tree. An additional grant
1073 | * of patent rights can be found in the PATENTS file in the same directory.
1074 | *
1075 | */
1076 |
1077 | 'use strict';
1078 |
1079 | var emptyObject = {};
1080 |
1081 | if ("production" !== 'production') {
1082 | Object.freeze(emptyObject);
1083 | }
1084 |
1085 | module.exports = emptyObject;
1086 | },{}],6:[function(require,module,exports){
1087 | /**
1088 | * Copyright (c) 2013-present, Facebook, Inc.
1089 | * All rights reserved.
1090 | *
1091 | * This source code is licensed under the BSD-style license found in the
1092 | * LICENSE file in the root directory of this source tree. An additional grant
1093 | * of patent rights can be found in the PATENTS file in the same directory.
1094 | *
1095 | */
1096 |
1097 | 'use strict';
1098 |
1099 | /**
1100 | * Use invariant() to assert state which your program assumes to be true.
1101 | *
1102 | * Provide sprintf-style format (only %s is supported) and arguments
1103 | * to provide information about what broke and what you were
1104 | * expecting.
1105 | *
1106 | * The invariant message will be stripped in production, but the invariant
1107 | * will remain to ensure logic does not differ in production.
1108 | */
1109 |
1110 | var validateFormat = function validateFormat(format) {};
1111 |
1112 | if ("production" !== 'production') {
1113 | validateFormat = function validateFormat(format) {
1114 | if (format === undefined) {
1115 | throw new Error('invariant requires an error message argument');
1116 | }
1117 | };
1118 | }
1119 |
1120 | function invariant(condition, format, a, b, c, d, e, f) {
1121 | validateFormat(format);
1122 |
1123 | if (!condition) {
1124 | var error;
1125 | if (format === undefined) {
1126 | error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
1127 | } else {
1128 | var args = [a, b, c, d, e, f];
1129 | var argIndex = 0;
1130 | error = new Error(format.replace(/%s/g, function () {
1131 | return args[argIndex++];
1132 | }));
1133 | error.name = 'Invariant Violation';
1134 | }
1135 |
1136 | error.framesToPop = 1; // we don't care about invariant's own frame
1137 | throw error;
1138 | }
1139 | }
1140 |
1141 | module.exports = invariant;
1142 | },{}],7:[function(require,module,exports){
1143 | /**
1144 | * Copyright 2014-2015, Facebook, Inc.
1145 | * All rights reserved.
1146 | *
1147 | * This source code is licensed under the BSD-style license found in the
1148 | * LICENSE file in the root directory of this source tree. An additional grant
1149 | * of patent rights can be found in the PATENTS file in the same directory.
1150 | *
1151 | */
1152 |
1153 | 'use strict';
1154 |
1155 | var emptyFunction = require('./emptyFunction');
1156 |
1157 | /**
1158 | * Similar to invariant but only logs a warning if the condition is not met.
1159 | * This can be used to log issues in development environments in critical
1160 | * paths. Removing the logging code for production environments will keep the
1161 | * same logic and follow the same code paths.
1162 | */
1163 |
1164 | var warning = emptyFunction;
1165 |
1166 | if ("production" !== 'production') {
1167 | var printWarning = function printWarning(format) {
1168 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
1169 | args[_key - 1] = arguments[_key];
1170 | }
1171 |
1172 | var argIndex = 0;
1173 | var message = 'Warning: ' + format.replace(/%s/g, function () {
1174 | return args[argIndex++];
1175 | });
1176 | if (typeof console !== 'undefined') {
1177 | console.error(message);
1178 | }
1179 | try {
1180 | // --- Welcome to debugging React ---
1181 | // This error was thrown as a convenience so that you can use this stack
1182 | // to find the callsite that caused this warning to fire.
1183 | throw new Error(message);
1184 | } catch (x) {}
1185 | };
1186 |
1187 | warning = function warning(condition, format) {
1188 | if (format === undefined) {
1189 | throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
1190 | }
1191 |
1192 | if (format.indexOf('Failed Composite propType: ') === 0) {
1193 | return; // Ignore CompositeComponent proptype check.
1194 | }
1195 |
1196 | if (!condition) {
1197 | for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
1198 | args[_key2 - 2] = arguments[_key2];
1199 | }
1200 |
1201 | printWarning.apply(undefined, [format].concat(args));
1202 | }
1203 | };
1204 | }
1205 |
1206 | module.exports = warning;
1207 | },{"./emptyFunction":4}],8:[function(require,module,exports){
1208 | /*
1209 | object-assign
1210 | (c) Sindre Sorhus
1211 | @license MIT
1212 | */
1213 |
1214 | 'use strict';
1215 | /* eslint-disable no-unused-vars */
1216 | var getOwnPropertySymbols = Object.getOwnPropertySymbols;
1217 | var hasOwnProperty = Object.prototype.hasOwnProperty;
1218 | var propIsEnumerable = Object.prototype.propertyIsEnumerable;
1219 |
1220 | function toObject(val) {
1221 | if (val === null || val === undefined) {
1222 | throw new TypeError('Object.assign cannot be called with null or undefined');
1223 | }
1224 |
1225 | return Object(val);
1226 | }
1227 |
1228 | function shouldUseNative() {
1229 | try {
1230 | if (!Object.assign) {
1231 | return false;
1232 | }
1233 |
1234 | // Detect buggy property enumeration order in older V8 versions.
1235 |
1236 | // https://bugs.chromium.org/p/v8/issues/detail?id=4118
1237 | var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
1238 | test1[5] = 'de';
1239 | if (Object.getOwnPropertyNames(test1)[0] === '5') {
1240 | return false;
1241 | }
1242 |
1243 | // https://bugs.chromium.org/p/v8/issues/detail?id=3056
1244 | var test2 = {};
1245 | for (var i = 0; i < 10; i++) {
1246 | test2['_' + String.fromCharCode(i)] = i;
1247 | }
1248 | var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
1249 | return test2[n];
1250 | });
1251 | if (order2.join('') !== '0123456789') {
1252 | return false;
1253 | }
1254 |
1255 | // https://bugs.chromium.org/p/v8/issues/detail?id=3056
1256 | var test3 = {};
1257 | 'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
1258 | test3[letter] = letter;
1259 | });
1260 | if (Object.keys(Object.assign({}, test3)).join('') !==
1261 | 'abcdefghijklmnopqrst') {
1262 | return false;
1263 | }
1264 |
1265 | return true;
1266 | } catch (err) {
1267 | // We don't expect any of the above to throw, but better to be safe.
1268 | return false;
1269 | }
1270 | }
1271 |
1272 | module.exports = shouldUseNative() ? Object.assign : function (target, source) {
1273 | var from;
1274 | var to = toObject(target);
1275 | var symbols;
1276 |
1277 | for (var s = 1; s < arguments.length; s++) {
1278 | from = Object(arguments[s]);
1279 |
1280 | for (var key in from) {
1281 | if (hasOwnProperty.call(from, key)) {
1282 | to[key] = from[key];
1283 | }
1284 | }
1285 |
1286 | if (getOwnPropertySymbols) {
1287 | symbols = getOwnPropertySymbols(from);
1288 | for (var i = 0; i < symbols.length; i++) {
1289 | if (propIsEnumerable.call(from, symbols[i])) {
1290 | to[symbols[i]] = from[symbols[i]];
1291 | }
1292 | }
1293 | }
1294 | }
1295 |
1296 | return to;
1297 | };
1298 |
1299 | },{}]},{},[1]);
1300 |
--------------------------------------------------------------------------------