migrate ui-components from flow to typescript

scm-ui/ui-components/src/modals/ConfirmAlert.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-import Modal from './Modal';
+import * as React from "react";
+import ReactDOM from "react-dom";
+import Modal from "./Modal";
 
 type Button = {
   label: string;
@@ -22,7 +22,10 @@ class ConfirmAlert extends React.Component<Props> {
   };
 
   close = () => {
-    ReactDOM.unmountComponentAtNode(document.getElementById('modalRoot'));
+    const container = document.getElementById("modalRoot");
+    if (container) {
+      ReactDOM.unmountComponentAtNode(container);
+    }
   };
 
   render() {
@@ -59,7 +62,7 @@ class ConfirmAlert extends React.Component<Props> {
 }
 
 export function confirmAlert(properties: Props) {
-  const root = document.getElementById('modalRoot');
+  const root = document.getElementById("modalRoot");
   if (root) {
     ReactDOM.render(<ConfirmAlert {...properties} />, root);
   }

scm-ui/ui-components/src/modals/Modal.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import classNames from 'classnames';
+import * as React from "react";
+import classNames from "classnames";
 
 type Props = {
   title: string;
@@ -13,7 +13,7 @@ type Props = {
 
 class Modal extends React.Component<Props> {
   static defaultProps = {
-    headColor: 'light',
+    headColor: "light"
   };
 
   render() {
@@ -24,10 +24,10 @@ class Modal extends React.Component<Props> {
       footer,
       active,
       className,
-      headColor,
+      headColor
     } = this.props;
 
-    const isActive = active ? 'is-active' : null;
+    const isActive = active ? "is-active" : null;
 
     let showFooter = null;
     if (footer) {
@@ -35,13 +35,13 @@ class Modal extends React.Component<Props> {
     }
 
     return (
-      <div className={classNames('modal', className, isActive)}>
+      <div className={classNames("modal", className, isActive)}>
         <div className="modal-background" />
         <div className="modal-card">
           <header
             className={classNames(
-              'modal-card-head',
-              `has-background-${headColor}`,
+              "modal-card-head",
+              `has-background-${headColor}`
             )}
           >
             <p className="modal-card-title is-marginless">{title}</p>

scm-ui/ui-components/src/modals/index.ts

@@ -1,4 +1,4 @@
 // @create-index
 
-export { default as ConfirmAlert, confirmAlert } from './ConfirmAlert';
-export { default as Modal } from './Modal';
+export { default as ConfirmAlert, confirmAlert } from "./ConfirmAlert";
+export { default as Modal } from "./Modal";