pixelize-design-library 2.1.61 → 2.1.63
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");
|
|
@@ -57,6 +57,7 @@ var ManageColumns = function (_a) {
|
|
|
57
57
|
var _b = (0, react_1.useState)(columns.map(function (o) { return (__assign(__assign({}, o), { isHidden: !o.isHidden })); })), items = _b[0], setItems = _b[1];
|
|
58
58
|
var _c = (0, react_1.useState)(""), searchTerm = _c[0], setSearchTerm = _c[1];
|
|
59
59
|
var _d = (0, react_1.useState)(null), draggedItemIndex = _d[0], setDraggedItemIndex = _d[1];
|
|
60
|
+
var _e = (0, react_1.useState)(null), error = _e[0], setError = _e[1];
|
|
60
61
|
(0, react_1.useImperativeHandle)(childInputMethodsRef, function () {
|
|
61
62
|
return {
|
|
62
63
|
getManageColumnsData: function () {
|
|
@@ -83,8 +84,14 @@ var ManageColumns = function (_a) {
|
|
|
83
84
|
};
|
|
84
85
|
var toggleCheckbox = function (index) {
|
|
85
86
|
var newItems = __spreadArray([], items, true);
|
|
87
|
+
var visibleCount = newItems.filter(function (i) { return i.isHidden; }).length;
|
|
88
|
+
if (visibleCount === 1 && newItems[index].isHidden) {
|
|
89
|
+
setError("At least one column must remain visible.");
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
86
92
|
newItems[index].isHidden = !newItems[index].isHidden;
|
|
87
93
|
setItems(newItems);
|
|
94
|
+
setError(null);
|
|
88
95
|
};
|
|
89
96
|
var filteredItems = items.filter(function (item) {
|
|
90
97
|
return item.label.toString().toLowerCase().includes(searchTerm.toLowerCase());
|
|
@@ -92,16 +99,18 @@ var ManageColumns = function (_a) {
|
|
|
92
99
|
return (react_1.default.createElement(react_2.Box, { mt: "5" },
|
|
93
100
|
react_1.default.createElement(react_2.Input, { placeholder: "Search", mb: "4", value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); } }),
|
|
94
101
|
!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 () {
|
|
102
|
+
react_1.default.createElement(Checkbox_1.default, { label: "Select all", isChecked: items.every(function (item) { return item.isHidden; }), onChange: function () {
|
|
96
103
|
var allChecked = items.every(function (item) { return item.isHidden; });
|
|
104
|
+
if (allChecked) {
|
|
105
|
+
setError("At least one column must remain visible.");
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
97
108
|
setItems(items.map(function (item) { return (__assign(__assign({}, item), { isHidden: !allChecked })); }));
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
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",
|
|
109
|
+
setError(null);
|
|
110
|
+
} }))),
|
|
111
|
+
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", borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14 },
|
|
101
112
|
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
|
-
|
|
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")))));
|
|
113
|
+
react_1.default.createElement(Checkbox_1.default, { isChecked: item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(index); }, sx: { marginRight: "4" } }))); })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center" }, "No items found"))),
|
|
114
|
+
error && (react_1.default.createElement(react_2.Text, { color: "red.500", mt: "3", fontSize: "sm" }, error))));
|
|
106
115
|
};
|
|
107
116
|
exports.default = ManageColumns;
|