From 9f3f73072345c9f1f73bafba0b73225e72cf06f0 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 25 Aug 2022 21:05:31 +0800
Subject: [PATCH] chore: update selector style

---
 web/src/components/MemoEditor.tsx      | 16 ++++++++++---
 web/src/components/common/Selector.tsx | 32 +++++++++++++++-----------
 web/src/less/common/selector.less      |  4 ++++
 web/src/less/memo-editor.less          |  6 ++++-
 web/src/locales/en.json                |  1 +
 web/src/locales/zh.json                |  1 +
 6 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
index da06af0f..d2188667 100644
--- a/web/src/components/MemoEditor.tsx
+++ b/web/src/components/MemoEditor.tsx
@@ -243,9 +243,19 @@ const MemoEditor: React.FC<Props> = () => {
             <div className="action-btn tag-action">
               <Icon.Hash className="icon-img" />
               <div ref={tagSeletorRef} className="tag-list" onClick={handleTagSeletorClick}>
-                {tags.map((t) => {
-                  return <span key={t}>{t}</span>;
-                })}
+                {tags.length > 0 ? (
+                  tags.map((tag) => {
+                    return (
+                      <span className="item-container" key={tag}>
+                        {tag}
+                      </span>
+                    );
+                  })
+                ) : (
+                  <p className="tip-text" onClick={(e) => e.stopPropagation()}>
+                    {t("common.null")}
+                  </p>
+                )}
               </div>
             </div>
             <button className="action-btn">
diff --git a/web/src/components/common/Selector.tsx b/web/src/components/common/Selector.tsx
index 4224845d..b400ffa3 100644
--- a/web/src/components/common/Selector.tsx
+++ b/web/src/components/common/Selector.tsx
@@ -1,4 +1,5 @@
 import { memo, useEffect, useRef } from "react";
+import useI18n from "../../hooks/useI18n";
 import useToggle from "../../hooks/useToggle";
 import Icon from "../Icon";
 import "../../less/common/selector.less";
@@ -22,6 +23,7 @@ const nullItem = {
 
 const Selector: React.FC<Props> = (props: Props) => {
   const { className, dataSource, handleValueChanged, value } = props;
+  const { t } = useI18n();
   const [showSelector, toggleSelectorStatus] = useToggle(false);
 
   const seletorElRef = useRef<HTMLDivElement>(null);
@@ -70,19 +72,23 @@ const Selector: React.FC<Props> = (props: Props) => {
       </div>
 
       <div className={`items-wrapper ${showSelector ? "" : "!hidden"}`}>
-        {dataSource.map((d) => {
-          return (
-            <div
-              className={`item-container ${d.value === value ? "selected" : ""}`}
-              key={d.value}
-              onClick={() => {
-                handleItemClick(d);
-              }}
-            >
-              {d.text}
-            </div>
-          );
-        })}
+        {dataSource.length > 0 ? (
+          dataSource.map((d) => {
+            return (
+              <div
+                className={`item-container ${d.value === value ? "selected" : ""}`}
+                key={d.value}
+                onClick={() => {
+                  handleItemClick(d);
+                }}
+              >
+                {d.text}
+              </div>
+            );
+          })
+        ) : (
+          <p className="tip-text">{t("common.null")}</p>
+        )}
       </div>
     </div>
   );
diff --git a/web/src/less/common/selector.less b/web/src/less/common/selector.less
index 64c49f55..8968abc2 100644
--- a/web/src/less/common/selector.less
+++ b/web/src/less/common/selector.less
@@ -39,5 +39,9 @@
         color: @text-green;
       }
     }
+
+    > .tip-text {
+      @apply px-3 py-1 text-sm text-gray-600;
+    }
   }
 }
diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
index 11080734..39685e3d 100644
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@@ -52,9 +52,13 @@
       > .tag-list {
         @apply hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-1 rounded w-32 max-h-52 overflow-auto bg-black;
 
-        > span {
+        > .item-container {
           @apply w-full text-white cursor-pointer rounded text-sm leading-6 px-2 hover:bg-gray-700;
         }
+
+        > .tip-text {
+          @apply w-full text-sm text-gray-200 leading-6 px-2 cursor-default;
+        }
       }
     }
   }
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 8563f2b4..94ea464a 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -16,6 +16,7 @@
     "edit": "Edit",
     "restore": "Restore",
     "delete": "Delete",
+    "null": "Null",
     "share": "Share",
     "mark": "Mark",
     "archive": "Archive",
diff --git a/web/src/locales/zh.json b/web/src/locales/zh.json
index 01eb6579..47880462 100644
--- a/web/src/locales/zh.json
+++ b/web/src/locales/zh.json
@@ -16,6 +16,7 @@
     "edit": "编辑",
     "restore": "恢复",
     "delete": "删除",
+    "null": "空",
     "share": "分享",
     "mark": "标注",
     "archive": "归档",