@desynova-digital/components 9.1.39 → 9.1.40
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/atoms/datePicker/datePicker.js +123 -110
- package/atoms/icon/icons.json +2 -2
- package/molecules/filter/filter.js +16 -10
- package/package.json +2 -2
|
@@ -26,20 +26,20 @@ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (
|
|
|
26
26
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
27
27
|
//'@desynova-digital/tokens'
|
|
28
28
|
|
|
29
|
-
var DatePickerInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n & div.form-input > input {\n display: ", ";\n }\n .label-text{\n cursor: ", ";\n pointer-events: ", ";\n }\n\n .form-input input {\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n\n font-family:
|
|
30
|
-
return props.inline ?
|
|
29
|
+
var DatePickerInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n & div.form-input > input {\n display: ", ";\n }\n .label-text {\n cursor: ", ";\n pointer-events: ", ";\n }\n\n .form-input input {\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n\n font-family: \"SFUIText-Medium\";\n color: ", ";\n cursor: ", ";\n pointer-events: ", ";\n font-size: 14px;\n padding: 10px 20px 4px 0px;\n display: block;\n\n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n opacity: ", ";\n transition: 0.2s ease all;\n }\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n }\n\n .form-input {\n border-bottom: 1px solid\n ", ";\n\n &:hover {\n border-color: ", ";\n }\n position: relative;\n margin-top: 20px;\n display: flex;\n align-items: center;\n .calender-icon {\n cursor: pointer;\n path {\n fill-rule: evenodd;\n clip-rule: evenodd;\n }\n }\n\n .clear-icon {\n position: absolute;\n right: 0px;\n bottom: 6px;\n cursor: pointer;\n path {\n fill: #ef5350;\n }\n }\n }\n .form-input label {\n color: ", ";\n font-size: 14px;\n font-family: \"SFUIText-Regular\";\n position: ", ";\n pointer-events: none;\n text-transform: none;\n left: 0px;\n top: ", ";\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n\n .form-input label.floaton {\n top: ", ";\n left: 0px;\n font-size: 10px;\n color: ", ";\n text-transform: capitalize;\n }\n\n /* ======Date picker====== */\n\n &.ardp-date-picker {\n font-size: 16px;\n font-family: \"SFUIText-Regular\";\n box-sizing: border-box;\n position: relative;\n }\n .calendar {\n position: ", ";\n left: ", ";\n top: ", ";\n right: ", ";\n bottom: ", ";\n }\n &.ardp-date-picker * {\n box-sizing: border-box;\n }\n &.ardp-date-picker div.calendar {\n position: ", ";\n z-index: ", ";\n background: ", ";\n width: 300px;\n border-radius: 0px;\n height: auto;\n overflow: hidden;\n border: 1px solid\n ", ";\n }\n\n &.ardp-date-picker div.calendar:after,\n &.ardp-date-picker div.calendar:before {\n display: table;\n content: \" \";\n box-sizing: border-box;\n }\n\n &.ardp-date-picker div.calendar.calendar-show {\n visibility: visible;\n opacity: 1;\n transition: opacity 100ms linear;\n }\n &.ardp-date-picker div.calendar.calendar-hide {\n visibility: ", ";\n opacity: ", ";\n transition: visibility 0s 100ms, opacity 100ms linear;\n }\n\n &.ardp-date-picker div.calendar div.month-header {\n float: left;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n padding: 10px;\n border-bottom: 1px solid\n ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i {\n cursor: pointer;\n padding: 6px;\n border-radius: 50%;\n width: 25px;\n text-align: center;\n height: 25px;\n border-radius: 18px;\n background-color: ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i:hover {\n path {\n stroke: ", ";\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span > i > svg {\n path {\n fill: transparent;\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span.month-header-text {\n color: ", ";\n width: 150px;\n text-align: center;\n }\n &.ardp-date-picker\n div.calendar\n div.month-header\n > span.month-header-text\n > .month-text {\n font-family: \"SFUIText-Medium\";\n color: ", ";\n text-transform: uppercase;\n }\n\n &.ardp-date-picker div.calendar div.week-header {\n float: left;\n width: 100%;\n display: block;\n padding: 10px 3px;\n }\n &.ardp-date-picker div.calendar div.week-header > span {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-transform: uppercase;\n color: ", ";\n text-align: center;\n }\n &.ardp-date-picker div.calendar div.weeks {\n float: left;\n width: 100%;\n overflow: hidden;\n position: relative;\n padding: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks > div {\n width: 300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.current {\n left: 0;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other {\n left: 300px;\n position: absolute;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other.right {\n left: -300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding {\n transition: transform 250ms ease;\n -webkit-transition: -webkit-transform 250ms ease;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.left {\n transform: translate3d(-300px, 0, 0);\n -webkit-transform: translate3d(-300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.right {\n transform: translate3d(300px, 0, 0);\n -webkit-transform: translate3d(300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks div.week {\n float: left;\n width: 100%;\n margin: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-align: center;\n /* padding: 2px 0px; */\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span {\n //padding: 11px 0px 5px;\n display: inline-block;\n border-radius: 50%;\n height: 30px;\n width: 30px;\n text-align: center;\n border: 1px solid transparent;\n background: ", ";\n color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span:hover,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.today\n > span:hover {\n background: ", ";\n cursor: pointer;\n color: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.other-month\n > span {\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.disabled\n > span:hover {\n color: ", ";\n cursor: not-allowed;\n background: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.other-month.disabled\n > span {\n color: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span {\n border: 1px none\n ", ";\n color: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.today.disabled\n > span {\n background: ", ";\n border: 1px solid transparent;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.today\n > span:hover {\n background: ", ";\n color: ", ";\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.disabled\n > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.disabled\n > span:hover {\n background: ", ";\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.range-start {\n background: ", ";\n\n border-top-left-radius: 30px;\n border-bottom-left-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.range-end {\n background: ", ";\n\n border-top-right-radius: 30px;\n border-bottom-right-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.in-selected-range {\n background: ", ";\n & > span {\n background: transparent;\n color: #fff;\n }\n }\n"])), function (props) {
|
|
30
|
+
return props.inline ? "none" : "block";
|
|
31
31
|
}, function (props) {
|
|
32
|
-
return props.readOnly ?
|
|
32
|
+
return props.readOnly ? "not-allowed" : "pointer";
|
|
33
33
|
}, function (props) {
|
|
34
|
-
return props.readOnly ?
|
|
34
|
+
return props.readOnly ? "none" : "all";
|
|
35
35
|
}, function (props) {
|
|
36
36
|
return _tokens.colors[props.theme].inputCommon.background;
|
|
37
37
|
}, function (props) {
|
|
38
38
|
return _tokens.colors[props.theme].datepicker.selectedColor;
|
|
39
39
|
}, function (props) {
|
|
40
|
-
return props.readOnly ?
|
|
40
|
+
return props.readOnly ? "not-allowed" : "pointer";
|
|
41
41
|
}, function (props) {
|
|
42
|
-
return props.readOnly ?
|
|
42
|
+
return props.readOnly ? "none" : "all";
|
|
43
43
|
}, function (props) {
|
|
44
44
|
return _tokens.colors[props.theme].inputCommon.borderDisabled;
|
|
45
45
|
}, function (props) {
|
|
@@ -47,11 +47,11 @@ var DatePickerInput = _styledComponents["default"].div(_templateObject || (_temp
|
|
|
47
47
|
}, function (props) {
|
|
48
48
|
return _tokens.colors[props.theme].inputCommon.colorDisabled;
|
|
49
49
|
}, function (props) {
|
|
50
|
-
return props.label ?
|
|
50
|
+
return props.label ? "transparent" : function (props) {
|
|
51
51
|
return _tokens.colors[props.theme].inputCommon.placeholder;
|
|
52
52
|
};
|
|
53
53
|
}, function (props) {
|
|
54
|
-
return props.label ?
|
|
54
|
+
return props.label ? "0" : "1";
|
|
55
55
|
}, function (props) {
|
|
56
56
|
return props.placeholder ? function (props) {
|
|
57
57
|
return _tokens.colors[props.theme].inputCommon.placeholder;
|
|
@@ -59,7 +59,7 @@ var DatePickerInput = _styledComponents["default"].div(_templateObject || (_temp
|
|
|
59
59
|
return _tokens.colors[props.theme].inputCommon.placeholder;
|
|
60
60
|
};
|
|
61
61
|
}, function (props) {
|
|
62
|
-
return props.placeholder ?
|
|
62
|
+
return props.placeholder ? "1" : "1";
|
|
63
63
|
}, function (props) {
|
|
64
64
|
if (props.error) {
|
|
65
65
|
return _tokens.colors[props.theme].inputError.border;
|
|
@@ -73,35 +73,35 @@ var DatePickerInput = _styledComponents["default"].div(_templateObject || (_temp
|
|
|
73
73
|
}, function (props) {
|
|
74
74
|
return _tokens.colors[props.theme].inputLabel.color;
|
|
75
75
|
}, function (props) {
|
|
76
|
-
return props.inline ?
|
|
76
|
+
return props.inline ? "relative" : "absolute";
|
|
77
77
|
}, function (props) {
|
|
78
|
-
return props.inline ?
|
|
78
|
+
return props.inline ? "0px" : "10px";
|
|
79
79
|
}, function (props) {
|
|
80
|
-
return props.inline ?
|
|
80
|
+
return props.inline ? "0px" : "-10px;";
|
|
81
81
|
}, function (props) {
|
|
82
82
|
return _tokens.colors[props.theme].inputLabel.colorOnFocus;
|
|
83
83
|
}, function (props) {
|
|
84
|
-
return props.baseStyles && props.baseStyles.position ? props.baseStyles.position :
|
|
84
|
+
return props.baseStyles && props.baseStyles.position ? props.baseStyles.position : "";
|
|
85
85
|
}, function (props) {
|
|
86
|
-
return props.baseStyles && props.baseStyles.left ? props.baseStyles.left :
|
|
86
|
+
return props.baseStyles && props.baseStyles.left ? props.baseStyles.left : "";
|
|
87
87
|
}, function (props) {
|
|
88
|
-
return props.baseStyles && props.baseStyles.top ? props.baseStyles.top :
|
|
88
|
+
return props.baseStyles && props.baseStyles.top ? props.baseStyles.top : "";
|
|
89
89
|
}, function (props) {
|
|
90
|
-
return props.baseStyles && props.baseStyles.right ? props.baseStyles.right :
|
|
90
|
+
return props.baseStyles && props.baseStyles.right ? props.baseStyles.right : "";
|
|
91
91
|
}, function (props) {
|
|
92
|
-
return props.baseStyles && props.baseStyles.bottom ? props.baseStyles.bottom :
|
|
92
|
+
return props.baseStyles && props.baseStyles.bottom ? props.baseStyles.bottom : "";
|
|
93
93
|
}, function (props) {
|
|
94
|
-
return props.inline ?
|
|
94
|
+
return props.inline ? "relative" : "absolute";
|
|
95
95
|
}, function (props) {
|
|
96
|
-
return props.inline ?
|
|
96
|
+
return props.inline ? "0" : "10";
|
|
97
97
|
}, function (props) {
|
|
98
98
|
return _tokens.colors[props.theme].datepicker.background;
|
|
99
99
|
}, function (props) {
|
|
100
100
|
return _tokens.colors[props.theme].datepicker.calenderBorder;
|
|
101
101
|
}, function (props) {
|
|
102
|
-
return props.inline ?
|
|
102
|
+
return props.inline ? "visible" : "hidden";
|
|
103
103
|
}, function (props) {
|
|
104
|
-
return props.inline ?
|
|
104
|
+
return props.inline ? "1" : "0";
|
|
105
105
|
}, function (props) {
|
|
106
106
|
return _tokens.colors[props.theme].datepicker.monthHeaderBorder;
|
|
107
107
|
}, function (props) {
|
|
@@ -149,12 +149,12 @@ var DatePickerInput = _styledComponents["default"].div(_templateObject || (_temp
|
|
|
149
149
|
}, function (props) {
|
|
150
150
|
return _tokens.colors[props.theme].datepicker.daySelectedBackground;
|
|
151
151
|
});
|
|
152
|
-
var InputError = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family:
|
|
152
|
+
var InputError = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: \"SFUIText-Medium\" !important;\n padding-top: 5px;\n display: inline-block;\n font-size: 12px;\n font-family: inherit;\n width: 100%;\n text-align: left;\n"])), function (props) {
|
|
153
153
|
return _tokens.colors[props.theme].inputError.color;
|
|
154
154
|
});
|
|
155
155
|
var DateUtilities = exports.DateUtilities = {
|
|
156
156
|
pad: function pad(value, length) {
|
|
157
|
-
while (value.length < length) value =
|
|
157
|
+
while (value.length < length) value = "0" + value;
|
|
158
158
|
return value;
|
|
159
159
|
},
|
|
160
160
|
clone: function clone(date) {
|
|
@@ -165,17 +165,17 @@ var DateUtilities = exports.DateUtilities = {
|
|
|
165
165
|
},
|
|
166
166
|
toString: function toString(date) {
|
|
167
167
|
if (date) {
|
|
168
|
-
return DateUtilities.pad(date.getDate().toString(), 2) +
|
|
168
|
+
return DateUtilities.pad(date.getDate().toString(), 2) + "/" + DateUtilities.pad((date.getMonth() + 1).toString(), 2) + "/" + date.getFullYear();
|
|
169
169
|
}
|
|
170
|
-
return
|
|
170
|
+
return "";
|
|
171
171
|
},
|
|
172
172
|
toDayOfMonthString: function toDayOfMonthString(date) {
|
|
173
173
|
return DateUtilities.pad(date.getDate().toString());
|
|
174
174
|
},
|
|
175
175
|
toMonthAndYearString: function toMonthAndYearString(date) {
|
|
176
|
-
var months = [
|
|
176
|
+
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
177
177
|
return {
|
|
178
|
-
monthYear: months[date.getMonth()] +
|
|
178
|
+
monthYear: months[date.getMonth()] + " " + date.getFullYear(),
|
|
179
179
|
month: months[date.getMonth()],
|
|
180
180
|
year: date.getFullYear()
|
|
181
181
|
};
|
|
@@ -194,21 +194,21 @@ var DateUtilities = exports.DateUtilities = {
|
|
|
194
194
|
return first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth() && first.getDate() === second.getDate();
|
|
195
195
|
},
|
|
196
196
|
stringToDate: function stringToDate(date) {
|
|
197
|
-
if (typeof date ===
|
|
198
|
-
return date.trim().length ? new Date(date.split(
|
|
197
|
+
if (typeof date === "string") {
|
|
198
|
+
return date.trim().length ? new Date(date.split("/")[1] + "/" + date.split("/")[0] + "/" + date.split("/")[2]) : null;
|
|
199
199
|
}
|
|
200
|
-
if (typeof date ===
|
|
200
|
+
if (typeof date === "number") {
|
|
201
201
|
return new Date(date);
|
|
202
202
|
}
|
|
203
203
|
},
|
|
204
204
|
isBefore: function isBefore(first, second) {
|
|
205
|
-
if (typeof second ===
|
|
205
|
+
if (typeof second === "string" || typeof second === "number") {
|
|
206
206
|
second = DateUtilities.stringToDate(second);
|
|
207
207
|
}
|
|
208
208
|
return first.getTime() < second.getTime();
|
|
209
209
|
},
|
|
210
210
|
isAfter: function isAfter(first, second) {
|
|
211
|
-
if (typeof second ===
|
|
211
|
+
if (typeof second === "string" || typeof second === "number") {
|
|
212
212
|
second = DateUtilities.stringToDate(second);
|
|
213
213
|
}
|
|
214
214
|
return first.getTime() > second.getTime();
|
|
@@ -224,7 +224,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
224
224
|
var def = null;
|
|
225
225
|
var view = [new Date(), new Date()];
|
|
226
226
|
var selectedDates = [];
|
|
227
|
-
if (typeof newProps.selected ===
|
|
227
|
+
if (typeof newProps.selected === "string") {
|
|
228
228
|
if (!props.selected.trim()) {
|
|
229
229
|
selectedDates = [];
|
|
230
230
|
view[0] = null;
|
|
@@ -235,12 +235,12 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
235
235
|
}
|
|
236
236
|
} else if (Array.isArray(newProps.selected)) {
|
|
237
237
|
selectedDates = newProps.selected.map(function (dateVal, idx) {
|
|
238
|
-
if (typeof dateVal ===
|
|
238
|
+
if (typeof dateVal === "number") {
|
|
239
239
|
dateVal = new Date(dateVal);
|
|
240
240
|
view[idx] = dateVal;
|
|
241
241
|
return dateVal;
|
|
242
242
|
}
|
|
243
|
-
if (typeof dateVal ===
|
|
243
|
+
if (typeof dateVal === "string") {
|
|
244
244
|
if (dateVal.trim()) {
|
|
245
245
|
view[idx] = DateUtilities.stringToDate(dateVal);
|
|
246
246
|
return DateUtilities.stringToDate(dateVal);
|
|
@@ -264,7 +264,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
264
264
|
var _def = null;
|
|
265
265
|
var _view = [new Date(), new Date()];
|
|
266
266
|
var _selectedDates = [];
|
|
267
|
-
if (typeof _props.selected ===
|
|
267
|
+
if (typeof _props.selected === "string") {
|
|
268
268
|
if (!_props.selected.trim()) {
|
|
269
269
|
_selectedDates = [];
|
|
270
270
|
_view[0] = null;
|
|
@@ -275,12 +275,12 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
275
275
|
}
|
|
276
276
|
} else if (Array.isArray(_props.selected)) {
|
|
277
277
|
_selectedDates = _props.selected.map(function (dateVal, idx) {
|
|
278
|
-
if (typeof dateVal ===
|
|
278
|
+
if (typeof dateVal === "number") {
|
|
279
279
|
dateVal = new Date(dateVal);
|
|
280
280
|
_view[idx] = dateVal;
|
|
281
281
|
return dateVal;
|
|
282
282
|
}
|
|
283
|
-
if (typeof dateVal ===
|
|
283
|
+
if (typeof dateVal === "string") {
|
|
284
284
|
if (dateVal.trim()) {
|
|
285
285
|
_view[idx] = DateUtilities.stringToDate(dateVal);
|
|
286
286
|
return DateUtilities.stringToDate(dateVal);
|
|
@@ -313,12 +313,12 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
313
313
|
return (0, _createClass2["default"])(DatePicker, [{
|
|
314
314
|
key: "componentDidMount",
|
|
315
315
|
value: function componentDidMount() {
|
|
316
|
-
document.addEventListener(
|
|
316
|
+
document.addEventListener("click", this.hideOnDocumentClick);
|
|
317
317
|
}
|
|
318
318
|
}, {
|
|
319
319
|
key: "componentWillUnmount",
|
|
320
320
|
value: function componentWillUnmount() {
|
|
321
|
-
document.removeEventListener(
|
|
321
|
+
document.removeEventListener("click", this.hideOnDocumentClick);
|
|
322
322
|
}
|
|
323
323
|
}, {
|
|
324
324
|
key: "hideOnDocumentClick",
|
|
@@ -329,7 +329,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
329
329
|
* e.target.className !== 'date-picker-trigger-' + this.state.ids[1] &&
|
|
330
330
|
*/
|
|
331
331
|
|
|
332
|
-
typeof e.target.className ===
|
|
332
|
+
typeof e.target.className === "string" && !e.target.className.includes("date-picker-trigger-") && !(this.parentsHaveClassName(e.target, "ardp-calendar-" + this.state.ids[0]) || this.parentsHaveClassName(e.target, "ardp-calendar-" + this.state.ids[1])) && !(this.parentsHaveClassName(e.target, "date-picker-trigger-" + this.state.ids[0]) || this.parentsHaveClassName(e.target, "date-picker-trigger-" + this.state.ids[1]))) {
|
|
333
333
|
this.hide();
|
|
334
334
|
}
|
|
335
335
|
}
|
|
@@ -339,14 +339,14 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
339
339
|
function s4() {
|
|
340
340
|
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
|
|
341
341
|
}
|
|
342
|
-
return s4() + s4() +
|
|
342
|
+
return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
|
|
343
343
|
}
|
|
344
344
|
}, {
|
|
345
345
|
key: "parentsHaveClassName",
|
|
346
346
|
value: function parentsHaveClassName(element, className) {
|
|
347
347
|
var parent = element;
|
|
348
348
|
while (parent) {
|
|
349
|
-
if (parent.className && typeof parent.className ===
|
|
349
|
+
if (parent.className && typeof parent.className === "string" && parent.className.indexOf(className) > -1) return true;
|
|
350
350
|
parent = parent.parentNode;
|
|
351
351
|
}
|
|
352
352
|
return false;
|
|
@@ -524,28 +524,28 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
524
524
|
var _this4 = this;
|
|
525
525
|
var dateStr = DateUtilities.toString(this.state.selectedDate[0]);
|
|
526
526
|
if (this.props.rangePicker && this.state.selectedDate[1]) {
|
|
527
|
-
dateStr +=
|
|
527
|
+
dateStr += " - ";
|
|
528
528
|
dateStr = dateStr.concat(this.state.selectedDate[1] ? DateUtilities.toString(this.state.selectedDate[1]) : null); // dateStr+ this.state.selectedDate[1]? DateUtilities.toString(this.state.selectedDate[1]):null
|
|
529
529
|
}
|
|
530
530
|
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(DatePickerInput, (0, _extends2["default"])({}, this.props, {
|
|
531
|
-
className: this.props.className ?
|
|
531
|
+
className: this.props.className ? "ardp-date-picker " + this.props.className : "ardp-date-picker"
|
|
532
532
|
}), /*#__PURE__*/_react["default"].createElement("div", null, this.props.labelAsText ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
533
|
-
ref:
|
|
534
|
-
type:
|
|
535
|
-
className:
|
|
533
|
+
ref: "trigger",
|
|
534
|
+
type: "text",
|
|
535
|
+
className: "label-text date-picker-trigger-" + this.state.ids[0],
|
|
536
536
|
onClick: function onClick() {
|
|
537
537
|
return _this4.show(0);
|
|
538
538
|
}
|
|
539
539
|
}, this.props.label) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
540
540
|
className: "form-input"
|
|
541
541
|
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
542
|
-
className: DateUtilities.toString(this.state.selectedDate[0]).length > 0 ?
|
|
543
|
-
}, this.props.label && "".concat(this.props.label).concat(this.props.isRequired ?
|
|
542
|
+
className: DateUtilities.toString(this.state.selectedDate[0]).length > 0 ? "floaton" : ""
|
|
543
|
+
}, this.props.label && "".concat(this.props.label).concat(this.props.isRequired ? "*" : "")), /*#__PURE__*/_react["default"].createElement("input", (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
|
|
544
544
|
type: "text",
|
|
545
545
|
placeholder: this.props.placeholder,
|
|
546
546
|
theme: this.props.theme,
|
|
547
|
-
ref:
|
|
548
|
-
}, "type",
|
|
547
|
+
ref: "trigger"
|
|
548
|
+
}, "type", "text"), "className", "date-picker-trigger-" + this.state.ids[0]), "readOnly", true), "value", dateStr), "onClick", function onClick() {
|
|
549
549
|
return _this4.show(0);
|
|
550
550
|
})), !this.props.rangePicker && !this.props.inline && !this.props.readOnly && /*#__PURE__*/_react["default"].createElement("span", {
|
|
551
551
|
className: "calender-icon",
|
|
@@ -566,9 +566,9 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
566
566
|
name: "cross",
|
|
567
567
|
height: "12",
|
|
568
568
|
weight: "12"
|
|
569
|
-
}),
|
|
569
|
+
}), " ")), /*#__PURE__*/_react["default"].createElement(Calendar, {
|
|
570
570
|
theme: this.props.theme,
|
|
571
|
-
ref:
|
|
571
|
+
ref: "calendar",
|
|
572
572
|
id: this.state.ids[0],
|
|
573
573
|
view: this.state.view[0],
|
|
574
574
|
selected: this.state.selectedDate[0],
|
|
@@ -578,7 +578,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
578
578
|
onSelect: this.onSelect,
|
|
579
579
|
dateIdx: 0,
|
|
580
580
|
minDate: this.props.minDate,
|
|
581
|
-
maxDate: this.props.maxDate
|
|
581
|
+
maxDate: this.props.maxDate,
|
|
582
|
+
hideFutureDates: this.props.hideFutureDates
|
|
582
583
|
}))), this.props.error && this.props.error.length > 0 ? /*#__PURE__*/_react["default"].createElement(InputError, {
|
|
583
584
|
value: this.props.value,
|
|
584
585
|
theme: this.props.theme,
|
|
@@ -634,19 +635,19 @@ var Calendar = /*#__PURE__*/function (_Component2) {
|
|
|
634
635
|
key: "render",
|
|
635
636
|
value: function render() {
|
|
636
637
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
637
|
-
ref:
|
|
638
|
-
className:
|
|
638
|
+
ref: "calendar",
|
|
639
|
+
className: "ardp-calendar-" + this.props.id + " calendar" + (this.state.visible ? " calendar-show" : " calendar-hide"),
|
|
639
640
|
style: this.state.style
|
|
640
641
|
}, /*#__PURE__*/_react["default"].createElement(MonthHeader, {
|
|
641
642
|
theme: this.props.theme,
|
|
642
|
-
ref:
|
|
643
|
+
ref: "monthHeader",
|
|
643
644
|
dateIdx: this.props.dateIdx,
|
|
644
645
|
view: this.props.view,
|
|
645
646
|
onMove: this.onMove,
|
|
646
647
|
minDate: this.props.minDate,
|
|
647
648
|
maxDate: this.props.maxDate
|
|
648
649
|
}), /*#__PURE__*/_react["default"].createElement(WeekHeader, null), /*#__PURE__*/_react["default"].createElement(Weeks, {
|
|
649
|
-
ref:
|
|
650
|
+
ref: "weeks",
|
|
650
651
|
view: this.props.view,
|
|
651
652
|
selected: this.props.selected,
|
|
652
653
|
selected2: this.props.selected2,
|
|
@@ -656,7 +657,8 @@ var Calendar = /*#__PURE__*/function (_Component2) {
|
|
|
656
657
|
onSelect: this.props.onSelect,
|
|
657
658
|
dateIdx: this.props.dateIdx,
|
|
658
659
|
minDate: this.props.minDate,
|
|
659
|
-
maxDate: this.props.maxDate
|
|
660
|
+
maxDate: this.props.maxDate,
|
|
661
|
+
hideFutureDates: this.props.hideFutureDates
|
|
660
662
|
}));
|
|
661
663
|
}
|
|
662
664
|
}]);
|
|
@@ -681,7 +683,7 @@ var MonthHeader = /*#__PURE__*/function (_Component3) {
|
|
|
681
683
|
key: "moveBackward",
|
|
682
684
|
value: function moveBackward(type) {
|
|
683
685
|
var view = DateUtilities.clone(this.state.view);
|
|
684
|
-
if (type ===
|
|
686
|
+
if (type === "month") {
|
|
685
687
|
view.setMonth(view.getMonth() - 1);
|
|
686
688
|
} else {
|
|
687
689
|
view.setYear(view.getFullYear() - 1);
|
|
@@ -692,7 +694,7 @@ var MonthHeader = /*#__PURE__*/function (_Component3) {
|
|
|
692
694
|
key: "moveForward",
|
|
693
695
|
value: function moveForward(type) {
|
|
694
696
|
var view = DateUtilities.clone(this.state.view);
|
|
695
|
-
if (type ===
|
|
697
|
+
if (type === "month") {
|
|
696
698
|
view.setMonth(view.getMonth() + 1);
|
|
697
699
|
} else {
|
|
698
700
|
view.setYear(view.getFullYear() + 1);
|
|
@@ -744,52 +746,52 @@ var MonthHeader = /*#__PURE__*/function (_Component3) {
|
|
|
744
746
|
value: function render() {
|
|
745
747
|
var _this8 = this;
|
|
746
748
|
var enabled = this.state.enabled;
|
|
747
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
748
|
-
className:
|
|
749
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
|
750
|
-
className: enabled && !this.limitDates(true) ?
|
|
749
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
750
|
+
className: "month-header"
|
|
751
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
752
|
+
className: enabled && !this.limitDates(true) ? "prev-month" : "next-month disabled",
|
|
751
753
|
onClick: function onClick() {
|
|
752
|
-
_this8.limitDates(true) ? null : _this8.moveBackward(
|
|
754
|
+
_this8.limitDates(true) ? null : _this8.moveBackward("year");
|
|
753
755
|
}
|
|
754
756
|
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
755
|
-
name:
|
|
757
|
+
name: "angle-left-double",
|
|
756
758
|
width: 16,
|
|
757
759
|
height: 16,
|
|
758
760
|
color: _tokens.colors[this.props.theme].datepicker.nextPrevIconStroke,
|
|
759
761
|
stroke: _tokens.colors[this.props.theme].datepicker.nextPrevIconStroke
|
|
760
|
-
}, null)), /*#__PURE__*/_react["default"].createElement(
|
|
761
|
-
className: enabled && !this.limitDates(true) ?
|
|
762
|
+
}, null)), /*#__PURE__*/_react["default"].createElement("span", {
|
|
763
|
+
className: enabled && !this.limitDates(true) ? "prev-month" : "next-month disabled",
|
|
762
764
|
onClick: function onClick() {
|
|
763
|
-
_this8.limitDates(true) ? null : _this8.moveBackward(
|
|
765
|
+
_this8.limitDates(true) ? null : _this8.moveBackward("month");
|
|
764
766
|
}
|
|
765
767
|
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
766
|
-
name:
|
|
768
|
+
name: "angle-left",
|
|
767
769
|
width: 8,
|
|
768
770
|
height: 16,
|
|
769
771
|
stroke: _tokens.colors[this.props.theme].datepicker.nextPrevIconStroke
|
|
770
|
-
}, null)), /*#__PURE__*/_react["default"].createElement(
|
|
771
|
-
className:
|
|
772
|
+
}, null)), /*#__PURE__*/_react["default"].createElement("span", {
|
|
773
|
+
className: "month-header-text"
|
|
772
774
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
773
775
|
className: "month-text"
|
|
774
776
|
}, DateUtilities.toMonthAndYearString(this.state.view).month), /*#__PURE__*/_react["default"].createElement("span", {
|
|
775
777
|
className: "year-text"
|
|
776
|
-
},
|
|
777
|
-
className: enabled && !this.limitDates(false) ?
|
|
778
|
+
}, " ", DateUtilities.toMonthAndYearString(this.state.view).year)), /*#__PURE__*/_react["default"].createElement("span", {
|
|
779
|
+
className: enabled && !this.limitDates(false) ? "next-month" : "next-month disabled",
|
|
778
780
|
onClick: function onClick() {
|
|
779
|
-
_this8.limitDates(false) ? null : _this8.moveForward(
|
|
781
|
+
_this8.limitDates(false) ? null : _this8.moveForward("month");
|
|
780
782
|
}
|
|
781
783
|
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
782
|
-
name:
|
|
784
|
+
name: "angle-right",
|
|
783
785
|
width: 8,
|
|
784
786
|
height: 16,
|
|
785
787
|
stroke: _tokens.colors[this.props.theme].datepicker.nextPrevIconStroke
|
|
786
|
-
}, null)), /*#__PURE__*/_react["default"].createElement(
|
|
787
|
-
className: enabled && !this.limitDates(false) ?
|
|
788
|
+
}, null)), /*#__PURE__*/_react["default"].createElement("span", {
|
|
789
|
+
className: enabled && !this.limitDates(false) ? "next-month" : "next-month disabled",
|
|
788
790
|
onClick: function onClick() {
|
|
789
|
-
_this8.limitDates(false) ? null : _this8.moveForward(
|
|
791
|
+
_this8.limitDates(false) ? null : _this8.moveForward("year");
|
|
790
792
|
}
|
|
791
793
|
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
792
|
-
name:
|
|
794
|
+
name: "angle-right-double",
|
|
793
795
|
color: _tokens.colors[this.props.theme].datepicker.nextPrevIconStroke,
|
|
794
796
|
width: 16,
|
|
795
797
|
height: 16,
|
|
@@ -819,9 +821,9 @@ var WeekHeader = /*#__PURE__*/function (_Component4) {
|
|
|
819
821
|
return (0, _createClass2["default"])(WeekHeader, [{
|
|
820
822
|
key: "render",
|
|
821
823
|
value: function render() {
|
|
822
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
823
|
-
className:
|
|
824
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
|
824
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
825
|
+
className: "week-header"
|
|
826
|
+
}, /*#__PURE__*/_react["default"].createElement("span", null, "Sun"), /*#__PURE__*/_react["default"].createElement("span", null, "Mon"), /*#__PURE__*/_react["default"].createElement("span", null, "Tue"), /*#__PURE__*/_react["default"].createElement("span", null, "Wed"), /*#__PURE__*/_react["default"].createElement("span", null, "Thu"), /*#__PURE__*/_react["default"].createElement("span", null, "Fri"), /*#__PURE__*/_react["default"].createElement("span", null, "Sat"));
|
|
825
827
|
}
|
|
826
828
|
}]);
|
|
827
829
|
}(_react.Component);
|
|
@@ -844,7 +846,7 @@ var Weeks = /*#__PURE__*/function (_Component5) {
|
|
|
844
846
|
return (0, _createClass2["default"])(Weeks, [{
|
|
845
847
|
key: "componentDidMount",
|
|
846
848
|
value: function componentDidMount() {
|
|
847
|
-
this.refs.current.addEventListener(
|
|
849
|
+
this.refs.current.addEventListener("transitionend", this.onTransitionEnd);
|
|
848
850
|
}
|
|
849
851
|
}, {
|
|
850
852
|
key: "onTransitionEnd",
|
|
@@ -874,21 +876,21 @@ var Weeks = /*#__PURE__*/function (_Component5) {
|
|
|
874
876
|
key: "moveTo",
|
|
875
877
|
value: function moveTo(view, isForward) {
|
|
876
878
|
this.setState({
|
|
877
|
-
sliding: isForward ?
|
|
879
|
+
sliding: isForward ? "left" : "right",
|
|
878
880
|
other: DateUtilities.clone(view)
|
|
879
881
|
});
|
|
880
882
|
}
|
|
881
883
|
}, {
|
|
882
884
|
key: "render",
|
|
883
885
|
value: function render() {
|
|
884
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
885
|
-
className:
|
|
886
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
|
887
|
-
ref:
|
|
888
|
-
className:
|
|
889
|
-
}, this.renderWeeks(this.state.view)), /*#__PURE__*/_react["default"].createElement(
|
|
890
|
-
ref:
|
|
891
|
-
className:
|
|
886
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
887
|
+
className: "weeks"
|
|
888
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
889
|
+
ref: "current",
|
|
890
|
+
className: "current" + (this.state.sliding ? " sliding " + this.state.sliding : "")
|
|
891
|
+
}, this.renderWeeks(this.state.view)), /*#__PURE__*/_react["default"].createElement("div", {
|
|
892
|
+
ref: "other",
|
|
893
|
+
className: "other" + (this.state.sliding ? " sliding " + this.state.sliding : "")
|
|
892
894
|
}, this.renderWeeks(this.state.other)));
|
|
893
895
|
}
|
|
894
896
|
}, {
|
|
@@ -908,7 +910,8 @@ var Weeks = /*#__PURE__*/function (_Component5) {
|
|
|
908
910
|
dateIdx: this.props.dateIdx,
|
|
909
911
|
onSelect: this.props.onSelect,
|
|
910
912
|
minDate: this.props.minDate,
|
|
911
|
-
maxDate: this.props.maxDate
|
|
913
|
+
maxDate: this.props.maxDate,
|
|
914
|
+
hideFutureDates: this.props.hideFutureDates
|
|
912
915
|
});
|
|
913
916
|
}.bind(this));
|
|
914
917
|
}
|
|
@@ -960,19 +963,19 @@ var Week = /*#__PURE__*/function (_Component6) {
|
|
|
960
963
|
}, {
|
|
961
964
|
key: "getDayClassName",
|
|
962
965
|
value: function getDayClassName(day) {
|
|
963
|
-
var className =
|
|
964
|
-
if (DateUtilities.isSameDay(day, new Date())) className +=
|
|
965
|
-
if (this.props.month !== day.getMonth()) className +=
|
|
966
|
+
var className = "day";
|
|
967
|
+
if (DateUtilities.isSameDay(day, new Date())) className += " today";
|
|
968
|
+
if (this.props.month !== day.getMonth()) className += " other-month";
|
|
966
969
|
if (this.props.selected && DateUtilities.isSameDay(day, this.props.selected)) {
|
|
967
|
-
className += this.props.rangePicker ?
|
|
970
|
+
className += this.props.rangePicker ? " selected range-start" : " selected";
|
|
968
971
|
}
|
|
969
972
|
if (this.props.selected2 && DateUtilities.isSameDay(day, this.props.selected2)) {
|
|
970
|
-
className += this.props.rangePicker ?
|
|
973
|
+
className += this.props.rangePicker ? " selected range-end" : " selected";
|
|
971
974
|
}
|
|
972
975
|
if (this.props.selected && this.props.selected2 && DateUtilities.isAfter(day, this.props.selected) && DateUtilities.isBefore(day, this.props.selected2)) {
|
|
973
|
-
className +=
|
|
976
|
+
className += " in-selected-range";
|
|
974
977
|
}
|
|
975
|
-
if (this.isDisabled(day)) className +=
|
|
978
|
+
if (this.isDisabled(day)) className += " disabled";
|
|
976
979
|
return className;
|
|
977
980
|
}
|
|
978
981
|
}, {
|
|
@@ -987,7 +990,16 @@ var Week = /*#__PURE__*/function (_Component6) {
|
|
|
987
990
|
value: function isDisabled(day) {
|
|
988
991
|
var minDate = this.props.minDate;
|
|
989
992
|
var maxDate = this.props.maxDate;
|
|
990
|
-
|
|
993
|
+
var today = new Date();
|
|
994
|
+
today.setHours(0, 0, 0, 0);
|
|
995
|
+
var dates = this.props.hideFutureDates ? minDate && DateUtilities.isBefore(day, minDate) || maxDate && DateUtilities.isAfter(day, maxDate) || this.isDateFromDisabled(day) || !DateUtilities.isBefore(day, today) : minDate && DateUtilities.isBefore(day, minDate) || maxDate && DateUtilities.isAfter(day, maxDate) || this.isDateFromDisabled(day);
|
|
996
|
+
return dates;
|
|
997
|
+
|
|
998
|
+
// return (
|
|
999
|
+
// (minDate && DateUtilities.isBefore(day, minDate)) ||
|
|
1000
|
+
// (maxDate && DateUtilities.isAfter(day, maxDate)) ||
|
|
1001
|
+
// this.isDateFromDisabled(day)
|
|
1002
|
+
// );
|
|
991
1003
|
}
|
|
992
1004
|
}, {
|
|
993
1005
|
key: "isDateFromDisabled",
|
|
@@ -1004,11 +1016,11 @@ var Week = /*#__PURE__*/function (_Component6) {
|
|
|
1004
1016
|
key: "render",
|
|
1005
1017
|
value: function render() {
|
|
1006
1018
|
var days = this.buildDays(this.props.start);
|
|
1007
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
1008
|
-
className:
|
|
1019
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
1020
|
+
className: "week"
|
|
1009
1021
|
}, days.map(function (day, i) {
|
|
1010
1022
|
var _this11 = this;
|
|
1011
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
1023
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
1012
1024
|
key: i,
|
|
1013
1025
|
onClick: function onClick() {
|
|
1014
1026
|
_this11.onSelect(day);
|
|
@@ -1020,10 +1032,11 @@ var Week = /*#__PURE__*/function (_Component6) {
|
|
|
1020
1032
|
}]);
|
|
1021
1033
|
}(_react.Component);
|
|
1022
1034
|
DatePicker.defaultProps = {
|
|
1023
|
-
theme:
|
|
1035
|
+
theme: "light",
|
|
1024
1036
|
inline: false,
|
|
1025
1037
|
rangePicker: false,
|
|
1026
|
-
defaultSelcted:
|
|
1027
|
-
disabledDates: []
|
|
1038
|
+
defaultSelcted: "",
|
|
1039
|
+
disabledDates: [],
|
|
1040
|
+
hideFutureDates: false
|
|
1028
1041
|
};
|
|
1029
1042
|
var _default = exports["default"] = DatePicker;
|
package/atoms/icon/icons.json
CHANGED
|
@@ -1729,8 +1729,8 @@
|
|
|
1729
1729
|
"paths": [
|
|
1730
1730
|
"M2.66927 5.85156V4.97656H7.33594V5.85156H2.66927ZM2.66927 3.51823V2.64323H7.33594V3.51823H2.66927ZM1.21094 7.3099H5.8776C6.13038 7.3099 6.36858 7.36823 6.59219 7.4849C6.8158 7.60156 7.00538 7.75712 7.16094 7.95156L8.79427 10.0807V1.03906H1.21094V7.3099ZM1.21094 10.9557H8.35677L6.47552 8.49115C6.39774 8.39392 6.30781 8.31858 6.20573 8.2651C6.10365 8.21163 5.99427 8.1849 5.8776 8.1849H1.21094V10.9557ZM8.79427 11.8307H1.21094C0.977604 11.8307 0.773437 11.7432 0.598437 11.5682C0.423437 11.3932 0.335938 11.1891 0.335938 10.9557V1.03906C0.335938 0.805729 0.423437 0.601563 0.598437 0.426563C0.773437 0.251563 0.977604 0.164062 1.21094 0.164062H8.79427C9.0276 0.164062 9.23177 0.251563 9.40677 0.426563C9.58177 0.601563 9.66927 0.805729 9.66927 1.03906V10.9557C9.66927 11.1891 9.58177 11.3932 9.40677 11.5682C9.23177 11.7432 9.0276 11.8307 8.79427 11.8307ZM1.21094 10.9557V1.03906V10.9557ZM1.21094 8.1849V7.3099V8.1849Z"
|
|
1731
1731
|
],
|
|
1732
|
-
"width":
|
|
1733
|
-
"height":
|
|
1732
|
+
"width": 12,
|
|
1733
|
+
"height": 12
|
|
1734
1734
|
},
|
|
1735
1735
|
"left-arrow": {
|
|
1736
1736
|
"paths": [
|
|
@@ -151,18 +151,18 @@ var Filter = /*#__PURE__*/function (_Component) {
|
|
|
151
151
|
filters[groupItem.field].value.toDate = selectedFiltersObj[groupItem.field].value.toDate;
|
|
152
152
|
});
|
|
153
153
|
} else if (optionItem.field === "week") {
|
|
154
|
-
filters[groupItem.field].value.fromDate = _constants.WEEK_DATE;
|
|
155
|
-
filters[groupItem.field].value.toDate = _constants.CURRENT_DATE;
|
|
154
|
+
filters[groupItem.field].value.fromDate = _this.props.prevDateRequired ? _constants.WEEK_DATE - _constants.CONVERT : _constants.WEEK_DATE;
|
|
155
|
+
filters[groupItem.field].value.toDate = _this.props.prevDateRequired ? _constants.CURRENT_DATE - _constants.CONVERT : _constants.CURRENT_DATE;
|
|
156
156
|
} else if (optionItem.field === "month") {
|
|
157
|
-
filters[groupItem.field].value.fromDate = _constants.MONTH_DATE;
|
|
158
|
-
filters[groupItem.field].value.toDate = _constants.CURRENT_DATE;
|
|
157
|
+
filters[groupItem.field].value.fromDate = _this.props.prevDateRequired ? _constants.MONTH_DATE - _constants.CONVERT : _constants.MONTH_DATE;
|
|
158
|
+
filters[groupItem.field].value.toDate = _this.props.prevDateRequired ? _constants.CURRENT_DATE - _constants.CONVERT : _constants.CURRENT_DATE;
|
|
159
159
|
} else if (optionItem.field === "three_month") {
|
|
160
|
-
filters[groupItem.field].value.fromDate = _constants.THREE_MONTHS;
|
|
161
|
-
filters[groupItem.field].value.toDate = _constants.CURRENT_DATE;
|
|
160
|
+
filters[groupItem.field].value.fromDate = _this.props.prevDateRequired ? _constants.THREE_MONTHS - _constants.CONVERT : _constants.THREE_MONTHS;
|
|
161
|
+
filters[groupItem.field].value.toDate = _this.props.prevDateRequired ? _constants.CURRENT_DATE - _constants.CONVERT : _constants.CURRENT_DATE;
|
|
162
162
|
} else {
|
|
163
163
|
// this is day
|
|
164
|
-
filters[groupItem.field].value.fromDate = _constants.CURRENT_DATE;
|
|
165
|
-
filters[groupItem.field].value.toDate = _constants.CURRENT_DATE;
|
|
164
|
+
filters[groupItem.field].value.fromDate = _this.props.prevDateRequired ? _constants.CURRENT_DATE - _constants.CONVERT : _constants.CURRENT_DATE;
|
|
165
|
+
filters[groupItem.field].value.toDate = _this.props.prevDateRequired ? _constants.CURRENT_DATE - _constants.CONVERT : _constants.CURRENT_DATE;
|
|
166
166
|
}
|
|
167
167
|
break;
|
|
168
168
|
}
|
|
@@ -534,6 +534,7 @@ var Filter = /*#__PURE__*/function (_Component) {
|
|
|
534
534
|
}, option.title),
|
|
535
535
|
className: _this.highlightSelectedFilters(groupItem, option),
|
|
536
536
|
labelAsText: true,
|
|
537
|
+
hideFutureDates: _this.props.hideFutureDates,
|
|
537
538
|
minDate: isSelectDateSelected ? null : selectedFiltersObj[groupItem.field].value.fromDate - option.max_days * _constants.CONVERT,
|
|
538
539
|
maxDate: _this.getMaxDate(option, groupItem),
|
|
539
540
|
datepickerStep: 2,
|
|
@@ -572,6 +573,7 @@ var Filter = /*#__PURE__*/function (_Component) {
|
|
|
572
573
|
className: _this.highlightSelectedFilters(groupItem, option),
|
|
573
574
|
labelAsText: true,
|
|
574
575
|
rangePicker: true,
|
|
576
|
+
hideFutureDates: _this.props.hideFutureDates,
|
|
575
577
|
minDate: isSelectRangeSelected ? null : selectedFiltersObj[groupItem.field].value.fromDate - option.max_days * _constants.CONVERT,
|
|
576
578
|
maxDate: _this.getMaxDate(option, groupItem),
|
|
577
579
|
datepickerStep: 2,
|
|
@@ -718,10 +720,14 @@ Filter.propTypes = {
|
|
|
718
720
|
filtersStructure: _propTypes["default"].instanceOf(Object),
|
|
719
721
|
filterMessage: _propTypes["default"].string,
|
|
720
722
|
width: _propTypes["default"].string,
|
|
721
|
-
showSelectedFiltersAsChip: _propTypes["default"].bool
|
|
723
|
+
showSelectedFiltersAsChip: _propTypes["default"].bool,
|
|
724
|
+
prevDateRequired: _propTypes["default"].bool,
|
|
725
|
+
hideFutureDates: _propTypes["default"].bool
|
|
722
726
|
};
|
|
723
727
|
Filter.defaultProps = {
|
|
724
728
|
width: "360px",
|
|
725
|
-
theme: "dark"
|
|
729
|
+
theme: "dark",
|
|
730
|
+
prevDateRequired: false,
|
|
731
|
+
hideFutureDates: false
|
|
726
732
|
};
|
|
727
733
|
var _default = exports["default"] = Filter;
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.40",
|
|
4
4
|
"description": "Components for Desynova Digital",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "desynova-digital",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": "desynova-digital",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@desynova-digital/tokens": "9.1.
|
|
10
|
+
"@desynova-digital/tokens": "9.1.40",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|