pixelize-design-library 2.1.54 → 2.1.56
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.
|
@@ -83,6 +83,7 @@ function CustomDatePicker(props) {
|
|
|
83
83
|
if (showTime) {
|
|
84
84
|
// setTempDate(new Date()); // add new
|
|
85
85
|
// setTempDate(disableToday ? tomorrow : new Date());
|
|
86
|
+
// console.log(selectedDate,"selectedDateselectedDate")
|
|
86
87
|
setTempDate(disableToday ? tomorrow : selectedDate ? selectedDate : new Date());
|
|
87
88
|
}
|
|
88
89
|
onOpen();
|
|
@@ -241,7 +242,7 @@ function CustomDatePicker(props) {
|
|
|
241
242
|
// date={tempDate ?? new Date()}
|
|
242
243
|
, {
|
|
243
244
|
// date={tempDate ?? new Date()}
|
|
244
|
-
date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow :
|
|
245
|
+
date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat,
|
|
245
246
|
// onChange={(updatedDate) => {
|
|
246
247
|
// 👇 Redirect time change if today
|
|
247
248
|
// const corrected = disableToday && isSameDay(updatedDate, today)
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
// import React, { useState, useEffect } from "react";
|
|
3
|
+
// import { TimePickerProps } from "./DatePickerProps";
|
|
2
4
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
5
|
if (k2 === undefined) k2 = k;
|
|
4
6
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -23,7 +25,123 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
23
25
|
return result;
|
|
24
26
|
};
|
|
25
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
// const TimePicker: React.FC<TimePickerProps> = ({
|
|
29
|
+
// date,
|
|
30
|
+
// onChange,
|
|
31
|
+
// dateFormat,
|
|
32
|
+
// }) => {
|
|
33
|
+
// // console.log(date, "dateindatepicker");
|
|
34
|
+
// const is12HourFormat = /(hh|h).*a/i.test(dateFormat);
|
|
35
|
+
// const [hour, setHour] = useState(date.getHours());
|
|
36
|
+
// const [minute, setMinute] = useState(date.getMinutes());
|
|
37
|
+
// const [ampm, setAmpm] = useState(
|
|
38
|
+
// is12HourFormat ? (date.getHours() >= 12 ? "PM" : "AM") : ""
|
|
39
|
+
// );
|
|
40
|
+
// useEffect(() => {
|
|
41
|
+
// const newHour = date.getHours();
|
|
42
|
+
// setHour(newHour);
|
|
43
|
+
// setMinute(date.getMinutes());
|
|
44
|
+
// if (is12HourFormat) {
|
|
45
|
+
// setAmpm(newHour >= 12 ? "PM" : "AM");
|
|
46
|
+
// }
|
|
47
|
+
// }, [date, is12HourFormat]);
|
|
48
|
+
// const convertTo24Hour = (hr: number, meridiem: string) => {
|
|
49
|
+
// if (meridiem === "AM") return hr === 12 ? 0 : hr;
|
|
50
|
+
// return hr === 12 ? 12 : hr + 12;
|
|
51
|
+
// };
|
|
52
|
+
// const updateTime = (hrInput: number, min: number, meridiem?: string) => {
|
|
53
|
+
// const newHour = is12HourFormat
|
|
54
|
+
// ? convertTo24Hour(hrInput, meridiem || ampm)
|
|
55
|
+
// : hrInput;
|
|
56
|
+
// const safeHour = Math.max(0, Math.min(23, newHour));
|
|
57
|
+
// const safeMinutes = Math.max(0, Math.min(59, min));
|
|
58
|
+
// const newDate = new Date(
|
|
59
|
+
// date.getFullYear(),
|
|
60
|
+
// date.getMonth(),
|
|
61
|
+
// date.getDate(),
|
|
62
|
+
// safeHour,
|
|
63
|
+
// safeMinutes,
|
|
64
|
+
// 0,
|
|
65
|
+
// 0
|
|
66
|
+
// );
|
|
67
|
+
// onChange(newDate);
|
|
68
|
+
// };
|
|
69
|
+
// const handleHourChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
70
|
+
// let hr = parseInt(e.target.value || "1", 10);
|
|
71
|
+
// if (is12HourFormat) {
|
|
72
|
+
// hr = Math.max(1, Math.min(12, hr));
|
|
73
|
+
// setHour(hr);
|
|
74
|
+
// updateTime(hr, minute, ampm);
|
|
75
|
+
// } else {
|
|
76
|
+
// hr = Math.max(0, Math.min(23, hr));
|
|
77
|
+
// setHour(hr);
|
|
78
|
+
// updateTime(hr, minute);
|
|
79
|
+
// }
|
|
80
|
+
// };
|
|
81
|
+
// const handleMinuteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
82
|
+
// let min = parseInt(e.target.value || "0", 10);
|
|
83
|
+
// // clamp between 0-59
|
|
84
|
+
// min = Math.max(0, Math.min(59, min));
|
|
85
|
+
// setMinute(min);
|
|
86
|
+
// updateTime(hour, min, ampm);
|
|
87
|
+
// };
|
|
88
|
+
// const handleAmpmToggle = () => {
|
|
89
|
+
// const newMeridiem = ampm === "AM" ? "PM" : "AM";
|
|
90
|
+
// const displayHr = hour % 12 === 0 ? 12 : hour % 12;
|
|
91
|
+
// // const newHr = convertTo24Hour(displayHr, newMeridiem);
|
|
92
|
+
// setAmpm(newMeridiem);
|
|
93
|
+
// setHour(displayHr);
|
|
94
|
+
// updateTime(displayHr, minute, newMeridiem);
|
|
95
|
+
// };
|
|
96
|
+
// const displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
|
|
97
|
+
// return (
|
|
98
|
+
// <div
|
|
99
|
+
// style={{
|
|
100
|
+
// display: "flex",
|
|
101
|
+
// alignItems: "center",
|
|
102
|
+
// gap: "0.5rem",
|
|
103
|
+
// fontSize: "1.25rem",
|
|
104
|
+
// marginTop: "1rem",
|
|
105
|
+
// }}
|
|
106
|
+
// >
|
|
107
|
+
// <input
|
|
108
|
+
// type="number"
|
|
109
|
+
// value={displayHour}
|
|
110
|
+
// onChange={handleHourChange}
|
|
111
|
+
// min={is12HourFormat ? 1 : 0}
|
|
112
|
+
// max={is12HourFormat ? 12 : 23}
|
|
113
|
+
// style={{ width: "3rem", textAlign: "center" }}
|
|
114
|
+
// />
|
|
115
|
+
// :
|
|
116
|
+
// <input
|
|
117
|
+
// type="number"
|
|
118
|
+
// value={minute.toString().padStart(2, "0")}
|
|
119
|
+
// onChange={handleMinuteChange}
|
|
120
|
+
// min={0}
|
|
121
|
+
// max={59}
|
|
122
|
+
// style={{ width: "3rem", textAlign: "center" }}
|
|
123
|
+
// />
|
|
124
|
+
// {is12HourFormat && (
|
|
125
|
+
// <button
|
|
126
|
+
// type="button"
|
|
127
|
+
// onClick={handleAmpmToggle}
|
|
128
|
+
// style={{
|
|
129
|
+
// fontWeight: "bold",
|
|
130
|
+
// padding: "0.25rem 0.5rem",
|
|
131
|
+
// border: "none",
|
|
132
|
+
// background: "transparent",
|
|
133
|
+
// cursor: "pointer",
|
|
134
|
+
// }}
|
|
135
|
+
// >
|
|
136
|
+
// {ampm}
|
|
137
|
+
// </button>
|
|
138
|
+
// )}
|
|
139
|
+
// </div>
|
|
140
|
+
// );
|
|
141
|
+
// };
|
|
142
|
+
// export default TimePicker;
|
|
26
143
|
var react_1 = __importStar(require("react"));
|
|
144
|
+
var react_2 = require("@chakra-ui/react");
|
|
27
145
|
var TimePicker = function (_a) {
|
|
28
146
|
var date = _a.date, onChange = _a.onChange, dateFormat = _a.dateFormat;
|
|
29
147
|
var is12HourFormat = /(hh|h).*a/i.test(dateFormat);
|
|
@@ -44,58 +162,36 @@ var TimePicker = function (_a) {
|
|
|
44
162
|
return hr === 12 ? 12 : hr + 12;
|
|
45
163
|
};
|
|
46
164
|
var updateTime = function (hrInput, min, meridiem) {
|
|
47
|
-
var newHour = is12HourFormat
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
newDate.
|
|
51
|
-
newDate.setSeconds(0);
|
|
52
|
-
newDate.setMilliseconds(0);
|
|
165
|
+
var newHour = is12HourFormat
|
|
166
|
+
? convertTo24Hour(hrInput, meridiem || ampm)
|
|
167
|
+
: hrInput;
|
|
168
|
+
var newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), newHour, min, 0, 0);
|
|
53
169
|
onChange(newDate);
|
|
54
170
|
};
|
|
55
171
|
var handleHourChange = function (e) {
|
|
56
|
-
var hr = parseInt(e.target.value
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
setHour(hr);
|
|
60
|
-
updateTime(hr, minute, ampm);
|
|
61
|
-
}
|
|
62
|
-
else {
|
|
63
|
-
hr = Math.max(0, Math.min(23, hr));
|
|
64
|
-
setHour(hr);
|
|
65
|
-
updateTime(hr, minute);
|
|
66
|
-
}
|
|
172
|
+
var hr = parseInt(e.target.value, 10);
|
|
173
|
+
setHour(hr);
|
|
174
|
+
updateTime(hr, minute, ampm);
|
|
67
175
|
};
|
|
68
176
|
var handleMinuteChange = function (e) {
|
|
69
|
-
var min = parseInt(e.target.value
|
|
70
|
-
min = Math.max(0, Math.min(59, min));
|
|
177
|
+
var min = parseInt(e.target.value, 10);
|
|
71
178
|
setMinute(min);
|
|
72
179
|
updateTime(hour, min, ampm);
|
|
73
180
|
};
|
|
74
|
-
var
|
|
75
|
-
var newMeridiem =
|
|
76
|
-
var displayHr = hour % 12 === 0 ? 12 : hour % 12;
|
|
77
|
-
// const newHr = convertTo24Hour(displayHr, newMeridiem);
|
|
181
|
+
var handleAmpmChange = function (e) {
|
|
182
|
+
var newMeridiem = e.target.value;
|
|
78
183
|
setAmpm(newMeridiem);
|
|
79
|
-
|
|
80
|
-
updateTime(displayHr, minute, newMeridiem);
|
|
184
|
+
updateTime(hour, minute, newMeridiem);
|
|
81
185
|
};
|
|
82
186
|
var displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
|
|
83
|
-
return (react_1.default.createElement(
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
react_1.default.createElement("input", { type: "number", value: minute.toString().padStart(2, "0"), onChange: handleMinuteChange, min: 0, max: 59, style: { width: "3rem", textAlign: "center" } }),
|
|
93
|
-
is12HourFormat && (react_1.default.createElement("button", { type: "button", onClick: handleAmpmToggle, style: {
|
|
94
|
-
fontWeight: "bold",
|
|
95
|
-
padding: "0.25rem 0.5rem",
|
|
96
|
-
border: "none",
|
|
97
|
-
background: "transparent",
|
|
98
|
-
cursor: "pointer",
|
|
99
|
-
} }, ampm))));
|
|
187
|
+
return (react_1.default.createElement(react_2.HStack, { spacing: 2, mt: 4 },
|
|
188
|
+
react_1.default.createElement(react_2.Select, { value: displayHour, onChange: handleHourChange, w: "4rem" }, Array.from({ length: is12HourFormat ? 12 : 24 }, function (_, i) {
|
|
189
|
+
var value = is12HourFormat ? i + 1 : i;
|
|
190
|
+
return (react_1.default.createElement("option", { key: value, value: value }, value.toString().padStart(2, "0")));
|
|
191
|
+
})),
|
|
192
|
+
react_1.default.createElement(react_2.Select, { value: minute, onChange: handleMinuteChange, w: "4rem" }, Array.from({ length: 60 }, function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, i.toString().padStart(2, "0"))); })),
|
|
193
|
+
is12HourFormat && (react_1.default.createElement(react_2.Select, { value: ampm, onChange: handleAmpmChange, w: "5rem" },
|
|
194
|
+
react_1.default.createElement("option", { value: "AM" }, "AM"),
|
|
195
|
+
react_1.default.createElement("option", { value: "PM" }, "PM")))));
|
|
100
196
|
};
|
|
101
197
|
exports.default = TimePicker;
|
package/dist/Pages/datePick.js
CHANGED
|
@@ -61,7 +61,7 @@ var DatePick = function () {
|
|
|
61
61
|
react_1.default.createElement("h2", null, "Date "),
|
|
62
62
|
react_1.default.createElement("h2", null, "time "),
|
|
63
63
|
react_1.default.createElement("h2", null, "datetime "),
|
|
64
|
-
react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDateTime, onChange: handleDateTimeChange, dateFormat: "dd/MM/yyyy
|
|
64
|
+
react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDateTime, onChange: handleDateTimeChange, dateFormat: "dd/MM/yyyy HH:mm", pickerType: "datetime", width: "300px", error: true, errorMessage: "Invalid date" }),
|
|
65
65
|
react_1.default.createElement("br", null),
|
|
66
66
|
react_1.default.createElement("h2", null, "Date Range Picker")));
|
|
67
67
|
};
|
package/dist/Pages/table.js
CHANGED
|
@@ -139,6 +139,6 @@ var column = [
|
|
|
139
139
|
];
|
|
140
140
|
var TableExample = function () {
|
|
141
141
|
return (react_1.default.createElement("div", null,
|
|
142
|
-
react_1.default.createElement(Table_1.default, { columns: column, data: tableData, isCheckbox: true, isVisiblity: false, isLoading: false, noBorders: false, onSelection: function (checked) { return console.log(checked); }, onRowClick: function (row, header) { return console.log(row, header); }, isPagination: false })));
|
|
142
|
+
react_1.default.createElement(Table_1.default, { columns: column, data: tableData, isCheckbox: true, isVisiblity: false, isLoading: false, noBorders: false, onSelection: function (checked) { return console.log(checked); }, onRowClick: function (row, header) { return console.log(row, header); }, isPagination: false, isTableSettings: true })));
|
|
143
143
|
};
|
|
144
144
|
exports.TableExample = TableExample;
|