Lens restructure (#540)

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/confirm-dialog/confirm-dialog.scss

@@ -0,0 +1,50 @@
+
+.ConfirmDialog {
+  $spacing: $padding * 3;
+
+  &.warning {
+    .Button.ok {
+      background: $colorSoftError;
+    }
+  }
+
+  > .box {
+    max-width: 50vw;
+    min-width: 45 * $unit;
+    background-color: white;
+    outline: $unit solid rgba(255, 255, 255, .15);
+  }
+
+  .confirm-content {
+    padding: $spacing;
+    display: flex;
+    align-items: center;
+    word-break: break-word;
+
+    > .Icon {
+      margin-left: inherit;
+      margin-right: $margin;
+      color: $colorSoftError;
+    }
+
+    > :not(.Icon) {
+      flex: 1;
+    }
+
+    .warning {
+      font-size: small;
+      margin-top: $margin;
+    }
+  }
+
+  .confirm-buttons {
+    background: #f4f4f4;
+    padding: $spacing;
+    display: flex;
+    justify-content: flex-end;
+
+    > * {
+      margin-left: $margin
+    }
+  }
+}

src/renderer/components/confirm-dialog/confirm-dialog.tsx

@@ -0,0 +1,101 @@
+import "./confirm-dialog.scss";
+
+import React, { ReactNode } from "react";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { cssNames, noop, prevDefault } from "../../utils";
+import { Button } from "../button";
+import { Dialog, DialogProps } from "../dialog";
+import { Icon } from "../icon";
+
+export interface IConfirmDialogParams {
+  ok?: () => void;
+  labelOk?: ReactNode;
+  labelCancel?: ReactNode;
+  message?: ReactNode;
+  icon?: string;
+}
+
+interface Props extends Partial<DialogProps> {
+}
+
+@observer
+export class ConfirmDialog extends React.Component<Props> {
+  @observable static isOpen = false;
+  @observable.ref static params: IConfirmDialogParams;
+
+  @observable isSaving = false;
+
+  static open(params: IConfirmDialogParams) {
+    ConfirmDialog.isOpen = true;
+    ConfirmDialog.params = params;
+  }
+
+  static close() {
+    ConfirmDialog.isOpen = false;
+  }
+
+  public defaultParams: IConfirmDialogParams = {
+    ok: noop,
+    labelOk: <Trans>Ok</Trans>,
+    labelCancel: <Trans>Cancel</Trans>,
+    icon: "warning",
+  };
+
+  get params(): IConfirmDialogParams {
+    return Object.assign({}, this.defaultParams, ConfirmDialog.params);
+  }
+
+  ok = async () => {
+    try {
+      this.isSaving = true;
+      await Promise.resolve(this.params.ok()).catch(noop);
+    } finally {
+      this.isSaving = false;
+    }
+    this.close();
+  }
+
+  onClose = () => {
+    this.isSaving = false;
+  }
+
+  close = () => {
+    ConfirmDialog.close();
+  }
+
+  render() {
+    const { className, ...dialogProps } = this.props;
+    const { icon, labelOk, labelCancel, message } = this.params;
+    return (
+      <Dialog
+        {...dialogProps}
+        className={cssNames("ConfirmDialog", className, icon)}
+        isOpen={ConfirmDialog.isOpen}
+        onClose={this.onClose}
+        close={this.close}
+      >
+        <div className="confirm-content">
+          <Icon big material={icon}/>
+          {message}
+        </div>
+        <div className="confirm-buttons">
+          <Button
+            plain
+            className="cancel"
+            label={labelCancel}
+            onClick={prevDefault(this.close)}
+          />
+          <Button
+            autoFocus primary
+            className="ok"
+            label={labelOk}
+            onClick={prevDefault(this.ok)}
+            waiting={this.isSaving}
+          />
+        </div>
+      </Dialog>
+    )
+  }
+}

src/renderer/components/confirm-dialog/index.ts

@@ -0,0 +1 @@
+export * from './confirm-dialog'