oolib 2.66.0 → 2.67.0
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.
|
@@ -61,15 +61,24 @@ var months = [
|
|
|
61
61
|
];
|
|
62
62
|
var weeks = ["S", "M", "T", "W", "Th", "F", "Sa"];
|
|
63
63
|
var flag = true;
|
|
64
|
+
// note -> doesn't check time
|
|
65
|
+
var isEqualDate = function (date1, date2) {
|
|
66
|
+
return date1.getDate() === date2.getDate() &&
|
|
67
|
+
date1.getMonth() === date2.getMonth() &&
|
|
68
|
+
date1.getFullYear() === date2.getFullYear();
|
|
69
|
+
};
|
|
64
70
|
function DatePicker(props) {
|
|
65
71
|
var _a, _b, _c;
|
|
66
72
|
var value = props.value, onParentChange = props.onChange, id = props.id, from = props.from, readOnly = props.readOnly, previousDateOnly = props.previousDateOnly, futureDateOnly = props.futureDateOnly, invert = props.invert, disabled = props.disabled, debug = props.debug;
|
|
67
73
|
var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
|
|
68
74
|
var inputRef = (0, react_1.useRef)(null);
|
|
69
75
|
var calenderRef = (0, react_1.useRef)(null);
|
|
76
|
+
var containerRef = (0, react_1.useRef)(null);
|
|
70
77
|
var _d = (0, react_1.useState)({}), calender = _d[0], setCalender = _d[1];
|
|
71
|
-
var _e = (0, react_1.useState)(
|
|
72
|
-
var _f = (0, react_1.useState)(
|
|
78
|
+
var _e = (0, react_1.useState)(false), showCalendar = _e[0], setShowCalendar = _e[1];
|
|
79
|
+
var _f = (0, react_1.useState)(null), range = _f[0], setRange = _f[1];
|
|
80
|
+
var _g = (0, react_1.useState)(0), monthNumber = _g[0], setMonthNumber = _g[1];
|
|
81
|
+
(0, _EXPORTS_1.useHandleClickOutside)(containerRef, setShowCalendar);
|
|
73
82
|
var debounce = function (dy, delay) {
|
|
74
83
|
clearTimeout(dy._tId);
|
|
75
84
|
dy._tId = setTimeout(function () {
|
|
@@ -120,7 +129,7 @@ function DatePicker(props) {
|
|
|
120
129
|
setRange(new Date(calender.year, calender.month, calender.today));
|
|
121
130
|
}
|
|
122
131
|
(0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
|
|
123
|
-
}, [from]);
|
|
132
|
+
}, [from, showCalendar]);
|
|
124
133
|
(0, react_1.useEffect)(function () {
|
|
125
134
|
if (readOnly)
|
|
126
135
|
return;
|
|
@@ -136,7 +145,7 @@ function DatePicker(props) {
|
|
|
136
145
|
var handleChangeMonth = function (e, month) {
|
|
137
146
|
e.preventDefault();
|
|
138
147
|
monthNumber += month;
|
|
139
|
-
setMonthNumber(monthNumber);
|
|
148
|
+
setMonthNumber(monthNumber < 0 ? 0 : monthNumber); // if
|
|
140
149
|
(0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
|
|
141
150
|
};
|
|
142
151
|
var handleDayClick = function (e, item) {
|
|
@@ -148,6 +157,8 @@ function DatePicker(props) {
|
|
|
148
157
|
if (from) {
|
|
149
158
|
setRange(item);
|
|
150
159
|
}
|
|
160
|
+
onParentChange(id, item.toISOString(), props.passChangeHandlerOps && props);
|
|
161
|
+
setShowCalendar(false);
|
|
151
162
|
};
|
|
152
163
|
// returns date string in dd/mm/yyyy
|
|
153
164
|
var buildDateInput = function (dateObj) {
|
|
@@ -170,19 +181,29 @@ function DatePicker(props) {
|
|
|
170
181
|
}
|
|
171
182
|
inputRef.current.value = input;
|
|
172
183
|
};
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
184
|
+
// function handleFocusOut() {
|
|
185
|
+
// if (from && inputRef.current.value.split("/")[1] === calender.month + 1) {
|
|
186
|
+
// setRange(new Date(calender.year, calender.month, calender.today));
|
|
187
|
+
// }
|
|
188
|
+
// monthNumber = 0;
|
|
189
|
+
// setMonthNumber(monthNumber);
|
|
190
|
+
// let dateObj = buildCalenderObj(
|
|
191
|
+
// from,
|
|
192
|
+
// inputRef,
|
|
193
|
+
// monthNumber,
|
|
194
|
+
// calender,
|
|
195
|
+
// setCalender
|
|
196
|
+
// );
|
|
197
|
+
// if (from && dateObj < from) {
|
|
198
|
+
// dateObj = from;
|
|
199
|
+
// }
|
|
200
|
+
// inputRef.current.value = buildDateInput(dateObj);
|
|
201
|
+
// onParentChange(
|
|
202
|
+
// id,
|
|
203
|
+
// dateObj.toISOString(),
|
|
204
|
+
// props.passChangeHandlerOps && props
|
|
205
|
+
// );
|
|
206
|
+
// }
|
|
186
207
|
var handleOnChange = function () {
|
|
187
208
|
autoFormatter();
|
|
188
209
|
setMonthNumber(0);
|
|
@@ -190,6 +211,7 @@ function DatePicker(props) {
|
|
|
190
211
|
if (from) {
|
|
191
212
|
setRange(dateObj);
|
|
192
213
|
}
|
|
214
|
+
onParentChange(id, dateObj.toISOString(), props.passChangeHandlerOps && props);
|
|
193
215
|
};
|
|
194
216
|
var handleKeyDown = function (e) {
|
|
195
217
|
if (e.keyCode === 8) {
|
|
@@ -214,17 +236,18 @@ function DatePicker(props) {
|
|
|
214
236
|
return value; // this means that the value is 'Presently Ongoing'
|
|
215
237
|
return "".concat(dateObj.getDate(), " ").concat(months[dateObj.getMonth()].substring(0, 3), " ").concat(dateObj.getFullYear());
|
|
216
238
|
};
|
|
217
|
-
var
|
|
218
|
-
var _a, _b;
|
|
219
|
-
return item
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
239
|
+
var isSelectedDate = function (item) {
|
|
240
|
+
var _a, _b, _c;
|
|
241
|
+
return item
|
|
242
|
+
? ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.split("/")[0]) == item.getDate() &&
|
|
243
|
+
((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value.split("/")[1]) - 1 === item.getMonth() &&
|
|
244
|
+
((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value.split("/")[2]) == item.getFullYear()
|
|
245
|
+
: false;
|
|
223
246
|
};
|
|
224
247
|
var isTodaysDate = function (item) {
|
|
225
248
|
return item.getDate() === new Date().getDate() &&
|
|
226
|
-
|
|
227
|
-
|
|
249
|
+
item.getMonth() === new Date().getMonth() &&
|
|
250
|
+
item.getFullYear() === new Date().getFullYear();
|
|
228
251
|
};
|
|
229
252
|
var isDisabledDate = function (item) {
|
|
230
253
|
return (previousDateOnly && new Date() < item) ||
|
|
@@ -232,12 +255,14 @@ function DatePicker(props) {
|
|
|
232
255
|
};
|
|
233
256
|
return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
|
|
234
257
|
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
|
|
235
|
-
react_1.default.createElement(styled_1.StyledDateInputContainer, { invert: invert },
|
|
258
|
+
react_1.default.createElement(styled_1.StyledDateInputContainer, { invert: invert, onClick: function () { return setShowCalendar(true); }, ref: containerRef },
|
|
236
259
|
readOnly ? (react_1.default.createElement(Typo_1.SANS_3, null, getReadOnlyDate())) : (react_1.default.createElement(styled_1.StyledDateInputWrapper, null,
|
|
237
|
-
react_1.default.createElement(styled_1.StyledInput, { ref: inputRef, type: "text", className: "SANS_3", invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown,
|
|
260
|
+
react_1.default.createElement(styled_1.StyledInput, { ref: inputRef, type: "text", className: "SANS_3", invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown,
|
|
261
|
+
// onBlur={handleFocusOut}
|
|
262
|
+
onFocus: function () {
|
|
238
263
|
(0, handlePos_1.handleVerticalPos)(calenderRef, inputRef);
|
|
239
264
|
} }))),
|
|
240
|
-
react_1.default.createElement(styled_1.StyledCalenderContainer, { debug: debug, ref: calenderRef, className: "
|
|
265
|
+
react_1.default.createElement(styled_1.StyledCalenderContainer, { debug: debug, showCalendar: showCalendar, ref: calenderRef, className: " ".concat(from ? "right-class" : ""), invert: invert },
|
|
241
266
|
react_1.default.createElement(styled_1.StyledMonthView, null,
|
|
242
267
|
react_1.default.createElement(styled_1.StyledHeader, null,
|
|
243
268
|
wrapCaretLeft(),
|
|
@@ -251,38 +276,27 @@ function DatePicker(props) {
|
|
|
251
276
|
react_1.default.createElement(Typo_1.SANS_3, null, item))); })),
|
|
252
277
|
react_1.default.createElement(styled_1.StyledBodyWrapper, { invert: invert }, (_a = calender === null || calender === void 0 ? void 0 : calender.prevDays) === null || _a === void 0 ? void 0 :
|
|
253
278
|
_a.map(function (item, i) {
|
|
254
|
-
var _a, _b, _c, _d, _e, _f;
|
|
255
279
|
if (from) {
|
|
256
280
|
if (item < range && item > from) {
|
|
257
281
|
// Render the day as part of the selected range (when 'from' and 'range' are defined)
|
|
258
|
-
return (react_1.default.createElement(styled_1.StyledDateBlock, { range: true, key: i, invert: invert,
|
|
259
|
-
// className="range"
|
|
260
|
-
onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
|
|
282
|
+
return (react_1.default.createElement(styled_1.StyledDateBlock, { range: true, key: i, invert: invert, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); }, disableClick: isDisabledDate(item) },
|
|
261
283
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
262
284
|
}
|
|
263
285
|
else if (item < from) {
|
|
264
286
|
// Render disabled days before 'from' previous date (last month)
|
|
265
|
-
return (react_1.default.createElement(styled_1.StyledDateBlock, { isDisabledDate: true, key: i, invert: invert },
|
|
287
|
+
return (react_1.default.createElement(styled_1.StyledDateBlock, { isDisabledDate: true, key: i, invert: invert, disableClick: isDisabledDate(item) },
|
|
266
288
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
267
289
|
}
|
|
268
290
|
else {
|
|
269
291
|
// Render days in the previous month
|
|
270
292
|
// Check if the current day is 'today' or falls in the range of previousDateOnly or futureDateOnly
|
|
271
293
|
// and apply appropriate class name for styling
|
|
272
|
-
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert,
|
|
273
|
-
// isToday={isToday(item)}
|
|
274
|
-
isToday: item.getDate() === ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.split("/")[0]) &&
|
|
275
|
-
item.getMonth() + 1 === ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value.split("/")[1]) &&
|
|
276
|
-
item.getFullYear() === ((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value.split("/")[2]) ||
|
|
277
|
-
from.getTime() === item.getTime(), isDisabledDate: !(item.getDate() === ((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.value.split("/")[0]) &&
|
|
278
|
-
item.getMonth() + 1 === ((_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.value.split("/")[1]) &&
|
|
279
|
-
item.getFullYear() === ((_f = inputRef.current) === null || _f === void 0 ? void 0 : _f.value.split("/")[2]) ||
|
|
280
|
-
from.getTime() === item.getTime()) && isDisabledDate(item) && isDisabledDate(item), previousDateOnly: previousDateOnly, futureDateOnly: futureDateOnly, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
|
|
294
|
+
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isSelectedDate: isSelectedDate(item) || isEqualDate(from, item), isDisabledDate: isDisabledDate(item), isTodaysDate: isTodaysDate(item), onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); }, disableClick: isDisabledDate(item) },
|
|
281
295
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
282
296
|
}
|
|
283
297
|
}
|
|
284
298
|
else {
|
|
285
|
-
return (react_1.default.createElement(styled_1.StyledDateBlock, { isDisabledDate: true,
|
|
299
|
+
return (react_1.default.createElement(styled_1.StyledDateBlock, { isDisabledDate: true, key: i, invert: invert, isSelectedDate: isSelectedDate(item), onMouseDown: function (e) { return handleDayClick(e, item); }, disableClick: isDisabledDate(item) },
|
|
286
300
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
287
301
|
}
|
|
288
302
|
}), (_b = calender === null || calender === void 0 ? void 0 : calender.days) === null || _b === void 0 ? void 0 :
|
|
@@ -290,20 +304,19 @@ function DatePicker(props) {
|
|
|
290
304
|
if (from) {
|
|
291
305
|
if (item < from) {
|
|
292
306
|
// Render days before 'from' as disabled
|
|
293
|
-
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isDisabledDate: true },
|
|
307
|
+
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isDisabledDate: true, disableClick: isDisabledDate(item) },
|
|
294
308
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
295
309
|
}
|
|
296
310
|
else if (item > from && item < range) {
|
|
297
311
|
// Render days within the selected range
|
|
298
|
-
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, range: true, isTodaysDate: isTodaysDate(item), invert: invert, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
|
|
312
|
+
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, range: true, isTodaysDate: isTodaysDate(item), invert: invert, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); }, disableClick: isDisabledDate(item) },
|
|
299
313
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
300
314
|
}
|
|
301
315
|
else {
|
|
302
316
|
// Render days in the current month
|
|
303
317
|
// Check if the current day is 'today' or falls in the range of previousDateOnly or futureDateOnly
|
|
304
318
|
// and apply appropriate class name for styling
|
|
305
|
-
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert,
|
|
306
|
-
&& isDisabledDate(item), isTodaysDate: isTodaysDate(item), previousDateOnly: previousDateOnly, futureDateOnly: futureDateOnly, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
|
|
319
|
+
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isSelectedDate: isSelectedDate(item) || isEqualDate(from, item), isDisabledDate: isDisabledDate(item), isTodaysDate: isTodaysDate(item), onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); }, disableClick: isDisabledDate(item) },
|
|
307
320
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
308
321
|
}
|
|
309
322
|
}
|
|
@@ -311,48 +324,35 @@ function DatePicker(props) {
|
|
|
311
324
|
// Render days in the current month
|
|
312
325
|
// Check if the current day is 'today' or falls in the range of previousDateOnly or futureDateOnly
|
|
313
326
|
// and apply appropriate class name for styling
|
|
314
|
-
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i,
|
|
327
|
+
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, isSelectedDate: isSelectedDate(item), isTodaysDate: isTodaysDate(item), isDisabledDate: isDisabledDate(item), disableClick: isDisabledDate(item), invert: invert, onMouseDown: function (e) { return handleDayClick(e, item); } },
|
|
315
328
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
316
329
|
}
|
|
317
330
|
}), (_c = calender === null || calender === void 0 ? void 0 : calender.nextDays) === null || _c === void 0 ? void 0 :
|
|
318
331
|
_c.map(function (item, i) {
|
|
319
|
-
var _a, _b, _c, _d, _e, _f;
|
|
320
332
|
if (from) {
|
|
321
|
-
if (item
|
|
333
|
+
if (item > from && item < range) {
|
|
322
334
|
// Render days within the selected range
|
|
323
|
-
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, range: true,
|
|
324
|
-
// isDisabledDate={true}
|
|
325
|
-
onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
|
|
335
|
+
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, range: true, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); }, disableClick: isDisabledDate(item) },
|
|
326
336
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
327
337
|
}
|
|
328
338
|
else if (item < from) {
|
|
329
339
|
// Render disabled days before 'from'
|
|
330
340
|
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i,
|
|
331
341
|
// className="disabled-date"
|
|
332
|
-
invert: invert, isDisabledDate: true,
|
|
342
|
+
invert: invert, isDisabledDate: true, disableClick: isDisabledDate(item) },
|
|
333
343
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
334
344
|
}
|
|
335
345
|
else {
|
|
336
346
|
// Render days in the next month
|
|
337
347
|
// Check if the current day is 'today' or falls in the range of previousDateOnly or futureDateOnly
|
|
338
348
|
// and apply appropriate class name for styling
|
|
339
|
-
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert,
|
|
340
|
-
((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.split("/")[0]) &&
|
|
341
|
-
item.getMonth() + 1 ===
|
|
342
|
-
((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value.split("/")[1]) &&
|
|
343
|
-
item.getFullYear() ===
|
|
344
|
-
((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value.split("/")[2])), isDisabledDate: !(item.getDate() ===
|
|
345
|
-
((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.value.split("/")[0]) &&
|
|
346
|
-
item.getMonth() + 1 ===
|
|
347
|
-
((_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.value.split("/")[1]) &&
|
|
348
|
-
item.getFullYear() ===
|
|
349
|
-
((_f = inputRef.current) === null || _f === void 0 ? void 0 : _f.value.split("/")[2])) && isDisabledDate(item), previousDateOnly: previousDateOnly, futureDateOnly: futureDateOnly, onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
|
|
349
|
+
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isSelectedDate: isSelectedDate(item) || isEqualDate(from, item), isDisabledDate: isDisabledDate(item), disableClick: isDisabledDate(item), isTodaysDate: isTodaysDate(item), onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
|
|
350
350
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
351
351
|
}
|
|
352
352
|
}
|
|
353
353
|
else {
|
|
354
354
|
// Render days in the next month as disabled if 'from' is not defined
|
|
355
|
-
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isDisabledDate: true,
|
|
355
|
+
return (react_1.default.createElement(styled_1.StyledDateBlock, { key: i, invert: invert, isSelectedDate: isSelectedDate(item), isDisabledDate: true, disableClick: isDisabledDate(item), onMouseDown: function (e) { return handleDayClick(e, item); } },
|
|
356
356
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
357
357
|
}
|
|
358
358
|
})))))));
|
|
@@ -30,22 +30,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
30
30
|
exports.StyledBodyWrapper = exports.StyledWeekdays = exports.StyledWeekDaysWrapper = exports.StyledHeader = exports.StyledMonthTitle = exports.StyledMonthView = exports.StyledDateBlock = exports.StyledCalenderContainer = exports.StyledDateInputWrapper = exports.StyledInput = exports.StyledDateInputContainer = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var themes_1 = require("../../themes");
|
|
33
|
-
var Buttons_1 = require("../Buttons");
|
|
34
33
|
var globalVariables_1 = require("../../globalStyles/globalVariables");
|
|
35
34
|
var mixins_1 = require("../../themes/mixins");
|
|
36
35
|
var greyColor80 = themes_1.colors.greyColor80, greyColor5 = themes_1.colors.greyColor5, greyColor70 = themes_1.colors.greyColor70, greyColor10 = themes_1.colors.greyColor10, primaryColor100 = themes_1.colors.primaryColor100, greyColor40 = themes_1.colors.greyColor40, white = themes_1.colors.white, primaryColor10 = themes_1.colors.primaryColor10, greyColor15 = themes_1.colors.greyColor15, greyColor3 = themes_1.colors.greyColor3, greyColor100 = themes_1.colors.greyColor100;
|
|
37
|
-
exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
38
|
-
exports.StyledInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n
|
|
36
|
+
exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n"], ["\n position: relative;\n width: fit-content;\n"])));
|
|
37
|
+
exports.StyledInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n background: ", ";\n outline: none;\n border: none;\n width: 13rem;\n height: 4rem;\n color: ", ";\n\n ", "\n &:focus {\n background-color: ", ";\n }\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n"], ["\n ", "\n background: ", ";\n outline: none;\n border: none;\n width: 13rem;\n height: 4rem;\n color: ", ";\n\n ", "\n &:focus {\n background-color: ", ";\n }\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
|
|
39
38
|
var invert = _a.invert;
|
|
40
39
|
return (invert ? greyColor80 : greyColor5);
|
|
41
40
|
}, function (_a) {
|
|
42
41
|
var invert = _a.invert, disabled = _a.disabled;
|
|
43
42
|
return invert
|
|
44
|
-
?
|
|
45
|
-
|
|
43
|
+
? disabled
|
|
44
|
+
? themes_1.colors.greyColor40
|
|
45
|
+
: themes_1.colors.white
|
|
46
|
+
: disabled
|
|
47
|
+
? themes_1.colors.greyColor40
|
|
48
|
+
: themes_1.colors.greyColor100;
|
|
46
49
|
}, function (_a) {
|
|
47
50
|
var disabled = _a.disabled;
|
|
48
|
-
return (disabled ?
|
|
51
|
+
return (disabled ? "" : globalVariables_1.globalInputElemHover);
|
|
49
52
|
}, function (_a) {
|
|
50
53
|
var invert = _a.invert, disabled = _a.disabled;
|
|
51
54
|
return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
|
|
@@ -53,57 +56,72 @@ exports.StyledInput = styled_components_1.default.input(templateObject_3 || (tem
|
|
|
53
56
|
var disabled = _a.disabled;
|
|
54
57
|
return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", "\n background-color: ", ";\n cursor: not-allowed;\n &:hover{\n background-color: none !important;\n }\n "], ["\n color: ", "\n background-color: ", ";\n cursor: not-allowed;\n &:hover{\n background-color: none !important;\n }\n "])), greyColor40, greyColor15);
|
|
55
58
|
}, greyColor40);
|
|
56
|
-
exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n
|
|
57
|
-
exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n
|
|
58
|
-
var debug = _a.debug;
|
|
59
|
-
return
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
return invert ? greyColor3 : primaryColor10;
|
|
63
|
-
}, function (_a) {
|
|
64
|
-
var invert = _a.invert;
|
|
65
|
-
return invert && greyColor80;
|
|
66
|
-
}, primaryColor100, white, primaryColor100, primaryColor100, function (_a) {
|
|
67
|
-
var invert = _a.invert;
|
|
68
|
-
return !invert ? greyColor100 : white;
|
|
69
|
-
}, primaryColor100, primaryColor100, white, white);
|
|
70
|
-
exports.StyledDateBlock = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font-size: 1.4rem;\n width: calc(280px / 7);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 4rem;\n border-bottom: ", ";\n ", "\n cursor: pointer;\n color: ", ";\n ", "\n ", "\n \n ", "\n\n\n ", " \n \n ", "\n\n\n ", "\n\n ", "\n"], ["\n font-size: 1.4rem;\n width: calc(280px / 7);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 4rem;\n border-bottom: ", ";\n ", "\n cursor: pointer;\n color: ", ";\n ", "\n ", "\n \n ", "\n\n\n ", " \n \n ", "\n\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
59
|
+
exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), globalVariables_1.globalInputElemFocused);
|
|
60
|
+
exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n position: absolute;\n width: 30rem;\n z-index: 10000;\n\n visibility: ", ";\n /* transform: scaleY(0); \n transform-origin: top center; \n transition: transform 0.5s; */\n\n /* &:not(:focus-within .calender-container) {\n transform: scaleY(0);\n visibility: hidden;\n transition: transform 0.5s, visibility 0s 0.5s; /* Delay visibility change after animation */\n /* } */\n\n"], ["\n ", "\n position: absolute;\n width: 30rem;\n z-index: 10000;\n\n visibility: ", ";\n /* transform: scaleY(0); \n transform-origin: top center; \n transition: transform 0.5s; */\n\n /* &:not(:focus-within .calender-container) {\n transform: scaleY(0);\n visibility: hidden;\n transition: transform 0.5s, visibility 0s 0.5s; /* Delay visibility change after animation */\n /* } */\n\n"])), globalVariables_1.globalLightboxStyle, function (_a) {
|
|
61
|
+
var showCalendar = _a.showCalendar, debug = _a.debug;
|
|
62
|
+
return debug ? "" : showCalendar ? "visible" : "hidden";
|
|
63
|
+
});
|
|
64
|
+
exports.StyledDateBlock = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n font-size: 1.4rem;\n width: calc(280px / 7);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 4rem;\n border-bottom: ", ";\n ", "\n cursor: pointer;\n color: ", ";\n ", "\n ", "\n \n ", "\n\n\n ", " \n \n ", "\n\n\n ", "\n\n ", "\n\n\n ", "\n\n ", "\n"], ["\n font-size: 1.4rem;\n width: calc(280px / 7);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 4rem;\n border-bottom: ", ";\n ", "\n cursor: pointer;\n color: ", ";\n ", "\n ", "\n \n ", "\n\n\n ", " \n \n ", "\n\n\n ", "\n\n ", "\n\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
71
65
|
var invert = _a.invert;
|
|
72
66
|
return !invert ? "1px solid ".concat(white) : "1px solid ".concat(greyColor80);
|
|
73
|
-
}, (0, mixins_1.transition)(
|
|
67
|
+
}, (0, mixins_1.transition)("background-color 0.2s"), function (_a) {
|
|
74
68
|
var invert = _a.invert;
|
|
75
69
|
return invert && white;
|
|
76
70
|
}, globalVariables_1.globalHoverOnWhiteBG, function (_a) {
|
|
77
|
-
var isTodaysDate = _a.isTodaysDate
|
|
78
|
-
return isTodaysDate && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n
|
|
71
|
+
var isTodaysDate = _a.isTodaysDate;
|
|
72
|
+
return isTodaysDate && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n &::after {\n content: \"\";\n background-color: ", ";\n width: 0.7rem;\n height: 0.7rem;\n position: absolute;\n border-radius: 50%;\n bottom: 0.3rem;\n }\n "], ["\n position: relative;\n &::after {\n content: \"\";\n background-color: ", ";\n width: 0.7rem;\n height: 0.7rem;\n position: absolute;\n border-radius: 50%;\n bottom: 0.3rem;\n }\n "])), primaryColor100);
|
|
79
73
|
}, function (_a) {
|
|
80
74
|
var isDisabledDate = _a.isDisabledDate;
|
|
81
|
-
return isDisabledDate && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n
|
|
75
|
+
return isDisabledDate && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n opacity: 0.5;\n "], ["\n opacity: 0.5;\n "])));
|
|
82
76
|
}, function (_a) {
|
|
83
|
-
var
|
|
84
|
-
return
|
|
77
|
+
var isSelectedDate = _a.isSelectedDate, isTodaysDate = _a.isTodaysDate;
|
|
78
|
+
return isSelectedDate &&
|
|
79
|
+
isTodaysDate && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: relative;\n /* background-color: ", "; */\n pointer-events: none;\n color: white;\n &::after {\n content: \"\";\n background-color: ", ";\n width: 0.7rem;\n height: 0.7rem;\n position: absolute;\n border-radius: 50%;\n bottom: 0.3rem;\n }\n "], ["\n position: relative;\n /* background-color: ", "; */\n pointer-events: none;\n color: white;\n &::after {\n content: \"\";\n background-color: ", ";\n width: 0.7rem;\n height: 0.7rem;\n position: absolute;\n border-radius: 50%;\n bottom: 0.3rem;\n }\n "])), primaryColor100, white);
|
|
85
80
|
}, function (_a) {
|
|
86
81
|
var range = _a.range, invert = _a.invert;
|
|
87
|
-
return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n
|
|
82
|
+
return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n "], ["\n background-color: ", ";\n color: ", ";\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n "])), !invert && range
|
|
83
|
+
? primaryColor10
|
|
84
|
+
: invert && range && greyColor3, !invert && range
|
|
85
|
+
? greyColor80
|
|
86
|
+
: invert && range
|
|
87
|
+
? greyColor80
|
|
88
|
+
: !invert && !range
|
|
89
|
+
? greyColor100
|
|
90
|
+
: white, !invert && range
|
|
91
|
+
? primaryColor10
|
|
92
|
+
: invert && range && greyColor3, !invert && range
|
|
93
|
+
? greyColor80
|
|
94
|
+
: invert && range
|
|
95
|
+
? greyColor80
|
|
96
|
+
: !invert && !range
|
|
97
|
+
? greyColor100
|
|
98
|
+
: white);
|
|
88
99
|
}, function (_a) {
|
|
89
100
|
var isToday = _a.isToday;
|
|
90
|
-
return isToday && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n
|
|
101
|
+
return isToday && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n pointer-events: none; // disable hover style\n background-color: ", ";\n color: white;\n &:hover {\n background-color: ", ";\n color: white;\n }\n "], ["\n pointer-events: none; // disable hover style\n background-color: ", ";\n color: white;\n &:hover {\n background-color: ", ";\n color: white;\n }\n "])), primaryColor100, primaryColor100);
|
|
102
|
+
}, function (_a) {
|
|
103
|
+
var isSelectedDate = _a.isSelectedDate;
|
|
104
|
+
return isSelectedDate && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n pointer-events: none; // disable hover style\n background-color: ", ";\n color: white;\n &:hover {\n background-color: ", ";\n color: white;\n }\n "], ["\n pointer-events: none; // disable hover style\n background-color: ", ";\n color: white;\n &:hover {\n background-color: ", ";\n color: white;\n }\n "])), primaryColor100, primaryColor100);
|
|
105
|
+
}, function (_a) {
|
|
106
|
+
var disableClick = _a.disableClick;
|
|
107
|
+
return disableClick && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "])));
|
|
91
108
|
}, function (_a) {
|
|
92
109
|
var previousDateOnly = _a.previousDateOnly, futureDateOnly = _a.futureDateOnly, isDisabledDate = _a.isDisabledDate;
|
|
93
|
-
return ((previousDateOnly && isDisabledDate) ||
|
|
110
|
+
return ((previousDateOnly && isDisabledDate) ||
|
|
111
|
+
(futureDateOnly && isDisabledDate)) && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n pointer-events: none !important;\n "], ["\n pointer-events: none !important;\n "])));
|
|
94
112
|
});
|
|
95
|
-
exports.StyledMonthView = styled_components_1.default.div(
|
|
96
|
-
exports.StyledMonthTitle = styled_components_1.default.div(
|
|
113
|
+
exports.StyledMonthView = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
|
|
114
|
+
exports.StyledMonthTitle = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n gap: 0.5rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: center;\n gap: 0.5rem;\n color: ", ";\n"])), function (_a) {
|
|
97
115
|
var invert = _a.invert;
|
|
98
116
|
return invert && white;
|
|
99
117
|
});
|
|
100
|
-
exports.StyledHeader = styled_components_1.default.div(
|
|
101
|
-
exports.StyledWeekDaysWrapper = styled_components_1.default.div(
|
|
102
|
-
exports.StyledWeekdays = styled_components_1.default.div(
|
|
118
|
+
exports.StyledHeader = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: flex;\n width: 90%;\n margin: auto;\n padding: 1.5rem 0 1rem 0;\n font-size: 1.4rem;\n font-weight: 600;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n width: 90%;\n margin: auto;\n padding: 1.5rem 0 1rem 0;\n font-size: 1.4rem;\n font-weight: 600;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
119
|
+
exports.StyledWeekDaysWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n height: 3.5rem;\n"], ["\n display: flex;\n justify-content: center;\n height: 3.5rem;\n"])));
|
|
120
|
+
exports.StyledWeekdays = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n font-size: 1.4rem;\n /* font-weight: 600; */\n opacity: 0.7;\n width: calc(280px / 7);\n display: flex;\n justify-content: center;\n align-items: center;\n color: ", ";\n"], ["\n font-size: 1.4rem;\n /* font-weight: 600; */\n opacity: 0.7;\n width: calc(280px / 7);\n display: flex;\n justify-content: center;\n align-items: center;\n color: ", ";\n"])), function (_a) {
|
|
103
121
|
var invert = _a.invert;
|
|
104
122
|
return invert && white;
|
|
105
123
|
});
|
|
106
|
-
exports.StyledBodyWrapper = styled_components_1.default.div(
|
|
124
|
+
exports.StyledBodyWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n padding-bottom: 1rem;\n div {\n /* font-size: 1.4rem;\n width: calc(280px / 7);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 4rem;\n border: ", ";\n border-top: ", ";\n border-bottom: ", ";\n color: ", ";\n transition: background-color 0.2s; */\n /* &:hover:not(.today.todaysDate.selectedToday, .today) {\n cursor: pointer;\n } */\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n padding-bottom: 1rem;\n div {\n /* font-size: 1.4rem;\n width: calc(280px / 7);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 4rem;\n border: ", ";\n border-top: ", ";\n border-bottom: ", ";\n color: ", ";\n transition: background-color 0.2s; */\n /* &:hover:not(.today.todaysDate.selectedToday, .today) {\n cursor: pointer;\n } */\n }\n"])), function (_a) {
|
|
107
125
|
var invert = _a.invert;
|
|
108
126
|
return !invert ? "6px 0px ".concat(white) : "6px 0px ".concat(greyColor80);
|
|
109
127
|
}, function (_a) {
|
|
@@ -116,4 +134,4 @@ exports.StyledBodyWrapper = styled_components_1.default.div(templateObject_18 ||
|
|
|
116
134
|
var invert = _a.invert;
|
|
117
135
|
return invert && white;
|
|
118
136
|
});
|
|
119
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
|
|
137
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
|
|
@@ -30,7 +30,6 @@ var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
|
|
|
30
30
|
var CheckboxInput_1 = require("../RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput");
|
|
31
31
|
var DatePicker_1 = __importDefault(require("../DatePicker"));
|
|
32
32
|
var styled_1 = require("./styled");
|
|
33
|
-
var none = themes_1.colors.none;
|
|
34
33
|
function DateRangePicker(props) {
|
|
35
34
|
var onChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, allowPresentlyOngoing = props.allowPresentlyOngoing, invert = props.invert, disabled = props.disabled, debug = props.debug;
|
|
36
35
|
var currentDate = new Date(new Date().toLocaleDateString());
|
|
@@ -62,7 +62,7 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
|
|
|
62
62
|
var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
|
|
63
63
|
return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
|
|
64
64
|
popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
|
|
65
|
-
react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { isOpen: showOptions, width: (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.width, openHeight: (_g = (_f = ref.current) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.height, style: __assign({ zIndex: 100000 }, (fixPos
|
|
65
|
+
react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { invert: invert, isOpen: showOptions, width: (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.width, openHeight: (_g = (_f = ref.current) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.height, style: __assign({ zIndex: 100000 }, (fixPos
|
|
66
66
|
? __assign({ position: "fixed", top: "".concat(fixPos.y -
|
|
67
67
|
(yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top"
|
|
68
68
|
? { transform: "translateY(-100%)" }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "oolib",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.67.0",
|
|
4
4
|
"description": " OKE Component Library",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -92,6 +92,7 @@
|
|
|
92
92
|
"draft-js": "^0.11.7",
|
|
93
93
|
"draftjs-conductor": "^2.2.0",
|
|
94
94
|
"immutable": "^3.7.6",
|
|
95
|
+
"localtunnel": "^2.0.2",
|
|
95
96
|
"lodash": "^4.17.21",
|
|
96
97
|
"modularscale-js": "^3.0.1",
|
|
97
98
|
"moment": "^2.24.0",
|