@gisce/react-ooui 2.0.0-alpha.59 → 2.0.0-alpha.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.0.0-alpha.59",
+  "version": "2.0.0-alpha.60",
   "engines": {
     "node": "20.5.0"
   },

package/src/actionbar/DropdownButton.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { memo, useState, useMemo, useCallback } from "react";
 import { Menu, Dropdown, Button, Input } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 
@@ -14,8 +14,8 @@ type Props = {
   searchable?: true | false | "auto";
 };
 
-function DropdownButton(props: Props) {
-  const {
+const DropdownButton: React.FC<Props> = memo(
+  ({
     icon,
     tooltip,
     items = [],
@@ -23,84 +23,102 @@ function DropdownButton(props: Props) {
     label,
     disabled = false,
     searchable = "auto",
-  } = props;
-  const [searchValue, setSearchValue] = useState<string>();
+  }: Props) => {
+    const [searchValue, setSearchValue] = useState<string>();
 
-  const onSearch = (value?: string) => {
-    if (!value) {
-      setSearchValue(undefined);
-      return;
-    }
-
-    const sanitizedValue = value.trim();
+    const mustShowSearch =
+      searchable === true || (searchable === "auto" && items.length > 3);
 
-    if (sanitizedValue.length === 0) {
+    const onSearch = useCallback((value?: string) => {
+      const sanitizedValue = value?.trim();
+      if (sanitizedValue && sanitizedValue.length > 0) {
+        setSearchValue(sanitizedValue);
+        return;
+      }
       setSearchValue(undefined);
-      return;
-    }
+    }, []);
 
-    setSearchValue(sanitizedValue);
-  };
-
-  function getMenu() {
-    let itemsData = [];
-    if (searchValue) {
-      itemsData = items.filter((item) => {
-        return item.name.toLowerCase().includes(searchValue.toLowerCase());
-      });
-    } else {
-      itemsData = items;
-    }
-
-    const menuItems = itemsData.map((item, idx) => {
-      if (item.name === "divider") {
-        return <Menu.Divider key={"divider" + idx} />;
+    const filteredItems = useMemo(() => {
+      if (searchValue) {
+        return items
+          .map((item) => {
+            if (item.name.toLowerCase().includes(searchValue.toLowerCase())) {
+              return { ...item };
+            }
+            return { ...item, name: "no_match" };
+          })
+          .sort((a, b) => {
+            // all the items with name "no_match" have to be in the end of the array
+            if (a.name === "no_match") return 1;
+            if (b.name === "no_match") return -1;
+            return 0;
+          });
       }
-      return <Menu.Item key={item.id}>{item.name}</Menu.Item>;
-    });
+      return items;
+    }, [items, searchValue]);
 
-    const mustShowSearch =
-      searchable === true || (searchable === "auto" && items.length > 3);
-
-    return (
-      <Menu onClick={handleMenuClick}>
-        <div>
-          {mustShowSearch && (
-            <Search
-              onChange={(e: any) => onSearch(e.target.value)}
-              onSearch={onSearch}
-              allowClear
-              style={{ padding: 5 }}
-            />
-          )}
-        </div>
-        <div style={{ maxHeight: 300, overflowY: "auto" }}>
-          <Menu.ItemGroup title={tooltip}>{menuItems}</Menu.ItemGroup>
-        </div>
-      </Menu>
+    const handleMenuClick = useCallback(
+      (event: any) => {
+        const itemClicked = filteredItems.find(
+          (item: any) => item.id.toString() === event.key,
+        );
+        if (itemClicked && itemClicked.name !== "no_match")
+          onItemClick(itemClicked);
+      },
+      [onItemClick, filteredItems],
     );
-  }
 
-  function handleMenuClick(event: any) {
-    const itemClicked = items.find((item: any) => {
-      return !isNaN(event.key)
-        ? item.id === parseInt(event.key)
-        : item.id === event.key;
-    });
+    const getMenu = useMemo(() => {
+      const menuItems = filteredItems.map((item, idx) => {
+        if (item.name === "divider")
+          return <Menu.Divider key={"divider" + idx} />;
+        if (item.name === "no_match")
+          return (
+            <Menu.Item
+              key={"no_match" + idx}
+              style={{ cursor: "auto", pointerEvents: "none", opacity: 0 }}
+            >
+              {item.name}
+            </Menu.Item>
+          );
+        return <Menu.Item key={item.id}>{item.name}</Menu.Item>;
+      });
 
-    onItemClick(itemClicked);
-  }
+      return (
+        <Menu onClick={handleMenuClick}>
+          {mustShowSearch && (
+            <div style={{ padding: 5 }}>
+              <Search
+                onChange={(e) => onSearch(e.target.value)}
+                onSearch={onSearch}
+                allowClear
+              />
+            </div>
+          )}
+          <div
+            style={{
+              width: 300,
+              maxHeight: 300,
+              overflowY: "auto",
+            }}
+          >
+            <Menu.ItemGroup title={tooltip}>{menuItems}</Menu.ItemGroup>
+          </div>
+        </Menu>
+      );
+    }, [filteredItems, handleMenuClick, mustShowSearch, onSearch, tooltip]);
 
-  return (
-    <Dropdown
-      overlay={getMenu()}
-      disabled={disabled || !items || items.length === 0}
-    >
-      <Button>
-        {icon} {label} <DownOutlined />
-      </Button>
-    </Dropdown>
-  );
-}
+    return (
+      <>
+        <Dropdown overlay={getMenu} disabled={disabled || items.length === 0}>
+          <Button>
+            {icon} {label} <DownOutlined />
+          </Button>
+        </Dropdown>
+      </>
+    );
+  },
+);
+DropdownButton.displayName = "DropdownButton";
 
 export default DropdownButton;