pixelize-design-library 2.1.58 → 2.1.60

package/dist/Components/Table/Components/TableActions.js

@@ -96,48 +96,174 @@ Object.defineProperty(exports, "__esModule", { value: true });
 //   );
 // };
 // export default TableActions;
+// import React, { useEffect, useRef, useState } from "react";
+// import {
+//   Button,
+//   IconButton,
+//   Popover,
+//   PopoverBody,
+//   PopoverContent,
+//   PopoverTrigger,
+//   Portal,
+//   VStack,
+// } from "@chakra-ui/react";
+// import { EllipsisVertical, ExternalLink, Pencil, Trash2 } from "lucide-react";
+// const TableActions = ({ row }: any) => {
+//   const [isOpen, setIsOpen] = useState(false);
+//     const ref = useRef<HTMLDivElement>(null);
+//   // Listen for "close-all-popovers"
+//   useEffect(() => {
+//     const handler = () => setIsOpen(false);
+//     window.addEventListener("close-all-popovers", handler);
+//     return () => window.removeEventListener("close-all-popovers", handler);
+//   }, []);
+//    useEffect(() => {
+//     const handleClickOutside = (event: MouseEvent) => {
+//       if (ref.current && !ref.current.contains(event.target as Node)) {
+//         setIsOpen(false);
+//       }
+//     };
+//     if (isOpen) {
+//       document.addEventListener("mousedown", handleClickOutside);
+//     }
+//     return () => document.removeEventListener("mousedown", handleClickOutside);
+//   }, [isOpen]);
+//   const handleOpen = () => {
+//     // Close all others first
+//     window.dispatchEvent(new Event("close-all-popovers"));
+//     setIsOpen(true);
+//   };
+//   const handleClose = () => setIsOpen(false);
+//   return (
+//     <Popover
+//       placement="bottom-start"
+//       isOpen={isOpen}
+//       onOpen={handleOpen}
+//       onClose={handleClose}
+//       closeOnBlur
+//     >
+//       <PopoverTrigger>
+//         <IconButton
+//           aria-label="Link"
+//           color="black"
+//           icon={<EllipsisVertical size={17} />}
+//           size="sm"
+//           p={0}
+//           variant="ghost"
+//           _hover={{ transform: "scale(1.2)" }}
+//           onClick={() => (isOpen ? handleClose() : handleOpen())}
+//         />
+//       </PopoverTrigger>
+//       <Portal>
+//         <PopoverContent w="auto" minW="150px" boxShadow="lg" p={0} zIndex={999}>
+//           <PopoverBody>
+//             <VStack align="stretch" spacing={1}>
+//               {row.onLink && (
+//                 <Button
+//                   size="sm"
+//                   variant="ghost"
+//                   justifyContent="flex-start"
+//                   gap={2}
+//                   onClick={() => {
+//                     row.onLink(row);
+//                     handleClose();
+//                   }}
+//                 >
+//                   <ExternalLink size={17} /> View
+//                 </Button>
+//               )}
+//               {row.onEdit && (
+//                 <Button
+//                   size="sm"
+//                   variant="ghost"
+//                   justifyContent="flex-start"
+//                   gap={2}
+//                   onClick={() => {
+//                     row.onEdit(row);
+//                     handleClose();
+//                   }}
+//                 >
+//                   <Pencil size={17} /> Edit
+//                 </Button>
+//               )}
+//               {row.onDelete && (
+//                 <Button
+//                   size="sm"
+//                   variant="ghost"
+//                   justifyContent="flex-start"
+//                   colorScheme="red"
+//                   gap={2}
+//                   onClick={() => {
+//                     row.onDelete(row);
+//                     handleClose();
+//                   }}
+//                 >
+//                   <Trash2 size={17} /> Delete
+//                 </Button>
+//               )}
+//             </VStack>
+//           </PopoverBody>
+//         </PopoverContent>
+//       </Portal>
+//     </Popover>
+//   );
+// };
+// export default TableActions;
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var TableActions = function (_a) {
     var row = _a.row;
     var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
+    var ref = (0, react_1.useRef)(null);
     // Listen for "close-all-popovers"
     (0, react_1.useEffect)(function () {
         var handler = function () { return setIsOpen(false); };
         window.addEventListener("close-all-popovers", handler);
         return function () { return window.removeEventListener("close-all-popovers", handler); };
     }, []);
+    // Detect outside click
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            if (ref.current && !ref.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return function () { return document.removeEventListener("mousedown", handleClickOutside); };
+    }, [isOpen]);
     var handleOpen = function () {
-        // Close all others first
-        window.dispatchEvent(new Event("close-all-popovers"));
+        window.dispatchEvent(new Event("close-all-popovers")); // close others
         setIsOpen(true);
     };
     var handleClose = function () { return setIsOpen(false); };
-    return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start", isOpen: isOpen, onOpen: handleOpen, onClose: handleClose, closeOnBlur: true },
-        react_1.default.createElement(react_2.PopoverTrigger, null,
-            react_1.default.createElement(react_2.IconButton, { "aria-label": "Link", color: "black", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: function () { return (isOpen ? handleClose() : handleOpen()); } })),
-        react_1.default.createElement(react_2.Portal, null,
-            react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "150px", boxShadow: "lg", p: 0, zIndex: 999 },
-                react_1.default.createElement(react_2.PopoverBody, null,
-                    react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1 },
-                        row.onLink && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
-                                row.onLink(row);
-                                handleClose();
-                            } },
-                            react_1.default.createElement(lucide_react_1.ExternalLink, { size: 17 }),
-                            " View")),
-                        row.onEdit && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
-                                row.onEdit(row);
-                                handleClose();
-                            } },
-                            react_1.default.createElement(lucide_react_1.Pencil, { size: 17 }),
-                            " Edit")),
-                        row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, onClick: function () {
-                                row.onDelete(row);
-                                handleClose();
-                            } },
-                            react_1.default.createElement(lucide_react_1.Trash2, { size: 17 }),
-                            " Delete"))))))));
+    return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false },
+        react_1.default.createElement("div", { ref: ref },
+            react_1.default.createElement(react_2.PopoverTrigger, null,
+                react_1.default.createElement(react_2.IconButton, { "aria-label": "Link", color: "black", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: function () { return (isOpen ? handleClose() : handleOpen()); } })),
+            react_1.default.createElement(react_2.Portal, null,
+                react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "150px", boxShadow: "lg", p: 0, zIndex: 999 },
+                    react_1.default.createElement(react_2.PopoverBody, null,
+                        react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1 },
+                            row.onLink && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
+                                    row.onLink(row);
+                                    handleClose();
+                                } },
+                                react_1.default.createElement(lucide_react_1.ExternalLink, { size: 17 }),
+                                " View")),
+                            row.onEdit && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
+                                    row.onEdit(row);
+                                    handleClose();
+                                } },
+                                react_1.default.createElement(lucide_react_1.Pencil, { size: 17 }),
+                                " Edit")),
+                            row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, onClick: function () {
+                                    row.onDelete(row);
+                                    handleClose();
+                                } },
+                                react_1.default.createElement(lucide_react_1.Trash2, { size: 17 }),
+                                " Delete")))))))));
 };
 exports.default = TableActions;