Gradually use React hooks on the project

index.html

@@ -37,8 +37,8 @@
             <!-- <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> -->
 
 
-        <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
-        <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
+        <script src="https://unpkg.com/react@16.8.0/umd/react.production.min.js"></script>
+        <script src="https://unpkg.com/react-dom@16.8.0/umd/react-dom.production.min.js"></script>
 
         <!-- Main -->
 

package.json

@@ -71,8 +71,8 @@
     "mousetrap": "^1.6.2",
     "pako": "^1.0.7",
     "raven-js": "^3.27.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "react-icons": "^2.2.7",
     "react-modal": "^3.6.1",
     "request": "^2.88.0",
@@ -86,7 +86,7 @@
     "@types/jest": "^22.1.4",
     "@types/jest-environment-puppeteer": "^2.2.1",
     "@types/puppeteer": "^1.10.1",
-    "@types/react": "^16.7.8",
+    "@types/react": "^16.8.1",
     "@types/react-dom": "^16.0.11",
     "base64-js": "^1.3.0",
     "coveralls": "^3.0.2",

src/components/Split.tsx

@@ -110,7 +110,7 @@ export class Split extends React.Component<SplitProps, {
     return this.props.onChange && this.props.onChange(this.state.splits);
   }
 
-  onResizerMouseMove = (e: MouseEvent<any>) => {
+  onResizerMouseMove = (e: any) => {
     if (this.index < 0) {
       return;
     }

src/components/StatusBar.tsx

@@ -22,38 +22,32 @@
 import * as React from "react";
 import appStore from "../stores/AppStore";
 
-export class StatusBar extends React.Component<{}, {
-  hasStatus: boolean;
-  status: string;
-}> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      hasStatus: false,
-      status: ""
-    };
-  }
-  onDidChangeStatus = () => {
-    this.setState({
+export function StatusBar() {
+  const [state, setState] = React.useState({
+    hasStatus: false,
+    status: ""
+  });
+
+  function onDidChangeStatus() {
+    setState({
       hasStatus: appStore.hasStatus(),
       status: appStore.getStatus()
     });
   }
-  componentDidMount() {
-    appStore.onDidChangeStatus.register(this.onDidChangeStatus);
-  }
-  componentWillUnmount() {
-    appStore.onDidChangeStatus.unregister(this.onDidChangeStatus);
-  }
-  render() {
-    let className = "status-bar";
-    if (this.state.hasStatus) {
-      className += " active";
-    }
-    return <div className={className}>
-      <div className="status-bar-item">
-        {this.state.status}
-      </div>
-    </div>;
+
+  React.useEffect(() => {
+    appStore.onDidChangeStatus.register(onDidChangeStatus);
+    return () => appStore.onDidChangeStatus.unregister(onDidChangeStatus);
+  });
+
+  let className = "status-bar";
+  if (state.hasStatus) {
+    className += " active";
   }
+
+  return <div className={className}>
+    <div className="status-bar-item">
+      {state.status}
+    </div>
+  </div>;
 }

src/components/Widgets.tsx

@@ -22,50 +22,35 @@
 import * as React from "react";
 import { ChangeEventHandler } from "react";
 
-export class Spacer extends React.Component<{
-  height: number
-}, {}> {
-  render() {
-    return <div style={{ height: this.props.height }} />;
-  }
+export function Spacer({ height }: { height: number }) {
+  return <div style={{ height }} />;
 }
 
-export class Divider extends React.Component<{
-  height: number
-}, {}> {
-  render() {
-    return <div
-      className="divider"
-      style={{
-        marginTop: this.props.height / 2,
-        marginBottom: this.props.height / 2
-      }}
-    />;
-  }
+export function Divider({ height }: { height: number }) {
+  return <div
+    className="divider"
+    style={{
+      marginTop: height / 2,
+      marginBottom: height / 2
+    }}
+  />;
 }
 
-export class TextInputBox extends React.Component<{
+export function TextInputBox({ label, value, error, onChange }: {
   label: string;
   value: string;
   error?: string;
   onChange?: ChangeEventHandler<any>;
-}, {
-
-  }> {
-  constructor(props: any) {
-    super(props);
-  }
-  render() {
-    const input = <input className="text-input-box" type="text" value={this.props.value} onChange={this.props.onChange} />;
-    if (this.props.label) {
-      return <div style={{ display: "flex", flexDirection: "row" }}>
-        <div className="text-input-box-label">{this.props.label}</div>
-        <div style={{ flex: 1 }}>{input}</div>
-        {this.props.error && <div className="text-input-box-error">{this.props.error}</div>}
-      </div>;
-    } else {
-      return input;
-    }
+}) {
+  const input = <input className="text-input-box" type="text" value={value} onChange={onChange} />;
+  if (label) {
+    return <div style={{ display: "flex", flexDirection: "row" }}>
+      <div className="text-input-box-label">{label}</div>
+      <div style={{ flex: 1 }}>{input}</div>
+      {error && <div className="text-input-box-error">{error}</div>}
+    </div>;
+  } else {
+    return input;
   }
 }
 
@@ -94,70 +79,54 @@ export class UploadInput extends React.Component<{
     this.inputElement.click();
   }
   render() {
-    return <input id="file-upload-input" ref={ref => this.setInputElement(ref)} type="file" onChange={this.props.onChange} multiple hidden/>;
+    return <input id="file-upload-input" ref={ref => this.setInputElement(ref)} type="file" onChange={this.props.onChange} multiple hidden />;
   }
 }
 
-export class ListItem extends React.Component<{
+export function ListItem({ label, onClick, icon, selected, value, error }: {
   label: string;
   onClick?: Function;
   icon?: string;
   selected?: boolean;
   value: any;
   error?: string;
-}, {
-
-  }> {
-
-  render() {
-    let className = "list-item";
-    if (this.props.selected) {
-      className += " selected";
-    }
-    let content = <div className="label">{this.props.label}</div>;
-    if (this.props.error) {
-        content = <div className="list-item-flex">
-          <div className="label">{this.props.label}</div>
-          <div className="error">{this.props.error}</div>
-        </div>;
-    }
-    return <div className={className} onClick={this.props.onClick as any}>
-      <div className={"monaco-icon-label file-icon " + this.props.icon} />
-      {content}
+}) {
+  let className = "list-item";
+  if (selected) {
+    className += " selected";
+  }
+  let content = <div className="label">{label}</div>;
+  if (error) {
+    content = <div className="list-item-flex">
+      <div className="label">{label}</div>
+      <div className="error">{error}</div>
     </div>;
   }
+  return <div className={className} onClick={onClick as any}>
+    <div className={"monaco-icon-label file-icon " + icon} />
+    {content}
+  </div>;
 }
 
-export class ListBox extends React.Component<{
+export function ListBox({ height, value, onSelect, children }: {
   height: number;
   value?: any;
   onSelect?: (value: any) => void;
-}, {
-
-  }> {
-  constructor(props: any) {
-    super(props);
-  }
-
-  render() {
-    const { children, onSelect } = this.props;
-
-    const newChildren = React.Children.map(children, (child: any, index) => {
-      return React.cloneElement(child as any, {
-        onClick: () => {
-          return onSelect && onSelect(child.props.value);
-        },
-        selected: this.props.value === child.props.value
-      });
+  children: any;
+}) {
+  const newChildren = React.Children.map(children, (child: any, index) => {
+    return React.cloneElement(child as any, {
+      onClick: () => {
+        return onSelect && onSelect(child.props.value);
+      },
+      selected: value === child.props.value
     });
+  });
 
-    return <div
-      className="list-box"
-      style={{
-        height: this.props.height
-      }}
-    >
-      {newChildren}
-    </div>;
-  }
+  return <div
+    className="list-box"
+    style={{ height }}
+  >
+    {newChildren}
+  </div>;
 }

src/components/editor/Tabs.tsx

@@ -65,7 +65,7 @@ export class Tabs extends Component<TabsProps, TabsState> {
     e.preventDefault();
   }
 
-  onDoubleClick   = (e: MouseEvent<any>)  => { this.props.onDoubleClick(); };
+  onDoubleClick   = (e: any)              => { this.props.onDoubleClick(); };
   setContainerRef = (ref: HTMLDivElement) => { this.container = ref; };
 
   render() {
@@ -110,20 +110,20 @@ export class Tab extends PureComponent<TabProps, {}> {
     onClose: () => {},
   };
 
-  onMouseHandle = (e: MouseEvent<HTMLElement>, handler: Function) => {
+  onMouseHandle = (e: any, handler: Function) => {
     e.stopPropagation();
     handler(this.props.value);
   }
 
-  onClick = (e: MouseEvent<HTMLElement>) => {
+  onClick = (e: any) => {
     this.onMouseHandle(e, this.props.onClick);
   }
 
-  onDoubleClick = (e: MouseEvent<HTMLElement>) => {
+  onDoubleClick = (e: any) => {
     this.onMouseHandle(e, this.props.onDoubleClick);
   }
 
-  onClose = (e: MouseEvent<HTMLElement>) => {
+  onClose = (e: any) => {
     this.onMouseHandle(e, this.props.onClose);
   }