Merge pull request #330 from iclanton/clean-up-react-components

Clean up some functional components.

playground/src/App.tsx

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import { PlaygroundView } from './PlaygroundView';
 
-class App extends React.Component {
+export default function App(): JSX.Element {
-  public render(): React.ReactNode {
   return (
     <>
       <PlaygroundView />
     </>
   );
 }
-}
-
-export default App;

playground/src/DocAstView.tsx

@@ -8,13 +8,12 @@ export interface IDocAstViewProps {
   theme?: string;
 }
 
-export class DocAstView extends React.Component<IDocAstViewProps> {
+export function DocAstView(props: IDocAstViewProps): JSX.Element {
-  public render(): React.ReactNode {
+  const parserContext: tsdoc.ParserContext | undefined = props.parserContext;
-    const parserContext: tsdoc.ParserContext | undefined = this.props.parserContext;
   const outputLines: string[] = [];
 
   if (parserContext && parserContext.docComment) {
-      this._dumpTSDocTree(outputLines, parserContext.docComment);
+    _dumpTSDocTree(outputLines, parserContext.docComment);
   }
 
   return (
@@ -23,12 +22,12 @@ export class DocAstView extends React.Component<IDocAstViewProps> {
       readOnly={true}
       value={outputLines.join('\n')}
       disableLineNumbers={true}
-        theme={this.props.theme}
+      theme={props.theme}
     />
   );
 }
 
-  private _dumpTSDocTree(outputLines: string[], docNode: tsdoc.DocNode, indent: string = ''): void {
+function _dumpTSDocTree(outputLines: string[], docNode: tsdoc.DocNode, indent: string = ''): void {
   let dumpText: string = '';
   if (docNode instanceof tsdoc.DocExcerpt) {
     const content: string = docNode.content.toString();
@@ -39,7 +38,6 @@ export class DocAstView extends React.Component<IDocAstViewProps> {
   outputLines.push(dumpText);
 
   for (const child of docNode.getChildNodes()) {
-      this._dumpTSDocTree(outputLines, child, indent + '  ');
+    _dumpTSDocTree(outputLines, child, indent + '  ');
-    }
   }
 }

playground/src/DocDomView.tsx

@@ -16,16 +16,15 @@ export interface IDocDomViewProps {
   theme?: string;
 }
 
-export class DocDomView extends React.Component<IDocDomViewProps> {
+export function DocDomView(props: IDocDomViewProps): JSX.Element {
-  public render(): React.ReactNode {
+  const parserContext: tsdoc.ParserContext | undefined = props.parserContext;
-    const parserContext: tsdoc.ParserContext | undefined = this.props.parserContext;
   let code: string = '';
 
   if (parserContext && parserContext.docComment) {
     const unindentedCode: string = ReactDomServer.renderToStaticMarkup(
       <DocHtmlView docComment={parserContext.docComment} />
     );
-      code = this._indentHtml(unindentedCode);
+    code = _indentHtml(unindentedCode);
   }
 
   return (
@@ -35,14 +34,14 @@ export class DocDomView extends React.Component<IDocDomViewProps> {
       value={code}
       language="html"
       disableLineNumbers={true}
-        theme={this.props.theme}
+      theme={props.theme}
     />
   );
 }
 
 // Given a string containing perfectly systematic HTML (like what React generates),
 // this adds appropriate indentation
-  private _indentHtml(html: string): string {
+function _indentHtml(html: string): string {
   const tagRegExp: RegExp = /\<\/|\<|\>/g;
   const output: string[] = [];
 
@@ -106,4 +105,3 @@ export class DocDomView extends React.Component<IDocDomViewProps> {
 
   return output.join('');
 }
-}

playground/src/FlexDivs.tsx

@@ -3,42 +3,28 @@ import * as React from 'react';
 export interface IFlexDivProps
   extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
 
-export class FlexRowDiv extends React.Component<IFlexDivProps> {
+export function FlexRowDiv(props: IFlexDivProps): JSX.Element {
-  public render(): React.ReactNode {
   const mergedProps: IFlexDivProps = {
-      ...this.props
+    ...props,
+    style: {
+      display: 'flex',
+      flexDirection: 'row',
+      ...props.style
+    }
   };
 
-    if (mergedProps.style === undefined) {
-      mergedProps.style = {};
-    }
-    if (mergedProps.style.display === undefined) {
-      mergedProps.style.display = 'flex';
-    }
-    if (mergedProps.style.flexDirection === undefined) {
-      mergedProps.style.flexDirection = 'row';
-    }
-
   return React.createElement('div', mergedProps);
 }
-}
 
-export class FlexColDiv extends React.Component<IFlexDivProps> {
+export function FlexColDiv(props: IFlexDivProps): JSX.Element {
-  public render(): React.ReactNode {
   const mergedProps: IFlexDivProps = {
-      ...this.props
+    ...props,
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      ...props.style
+    }
   };
 
-    if (mergedProps.style === undefined) {
-      mergedProps.style = {};
-    }
-    if (mergedProps.style.display === undefined) {
-      mergedProps.style.display = 'flex';
-    }
-    if (mergedProps.style.flexDirection === undefined) {
-      mergedProps.style.flexDirection = 'column';
-    }
-
   return React.createElement('div', mergedProps);
 }
-}