列表综合筛选

src/components/Menu/index.tsx

@@ -1,34 +1,55 @@
 import { Menu } from "@nutui/nutui-react-taro";
-import styles from "./index.module.scss";
 import { useState } from "react";
+import { Image } from "@tarojs/components";
+import img from "../../config/images";
+import { MenuFilterProps } from "../../../types/list/types";
+import styles from "./index.module.scss";
 
-interface IProps {
-  options: { text: string; value: string }[];
-  value: string;
-  onChange: (value: string) => void;
-  wrapperClassName?: string;
-  itemClassName?: string;
-}
-
-const MenuComponent = (props: IProps) => {
-  const { options, value, onChange, wrapperClassName, itemClassName } = props;
+const MenuComponent = (props: MenuFilterProps) => {
+  const { options, value, onChange, wrapperClassName, itemClassName, name } =
+    props;
   const [isChange, setIsChange] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-  const handleChange = (value: string) => {
+  const handleChange = (val: Record<string, string>) => {
     setIsChange(true);
-    onChange && onChange(value);
+    onChange && onChange(name, val.value);
+  };
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
   };
 
   return (
     <Menu
-      className={`${styles.menuWrap} ${wrapperClassName} ${isChange ? styles.active : ""}`}
+      className={`${styles.menuWrap} ${wrapperClassName} ${
+        isChange ? styles.active : ""
+      }`}
       activeColor="#000"
+      onOpen={handleOpen}
+      onClose={handleClose}
+      icon={
+        <Image
+          className={`${styles.menuIcon} ${isOpen ? styles.rotate : ""}`}
+          src={isChange ? img.ICON_ARROW_DOWN_WHITE : img.ICON_ARROW_DOWN}
+        />
+      }
     >
       <Menu.Item
         className={`${styles.menuItem} ${itemClassName}`}
         options={options}
         defaultValue={value}
         onChange={handleChange}
+        icon={
+          <Image
+            className={styles.itemIcon}
+            src={img.ICON_MENU_ITEM_SELECTED}
+          />
+        }
       />
     </Menu>
   );