Convert remaining components to TypeScript.

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.

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} />
 				) : (

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)}>