添加弹窗可见性

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}