pixelize-design-library 2.2.140 → 2.2.142
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/DatePicker/DatePicker.js +81 -80
- package/dist/Components/DatePicker/DatePickerProps.d.ts +1 -0
- package/dist/Components/Input/TextInput.js +3 -3
- package/dist/Components/Input/TextInput.styles.js +12 -0
- package/dist/Components/SideBar/SideBar.js +6 -4
- package/dist/Components/Table/Components/TableActions.d.ts +2 -1
- package/dist/Components/Table/Components/TableActions.js +3 -2
- package/dist/Components/Table/LeftFilterPane.d.ts +2 -2
- package/dist/Components/Table/LeftFilterPane.js +6 -0
- package/package.json +1 -1
|
@@ -57,9 +57,9 @@ var inferPickerTypeFromFormat = function (formatStr) {
|
|
|
57
57
|
return "date";
|
|
58
58
|
};
|
|
59
59
|
function CustomDatePicker(props) {
|
|
60
|
-
var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, _a = props.placeholderText, placeholderText = _a === void 0 ? "Select a date" : _a, _b = props.dateFormat, dateFormat = _b === void 0 ? "dd/MM/yyyy" : _b, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, isRange = props.isRange, _c = props.autoComplete, autoComplete = _c === void 0 ? "off" : _c, disabled = props.disabled, _d = props.width, width = _d === void 0 ? "100%" : _d, _e = props.disableToday, disableToday = _e === void 0 ? false : _e;
|
|
60
|
+
var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, _a = props.placeholderText, placeholderText = _a === void 0 ? "Select a date" : _a, _b = props.dateFormat, dateFormat = _b === void 0 ? "dd/MM/yyyy" : _b, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, isRange = props.isRange, _c = props.autoComplete, autoComplete = _c === void 0 ? "off" : _c, disabled = props.disabled, _d = props.width, width = _d === void 0 ? "100%" : _d, _e = props.disableToday, disableToday = _e === void 0 ? false : _e, _f = props.size, size = _f === void 0 ? "md" : _f;
|
|
61
61
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
62
|
-
var
|
|
62
|
+
var _g = (0, react_2.useDisclosure)(), isOpen = _g.isOpen, onOpen = _g.onOpen, onClose = _g.onClose;
|
|
63
63
|
var resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
|
|
64
64
|
var inputRef = (0, react_1.useRef)(null);
|
|
65
65
|
var today = new Date();
|
|
@@ -70,21 +70,21 @@ function CustomDatePicker(props) {
|
|
|
70
70
|
// const [currentMonth, setCurrentMonth] = useState<Date>(
|
|
71
71
|
// isRange ? new Date() : selectedDate ?? new Date()
|
|
72
72
|
// );
|
|
73
|
-
var
|
|
73
|
+
var _h = (0, react_1.useState)(isRange ? new Date() :
|
|
74
74
|
selectedDate
|
|
75
75
|
? (disableToday && (0, date_fns_1.isSameDay)(selectedDate, today) ? tomorrow : selectedDate)
|
|
76
|
-
: (disableToday ? tomorrow : today)), currentMonth =
|
|
77
|
-
var
|
|
78
|
-
var
|
|
79
|
-
var
|
|
80
|
-
var
|
|
76
|
+
: (disableToday ? tomorrow : today)), currentMonth = _h[0], setCurrentMonth = _h[1];
|
|
77
|
+
var _j = (0, react_1.useState)(null), rangeStart = _j[0], setRangeStart = _j[1];
|
|
78
|
+
var _k = (0, react_1.useState)(null), rangeEnd = _k[0], setRangeEnd = _k[1];
|
|
79
|
+
var _l = (0, react_1.useState)(true), selectingStart = _l[0], setSelectingStart = _l[1];
|
|
80
|
+
var _m = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _m[0], setTempDate = _m[1];
|
|
81
81
|
// const [tempDate, setTempDate] = useState<Date | null>(
|
|
82
82
|
// selectedDate
|
|
83
83
|
// ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
|
|
84
84
|
// : (disableToday ? tomorrow : null)
|
|
85
85
|
// );
|
|
86
|
-
var
|
|
87
|
-
var
|
|
86
|
+
var _o = (0, react_1.useState)(rangeStart), tempRangeStart = _o[0], setTempRangeStart = _o[1];
|
|
87
|
+
var _p = (0, react_1.useState)(rangeEnd), tempRangeEnd = _p[0], setTempRangeEnd = _p[1];
|
|
88
88
|
var popoverRef = (0, react_1.useRef)(null);
|
|
89
89
|
var isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
|
|
90
90
|
currentMonth.getMonth() === today.getMonth();
|
|
@@ -228,75 +228,76 @@ function CustomDatePicker(props) {
|
|
|
228
228
|
react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true },
|
|
229
229
|
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
230
230
|
react_1.default.createElement(react_2.Box, { onClick: handleOpen },
|
|
231
|
-
react_1.default.createElement(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width }))),
|
|
232
|
-
react_1.default.createElement(react_2.
|
|
233
|
-
react_1.default.createElement(react_2.
|
|
234
|
-
|
|
235
|
-
react_1.default.createElement(
|
|
236
|
-
react_1.default.createElement(
|
|
237
|
-
react_1.default.createElement(
|
|
238
|
-
|
|
239
|
-
react_1.default.createElement(
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
react_1.default.createElement(
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
, {
|
|
231
|
+
react_1.default.createElement(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }))),
|
|
232
|
+
react_1.default.createElement(react_2.Portal, { appendToParentPortal: false },
|
|
233
|
+
react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600 },
|
|
234
|
+
react_1.default.createElement(react_2.PopoverBody, null,
|
|
235
|
+
showDate && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
236
|
+
react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 },
|
|
237
|
+
react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.subMonths)(prev, 1); }); } },
|
|
238
|
+
react_1.default.createElement(lucide_react_1.ChevronLeftIcon, null)),
|
|
239
|
+
react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
|
|
240
|
+
react_1.default.createElement("select", { value: currentMonth.getMonth(), onChange: function (e) {
|
|
241
|
+
var newMonth = parseInt(e.target.value, 10);
|
|
242
|
+
setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), newMonth, 1); });
|
|
243
|
+
} }, Array.from({ length: 12 }).map(function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM"))); })),
|
|
244
|
+
react_1.default.createElement("select", { value: currentMonth.getFullYear(), onChange: function (e) {
|
|
245
|
+
var newYear = parseInt(e.target.value, 10);
|
|
246
|
+
setCurrentMonth(function (prev) { return new Date(newYear, prev.getMonth(), 1); });
|
|
247
|
+
} }, Array.from({ length: 100 }).map(function (_, i) {
|
|
248
|
+
var year = new Date().getFullYear() - 50 + i;
|
|
249
|
+
return (react_1.default.createElement("option", { key: year, value: year }, year));
|
|
250
|
+
}))),
|
|
251
|
+
react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1 },
|
|
252
|
+
!isViewingCurrentMonth && (react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () {
|
|
253
|
+
setCurrentMonth(new Date(today.getFullYear(), today.getMonth(), 1));
|
|
254
|
+
if (!disableToday && !isRange) {
|
|
255
|
+
handleDaySelect(new Date(today));
|
|
256
|
+
}
|
|
257
|
+
}, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday }, "Today")),
|
|
258
|
+
react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.addMonths)(prev, 1); }); } },
|
|
259
|
+
react_1.default.createElement(lucide_react_1.ChevronRightIcon, null)))),
|
|
260
|
+
react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day }, day)); })),
|
|
261
|
+
renderDays())),
|
|
262
|
+
!isRange && showTime && (react_1.default.createElement(TimePicker_1.default
|
|
264
263
|
// date={tempDate ?? new Date()}
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
264
|
+
, {
|
|
265
|
+
// date={tempDate ?? new Date()}
|
|
266
|
+
date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat,
|
|
267
|
+
// onChange={(updatedDate) => {
|
|
268
|
+
// 👇 Redirect time change if today
|
|
269
|
+
// const corrected = disableToday && isSameDay(updatedDate, today)
|
|
270
|
+
// ? tomorrow
|
|
271
|
+
// : updatedDate;
|
|
272
|
+
// setTempDate(corrected);
|
|
273
|
+
// (props as any).onChange(corrected);
|
|
274
|
+
// }}
|
|
275
|
+
onChange: function (updatedDate) {
|
|
276
|
+
setTempDate(updatedDate);
|
|
277
|
+
props.onChange(updatedDate);
|
|
278
|
+
} })),
|
|
279
|
+
react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 3 },
|
|
280
|
+
react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: function () {
|
|
281
|
+
setTempDate(null);
|
|
282
|
+
// setTempDate(disableToday ? tomorrow : null);
|
|
283
|
+
setTempRangeStart(null);
|
|
284
|
+
setTempRangeEnd(null);
|
|
285
|
+
setRangeStart(null);
|
|
286
|
+
setRangeEnd(null);
|
|
287
|
+
setSelectingStart(true);
|
|
288
|
+
props.onChange(null);
|
|
289
|
+
// (props as any).onChange(disableToday ? tomorrow : null);
|
|
290
|
+
onClose();
|
|
291
|
+
} }, "Clear"),
|
|
292
|
+
react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: function () {
|
|
293
|
+
if (isRange && tempRangeStart && tempRangeEnd) {
|
|
294
|
+
setRangeStart(tempRangeStart);
|
|
295
|
+
setRangeEnd(tempRangeEnd);
|
|
296
|
+
props.onChange({ from: tempRangeStart, to: tempRangeEnd });
|
|
297
|
+
}
|
|
298
|
+
else if (!isRange && tempDate) {
|
|
299
|
+
props.onChange(tempDate);
|
|
300
|
+
}
|
|
301
|
+
onClose();
|
|
302
|
+
} }, "OK"))))))));
|
|
302
303
|
}
|
|
@@ -64,12 +64,12 @@ var FormLabel_1 = require("../Common/FormLabel");
|
|
|
64
64
|
var HelperText_1 = __importDefault(require("../Common/HelperText"));
|
|
65
65
|
var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
|
|
66
66
|
var TextInput = (0, react_1.forwardRef)(function (_a, ref) {
|
|
67
|
-
var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "100%" : _g,
|
|
67
|
+
var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "100%" : _g, height = _a.height, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _h = _a.size, size = _h === void 0 ? "md" : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle, autoComplete = _a.autoComplete, minW = _a.minW, maxW = _a.maxW, props = __rest(_a, ["label", "type", "id", "name", "onChange", "onBlur", "onFocus", "isDisabled", "isReadOnly", "isRequired", "value", "placeholder", "width", "height", "error", "errorMessage", "helperText", "onRightIconclick", "inputRightIcon", "inputLeftIcon", "onLeftIconClick", "inputGroupStyle", "inputStyle", "size", "isInformation", "informationMessage", "leftElementStyle", "rightElementStyle", "autoComplete", "minW", "maxW"]);
|
|
68
68
|
return (react_1.default.createElement(react_2.FormControl, { w: width, minW: minW, maxW: maxW },
|
|
69
69
|
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
|
|
70
|
-
react_1.default.createElement(react_2.InputGroup, { style: inputGroupStyle, height: height },
|
|
70
|
+
react_1.default.createElement(react_2.InputGroup, { style: inputGroupStyle, size: size, height: height },
|
|
71
71
|
inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none" }, leftElementStyle, { height: "100%", display: "flex", alignItems: "center" }), inputLeftIcon)),
|
|
72
|
-
react_1.default.createElement(react_2.Input, __assign({ type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, height: height, isInvalid: error, ref: ref, autoComplete: autoComplete }, inputStyle, props)),
|
|
72
|
+
react_1.default.createElement(react_2.Input, __assign({ type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size }, (height != null && { height: height }), { isInvalid: error, ref: ref, autoComplete: autoComplete }, inputStyle, props)),
|
|
73
73
|
inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, __assign({ onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none" }, rightElementStyle, { height: "100%", display: "flex", alignItems: "center" }), inputRightIcon))),
|
|
74
74
|
error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
|
|
75
75
|
helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
|
|
@@ -18,12 +18,24 @@ exports.Input = {
|
|
|
18
18
|
},
|
|
19
19
|
},
|
|
20
20
|
sizes: {
|
|
21
|
+
sm: {
|
|
22
|
+
field: {
|
|
23
|
+
h: "2rem",
|
|
24
|
+
fontSize: "0.8125rem",
|
|
25
|
+
},
|
|
26
|
+
},
|
|
21
27
|
md: {
|
|
22
28
|
field: {
|
|
23
29
|
h: "2.75rem",
|
|
24
30
|
fontSize: "0.875rem",
|
|
25
31
|
},
|
|
26
32
|
},
|
|
33
|
+
lg: {
|
|
34
|
+
field: {
|
|
35
|
+
h: "3.25rem",
|
|
36
|
+
fontSize: "0.9375rem",
|
|
37
|
+
},
|
|
38
|
+
},
|
|
27
39
|
},
|
|
28
40
|
variants: {
|
|
29
41
|
outline: function (props) {
|
|
@@ -67,14 +67,16 @@ var SidebarHeader = function (_a) {
|
|
|
67
67
|
react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
|
|
68
68
|
}
|
|
69
69
|
if (logo) {
|
|
70
|
-
return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
|
|
70
|
+
return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem", minW: 0, overflow: "hidden" },
|
|
71
71
|
react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
|
|
72
|
-
!toggle && (react_1.default.createElement(react_2.
|
|
72
|
+
!toggle && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
73
|
+
react_1.default.createElement(react_2.Text, { fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2, isTruncated: true, width: "100%" }, companyName)))));
|
|
73
74
|
}
|
|
74
|
-
return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
|
|
75
|
+
return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem", minW: 0, overflow: "hidden" },
|
|
75
76
|
react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
|
|
76
77
|
react_1.default.createElement(defaultLogo_1.default, null)),
|
|
77
|
-
!toggle && (react_1.default.createElement(
|
|
78
|
+
!toggle && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
|
|
79
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 800, fontSize: "1.3rem", textAlign: "left", color: theme.colors.white, lineHeight: 2, as: "p", width: "100%" }, companyName !== null && companyName !== void 0 ? companyName : "")))));
|
|
78
80
|
};
|
|
79
81
|
var SkeletonMenuRow = function (_a) {
|
|
80
82
|
var toggle = _a.toggle;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
2
|
type TableRowActions = {
|
|
3
3
|
onLink?: (row: any) => void;
|
|
4
4
|
onEdit?: (row: any) => void;
|
|
5
5
|
onDelete?: (row: any) => void;
|
|
6
|
+
actions?: () => ReactNode;
|
|
6
7
|
[key: string]: any;
|
|
7
8
|
};
|
|
8
9
|
declare const TableActions: ({ row }: {
|
|
@@ -38,9 +38,9 @@ var react_2 = require("@chakra-ui/react");
|
|
|
38
38
|
var lucide_react_1 = require("lucide-react");
|
|
39
39
|
var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
|
|
40
40
|
var TableActions = function (_a) {
|
|
41
|
-
var _b, _c;
|
|
41
|
+
var _b, _c, _d;
|
|
42
42
|
var row = _a.row;
|
|
43
|
-
var
|
|
43
|
+
var _e = (0, react_1.useState)(false), isOpen = _e[0], setIsOpen = _e[1];
|
|
44
44
|
var ref = (0, react_1.useRef)(null);
|
|
45
45
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
46
46
|
// Listen for "close-all-popovers"
|
|
@@ -101,6 +101,7 @@ var TableActions = function (_a) {
|
|
|
101
101
|
} },
|
|
102
102
|
react_1.default.createElement(lucide_react_1.Trash2, { size: 17 }),
|
|
103
103
|
" Delete")),
|
|
104
|
+
row.actions && ((_d = row === null || row === void 0 ? void 0 : row.actions) === null || _d === void 0 ? void 0 : _d.call(row)),
|
|
104
105
|
!row.onLink && !row.onEdit && !row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center" }, "No actions")))))))));
|
|
105
106
|
};
|
|
106
107
|
exports.default = TableActions;
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
export type FilterItem = {
|
|
3
3
|
id: string;
|
|
4
4
|
label: string;
|
|
5
|
-
type?: "text" | "select" | "user";
|
|
5
|
+
type?: "text" | "select" | "user" | "date";
|
|
6
6
|
option?: {
|
|
7
7
|
id: string;
|
|
8
8
|
label: string;
|
|
@@ -19,7 +19,7 @@ export type SelectedFilterItem = {
|
|
|
19
19
|
id: string;
|
|
20
20
|
condition?: string;
|
|
21
21
|
value?: any;
|
|
22
|
-
type?: "text" | "select" | "user";
|
|
22
|
+
type?: "text" | "select" | "user" | "date";
|
|
23
23
|
};
|
|
24
24
|
export type LeftFilterPaneProps = {
|
|
25
25
|
title?: string;
|
|
@@ -66,6 +66,7 @@ var RadioButton_1 = require("../RadioButton/RadioButton");
|
|
|
66
66
|
var TextOperationControls_1 = require("./TextOperationControls");
|
|
67
67
|
var SelectOperationControls_1 = require("./SelectOperationControls");
|
|
68
68
|
var CompactSelect_1 = __importDefault(require("./CompactSelect"));
|
|
69
|
+
var DatePicker_1 = __importDefault(require("../DatePicker/DatePicker"));
|
|
69
70
|
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
|
70
71
|
var LABEL_MAX_LENGTH = 18;
|
|
71
72
|
function formatHeaderLabel(label) {
|
|
@@ -96,6 +97,9 @@ var ActiveItemControls = function (_a) {
|
|
|
96
97
|
var activeItem = _a.activeItem, sec = _a.sec, setTextOperator = _a.setTextOperator, setTextValue = _a.setTextValue;
|
|
97
98
|
if (!activeItem)
|
|
98
99
|
return null;
|
|
100
|
+
if (activeItem.type === "date") {
|
|
101
|
+
return (react_1.default.createElement(DatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: function (val) { return setTextValue(sec.id, activeItem.id, val); } }));
|
|
102
|
+
}
|
|
99
103
|
if (activeItem.type === "text") {
|
|
100
104
|
return (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, activeItem.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, activeItem.id, val); } }));
|
|
101
105
|
}
|
|
@@ -135,6 +139,8 @@ var SectionContent = function (_a) {
|
|
|
135
139
|
".chakra-checkbox__control": { width: "12px", height: "12px", mt: "2px" },
|
|
136
140
|
".chakra-checkbox__label": { lineHeight: "1rem", whiteSpace: "normal", wordBreak: "break-word" },
|
|
137
141
|
} }),
|
|
142
|
+
checked && it.type === "date" && (react_1.default.createElement(react_2.Box, { ml: "1.25rem" },
|
|
143
|
+
react_1.default.createElement(DatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: function (val) { return setTextValue(sec.id, it.id, val); } }))),
|
|
138
144
|
checked && it.type === "text" && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, it.id, val); } })),
|
|
139
145
|
checked && (it.type === "select" || it.type === "user") && (react_1.default.createElement(react_2.Box, null,
|
|
140
146
|
react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, size: "xs", ml: "1.25rem" }),
|