pixelize-design-library 2.0.11 → 2.0.13

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.
Files changed (7) hide show
  1. package/dist/Components/DatePicker/DatePicker.js +23 -8
  2. package/dist/Components/KanbanBoard/KanbanBoard.d.ts +1 -1
  3. package/dist/Components/KanbanBoard/KanbanBoard.js +14 -7
  4. package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts +1 -0
  5. package/dist/Pages/datePick.js +1 -1
  6. package/dist/Pages/kanbanboard.js +1 -1
  7. package/package.json +1 -1
package/dist/Components/DatePicker/DatePicker.js CHANGED
@@ -90,17 +90,21 @@ function CustomDatePicker(props) {
90
90
  else {
91
91
  var finalStart = tempRangeStart && updated < tempRangeStart ? updated : tempRangeStart;
92
92
  var finalEnd = tempRangeStart && updated < tempRangeStart ? tempRangeStart : updated;
93
- setTempRangeStart(finalStart !== null && finalStart !== void 0 ? finalStart : updated);
93
+ var safeStart = finalStart !== null && finalStart !== void 0 ? finalStart : updated;
94
+ setTempRangeStart(safeStart);
94
95
  setTempRangeEnd(finalEnd);
95
96
  setSelectingStart(true);
97
+ if (safeStart && finalEnd) {
98
+ props.onChange({ from: safeStart, to: finalEnd });
99
+ }
96
100
  }
97
101
  }
98
102
  else {
99
- setTempDate(function (prev) {
100
- if (!prev)
101
- return updated;
102
- return new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), prev.getHours(), prev.getMinutes(), prev.getSeconds());
103
- });
103
+ var updatedDate = tempDate
104
+ ? new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds())
105
+ : updated;
106
+ setTempDate(updatedDate);
107
+ props.onChange(updatedDate);
104
108
  }
105
109
  };
106
110
  var renderDays = function () {
@@ -182,10 +186,21 @@ function CustomDatePicker(props) {
182
186
  react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef },
183
187
  react_1.default.createElement(react_2.PopoverBody, null,
184
188
  showDate && (react_1.default.createElement(react_1.default.Fragment, null,
185
- react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mb: 2 },
189
+ react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 },
186
190
  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); }); } },
187
191
  react_1.default.createElement(lucide_react_1.ChevronLeftIcon, null)),
188
- react_1.default.createElement(react_2.Box, { fontWeight: "bold" }, (0, date_fns_1.format)(currentMonth, "MMMM yyyy")),
192
+ react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
193
+ react_1.default.createElement("select", { value: currentMonth.getMonth(), onChange: function (e) {
194
+ var newMonth = parseInt(e.target.value, 10);
195
+ setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), newMonth, 1); });
196
+ } }, 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"))); })),
197
+ react_1.default.createElement("select", { value: currentMonth.getFullYear(), onChange: function (e) {
198
+ var newYear = parseInt(e.target.value, 10);
199
+ setCurrentMonth(function (prev) { return new Date(newYear, prev.getMonth(), 1); });
200
+ } }, Array.from({ length: 100 }).map(function (_, i) {
201
+ var year = new Date().getFullYear() - 50 + i;
202
+ return (react_1.default.createElement("option", { key: year, value: year }, year));
203
+ }))),
189
204
  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); }); } },
190
205
  react_1.default.createElement(lucide_react_1.ChevronRightIcon, null))),
191
206
  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)); })),
package/dist/Components/KanbanBoard/KanbanBoard.d.ts CHANGED
@@ -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 }: KanbanBoardProps) => React.JSX.Element;
3
+ declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, }: KanbanBoardProps) => React.JSX.Element;
4
4
  export default KanbanBoard;
package/dist/Components/KanbanBoard/KanbanBoard.js CHANGED
@@ -54,9 +54,9 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
54
54
  var AccountCard_1 = __importDefault(require("./AccountCard"));
