Snackbar defaults & copy undo (#233)

* Fix snackbar defaults. Fixes #205.

* Undo copy settings across.

* Oops

* Fixing stupid minification bug

* Something weird happened with the last commit

src/components/App/index.tsx

@@ -4,7 +4,7 @@ import { bind, linkRef, Fileish } from '../../lib/initial-util';
 import * as style from './style.scss';
 import { FileDropEvent } from './custom-els/FileDrop';
 import './custom-els/FileDrop';
-import SnackBarElement from '../../lib/SnackBar';
+import SnackBarElement, { SnackOptions } from '../../lib/SnackBar';
 import '../../lib/SnackBar';
 import Intro from '../intro';
 import '../custom-els/LoadingSpinner';
@@ -39,7 +39,7 @@ export default class App extends Component<Props, State> {
     import('../compress').then((module) => {
       this.setState({ Compress: module.default });
     }).catch(() => {
-      this.showError('Failed to load app');
+      this.showSnack('Failed to load app');
     });
 
     // In development, persist application state across hot reloads:
@@ -66,9 +66,9 @@ export default class App extends Component<Props, State> {
   }
 
   @bind
-  private showError(error: string) {
+  private showSnack(message: string, options: SnackOptions = {}): Promise<string> {
     if (!this.snackbar) throw Error('Snackbar missing');
-    this.snackbar.showSnackbar({ message: error });
+    return this.snackbar.showSnackbar(message, options);
   }
 
   render({}: Props, { file, Compress }: State) {
@@ -76,9 +76,9 @@ export default class App extends Component<Props, State> {
       <div id="app" class={style.app}>
         <file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
           {(!file)
-            ? <Intro onFile={this.onIntroPickFile} onError={this.showError} />
+            ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
             : (Compress)
-              ? <Compress file={file} onError={this.showError} />
+              ? <Compress file={file} showSnack={this.showSnack} />
               : <loading-spinner class={style.appLoader}/>
           }
           <snack-bar ref={linkRef(this, 'snackbar')} />

src/components/compress/index.tsx

@@ -35,6 +35,7 @@ import { VectorResizeOptions, BitmapResizeOptions } from '../../codecs/resize/pr
 import './custom-els/MultiPanel';
 import Results from '../results';
 import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
+import SnackBarElement from 'src/lib/SnackBar';
 
 export interface SourceImage {
   file: File | Fileish;
@@ -58,7 +59,7 @@ interface EncodedImage {
 
 interface Props {
   file: File | Fileish;
-  onError: (msg: string) => void;
+  showSnack: SnackBarElement['showSnackbar'];
 }
 
 interface State {
@@ -250,12 +251,24 @@ export default class Compress extends Component<Props, State> {
     }
   }
 
-  private onCopyToOtherClick(index: 0 | 1) {
+  private async onCopyToOtherClick(index: 0 | 1) {
     const otherIndex = (index + 1) % 2;
+    const oldSettings = this.state.images[otherIndex];
 
     this.setState({
       images: cleanSet(this.state.images, otherIndex, this.state.images[index]),
     });
+
+    const result = await this.props.showSnack('Settings copied across', {
+      timeout: 5000,
+      actions: ['undo', 'dismiss'],
+    });
+
+    if (result !== 'undo') return;
+
+    this.setState({
+      images: cleanSet(this.state.images, otherIndex, oldSettings),
+    });
   }
 
   @bind
@@ -318,7 +331,7 @@ export default class Compress extends Component<Props, State> {
       console.error(err);
       // Another file has been opened before this one processed.
       if (this.state.loadingCounter !== loadingCounter) return;
-      this.props.onError('Invalid image');
+      this.props.showSnack('Invalid image');
       this.setState({ loading: false });
     }
   }
@@ -377,7 +390,7 @@ export default class Compress extends Component<Props, State> {
         }
       } catch (err) {
         if (err.name === 'AbortError') return;
-        this.props.onError(`Processing error (type=${image.encoderState.type}): ${err}`);
+        this.props.showSnack(`Processing error (type=${image.encoderState.type}): ${err}`);
         throw err;
       }
     }

src/components/intro/index.tsx

@@ -12,6 +12,7 @@ import artworkIcon from './imgs/demos/artwork-icon.jpg';
 import deviceScreenIcon from './imgs/demos/device-screen-icon.jpg';
 import logoIcon from './imgs/demos/logo-icon.png';
 import * as style from './style.scss';
+import SnackBarElement from '../../lib/SnackBar';
 
 const demos = [
   {
@@ -42,7 +43,7 @@ const demos = [
 
 interface Props {
   onFile: (file: File | Fileish) => void;
-  onError: (error: string) => void;
+  showSnack: SnackBarElement['showSnackbar'];
 }
 interface State {
   fetchingDemoIndex?: number;
@@ -79,7 +80,7 @@ export default class Intro extends Component<Props, State> {
       this.props.onFile(file);
     } catch (err) {
       this.setState({ fetchingDemoIndex: undefined });
-      this.props.onError("Couldn't fetch demo image");
+      this.props.showSnack("Couldn't fetch demo image");
     }
   }