pixelize-design-library 2.2.154 → 2.2.155
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.
|
@@ -35,15 +35,21 @@ var useTable = function (_a) {
|
|
|
35
35
|
var _f = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _f[0], setRowsPerPage = _f[1];
|
|
36
36
|
var tableData = (0, react_1.useMemo)(function () { return data; }, [data]);
|
|
37
37
|
var _g = (0, react_1.useState)(tableData), filteredData = _g[0], setFilteredData = _g[1];
|
|
38
|
-
var _h = (0, react_1.useState)(
|
|
38
|
+
var _h = (0, react_1.useState)(function () {
|
|
39
|
+
return columns.map(function (col) { return (__assign({}, col)); });
|
|
40
|
+
}), columnsList = _h[0], setColumnsList = _h[1];
|
|
39
41
|
(0, react_1.useEffect)(function () {
|
|
40
42
|
if (tablePreferences) {
|
|
41
|
-
var
|
|
42
|
-
if (
|
|
43
|
-
|
|
43
|
+
var columnPreference_1 = tablePreferences.columns;
|
|
44
|
+
if (columnPreference_1 === null || columnPreference_1 === void 0 ? void 0 : columnPreference_1.length) {
|
|
45
|
+
var mergedColumns = columns.map(function (originalCol) {
|
|
46
|
+
var prefCol = columnPreference_1.find(function (c) { return c.id === originalCol.id; });
|
|
47
|
+
return prefCol ? __assign(__assign({}, originalCol), prefCol) : __assign({}, originalCol);
|
|
48
|
+
});
|
|
49
|
+
setColumnsList(mergedColumns);
|
|
44
50
|
}
|
|
45
51
|
}
|
|
46
|
-
}, [tablePreferences]);
|
|
52
|
+
}, [tablePreferences, columns]);
|
|
47
53
|
(0, react_1.useEffect)(function () {
|
|
48
54
|
setFilteredData(tableData);
|
|
49
55
|
}, [tableData]);
|
|
@@ -3,8 +3,10 @@ import { TableProps } from "../TableProps";
|
|
|
3
3
|
type ManageColumnsMethods = {
|
|
4
4
|
getManageColumnsData: () => TableProps["columns"];
|
|
5
5
|
};
|
|
6
|
-
declare const ManageColumns: ({ columns, childInputMethodsRef, }: {
|
|
6
|
+
declare const ManageColumns: ({ columns, items, setItems, childInputMethodsRef, }: {
|
|
7
7
|
columns: TableProps["columns"];
|
|
8
|
+
items: TableProps["columns"];
|
|
9
|
+
setItems: React.Dispatch<React.SetStateAction<TableProps["columns"]>>;
|
|
8
10
|
childInputMethodsRef: React.Ref<ManageColumnsMethods>;
|
|
9
11
|
}) => React.JSX.Element;
|
|
10
12
|
export default ManageColumns;
|
|
@@ -62,13 +62,14 @@ var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
|
|
|
62
62
|
var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
|
|
63
63
|
var lucide_react_1 = require("lucide-react");
|
|
64
64
|
var ManageColumns = function (_a) {
|
|
65
|
-
var columns = _a.columns, childInputMethodsRef = _a.childInputMethodsRef;
|
|
65
|
+
var columns = _a.columns, items = _a.items, setItems = _a.setItems, childInputMethodsRef = _a.childInputMethodsRef;
|
|
66
66
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
67
|
-
|
|
68
|
-
var
|
|
69
|
-
var
|
|
70
|
-
var
|
|
71
|
-
|
|
67
|
+
var _b = (0, react_1.useState)(""), searchTerm = _b[0], setSearchTerm = _b[1];
|
|
68
|
+
var _c = (0, react_1.useState)(null), draggedItemIndex = _c[0], setDraggedItemIndex = _c[1];
|
|
69
|
+
var _d = (0, react_1.useState)(null), error = _d[0], setError = _d[1];
|
|
70
|
+
var visibleCount = (0, react_1.useMemo)(function () {
|
|
71
|
+
return items.filter(function (i) { return !i.isHidden; }).length;
|
|
72
|
+
}, [items]);
|
|
72
73
|
(0, react_1.useImperativeHandle)(childInputMethodsRef, function () {
|
|
73
74
|
return {
|
|
74
75
|
getManageColumnsData: function () {
|
|
@@ -89,12 +90,11 @@ var ManageColumns = function (_a) {
|
|
|
89
90
|
setItems(newItems);
|
|
90
91
|
};
|
|
91
92
|
var handleDragEnd = function () { return setDraggedItemIndex(null); };
|
|
92
|
-
// ✅ Prevent unchecking last visible column
|
|
93
93
|
var toggleCheckbox = function (index) {
|
|
94
94
|
var newItems = __spreadArray([], items, true);
|
|
95
|
-
var
|
|
96
|
-
if (!newItems[index].isHidden &&
|
|
97
|
-
setError("At least
|
|
95
|
+
var currentVisibleCount = newItems.filter(function (i) { return !i.isHidden; }).length;
|
|
96
|
+
if (!newItems[index].isHidden && currentVisibleCount === 2) {
|
|
97
|
+
setError("At least two columns must remain visible.");
|
|
98
98
|
return;
|
|
99
99
|
}
|
|
100
100
|
newItems[index].isHidden = !newItems[index].isHidden;
|
|
@@ -104,28 +104,71 @@ var ManageColumns = function (_a) {
|
|
|
104
104
|
var filteredItems = items.filter(function (item) {
|
|
105
105
|
return item.label.toString().toLowerCase().includes(searchTerm.toLowerCase());
|
|
106
106
|
});
|
|
107
|
-
// ✅ Select all logic
|
|
108
107
|
var allChecked = items.every(function (item) { return !item.isHidden; });
|
|
109
108
|
var someChecked = items.some(function (item) { return !item.isHidden; }) && !allChecked;
|
|
110
109
|
var handleSelectAll = function () {
|
|
111
110
|
if (allChecked) {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
setError("At least one column must remain visible.");
|
|
111
|
+
setItems(items.map(function (item, i) { return (__assign(__assign({}, item), { isHidden: i >= 2 ? true : false })); }));
|
|
112
|
+
setError("At least two columns must remain visible.");
|
|
115
113
|
}
|
|
116
114
|
else {
|
|
117
|
-
// make all visible
|
|
118
115
|
setItems(items.map(function (item) { return (__assign(__assign({}, item), { isHidden: false })); }));
|
|
119
116
|
setError(null);
|
|
120
117
|
}
|
|
121
118
|
};
|
|
122
119
|
return (react_1.default.createElement(react_2.Box, { mt: "5" },
|
|
123
|
-
react_1.default.createElement(react_2.
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
react_1.default.createElement(
|
|
128
|
-
|
|
129
|
-
|
|
120
|
+
error && (react_1.default.createElement(react_2.Box, { mb: "4", p: 3, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200] },
|
|
121
|
+
react_1.default.createElement(react_2.Text, { color: theme.colors.red[600], fontSize: "sm", fontWeight: 500 }, error))),
|
|
122
|
+
react_1.default.createElement(react_2.Input, { placeholder: "Search columns...", mb: "4", value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, size: "md", borderRadius: "md" }),
|
|
123
|
+
!searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: "3", bg: theme.colors.gray[100], p: 2, borderRadius: "md" },
|
|
124
|
+
react_1.default.createElement(Checkbox_1.default, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }))),
|
|
125
|
+
react_1.default.createElement(react_2.List, { spacing: "2", maxH: "300px", overflowY: "auto", sx: {
|
|
126
|
+
'&::-webkit-scrollbar': {
|
|
127
|
+
width: '3px',
|
|
128
|
+
height: '3px',
|
|
129
|
+
},
|
|
130
|
+
'&::-webkit-scrollbar-track': {
|
|
131
|
+
background: theme.colors.gray[100],
|
|
132
|
+
borderRadius: '2px',
|
|
133
|
+
},
|
|
134
|
+
'&::-webkit-scrollbar-thumb': {
|
|
135
|
+
background: theme.colors.gray[400],
|
|
136
|
+
borderRadius: '2px',
|
|
137
|
+
},
|
|
138
|
+
'&::-webkit-scrollbar-thumb:hover': {
|
|
139
|
+
background: theme.colors.gray[500],
|
|
140
|
+
},
|
|
141
|
+
scrollbarWidth: 'thin',
|
|
142
|
+
scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
|
|
143
|
+
} }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) {
|
|
144
|
+
var isDraggingThisItem = draggedItemIndex === index;
|
|
145
|
+
var isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
|
|
146
|
+
return (react_1.default.createElement(react_2.ListItem, { key: "".concat(item.id, "-").concat(index), draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: isDraggingThisItem
|
|
147
|
+
? theme.colors.primary[100]
|
|
148
|
+
: isDropZone
|
|
149
|
+
? theme.colors.primary[50]
|
|
150
|
+
: theme.colors.white, display: "flex", alignItems: "center", borderRadius: "md", border: "2px solid", borderColor: isDraggingThisItem
|
|
151
|
+
? theme.colors.primary[400]
|
|
152
|
+
: isDropZone
|
|
153
|
+
? theme.colors.primary[300]
|
|
154
|
+
: theme.colors.border[200], cursor: "grab", position: "relative", fontSize: 14, px: "3", py: "2", transition: "all 0.2s ease", _hover: {
|
|
155
|
+
bg: theme.colors.gray[50],
|
|
156
|
+
borderColor: theme.colors.primary[300],
|
|
157
|
+
boxShadow: theme.shadows.sm,
|
|
158
|
+
}, _active: {
|
|
159
|
+
cursor: "grabbing",
|
|
160
|
+
} },
|
|
161
|
+
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: "2", color: theme.colors.gray[400], _hover: {
|
|
162
|
+
color: theme.colors.primary[500],
|
|
163
|
+
bg: "transparent",
|
|
164
|
+
} }),
|
|
165
|
+
react_1.default.createElement(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(index); }, sx: { marginRight: "4" } })));
|
|
166
|
+
})) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center", py: 8 }, "No columns found"))),
|
|
167
|
+
react_1.default.createElement(react_2.Flex, { justify: "space-between", align: "center", mt: "4", bg: theme.colors.gray[50], p: 3, borderRadius: "md" },
|
|
168
|
+
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[600], fontWeight: 500 },
|
|
169
|
+
visibleCount,
|
|
170
|
+
" of ",
|
|
171
|
+
items.length,
|
|
172
|
+
" columns visible"))));
|
|
130
173
|
};
|
|
131
174
|
exports.default = ManageColumns;
|
|
@@ -38,52 +38,86 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
39
|
var react_1 = require("@chakra-ui/react");
|
|
40
40
|
var react_2 = __importStar(require("react"));
|
|
41
|
+
var framer_motion_1 = require("framer-motion");
|
|
41
42
|
var ManageColumns_1 = __importDefault(require("./ManageColumns"));
|
|
42
43
|
var Button_1 = __importDefault(require("../../Button/Button"));
|
|
43
44
|
var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
|
|
44
45
|
var lucide_react_1 = require("lucide-react");
|
|
45
46
|
var TableFilters_1 = __importDefault(require("./TableFilters"));
|
|
47
|
+
var MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
|
|
46
48
|
var TableSettings = function (_a) {
|
|
47
|
-
var _b, _c;
|
|
49
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
48
50
|
var columns = _a.columns, onSave = _a.onSave, tableSettings = _a.tableSettings;
|
|
49
51
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
50
52
|
var childInputMethodsRef = (0, react_2.useRef)({});
|
|
51
53
|
var childFilterMethodsRef = (0, react_2.useRef)(null);
|
|
52
|
-
var
|
|
53
|
-
var
|
|
54
|
+
var _m = (0, react_2.useState)(false), settingsOpen = _m[0], setSettingsOpen = _m[1];
|
|
55
|
+
var _o = (0, react_2.useState)(0), selectedIndex = _o[0], setSelectedIndex = _o[1];
|
|
56
|
+
var _p = (0, react_2.useState)(columns), items = _p[0], setItems = _p[1];
|
|
54
57
|
var filters = (0, react_2.useMemo)(function () {
|
|
55
58
|
var _a;
|
|
56
59
|
return (_a = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters) !== null && _a !== void 0 ? _a : [];
|
|
57
60
|
}, [tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters]);
|
|
58
61
|
var handleSave = (0, react_2.useCallback)(function () {
|
|
59
|
-
var _a, _b, _c, _d
|
|
60
|
-
onSave(
|
|
61
|
-
(
|
|
62
|
+
var _a, _b, _c, _d;
|
|
63
|
+
onSave(items);
|
|
64
|
+
(_a = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.onFilterSelection) === null || _a === void 0 ? void 0 : _a.call(tableSettings, (_d = (_c = (_b = childFilterMethodsRef.current) === null || _b === void 0 ? void 0 : _b.getSelectedFilters) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : []);
|
|
62
65
|
setSettingsOpen(false);
|
|
63
|
-
}, [onSave, tableSettings]);
|
|
66
|
+
}, [onSave, tableSettings, items]);
|
|
67
|
+
var handleOpen = (0, react_2.useCallback)(function () {
|
|
68
|
+
setItems(columns);
|
|
69
|
+
setSettingsOpen(true);
|
|
70
|
+
}, [columns]);
|
|
64
71
|
return (react_2.default.createElement(react_1.Box, null,
|
|
65
|
-
react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer" },
|
|
66
|
-
react_2.default.createElement(lucide_react_1.Settings, { onClick:
|
|
72
|
+
react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", _hover: { transform: "scale(1.1)" } },
|
|
73
|
+
react_2.default.createElement(lucide_react_1.Settings, { onClick: handleOpen, size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] })),
|
|
67
74
|
react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
|
|
68
75
|
react_2.default.createElement(react_1.ModalOverlay, null),
|
|
69
|
-
react_2.default.createElement(
|
|
70
|
-
react_2.default.createElement(react_1.ModalHeader,
|
|
76
|
+
react_2.default.createElement(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "0", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "2px 3px", minW: "700px", minH: "600px", bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50] },
|
|
77
|
+
react_2.default.createElement(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.border) === null || _g === void 0 ? void 0 : _g[200], pb: 3 },
|
|
78
|
+
react_2.default.createElement(react_1.Text, { fontWeight: 600, fontSize: "lg" }, "Table Settings")),
|
|
71
79
|
react_2.default.createElement(react_1.ModalCloseButton, null),
|
|
72
|
-
react_2.default.createElement(react_1.ModalBody,
|
|
80
|
+
react_2.default.createElement(react_1.ModalBody, { py: 4 },
|
|
73
81
|
react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, orientation: "vertical", variant: "unstyled" },
|
|
74
|
-
react_2.default.createElement(react_1.TabList, { whiteSpace: "nowrap", minWidth: 160, height: "fit-content", borderRight: "1px solid", borderColor:
|
|
82
|
+
react_2.default.createElement(react_1.TabList, { whiteSpace: "nowrap", minWidth: 160, height: "fit-content", borderRight: "1px solid", borderColor: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.border) === null || _j === void 0 ? void 0 : _j[200], pr: 2 },
|
|
75
83
|
filters && filters.length > 0 && (react_2.default.createElement(react_1.Tab, { borderLeft: "2px solid transparent", _selected: {
|
|
76
84
|
borderLeft: "2px solid ".concat(theme.colors.primary[600]),
|
|
77
|
-
|
|
85
|
+
bg: theme.colors.primary[50],
|
|
86
|
+
fontWeight: 600,
|
|
87
|
+
}, _hover: {
|
|
88
|
+
bg: theme.colors.gray[100],
|
|
89
|
+
}, fontSize: "14px", justifyContent: "flex-start", py: 2, borderRadius: "md", mb: 1 }, "Filters")),
|
|
78
90
|
react_2.default.createElement(react_1.Tab, { borderLeft: "2px solid transparent", _selected: {
|
|
79
91
|
borderLeft: "2px solid ".concat(theme.colors.primary[600]),
|
|
80
|
-
|
|
81
|
-
|
|
92
|
+
bg: theme.colors.primary[50],
|
|
93
|
+
fontWeight: 600,
|
|
94
|
+
}, _hover: {
|
|
95
|
+
bg: theme.colors.gray[100],
|
|
96
|
+
}, fontSize: "14px", justifyContent: "flex-start", py: 2, borderRadius: "md", mb: 1 }, "Manage columns")),
|
|
97
|
+
react_2.default.createElement(react_1.TabPanels, { pl: 4, maxH: "450px", overflowY: "auto", backgroundColor: theme.colors.gray[50], borderRadius: "md", sx: {
|
|
98
|
+
'&::-webkit-scrollbar': {
|
|
99
|
+
width: '3px',
|
|
100
|
+
height: '3px',
|
|
101
|
+
},
|
|
102
|
+
'&::-webkit-scrollbar-track': {
|
|
103
|
+
background: theme.colors.gray[100],
|
|
104
|
+
borderRadius: '2px',
|
|
105
|
+
},
|
|
106
|
+
'&::-webkit-scrollbar-thumb': {
|
|
107
|
+
background: theme.colors.gray[400],
|
|
108
|
+
borderRadius: '2px',
|
|
109
|
+
},
|
|
110
|
+
'&::-webkit-scrollbar-thumb:hover': {
|
|
111
|
+
background: theme.colors.gray[500],
|
|
112
|
+
},
|
|
113
|
+
scrollbarWidth: 'thin',
|
|
114
|
+
scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
|
|
115
|
+
} },
|
|
82
116
|
filters.length > 0 && (react_2.default.createElement(react_1.TabPanel, null,
|
|
83
117
|
react_2.default.createElement(TableFilters_1.default, { filters: filters, childFilterMethodsRef: childFilterMethodsRef, filterSelected: tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filterSelected }))),
|
|
84
118
|
react_2.default.createElement(react_1.TabPanel, null,
|
|
85
|
-
react_2.default.createElement(ManageColumns_1.default, { columns: columns, childInputMethodsRef: childInputMethodsRef }))))),
|
|
86
|
-
react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem" },
|
|
119
|
+
react_2.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }))))),
|
|
120
|
+
react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.border) === null || _l === void 0 ? void 0 : _l[200], pt: 3 },
|
|
87
121
|
react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "gray" }),
|
|
88
122
|
react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))));
|
|
89
123
|
};
|