Merge pull request #20987 from pelotom/patch-10

[react] Make component constructor props non-optional

types/draft-js/draft-js-tests.tsx

@@ -30,7 +30,7 @@ type SyntheticKeyboardEvent = React.KeyboardEvent<{}>;
 
 class RichEditorExample extends React.Component<{}, { editorState: EditorState }> {
   constructor() {
-    super();
+    super({});
 
     const sampleMarkup =
       '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
@@ -182,9 +182,17 @@ function getBlockStyle(block: ContentBlock) {
   }
 }
 
-class StyleButton extends React.Component<{key: string, active: boolean, label: string, onToggle: (blockType: string) => void, style: string}> {
-  constructor() {
-    super();
+interface Props {
+  key: string
+  active: boolean
+  label: string
+  onToggle: (blockType: string) => void
+  style: string
+}
+
+class StyleButton extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
   }
 
   onToggle: (event: Event) => void = (event: Event) => {

types/jasmine-enzyme/jasmine-enzyme-tests.tsx

@@ -254,7 +254,7 @@ describe('toHaveRef', () => {
 describe('toHaveState', () => {
 	class Fixture extends React.Component {
 		constructor() {
-			super();
+			super({});
 			this.state = {
 				foo: false,
 			};

types/material-ui-pagination/material-ui-pagination-tests.tsx

@@ -18,7 +18,7 @@ interface PagerState {
 
 class Pager extends React.Component<{}, PagerState> {
 	constructor() {
-		super();
+		super({});
 		this.state = {
 			pageIndex: 0
 		};

types/material-ui/material-ui-tests.tsx

@@ -7004,7 +7004,7 @@ class BottomNavigationExample extends Component<{}, {
   index?: number
 }> {
   constructor() {
-    super();
+    super({});
     this.state = {
       index: 0
     };

types/react-datepicker/react-datepicker-tests.tsx

@@ -4,7 +4,7 @@ import DatePicker from 'react-datepicker';
 
 class ReactDatePicker extends React.Component<{}, { startDate: moment.Moment; displayName: string; }> {
 	constructor(props: {}) {
-		super();
+		super(props);
 		this.state = {
 			startDate: moment(),
 			displayName: 'Example'

types/react-dom/test-utils/index.d.ts

@@ -59,7 +59,7 @@ export interface SyntheticEventData extends OptionalEventProperties {
 export type EventSimulator = (element: Element | Component<any>, eventData?: SyntheticEventData) => void;
 
 export interface MockedComponentClass {
-    new (): any;
+    new (props: {}): any;
 }
 
 export interface ShallowRenderer {

types/react-lazyload/react-lazyload-tests.tsx

@@ -7,7 +7,7 @@ interface State {
 
 class Normal extends React.Component<{}, State> {
     constructor() {
-        super();
+        super({});
         const arr: string[] = [];
         for (let i = 0; i < 200; i++) {
             arr.push(`${i}`);

types/react-native-material-kit/react-native-material-kit-tests.tsx

@@ -141,7 +141,7 @@ class MKRadioButtonTest extends React.Component<null, null> {
     radioGroup: MKRadioButton.Group;
 
     constructor() {
-        super();
+        super(null);
         this.radioGroup = new MKRadioButton.Group();
 
         setTheme({radioStyle: {
@@ -165,7 +165,7 @@ class MKRadioButtonTest extends React.Component<null, null> {
 /// Checkbox
 class MKCheckboxTest extends React.Component<null, null> {
     constructor() {
-        super();
+        super(null);
 
         setTheme({checkboxStyle: {
             fillColor: MKColor.Teal,

types/react-native-material-ui/react-native-material-ui-tests.tsx

@@ -68,7 +68,7 @@ const DialogExample = () =>
 
 class BottomNavigationExample extends React.Component<null, {active: string}> {
     constructor() {
-        super();
+        super(null);
 
         this.state = {
             active: 'today'

types/react-native-modalbox/react-native-modalbox-tests.tsx

@@ -24,7 +24,7 @@ class Example extends React.Component<{}, State> {
   modal6: Modal;
 
   constructor() {
-    super();
+    super({});
 
     this.state = {
       isOpen: false,

types/react-native-tab-navigator/react-native-tab-navigator-tests.tsx

@@ -10,7 +10,7 @@ const tabBarImage = 'https://assets-cdn.github.com/images/modules/logos_page/Git
 
 class TabTest extends React.Component<any, TabTestState> {
     constructor() {
-        super();
+        super({});
 
         this.state = {
             selectedTab: 'home'

types/react-native-vector-icons/react-native-vector-icons-tests.tsx

@@ -43,9 +43,9 @@ class Example extends React.Component {
   }
 }
 
-class TabTest extends React.Component<any, { selectedTab: string }> {
+class TabTest extends React.Component<{}, { selectedTab: string }> {
   constructor() {
-    super();
+    super({});
 
     this.state = {
       selectedTab: 'tab1'
@@ -85,7 +85,7 @@ class TabTest extends React.Component<any, { selectedTab: string }> {
 
 class TestCustomIcon extends React.Component {
   constructor() {
-    super();
+    super({});
   }
 
   handleButton() {

types/react-onclickoutside/index.d.ts

@@ -26,7 +26,7 @@ export interface OnClickOutProps {
 export type ComponentConstructor<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
 
 export interface ClickOutComponentClass<P extends InjectedOnClickOutProps> extends React.ComponentClass<P> {
-    new (props?: P, context?: any): React.Component<P, React.ComponentState> & HandleClickOutside<any>;
+    new (props: P, context?: any): React.Component<P, React.ComponentState> & HandleClickOutside<any>;
 }
 
 export default function OnClickOut<P>(

types/react-onsenui/react-onsenui-tests.tsx

@@ -9,7 +9,7 @@ class AppState {
 interface AppProps {} // tslint:disable-line no-empty-interface
 
 export class App extends React.Component<AppProps, AppState> {
-    constructor(props?: AppProps) {
+    constructor(props: AppProps) {
         super(props);
         this.state = new AppState();
     }

types/react-redux-toastr/react-redux-toastr-tests.ts

@@ -18,7 +18,7 @@ function test() {
     toastr.confirm("Test", { onOk: callback, onCancel: callback });
     toastr.error("Error", "Error message");
     toastr.info("Info", "Info test", { timeOut: 1000, removeOnHover: true, onShowComplete: callback });
-    toastr.success("Test", "Test message", { component: new React.Component() });
+    toastr.success("Test", "Test message", { component: new React.Component({}) });
 }
 
 test();

types/react-sortable-hoc/react-sortable-hoc-tests.tsx

@@ -50,7 +50,7 @@ class SortableComponent extends React.Component<{}, SortableComponentState> {
     }
 
     public constructor() {
-        super();
+        super({});
         this.state = {
             items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
             axis: 'x'

types/react-swf/react-swf-tests.ts

@@ -1,6 +1,8 @@
 var version = ReactSWF.getFPVersion();
 var isFPVersionSupported = ReactSWF.isFPVersionSupported('5');
-var reactSWF = new ReactSWF();
-reactSWF.props = {
-  src:'',pluginspage:'',width:20,height:20
-}
+var reactSWF = new ReactSWF({
+  src:'',
+  pluginspage:'',
+  width:20,
+  height:20,
+});

types/react/index.d.ts

@@ -277,7 +277,7 @@ declare namespace React {
     // tslint:disable-next-line:no-empty-interface
     interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }
     class Component<P, S> {
-        constructor(props?: P, context?: any);
+        constructor(props: P, context?: any);
 
         // Disabling unified-signatures to have separate overloads. It's easier to understand this way.
         // tslint:disable:unified-signatures
@@ -327,7 +327,7 @@ declare namespace React {
     }
 
     interface ComponentClass<P = {}> {
-        new (props?: P, context?: any): Component<P, ComponentState>;
+        new (props: P, context?: any): Component<P, ComponentState>;
         propTypes?: ValidationMap<P>;
         contextTypes?: ValidationMap<any>;
         childContextTypes?: ValidationMap<any>;
@@ -336,7 +336,7 @@ declare namespace React {
     }
 
     interface ClassicComponentClass<P = {}> extends ComponentClass<P> {
-        new (props?: P, context?: any): ClassicComponent<P, ComponentState>;
+        new (props: P, context?: any): ClassicComponent<P, ComponentState>;
         getDefaultProps?(): P;
     }
 
@@ -347,8 +347,8 @@ declare namespace React {
      */
     type ClassType<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>> =
         C &
-        (new (props?: P, context?: any) => T) &
-        (new (props?: P, context?: any) => { props: P });
+        (new (props: P, context?: any) => T) &
+        (new (props: P, context?: any) => { props: P });
 
     //
     // Component Specs and Lifecycle

types/react/test/index.ts

@@ -262,7 +262,7 @@ class RefComponent extends React.Component<RCProps> {
     }
 }
 
-let componentRef: RefComponent | null = new RefComponent();
+let componentRef: RefComponent | null = new RefComponent({});
 RefComponent.create({ ref: "componentRef" });
 // type of c should be inferred
 RefComponent.create({ ref: c => componentRef = c });
@@ -609,8 +609,8 @@ if (TestUtils.isElementOfType(emptyElement2, StatelessComponent)) {
 
 if (TestUtils.isDOMComponent(container)) {
     container.getAttribute("className");
-} else if (TestUtils.isCompositeComponent(new ModernComponent())) {
-    new ModernComponent().props;
+} else if (TestUtils.isCompositeComponent(new ModernComponent({ hello: 'hi', foo: 3 }))) {
+    new ModernComponent({ hello: 'hi', foo: 3 }).props;
 }
 
 //