pixelize-design-library 2.1.61 → 2.1.62
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.
|
@@ -12,7 +12,7 @@ var HelperText_1 = __importDefault(require("../Common/HelperText"));
|
|
|
12
12
|
function CheckBox(_a) {
|
|
13
13
|
var label = _a.label, spacing = _a.spacing, isInvalid = _a.isInvalid, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked, sx = _a.sx, isRequired = _a.isRequired, error = _a.error, errorMessage = _a.errorMessage, isInformation = _a.isInformation, informationMessage = _a.informationMessage, id = _a.id, helperText = _a.helperText;
|
|
14
14
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
15
|
-
return (react_1.default.createElement(
|
|
15
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
16
16
|
react_1.default.createElement(react_2.Checkbox, { spacing: spacing, isInvalid: isInvalid, isRequired: isRequired, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], sx: sx, display: "flex", alignItems: "inherit" }, label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }))),
|
|
17
17
|
error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
|
|
18
18
|
helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
|
|
@@ -1,16 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
// import React 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";
|
|
14
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
15
3
|
if (k2 === undefined) k2 = k;
|
|
16
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -35,180 +23,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
35
23
|
return result;
|
|
36
24
|
};
|
|
37
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
38
|
-
// const TableActions = ({ row }: any) => {
|
|
39
|
-
// return (
|
|
40
|
-
// <Popover placement="bottom-start" closeOnBlur>
|
|
41
|
-
// <PopoverTrigger>
|
|
42
|
-
// <IconButton
|
|
43
|
-
// aria-label="Link"
|
|
44
|
-
// color={"black"}
|
|
45
|
-
// icon={<EllipsisVertical size={17}/>}
|
|
46
|
-
// size="sm"
|
|
47
|
-
// p={0}
|
|
48
|
-
// variant="ghost"
|
|
49
|
-
// _hover={{ transform: "scale(1.2)" }}
|
|
50
|
-
// />
|
|
51
|
-
// </PopoverTrigger>
|
|
52
|
-
// <Portal>
|
|
53
|
-
// <PopoverContent w="auto" minW="150px" boxShadow="lg" p={0} zIndex={999}>
|
|
54
|
-
// <PopoverBody>
|
|
55
|
-
// <VStack align="stretch" spacing={1}>
|
|
56
|
-
// {row.onLink && (
|
|
57
|
-
// <Button
|
|
58
|
-
// size="sm"
|
|
59
|
-
// variant="ghost"
|
|
60
|
-
// justifyContent="flex-start"
|
|
61
|
-
// gap={2}
|
|
62
|
-
// onClick={() => row?.onLink(row)}
|
|
63
|
-
// >
|
|
64
|
-
// <ExternalLink size={17}/> View
|
|
65
|
-
// </Button>
|
|
66
|
-
// )}
|
|
67
|
-
// {row.onEdit && (
|
|
68
|
-
// <Button
|
|
69
|
-
// size="sm"
|
|
70
|
-
// variant="ghost"
|
|
71
|
-
// justifyContent="flex-start"
|
|
72
|
-
// gap={2}
|
|
73
|
-
// onClick={() => row?.onEdit?.(row)}
|
|
74
|
-
// >
|
|
75
|
-
// <Pencil size={17}/> Edit
|
|
76
|
-
// </Button>
|
|
77
|
-
// )}
|
|
78
|
-
// {row.onDelete && (
|
|
79
|
-
// <Button
|
|
80
|
-
// size="sm"
|
|
81
|
-
// variant="ghost"
|
|
82
|
-
// justifyContent="flex-start"
|
|
83
|
-
// colorScheme="red"
|
|
84
|
-
// gap={2}
|
|
85
|
-
// onClick={() => row?.onDelete?.(row)}
|
|
86
|
-
// >
|
|
87
|
-
// <Trash2 size={17} />
|
|
88
|
-
// Delete
|
|
89
|
-
// </Button>
|
|
90
|
-
// )}
|
|
91
|
-
// </VStack>
|
|
92
|
-
// </PopoverBody>
|
|
93
|
-
// </PopoverContent>
|
|
94
|
-
// </Portal>
|
|
95
|
-
// </Popover>
|
|
96
|
-
// );
|
|
97
|
-
// };
|
|
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;
|
|
212
26
|
var react_1 = __importStar(require("react"));
|
|
213
27
|
var react_2 = require("@chakra-ui/react");
|
|
214
28
|
var lucide_react_1 = require("lucide-react");
|
|
@@ -92,16 +92,16 @@ var ManageColumns = function (_a) {
|
|
|
92
92
|
return (react_1.default.createElement(react_2.Box, { mt: "5" },
|
|
93
93
|
react_1.default.createElement(react_2.Input, { placeholder: "Search", mb: "4", value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); } }),
|
|
94
94
|
!searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: "2" },
|
|
95
|
-
react_1.default.createElement(Checkbox_1.default, { isChecked: items.every(function (item) { return item.isHidden; }), onChange: function () {
|
|
95
|
+
react_1.default.createElement(Checkbox_1.default, { label: "Select all", isChecked: items.every(function (item) { return item.isHidden; }), onChange: function () {
|
|
96
96
|
var allChecked = items.every(function (item) { return item.isHidden; });
|
|
97
97
|
setItems(items.map(function (item) { return (__assign(__assign({}, item), { isHidden: !allChecked })); }));
|
|
98
|
-
} }),
|
|
99
|
-
|
|
100
|
-
|
|
98
|
+
} }))),
|
|
99
|
+
react_1.default.createElement(react_2.List, { spacing: "2" }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) { return (react_1.default.createElement(react_2.ListItem, { key: item.id, draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: theme.colors.gray[50], display: "flex", alignItems: "center",
|
|
100
|
+
// justifyContent="space-between"
|
|
101
|
+
borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14 },
|
|
101
102
|
react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, null), variant: "ghost", cursor: "grab", mr: "1" }),
|
|
102
|
-
react_1.default.createElement(Checkbox_1.default, { isChecked: item.isHidden, onChange: function () { return toggleCheckbox(index); }, sx: {
|
|
103
|
+
react_1.default.createElement(Checkbox_1.default, { isChecked: item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(index); }, sx: {
|
|
103
104
|
marginRight: "4",
|
|
104
|
-
} }),
|
|
105
|
-
react_1.default.createElement(react_2.Text, { flex: "1" }, item.label))); })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center" }, "No items found")))));
|
|
105
|
+
} }))); })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center" }, "No items found")))));
|
|
106
106
|
};
|
|
107
107
|
exports.default = ManageColumns;
|