diff --git a/react/react-addons-shallow-compare.d.ts b/react/react-addons-shallow-compare.d.ts new file mode 100644 index 000000000..a0e38df23 --- /dev/null +++ b/react/react-addons-shallow-compare.d.ts @@ -0,0 +1,11 @@ +// Type definitions for React v0.14 (react-addons-css-transition-group) +// Project: http://facebook.github.io/react/ +// Definitions by: Asana , AssureSign , Microsoft +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module "react-addons-shallow-compare" { + function shallowCompare(component: __React.Component, nextProps: P, nextState: S): boolean; + export = shallowCompare; +} diff --git a/react/react-tests.ts b/react/react-tests.ts index 5a20d51f8..e7fcad383 100644 --- a/react/react-tests.ts +++ b/react/react-tests.ts @@ -5,6 +5,7 @@ /// /// /// +/// /// /// /// @@ -16,6 +17,7 @@ import CSSTransitionGroup = require("react-addons-css-transition-group"); import LinkedStateMixin = require("react-addons-linked-state-mixin"); import Perf = require("react-addons-perf"); import PureRenderMixin = require("react-addons-pure-render-mixin"); +import shallowCompare = require("react-addons-shallow-compare"); import TestUtils = require("react-addons-test-utils"); import TransitionGroup = require("react-addons-transition-group"); import update = require("react-addons-update"); @@ -88,34 +90,34 @@ var ClassicComponent: React.ClassicComponentClass = class ModernComponent extends React.Component implements React.ChildContextProvider { - + static propTypes: React.ValidationMap = { foo: React.PropTypes.number } - + static contextTypes: React.ValidationMap = { someValue: React.PropTypes.string } - + static childContextTypes: React.ValidationMap = { someOtherValue: React.PropTypes.string } - + static defaultProps: Props; - + context: Context; - + getChildContext() { return { someOtherValue: 'foo' } } - + state = { inputValue: this.context.someValue, seconds: this.props.foo } - + reset() { this.setState({ inputValue: this.context.someValue, @@ -124,7 +126,7 @@ class ModernComponent extends React.Component } private _input: HTMLInputElement; - + render() { return React.DOM.div(null, React.DOM.input({ @@ -132,6 +134,10 @@ class ModernComponent extends React.Component value: this.state.inputValue })); } + + shouldComponentUpdate(nextProps: Props, nextState: State, nextContext: any): boolean { + return shallowCompare(this, nextProps, nextState); + } } // React.createFactory @@ -445,7 +451,7 @@ var renderer: React.ShallowRenderer = renderer.render(React.createElement(Timer)); var output: React.ReactElement> = renderer.getRenderOutput(); - + // // TransitionGroup addon // -------------------------------------------------------------------------- @@ -455,7 +461,7 @@ React.createFactory(TransitionGroup)({ component: "div" }); // update addon // -------------------------------------------------------------------------- { -// These are copied from https://facebook.github.io/react/docs/update.html +// These are copied from https://facebook.github.io/react/docs/update.html let initialArray = [1, 2, 3]; let newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]