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 {
-  public render(): React.ReactNode {
-    return (
-      <>
-        <PlaygroundView />
-      </>
-    );
-  }
+export default function App(): JSX.Element {
+  return (
+    <>
+      <PlaygroundView />
+    </>
+  );
 }
-
-export default App;

playground/src/DocAstView.tsx

@@ -8,38 +8,36 @@ export interface IDocAstViewProps {
   theme?: string;
 }
 
-export class DocAstView extends React.Component<IDocAstViewProps> {
-  public render(): React.ReactNode {
-    const parserContext: tsdoc.ParserContext | undefined = this.props.parserContext;
-    const outputLines: string[] = [];
+export function DocAstView(props: IDocAstViewProps): JSX.Element {
+  const parserContext: tsdoc.ParserContext | undefined = props.parserContext;
+  const outputLines: string[] = [];
 
-    if (parserContext && parserContext.docComment) {
-      this._dumpTSDocTree(outputLines, parserContext.docComment);
-    }
-
-    return (
-      <CodeEditor
-        className="playground-ast-text-editor"
-        readOnly={true}
-        value={outputLines.join('\n')}
-        disableLineNumbers={true}
-        theme={this.props.theme}
-      />
-    );
+  if (parserContext && parserContext.docComment) {
+    _dumpTSDocTree(outputLines, parserContext.docComment);
   }
 
-  private _dumpTSDocTree(outputLines: string[], docNode: tsdoc.DocNode, indent: string = ''): void {
-    let dumpText: string = '';
-    if (docNode instanceof tsdoc.DocExcerpt) {
-      const content: string = docNode.content.toString();
-      dumpText += `${indent}* ${docNode.excerptKind}=` + JSON.stringify(content);
-    } else {
-      dumpText += `${indent}- ${docNode.kind}`;
-    }
-    outputLines.push(dumpText);
+  return (
+    <CodeEditor
+      className="playground-ast-text-editor"
+      readOnly={true}
+      value={outputLines.join('\n')}
+      disableLineNumbers={true}
+      theme={props.theme}
+    />
+  );
+}
 
-    for (const child of docNode.getChildNodes()) {
-      this._dumpTSDocTree(outputLines, child, indent + '  ');
-    }
+function _dumpTSDocTree(outputLines: string[], docNode: tsdoc.DocNode, indent: string = ''): void {
+  let dumpText: string = '';
+  if (docNode instanceof tsdoc.DocExcerpt) {
+    const content: string = docNode.content.toString();
+    dumpText += `${indent}* ${docNode.excerptKind}=` + JSON.stringify(content);
+  } else {
+    dumpText += `${indent}- ${docNode.kind}`;
+  }
+  outputLines.push(dumpText);
+
+  for (const child of docNode.getChildNodes()) {
+    _dumpTSDocTree(outputLines, child, indent + '  ');
   }
 }

playground/src/DocDomView.tsx

@@ -16,94 +16,92 @@ export interface IDocDomViewProps {
   theme?: string;
 }
 
-export class DocDomView extends React.Component<IDocDomViewProps> {
-  public render(): React.ReactNode {
-    const parserContext: tsdoc.ParserContext | undefined = this.props.parserContext;
-    let code: string = '';
+export function DocDomView(props: IDocDomViewProps): JSX.Element {
+  const parserContext: tsdoc.ParserContext | undefined = props.parserContext;
+  let code: string = '';
 
-    if (parserContext && parserContext.docComment) {
-      const unindentedCode: string = ReactDomServer.renderToStaticMarkup(
-        <DocHtmlView docComment={parserContext.docComment} />
-      );
-      code = this._indentHtml(unindentedCode);
-    }
-
-    return (
-      <CodeEditor
-        className="playground-dom-text-editor"
-        readOnly={true}
-        value={code}
-        language="html"
-        disableLineNumbers={true}
-        theme={this.props.theme}
-      />
+  if (parserContext && parserContext.docComment) {
+    const unindentedCode: string = ReactDomServer.renderToStaticMarkup(
+      <DocHtmlView docComment={parserContext.docComment} />
     );
+    code = _indentHtml(unindentedCode);
   }
 
-  // Given a string containing perfectly systematic HTML (like what React generates),
-  // this adds appropriate indentation
-  private _indentHtml(html: string): string {
-    const tagRegExp: RegExp = /\<\/|\<|\>/g;
-    const output: string[] = [];
+  return (
+    <CodeEditor
+      className="playground-dom-text-editor"
+      readOnly={true}
+      value={code}
+      language="html"
+      disableLineNumbers={true}
+      theme={props.theme}
+    />
+  );
+}
 
-    const indentCharacters: string = '  ';
+// Given a string containing perfectly systematic HTML (like what React generates),
+// this adds appropriate indentation
+function _indentHtml(html: string): string {
+  const tagRegExp: RegExp = /\<\/|\<|\>/g;
+  const output: string[] = [];
 
-    let match: RegExpExecArray | null;
-    let lastIndex: number = 0;
-    let indentLevel: number = 0;
-    let lastTag: string = '';
+  const indentCharacters: string = '  ';
 
-    for (;;) {
-      match = tagRegExp.exec(html);
+  let match: RegExpExecArray | null;
+  let lastIndex: number = 0;
+  let indentLevel: number = 0;
+  let lastTag: string = '';
 
-      if (!match) {
+  for (;;) {
+    match = tagRegExp.exec(html);
+
+    if (!match) {
+      break;
+    }
+
+    const matchIndex: number = match.index;
+
+    const textBeforeMatch: string = html.substring(lastIndex, matchIndex);
+    if (textBeforeMatch.length > 0) {
+      output.push(textBeforeMatch);
+    }
+
+    switch (match[0]) {
+      case '<':
+        // Matched opening tag
+        if (output.length > 0) {
+          output.push('\n');
+        }
+        for (let i: number = 0; i < indentLevel; ++i) {
+          output.push(indentCharacters);
+        }
+
+        ++indentLevel;
+
+        lastTag = '<';
         break;
-      }
+      case '</':
+        // Matched closing tag
+        --indentLevel;
 
-      const matchIndex: number = match.index;
-
-      const textBeforeMatch: string = html.substring(lastIndex, matchIndex);
-      if (textBeforeMatch.length > 0) {
-        output.push(textBeforeMatch);
-      }
-
-      switch (match[0]) {
-        case '<':
-          // Matched opening tag
-          if (output.length > 0) {
-            output.push('\n');
-          }
+        if (lastTag !== '<') {
+          output.push('\n');
           for (let i: number = 0; i < indentLevel; ++i) {
             output.push(indentCharacters);
           }
+        }
 
-          ++indentLevel;
-
-          lastTag = '<';
-          break;
-        case '</':
-          // Matched closing tag
-          --indentLevel;
-
-          if (lastTag !== '<') {
-            output.push('\n');
-            for (let i: number = 0; i < indentLevel; ++i) {
-              output.push(indentCharacters);
-            }
-          }
-
-          lastTag = '</';
-          break;
-        case '>':
-          break;
-      }
-
-      lastIndex = matchIndex;
+        lastTag = '</';
+        break;
+      case '>':
+        break;
     }
 
-    const endingText: string = html.substring(lastIndex);
-    output.push(endingText + '\n');
-
-    return output.join('');
+    lastIndex = matchIndex;
   }
+
+  const endingText: string = html.substring(lastIndex);
+  output.push(endingText + '\n');
+
+  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> {
-  public render(): React.ReactNode {
-    const mergedProps: IFlexDivProps = {
-      ...this.props
-    };
+export function FlexRowDiv(props: IFlexDivProps): JSX.Element {
+  const mergedProps: IFlexDivProps = {
+    ...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);
-  }
+  return React.createElement('div', mergedProps);
 }
 
-export class FlexColDiv extends React.Component<IFlexDivProps> {
-  public render(): React.ReactNode {
-    const mergedProps: IFlexDivProps = {
-      ...this.props
-    };
+export function FlexColDiv(props: IFlexDivProps): JSX.Element {
+  const mergedProps: IFlexDivProps = {
+    ...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);
-  }
+  return React.createElement('div', mergedProps);
 }