pixelize-design-library 2.1.71 → 2.1.72
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,3 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
|
|
2
|
+
type TableRowActions = {
|
|
3
|
+
onLink?: (row: any) => void;
|
|
4
|
+
onEdit?: (row: any) => void;
|
|
5
|
+
onDelete?: (row: any) => void;
|
|
6
|
+
[key: string]: any;
|
|
7
|
+
};
|
|
8
|
+
declare const TableActions: ({ row }: {
|
|
9
|
+
row?: TableRowActions | undefined;
|
|
10
|
+
}) => React.JSX.Element | null;
|
|
3
11
|
export default TableActions;
|
|
@@ -1,4 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
// import React, { useEffect, useRef, useState } from "react";
|
|
3
|
+
// import {
|
|
4
|
+
// Button,
|
|
5
|
+
// IconButton,
|
|
6
|
+
// Popover,
|
|
7
|
+
// PopoverBody,
|
|
8
|
+
// PopoverContent,
|
|
9
|
+
// PopoverTrigger,
|
|
10
|
+
// Portal,
|
|
11
|
+
// VStack,
|
|
12
|
+
// } from "@chakra-ui/react";
|
|
13
|
+
// import { EllipsisVertical, ExternalLink, Pencil, Trash2 } from "lucide-react";
|
|
2
14
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
15
|
if (k2 === undefined) k2 = k;
|
|
4
16
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -23,6 +35,109 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
23
35
|
return result;
|
|
24
36
|
};
|
|
25
37
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
38
|
+
// const TableActions = ({ row }: any) => {
|
|
39
|
+
// const [isOpen, setIsOpen] = useState(false);
|
|
40
|
+
// const ref = useRef<HTMLDivElement>(null);
|
|
41
|
+
// // Listen for "close-all-popovers"
|
|
42
|
+
// useEffect(() => {
|
|
43
|
+
// const handler = () => setIsOpen(false);
|
|
44
|
+
// window.addEventListener("close-all-popovers", handler);
|
|
45
|
+
// return () => window.removeEventListener("close-all-popovers", handler);
|
|
46
|
+
// }, []);
|
|
47
|
+
// // Detect outside click
|
|
48
|
+
// useEffect(() => {
|
|
49
|
+
// const handleClickOutside = (event: MouseEvent) => {
|
|
50
|
+
// if (ref.current && !ref.current.contains(event.target as Node)) {
|
|
51
|
+
// setIsOpen(false);
|
|
52
|
+
// }
|
|
53
|
+
// };
|
|
54
|
+
// if (isOpen) {
|
|
55
|
+
// document.addEventListener("mousedown", handleClickOutside);
|
|
56
|
+
// }
|
|
57
|
+
// return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
58
|
+
// }, [isOpen]);
|
|
59
|
+
// const handleOpen = () => {
|
|
60
|
+
// window.dispatchEvent(new Event("close-all-popovers")); // close others
|
|
61
|
+
// setIsOpen(true);
|
|
62
|
+
// };
|
|
63
|
+
// const handleClose = () => setIsOpen(false);
|
|
64
|
+
// return (
|
|
65
|
+
// <Popover
|
|
66
|
+
// placement="bottom-start"
|
|
67
|
+
// isOpen={isOpen}
|
|
68
|
+
// onClose={handleClose}
|
|
69
|
+
// closeOnBlur={false} // we handle outside click manually
|
|
70
|
+
// >
|
|
71
|
+
// <div ref={ref}>
|
|
72
|
+
// <PopoverTrigger>
|
|
73
|
+
// <IconButton
|
|
74
|
+
// aria-label="Link"
|
|
75
|
+
// color="black"
|
|
76
|
+
// icon={<EllipsisVertical size={17} />}
|
|
77
|
+
// size="sm"
|
|
78
|
+
// p={0}
|
|
79
|
+
// variant="ghost"
|
|
80
|
+
// _hover={{ transform: "scale(1.2)" }}
|
|
81
|
+
// onClick={() => (isOpen ? handleClose() : handleOpen())}
|
|
82
|
+
// />
|
|
83
|
+
// </PopoverTrigger>
|
|
84
|
+
// <Portal>
|
|
85
|
+
// <PopoverContent w="auto" minW="150px" boxShadow="lg" p={0} zIndex={999}>
|
|
86
|
+
// <PopoverBody>
|
|
87
|
+
// <VStack align="stretch" spacing={1}>
|
|
88
|
+
// {row.onLink && (
|
|
89
|
+
// <Button
|
|
90
|
+
// size="sm"
|
|
91
|
+
// variant="ghost"
|
|
92
|
+
// justifyContent="flex-start"
|
|
93
|
+
// gap={2}
|
|
94
|
+
// onClick={() => {
|
|
95
|
+
// row.onLink(row);
|
|
96
|
+
// console.log(row,"row")
|
|
97
|
+
// handleClose();
|
|
98
|
+
// }}
|
|
99
|
+
// >
|
|
100
|
+
// <ExternalLink size={17} /> View
|
|
101
|
+
// </Button>
|
|
102
|
+
// )}
|
|
103
|
+
// {row.onEdit && (
|
|
104
|
+
// <Button
|
|
105
|
+
// size="sm"
|
|
106
|
+
// variant="ghost"
|
|
107
|
+
// justifyContent="flex-start"
|
|
108
|
+
// gap={2}
|
|
109
|
+
// onClick={() => {
|
|
110
|
+
// row.onEdit(row);
|
|
111
|
+
// handleClose();
|
|
112
|
+
// }}
|
|
113
|
+
// >
|
|
114
|
+
// <Pencil size={17} /> Edit
|
|
115
|
+
// </Button>
|
|
116
|
+
// )}
|
|
117
|
+
// {row.onDelete && (
|
|
118
|
+
// <Button
|
|
119
|
+
// size="sm"
|
|
120
|
+
// variant="ghost"
|
|
121
|
+
// justifyContent="flex-start"
|
|
122
|
+
// colorScheme="red"
|
|
123
|
+
// gap={2}
|
|
124
|
+
// onClick={() => {
|
|
125
|
+
// row.onDelete(row);
|
|
126
|
+
// handleClose();
|
|
127
|
+
// }}
|
|
128
|
+
// >
|
|
129
|
+
// <Trash2 size={17} /> Delete
|
|
130
|
+
// </Button>
|
|
131
|
+
// )}
|
|
132
|
+
// </VStack>
|
|
133
|
+
// </PopoverBody>
|
|
134
|
+
// </PopoverContent>
|
|
135
|
+
// </Portal>
|
|
136
|
+
// </div>
|
|
137
|
+
// </Popover>
|
|
138
|
+
// );
|
|
139
|
+
// };
|
|
140
|
+
// export default TableActions;
|
|
26
141
|
var react_1 = __importStar(require("react"));
|
|
27
142
|
var react_2 = require("@chakra-ui/react");
|
|
28
143
|
var lucide_react_1 = require("lucide-react");
|
|
@@ -44,40 +159,61 @@ var TableActions = function (_a) {
|
|
|
44
159
|
}
|
|
45
160
|
};
|
|
46
161
|
if (isOpen) {
|
|
47
|
-
|
|
162
|
+
// ✅ Use click instead of mousedown
|
|
163
|
+
document.addEventListener("click", handleClickOutside);
|
|
48
164
|
}
|
|
49
|
-
return function () {
|
|
165
|
+
return function () {
|
|
166
|
+
document.removeEventListener("click", handleClickOutside);
|
|
167
|
+
};
|
|
50
168
|
}, [isOpen]);
|
|
169
|
+
// useEffect(() => {
|
|
170
|
+
// const handleClickOutside = (event: MouseEvent) => {
|
|
171
|
+
// if (ref.current && !ref.current.contains(event.target as Node)) {
|
|
172
|
+
// setIsOpen(false);
|
|
173
|
+
// }
|
|
174
|
+
// };
|
|
175
|
+
// if (isOpen) {
|
|
176
|
+
// document.addEventListener("mousedown", handleClickOutside);
|
|
177
|
+
// }
|
|
178
|
+
// return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
179
|
+
// }, [isOpen]);
|
|
51
180
|
var handleOpen = function () {
|
|
52
181
|
window.dispatchEvent(new Event("close-all-popovers")); // close others
|
|
53
182
|
setIsOpen(true);
|
|
54
183
|
};
|
|
55
184
|
var handleClose = function () { return setIsOpen(false); };
|
|
185
|
+
// ✅ if row itself is missing, render nothing
|
|
186
|
+
if (!row)
|
|
187
|
+
return null;
|
|
56
188
|
return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false },
|
|
57
189
|
react_1.default.createElement("div", { ref: ref },
|
|
58
190
|
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
59
|
-
react_1.default.createElement(react_2.IconButton, { "aria-label": "
|
|
191
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "Actions", 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()); } })),
|
|
60
192
|
react_1.default.createElement(react_2.Portal, null,
|
|
61
193
|
react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "150px", boxShadow: "lg", p: 0, zIndex: 999 },
|
|
62
194
|
react_1.default.createElement(react_2.PopoverBody, null,
|
|
63
195
|
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1 },
|
|
64
196
|
row.onLink && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
|
|
65
|
-
|
|
66
|
-
|
|
197
|
+
var _a;
|
|
198
|
+
(_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
|
|
199
|
+
// handleClose();
|
|
67
200
|
} },
|
|
68
201
|
react_1.default.createElement(lucide_react_1.ExternalLink, { size: 17 }),
|
|
69
202
|
" View")),
|
|
70
203
|
row.onEdit && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
|
|
71
|
-
|
|
72
|
-
|
|
204
|
+
var _a;
|
|
205
|
+
(_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
|
|
206
|
+
// handleClose();
|
|
73
207
|
} },
|
|
74
208
|
react_1.default.createElement(lucide_react_1.Pencil, { size: 17 }),
|
|
75
209
|
" Edit")),
|
|
76
210
|
row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, onClick: function () {
|
|
77
|
-
|
|
78
|
-
|
|
211
|
+
var _a;
|
|
212
|
+
(_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
|
|
213
|
+
// handleClose();
|
|
79
214
|
} },
|
|
80
215
|
react_1.default.createElement(lucide_react_1.Trash2, { size: 17 }),
|
|
81
|
-
" Delete"))
|
|
216
|
+
" Delete")),
|
|
217
|
+
!row.onLink && !row.onEdit && !row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center" }, "No actions")))))))));
|
|
82
218
|
};
|
|
83
219
|
exports.default = TableActions;
|