pixelize-design-library 2.2.159 → 2.2.160
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.
- package/dist/Components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/Components/Checkbox/Checkbox.js +20 -12
- package/dist/Components/Checkbox/CheckboxProps.d.ts +1 -0
- package/dist/Components/Table/TableSettings/ManageColumns.js +42 -53
- package/dist/Components/Table/TableSettings/TableFilters.d.ts +1 -1
- package/dist/Components/Table/TableSettings/TableFilters.js +10 -20
- package/dist/Components/Table/TableSettings/TableSettings.js +56 -39
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { CheckboxProps } from "./CheckboxProps";
|
|
3
|
-
export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, isRequired, error, errorMessage, isInformation, informationMessage, id, helperText, onClick, }: CheckboxProps): React.JSX.Element;
|
|
3
|
+
export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, isRequired, error, errorMessage, isInformation, informationMessage, id, helperText, onClick, labelSx, }: CheckboxProps): React.JSX.Element;
|
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
15
|
};
|
|
@@ -10,21 +21,18 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
|
10
21
|
var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
|
|
11
22
|
var HelperText_1 = __importDefault(require("../Common/HelperText"));
|
|
12
23
|
function CheckBox(_a) {
|
|
13
|
-
var label = _a.label, labelFontSize = _a.labelFontSize, showLabelTooltip = _a.showLabelTooltip, labelTooltip = _a.labelTooltip, labelClampLines = _a.labelClampLines, 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,
|
|
24
|
+
var label = _a.label, labelFontSize = _a.labelFontSize, showLabelTooltip = _a.showLabelTooltip, labelTooltip = _a.labelTooltip, labelClampLines = _a.labelClampLines, 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, _b = _a.size, size = _b === void 0 ? "md" : _b, 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, onClick = _a.onClick, labelSx = _a.labelSx;
|
|
14
25
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
26
|
+
var controlSize = size === "sm" ? "1rem"
|
|
27
|
+
: size === "md" ? "1.25rem"
|
|
28
|
+
: size === "lg" ? "1.5rem"
|
|
29
|
+
: size; // pass-through if already a CSS value
|
|
15
30
|
var clampStyles = labelClampLines
|
|
16
|
-
? {
|
|
17
|
-
|
|
18
|
-
WebkitLineClamp: labelClampLines,
|
|
19
|
-
WebkitBoxOrient: "vertical",
|
|
20
|
-
overflow: "hidden",
|
|
21
|
-
textOverflow: "ellipsis",
|
|
22
|
-
whiteSpace: "normal",
|
|
23
|
-
}
|
|
24
|
-
: {};
|
|
31
|
+
? __assign({ display: "-webkit-box", WebkitLineClamp: labelClampLines, WebkitBoxOrient: "vertical", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "normal" }, labelSx)
|
|
32
|
+
: __assign({}, labelSx);
|
|
25
33
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
26
|
-
react_1.default.createElement(react_2.Checkbox, { onClick: onClick, spacing: spacing, isInvalid: isInvalid, 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,
|
|
27
|
-
react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.gray[600], fontWeight: 400 }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.gray[600], fontWeight: 400 }, label)))),
|
|
34
|
+
react_1.default.createElement(react_2.Checkbox, { onClick: onClick, spacing: spacing, isInvalid: isInvalid, 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], display: "flex", alignItems: "inherit", sx: __assign(__assign({}, sx), { ".chakra-checkbox__control": { w: controlSize, h: controlSize }, ".chakra-checkbox__label": { ml: 0 } }) }, label && (showLabelTooltip ? (react_1.default.createElement(react_2.Tooltip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
|
|
35
|
+
react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.gray[600], fontWeight: 400, ml: 0 }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.gray[600], fontWeight: 400, ml: 0 }, label)))),
|
|
28
36
|
error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
|
|
29
37
|
helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
|
|
30
38
|
}
|
|
@@ -67,19 +67,11 @@ var ManageColumns = function (_a) {
|
|
|
67
67
|
var _b = (0, react_1.useState)(""), searchTerm = _b[0], setSearchTerm = _b[1];
|
|
68
68
|
var _c = (0, react_1.useState)(null), draggedItemIndex = _c[0], setDraggedItemIndex = _c[1];
|
|
69
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]);
|
|
70
|
+
var visibleCount = (0, react_1.useMemo)(function () { return items.filter(function (i) { return !i.isHidden; }).length; }, [items]);
|
|
73
71
|
(0, react_1.useEffect)(function () {
|
|
74
72
|
setItems(columns);
|
|
75
73
|
}, [columns]);
|
|
76
|
-
(0, react_1.useImperativeHandle)(childInputMethodsRef, function () {
|
|
77
|
-
return {
|
|
78
|
-
getManageColumnsData: function () {
|
|
79
|
-
return items;
|
|
80
|
-
},
|
|
81
|
-
};
|
|
82
|
-
}, [items]);
|
|
74
|
+
(0, react_1.useImperativeHandle)(childInputMethodsRef, function () { return ({ getManageColumnsData: function () { return items; } }); }, [items]);
|
|
83
75
|
var handleDragStart = function (index) { return setDraggedItemIndex(index); };
|
|
84
76
|
var handleDragOver = function (e, index) {
|
|
85
77
|
e.preventDefault();
|
|
@@ -93,14 +85,18 @@ var ManageColumns = function (_a) {
|
|
|
93
85
|
setItems(newItems);
|
|
94
86
|
};
|
|
95
87
|
var handleDragEnd = function () { return setDraggedItemIndex(null); };
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
var
|
|
99
|
-
if (
|
|
88
|
+
// Fix: use the item's actual index in `items`, not the filtered list index
|
|
89
|
+
var toggleCheckbox = function (itemId) {
|
|
90
|
+
var realIndex = items.findIndex(function (i) { return i.id === itemId; });
|
|
91
|
+
if (realIndex === -1)
|
|
92
|
+
return;
|
|
93
|
+
var currentVisibleCount = items.filter(function (i) { return !i.isHidden; }).length;
|
|
94
|
+
if (!items[realIndex].isHidden && currentVisibleCount === 2) {
|
|
100
95
|
setError("At least two columns must remain visible.");
|
|
101
96
|
return;
|
|
102
97
|
}
|
|
103
|
-
newItems
|
|
98
|
+
var newItems = __spreadArray([], items, true);
|
|
99
|
+
newItems[realIndex] = __assign(__assign({}, newItems[realIndex]), { isHidden: !newItems[realIndex].isHidden });
|
|
104
100
|
setItems(newItems);
|
|
105
101
|
setError(null);
|
|
106
102
|
};
|
|
@@ -111,7 +107,7 @@ var ManageColumns = function (_a) {
|
|
|
111
107
|
var someChecked = items.some(function (item) { return !item.isHidden; }) && !allChecked;
|
|
112
108
|
var handleSelectAll = function () {
|
|
113
109
|
if (allChecked) {
|
|
114
|
-
setItems(items.map(function (item, i) { return (__assign(__assign({}, item), { isHidden: i >= 2
|
|
110
|
+
setItems(items.map(function (item, i) { return (__assign(__assign({}, item), { isHidden: i >= 2 })); }));
|
|
115
111
|
setError("At least two columns must remain visible.");
|
|
116
112
|
}
|
|
117
113
|
else {
|
|
@@ -119,59 +115,52 @@ var ManageColumns = function (_a) {
|
|
|
119
115
|
setError(null);
|
|
120
116
|
}
|
|
121
117
|
};
|
|
122
|
-
return (react_1.default.createElement(react_2.Box, { mt:
|
|
123
|
-
error && (react_1.default.createElement(react_2.Box, { mb:
|
|
124
|
-
react_1.default.createElement(react_2.Text, { color: theme.colors.red[600], fontSize: "
|
|
125
|
-
react_1.default.createElement(react_2.Input, { placeholder: "Search columns...", mb:
|
|
126
|
-
!searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb:
|
|
118
|
+
return (react_1.default.createElement(react_2.Box, { mt: 2 },
|
|
119
|
+
error && (react_1.default.createElement(react_2.Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200] },
|
|
120
|
+
react_1.default.createElement(react_2.Text, { color: theme.colors.red[600], fontSize: "xs", fontWeight: 500 }, error))),
|
|
121
|
+
react_1.default.createElement(react_2.Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, size: "sm", borderRadius: "md" }),
|
|
122
|
+
!searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md" },
|
|
127
123
|
react_1.default.createElement(Checkbox_1.default, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }))),
|
|
128
|
-
react_1.default.createElement(react_2.List, { spacing:
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
height: '3px',
|
|
132
|
-
},
|
|
133
|
-
'&::-webkit-scrollbar-track': {
|
|
124
|
+
react_1.default.createElement(react_2.List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: {
|
|
125
|
+
"&::-webkit-scrollbar": { width: "3px", height: "3px" },
|
|
126
|
+
"&::-webkit-scrollbar-track": {
|
|
134
127
|
background: theme.colors.gray[100],
|
|
135
|
-
borderRadius:
|
|
128
|
+
borderRadius: "2px",
|
|
136
129
|
},
|
|
137
|
-
|
|
130
|
+
"&::-webkit-scrollbar-thumb": {
|
|
138
131
|
background: theme.colors.gray[400],
|
|
139
|
-
borderRadius:
|
|
132
|
+
borderRadius: "2px",
|
|
140
133
|
},
|
|
141
|
-
|
|
134
|
+
"&::-webkit-scrollbar-thumb:hover": {
|
|
142
135
|
background: theme.colors.gray[500],
|
|
143
136
|
},
|
|
144
|
-
scrollbarWidth:
|
|
137
|
+
scrollbarWidth: "thin",
|
|
145
138
|
scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
|
|
146
139
|
} }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) {
|
|
147
140
|
var isDraggingThisItem = draggedItemIndex === index;
|
|
148
141
|
var isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
|
|
149
|
-
return (react_1.default.createElement(react_2.ListItem, { key:
|
|
142
|
+
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: isDraggingThisItem
|
|
150
143
|
? theme.colors.primary[100]
|
|
151
144
|
: isDropZone
|
|
152
145
|
? theme.colors.primary[50]
|
|
153
|
-
:
|
|
146
|
+
: "transparent", display: "flex", alignItems: "center", borderRadius: "sm", border: "1px solid", borderColor: isDraggingThisItem
|
|
154
147
|
? theme.colors.primary[400]
|
|
155
|
-
:
|
|
156
|
-
? theme.colors.primary[300]
|
|
157
|
-
: theme.colors.border[200], cursor: "grab", position: "relative", fontSize: 14, px: "3", py: "2", transition: "all 0.2s ease", _hover: {
|
|
148
|
+
: "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
|
|
158
149
|
bg: theme.colors.gray[50],
|
|
159
|
-
borderColor: theme.colors.
|
|
160
|
-
|
|
161
|
-
},
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
react_1.default.createElement(
|
|
165
|
-
color: theme.colors.
|
|
166
|
-
bg: "transparent",
|
|
150
|
+
borderColor: theme.colors.border[200],
|
|
151
|
+
}, _active: { cursor: "grabbing" } },
|
|
152
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, { size: 14 }), variant: "ghost", size: "xs", cursor: "grab", mr: 1, minW: "auto", h: "auto", p: 0,
|
|
153
|
+
// color={theme.colors.gray[300]}
|
|
154
|
+
_hover: { color: theme.colors.gray[500], bg: "transparent" } }),
|
|
155
|
+
react_1.default.createElement(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(item.id); }, size: "sm", labelSx: {
|
|
156
|
+
color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
|
|
167
157
|
} }),
|
|
168
|
-
react_1.default.createElement(
|
|
169
|
-
})) : (react_1.default.createElement(react_2.Text, { color: "gray.
|
|
170
|
-
react_1.default.createElement(react_2.
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
" columns visible"))));
|
|
158
|
+
react_1.default.createElement(react_2.Text, { fontSize: "12px", color: theme.colors.gray[400], ml: 'auto' }, index + 1)));
|
|
159
|
+
})) : (react_1.default.createElement(react_2.Text, { color: "gray.400", textAlign: "center", fontSize: "sm", py: 6 }, "No columns found"))),
|
|
160
|
+
react_1.default.createElement(react_2.Text, { fontSize: "xs", color: theme.colors.gray[400], mt: 2, textAlign: "right" },
|
|
161
|
+
visibleCount,
|
|
162
|
+
" / ",
|
|
163
|
+
items.length,
|
|
164
|
+
" visible")));
|
|
176
165
|
};
|
|
177
166
|
exports.default = ManageColumns;
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
type TableFiltersMethods = {
|
|
3
3
|
getSelectedFilters: () => string[];
|
|
4
4
|
};
|
|
5
|
-
declare const TableFilters: ({ filters, childFilterMethodsRef, filterSelected }: {
|
|
5
|
+
declare const TableFilters: ({ filters, childFilterMethodsRef, filterSelected, }: {
|
|
6
6
|
filters?: string[];
|
|
7
7
|
childFilterMethodsRef?: React.Ref<TableFiltersMethods>;
|
|
8
8
|
filterSelected?: string[];
|
|
@@ -54,26 +54,16 @@ var TableFilters = function (_a) {
|
|
|
54
54
|
(0, react_2.useEffect)(function () {
|
|
55
55
|
setSelectedFilters(filterSelected !== null && filterSelected !== void 0 ? filterSelected : []);
|
|
56
56
|
}, [filterSelected]);
|
|
57
|
-
(0, react_2.useImperativeHandle)(childFilterMethodsRef, function () {
|
|
58
|
-
return
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
},
|
|
62
|
-
};
|
|
63
|
-
}, [selectedFilters]);
|
|
64
|
-
if (!filters)
|
|
57
|
+
(0, react_2.useImperativeHandle)(childFilterMethodsRef, function () { return ({
|
|
58
|
+
getSelectedFilters: function () { return selectedFilters; },
|
|
59
|
+
}); }, [selectedFilters]);
|
|
60
|
+
if (!(filters === null || filters === void 0 ? void 0 : filters.length))
|
|
65
61
|
return null;
|
|
66
|
-
return (react_2.default.createElement(react_1.Box, { display: "flex", flexDirection: "column", gap: "0.
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
73
|
-
else {
|
|
74
|
-
setSelectedFilters(selectedFilters.filter(function (filter) { return filter !== value; }));
|
|
75
|
-
}
|
|
76
|
-
}, label: value })));
|
|
77
|
-
})));
|
|
62
|
+
return (react_2.default.createElement(react_1.Box, { display: "flex", flexDirection: "column", gap: "0.375rem" }, filters.map(function (value) { return (react_2.default.createElement(Checkbox_1.default, { key: value, value: value, isChecked: selectedFilters.includes(value), onChange: function (e) {
|
|
63
|
+
setSelectedFilters(function (prev) {
|
|
64
|
+
return e.target.checked
|
|
65
|
+
? __spreadArray(__spreadArray([], prev, true), [value], false) : prev.filter(function (f) { return f !== value; });
|
|
66
|
+
});
|
|
67
|
+
}, label: value })); })));
|
|
78
68
|
};
|
|
79
69
|
exports.default = TableFilters;
|
|
@@ -46,14 +46,14 @@ var lucide_react_1 = require("lucide-react");
|
|
|
46
46
|
var TableFilters_1 = __importDefault(require("./TableFilters"));
|
|
47
47
|
var MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
|
|
48
48
|
var TableSettings = function (_a) {
|
|
49
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
49
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
50
50
|
var columns = _a.columns, onSave = _a.onSave, tableSettings = _a.tableSettings;
|
|
51
51
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
52
52
|
var childInputMethodsRef = (0, react_2.useRef)({});
|
|
53
53
|
var childFilterMethodsRef = (0, react_2.useRef)(null);
|
|
54
|
-
var
|
|
55
|
-
var
|
|
56
|
-
var
|
|
54
|
+
var _t = (0, react_2.useState)(false), settingsOpen = _t[0], setSettingsOpen = _t[1];
|
|
55
|
+
var _u = (0, react_2.useState)(0), selectedIndex = _u[0], setSelectedIndex = _u[1];
|
|
56
|
+
var _v = (0, react_2.useState)(columns), items = _v[0], setItems = _v[1];
|
|
57
57
|
var filters = (0, react_2.useMemo)(function () {
|
|
58
58
|
var _a;
|
|
59
59
|
return (_a = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters) !== null && _a !== void 0 ? _a : [];
|
|
@@ -73,52 +73,69 @@ var TableSettings = function (_a) {
|
|
|
73
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] })),
|
|
74
74
|
react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
|
|
75
75
|
react_2.default.createElement(react_1.ModalOverlay, null),
|
|
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: "
|
|
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:
|
|
78
|
-
react_2.default.createElement(react_1.Text, { fontWeight: 600, fontSize: "
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
borderLeft: "2px solid ".concat(theme.colors.primary[600]),
|
|
85
|
-
bg: theme.colors.primary[50],
|
|
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: "0", minW: "620px", minH: "520px", bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50], overflow: "hidden" },
|
|
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: 0, pt: 4, px: 4 },
|
|
78
|
+
react_2.default.createElement(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3 }, "Table Settings"),
|
|
79
|
+
react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled" },
|
|
80
|
+
react_2.default.createElement(react_1.TabList, { gap: 0, borderBottom: "none" },
|
|
81
|
+
filters && filters.length > 0 && (react_2.default.createElement(react_1.Tab, { fontSize: "13px", fontWeight: 500, px: 4, py: 2, borderBottom: "2px solid transparent", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.text) === null || _j === void 0 ? void 0 : _j[400], _selected: {
|
|
82
|
+
borderBottom: "2px solid ".concat(theme.colors.primary[600]),
|
|
83
|
+
color: theme.colors.primary[600],
|
|
86
84
|
fontWeight: 600,
|
|
87
85
|
}, _hover: {
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
react_2.default.createElement(react_1.Tab, {
|
|
91
|
-
|
|
92
|
-
|
|
86
|
+
color: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.text) === null || _l === void 0 ? void 0 : _l[600],
|
|
87
|
+
} }, "Filters")),
|
|
88
|
+
react_2.default.createElement(react_1.Tab, { fontSize: "13px", fontWeight: 500, px: 4, py: 2, borderBottom: "2px solid transparent", color: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.text) === null || _o === void 0 ? void 0 : _o[400], _selected: {
|
|
89
|
+
borderBottom: "2px solid ".concat(theme.colors.primary[600]),
|
|
90
|
+
color: theme.colors.primary[600],
|
|
93
91
|
fontWeight: 600,
|
|
94
92
|
}, _hover: {
|
|
95
|
-
|
|
96
|
-
}
|
|
97
|
-
react_2.default.createElement(react_1.
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
},
|
|
102
|
-
'&::-webkit-scrollbar-track': {
|
|
93
|
+
color: (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.text) === null || _q === void 0 ? void 0 : _q[600],
|
|
94
|
+
} }, "Manage Columns")),
|
|
95
|
+
react_2.default.createElement(react_1.ModalCloseButton, { top: 3, right: 3 }),
|
|
96
|
+
react_2.default.createElement(react_1.ModalBody, { px: 4, py: 3, maxH: "420px", overflowY: "auto", sx: {
|
|
97
|
+
"&::-webkit-scrollbar": { width: "3px", height: "3px" },
|
|
98
|
+
"&::-webkit-scrollbar-track": {
|
|
103
99
|
background: theme.colors.gray[100],
|
|
104
|
-
borderRadius:
|
|
100
|
+
borderRadius: "2px",
|
|
105
101
|
},
|
|
106
|
-
|
|
102
|
+
"&::-webkit-scrollbar-thumb": {
|
|
107
103
|
background: theme.colors.gray[400],
|
|
108
|
-
borderRadius:
|
|
104
|
+
borderRadius: "2px",
|
|
109
105
|
},
|
|
110
|
-
|
|
106
|
+
"&::-webkit-scrollbar-thumb:hover": {
|
|
111
107
|
background: theme.colors.gray[500],
|
|
112
108
|
},
|
|
113
|
-
scrollbarWidth:
|
|
109
|
+
scrollbarWidth: "thin",
|
|
114
110
|
scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
|
|
115
111
|
} },
|
|
116
|
-
|
|
117
|
-
react_2.default.createElement(
|
|
118
|
-
|
|
119
|
-
react_2.default.createElement(
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
112
|
+
react_2.default.createElement(react_1.TabPanels, null,
|
|
113
|
+
filters.length > 0 && (react_2.default.createElement(react_1.TabPanel, { px: 0, py: 0 },
|
|
114
|
+
react_2.default.createElement(TableFilters_1.default, { filters: filters, childFilterMethodsRef: childFilterMethodsRef, filterSelected: tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filterSelected }))),
|
|
115
|
+
react_2.default.createElement(react_1.TabPanel, { px: 0, py: 0 },
|
|
116
|
+
react_2.default.createElement(react_1.Box, { sx: {
|
|
117
|
+
// Target ManageColumns list items for tighter spacing
|
|
118
|
+
"& [role='listitem'], & > div > div": {
|
|
119
|
+
py: "4px !important",
|
|
120
|
+
minHeight: "unset !important",
|
|
121
|
+
},
|
|
122
|
+
"& label": {
|
|
123
|
+
fontSize: "13px !important",
|
|
124
|
+
},
|
|
125
|
+
"& .chakra-checkbox": {
|
|
126
|
+
gap: "8px !important",
|
|
127
|
+
},
|
|
128
|
+
"& .chakra-checkbox__label": {
|
|
129
|
+
fontSize: "13px !important",
|
|
130
|
+
},
|
|
131
|
+
// Tighten drag handle rows if present
|
|
132
|
+
"& [draggable]": {
|
|
133
|
+
py: "5px !important",
|
|
134
|
+
},
|
|
135
|
+
} },
|
|
136
|
+
react_2.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }))))),
|
|
137
|
+
react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.border) === null || _s === void 0 ? void 0 : _s[200], pt: 3, pb: 3, px: 4 },
|
|
138
|
+
react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "gray" }),
|
|
139
|
+
react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))))));
|
|
123
140
|
};
|
|
124
141
|
exports.default = TableSettings;
|