pixelize-design-library 2.1.49 → 2.1.51
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 +54 -14
- package/dist/Components/DatePicker/DatePickerProps.d.ts +1 -0
- package/dist/Components/KanbanBoard/KanbanBoard.d.ts +1 -1
- package/dist/Components/KanbanBoard/KanbanBoard.js +27 -24
- package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts +19 -0
- package/dist/Pages/datePick.js +1 -1
- package/package.json +1 -1
|
@@ -46,29 +46,43 @@ var inferPickerTypeFromFormat = function (formatStr) {
|
|
|
46
46
|
return "date";
|
|
47
47
|
};
|
|
48
48
|
function CustomDatePicker(props) {
|
|
49
|
-
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;
|
|
49
|
+
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;
|
|
50
50
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
51
|
-
var
|
|
51
|
+
var _f = (0, react_2.useDisclosure)(), isOpen = _f.isOpen, onOpen = _f.onOpen, onClose = _f.onClose;
|
|
52
52
|
var resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
|
|
53
53
|
var inputRef = (0, react_1.useRef)(null);
|
|
54
54
|
var today = new Date();
|
|
55
|
+
var tomorrow = (0, date_fns_1.addDays)(today, 1);
|
|
55
56
|
var showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
|
|
56
57
|
var showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
|
|
57
58
|
var selectedDate = !isRange ? props.selectedDate : null;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
var
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
59
|
+
// const [currentMonth, setCurrentMonth] = useState<Date>(
|
|
60
|
+
// isRange ? new Date() : selectedDate ?? new Date()
|
|
61
|
+
// );
|
|
62
|
+
var _g = (0, react_1.useState)(isRange ? new Date() :
|
|
63
|
+
selectedDate
|
|
64
|
+
? (disableToday && (0, date_fns_1.isSameDay)(selectedDate, today) ? tomorrow : selectedDate)
|
|
65
|
+
: (disableToday ? tomorrow : today)), currentMonth = _g[0], setCurrentMonth = _g[1];
|
|
66
|
+
var _h = (0, react_1.useState)(null), rangeStart = _h[0], setRangeStart = _h[1];
|
|
67
|
+
var _j = (0, react_1.useState)(null), rangeEnd = _j[0], setRangeEnd = _j[1];
|
|
68
|
+
var _k = (0, react_1.useState)(true), selectingStart = _k[0], setSelectingStart = _k[1];
|
|
69
|
+
var _l = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _l[0], setTempDate = _l[1];
|
|
70
|
+
// const [tempDate, setTempDate] = useState<Date | null>(
|
|
71
|
+
// selectedDate
|
|
72
|
+
// ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
|
|
73
|
+
// : (disableToday ? tomorrow : null)
|
|
74
|
+
// );
|
|
75
|
+
var _m = (0, react_1.useState)(rangeStart), tempRangeStart = _m[0], setTempRangeStart = _m[1];
|
|
76
|
+
var _o = (0, react_1.useState)(rangeEnd), tempRangeEnd = _o[0], setTempRangeEnd = _o[1];
|
|
65
77
|
var popoverRef = (0, react_1.useRef)(null);
|
|
66
78
|
var handleOpen = function () {
|
|
67
79
|
if (!isRange && !selectedDate) {
|
|
68
|
-
setTempDate(new Date());
|
|
80
|
+
// setTempDate(new Date());
|
|
81
|
+
setTempDate(disableToday ? tomorrow : new Date());
|
|
69
82
|
}
|
|
70
83
|
if (showTime) {
|
|
71
|
-
setTempDate(new Date()); // add new
|
|
84
|
+
// setTempDate(new Date()); // add new
|
|
85
|
+
setTempDate(disableToday ? tomorrow : new Date());
|
|
72
86
|
}
|
|
73
87
|
onOpen();
|
|
74
88
|
};
|
|
@@ -76,14 +90,24 @@ function CustomDatePicker(props) {
|
|
|
76
90
|
if (!isRange) {
|
|
77
91
|
if (selectedDate instanceof Date) {
|
|
78
92
|
setTempDate(new Date(selectedDate));
|
|
93
|
+
// const corrected = disableToday && isSameDay(selectedDate, today)
|
|
94
|
+
// ? tomorrow
|
|
95
|
+
// : selectedDate;
|
|
96
|
+
// setTempDate(new Date(corrected));
|
|
79
97
|
}
|
|
80
98
|
else {
|
|
81
99
|
setTempDate(null);
|
|
100
|
+
// setTempDate(disableToday ? tomorrow : null);
|
|
82
101
|
}
|
|
83
102
|
}
|
|
84
|
-
}, [selectedDate, isRange]);
|
|
103
|
+
}, [selectedDate, isRange, disableToday]);
|
|
85
104
|
var handleDaySelect = function (day) {
|
|
105
|
+
// const updated = new Date(day);
|
|
86
106
|
var updated = new Date(day);
|
|
107
|
+
// 👇 Redirect selection from today → tomorrow
|
|
108
|
+
if (disableToday && (0, date_fns_1.isSameDay)(updated, today)) {
|
|
109
|
+
updated = tomorrow;
|
|
110
|
+
}
|
|
87
111
|
if (isRange) {
|
|
88
112
|
if (selectingStart) {
|
|
89
113
|
setTempRangeStart(updated);
|
|
@@ -135,7 +159,8 @@ function CustomDatePicker(props) {
|
|
|
135
159
|
(minDate && (0, date_fns_1.isBefore)(thisDay, minDate)) ||
|
|
136
160
|
(maxDate && (0, date_fns_1.isAfter)(thisDay, maxDate)) ||
|
|
137
161
|
(disablePastDates && (0, date_fns_1.isBefore)(thisDay, today) && !(0, date_fns_1.isSameDay)(thisDay, today)) ||
|
|
138
|
-
(disableFutureDates && (0, date_fns_1.isAfter)(thisDay, today) && !(0, date_fns_1.isSameDay)(thisDay, today))
|
|
162
|
+
(disableFutureDates && (0, date_fns_1.isAfter)(thisDay, today) && !(0, date_fns_1.isSameDay)(thisDay, today)) ||
|
|
163
|
+
(disableToday && isToday);
|
|
139
164
|
days.push(react_1.default.createElement(Button_1.default, { key: thisDay.toString(), size: "sm", variant: isStart || isEnd
|
|
140
165
|
? "solid"
|
|
141
166
|
: isInRange
|
|
@@ -211,19 +236,34 @@ function CustomDatePicker(props) {
|
|
|
211
236
|
react_1.default.createElement(lucide_react_1.ChevronRightIcon, null))),
|
|
212
237
|
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)); })),
|
|
213
238
|
renderDays())),
|
|
214
|
-
!isRange && showTime && (react_1.default.createElement(TimePicker_1.default
|
|
239
|
+
!isRange && showTime && (react_1.default.createElement(TimePicker_1.default
|
|
240
|
+
// date={tempDate ?? new Date()}
|
|
241
|
+
, {
|
|
242
|
+
// date={tempDate ?? new Date()}
|
|
243
|
+
date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : new Date()), dateFormat: dateFormat,
|
|
244
|
+
// onChange={(updatedDate) => {
|
|
245
|
+
// 👇 Redirect time change if today
|
|
246
|
+
// const corrected = disableToday && isSameDay(updatedDate, today)
|
|
247
|
+
// ? tomorrow
|
|
248
|
+
// : updatedDate;
|
|
249
|
+
// setTempDate(corrected);
|
|
250
|
+
// (props as any).onChange(corrected);
|
|
251
|
+
// }}
|
|
252
|
+
onChange: function (updatedDate) {
|
|
215
253
|
setTempDate(updatedDate);
|
|
216
254
|
props.onChange(updatedDate);
|
|
217
255
|
} })),
|
|
218
256
|
react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 3 },
|
|
219
257
|
react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: function () {
|
|
220
258
|
setTempDate(null);
|
|
259
|
+
// setTempDate(disableToday ? tomorrow : null);
|
|
221
260
|
setTempRangeStart(null);
|
|
222
261
|
setTempRangeEnd(null);
|
|
223
262
|
setRangeStart(null);
|
|
224
263
|
setRangeEnd(null);
|
|
225
264
|
setSelectingStart(true);
|
|
226
265
|
props.onChange(null);
|
|
266
|
+
// (props as any).onChange(disableToday ? tomorrow : null);
|
|
227
267
|
onClose();
|
|
228
268
|
} }, "Clear"),
|
|
229
269
|
react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: function () {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { KanbanBoardProps } from "./KanbanBoardProps";
|
|
3
|
-
declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, }: KanbanBoardProps) => React.JSX.Element;
|
|
3
|
+
declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate }: KanbanBoardProps) => React.JSX.Element;
|
|
4
4
|
export default KanbanBoard;
|
|
@@ -52,9 +52,10 @@ var dnd_1 = require("@hello-pangea/dnd");
|
|
|
52
52
|
var lucide_react_1 = require("lucide-react");
|
|
53
53
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
54
54
|
var AccountCard_1 = __importDefault(require("./AccountCard"));
|
|
55
|
+
var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
|
|
55
56
|
var KanbanBoard = function (_a) {
|
|
56
57
|
var _b, _c, _d;
|
|
57
|
-
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e;
|
|
58
|
+
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate;
|
|
58
59
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
59
60
|
var _f = (0, react_1.useState)(data), columns = _f[0], setColumns = _f[1];
|
|
60
61
|
var onDragEnd = function (result) {
|
|
@@ -93,28 +94,30 @@ var KanbanBoard = function (_a) {
|
|
|
93
94
|
var columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item.id; })) || [];
|
|
94
95
|
onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
|
|
95
96
|
};
|
|
96
|
-
return (react_1.default.createElement(
|
|
97
|
-
react_1.default.createElement(
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
react_1.default.createElement(react_2.
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
var
|
|
106
|
-
return (react_1.default.createElement(
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
react_1.default.createElement(react_2.
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
97
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
98
|
+
react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: kanbanEdit, create: kanbanCreate }),
|
|
99
|
+
react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
|
|
100
|
+
react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "100vh", overflowX: "auto", maxWidth: "100vw" }, isLoading ? ((_c = Array.from({ length: 5 })) === null || _c === void 0 ? void 0 : _c.map(function (_, idx) {
|
|
101
|
+
var _a, _b;
|
|
102
|
+
return (react_1.default.createElement(react_2.Box, { key: idx, width: "17.5rem", p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
|
|
103
|
+
react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
|
|
104
|
+
react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
|
|
105
|
+
})) : ((_d = Object.entries(columns)) === null || _d === void 0 ? void 0 : _d.map(function (_a) {
|
|
106
|
+
var colId = _a[0], column = _a[1];
|
|
107
|
+
return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId.toString(), key: colId }, function (provided, snapshot) {
|
|
108
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
109
|
+
return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: "17.5rem", opacity: 1, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
|
|
110
|
+
? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
|
|
111
|
+
: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
|
|
112
|
+
? "0.5px dashed" + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
|
|
113
|
+
: "0.125rem solid" + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0 }),
|
|
114
|
+
react_1.default.createElement(react_2.Flex, { width: "16.5rem", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, mb: 3, flexShrink: 0, m: 2, justifyContent: "space-between" },
|
|
115
|
+
react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
|
|
116
|
+
react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); } })),
|
|
117
|
+
react_1.default.createElement(react_2.Box, { px: 2, pb: 2, overflowY: "auto", maxHeight: "calc(100vh - 7rem)", overflowX: "hidden" }, (_l = column.items) === null || _l === void 0 ? void 0 :
|
|
118
|
+
_l.map(function (account, index) { return (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen })); }),
|
|
119
|
+
provided.placeholder)));
|
|
120
|
+
}));
|
|
121
|
+
}))))));
|
|
119
122
|
};
|
|
120
123
|
exports.default = KanbanBoard;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { OptionProp } from "../Select/SelectProps";
|
|
1
2
|
export type Account = {
|
|
2
3
|
id: string;
|
|
3
4
|
[key: string]: string | number | null | undefined;
|
|
@@ -19,4 +20,22 @@ export type KanbanBoardProps = {
|
|
|
19
20
|
item: Account;
|
|
20
21
|
}) => void;
|
|
21
22
|
isLoading?: boolean;
|
|
23
|
+
kanbanSelect?: {
|
|
24
|
+
isSelect?: boolean;
|
|
25
|
+
options?: OptionProp[];
|
|
26
|
+
onSelectChange?: (option?: OptionProp) => void;
|
|
27
|
+
selectPlaceholderText?: string;
|
|
28
|
+
width?: string;
|
|
29
|
+
value?: string;
|
|
30
|
+
};
|
|
31
|
+
kanbanEdit?: {
|
|
32
|
+
isEditable?: boolean;
|
|
33
|
+
onEdit?: () => void;
|
|
34
|
+
label?: string;
|
|
35
|
+
};
|
|
36
|
+
kanbanCreate?: {
|
|
37
|
+
isCreatable?: boolean;
|
|
38
|
+
onCreate?: () => void;
|
|
39
|
+
label?: string;
|
|
40
|
+
};
|
|
22
41
|
};
|
package/dist/Pages/datePick.js
CHANGED
|
@@ -58,7 +58,7 @@ var DatePick = function () {
|
|
|
58
58
|
return (react_1.default.createElement("div", null,
|
|
59
59
|
react_1.default.createElement("h2", null, "Single Date Picker"),
|
|
60
60
|
react_1.default.createElement("h2", null, "Date "),
|
|
61
|
-
react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDate, onChange: handleDateChange, dateFormat: "dd/MM/yyyy", pickerType: "date", width: "300px", error: true, errorMessage: "Invalid date" }),
|
|
61
|
+
react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDate, onChange: handleDateChange, dateFormat: "dd/MM/yyyy", pickerType: "date", width: "300px", error: true, errorMessage: "Invalid date", disableToday: true }),
|
|
62
62
|
react_1.default.createElement("h2", null, "time "),
|
|
63
63
|
react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedTime, onChange: handleTimeChange, dateFormat: "HH:mm", pickerType: "time", width: "300px", error: true, errorMessage: "Invalid date" }),
|
|
64
64
|
react_1.default.createElement("h2", null, "datetime "),
|