updated class component default props pattern

piotrwitek · piotrwitek · commit 4b4631635ba2 · 2018-01-01T12:40:51.000+01:00
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@ You should check Playground Project located in the `/playground` folder. It is a
 - [React Types Cheatsheet](#react-types-cheatsheet) 🌟 __NEW__
 - [Component Typing Patterns](#component-typing-patterns)
   - [Stateless Components - SFC](#stateless-components---sfc)
-  - [Stateful Components - Class](#stateful-components---class)
+  - [Stateful Components - Class](#stateful-components---class) 📝 __UPDATED__
   - [Generic Components](#generic-components)
   - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__
   - [Redux Connected Components](#redux-connected-components)
@@ -239,7 +239,7 @@ export class StatefulCounter extends React.Component<StatefulCounterProps, State
 ```tsx
 import * as React from 'react';
 
-export interface StatefulCounterWithInitialCountProps {
+export interface StatefulCounterWithDefaultProps {
   label: string;
   initialCount?: number;
 }
@@ -248,53 +248,52 @@ interface DefaultProps {
   initialCount: number;
 }
 
-type PropsWithDefaults = StatefulCounterWithInitialCountProps & DefaultProps;
-
 interface State {
   count: number;
 }
 
-export const StatefulCounterWithInitialCount: React.ComponentClass<StatefulCounterWithInitialCountProps> =
-  class extends React.Component<PropsWithDefaults, State> {
-    // to make defaultProps strictly typed we need to explicitly declare their type
-    // @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640
-    static defaultProps: DefaultProps = {
-      initialCount: 0,
-    };
+export class StatefulCounterWithDefault extends React.Component<StatefulCounterWithDefaultProps, State> {
+  // to make defaultProps strictly typed we need to explicitly declare their type
+  // @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640
+  static defaultProps: DefaultProps = {
+    initialCount: 0,
+  };
 
-    state: State = {
-      count: this.props.initialCount,
-    };
+  props: StatefulCounterWithDefaultProps & DefaultProps;
 
-    componentWillReceiveProps({ initialCount }: PropsWithDefaults) {
-      if (initialCount != null && initialCount !== this.props.initialCount) {
-        this.setState({ count: initialCount });
-      }
-    }
+  state: State = {
+    count: this.props.initialCount,
+  };
 
-    handleIncrement = () => {
-      this.setState({ count: this.state.count + 1 });
+  componentWillReceiveProps({ initialCount }: StatefulCounterWithDefaultProps) {
+    if (initialCount != null && initialCount !== this.props.initialCount) {
+      this.setState({ count: initialCount });
     }
+  }
 
-    render() {
-      const { handleIncrement } = this;
-      const { label } = this.props;
-      const { count } = this.state;
+  handleIncrement = () => {
+    this.setState({ count: this.state.count + 1 });
+  }
 
-      return (
-        <div>
-          <span>{label}: {count} </span>
-          <button type="button" onClick={handleIncrement}>
-            {`Increment`}
-          </button>
-        </div>
-      );
-    }
-  };
+  render() {
+    const { handleIncrement } = this;
+    const { label } = this.props;
+    const { count } = this.state;
+
+    return (
+      <div>
+        <span>{label}: {count} </span>
+        <button type="button" onClick={handleIncrement}>
+          {`Increment`}
+        </button>
+      </div>
+    );
+  }
+}
 
 ```
 
-[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#statefulcounterwithinitialcount)
+[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#statefulcounterwithdefault)
 
 [⇧ back to top](#table-of-contents)
 
diff --git a/docs/build/0.7272607c.js b/docs/build/0.7272607c.js
diff --git a/docs/build/0.8d8a3f08.js b/docs/build/0.8d8a3f08.js
diff --git a/docs/build/bundle.0b1b071d.js b/docs/build/bundle.0b1b071d.js
diff --git a/docs/build/bundle.5da79f21.js b/docs/build/bundle.5da79f21.js
diff --git a/docs/index.html b/docs/index.html
@@ -7,5 +7,5 @@
 	</head>
 	<body>
 		<div id="app"></div>
-	<script type="text/javascript" src="build/bundle.0b1b071d.js"></script></body>
+	<script type="text/javascript" src="build/bundle.5da79f21.js"></script></body>
 </html>
diff --git a/docs/markdown/1_react.md b/docs/markdown/1_react.md
@@ -87,9 +87,9 @@ const handleChange: React.ReactEventHandler<HTMLInputElement> = (ev) => { ...
 
 #### - with default props
 
-::example='../../playground/src/components/stateful-counter-with-initial-count.tsx'::
+::example='../../playground/src/components/stateful-counter-with-default.tsx'::
 
-[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#statefulcounterwithinitialcount)
+[⟩⟩⟩ demo](https://piotrwitek.github.io/react-redux-typescript-guide/#statefulcounterwithdefault)
 
 [⇧ back to top](#table-of-contents)
 
diff --git a/docs/markdown/_toc.md b/docs/markdown/_toc.md
@@ -3,7 +3,7 @@
 - [React Types Cheatsheet](#react-types-cheatsheet) 🌟 __NEW__
 - [Component Typing Patterns](#component-typing-patterns)
   - [Stateless Components - SFC](#stateless-components---sfc)
-  - [Stateful Components - Class](#stateful-components---class)
+  - [Stateful Components - Class](#stateful-components---class) 📝 __UPDATED__
   - [Generic Components](#generic-components)
   - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__
   - [Redux Connected Components](#redux-connected-components)
diff --git a/playground/package.json b/playground/package.json
@@ -30,7 +30,7 @@
     "reselect": "3.0.1",
     "rxjs": "5.5.6",
     "tslib": "1.8.1",
-    "typesafe-actions": "1.0.0",
+    "typesafe-actions": "1.1.0",
     "uuid": "3.1.0"
   },
   "devDependencies": {
@@ -46,7 +46,7 @@
     "react-styleguidist": "6.1.0",
     "tslint": "5.8.0",
     "tslint-react": "3.2.0",
-    "typescript": "2.7.0-dev.20171216",
+    "typescript": "2.6.2",
     "webpack": "3.10.0",
     "webpack-blocks": "1.0.0-rc.2"
   }
diff --git a/playground/src/components/index.ts b/playground/src/components/index.ts
@@ -3,4 +3,4 @@ export * from './generic-list';
 export * from './sfc-counter';
 export * from './sfc-spread-attributes';
 export * from './stateful-counter';
-export * from './stateful-counter-with-initial-count';
+export * from './stateful-counter-with-default';
diff --git a/playground/src/components/stateful-counter-with-default.md b/playground/src/components/stateful-counter-with-default.md
@@ -0,0 +1,9 @@
+Usage:
+```jsx { "filePath": "./stateful-counter-with-default.usage.tsx" }
+```
+
+Usage Demo:
+```jsx 
+const Demo = require('./stateful-counter-with-default.usage').default;
+<Demo />
+```
diff --git a/playground/src/components/stateful-counter-with-default.tsx b/playground/src/components/stateful-counter-with-default.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+export interface StatefulCounterWithDefaultProps {
+  label: string;
+  initialCount?: number;
+}
+
+interface DefaultProps {
+  initialCount: number;
+}
+
+interface State {
+  count: number;
+}
+
+export class StatefulCounterWithDefault extends React.Component<StatefulCounterWithDefaultProps, State> {
+  // to make defaultProps strictly typed we need to explicitly declare their type
+  // @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640
+  static defaultProps: DefaultProps = {
+    initialCount: 0,
+  };
+
+  props: StatefulCounterWithDefaultProps & DefaultProps;
+
+  state: State = {
+    count: this.props.initialCount,
+  };
+
+  componentWillReceiveProps({ initialCount }: StatefulCounterWithDefaultProps) {
+    if (initialCount != null && initialCount !== this.props.initialCount) {
+      this.setState({ count: initialCount });
+    }
+  }
+
+  handleIncrement = () => {
+    this.setState({ count: this.state.count + 1 });
+  }
+
+  render() {
+    const { handleIncrement } = this;
+    const { label } = this.props;
+    const { count } = this.state;
+
+    return (
+      <div>
+        <span>{label}: {count} </span>
+        <button type="button" onClick={handleIncrement}>
+          {`Increment`}
+        </button>
+      </div>
+    );
+  }
+}
diff --git a/playground/src/components/stateful-counter-with-default.usage.tsx b/playground/src/components/stateful-counter-with-default.usage.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-import { StatefulCounterWithInitialCount } from '@src/components';
+import { StatefulCounterWithDefault } from '@src/components';
 
 export default () => (
-  <StatefulCounterWithInitialCount
+  <StatefulCounterWithDefault
     label={'StatefulCounter'}
     initialCount={10}
   />
diff --git a/playground/src/components/stateful-counter-with-initial-count.md b/playground/src/components/stateful-counter-with-initial-count.md
diff --git a/playground/src/components/stateful-counter-with-initial-count.tsx b/playground/src/components/stateful-counter-with-initial-count.tsx
diff --git a/playground/src/containers/home.tsx b/playground/src/containers/home.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import SFCCounter from '@src/components/sfc-counter.usage';
 import SFCSpreadAttributes from '@src/components/sfc-spread-attributes.usage';
 import StatefulCounter from '@src/components/stateful-counter.usage';
-import StatefulCounterWithInitialCount from '@src/components/stateful-counter-with-initial-count.usage';
+import StatefulCounterWithInitialCount from '@src/components/stateful-counter-with-default.usage';
 import UserListUsage from '@src/components/generic-list.usage';
 
 export const Home = () => {
diff --git a/playground/styleguide.config.js b/playground/styleguide.config.js
@@ -26,7 +26,7 @@ module.exports = {
       name: 'Stateful Components - Class',
       components: () => ([
         './src/components/stateful-counter.tsx',
-        './src/components/stateful-counter-with-initial-count.tsx',
+        './src/components/stateful-counter-with-default.tsx',
       ]),
     },
     {
diff --git a/playground/yarn.lock b/playground/yarn.lock
@@ -6050,15 +6050,11 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typesafe-actions@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/typesafe-actions/-/typesafe-actions-1.0.0.tgz#9bd4b9e250399e818fd3dbf0235fa21972cda509"
-
-typescript@2.7.0-dev.20171216:
-  version "2.7.0-dev.20171216"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.0-dev.20171216.tgz#ae3ff4ea462a8a5f37923108edeedfcaf9c5f1b7"
+typesafe-actions@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/typesafe-actions/-/typesafe-actions-1.1.0.tgz#f98c815be0d37d8d1b22f28cc216677810c156e4"
 
-typescript@^2.4.2:
+typescript@2.6.2, typescript@^2.4.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
 
