Lens restructure (#540)

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

src/renderer/components/notifications/index.ts

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

src/renderer/components/notifications/notifications.scss

@@ -0,0 +1,45 @@
+.Notifications {
+  @include hidden-scrollbar;
+
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: $padding * 2;
+  max-height: 100vh;
+  z-index: 100000;
+
+  &:empty {
+    display: none;
+  }
+
+  .notification {
+    flex: 0 0;
+    padding: $padding;
+    border-radius: 3px;
+    min-width: 350px;
+    max-width: 35vw;
+    word-break: break-word;
+
+    &:not(:last-child) {
+      margin-bottom: $margin * 2;
+    }
+
+    > .message {
+      white-space: pre-line;
+      padding-left: $padding;
+      padding-right: $padding * 2;
+
+      a {
+        color: inherit;
+      }
+    }
+
+    @each $status, $color in (ok: $colorOk, error: $colorError, info: $colorInfo) {
+      &.#{$status} {
+        background: $color;
+        color: $color-white;
+        box-shadow: 0 0 20px $boxShadow;
+      }
+    }
+  }
+}

src/renderer/components/notifications/notifications.store.ts

@@ -0,0 +1,61 @@
+import React from "react";
+import { action, observable } from "mobx"
+import { autobind } from "../../utils";
+import isObject from "lodash/isObject"
+import uniqueId from "lodash/uniqueId";
+import { JsonApiErrorParsed } from "../../api/json-api";
+
+export type IMessageId = string | number;
+export type IMessage = React.ReactNode | React.ReactNode[] | JsonApiErrorParsed;
+
+export interface INotification {
+  id?: IMessageId;
+  message: IMessage;
+  status?: "ok" | "error" | "info";
+  timeout?: number; // auto-hiding timeout in milliseconds, 0 = no hide
+}
+
+@autobind()
+export class NotificationsStore {
+  public notifications = observable<INotification>([], { deep: false });
+
+  protected autoHideTimers = new Map<IMessageId, number>();
+
+  addAutoHideTimer(notification: INotification) {
+    this.removeAutoHideTimer(notification);
+    const { id, timeout } = notification;
+    if (timeout) {
+      const timer = window.setTimeout(() => this.remove(id), timeout);
+      this.autoHideTimers.set(id, timer);
+    }
+  }
+
+  removeAutoHideTimer(notification: INotification) {
+    const { id } = notification;
+    if (this.autoHideTimers.has(id)) {
+      clearTimeout(this.autoHideTimers.get(id));
+      this.autoHideTimers.delete(id);
+    }
+  }
+
+  @action
+  add(notification: INotification) {
+    if (!notification.id) {
+      notification.id = uniqueId("notification_");
+    }
+    const index = this.notifications.findIndex(item => item.id === notification.id);
+    if (index > -1) this.notifications.splice(index, 1, notification)
+    else this.notifications.push(notification);
+    this.addAutoHideTimer(notification);
+  }
+
+  @action
+  remove(itemOrId: IMessageId | INotification) {
+    if (!isObject(itemOrId)) {
+      itemOrId = this.notifications.find(item => item.id === itemOrId);
+    }
+    return this.notifications.remove(itemOrId as INotification);
+  }
+}
+
+export const notificationsStore = new NotificationsStore();

src/renderer/components/notifications/notifications.tsx

@@ -0,0 +1,96 @@
+import './notifications.scss';
+
+import React from 'react'
+import { reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react"
+import { JsonApiErrorParsed } from "../../api/json-api";
+import { cssNames, prevDefault } from "../../utils";
+import { IMessage, INotification, notificationsStore } from "./notifications.store";
+import { Animate } from "../animate";
+import { Icon } from "../icon"
+
+@observer
+export class Notifications extends React.Component {
+  public elem: HTMLElement;
+
+  static ok(message: IMessage) {
+    notificationsStore.add({
+      message: message,
+      timeout: 2500,
+      status: "ok"
+    })
+  }
+
+  static error(message: IMessage) {
+    notificationsStore.add({
+      message: message,
+      timeout: 10000,
+      status: "error"
+    });
+  }
+
+  static info(message: IMessage) {
+    return notificationsStore.add({
+      message: message,
+      timeout: 0,
+      status: "info"
+    });
+  }
+
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      reaction(() => notificationsStore.notifications.length, () => {
+        this.scrollToLastNotification();
+      }, { delay: 250 }),
+    ]);
+  }
+
+  scrollToLastNotification() {
+    if (!this.elem) {
+      return;
+    }
+    this.elem.scrollTo({
+      top: this.elem.scrollHeight,
+      behavior: "smooth"
+    })
+  }
+
+  getMessage(notification: INotification) {
+    let { message } = notification;
+    if (message instanceof JsonApiErrorParsed) {
+      message = message.toString();
+    }
+    return React.Children.toArray(message);
+  }
+
+  render() {
+    const { notifications, remove, addAutoHideTimer, removeAutoHideTimer } = notificationsStore;
+    return (
+      <div className="Notifications flex column align-flex-end" ref={e => this.elem = e}>
+        {notifications.map(notification => {
+          const { id, status } = notification;
+          const msgText = this.getMessage(notification);
+          return (
+            <Animate key={id}>
+              <div
+                className={cssNames("notification flex align-center", status)}
+                onMouseLeave={() => addAutoHideTimer(notification)}
+                onMouseEnter={() => removeAutoHideTimer(notification)}>
+                <div className="box center">
+                  <Icon material="info_outline"/>
+                </div>
+                <div className="message box grow">{msgText}</div>
+                <div className="box center">
+                  <Icon
+                    material="close" className="close"
+                    onClick={prevDefault(() => remove(notification))}
+                  />
+                </div>
+              </div>
+            </Animate>
+          )
+        })}
+      </div>
+    )
+  }
+}