Fix build issues due to linting errors (#4637)

component-lib/src/StreamlitReact.tsx

@@ -140,7 +140,7 @@ export function withStreamlitConnection(
       this.setState({ renderData: renderEvent.detail });
     };
 
-    public render = (): ReactNode => {
+    public render(): ReactNode {
       // If our wrapped component threw an error, display it.
       if (this.state.componentError != null) {
         return (
@@ -164,7 +164,7 @@ export function withStreamlitConnection(
           theme={this.state.renderData.theme}
         />
       );
-    };
+    }
   }
 
   return hoistNonReactStatics(ComponentWrapper, WrappedComponent);

frontend/src/components/core/Sidebar/Sidebar.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { PureComponent, ReactElement } from "react"
+import React, { PureComponent, ReactElement, ReactNode } from "react"
 import { ChevronRight, X } from "@emotion-icons/open-iconic"
 import { withTheme } from "@emotion/react"
 
@@ -146,7 +146,7 @@ class Sidebar extends PureComponent<SidebarProps, State> {
     this.setState({ collapsedSidebar: !collapsedSidebar })
   }
 
-  public render = (): ReactElement => {
+  public render(): ReactNode {
     const { collapsedSidebar } = this.state
     const { chevronDownshift, children } = this.props
 

frontend/src/components/core/StreamlitDialog/SettingsDialog.tsx

@@ -78,7 +78,7 @@ export class SettingsDialog extends PureComponent<Props, UserSettings> {
       </div>
     )
 
-  public render = (): ReactNode => {
+  public render(): ReactNode {
     const themeIndex = this.context.availableThemes.findIndex(
       (theme: ThemeConfig) => theme.name === this.context.activeTheme.name
     )

frontend/src/components/elements/CodeBlock/CopyButton.tsx

@@ -43,19 +43,21 @@ class CopyButton extends PureComponent<Props> {
     }
   }
 
-  public render = (): ReactNode => (
-    <StyledCopyButton
-      title="Copy to clipboard"
-      ref={this.button}
-      data-clipboard-text={this.props.text}
-      style={{
-        top: 0,
-        right: 0,
-      }}
-    >
-      <CopyIcon size="16" />
-    </StyledCopyButton>
-  )
+  public render(): ReactNode {
+    return (
+      <StyledCopyButton
+        title="Copy to clipboard"
+        ref={this.button}
+        data-clipboard-text={this.props.text}
+        style={{
+          top: 0,
+          right: 0,
+        }}
+      >
+        <CopyIcon size="16" />
+      </StyledCopyButton>
+    )
+  }
 }
 
 export default CopyButton

frontend/src/components/shared/ColorPicker/ColorPicker.tsx

@@ -96,7 +96,7 @@ class ColorPicker extends React.PureComponent<Props, State> {
     }
   }
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const { width, showValue, label, help, disabled } = this.props
     const { value } = this.state
     const cursor = disabled ? "not-allowed" : "default"

frontend/src/components/shared/Dropdown/Selectbox.tsx

@@ -129,7 +129,7 @@ class Selectbox extends React.PureComponent<Props, State> {
   ): readonly Option[] =>
     fuzzyFilterSelectOptions(options as SelectOption[], filterValue)
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const style = { width: this.props.width }
     const { label, help } = this.props
     let { disabled, options } = this.props

frontend/src/components/shared/Radio/Radio.tsx

@@ -67,7 +67,7 @@ class Radio extends React.PureComponent<Props, State> {
     )
   }
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const { theme, width, help, label } = this.props
     let { disabled } = this.props
     const { colors, radii } = theme

frontend/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx

@@ -192,7 +192,7 @@ class StreamlitMarkdown extends PureComponent<Props> {
     })
   }
 
-  public render = (): ReactNode => {
+  public render(): ReactNode {
     const { source, allowHTML, style, isCaption } = this.props
     const isInSidebar = this.context
 

frontend/src/components/widgets/CameraInput/CameraInput.tsx

@@ -347,7 +347,7 @@ class CameraInput extends React.PureComponent<Props, State> {
     })
   }
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const { element, widgetMgr, disabled, width } = this.props
 
     // Manage our form-clear event handler.

frontend/src/components/widgets/Checkbox/Checkbox.tsx

@@ -119,7 +119,7 @@ class Checkbox extends React.PureComponent<Props, State> {
     this.setState({ value }, () => this.commitWidgetValue({ fromUi: true }))
   }
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const { theme, width, element, disabled, widgetMgr } = this.props
     const { colors, spacing, radii } = theme
     const style = { width }

frontend/src/components/widgets/ColorPicker/ColorPicker.tsx

@@ -106,7 +106,7 @@ class ColorPicker extends React.PureComponent<Props, State> {
     )
   }
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const { element, width, disabled, widgetMgr } = this.props
     const { value } = this.state
 

frontend/src/components/widgets/CustomComponent/ComponentInstance.tsx

@@ -335,7 +335,7 @@ export class ComponentInstance extends React.PureComponent<Props, State> {
     )
   }
 