55
55
  var KanbanBoard = function (_a) {
56
56
  var _b;
57
- var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete;
57
+ var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c;
58
58
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
59
- var _c = (0, react_1.useState)(data), columns = _c[0], setColumns = _c[1];
59
+ var _d = (0, react_1.useState)(data), columns = _d[0], setColumns = _d[1];
60
60
  var onDragEnd = function (result) {
61
61
  var _a, _b;
62
62
  var source = result.source, destination = result.destination;
@@ -94,20 +94,27 @@ var KanbanBoard = function (_a) {
94
94
  onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
95
95
  };
96
96
  return (react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
97
- 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" }, Object.entries(columns).map(function (_a) {
97
+ 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 ? (Array.from({ length: 5 }).map(function (_, idx) {
98
+ var _a, _b;
99
+ 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 },
100
+ react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
101
+ react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
102
+ })) : (Object.entries(columns).map(function (_a) {
98
103
  var colId = _a[0], column = _a[1];
99
104
  return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId.toString(), key: colId }, function (provided, snapshot) {
100
105
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
101
106
  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
102
107
  ? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
103
- : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver ? "0.5px dashed" + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500]) : "0.125rem solid" + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column" }),
104
- 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, display: "flex", justifyContent: "space-between" },
105
- react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", lineHeight: "100%", letterSpacing: "0%", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
108
+ : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
109
+ ? "0.5px dashed" + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
110
+ : "0.125rem solid" + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0 }),
111
+ 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" },
112
+ 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),
106
113
  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); } })),
107
114
  react_1.default.createElement(react_2.Box, { px: 2, pb: 2, overflowY: "auto", maxHeight: "calc(100vh - 7rem)", overflowX: "hidden" },
108
115
  column.items.map(function (account, index) { return (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen })); }),
109
116
  provided.placeholder)));
110
117
  }));
111
- }))));
118
+ })))));
112
119
  };
113
120
  exports.default = KanbanBoard;
package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts CHANGED
@@ -23,4 +23,5 @@ export type KanbanBoardProps = {
23
23
  to: string;
24
24
  item: Account;
25
25
  }) => void;
26
+ isLoading?: boolean;
26
27
  };
package/dist/Pages/datePick.js CHANGED
@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
30
  var DatePicker_1 = __importDefault(require("../Components/DatePicker/DatePicker"));
31
31
  var DatePick = function () {
32
- var _a = (0, react_1.useState)(null), selectedDate = _a[0], setSelectedDate = _a[1];
32
+ var _a = (0, react_1.useState)(), selectedDate = _a[0], setSelectedDate = _a[1];
33
33
  var _b = (0, react_1.useState)(null), selectedTime = _b[0], setSelectedTime = _b[1];
34
34
  var _c = (0, react_1.useState)(null), selectedDateTime = _c[0], setSelectedDateTime = _c[1];
35
35
  var _d = (0, react_1.useState)(null), selectedDateRange = _d[0], setSelectedDateRange = _d[1];
package/dist/Pages/kanbanboard.js CHANGED
@@ -110,6 +110,6 @@ var initialData = {
110
110
  },
111
111
  };
112
112
  var KanbanBoardExample = function () {
113
- return (react_1.default.createElement(KanbanBoard_1.default, { data: initialData, onDelete: function (item) { return console.log("Delete", item); }, onOpen: function (item) { return console.log("Open", item); }, onDrag: function (updatedColumns) { return console.log("New State", updatedColumns); }, onColumnDelete: function (updatedColumns) { return console.log("New Del", updatedColumns); } }));
113
+ return (react_1.default.createElement(KanbanBoard_1.default, { data: initialData, onDelete: function (item) { return console.log("Delete", item); }, onOpen: function (item) { return console.log("Open", item); }, onDrag: function (updatedColumns) { return console.log("New State", updatedColumns); }, onColumnDelete: function (updatedColumns) { return console.log("New Del", updatedColumns); }, isLoading: false }));
114
114
  };
115
115
  exports.default = KanbanBoardExample;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.0.11",
3
+ "version": "2.0.13",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",