From 9fa67c21ff9e076dfc289544d1504a0d2a0ec675 Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@google.com>
Date: Tue, 13 Mar 2018 12:52:46 -0400
Subject: [PATCH] Convert remaining components to TypeScript.

---
 src/components/app/index.tsx                  |  6 ++--
 src/components/fab/{index.js => index.tsx}    | 21 +++++++++---
 src/components/header/{index.js => index.tsx} | 33 +++++++++++--------
 3 files changed, 39 insertions(+), 21 deletions(-)
 rename src/components/fab/{index.js => index.tsx} (61%)
 rename src/components/header/{index.js => index.tsx} (76%)

diff --git a/src/components/app/index.tsx b/src/components/app/index.tsx
index 67832eaa..b9441296 100644
--- a/src/components/app/index.tsx
+++ b/src/components/app/index.tsx
@@ -3,6 +3,7 @@ import { updater, toggle, When } from '../../lib/util';
 import Fab from '../fab';
 import Header from '../header';
 // import Drawer from 'async!../drawer';
+const Drawer = require('async!../drawer').default;
 import Home from '../home';
 import * as style from './style.scss';
 
@@ -81,6 +82,9 @@ export default class App extends Component<Props, State> {
 
 	render({ url }, { showDrawer, showFab, files }) {
 		if (showDrawer) this.enableDrawer = true;
+
+		if (showFab===true) showFab = files.length>0;
+
 		return (
 			<div id="app" class={style.app}>
 				<Fab showing={showFab} />
@@ -88,11 +92,9 @@ export default class App extends Component<Props, State> {
 				<Header toggleDrawer={this.toggleDrawer} loadFile={this.loadFile} />
 				
 				{/* Avoid loading & rendering the drawer until the first time it is shown. */}
-				{/*
 				<When value={showDrawer}>
 					<Drawer showing={showDrawer} openDrawer={this.openDrawer} closeDrawer={this.closeDrawer} />
 				</When>
-				*/}
 
 				{/*
 					Note: this is normally where a <Router> with auto code-splitting goes.
diff --git a/src/components/fab/index.js b/src/components/fab/index.tsx
similarity index 61%
rename from src/components/fab/index.js
rename to src/components/fab/index.tsx
index fd84ba19..f17e18aa 100644
--- a/src/components/fab/index.js
+++ b/src/components/fab/index.tsx
@@ -3,20 +3,31 @@ import Icon from 'preact-material-components/Icon';
 import 'preact-material-components/Icon/style.css';
 import Fab from 'preact-material-components/Fab';
 import RadialProgress from 'material-radial-progress';
-import style from './style';
+import * as style from './style.scss';
+
+type Props = {
+	showing: boolean
+};
+type State = {
+	loading: boolean
+};
+
+export default class AppFab extends Component<Props, State> {
+	state: State = {
+		loading: false
+	};
 
-export default class AppFab extends Component {
 	handleClick = () => {
 		console.log('TODO: Save the file to disk.');
 		this.setState({ loading: true });
 		setTimeout( () => {
 			this.setState({ loading: false });
-		}, 100000);
+		}, 1000);
 	};
 
-	render({}, { loading }) {
+	render({ showing }, { loading }) {
 		return (
-			<Fab ripple secondary class={style.fab} onClick={this.handleClick}>
+			<Fab ripple secondary exited={showing===false} class={style.fab} onClick={this.handleClick}>
 				{ loading ? (
 					<RadialProgress primary class={style.progress} />
 				) : (
diff --git a/src/components/header/index.js b/src/components/header/index.tsx
similarity index 76%
rename from src/components/header/index.js
rename to src/components/header/index.tsx
index bfb31d93..bba18c1e 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.tsx
@@ -1,13 +1,30 @@
 import { h, Component } from 'preact';
 import Toolbar from 'preact-material-components/Toolbar';
 import cx from 'classnames';
-import style from './style';
+import * as style from './style.scss';
+
+type Props = {
+	toggleDrawer?(),
+	showHeader?(),
+	showFab?(),
+	loadFile?(File)
+};
+
+type State = {
+
+};
+
+export default class Header extends Component<Props, State> {
+	input: HTMLInputElement;
 
-export default class Header extends Component {
 	setInputRef = c => {
 		this.input = c;
 	};
 
+	upload = () => {
+		this.input.click();
+	};
+
 	handleFiles = () => {
 		let files = this.input.files;
 		if (files.length) {
@@ -15,18 +32,6 @@ export default class Header extends Component {
 		}
 	};
 
-	upload = () => {
-		// let input = document.createElement('input');
-		// input.type = 'file';
-		// // input.multiple = true;
-		// document.body.appendChild(input);
-		// input.addEventListener('change', e => {
-
-		// });
-		// input.click();
-		this.input.click();
-	};
-
 	render({ toggleDrawer, showHeader, showFab }) {
 		return (
 			<Toolbar fixed class={cx(style.toolbar, 'inert', showHeader===false && style.minimal)}>