-  public render = (): ReactNode => {
+  public render(): ReactNode {
     // If we have an error, display it and bail.
     if (this.state.componentError != null) {
       return this.renderError(this.state.componentError)

frontend/src/components/widgets/DateInput/DateInput.tsx

@@ -174,7 +174,7 @@ class DateInput extends React.PureComponent<Props, State> {
       : undefined
   }
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const { width, element, disabled, theme, widgetMgr } = this.props
     const { values, isRange } = this.state
     const { colors, fontSizes } = theme

frontend/src/components/widgets/FileUploader/FileUploader.tsx

@@ -483,7 +483,7 @@ class FileUploader extends React.PureComponent<Props, State> {
     })
   }
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const { files } = this.state
     const { element, disabled, widgetMgr } = this.props
     const acceptedExtensions = element.type

frontend/src/components/widgets/NumberInput/NumberInput.tsx

@@ -295,7 +295,7 @@ class NumberInput extends React.PureComponent<Props, State> {
     }
   }
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const { element, width, disabled, widgetMgr } = this.props
     const { formattedValue, dirty } = this.state
 

frontend/src/components/widgets/Radio/Radio.tsx

@@ -106,7 +106,7 @@ class Radio extends React.PureComponent<Props, State> {
     )
   }
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const { disabled, element, width, widgetMgr } = this.props
     const { options, label, help } = element
 

frontend/src/components/widgets/Selectbox/Selectbox.tsx

@@ -104,7 +104,7 @@ class Selectbox extends React.PureComponent<Props, State> {
     this.setState({ value }, () => this.commitWidgetValue({ fromUi: true }))
   }
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const { options, help, label, formId } = this.props.element
     const { disabled, widgetMgr } = this.props
 

frontend/src/components/widgets/Slider/Slider.tsx

@@ -274,7 +274,7 @@ class Slider extends React.PureComponent<Props, State> {
     )
   }
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const { disabled, element, theme, width, widgetMgr } = this.props
     const { colors, fonts, fontSizes, spacing } = theme
     const style = { width }

frontend/src/components/widgets/TextArea/TextArea.tsx

@@ -170,7 +170,7 @@ class TextArea extends React.PureComponent<Props, State> {
     }
   }
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const { element, disabled, width, widgetMgr } = this.props
     const { value, dirty } = this.state
     const style = { width }

frontend/src/components/widgets/TextInput/TextInput.tsx

@@ -161,7 +161,7 @@ class TextInput extends React.PureComponent<Props, State> {
       : "text"
   }
 
-  public render = (): React.ReactNode => {
+  public render(): React.ReactNode {
     const { dirty, value } = this.state
     const { element, width, disabled, widgetMgr } = this.props
     const { placeholder } = element

frontend/src/components/widgets/TimeInput/TimeInput.tsx

@@ -134,7 +134,7 @@ class TimeInput extends PureComponent<Props, State> {
     return `${hours}:${minutes}`
   }
 
-  public render = (): ReactNode => {
+  public render(): ReactNode {
     const { disabled, width, element, widgetMgr } = this.props
     const style = { width }
 

frontend/src/hocs/withMapboxToken/withMapboxToken.tsx

@@ -20,7 +20,7 @@ import { Kind } from "src/components/shared/AlertContainer"
 import { MapboxToken } from "src/hocs/withMapboxToken/MapboxToken"
 import { ensureError } from "src/lib/ErrorHandling"
 import hoistNonReactStatics from "hoist-non-react-statics"
-import React, { ComponentType, PureComponent } from "react"
+import React, { ComponentType, PureComponent, ReactNode } from "react"
 import MapboxTokenError from "./MapboxTokenError"
 
 interface Props {
@@ -81,7 +81,7 @@ const withMapboxToken = (deltaType: string) => (
       }
     }
 
-    public render = (): JSX.Element => {
+    public render(): ReactNode {
       const { mapboxToken, mapboxTokenError, isFetching } = this.state
       const { width } = this.props
 

frontend/src/hocs/withScreencast/components/ScreencastDialog/ScreencastDialog.tsx

@@ -65,7 +65,7 @@ class ScreencastDialog extends PureComponent<Props, State> {
     onClose()
   }
 
-  public render = (): ReactNode => {
+  public render(): ReactNode {
     const { recordAudio } = this.state
     const { onClose } = this.props
 

frontend/src/hocs/withScreencast/components/UnsupportedBrowserDialog/UnsupportedBrowserDialog.tsx

@@ -29,7 +29,7 @@ export interface Props {
 }
 
 class UnsupportedBrowserDialog extends PureComponent<Props> {
-  public render = (): ReactNode => {
+  public render(): ReactNode {
     const { onClose } = this.props
 
     return (

frontend/src/hocs/withScreencast/withScreencast.tsx

@@ -175,7 +175,7 @@ function withScreencast(
       })
     }
 
-    public render = (): ReactNode => {
+    public render(): ReactNode {
       const {
         outputBlob,
         fileName,