Feat optimization (#16)

* feat: opt ui

* feat: fix ui

* feat: add toast

* chore: update featureprobe js sdk

* fix: proxy field

Author: frankzhaopeng

package-lock.json

@@ -23,7 +23,7 @@
     "dayjs": "^1.11.0",
     "diff": "^5.0.0",
     "diff2html": "^3.4.17",
-    "featureprobe-client-sdk-js": "^1.0.3",
+    "featureprobe-client-sdk-js": "^1.0.5",
     "json-bigint": "^1.0.0",
     "jsonlint-mod": "^1.7.6",
     "less-loader": "^7.3.0",
@@ -42,6 +42,7 @@
     "react-intl": "^5.25.1",
     "react-router-dom": "^5.3.0",
     "react-syntax-highlighter": "^15.5.0",
+    "react-toastify": "^9.0.8",
     "sass-loader": "^13.0.0",
     "semantic-ui-less": "^2.4.1",
     "semantic-ui-react": "^2.1.2",

package.json

@@ -1,67 +1,29 @@
 .message {
-  position: fixed;
-  top: 50px;
-  left: 50%;
-  transform: translate(-50%, 0);
-  z-index: 1000;
-}
+  padding: 0 12px 0 8px !important;
 
-.message-content {
-  max-width: 800px;
-  padding: 8px 16px;
-  border-radius: 6px;
-  font-size: 14px;
-  margin-bottom: 10px;
+  :global {
+    .Toastify__toast-icon {
+      margin-inline-end: 5px;
+    }
+  }
 }
 
 .icon-info-circle {
   color: #0A70F5;
   vertical-align: middle;
 }
 
-.message-content-info {
-  background: #EFF8FF;
-  color: #005238;
-}
-
 .icon-success-circle {
   color: #00B365;
   vertical-align: middle;
 }
 
-.message-content-success {
-  background: #EFFCF2;
-  color: #005238;
-}
-
 .icon-warning-circle {
   color: #FFC300;
   vertical-align: middle;
 }
 
-.message-content-warn {
-  background: #FFFAE0;
-  color: #592D00;
-}
-
 .icon-error-circle {
   color:  #F5483B;
   vertical-align: middle;
 }
-
-.message-content-error {
-  background: #FFF5F4;
-  color: #660E16;
-}
-
-.message-icon {
-  margin-right: 8px;
-  font-size: 20px;
-  margin-left: 8px;
-}
-
-.message-content-text {
-  font-size: 14px;
-  margin-left: 8px;
-}
-  

src/components/MessageBox/index.module.scss

@@ -1,18 +1,6 @@
-import { useEffect, useState } from 'react';
-import cloneDeep from 'lodash/cloneDeep';
-import ReactDOM from 'react-dom';
-
+import { toast, ToastOptions, Slide } from 'react-toastify';
 import styles from './index.module.scss';
 
-const RootDom = document.createElement('div');
-document.body.appendChild(RootDom);
-
-interface IProps {
-  type: string;
-  content: string;
-  duration: number;
-}
-
 interface IObject {
   [key: string]: string;
 }
@@ -24,88 +12,54 @@ interface IFunc {
   [key: string]: IFn;
 }
 
-interface IMessageProps {
-  item: IProps
-}
-
 const iconObj: IObject = {
   info: 'icon-info-circle',
   success: 'icon-success-circle',
   warn: 'icon-warning-circle',
   error: 'icon-error-circle',
 };
 
-const bgObj: IObject = {
-  info: 'message-content-info',
-  success: 'message-content-success',
-  warn: 'message-content-warn',
-  error: 'message-content-error',
-}
-
-const MessageBox = (props: IProps) => {
-  const [ msgs, setMsgs ] = useState<IProps[]>([]);
-
-  useEffect(() => {
-    let msgscopy = cloneDeep(msgs);
-
-    setMsgs([...msgscopy, props]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props]);
-
-  return (
-    <div className={styles.message}>
-      {
-        msgs.map((item: IProps, index: number) => {
-          return (
-            <Message 
-              key={index}
-              item={{...props}}
-            />
-          );
-        })
-      }
-    </div>
-  );
-}
-
-const Message = (props: IMessageProps) => {
-  const { item } = props;
-  const { type, content, duration } = item;
-  const [ visible, setVisible ] = useState<boolean>(false);
-
-  useEffect(() => {
-    setVisible(true);
-    const timer = setTimeout(() => {
-      setVisible(false);
-    }, duration * 1000);
-
-    return () => {
-      clearTimeout(timer);
-    }
-  }, [duration]);
-
-
-  if (!visible) return null;
 
-  return (
-    <div className={`${styles[bgObj[type]]} ${styles['message-content']}`}>
-      <i className={`${styles[iconObj[type]]} ${iconObj[type]} iconfont`}></i>
-      <span className={styles['message-content-text']}>{ content }</span>
-    </div>
-  );
+const options: ToastOptions = {
+  position: "top-center",
+  hideProgressBar: true,
+  closeOnClick: true,
+  pauseOnHover: true,
+  draggable: true,
+  closeButton: false,
+  transition: Slide,
+  className: styles['message'],
 }
 
-const message: IFunc = {};
-
-const notice = (props: IProps) => {
-  return ReactDOM.render(<MessageBox {...props} />, RootDom);
-}
-
-['info', 'success', 'warn', 'error'].forEach((type: string) => {
-  message[type] = (content: string, duration = 3) => {
-    return notice({ content, duration, type });
-  };
-});
+const message: IFunc = {
+  info: (content: string, duration?: number) => {
+    toast.info(content, {
+      ...options,
+      icon: <i className={`${styles[iconObj['info']]} ${iconObj['info']} iconfont`}></i>,
+      autoClose: duration || 3000,
+    })
+  },
+  success: (content: string, duration?: number) => {
+    toast.success(content, {
+      ...options,
+      icon: <i className={`${styles[iconObj['success']]} ${iconObj['success']} iconfont`}></i>,
+      autoClose: duration || 3000,
+    })
+  },
+  warn: (content: string, duration?: number) => {
+    toast.warning(content, {
+      ...options,
+      icon: <i className={`${styles[iconObj['warn']]} ${iconObj['warn']} iconfont`}></i>,
+      autoClose: duration || 3000,
+    })
+  },
+  error: (content: string, duration?: number) => {
+    toast.error(content, {
+      ...options,
+      icon: <i className={`${styles[iconObj['error']]} ${iconObj['error']} iconfont`}></i>,
+      autoClose: duration || 3000,
+    })
+  }
+};
 
 export default message;
-

src/components/MessageBox/index.tsx

@@ -9,3 +9,24 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+:root {
+  --toastify-text-color-info: #0A70F5;
+  --toastify-text-color-success: #00B365;
+  --toastify-text-color-warning: #592D00;
+  --toastify-text-color-error: #660E16;
+
+  --toastify-color-info: #EFF8FF;
+  --toastify-color-success: #EFFCF2;
+  --toastify-color-warning: #FFFAE0;
+  --toastify-color-error: #FFF5F4;
+
+  --toastify-toast-min-height: 36px;
+  --toastify-toast-max-height: 80px;
+
+  --toastify-toast-width: auto;
+}
+
+.Toastify__toast-container--top-center {
+  top: 48px !important;
+}

src/index.scss

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import dayjs from 'dayjs';
+import { ToastContainer } from 'react-toastify';
 import Router from './router';
 import { I18NContainer } from './hooks';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -9,6 +10,7 @@ import Intl from './locales/intl';
 import 'iconfont/iconfont.css';
 import 'semantic-ui-less/semantic.less';
 import "react-datetime/css/react-datetime.css";
+import 'react-toastify/dist/ReactToastify.css';
 import 'dayjs/locale/zh-cn';
 
 import './index.scss';
@@ -22,6 +24,7 @@ ReactDOM.render(
       <Intl>
         <Router />
       </Intl>
+      <ToastContainer theme='colored' />
     </I18NContainer.Provider>
   </React.StrictMode>,
   document.getElementById('root')

src/index.tsx

@@ -1,7 +1,7 @@
 
 declare interface Window {
   jsonlint: any;
-  fp: any;
+  FP: any;
 }
 
 declare module 'jsonlint-mod';