From 699a7cecd3dcc618863194cfb5ae69e573615441 Mon Sep 17 00:00:00 2001
From: Ivan Li <ivanli@live.cn>
Date: Sat, 6 Mar 2021 23:05:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(message):=20=E6=B7=BB=E5=8A=A0=20=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E6=8F=90=E7=A4=BA=E6=A8=A1=E5=9D=97=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/commons/message/index.ts       |  2 +
 src/components/commons/message/message.scss   | 13 ++++
 .../commons/message/message.scss.d.ts         | 14 ++++
 src/components/commons/message/message.tsx    | 25 +++++++
 .../commons/message/messages-container.tsx    | 66 +++++++++++++++++++
 src/components/commons/overlay/overlay.scss   |  5 +-
 src/components/commons/overlay/overlay.tsx    |  5 +-
 7 files changed, 127 insertions(+), 3 deletions(-)
 create mode 100644 src/components/commons/message/index.ts
 create mode 100644 src/components/commons/message/message.scss
 create mode 100644 src/components/commons/message/message.scss.d.ts
 create mode 100644 src/components/commons/message/message.tsx
 create mode 100644 src/components/commons/message/messages-container.tsx

diff --git a/src/components/commons/message/index.ts b/src/components/commons/message/index.ts
new file mode 100644
index 0000000..b245219
--- /dev/null
+++ b/src/components/commons/message/index.ts
@@ -0,0 +1,2 @@
+import { controller } from './messages-container';
+export const Message = controller;
diff --git a/src/components/commons/message/message.scss b/src/components/commons/message/message.scss
new file mode 100644
index 0000000..eac9f74
--- /dev/null
+++ b/src/components/commons/message/message.scss
@@ -0,0 +1,13 @@
+.message {
+  @apply px-4 py-2 rounded-xl bg-white dark:bg-gray-900;
+}
+.error {
+  @apply bg-red-200 text-red-600;
+}
+.success {
+  @apply bg-green-200 text-green-600;
+}
+.container {
+  @apply mt-5;
+  @apply grid grid-cols-1 gap-y-2 justify-items-center;
+}
\ No newline at end of file
diff --git a/src/components/commons/message/message.scss.d.ts b/src/components/commons/message/message.scss.d.ts
new file mode 100644
index 0000000..d8a88cc
--- /dev/null
+++ b/src/components/commons/message/message.scss.d.ts
@@ -0,0 +1,14 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+declare namespace MessageScssNamespace {
+  export interface IMessageScss {
+    container: string;
+    dark: string;
+    error: string;
+    message: string;
+    success: string;
+  }
+}
+
+declare const MessageScssModule: MessageScssNamespace.IMessageScss;
+
+export = MessageScssModule;
diff --git a/src/components/commons/message/message.tsx b/src/components/commons/message/message.tsx
new file mode 100644
index 0000000..ef2dcaa
--- /dev/null
+++ b/src/components/commons/message/message.tsx
@@ -0,0 +1,25 @@
+import styles from './message.scss';
+import classNames from 'classnames';
+import { h } from 'preact';
+
+export class MessageOptions {
+  message = '';
+  type: 'success' | 'error' | 'default' = 'default';
+  /**
+   * 滞留时间（秒）
+   */
+  duration = 5000;
+}
+
+export const MessageComponent = ({ message, type }: MessageOptions) => {
+  return (
+    <section
+      className={classNames(styles.message, {
+        [styles.success]: type === 'success',
+        [styles.error]: type === 'error'
+      })}
+    >
+      {message}
+    </section>
+  );
+};
diff --git a/src/components/commons/message/messages-container.tsx b/src/components/commons/message/messages-container.tsx
new file mode 100644
index 0000000..6f03feb
--- /dev/null
+++ b/src/components/commons/message/messages-container.tsx
@@ -0,0 +1,66 @@
+import { MessageComponent, MessageOptions } from './message';
+import { action, autorun, computed, makeObservable, observable } from 'mobx';
+import { h } from 'preact';
+import { createOverlay } from '../overlay/overlay';
+import { observer } from 'mobx-react';
+import styles from './message.scss';
+class Store {
+  @observable
+  messages: MessageOptions[] = [];
+
+  isNeedCreateView = true;
+  constructor() {
+    makeObservable(this);
+    autorun(() => {
+      if (this.messageComponents.length > 0 && this.isNeedCreateView) {
+        this.isNeedCreateView = false;
+        createOverlay({
+          content: <MessageContainer store={this} />,
+          mask: false
+        });
+      }
+    });
+  }
+
+  @computed
+  get messageComponents() {
+    return this.messages.map((options, index) => (
+      <MessageComponent {...options} key={index} />
+    ));
+  }
+
+  @action
+  add(options: MessageOptions) {
+    this.messages.push(options);
+    setTimeout(() => {
+      const index = this.messages.indexOf(options);
+      if (index === -1) {
+        return;
+      }
+      this.messages.splice(index, 1);
+    }, options.duration);
+  }
+}
+interface Controller {
+  error: (message: string) => void;
+  success: (message: string) => void;
+}
+
+const store = new Store();
+
+const addMessage = (options: Partial<MessageOptions & { message: string }>) => {
+  store.add(Object.assign(new MessageOptions(), options));
+};
+
+export const controller: Controller = {
+  error(message) {
+    return addMessage({ message, type: 'error' });
+  },
+  success(message) {
+    return addMessage({ message, type: 'success' });
+  }
+};
+
+const MessageContainer = observer(({ store }: { store: Store }) => {
+  return <ol className={styles.container}>{store.messageComponents}</ol>;
+});
diff --git a/src/components/commons/overlay/overlay.scss b/src/components/commons/overlay/overlay.scss
index 96056ed..23c4866 100644
--- a/src/components/commons/overlay/overlay.scss
+++ b/src/components/commons/overlay/overlay.scss
@@ -2,5 +2,8 @@
   @apply opacity-50 bg-white fixed top-0 bottom-0 left-0 right-0;
 }
 .body {
-  @apply fixed top-0 bottom-0 left-0 right-0;
+  @apply fixed top-0 bottom-0 left-0 right-0 pointer-events-none;
+  & > * {
+    @apply pointer-events-auto;
+  }
 }
diff --git a/src/components/commons/overlay/overlay.tsx b/src/components/commons/overlay/overlay.tsx
index f417399..50660ed 100644
--- a/src/components/commons/overlay/overlay.tsx
+++ b/src/components/commons/overlay/overlay.tsx
@@ -9,6 +9,7 @@ import { createPortal } from 'preact/compat';
 interface Props {
   content: ComponentChild;
   overlayId?: string;
+  mask?: boolean;
   onClose?: () => void;
   onOk?: () => void;
   onCancel?: () => void;
@@ -59,8 +60,8 @@ export const Overlay = (props: Props) => {
     isVisible ? (
       <OverlayProvider value={controller}>
         <Fragment>
-          <div class={styles.mask}></div>
-          <div class={styles.body}>{props.content}</div>
+          {props.mask ?? true ? <div class={styles.mask}></div> : null}
+          <div className={styles.body}>{props.content}</div>
         </Fragment>
       </OverlayProvider>
     ) : (