Merge pull request #1959 from visuddhinanda/agile

调整提示气泡顺序

dashboard/src/components/template/Wbw/WbwDetail.tsx

@@ -13,13 +13,13 @@ import {
   LockIcon,
   UnLockIcon,
 } from "../../../assets/icon";
-import { UploadFile } from "antd/es/upload/interface";
-import { IAttachmentRequest, IAttachmentResponse } from "../../api/Attachments";
+import { IAttachmentRequest } from "../../api/Attachments";
 import WbwDetailAttachment from "./WbwDetailAttachment";
 import CommentBox from "../../discussion/DiscussionDrawer";
 
 interface IWidget {
   data: IWbw;
+  visible?: boolean;
   onClose?: Function;
   onSave?: Function;
   onCommentCountChange?: Function;
@@ -27,6 +27,7 @@ interface IWidget {
 }
 const WbwDetailWidget = ({
   data,
+  visible = true,
   onClose,
   onSave,
   onCommentCountChange,
@@ -36,6 +37,8 @@ const WbwDetailWidget = ({
   const [currWbwData, setCurrWbwData] = useState<IWbw>(
     JSON.parse(JSON.stringify(data))
   );
+  const [tabKey, setTabKey] = useState<string>("basic");
+
   useEffect(() => {
     setCurrWbwData(JSON.parse(JSON.stringify(data)));
   }, [data]);
@@ -125,25 +128,27 @@ const WbwDetailWidget = ({
             />
           ) : undefined
         }
+        onChange={(activeKey: string) => {
+          setTabKey(activeKey);
+        }}
         items={[
           {
             label: intl.formatMessage({ id: "buttons.basic" }),
             key: "basic",
             children: (
-              <div>
-                <WbwDetailBasic
-                  data={currWbwData}
-                  onChange={(e: IWbwField) => {
-                    console.log("WbwDetailBasic onchange", e);
-                    fieldChanged(e.field, e.value);
-                  }}
-                  onRelationAdd={() => {
-                    if (typeof onClose !== "undefined") {
-                      onClose();
-                    }
-                  }}
-                />
-              </div>
+              <WbwDetailBasic
+                visible={visible && tabKey === "basic"}
+                data={currWbwData}
+                onChange={(e: IWbwField) => {
+                  console.log("WbwDetailBasic onchange", e);
+                  fieldChanged(e.field, e.value);
+                }}
+                onRelationAdd={() => {
+                  if (typeof onClose !== "undefined") {
+                    onClose();
+                  }
+                }}
+              />
             ),
           },
           {

dashboard/src/components/template/Wbw/WbwDetailBasic.tsx

@@ -27,12 +27,14 @@ export interface IWordBasic {
 
 interface IWidget {
   data: IWbw;
+  visible?: boolean;
   showRelation?: boolean;
   onChange?: Function;
   onRelationAdd?: Function;
 }
 const WbwDetailBasicWidget = ({
   data,
+  visible,
   showRelation = true,
   onChange,
   onRelationAdd,
@@ -123,7 +125,8 @@ const WbwDetailBasicWidget = ({
               </Popover>
             </div>
             <WbwDetailOrder
-              sn={3}
+              sn={5}
+              visible={visible}
               curr={currTip}
               onChange={() => setCurrTip(currTip + 1)}
             />
@@ -146,7 +149,8 @@ const WbwDetailBasicWidget = ({
               }}
             />
             <WbwDetailOrder
-              sn={4}
+              sn={2}
+              visible={visible}
               curr={currTip}
               onChange={() => setCurrTip(currTip + 1)}
             />
@@ -178,7 +182,8 @@ const WbwDetailBasicWidget = ({
               }}
             />
             <WbwDetailOrder
-              sn={5}
+              sn={4}
+              visible={visible}
               curr={currTip}
               onChange={() => setCurrTip(currTip + 1)}
             />
@@ -200,7 +205,8 @@ const WbwDetailBasicWidget = ({
               }}
             />
             <WbwDetailOrder
-              sn={2}
+              sn={3}
+              visible={visible}
               curr={currTip}
               onChange={() => setCurrTip(currTip + 1)}
             />
@@ -227,6 +233,7 @@ const WbwDetailBasicWidget = ({
             />
             <WbwDetailOrder
               sn={1}
+              visible={visible}
               curr={currTip}
               onChange={() => setCurrTip(currTip + 1)}
             />

dashboard/src/components/template/Wbw/WbwDetailOrder.tsx

@@ -7,24 +7,26 @@ import { GetUserSetting } from "../../auth/setting/default";
 interface IWidget {
   sn: number;
   curr: number;
+  visible?: boolean;
   onChange?: Function;
 }
 
-const WbwDetailOrderWidget = ({ sn, curr, onChange }: IWidget) => {
+const WbwDetailOrderWidget = ({
+  sn,
+  curr,
+  visible = false,
+  onChange,
+}: IWidget) => {
   const [show, setShow] = useState(true);
-  const [enable, setEnable] = useState(false);
   const settings = useAppSelector(settingInfo);
 
-  useEffect(() => {
-    const showOrder = GetUserSetting("setting.wbw.order", settings);
-    if (typeof showOrder === "boolean") {
-      setEnable(showOrder);
-    }
-  }, [settings]);
+  const showOrder = GetUserSetting("setting.wbw.order", settings);
+  const enable = visible && showOrder;
 
   useEffect(() => {
     setShow(sn === curr);
   }, [curr, sn]);
+
   return enable ? (
     <Tooltip
       open={show}

dashboard/src/components/template/Wbw/WbwPali.tsx

@@ -143,9 +143,10 @@ const WbwPaliWidget = ({ data, channelId, mode, display, onSave }: IWidget) => {
     setPopOpen(open);
   };
 
-  const wbwDetail = () => (
+  const wbwDialog = () => (
     <WbwDetail
       data={data}
+      visible={popOpen}
       onClose={() => {
         setPaliColor("unset");
         setPopOpen(false);
@@ -347,7 +348,7 @@ const WbwPaliWidget = ({ data, channelId, mode, display, onSave }: IWidget) => {
           )}
           {mode === "edit" ? paliWord : ""}
           <Popover
-            content={wbwDetail}
+            content={wbwDialog}
             placement={toDivRight > 200 ? "bottom" : "bottomRight"}
             trigger="click"
             open={popOpen}