Add Paul's Toolbox Contents

components/ui/message/index.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { type MessageItem, addFn, removeFn } from "./utils";
+
+import styles from "./message.module.less";
+
+function Message() {
+  const [message, setMessage] = useState<MessageItem>();
+
+  useEffect(() => {
+    const fn = (nextMessage: MessageItem) => {
+      const key = `${Math.ceil(performance.now())}-${Math.round(Math.random() * 100)}`;
+
+      setMessage({ ...nextMessage, key });
+
+      setTimeout(() => {
+        onClose();
+      }, nextMessage.duration || 5000);
+    };
+
+    addFn(fn);
+
+    return () => {
+      removeFn(fn);
+    };
+  }, []);
+
+  const onClose = () => {
+    setMessage(undefined);
+  }
+
+  return createPortal((
+    <div className={styles.message}>
+      {message && (
+        <div key={message.key} className={styles.item}>
+          <span className={styles.content}>{message.content}</span>
+          <button className={styles.close} onClick={() => onClose()}>×</button>
+        </div>
+      )}
+    </div>
+  ), document.body);
+}
+
+export default Message;

components/ui/message/message.module.less

@@ -0,0 +1,34 @@
+.message {
+  left: 0;
+  right: 0;
+  bottom: 5em;
+  z-index: 2;
+  margin: 0 1em;
+  display: flex;
+  position: fixed;
+  align-items: flex-end;
+  flex-direction: column;
+}
+
+.item {
+  color: #fff;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 50em;
+  overflow: hidden;
+  position: relative;
+  border-radius: .5em;
+  background-color: rgba(0, 0, 0, .6);
+  box-shadow: 0 0 5em rgba(0, 0, 0, .1);
+
+  .content, .close {
+    vertical-align: middle;
+  }
+
+  .close {
+    line-height: 1;
+    cursor: pointer;
+    font-size: 1.5em;
+    margin-left: 1em;
+  }
+}

components/ui/message/utils.ts

@@ -0,0 +1,27 @@
+export interface MessageItem {
+  key?: string;
+  content: React.ReactNode;
+  duration?: number;
+}
+
+type MessageFn = (Message: MessageItem) => void;
+
+const addMessageFn: MessageFn[] = [];
+
+export const add = (Message: MessageItem) => {
+  addMessageFn.forEach((item) => {
+    item(Message);
+  });
+}
+
+export const addFn = (fn: MessageFn) => {
+  return addMessageFn.push(fn) - 1;
+}
+
+export const removeFn = (fn: MessageFn) => {
+  const index = addMessageFn.indexOf(fn);
+
+  if (index > -1) {
+    addMessageFn.splice(index, 1);
+  }
+}