external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-14 17:49:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use strict TypeScript, enable TSLint, update all types to work in strict mode.

Browse Source
This commit is contained in:
Jason Miller
2018-03-29 15:42:07 -04:00
parent 9977e5b8c6
commit 5e6500d196
16 changed files with 396 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/header/index.tsx
View File

@@ -2,50 +2,52 @@ import { h, Component } from 'preact';
import Toolbar from 'preact-material-components/Toolbar';
import cx from 'classnames';
import * as style from './style.scss';
import { bind } from '../../lib/util';
type Props = {
toggleDrawer?(),
showHeader?(),
showFab?(),
loadFile?(File)
'class'?: string,
showHeader?: boolean,
toggleDrawer?(): void,
showFab?(): void,
loadFile(f: File): void
};
type State = {
};
type State = {};
export default class Header extends Component<Props, State> {
input: HTMLInputElement;
input?: HTMLInputElement;
setInputRef = c => {
this.input = c;
};
@bind
setInputRef(c?: Element) {
this.input = c as HTMLInputElement;
}
upload = () => {
this.input.click();
};
@bind
upload() {
this.input!.click();
}
handleFiles = () => {
let files = this.input.files;
if (files.length) {
this.props.loadFile(files[0]);
}
};
@bind
handleFiles() {
let files = this.input!.files;
if (files && files.length) {
this.props.loadFile(files[0]);
}
}
render({ toggleDrawer, showHeader, showFab }) {
return (
<Toolbar fixed class={cx(style.toolbar, 'inert', showHeader===false && style.minimal)}>
<Toolbar.Row>
<Toolbar.Title class={style.title}>
<img class={style.logo} src="/assets/icon.png" />
<Toolbar.Icon ripple onClick={this.upload}>file_upload</Toolbar.Icon>
</Toolbar.Title>
<Toolbar.Section align-end>
<Toolbar.Icon ripple onClick={toggleDrawer}>menu</Toolbar.Icon>
</Toolbar.Section>
</Toolbar.Row>
<input class={style.fileInput} ref={this.setInputRef} type="file" onChange={this.handleFiles} />
</Toolbar>
);
}
}
render({ class: c, toggleDrawer, showHeader = false, showFab }: Props) {
return (
<Toolbar fixed class={cx(c, style.toolbar, 'inert', !showHeader && style.minimal)}>
<Toolbar.Row>
<Toolbar.Title class={style.title}>
<Toolbar.Icon title="Upload" ripple onClick={this.upload}>file_upload</Toolbar.Icon>
</Toolbar.Title>
<Toolbar.Section align-end>
<Toolbar.Icon ripple onClick={toggleDrawer}>menu</Toolbar.Icon>
</Toolbar.Section>
</Toolbar.Row>
<input class={style.fileInput} ref={this.setInputRef} type="file" onChange={this.handleFiles} />
</Toolbar>
);
}
}