@gpa-gemstone/react-forms 1.1.62 → 1.1.64
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/lib/DatePicker.js +6 -4
- package/lib/DateTimeUI/Calender.js +26 -27
- package/package.json +1 -1
package/lib/DatePicker.js
CHANGED
|
@@ -83,9 +83,11 @@ function DateTimePicker(props) {
|
|
|
83
83
|
setTop(node.top + node.height + 10);
|
|
84
84
|
});
|
|
85
85
|
React.useEffect(function () {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
86
|
+
if (showOverlay) {
|
|
87
|
+
window.addEventListener('click', onWindowClick);
|
|
88
|
+
return function () { window.removeEventListener('click', onWindowClick); };
|
|
89
|
+
}
|
|
90
|
+
}, [props.Record, props.Field, boxFormat, showOverlay]);
|
|
89
91
|
function setPickerAndRecord(arg) {
|
|
90
92
|
var _a, _b;
|
|
91
93
|
var _c;
|
|
@@ -156,7 +158,7 @@ function DateTimePicker(props) {
|
|
|
156
158
|
setFeedbackMessage("Please enter a valid date.");
|
|
157
159
|
return false;
|
|
158
160
|
}
|
|
159
|
-
else if (date.startOf('day').isBefore(minStartDate)) {
|
|
161
|
+
else if (date.clone().startOf('day').isBefore(minStartDate)) {
|
|
160
162
|
setFeedbackMessage("Date must be on or after ".concat(minStartDate.format("MM-DD-YYYY")));
|
|
161
163
|
return false;
|
|
162
164
|
}
|
|
@@ -116,42 +116,40 @@ function Calender(props) {
|
|
|
116
116
|
React.createElement("td", { style: { width: 20, padding: 5 } }, "FR"),
|
|
117
117
|
React.createElement("td", { style: { width: 20, padding: 5 } }, "SA")) : null),
|
|
118
118
|
React.createElement("tbody", null,
|
|
119
|
-
mode === 'month' ? weeks.map(function (w) {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
React.createElement(DayCell, { date: w.friday, month: month, day: (_m = (_l = props.DateTime) === null || _l === void 0 ? void 0 : _l.date()) !== null && _m !== void 0 ? _m : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.friday); } }),
|
|
128
|
-
React.createElement(DayCell, { date: w.saturday, month: month, day: (_p = (_o = props.DateTime) === null || _o === void 0 ? void 0 : _o.date()) !== null && _p !== void 0 ? _p : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.saturday); } }));
|
|
129
|
-
}) : null,
|
|
119
|
+
mode === 'month' ? weeks.map(function (w) { return React.createElement("tr", { key: w.sunday.isoWeek(), style: { height: 20, lineHeight: '20px' } },
|
|
120
|
+
React.createElement(DayCell, { date: w.sunday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.sunday); } }),
|
|
121
|
+
React.createElement(DayCell, { date: w.monday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.monday); } }),
|
|
122
|
+
React.createElement(DayCell, { date: w.tuesday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.tuesday); } }),
|
|
123
|
+
React.createElement(DayCell, { date: w.wednesday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.wednesday); } }),
|
|
124
|
+
React.createElement(DayCell, { date: w.thursday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.thursday); } }),
|
|
125
|
+
React.createElement(DayCell, { date: w.friday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.friday); } }),
|
|
126
|
+
React.createElement(DayCell, { date: w.saturday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.saturday); } })); }) : null,
|
|
130
127
|
mode === 'year' ? React.createElement(React.Fragment, null,
|
|
131
128
|
React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
|
|
132
|
-
React.createElement(MonthCell, { date: moment([year, 0, 1]),
|
|
133
|
-
React.createElement(MonthCell, { date: moment([year, 1, 1]),
|
|
134
|
-
React.createElement(MonthCell, { date: moment([year, 2, 1]),
|
|
135
|
-
React.createElement(MonthCell, { date: moment([year, 3, 1]),
|
|
129
|
+
React.createElement(MonthCell, { date: moment([year, 0, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(0); } }),
|
|
130
|
+
React.createElement(MonthCell, { date: moment([year, 1, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(1); } }),
|
|
131
|
+
React.createElement(MonthCell, { date: moment([year, 2, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(2); } }),
|
|
132
|
+
React.createElement(MonthCell, { date: moment([year, 3, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(3); } })),
|
|
136
133
|
React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
|
|
137
|
-
React.createElement(MonthCell, { date: moment([year, 4, 1]),
|
|
138
|
-
React.createElement(MonthCell, { date: moment([year, 5, 1]),
|
|
139
|
-
React.createElement(MonthCell, { date: moment([year, 6, 1]),
|
|
140
|
-
React.createElement(MonthCell, { date: moment([year, 7, 1]),
|
|
134
|
+
React.createElement(MonthCell, { date: moment([year, 4, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(4); } }),
|
|
135
|
+
React.createElement(MonthCell, { date: moment([year, 5, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(5); } }),
|
|
136
|
+
React.createElement(MonthCell, { date: moment([year, 6, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(6); } }),
|
|
137
|
+
React.createElement(MonthCell, { date: moment([year, 7, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(7); } })),
|
|
141
138
|
React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
|
|
142
|
-
React.createElement(MonthCell, { date: moment([year, 8, 1]),
|
|
143
|
-
React.createElement(MonthCell, { date: moment([year, 9, 1]),
|
|
144
|
-
React.createElement(MonthCell, { date: moment([year, 10, 1]),
|
|
145
|
-
React.createElement(MonthCell, { date: moment([year, 11, 1]),
|
|
139
|
+
React.createElement(MonthCell, { date: moment([year, 8, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(8); } }),
|
|
140
|
+
React.createElement(MonthCell, { date: moment([year, 9, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(9); } }),
|
|
141
|
+
React.createElement(MonthCell, { date: moment([year, 10, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(10); } }),
|
|
142
|
+
React.createElement(MonthCell, { date: moment([year, 11, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(11); } }))) : null))));
|
|
146
143
|
}
|
|
147
144
|
var DayCell = function (props) {
|
|
148
145
|
var _a = React.useState(false), active = _a[0], setActive = _a[1];
|
|
149
146
|
var _b = React.useState(false), hover = _b[0], setHover = _b[1];
|
|
150
147
|
var _c = React.useState(false), disabled = _c[0], setDisabled = _c[1];
|
|
151
148
|
React.useEffect(function () {
|
|
152
|
-
|
|
149
|
+
var _a;
|
|
150
|
+
setActive(props.date.date() === ((_a = props.dateTime) === null || _a === void 0 ? void 0 : _a.date()) && props.dateTime.month() === props.date.month() && props.date.year() === props.dateTime.year());
|
|
153
151
|
setDisabled(props.date.month() !== props.month);
|
|
154
|
-
}, [props.month, props.date, props.
|
|
152
|
+
}, [props.month, props.date, props.dateTime]);
|
|
155
153
|
var color = (disabled ? '#777' : (active ? '#fff' : undefined));
|
|
156
154
|
var bg = (active ? '#337ab7' : hover ? '#d3d3d3' : undefined);
|
|
157
155
|
return React.createElement("td", { style: {
|
|
@@ -166,8 +164,9 @@ var MonthCell = function (props) {
|
|
|
166
164
|
var _a = React.useState(false), active = _a[0], setActive = _a[1];
|
|
167
165
|
var _b = React.useState(false), hover = _b[0], setHover = _b[1];
|
|
168
166
|
React.useEffect(function () {
|
|
169
|
-
|
|
170
|
-
|
|
167
|
+
var _a, _b;
|
|
168
|
+
setActive(props.date.month() === ((_a = props.dateTime) === null || _a === void 0 ? void 0 : _a.month()) && props.date.year() === ((_b = props.dateTime) === null || _b === void 0 ? void 0 : _b.year()));
|
|
169
|
+
}, [props.date, props.dateTime]);
|
|
171
170
|
var color = (active ? '#fff' : undefined);
|
|
172
171
|
var bg = (active ? '#337ab7' : hover ? '#d3d3d3' : undefined);
|
|
173
172
|
return React.createElement("td", { style: {
|