@mindinventory/mi-react-icon-picker - npm Package Compare versions

Comparing version 1.0.19 to 1.0.20

lib/IconPicker.js

@@ -68,3 +68,3 @@ "use strict";
     setIsPositionSet = _useState4[1];
-  var _useState5 = (0, _react.useState)([]),
+  var _useState5 = (0, _react.useState)({}),
     _useState6 = _slicedToArray(_useState5, 2),
@@ -84,2 +84,10 @@ icons = _useState6[0],
     setSelectedIcons = _useState10[1];
+  var _useState11 = (0, _react.useState)(1),
+    _useState12 = _slicedToArray(_useState11, 2),
+    currentPage = _useState12[0],
+    setCurrentPage = _useState12[1];
+  var _useState13 = (0, _react.useState)(""),
+    _useState14 = _slicedToArray(_useState13, 2),
+    searchQuery = _useState14[0],
+    setSearchQuery = _useState14[1];
   var buttonRef = (0, _react.useRef)(null);
@@ -105,8 +113,5 @@ var popupRef = (0, _react.useRef)(null);
     }
-    // Check if the popup will fit below the viewport
     if (buttonRect.bottom + popupRect.height > windowHeight + ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.scrollY)) {
       var _window4, _window5;
-      // Move popup to above the button if it goes out of view
       newPosition.top = buttonRect.top + ((_window4 = window) === null || _window4 === void 0 ? void 0 : _window4.scrollY) - popupRect.height - ((adjustPosition === null || adjustPosition === void 0 ? void 0 : adjustPosition.top) || 0);
-      // hide the popup if the click element out of the viewport.
       if (buttonRect.bottom > windowHeight + ((_window5 = window) === null || _window5 === void 0 ? void 0 : _window5.scrollY)) {
@@ -120,3 +125,2 @@ setIsPopupVisible(false);
       var _window7;
-      // Move popup on the button's left if no view space on the right.
       newPosition.left = buttonRect.left + ((_window7 = window) === null || _window7 === void 0 ? void 0 : _window7.scrollX) - popupRect.width - ((adjustPosition === null || adjustPosition === void 0 ? void 0 : adjustPosition.left) || 0);
@@ -132,14 +136,2 @@ }
   (0, _react.useEffect)(function () {
-    var handleClickOutside = function handleClickOutside(event) {
-      if (buttonRef.current && !buttonRef.current.contains(event === null || event === void 0 ? void 0 : event.target) && !event.target.closest(".popup-container")) {
-        handleClosePopup();
-        setSearchQuery(""); // Clear search input on outside click
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return function () {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-  (0, _react.useEffect)(function () {
     // Update popup position when scrolling
@@ -160,71 +152,103 @@ if (!isPopupVisible) return;
   }, [isPopupVisible]);
-
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     const icons = [];
-  //     Object.keys(document.styleSheets).forEach((index) => {
-  //       Array.prototype.forEach.call(
-  //         document.styleSheets[index]?.cssRules,
-  //         (a) => {
-  //           if (!a?.selectorText?.includes(".mi-icon-")) return;
-  //           const iconName = a?.selectorText?.split("::")[0]?.split(".")?.pop();
-  //           icons.push(iconName);
-  //         }
-  //       );
-  //     });
-  //     // window.console.log(document.styleSheets, icons);
-  //     setIcons(icons);
-  //   }, 1000);
-  // }, []);
-
   (0, _react.useEffect)(function () {
-    var extractIcons = function extractIcons() {
-      var icons = [];
-      Array.from(document.styleSheets).forEach(function (sheet) {
-        try {
-          if (!sheet.cssRules) return;
-          Array.from(sheet.cssRules).forEach(function (rule) {
-            var _rule$selectorText;
-            if (rule !== null && rule !== void 0 && (_rule$selectorText = rule.selectorText) !== null && _rule$selectorText !== void 0 && _rule$selectorText.includes(".mi-icon-")) {
-              var iconName = rule.selectorText.split("::")[0].split(".").pop();
-              if (iconName && !icons.includes(iconName)) {
-                icons.push(iconName);
-              }
-            }
-          });
-        } catch (error) {
-          console.warn("Cannot access stylesheet: ".concat(sheet.href), error);
-        }
-      });
-      setIcons(icons);
+    var handleClickOutside = function handleClickOutside(event) {
+      if (buttonRef.current && !buttonRef.current.contains(event === null || event === void 0 ? void 0 : event.target) && !event.target.closest(".popup-container")) {
+        handleClosePopup();
+        setSearchQuery(""); // Clear search input on outside click
+      }
     };
-    if (typeof window === "undefined") return;
-    var interval = setInterval(function () {
-      try {
-        extractIcons();
-        clearInterval(interval);
-      } catch (error) {
-        console.warn("Retrying to extract icons...", error);
-      }
-    }, 500);
+    document.addEventListener("mousedown", handleClickOutside);
     return function () {
-      return clearInterval(interval);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  var filterIcons = function filterIcons(searchQuery) {
-    return icons.filter(function (icon) {
-      var _icon$toLowerCase;
-      return icon === null || icon === void 0 || (_icon$toLowerCase = icon.toLowerCase()) === null || _icon$toLowerCase === void 0 ? void 0 : _icon$toLowerCase.includes(searchQuery === null || searchQuery === void 0 ? void 0 : searchQuery.toLowerCase());
+
+  // Filter icons based on search query
+  var filterIcons = function filterIcons(query) {
+    return Object.keys(icons).map(function (iconKey) {
+      var _icons$iconKey, _icons$iconKey2;
+      var iconName = ((_icons$iconKey = icons[iconKey]) === null || _icons$iconKey === void 0 ? void 0 : _icons$iconKey.name) || iconKey;
+
+      // Check if the icon name contains the query
+      var iconMatch = iconName.toLowerCase().includes(query.toLowerCase());
+
+      // Check if any of the paths for this icon match the query
+      var pathsMatch = (_icons$iconKey2 = icons[iconKey]) === null || _icons$iconKey2 === void 0 || (_icons$iconKey2 = _icons$iconKey2.paths) === null || _icons$iconKey2 === void 0 ? void 0 : _icons$iconKey2.some(function (path) {
+        return path.className.toLowerCase().includes(query.toLowerCase());
+      });
+
+      // If the icon or its paths match, return the icon's name and paths
+      if (iconMatch || pathsMatch) {
+        var _icons$iconKey3;
+        return {
+          name: iconName,
+          paths: ((_icons$iconKey3 = icons[iconKey]) === null || _icons$iconKey3 === void 0 ? void 0 : _icons$iconKey3.paths) || [] // If no paths, return an empty array
+        };
+      }
+      return null; // Return null if no match
+    }).filter(function (icon) {
+      return icon !== null;
     });
+  }; // Filter out null values
+
+  var extractIconPaths = function extractIconPaths() {
+    var iconsMap = {};
+    Array.from(document.styleSheets).forEach(function (sheet) {
+      try {
+        Array.from(sheet.cssRules || []).forEach(function (rule) {
+          var _rule$selectorText;
+          if ((_rule$selectorText = rule.selectorText) !== null && _rule$selectorText !== void 0 && _rule$selectorText.startsWith(".mi-icon-")) {
+            var _rule$selectorText$sp, _rule$selectorText$sp2;
+            var iconClass = rule === null || rule === void 0 || (_rule$selectorText$sp = rule.selectorText.split("::")[0]) === null || _rule$selectorText$sp === void 0 ? void 0 : _rule$selectorText$sp.split(".")[1]; // Getting the icon name
+            var pathClass = rule === null || rule === void 0 || (_rule$selectorText$sp2 = rule.selectorText.split("::")[0]) === null || _rule$selectorText$sp2 === void 0 ? void 0 : _rule$selectorText$sp2.split(".")[2]; // Getting path class like path1, path2, etc.
+
+            if (!iconClass) return; // Skip if no icon class
+
+            // Initialize the icon in the map if not present
+            if (!iconsMap[iconClass]) {
+              iconsMap[iconClass] = {
+                paths: []
+              };
+            }
+
+            // Check for path classes (like path1, path2, etc.)
+            if (pathClass !== null && pathClass !== void 0 && pathClass.startsWith("path")) {
+              var styles = {};
+              Array.from(rule.style).forEach(function (styleProp) {
+                styles[styleProp] = rule.style[styleProp];
+              });
+              iconsMap[iconClass].paths.push({
+                className: pathClass,
+                styles: styles
+              });
+            }
+          }
+        });
+      } catch (err) {
+        console.warn("Error accessing stylesheet rules:", err);
+      }
+    });
+
+    // Convert iconsMap to an array of icons
+    return Object.keys(iconsMap).map(function (iconName) {
+      return {
+        name: iconName,
+        paths: iconsMap[iconName].paths
+      };
+    });
   };
-  var _useState11 = (0, _react.useState)(1),
-    _useState12 = _slicedToArray(_useState11, 2),
-    currentPage = _useState12[0],
-    setCurrentPage = _useState12[1];
-  var _useState13 = (0, _react.useState)(""),
-    _useState14 = _slicedToArray(_useState13, 2),
-    searchQuery = _useState14[0],
-    setSearchQuery = _useState14[1];
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      var icons = extractIconPaths();
+      setIcons(icons);
+
+      // Debugging
+      console.log("Extracted Icons with Paths:", icons);
+    }, 1000); // Delay to ensure stylesheets are loaded
+  }, []);
   var filteredIcons = filterIcons(searchQuery);
   var totalPages = Math.ceil(filteredIcons.length / IconsPerPage);
+  var startIdx = (currentPage - 1) * IconsPerPage;
+  var endIdx = startIdx + IconsPerPage;
+  var iconsToDisplay = filteredIcons.slice(startIdx, endIdx);
   var handlePageChange = function handlePageChange(direction) {
@@ -235,5 +259,2 @@ setCurrentPage(function (prevPage) {
   };
-  var startIdx = (currentPage - 1) * IconsPerPage;
-  var endIdx = startIdx + IconsPerPage;
-  var iconsToDisplay = filteredIcons.slice(startIdx, endIdx);
   var handleIconClick = function handleIconClick(icon) {
@@ -247,3 +268,2 @@ if (isMulti) {
     } else {
-      var _navigator, _navigator2;
       var isSelected = selectedIcons === null || selectedIcons === void 0 ? void 0 : selectedIcons.includes(icon);
@@ -253,3 +273,2 @@ var _updatedSelection = isSelected ? [] : [icon];
       onChange(_updatedSelection[0] || null);
-      if ((_navigator = navigator) !== null && _navigator !== void 0 && _navigator.clipboard) (_navigator2 = navigator) === null || _navigator2 === void 0 || (_navigator2 = _navigator2.clipboard) === null || _navigator2 === void 0 || _navigator2.writeText(_updatedSelection[0] || null);
       if (closeOnSelect) {
@@ -300,3 +319,3 @@ setIsPopupVisible(false);
       disabled: currentPage === 1,
-      className: "border-none bg-gray-200 text-gray-600 rounded cursor-pointer mx-2 px-2 py-1 transition-colors duration-300 hover:bg-gray-200 disabled:opacity-50 outline-none",
+      className: "border-none bg-transparent text-gray-600 rounded cursor-pointer mx-2 px-2 py-1 transition-colors duration-300 hover:bg-gray-200 disabled:opacity-50 outline-none",
       type: "button"
@@ -310,3 +329,3 @@ }, /*#__PURE__*/_react["default"].createElement("span", {
       disabled: currentPage === totalPages,
-      className: "border-none bg-gray-200 text-gray-600 rounded cursor-pointer px-2 py-1 transition-colors duration-300 hover:bg-gray-200 disabled:opacity-50 outline-none",
+      className: "border-none bg-transparent text-gray-600 rounded cursor-pointer px-2 py-1 transition-colors duration-300 hover:bg-gray-200 disabled:opacity-50 outline-none",
       type: "button"
@@ -326,3 +345,3 @@ }, /*#__PURE__*/_react["default"].createElement("span", {
         key: index,
-        className: classNames("flex justify-center items-center cursor-pointer group overflow-hidden rounded-[4px]\n                   hover:bg-gray-300 hover:shadow-[0_4px_15px_rgba(0,0,0,0.3)] hover:shadow-gray-500 ".concat(selectedIcons !== null && selectedIcons !== void 0 && selectedIcons.includes(icon) ? iconSelectedBgColor : iconBgColor, " hover:bg-gray-300 group")),
+        className: classNames("flex justify-center items-center cursor-pointer group overflow-hidden rounded-[4px]\n                   hover:bg-gray-300 hover:shadow-[0_4px_15px_rgba(0,0,0,0.3)] hover:shadow-gray-500 ".concat(selectedIcons !== null && selectedIcons !== void 0 && selectedIcons.includes(icon.name) ? iconSelectedBgColor : iconBgColor, " hover:bg-gray-300 group")),
         style: {
@@ -336,4 +355,8 @@ height: "".concat(iconHeight, "px"),
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: icon + " text-center text-xl group-hover:scale-150 transition-all duration-500"
-      }));
+        className: icon.name + " text-center text-xl group-hover:scale-150 transition-all duration-500"
+      }, icon.paths.map(function (path) {
+        return /*#__PURE__*/_react["default"].createElement("span", {
+          className: path.className
+        });
+      })));
     }))));
@@ -340,0 +363,0 @@ };

package.json

 {
   "name": "@mindinventory/mi-react-icon-picker",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "main": "lib/IconPicker.js",
@@ -5,0 +5,0 @@ "files": [

No alert changes

Improved metrics

Total package byte prevSize

1624535

increased by0.05%

Lines of code

2581

increased by1.06%

No dependency changes