From bbf3e9cb0bcebd8ed3eb9f7ab3265a1b2a63d87a Mon Sep 17 00:00:00 2001 From: John Gozde Date: Mon, 16 Oct 2017 16:22:04 -0600 Subject: [PATCH] [react]: Remove deprecated+removed APIs (#20409) * create-react-class: add definitions * react-dom-factories: add definitions * create-react-class: add tests, fix errors * react-dom-factories: add tests, fix lint * react: remove previously deprecated APIs * Remove deprecated usages in other definitions * redux-form: disable strictFunctionTypes Changes to react typings revealed errors in redux-form that are present in 'master'. This needs to be handled separately. * Update create-react-class, react-dom-factories author * Avoid importing create-react-class where possible * Move top-level createReactClass tests to create-react-class --- .../create-react-class-tests.ts | 106 +++++++++ types/create-react-class/index.d.ts | 13 ++ types/create-react-class/tsconfig.json | 25 +++ types/create-react-class/tslint.json | 7 + types/jsnox/jsnox-tests.ts | 4 +- .../material-ui-pagination-tests.tsx | 3 +- types/material-ui/material-ui-tests.tsx | 3 +- types/ngreact/ngreact-tests.tsx | 22 +- .../react-big-calendar-tests.tsx | 8 +- types/react-chartjs-2/test/bar.tsx | 6 +- types/react-chartjs-2/test/bubble.tsx | 6 +- types/react-chartjs-2/test/doughnut.tsx | 6 +- types/react-chartjs-2/test/horizontalBar.tsx | 6 +- types/react-chartjs-2/test/line.tsx | 6 +- types/react-chartjs-2/test/mix.tsx | 6 +- types/react-chartjs-2/test/pie.tsx | 6 +- types/react-chartjs-2/test/polar.tsx | 6 +- types/react-chartjs-2/test/radar.tsx | 6 +- types/react-chartjs-2/test/randomizedLine.tsx | 11 +- .../react-dnd-html5-backend-tests.ts | 3 +- types/react-dnd/react-dnd-tests.tsx | 3 +- types/react-dom-factories/index.d.ts | 12 + .../react-dom-factories-tests.ts | 8 + types/react-dom-factories/tsconfig.json | 23 ++ types/react-dom-factories/tslint.json | 1 + types/react-infinite/react-infinite-tests.tsx | 33 +-- .../react-is-deprecated-tests.ts | 2 +- types/react-leaflet/react-leaflet-tests.tsx | 3 +- types/react-mdl/react-mdl-tests.tsx | 159 ++++++------- .../react-props-decorators-tests.ts | 5 +- .../react-router/test/NavigateWithContext.tsx | 3 +- .../dist/es/ArrowKeyStepper.d.ts | 3 +- .../react-virtualized/dist/es/AutoSizer.d.ts | 3 +- types/react/index.d.ts | 4 - types/react/test/index.ts | 210 +++++++----------- types/redux-form/redux-form-tests.tsx | 2 + types/redux-form/tsconfig.json | 2 +- types/redux-form/v4/redux-form-tests.tsx | 3 +- types/redux-form/v6/redux-form-tests.tsx | 4 +- types/redux-form/v6/tsconfig.json | 2 +- 40 files changed, 449 insertions(+), 295 deletions(-) create mode 100644 types/create-react-class/create-react-class-tests.ts create mode 100644 types/create-react-class/index.d.ts create mode 100644 types/create-react-class/tsconfig.json create mode 100644 types/create-react-class/tslint.json create mode 100644 types/react-dom-factories/index.d.ts create mode 100644 types/react-dom-factories/react-dom-factories-tests.ts create mode 100644 types/react-dom-factories/tsconfig.json create mode 100644 types/react-dom-factories/tslint.json diff --git a/types/create-react-class/create-react-class-tests.ts b/types/create-react-class/create-react-class-tests.ts new file mode 100644 index 0000000000..c3f7c620ef --- /dev/null +++ b/types/create-react-class/create-react-class-tests.ts @@ -0,0 +1,106 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import * as DOM from "react-dom-factories"; +import * as createReactClass from "create-react-class"; + +interface Props { + foo: string; +} + +interface State { + bar: number; +} + +const props: Props & React.ClassAttributes<{}> = { + foo: "foo" +}; + +const container: Element = document.createElement("div"); + +// +// Top-Level API +// -------------------------------------------------------------------------- + +const ClassicComponent: React.ClassicComponentClass = createReactClass({ + childContextTypes: {}, + componentDidCatch(err, errorInfo) { + const msg: string = err.message; + const name: string = err.name; + const stack: string | undefined = err.stack; + const componentStack: string = errorInfo.componentStack; + }, + componentDidMount() {}, + componentDidUpdate(props, state) { + const foo: string = props.foo; + const bar: number = state.bar; + }, + componentWillMount() {}, + componentWillReceiveProps(nextProps) { + const oldFoo: string = nextProps.foo; + }, + componentWillUnmount() {}, + componentWillUpdate(props, state) { + const foo: string = props.foo; + const bar: number = state.bar; + }, + contextTypes: {}, + displayName: "Test", + getDefaultProps() { + return { foo: "f" }; + }, + getInitialState() { + return { bar: 1 }; + }, + mixins: [], + propTypes: {}, + shouldComponentUpdate(this: React.ClassicComponent, nextProps, nextState) { + const newFoo: string = nextProps.foo; + const newBar: number = nextState.bar; + return newFoo !== this.props.foo && newBar !== this.state.bar; + }, + statics: { + test: 1 + }, + reset() { + this.replaceState(this.getInitialState!()); + }, + render() { + return DOM.div(null, + DOM.input({ + ref: input => this._input = input, + value: this.state.bar + })); + } +}); + +// React.createFactory +const classicFactory: React.ClassicFactory = + React.createFactory(ClassicComponent); +const classicFactoryElement: React.ClassicElement = + classicFactory(props); + +// React.createElement +const classicElement: React.ClassicElement = React.createElement(ClassicComponent, props); + +// React.cloneElement +const clonedClassicElement: React.ClassicElement = + React.cloneElement(classicElement, props); + +// ReactDOM.render +const classicComponent: React.ClassicComponent = ReactDOM.render(classicElement, container); + +// +// React Components +// -------------------------------------------------------------------------- + +const displayName: string | undefined = ClassicComponent.displayName; +const defaultProps: Props = ClassicComponent.getDefaultProps ? ClassicComponent.getDefaultProps() : {} as Props; +const propTypes: React.ValidationMap | undefined = ClassicComponent.propTypes; + +// +// Component API +// -------------------------------------------------------------------------- + +// classic +const isMounted: boolean = classicComponent.isMounted(); +classicComponent.replaceState({ inputValue: "???", seconds: 60 }); diff --git a/types/create-react-class/index.d.ts b/types/create-react-class/index.d.ts new file mode 100644 index 0000000000..211474ac16 --- /dev/null +++ b/types/create-react-class/index.d.ts @@ -0,0 +1,13 @@ +// Type definitions for create-react-class 15.6 +// Project: https://facebook.github.io/react/ +// Definitions by: John Gozde +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +import { ComponentSpec, ClassicComponentClass } from "react"; + +declare namespace createReactClass {} +declare function createReactClass(spec: ComponentSpec): ClassicComponentClass

; + +export as namespace createReactClass; +export = createReactClass; diff --git a/types/create-react-class/tsconfig.json b/types/create-react-class/tsconfig.json new file mode 100644 index 0000000000..b003c69e53 --- /dev/null +++ b/types/create-react-class/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "preserve" + }, + "files": [ + "index.d.ts", + "create-react-class-tests.ts" + ] +} diff --git a/types/create-react-class/tslint.json b/types/create-react-class/tslint.json new file mode 100644 index 0000000000..08337e85f7 --- /dev/null +++ b/types/create-react-class/tslint.json @@ -0,0 +1,7 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + "no-object-literal-type-assertion": false, + "no-unnecessary-generics": false + } +} diff --git a/types/jsnox/jsnox-tests.ts b/types/jsnox/jsnox-tests.ts index c274a6f491..d545581591 100644 --- a/types/jsnox/jsnox-tests.ts +++ b/types/jsnox/jsnox-tests.ts @@ -8,9 +8,9 @@ interface PersonProps { age: number; } -const Person: React.ClassicComponentClass = React.createClass({ +class Person extends React.Component { render(): React.ReactElement { return null; } -}); +} const PersonTag = React.createFactory(Person); diff --git a/types/material-ui-pagination/material-ui-pagination-tests.tsx b/types/material-ui-pagination/material-ui-pagination-tests.tsx index 6a3415d24f..09246a2646 100644 --- a/types/material-ui-pagination/material-ui-pagination-tests.tsx +++ b/types/material-ui-pagination/material-ui-pagination-tests.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Component, PropTypes } from 'react'; +import * as PropTypes from 'prop-types'; +import { Component } from 'react'; import * as ReactDOM from 'react-dom'; import Pagination from 'material-ui-pagination'; import * as ui from 'material-ui'; diff --git a/types/material-ui/material-ui-tests.tsx b/types/material-ui/material-ui-tests.tsx index 3b2c50dff4..1034d47cad 100644 --- a/types/material-ui/material-ui-tests.tsx +++ b/types/material-ui/material-ui-tests.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { - Component, ComponentClass, CSSProperties, PropTypes, + Component, ComponentClass, CSSProperties, StatelessComponent, ReactElement, ReactInstance, ValidationMap } from 'react'; import * as ReactDOM from 'react-dom'; +import * as PropTypes from 'prop-types'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; import { muiThemeable } from 'material-ui/styles/muiThemeable'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; diff --git a/types/ngreact/ngreact-tests.tsx b/types/ngreact/ngreact-tests.tsx index 46980dab1f..0f40df4bb8 100644 --- a/types/ngreact/ngreact-tests.tsx +++ b/types/ngreact/ngreact-tests.tsx @@ -1,5 +1,6 @@ import * as angular from "angular"; import * as React from "react"; +import * as PropTypes from "prop-types"; import { ReactDirective } from "ngreact"; const app = angular.module("app", ["react"]); @@ -24,13 +25,20 @@ app.directive('helloComponent', function(reactDirective: ReactDirective, $locati return reactDirective(HelloComponent, undefined, {}, { $location }); }); -var HelloComponent = React.createClass({ - propTypes: { - fname : React.PropTypes.string.isRequired, - lname : React.PropTypes.string.isRequired - }, - render: function() { +interface HelloProps { + fname: string; + lname: string; +} + +class HelloComponent extends React.Component { + static propTypes = { + fname : PropTypes.string.isRequired, + lname : PropTypes.string.isRequired + } + + render() { return Hello {this.props.fname} {this.props.lname}; } -}) +} + app.value('HelloComponent', HelloComponent); diff --git a/types/react-big-calendar/react-big-calendar-tests.tsx b/types/react-big-calendar/react-big-calendar-tests.tsx index 8afdc205e8..ba48c42ed0 100644 --- a/types/react-big-calendar/react-big-calendar-tests.tsx +++ b/types/react-big-calendar/react-big-calendar-tests.tsx @@ -29,7 +29,7 @@ class CalendarEvent { } // Basic Example Test -const BasicExample = React.createClass({ +class BasicExample extends React.Component { render() { return ( ); } -}); +} ReactDOM.render(, document.body); const basicExampleHtml = ReactDOMServer.renderToString(); console.log('Test Results -> BasicExample', basicExampleHtml); // Full API Example Test - based on API Documentation // http://intljusticemission.github.io/react-big-calendar/examples/index.html#api -const FullAPIExample = React.createClass({ +class FullAPIExample extends React.Component { render() { return ( ); } -}); +} ReactDOM.render(, document.body); const fullApiExampleHtml = ReactDOMServer.renderToString(); console.log('Test Results -> FullAPIExample', fullApiExampleHtml); diff --git a/types/react-chartjs-2/test/bar.tsx b/types/react-chartjs-2/test/bar.tsx index c1ff3a3567..7f05c9925b 100644 --- a/types/react-chartjs-2/test/bar.tsx +++ b/types/react-chartjs-2/test/bar.tsx @@ -16,9 +16,7 @@ const data = { ] }; -export default React.createClass({ - displayName: 'BarExample', - +export default class BarExample extends React.Component { render() { return (

@@ -34,4 +32,4 @@ export default React.createClass({
); } -}); +} diff --git a/types/react-chartjs-2/test/bubble.tsx b/types/react-chartjs-2/test/bubble.tsx index b52d306136..726113c1ea 100755 --- a/types/react-chartjs-2/test/bubble.tsx +++ b/types/react-chartjs-2/test/bubble.tsx @@ -28,9 +28,7 @@ const data = { ] }; -export default React.createClass({ - displayName: 'BubbleExample', - +export default class BubbleExample extends React.Component { render() { return (
@@ -39,4 +37,4 @@ export default React.createClass({
); } -}); +} diff --git a/types/react-chartjs-2/test/doughnut.tsx b/types/react-chartjs-2/test/doughnut.tsx index 6a25d0354b..0743ee448b 100755 --- a/types/react-chartjs-2/test/doughnut.tsx +++ b/types/react-chartjs-2/test/doughnut.tsx @@ -22,9 +22,7 @@ const data = { }] }; -export default React.createClass({ - displayName: 'DoughnutExample', - +export default class DoughnutExample extends React.Component { render() { return (
@@ -33,4 +31,4 @@ export default React.createClass({
); } -}); +} diff --git a/types/react-chartjs-2/test/horizontalBar.tsx b/types/react-chartjs-2/test/horizontalBar.tsx index bf66f6b9fc..f63d21b51b 100755 --- a/types/react-chartjs-2/test/horizontalBar.tsx +++ b/types/react-chartjs-2/test/horizontalBar.tsx @@ -16,9 +16,7 @@ const data = { ] }; -export default React.createClass({ - displayName: 'BarExample', - +export default class HorizontalBarExample extends React.Component { render() { return (
@@ -27,4 +25,4 @@ export default React.createClass({
); } -}); +} diff --git a/types/react-chartjs-2/test/line.tsx b/types/react-chartjs-2/test/line.tsx index 55b0ad73fd..132b345dce 100755 --- a/types/react-chartjs-2/test/line.tsx +++ b/types/react-chartjs-2/test/line.tsx @@ -28,9 +28,7 @@ const data = { ] }; -export default React.createClass({ - displayName: 'LineExample', - +export default class LineExample extends React.Component { render() { return (
@@ -39,4 +37,4 @@ export default React.createClass({
); } -}); +} diff --git a/types/react-chartjs-2/test/mix.tsx b/types/react-chartjs-2/test/mix.tsx index 614e61723e..56c6e01cdc 100755 --- a/types/react-chartjs-2/test/mix.tsx +++ b/types/react-chartjs-2/test/mix.tsx @@ -69,9 +69,7 @@ const options: ChartOptions = { } }; -export default React.createClass({ - displayName: 'MixExample', - +export default class MixExample extends React.Component { render() { return (
@@ -83,4 +81,4 @@ export default React.createClass({
); } -}); +} diff --git a/types/react-chartjs-2/test/pie.tsx b/types/react-chartjs-2/test/pie.tsx index 9fb1912f5b..6aaedbb20f 100755 --- a/types/react-chartjs-2/test/pie.tsx +++ b/types/react-chartjs-2/test/pie.tsx @@ -22,9 +22,7 @@ const data = { }] }; -export default React.createClass({ - displayName: 'PieExample', - +export default class PieExample extends React.Component { render() { return (
@@ -33,4 +31,4 @@ export default React.createClass({
); } -}); +} diff --git a/types/react-chartjs-2/test/polar.tsx b/types/react-chartjs-2/test/polar.tsx index d586ca44be..264c3d9f2b 100755 --- a/types/react-chartjs-2/test/polar.tsx +++ b/types/react-chartjs-2/test/polar.tsx @@ -28,9 +28,7 @@ const data = { ] }; -export default React.createClass({ - displayName: 'PolarExample', - +export default class PolarExample extends React.Component { render() { return (
@@ -39,4 +37,4 @@ export default React.createClass({
); } -}); +} diff --git a/types/react-chartjs-2/test/radar.tsx b/types/react-chartjs-2/test/radar.tsx index 5c6dbc7c7d..886b111ae6 100755 --- a/types/react-chartjs-2/test/radar.tsx +++ b/types/react-chartjs-2/test/radar.tsx @@ -27,9 +27,7 @@ const data = { ] }; -export default React.createClass({ - displayName: 'RadarExample', - +export default class RadarExample extends React.Component { render() { return (
@@ -38,4 +36,4 @@ export default React.createClass({
); } -}); +} diff --git a/types/react-chartjs-2/test/randomizedLine.tsx b/types/react-chartjs-2/test/randomizedLine.tsx index 66be548968..fc63f75141 100755 --- a/types/react-chartjs-2/test/randomizedLine.tsx +++ b/types/react-chartjs-2/test/randomizedLine.tsx @@ -43,11 +43,10 @@ class Graph extends React.Component { }); const newDataSet = { - ...oldDataSet + ...oldDataSet, + data: newData }; - newDataSet.data = newData; - this.setState({ datasets: [newDataSet] }); }, 5000); } @@ -59,9 +58,7 @@ class Graph extends React.Component { } } -export default React.createClass({ - displayName: 'RandomizedDataLineExample', - +export default class RandomizedDataLineExample extends React.Component { render() { return (
@@ -70,4 +67,4 @@ export default React.createClass({
); } -}); +} diff --git a/types/react-dnd-html5-backend/react-dnd-html5-backend-tests.ts b/types/react-dnd-html5-backend/react-dnd-html5-backend-tests.ts index 47fa6ab5d4..14463a0440 100644 --- a/types/react-dnd-html5-backend/react-dnd-html5-backend-tests.ts +++ b/types/react-dnd-html5-backend/react-dnd-html5-backend-tests.ts @@ -2,9 +2,10 @@ // http://gaearon.github.io/react-dnd/docs-tutorial.html import * as React from "react"; +import * as DOM from "react-dom-factories"; import * as ReactDnd from "react-dnd"; -const r = React.DOM; +const r = DOM; import DragSource = ReactDnd.DragSource; import DropTarget = ReactDnd.DropTarget; diff --git a/types/react-dnd/react-dnd-tests.tsx b/types/react-dnd/react-dnd-tests.tsx index 929d64b1f5..76d732f268 100644 --- a/types/react-dnd/react-dnd-tests.tsx +++ b/types/react-dnd/react-dnd-tests.tsx @@ -2,9 +2,10 @@ // http://gaearon.github.io/react-dnd/docs-tutorial.html import * as React from "react"; +import * as DOM from "react-dom-factories"; import * as ReactDnd from "react-dnd"; -var r = React.DOM; +var r = DOM; import DragSource = ReactDnd.DragSource; import DropTarget = ReactDnd.DropTarget; diff --git a/types/react-dom-factories/index.d.ts b/types/react-dom-factories/index.d.ts new file mode 100644 index 0000000000..a0c63f0562 --- /dev/null +++ b/types/react-dom-factories/index.d.ts @@ -0,0 +1,12 @@ +// Type definitions for react-dom-factories 1.0 +// Project: https://facebook.github.io/react/ +// Definitions by: John Gozde +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +export as namespace ReactDOMFactories; +export = ReactDOMFactories; + +import { ReactDOM } from "react"; + +declare const ReactDOMFactories: ReactDOM; diff --git a/types/react-dom-factories/react-dom-factories-tests.ts b/types/react-dom-factories/react-dom-factories-tests.ts new file mode 100644 index 0000000000..de3b03819c --- /dev/null +++ b/types/react-dom-factories/react-dom-factories-tests.ts @@ -0,0 +1,8 @@ +import * as DOM from "react-dom-factories"; + +// tiny sampling of factories +DOM.a({}, "a"); +DOM.div({}, + DOM.span({}, DOM.b()), + DOM.ul({}, DOM.li({}, "test")) +); diff --git a/types/react-dom-factories/tsconfig.json b/types/react-dom-factories/tsconfig.json new file mode 100644 index 0000000000..8cdf540399 --- /dev/null +++ b/types/react-dom-factories/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "react-dom-factories-tests.ts" + ] +} diff --git a/types/react-dom-factories/tslint.json b/types/react-dom-factories/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-dom-factories/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } diff --git a/types/react-infinite/react-infinite-tests.tsx b/types/react-infinite/react-infinite-tests.tsx index 9736f979a0..2aa7a23192 100644 --- a/types/react-infinite/react-infinite-tests.tsx +++ b/types/react-infinite/react-infinite-tests.tsx @@ -51,31 +51,32 @@ class Test4 extends React.Component { } } -var ListItem = React.createClass<{key: number; num: number;}, {}>({ - render: function() { +class ListItem extends React.Component<{key: number; num: number}, {}> { + render() { return
List Item {this.props.num}
; } -}); +} -var InfiniteList = React.createClass({ - getInitialState: function() { - return { +class InfiniteList extends React.Component<{}, {elements: React.ReactElement[], isInfiniteLoading: boolean}> { + constructor(props?: {}, context?: any) { + super(props, context); + this.state = { elements: this.buildElements(0, 20), isInfiniteLoading: false - } - }, + }; + } - buildElements: function(start: number, end: number) { + buildElements(start: number, end: number) { var elements = [] as React.ReactElement[]; for (var i = start; i < end; i++) { elements.push() } return elements; - }, + } - handleInfiniteLoad: function() { + handleInfiniteLoad() { var that = this; this.setState({ isInfiniteLoading: true @@ -88,15 +89,15 @@ var InfiniteList = React.createClass({ elements: that.state.elements.concat(newElements) }); }, 2500); - }, + } - elementInfiniteLoad: function() { + elementInfiniteLoad() { return
Loading...
; - }, + } - render: function() { + render() { return ; } -}); +} diff --git a/types/react-is-deprecated/react-is-deprecated-tests.ts b/types/react-is-deprecated/react-is-deprecated-tests.ts index 2f01286189..a60364efdd 100644 --- a/types/react-is-deprecated/react-is-deprecated-tests.ts +++ b/types/react-is-deprecated/react-is-deprecated-tests.ts @@ -1,4 +1,4 @@ -import { PropTypes } from 'react'; +import * as PropTypes from 'prop-types'; import { deprecate, addIsDeprecated } from 'react-is-deprecated'; // test: one-off deprecation diff --git a/types/react-leaflet/react-leaflet-tests.tsx b/types/react-leaflet/react-leaflet-tests.tsx index c12b7d6617..fe9825c465 100644 --- a/types/react-leaflet/react-leaflet-tests.tsx +++ b/types/react-leaflet/react-leaflet-tests.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; +import * as PropTypes from 'prop-types'; import * as L from 'leaflet'; -import { Component, PropTypes } from 'react'; +import { Component } from 'react'; import { Children, Circle, diff --git a/types/react-mdl/react-mdl-tests.tsx b/types/react-mdl/react-mdl-tests.tsx index e9405820fe..2feffaa8e0 100644 --- a/types/react-mdl/react-mdl-tests.tsx +++ b/types/react-mdl/react-mdl-tests.tsx @@ -28,8 +28,8 @@ import { Chip, ChipContact, // all tests are from the examples provided here: https://tleunen.github.io/react-mdl/ // Badge tests -React.createClass({ - render: function() { +class BadgeTests extends React.Component { + render() { return (
{/* Number badge on icon */} @@ -41,7 +41,7 @@ React.createClass({ - + {/* Number badge on text */} Inbox @@ -50,11 +50,11 @@ React.createClass({
); } -}); +} // Chip tests -React.createClass({ - render: function() { +class ChipTests extends React.Component { + render() { return (
Basic chip @@ -77,12 +77,12 @@ React.createClass({
); - } -}); + } +} // Button tests -React.createClass({ - render: function() { +class ButtonTests extends React.Component { + render() { return (
{/* Colored FAB button */} @@ -161,11 +161,11 @@ React.createClass({
); } -}) +} // Card tests -React.createClass({ - render: function() { +class CardTests extends React.Component { + render() { return (
@@ -181,7 +181,7 @@ React.createClass({ - + Update @@ -192,7 +192,7 @@ React.createClass({ - + @@ -201,7 +201,7 @@ React.createClass({ - +

@@ -219,11 +219,11 @@ React.createClass({

); } -}); +} // Checkbox tests -React.createClass({ - render: function() { +class CheckboxTests extends React.Component { + render() { return (
@@ -232,11 +232,11 @@ React.createClass({
); } -}); +} // DataTable tests -React.createClass({ - render: function() { +class DataTableTests extends React.Component { + render() { return (
); } -}); +} // Dialog tests -React.createClass({ - render: function() { +class DialogTests extends React.Component<{}, {openDialog: boolean}> { + handleOpenDialog() { } + handleCloseDialog() { } + + render() { return (
@@ -324,7 +327,7 @@ React.createClass({
- +
@@ -338,7 +341,7 @@ React.createClass({
- +
@@ -355,11 +358,11 @@ React.createClass({
); } -}); +} // Grid tests -React.createClass({ - render: function() { +class GridTests extends React.Component { + render() { return (
@@ -396,11 +399,11 @@ React.createClass({
); } -}); +} // IconToggle tests -React.createClass({ - render: function() { +class IconToggleTests extends React.Component { + render() { return (
@@ -409,11 +412,11 @@ React.createClass({
); } -}); +} // Layout tests -React.createClass({ - render: function() { +class LayoutTests extends React.Component<{}, {activeTab: number}> { + render() { return (
{/* Uses a transparent header that draws on top of the layout's background */} @@ -602,7 +605,7 @@ React.createClass({
- this.setState({ activeTab: tabId })}> + {}}> Tab1 Tab2 Tab3 @@ -689,11 +692,11 @@ React.createClass({
); } -}); +} // List tests -React.createClass({ - render: function() { +class ListTests extends React.Component { + render() { return (
@@ -800,11 +803,11 @@ React.createClass({
); } -}); +} // Menu tests -React.createClass({ - render: function() { +class MenuTests extends React.Component { + render() { return (
{/* Lower left */} @@ -853,11 +856,11 @@ React.createClass({
); } -}); +} // ProgressBar tests -React.createClass({ - render: function() { +class ProgressBarTests extends React.Component { + render() { return (
{/* Simple Progress Bar */} @@ -871,11 +874,11 @@ React.createClass({
); } -}); +} // Radio tests -React.createClass({ - render: function() { +class RadioTests extends React.Component { + render() { return (
@@ -890,11 +893,11 @@ React.createClass({
); } -}); +} // Slider tests -React.createClass({ - render: function() { +class SliderTests extends React.Component { + render() { return (
{/* Default slider */} @@ -905,11 +908,15 @@ React.createClass({
); } -}); +} // Snackbar tests -React.createClass({ - render: function() { +class SnackbarTests extends React.Component { + handleClickActionSnackbar() {} + handleShowSnackbar() {} + handleTimeoutSnackbar() {} + + render() { return (
@@ -920,7 +927,7 @@ React.createClass({ onTimeout={this.handleTimeoutSnackbar} action="Undo">Button color changed.
- +
); } -}); +} // Spinner tests -React.createClass({ - render: function() { +class SpinnerTests extends React.Component { + render() { return (
{/* Simple spinner */} @@ -947,11 +954,11 @@ React.createClass({
); } -}); +} // Switch tests -React.createClass({ - render: function() { +class SwitchTest extends React.Component { + render() { return (
Ripple switch @@ -960,11 +967,11 @@ React.createClass({
); } -}); +} // Tab tests -React.createClass({ - render: function() { +class TabTests extends React.Component<{}, {activeTab: number}> { + render() { return (
@@ -976,15 +983,15 @@ React.createClass({
Content for the tab: {this.state.activeTab}
-
+
); } -}); +} // Textfield tests -React.createClass({ - render: function() { +class TextfieldTests extends React.Component { + render() { return (
{/* Simple textfield */} @@ -1022,11 +1029,11 @@ React.createClass({
); } -}); +} // Tooltip tests -React.createClass({ - render: function() { +class TooltipTests extends React.Component { + render() { return (
{/* Simple tooltip */} @@ -1071,15 +1078,15 @@ React.createClass({
); } -}); +} // MDLComponent tests -React.createClass({ - render: function() { +class MDLComponentTests extends React.Component { + render() { return (
) } -}); +} diff --git a/types/react-props-decorators/react-props-decorators-tests.ts b/types/react-props-decorators/react-props-decorators-tests.ts index 0bc81826fd..ab6e970362 100644 --- a/types/react-props-decorators/react-props-decorators-tests.ts +++ b/types/react-props-decorators/react-props-decorators-tests.ts @@ -1,9 +1,10 @@ import * as React from 'react'; +import * as PropTypes from 'prop-types'; import { propTypes, defaultProps } from 'react-props-decorators'; @propTypes({ - foo: React.PropTypes.string, - bar: React.PropTypes.number + foo: PropTypes.string, + bar: PropTypes.number }) @defaultProps({ foo: "defaultString", diff --git a/types/react-router/test/NavigateWithContext.tsx b/types/react-router/test/NavigateWithContext.tsx index 7a58090462..cd6f45d232 100644 --- a/types/react-router/test/NavigateWithContext.tsx +++ b/types/react-router/test/NavigateWithContext.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import * as PropTypes from 'prop-types'; import { RouterChildContext, RouteComponentProps @@ -15,7 +16,7 @@ type Props = RouteComponentProps; class ComponentThatUsesContext extends React.Component { static contextTypes = { - router: React.PropTypes.object.isRequired + router: PropTypes.object.isRequired }; context: RouterChildContext; private onClick = () => { diff --git a/types/react-virtualized/dist/es/ArrowKeyStepper.d.ts b/types/react-virtualized/dist/es/ArrowKeyStepper.d.ts index 6bc853361b..17844914af 100644 --- a/types/react-virtualized/dist/es/ArrowKeyStepper.d.ts +++ b/types/react-virtualized/dist/es/ArrowKeyStepper.d.ts @@ -1,4 +1,5 @@ -import { PropTypes, PureComponent, Validator, Requireable } from 'react' +import { PureComponent, Validator, Requireable } from 'react' +import * as PropTypes from 'prop-types' export type OnSectionRenderedParams = { columnStartIndex: number, diff --git a/types/react-virtualized/dist/es/AutoSizer.d.ts b/types/react-virtualized/dist/es/AutoSizer.d.ts index 35a9081095..b54fce89e1 100644 --- a/types/react-virtualized/dist/es/AutoSizer.d.ts +++ b/types/react-virtualized/dist/es/AutoSizer.d.ts @@ -1,4 +1,5 @@ -import { PropTypes, PureComponent, Validator, Requireable } from 'react' +import { PureComponent, Validator, Requireable } from 'react' +import * as PropTypes from 'prop-types' export type Dimensions = { height: number, diff --git a/types/react/index.d.ts b/types/react/index.d.ts index 29aef75598..4b123ecd87 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -167,8 +167,6 @@ declare namespace React { // Top Level API // ---------------------------------------------------------------------- - function createClass(spec: ComponentSpec): ClassicComponentClass

; - // DOM Elements function createFactory( type: keyof ReactHTML): HTMLFactory; @@ -260,8 +258,6 @@ declare namespace React { function isValidElement

(object: {}): object is ReactElement

; - const DOM: ReactDOM; - const PropTypes: ReactPropTypes; const Children: ReactChildren; const version: string; diff --git a/types/react/test/index.ts b/types/react/test/index.ts index 543063041b..b9eea759e7 100644 --- a/types/react/test/index.ts +++ b/types/react/test/index.ts @@ -10,6 +10,9 @@ import * as shallowCompare from "react-addons-shallow-compare"; import * as TestUtils from "react-addons-test-utils"; import * as TransitionGroup from "react-addons-transition-group"; import update = require("react-addons-update"); +import * as createReactClass from "create-react-class"; +import * as PropTypes from "prop-types"; +import * as DOM from "react-dom-factories"; interface Props extends React.Attributes { hello: string; @@ -47,46 +50,18 @@ const container: Element = document.createElement("div"); // Top-Level API // -------------------------------------------------------------------------- -const ClassicComponent: React.ClassicComponentClass = - React.createClass({ - displayName: "ClassicComponent", - getDefaultProps() { - return { - hello: "hello", - world: "peace", - foo: 0, - }; - }, - getInitialState() { - return { - inputValue: this.context.someValue, - seconds: this.props.foo - }; - }, - reset() { - this.replaceState(this.getInitialState()); - }, - render() { - return React.DOM.div(null, - React.DOM.input({ - ref: input => this._input = input, - value: this.state.inputValue - })); - } - }); - class ModernComponent extends React.Component implements MyComponent, React.ChildContextProvider { static propTypes: React.ValidationMap = { - foo: React.PropTypes.number + foo: PropTypes.number }; static contextTypes: React.ValidationMap = { - someValue: React.PropTypes.string + someValue: PropTypes.string }; static childContextTypes: React.ValidationMap = { - someOtherValue: React.PropTypes.string + someOtherValue: PropTypes.string }; context: Context; @@ -114,12 +89,12 @@ class ModernComponent extends React.Component private _input: HTMLInputElement | null; render() { - return React.DOM.div(null, - React.DOM.input({ + return DOM.div(null, + DOM.input({ ref: input => this._input = input, value: this.state.inputValue }), - React.DOM.input({ + DOM.input({ onChange: event => console.log(event.target) })); } @@ -131,8 +106,8 @@ class ModernComponent extends React.Component class ModernComponentArrayRender extends React.Component { render() { - return [React.DOM.h1({ key: "1" }, "1"), - React.DOM.h1({ key: "2" }, "2")]; + return [DOM.h1({ key: "1" }, "1"), + DOM.h1({ key: "2" }, "2")]; } } @@ -144,7 +119,7 @@ interface SCProps { } function StatelessComponent(props: SCProps) { - return props.foo ? React.DOM.div(null, props.foo) : null; + return props.foo ? DOM.div(null, props.foo) : null; } // tslint:disable-next-line:no-namespace @@ -155,7 +130,7 @@ namespace StatelessComponent { const StatelessComponent2: React.SFC = // props is contextually typed - props => React.DOM.div(null, props.foo); + props => DOM.div(null, props.foo); StatelessComponent2.displayName = "StatelessComponent2"; StatelessComponent2.defaultProps = { foo: 42 @@ -164,7 +139,7 @@ StatelessComponent2.defaultProps = { const StatelessComponent3: React.SFC = // allows usage of props.children // allows null return - props => props.foo ? React.DOM.div(null, props.foo, props.children) : null; + props => props.foo ? DOM.div(null, props.foo, props.children) : null; // React.createFactory const factory: React.CFactory = @@ -177,11 +152,6 @@ const statelessFactory: React.SFCFactory = const statelessFactoryElement: React.SFCElement = statelessFactory(props); -const classicFactory: React.ClassicFactory = - React.createFactory(ClassicComponent); -const classicFactoryElement: React.ClassicElement = - classicFactory(props); - const domFactory: React.DOMFactory, Element> = React.createFactory("div"); const domFactoryElement: React.DOMElement, Element> = @@ -191,7 +161,6 @@ const domFactoryElement: React.DOMElement, Element> = const element: React.CElement = React.createElement(ModernComponent, props); const elementNoState: React.CElement = React.createElement(ModernComponentNoState, props); const statelessElement: React.SFCElement = React.createElement(StatelessComponent, props); -const classicElement: React.ClassicElement = React.createElement(ClassicComponent, props); const domElement: React.DOMElement, HTMLDivElement> = React.createElement("div"); const htmlElement = React.createElement("input", { type: "text" }); const svgElement = React.createElement("svg", { accentHeight: 12 }); @@ -226,8 +195,6 @@ const clonedStatelessElement: React.SFCElement = // known problem: cloning with optional props don't work properly // workaround: cast to actual props type React.cloneElement(statelessElement, { foo: 44 } as SCProps); -const clonedClassicElement: React.ClassicElement = - React.cloneElement(classicElement, props); // Clone base DOMElement const clonedDOMElement: React.DOMElement, HTMLDivElement> = React.cloneElement(domElement, { @@ -251,7 +218,6 @@ const componentNullContainer: ModernComponent = ReactDOM.render(element, null); const componentElementOrNull: ModernComponent = ReactDOM.render(element, document.getElementById("anelement")); const componentNoState: ModernComponentNoState = ReactDOM.render(elementNoState, container); const componentNoStateElementOrNull: ModernComponentNoState = ReactDOM.render(elementNoState, document.getElementById("anelement")); -const classicComponent: React.ClassicComponent = ReactDOM.render(classicElement, container); const domComponent: Element = ReactDOM.render(domElement, container); // Other Top-Level API @@ -271,14 +237,6 @@ const type: React.ComponentClass = element.type; const elementProps: Props = element.props; const key = element.key; -// -// React Components -// -------------------------------------------------------------------------- - -const displayName: string | undefined = ClassicComponent.displayName; -const defaultProps: Props = ClassicComponent.getDefaultProps ? ClassicComponent.getDefaultProps() : {} as Props; -const propTypes: React.ValidationMap | undefined = ClassicComponent.propTypes; - // // Component API // -------------------------------------------------------------------------- @@ -288,10 +246,6 @@ const componentState: State = component.state; component.setState({ inputValue: "!!!" }); component.forceUpdate(); -// classic -const isMounted: boolean = classicComponent.isMounted(); -classicComponent.replaceState({ inputValue: "???", seconds: 60 }); - const myComponent = component as MyComponent; myComponent.reset(); @@ -315,18 +269,18 @@ RefComponent.create({ ref: c => componentRef = c }); componentRef.refMethod(); let domNodeRef: Element | null; -React.DOM.div({ ref: "domRef" }); +DOM.div({ ref: "domRef" }); // type of node should be inferred -React.DOM.div({ ref: node => domNodeRef = node }); +DOM.div({ ref: node => domNodeRef = node }); let inputNodeRef: HTMLInputElement | null; -React.DOM.input({ ref: node => inputNodeRef = node as HTMLInputElement }); +DOM.input({ ref: node => inputNodeRef = node as HTMLInputElement }); // // Attributes // -------------------------------------------------------------------------- -const children: any[] = ["Hello world", [null], React.DOM.span(null)]; +const children: any[] = ["Hello world", [null], DOM.span(null)]; const divStyle: React.CSSProperties = { // CSSProperties flex: "1 1 main-size", backgroundImage: "url('hello.png')" @@ -353,15 +307,15 @@ const htmlAttr: React.HTMLProps = { __html: "STRONG" } }; -React.DOM.div(htmlAttr); -React.DOM.span(htmlAttr); -React.DOM.input(htmlAttr); +DOM.div(htmlAttr); +DOM.span(htmlAttr); +DOM.input(htmlAttr); -React.DOM.svg({ +DOM.svg({ viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg" }, - React.DOM.rect({ + DOM.rect({ className: 'foobar', id: 'foo', color: 'black', @@ -372,7 +326,7 @@ React.DOM.svg({ strokeDasharray: '30%', strokeDashoffset: '20%' }), - React.DOM.rect({ + DOM.rect({ x: 10, y: 22, width: 28, @@ -380,7 +334,7 @@ React.DOM.svg({ strokeDasharray: 30, strokeDashoffset: 20 }), - React.DOM.path({ + DOM.path({ d: "M0,0V3H3V0ZM1,1V2H2V1Z", fill: "#999999", fillRule: "evenodd" @@ -388,34 +342,34 @@ React.DOM.svg({ ); // -// React.PropTypes +// PropTypes // -------------------------------------------------------------------------- const PropTypesSpecification: React.ComponentSpec = { propTypes: { - optionalArray: React.PropTypes.array, - optionalBool: React.PropTypes.bool, - optionalFunc: React.PropTypes.func, - optionalNumber: React.PropTypes.number, - optionalObject: React.PropTypes.object, - optionalString: React.PropTypes.string, - optionalNode: React.PropTypes.node, - optionalElement: React.PropTypes.element, - optionalMessage: React.PropTypes.instanceOf(Date), - optionalEnum: React.PropTypes.oneOf(["News", "Photos"]), - optionalUnion: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.number, - React.PropTypes.instanceOf(Date) + optionalArray: PropTypes.array, + optionalBool: PropTypes.bool, + optionalFunc: PropTypes.func, + optionalNumber: PropTypes.number, + optionalObject: PropTypes.object, + optionalString: PropTypes.string, + optionalNode: PropTypes.node, + optionalElement: PropTypes.element, + optionalMessage: PropTypes.instanceOf(Date), + optionalEnum: PropTypes.oneOf(["News", "Photos"]), + optionalUnion: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.instanceOf(Date) ]), - optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), - optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), - optionalObjectWithShape: React.PropTypes.shape({ - color: React.PropTypes.string, - fontSize: React.PropTypes.number + optionalArrayOf: PropTypes.arrayOf(PropTypes.number), + optionalObjectOf: PropTypes.objectOf(PropTypes.number), + optionalObjectWithShape: PropTypes.shape({ + color: PropTypes.string, + fontSize: PropTypes.number }), - requiredFunc: React.PropTypes.func.isRequired, - requiredAny: React.PropTypes.any.isRequired, + requiredFunc: PropTypes.func.isRequired, + requiredAny: PropTypes.any.isRequired, customProp(props: any, propName: string, componentName: string): Error | null { if (!/matchme/.test(props[propName])) { return new Error("Validation failed!"); @@ -424,7 +378,7 @@ const PropTypesSpecification: React.ComponentSpec = { }, // https://facebook.github.io/react/warnings/dont-call-proptypes.html#fixing-the-false-positive-in-third-party-proptypes percentage: (object: any, key: string, componentName: string, ...rest: any[]): Error | null => { - const error = React.PropTypes.number(object, key, componentName, ...rest); + const error = PropTypes.number(object, key, componentName, ...rest); if (error) { return error; } @@ -445,29 +399,29 @@ const PropTypesSpecification: React.ComponentSpec = { const ContextTypesSpecification: React.ComponentSpec = { contextTypes: { - optionalArray: React.PropTypes.array, - optionalBool: React.PropTypes.bool, - optionalFunc: React.PropTypes.func, - optionalNumber: React.PropTypes.number, - optionalObject: React.PropTypes.object, - optionalString: React.PropTypes.string, - optionalNode: React.PropTypes.node, - optionalElement: React.PropTypes.element, - optionalMessage: React.PropTypes.instanceOf(Date), - optionalEnum: React.PropTypes.oneOf(["News", "Photos"]), - optionalUnion: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.number, - React.PropTypes.instanceOf(Date) + optionalArray: PropTypes.array, + optionalBool: PropTypes.bool, + optionalFunc: PropTypes.func, + optionalNumber: PropTypes.number, + optionalObject: PropTypes.object, + optionalString: PropTypes.string, + optionalNode: PropTypes.node, + optionalElement: PropTypes.element, + optionalMessage: PropTypes.instanceOf(Date), + optionalEnum: PropTypes.oneOf(["News", "Photos"]), + optionalUnion: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.instanceOf(Date) ]), - optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), - optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), - optionalObjectWithShape: React.PropTypes.shape({ - color: React.PropTypes.string, - fontSize: React.PropTypes.number + optionalArrayOf: PropTypes.arrayOf(PropTypes.number), + optionalObjectOf: PropTypes.objectOf(PropTypes.number), + optionalObjectWithShape: PropTypes.shape({ + color: PropTypes.string, + fontSize: PropTypes.number }), - requiredFunc: React.PropTypes.func.isRequired, - requiredAny: React.PropTypes.any.isRequired, + requiredFunc: PropTypes.func.isRequired, + requiredAny: PropTypes.any.isRequired, customProp(props: any, propName: string, componentName: string): Error | null { if (!/matchme/.test(props[propName])) { return new Error("Validation failed!"); @@ -488,7 +442,7 @@ const mappedChildrenArray: number[] = React.Children.map(children, (child) => 42); React.Children.forEach(children, (child) => { }); const nChildren: number = React.Children.count(children); -let onlyChild: React.ReactElement = React.Children.only(React.DOM.div()); // ok +let onlyChild: React.ReactElement = React.Children.only(DOM.div()); // ok onlyChild = React.Children.only([null, [[["Hallo"], true]], false]); // error const childrenToArray: React.ReactChild[] = React.Children.toArray(children); @@ -516,7 +470,7 @@ class Timer extends React.Component<{}, TimerState> { clearInterval(this._interval); } render() { - return React.DOM.div( + return DOM.div( null, "Seconds Elapsed: ", this.state.secondsElapsed @@ -529,7 +483,7 @@ ReactDOM.render(React.createElement(Timer), container); // createFragment addon // -------------------------------------------------------------------------- createFragment({ - a: React.DOM.div(), + a: DOM.div(), b: ["a", false, React.createElement("span")] }); @@ -537,7 +491,7 @@ createFragment({ // CSSTransitionGroup addon // -------------------------------------------------------------------------- React.createFactory(CSSTransitionGroup)({ - component: React.createClass({ + component: createReactClass({ render: (): null => null }), childFactory: (c) => c, @@ -563,7 +517,7 @@ React.createFactory(CSSTransitionGroup)({ // // LinkedStateMixin addon // -------------------------------------------------------------------------- -React.createClass({ +createReactClass({ mixins: [LinkedStateMixin], getInitialState() { return { @@ -572,12 +526,12 @@ React.createClass({ }; }, render() { - return React.DOM.div(null, - React.DOM.input({ + return DOM.div(null, + DOM.input({ type: "checkbox", checkedLink: this.linkState("isChecked") }), - React.DOM.input({ + DOM.input({ type: "text", valueLink: this.linkState("message") }) @@ -616,9 +570,9 @@ Perf.printDOM(); // // PureRenderMixin addon // -------------------------------------------------------------------------- -React.createClass({ +createReactClass({ mixins: [PureRenderMixin], - render() { return React.DOM.div(null); } + render() { return DOM.div(null); } }); // @@ -626,7 +580,7 @@ React.createClass({ // -------------------------------------------------------------------------- const inst: ModernComponent = TestUtils.renderIntoDocument(element); -const node: Element = TestUtils.renderIntoDocument(React.DOM.div()); +const node: Element = TestUtils.renderIntoDocument(DOM.div()); TestUtils.Simulate.click(node); TestUtils.Simulate.change(node); @@ -698,14 +652,14 @@ class SyntheticEventTargetValue extends React.Component<{}, { value: string }> { this.state = { value: 'a' }; } render() { - return React.DOM.textarea({ + return DOM.textarea({ value: this.state.value, onChange: e => this.setState({ value: e.target.value }) }); } } -React.DOM.input({ +DOM.input({ onChange: event => { // `event.target` is guaranteed to be HTMLInputElement event.target.value; diff --git a/types/redux-form/redux-form-tests.tsx b/types/redux-form/redux-form-tests.tsx index 3648e9b452..dba9b95633 100644 --- a/types/redux-form/redux-form-tests.tsx +++ b/types/redux-form/redux-form-tests.tsx @@ -37,6 +37,8 @@ import libFormValueSelector from "redux-form/lib/formValueSelector"; import libReduxForm from "redux-form/lib/reduxForm"; import libActions from "redux-form/lib/actions"; + // TODO: tests fail in TypeScript@next when strictFunctionTypes=true + /* Decorated components */ interface TestFormData { foo: string; diff --git a/types/redux-form/tsconfig.json b/types/redux-form/tsconfig.json index 2c5cee3acb..f4a4b5a502 100644 --- a/types/redux-form/tsconfig.json +++ b/types/redux-form/tsconfig.json @@ -37,4 +37,4 @@ "lib/selectors.d.ts", "lib/SubmissionError.d.ts" ] -} \ No newline at end of file +} diff --git a/types/redux-form/v4/redux-form-tests.tsx b/types/redux-form/v4/redux-form-tests.tsx index 424c87c609..f8f2923be8 100644 --- a/types/redux-form/v4/redux-form-tests.tsx +++ b/types/redux-form/v4/redux-form-tests.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; -import { Component, PropTypes } from 'react'; +import { Component } from 'react'; +import * as PropTypes from 'prop-types'; import {createStore, combineReducers} from 'redux'; import {reduxForm, reducer as reduxFormReducer, ReduxFormProps} from 'redux-form'; diff --git a/types/redux-form/v6/redux-form-tests.tsx b/types/redux-form/v6/redux-form-tests.tsx index 086e03f319..9609dac965 100644 --- a/types/redux-form/v6/redux-form-tests.tsx +++ b/types/redux-form/v6/redux-form-tests.tsx @@ -3,6 +3,8 @@ import { Component } from 'react'; import { Action } from 'redux'; import { Field, GenericField, reduxForm, WrappedFieldProps, BaseFieldProps, FormProps, FormAction, actionTypes, reducer } from "redux-form"; + // TODO: tests fail in TypeScript@next when strictFunctionTypes=true + interface CustomComponentProps { customProp: string; } @@ -86,7 +88,7 @@ reduxForm({ // adapted from: http://redux-form.com/6.0.0-alpha.4/examples/initializeFromState/ import { connect, DispatchProp } from 'react-redux' -const { DOM: { input } } = React +import { input } from 'react-dom-factories'; interface DataShape { firstName: string; diff --git a/types/redux-form/v6/tsconfig.json b/types/redux-form/v6/tsconfig.json index 51ee26293e..b0b8c098f5 100644 --- a/types/redux-form/v6/tsconfig.json +++ b/types/redux-form/v6/tsconfig.json @@ -31,4 +31,4 @@ "index.d.ts", "redux-form-tests.tsx" ] -} \ No newline at end of file +}