pixelize-design-library 2.1.59 → 2.1.61
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.
|
@@ -96,6 +96,119 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
96
96
|
// );
|
|
97
97
|
// };
|
|
98
98
|
// export default TableActions;
|
|
99
|
+
// import React, { useEffect, useRef, useState } from "react";
|
|
100
|
+
// import {
|
|
101
|
+
// Button,
|
|
102
|
+
// IconButton,
|
|
103
|
+
// Popover,
|
|
104
|
+
// PopoverBody,
|
|
105
|
+
// PopoverContent,
|
|
106
|
+
// PopoverTrigger,
|
|
107
|
+
// Portal,
|
|
108
|
+
// VStack,
|
|
109
|
+
// } from "@chakra-ui/react";
|
|
110
|
+
// import { EllipsisVertical, ExternalLink, Pencil, Trash2 } from "lucide-react";
|
|
111
|
+
// const TableActions = ({ row }: any) => {
|
|
112
|
+
// const [isOpen, setIsOpen] = useState(false);
|
|
113
|
+
// const ref = useRef<HTMLDivElement>(null);
|
|
114
|
+
// // Listen for "close-all-popovers"
|
|
115
|
+
// useEffect(() => {
|
|
116
|
+
// const handler = () => setIsOpen(false);
|
|
117
|
+
// window.addEventListener("close-all-popovers", handler);
|
|
118
|
+
// return () => window.removeEventListener("close-all-popovers", handler);
|
|
119
|
+
// }, []);
|
|
120
|
+
// useEffect(() => {
|
|
121
|
+
// const handleClickOutside = (event: MouseEvent) => {
|
|
122
|
+
// if (ref.current && !ref.current.contains(event.target as Node)) {
|
|
123
|
+
// setIsOpen(false);
|
|
124
|
+
// }
|
|
125
|
+
// };
|
|
126
|
+
// if (isOpen) {
|
|
127
|
+
// document.addEventListener("mousedown", handleClickOutside);
|
|
128
|
+
// }
|
|
129
|
+
// return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
130
|
+
// }, [isOpen]);
|
|
131
|
+
// const handleOpen = () => {
|
|
132
|
+
// // Close all others first
|
|
133
|
+
// window.dispatchEvent(new Event("close-all-popovers"));
|
|
134
|
+
// setIsOpen(true);
|
|
135
|
+
// };
|
|
136
|
+
// const handleClose = () => setIsOpen(false);
|
|
137
|
+
// return (
|
|
138
|
+
// <Popover
|
|
139
|
+
// placement="bottom-start"
|
|
140
|
+
// isOpen={isOpen}
|
|
141
|
+
// onOpen={handleOpen}
|
|
142
|
+
// onClose={handleClose}
|
|
143
|
+
// closeOnBlur
|
|
144
|
+
// >
|
|
145
|
+
// <PopoverTrigger>
|
|
146
|
+
// <IconButton
|
|
147
|
+
// aria-label="Link"
|
|
148
|
+
// color="black"
|
|
149
|
+
// icon={<EllipsisVertical size={17} />}
|
|
150
|
+
// size="sm"
|
|
151
|
+
// p={0}
|
|
152
|
+
// variant="ghost"
|
|
153
|
+
// _hover={{ transform: "scale(1.2)" }}
|
|
154
|
+
// onClick={() => (isOpen ? handleClose() : handleOpen())}
|
|
155
|
+
// />
|
|
156
|
+
// </PopoverTrigger>
|
|
157
|
+
// <Portal>
|
|
158
|
+
// <PopoverContent w="auto" minW="150px" boxShadow="lg" p={0} zIndex={999}>
|
|
159
|
+
// <PopoverBody>
|
|
160
|
+
// <VStack align="stretch" spacing={1}>
|
|
161
|
+
// {row.onLink && (
|
|
162
|
+
// <Button
|
|
163
|
+
// size="sm"
|
|
164
|
+
// variant="ghost"
|
|
165
|
+
// justifyContent="flex-start"
|
|
166
|
+
// gap={2}
|
|
167
|
+
// onClick={() => {
|
|
168
|
+
// row.onLink(row);
|
|
169
|
+
// handleClose();
|
|
170
|
+
// }}
|
|
171
|
+
// >
|
|
172
|
+
// <ExternalLink size={17} /> View
|
|
173
|
+
// </Button>
|
|
174
|
+
// )}
|
|
175
|
+
// {row.onEdit && (
|
|
176
|
+
// <Button
|
|
177
|
+
// size="sm"
|
|
178
|
+
// variant="ghost"
|
|
179
|
+
// justifyContent="flex-start"
|
|
180
|
+
// gap={2}
|
|
181
|
+
// onClick={() => {
|
|
182
|
+
// row.onEdit(row);
|
|
183
|
+
// handleClose();
|
|
184
|
+
// }}
|
|
185
|
+
// >
|
|
186
|
+
// <Pencil size={17} /> Edit
|
|
187
|
+
// </Button>
|
|
188
|
+
// )}
|
|
189
|
+
// {row.onDelete && (
|
|
190
|
+
// <Button
|
|
191
|
+
// size="sm"
|
|
192
|
+
// variant="ghost"
|
|
193
|
+
// justifyContent="flex-start"
|
|
194
|
+
// colorScheme="red"
|
|
195
|
+
// gap={2}
|
|
196
|
+
// onClick={() => {
|
|
197
|
+
// row.onDelete(row);
|
|
198
|
+
// handleClose();
|
|
199
|
+
// }}
|
|
200
|
+
// >
|
|
201
|
+
// <Trash2 size={17} /> Delete
|
|
202
|
+
// </Button>
|
|
203
|
+
// )}
|
|
204
|
+
// </VStack>
|
|
205
|
+
// </PopoverBody>
|
|
206
|
+
// </PopoverContent>
|
|
207
|
+
// </Portal>
|
|
208
|
+
// </Popover>
|
|
209
|
+
// );
|
|
210
|
+
// };
|
|
211
|
+
// export default TableActions;
|
|
99
212
|
var react_1 = __importStar(require("react"));
|
|
100
213
|
var react_2 = require("@chakra-ui/react");
|
|
101
214
|
var lucide_react_1 = require("lucide-react");
|
|
@@ -109,6 +222,7 @@ var TableActions = function (_a) {
|
|
|
109
222
|
window.addEventListener("close-all-popovers", handler);
|
|
110
223
|
return function () { return window.removeEventListener("close-all-popovers", handler); };
|
|
111
224
|
}, []);
|
|
225
|
+
// Detect outside click
|
|
112
226
|
(0, react_1.useEffect)(function () {
|
|
113
227
|
var handleClickOutside = function (event) {
|
|
114
228
|
if (ref.current && !ref.current.contains(event.target)) {
|
|
@@ -121,35 +235,35 @@ var TableActions = function (_a) {
|
|
|
121
235
|
return function () { return document.removeEventListener("mousedown", handleClickOutside); };
|
|
122
236
|
}, [isOpen]);
|
|
123
237
|
var handleOpen = function () {
|
|
124
|
-
//
|
|
125
|
-
window.dispatchEvent(new Event("close-all-popovers"));
|
|
238
|
+
window.dispatchEvent(new Event("close-all-popovers")); // close others
|
|
126
239
|
setIsOpen(true);
|
|
127
240
|
};
|
|
128
241
|
var handleClose = function () { return setIsOpen(false); };
|
|
129
|
-
return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start", isOpen: isOpen,
|
|
130
|
-
react_1.default.createElement(
|
|
131
|
-
react_1.default.createElement(react_2.
|
|
132
|
-
|
|
133
|
-
react_1.default.createElement(react_2.
|
|
134
|
-
react_1.default.createElement(react_2.
|
|
135
|
-
react_1.default.createElement(react_2.
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
242
|
+
return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false },
|
|
243
|
+
react_1.default.createElement("div", { ref: ref },
|
|
244
|
+
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
245
|
+
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()); } })),
|
|
246
|
+
react_1.default.createElement(react_2.Portal, null,
|
|
247
|
+
react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "150px", boxShadow: "lg", p: 0, zIndex: 999 },
|
|
248
|
+
react_1.default.createElement(react_2.PopoverBody, null,
|
|
249
|
+
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1 },
|
|
250
|
+
row.onLink && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
|
|
251
|
+
row.onLink(row);
|
|
252
|
+
handleClose();
|
|
253
|
+
} },
|
|
254
|
+
react_1.default.createElement(lucide_react_1.ExternalLink, { size: 17 }),
|
|
255
|
+
" View")),
|
|
256
|
+
row.onEdit && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
|
|
257
|
+
row.onEdit(row);
|
|
258
|
+
handleClose();
|
|
259
|
+
} },
|
|
260
|
+
react_1.default.createElement(lucide_react_1.Pencil, { size: 17 }),
|
|
261
|
+
" Edit")),
|
|
262
|
+
row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, onClick: function () {
|
|
263
|
+
row.onDelete(row);
|
|
264
|
+
handleClose();
|
|
265
|
+
} },
|
|
266
|
+
react_1.default.createElement(lucide_react_1.Trash2, { size: 17 }),
|
|
267
|
+
" Delete")))))))));
|
|
154
268
|
};
|
|
155
269
|
exports.default = TableActions;
|