فهرست منبع

下拉菜单多于六个,加入到更多的子菜单

visuddhinanda 2 سال پیش
والد
کامیت
fd37af35bc

+ 12 - 3
dashboard/src/components/template/Wbw/WbwDetailFm.tsx

@@ -14,6 +14,7 @@ import { inlineDict as _inlineDict } from "../../../reducers/inline-dict";
 import store from "../../../store";
 import { lookup } from "../../../reducers/command";
 import { openPanel } from "../../../reducers/right-panel";
+import { ItemType } from "antd/lib/menu/hooks/useItems";
 
 interface IWFMI {
   pali: string;
@@ -22,7 +23,7 @@ interface IWFMI {
 }
 const WbwFactorMeaningItem = ({ pali, meaning, onChange }: IWFMI) => {
   const intl = useIntl();
-  const defaultMenu: MenuProps["items"] = [
+  const defaultMenu: ItemType[] = [
     {
       key: "_lookup",
       label: (
@@ -47,7 +48,7 @@ const WbwFactorMeaningItem = ({ pali, meaning, onChange }: IWFMI) => {
     },
     { key: pali, label: pali },
   ];
-  const [items, setItems] = useState<MenuProps["items"]>(defaultMenu);
+  const [items, setItems] = useState<ItemType[]>(defaultMenu);
   const [input, setInput] = useState<string>();
   const [editable, setEditable] = useState(false);
 
@@ -129,7 +130,15 @@ const WbwFactorMeaningItem = ({ pali, meaning, onChange }: IWFMI) => {
   ) : (
     <Dropdown
       menu={{
-        items: items,
+        items: [
+          ...items.filter((value, index) => index <= 5),
+          {
+            key: "more",
+            label: "更多",
+            disabled: items.length <= 5,
+            children: items.filter((value, index) => index > 5),
+          },
+        ],
         onClick: (e) => {
           switch (e.key) {
             case "_lookup":

+ 17 - 3
dashboard/src/components/template/Wbw/WbwFactorMeaning.tsx

@@ -8,6 +8,7 @@ import { IWbw, TWbwDisplayMode } from "./WbwWord";
 import { PaliReal } from "../../../utils";
 import { useAppSelector } from "../../../hooks";
 import { inlineDict as _inlineDict } from "../../../reducers/inline-dict";
+import { ItemType } from "antd/lib/menu/hooks/useItems";
 
 const { Text } = Typography;
 
@@ -24,7 +25,7 @@ const WbwFactorMeaningWidget = ({
   factors,
 }: IWidget) => {
   const intl = useIntl();
-  const defaultMenu: MenuProps["items"] = [
+  const defaultMenu: ItemType[] = [
     {
       key: "loading",
       label: (
@@ -35,7 +36,7 @@ const WbwFactorMeaningWidget = ({
       ),
     },
   ];
-  const [items, setItems] = useState<MenuProps["items"]>(defaultMenu);
+  const [items, setItems] = useState<ItemType[]>(defaultMenu);
 
   const inlineDict = useAppSelector(_inlineDict);
   useEffect(() => {
@@ -96,7 +97,20 @@ const WbwFactorMeaningWidget = ({
     return (
       <div>
         <Text type="secondary">
-          <Dropdown menu={{ items, onClick }} placement="bottomLeft">
+          <Dropdown
+            menu={{
+              items: [
+                ...items.filter((value, index) => index <= 5),
+                {
+                  key: "more",
+                  label: "更多",
+                  children: items.filter((value, index) => index > 5),
+                },
+              ],
+              onClick,
+            }}
+            placement="bottomLeft"
+          >
             {factorMeaning}
           </Dropdown>
         </Text>