wini-web-components 2.6.0 → 2.6.1
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/dist/component/button/button.js +9 -29
- package/dist/component/calendar/calendar.js +140 -173
- package/dist/component/checkbox/checkbox.js +26 -56
- package/dist/component/ck-editor/ckeditor.js +18 -29
- package/dist/component/component-status.js +6 -6
- package/dist/component/date-picker/date-picker.js +141 -174
- package/dist/component/dialog/dialog.js +37 -67
- package/dist/component/import-file/import-file.js +67 -106
- package/dist/component/infinite-scroll/infinite-scroll.js +17 -83
- package/dist/component/input-multi-select/input-multi-select.js +102 -178
- package/dist/component/input-otp/input-otp.js +29 -69
- package/dist/component/number-picker/number-picker.js +21 -33
- package/dist/component/pagination/pagination.js +19 -22
- package/dist/component/popup/popup.d.ts +2 -1
- package/dist/component/popup/popup.js +44 -70
- package/dist/component/progress-bar/progress-bar.js +12 -24
- package/dist/component/progress-circle/progress-circle.js +8 -19
- package/dist/component/radio-button/radio-button.js +11 -42
- package/dist/component/rating/rating.js +29 -48
- package/dist/component/select1/select1.js +91 -160
- package/dist/component/slider/slider.js +36 -54
- package/dist/component/switch/switch.js +22 -52
- package/dist/component/table/table.js +36 -89
- package/dist/component/tag/tag.js +8 -28
- package/dist/component/text/text.js +9 -40
- package/dist/component/text-area/text-area.js +12 -41
- package/dist/component/text-field/text-field.js +17 -47
- package/dist/component/toast-noti/toast-noti.js +7 -10
- package/dist/component/wini-icon/winicon.js +55 -113
- package/dist/form/login/view.js +28 -28
- package/dist/index.js +1 -1
- package/dist/index.js.LICENSE.txt +1 -11
- package/dist/language/i18n.js +4 -4
- package/package.json +1 -1
|
@@ -1,73 +1,46 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __extends = (this && this.__extends) || (function () {
|
|
3
|
-
var extendStatics = function (d, b) {
|
|
4
|
-
extendStatics = Object.setPrototypeOf ||
|
|
5
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
-
return extendStatics(d, b);
|
|
8
|
-
};
|
|
9
|
-
return function (d, b) {
|
|
10
|
-
if (typeof b !== "function" && b !== null)
|
|
11
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
-
extendStatics(d, b);
|
|
13
|
-
function __() { this.constructor = d; }
|
|
14
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
-
};
|
|
16
|
-
})();
|
|
17
|
-
var __assign = (this && this.__assign) || function () {
|
|
18
|
-
__assign = Object.assign || function(t) {
|
|
19
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
20
|
-
s = arguments[i];
|
|
21
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
22
|
-
t[p] = s[p];
|
|
23
|
-
}
|
|
24
|
-
return t;
|
|
25
|
-
};
|
|
26
|
-
return __assign.apply(this, arguments);
|
|
27
|
-
};
|
|
28
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
29
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
30
4
|
};
|
|
31
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
32
6
|
exports.DatePicker = void 0;
|
|
33
7
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
34
|
-
|
|
35
|
-
|
|
8
|
+
const react_1 = __importDefault(require("react"));
|
|
9
|
+
const react_dom_1 = __importDefault(require("react-dom"));
|
|
36
10
|
require("./date-picker.css");
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
var timeFormat = splitDateTime[1];
|
|
11
|
+
const index_1 = require("../../index");
|
|
12
|
+
const calendar_1 = require("../calendar/calendar");
|
|
13
|
+
const date_fns_1 = require("date-fns");
|
|
14
|
+
const react_i18next_1 = require("react-i18next");
|
|
15
|
+
const dateToString = (x, y = "dd/mm/yyyy") => {
|
|
16
|
+
let splitDateTime = y.split(" ");
|
|
17
|
+
let dateFormat = splitDateTime[0];
|
|
18
|
+
let timeFormat = splitDateTime[1];
|
|
46
19
|
if (dateFormat.includes('hh')) {
|
|
47
20
|
dateFormat = splitDateTime[1];
|
|
48
21
|
timeFormat = splitDateTime[0];
|
|
49
22
|
}
|
|
50
|
-
|
|
23
|
+
let dateConvert = dateFormat.split(y.includes("/") ? "/" : "-").map(type => {
|
|
51
24
|
switch (type.toLowerCase()) {
|
|
52
25
|
case "dd":
|
|
53
|
-
return x.getDate() < 10 ?
|
|
26
|
+
return x.getDate() < 10 ? `0${x.getDate()}` : `${x.getDate()}`;
|
|
54
27
|
case "mm":
|
|
55
|
-
return (x.getMonth() + 1) < 10 ?
|
|
28
|
+
return (x.getMonth() + 1) < 10 ? `0${(x.getMonth() + 1)}` : `${(x.getMonth() + 1)}`;
|
|
56
29
|
case "yyyy":
|
|
57
|
-
return
|
|
30
|
+
return `${x.getFullYear()}`;
|
|
58
31
|
default:
|
|
59
32
|
return '';
|
|
60
33
|
}
|
|
61
34
|
}).join(y.includes("/") ? "/" : "-");
|
|
62
35
|
if (timeFormat) {
|
|
63
|
-
|
|
36
|
+
let timeConvert = timeFormat.split(":").map(type => {
|
|
64
37
|
switch (type) {
|
|
65
38
|
case "hh":
|
|
66
|
-
return x.getHours() < 10 ?
|
|
39
|
+
return x.getHours() < 10 ? `0${x.getHours()}` : `${x.getHours()}`;
|
|
67
40
|
case "mm":
|
|
68
|
-
return x.getMinutes() < 10 ?
|
|
41
|
+
return x.getMinutes() < 10 ? `0${x.getMinutes()}` : `${x.getMinutes()}`;
|
|
69
42
|
case "ss":
|
|
70
|
-
return x.getSeconds() < 10 ?
|
|
43
|
+
return x.getSeconds() < 10 ? `0${x.getSeconds()}` : `${x.getSeconds()}`;
|
|
71
44
|
default:
|
|
72
45
|
return 'D';
|
|
73
46
|
}
|
|
@@ -76,15 +49,13 @@ var dateToString = function (x, y) {
|
|
|
76
49
|
}
|
|
77
50
|
return dateConvert;
|
|
78
51
|
};
|
|
79
|
-
|
|
52
|
+
const stringToDate = (_date, _format = "dd/MM/yyyy", _delimiter = "/") => {
|
|
80
53
|
var _a, _b, _c, _d, _e;
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
var hours = '';
|
|
87
|
-
var isHour = false;
|
|
54
|
+
let dayformat = _format;
|
|
55
|
+
let hourformat = '';
|
|
56
|
+
let day = _date;
|
|
57
|
+
let hours = '';
|
|
58
|
+
let isHour = false;
|
|
88
59
|
if (_format.trim().indexOf(" ") > -1) {
|
|
89
60
|
dayformat = _format.trim().split(" ")[0];
|
|
90
61
|
hourformat = _format.trim().split(" ")[1];
|
|
@@ -92,61 +63,60 @@ var stringToDate = function (_date, _format, _delimiter) {
|
|
|
92
63
|
hours = (_a = _date.trim().split(" ")[1]) !== null && _a !== void 0 ? _a : '00:00:00';
|
|
93
64
|
isHour = true;
|
|
94
65
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
66
|
+
let formatLowerCase = dayformat.toLowerCase();
|
|
67
|
+
let formatItems = formatLowerCase.split(_delimiter);
|
|
68
|
+
let dateItems = day.split(_delimiter);
|
|
69
|
+
let monthIndex = formatItems.indexOf("mm");
|
|
70
|
+
let dayIndex = formatItems.indexOf("dd");
|
|
71
|
+
let yearIndex = formatItems.indexOf("yyyy");
|
|
72
|
+
let hour = 0;
|
|
73
|
+
let min = 0;
|
|
74
|
+
let sec = 0;
|
|
104
75
|
if (isHour) {
|
|
105
|
-
|
|
106
|
-
|
|
76
|
+
let tmpHour = hourformat.split(":");
|
|
77
|
+
let hourindex = tmpHour.indexOf("HH");
|
|
107
78
|
if (hourindex < 0) {
|
|
108
79
|
hourindex = tmpHour.indexOf("hh");
|
|
109
80
|
}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
81
|
+
let mmindex = tmpHour.indexOf("mm");
|
|
82
|
+
let ssindex = tmpHour.indexOf("ss");
|
|
83
|
+
let time = hours.split(":");
|
|
113
84
|
hour = parseInt((_b = time[hourindex]) !== null && _b !== void 0 ? _b : '0');
|
|
114
85
|
min = parseInt((_c = time[mmindex]) !== null && _c !== void 0 ? _c : '0');
|
|
115
86
|
sec = parseInt((_d = time[ssindex]) !== null && _d !== void 0 ? _d : '0');
|
|
116
87
|
}
|
|
117
|
-
|
|
88
|
+
let month = parseInt(dateItems[monthIndex]);
|
|
118
89
|
month -= 1;
|
|
119
90
|
var formatedDate = new Date(parseInt(dateItems[yearIndex]), month, parseInt((_e = dateItems[dayIndex]) !== null && _e !== void 0 ? _e : '0'), hour, min, sec);
|
|
120
91
|
return formatedDate;
|
|
121
92
|
};
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
_this.getNewValue = function (value) {
|
|
93
|
+
class TDatePicker extends react_1.default.Component {
|
|
94
|
+
constructor(props) {
|
|
95
|
+
super(props);
|
|
96
|
+
this.getNewValue = (value) => {
|
|
127
97
|
var _a, _b, _c, _d, _e, _f;
|
|
128
|
-
|
|
98
|
+
const params = (_b = value !== null && value !== void 0 ? value : (_a = this.state) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
|
|
129
99
|
if ((_c = params.trim()) === null || _c === void 0 ? void 0 : _c.length) {
|
|
130
|
-
switch (
|
|
100
|
+
switch (this.props.pickerType) {
|
|
131
101
|
case index_1.CalendarType.YEAR:
|
|
132
102
|
return new Date(parseInt(params), 1, 1);
|
|
133
103
|
case index_1.CalendarType.MONTH:
|
|
134
|
-
|
|
135
|
-
return new Date(parseInt((_d = splitParams[1]) !== null && _d !== void 0 ? _d :
|
|
104
|
+
let splitParams = params.includes('/') ? params.split('/') : params.split('-');
|
|
105
|
+
return new Date(parseInt((_d = splitParams[1]) !== null && _d !== void 0 ? _d : `${calendar_1.today.getFullYear()}`), parseInt((_e = splitParams[0]) !== null && _e !== void 0 ? _e : `${calendar_1.today.getMonth()}`), 1);
|
|
136
106
|
case index_1.CalendarType.DATETIME:
|
|
137
|
-
return stringToDate(params, (_f =
|
|
107
|
+
return stringToDate(params, (_f = this.props.formatDate) !== null && _f !== void 0 ? _f : 'dd/mm/yyyy hh:mm');
|
|
138
108
|
default:
|
|
139
109
|
return stringToDate(params);
|
|
140
110
|
}
|
|
141
111
|
}
|
|
142
112
|
return undefined;
|
|
143
113
|
};
|
|
144
|
-
|
|
145
|
-
if (!
|
|
146
|
-
|
|
114
|
+
this.onOpenCalendar = (ev) => {
|
|
115
|
+
if (!this.state.isOpen) {
|
|
116
|
+
this.setState(Object.assign(Object.assign({}, this.state), { isOpen: true, style: undefined, offset: ev.target.closest('.date-picker-container').getBoundingClientRect() }));
|
|
147
117
|
}
|
|
148
118
|
};
|
|
149
|
-
|
|
119
|
+
this.state = {
|
|
150
120
|
value: props.value,
|
|
151
121
|
offset: {
|
|
152
122
|
x: 0,
|
|
@@ -163,18 +133,17 @@ var TDatePicker = /** @class */ (function (_super) {
|
|
|
163
133
|
},
|
|
164
134
|
isOpen: false,
|
|
165
135
|
};
|
|
166
|
-
|
|
167
|
-
return _this;
|
|
136
|
+
this.getNewValue = this.getNewValue.bind(this);
|
|
168
137
|
}
|
|
169
|
-
|
|
138
|
+
componentDidUpdate(prevProps, prevState) {
|
|
170
139
|
var _a;
|
|
171
140
|
if (prevProps.value !== this.props.value) {
|
|
172
|
-
this.setState(
|
|
141
|
+
this.setState(Object.assign(Object.assign({}, this.state), { value: this.props.value }));
|
|
173
142
|
}
|
|
174
143
|
if (prevState.isOpen !== this.state.isOpen && this.state.isOpen) {
|
|
175
|
-
|
|
144
|
+
const thisPopupRect = (_a = document.body.querySelector('.date-picker-popup-container')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
176
145
|
if (thisPopupRect) {
|
|
177
|
-
|
|
146
|
+
let style;
|
|
178
147
|
if (thisPopupRect.right > document.body.offsetWidth) {
|
|
179
148
|
style = {
|
|
180
149
|
top: this.state.offset.y + this.state.offset.height + 2 + 'px',
|
|
@@ -182,21 +151,20 @@ var TDatePicker = /** @class */ (function (_super) {
|
|
|
182
151
|
};
|
|
183
152
|
}
|
|
184
153
|
if ((thisPopupRect.bottom - 12) > document.body.offsetHeight) {
|
|
185
|
-
style = style ?
|
|
154
|
+
style = style ? Object.assign(Object.assign({}, style), { top: undefined, bottom: document.body.offsetHeight - this.state.offset.top + 'px' }) : {
|
|
186
155
|
left: this.state.offset.x + 'px',
|
|
187
156
|
bottom: document.body.offsetHeight - this.state.offset.top + 'px'
|
|
188
157
|
};
|
|
189
158
|
}
|
|
190
159
|
if (style)
|
|
191
|
-
this.setState(
|
|
160
|
+
this.setState(Object.assign(Object.assign({}, this.state), { style: style }));
|
|
192
161
|
}
|
|
193
162
|
}
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
var _this = this;
|
|
163
|
+
}
|
|
164
|
+
render() {
|
|
197
165
|
var _a, _b, _c, _d, _e, _f;
|
|
198
|
-
|
|
199
|
-
|
|
166
|
+
const { t } = this.props;
|
|
167
|
+
let maxLength = 10;
|
|
200
168
|
switch (this.props.pickerType) {
|
|
201
169
|
case index_1.CalendarType.YEAR:
|
|
202
170
|
maxLength = 4;
|
|
@@ -210,153 +178,152 @@ var TDatePicker = /** @class */ (function (_super) {
|
|
|
210
178
|
default:
|
|
211
179
|
break;
|
|
212
180
|
}
|
|
213
|
-
return react_1.default.createElement("div", { id: this.props.id, className:
|
|
181
|
+
return react_1.default.createElement("div", { id: this.props.id, className: `date-picker-container row ${(_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3'} ${this.props.disabled ? 'disabled' : ''} ${((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'}`, "helper-text": this.props.helperText, style: this.props.style ? Object.assign(Object.assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' } },
|
|
214
182
|
react_1.default.createElement("div", { className: 'input-field-value row', style: { height: '4rem' } },
|
|
215
|
-
react_1.default.createElement("input", { autoComplete: 'off', value: (_e = this.state.value) !== null && _e !== void 0 ? _e : '', onChange:
|
|
216
|
-
|
|
217
|
-
if (
|
|
218
|
-
|
|
219
|
-
} : this.props.onFocus, onKeyDown: this.props.onComplete ?
|
|
220
|
-
if (
|
|
183
|
+
react_1.default.createElement("input", { autoComplete: 'off', value: (_e = this.state.value) !== null && _e !== void 0 ? _e : '', onChange: (ev) => this.setState(Object.assign(Object.assign({}, this.state), { value: ev.target.value })), placeholder: this.props.placeholder, maxLength: maxLength, readOnly: this.props.pickOnly, onFocus: this.props.pickOnly ? (ev) => {
|
|
184
|
+
this.onOpenCalendar(ev);
|
|
185
|
+
if (this.props.onFocus)
|
|
186
|
+
this.props.onFocus(ev);
|
|
187
|
+
} : this.props.onFocus, onKeyDown: this.props.onComplete ? (ev) => {
|
|
188
|
+
if (this.props.onComplete) {
|
|
221
189
|
switch (ev.key.toLowerCase()) {
|
|
222
190
|
case "enter":
|
|
223
|
-
|
|
191
|
+
this.props.onComplete(ev);
|
|
224
192
|
break;
|
|
225
193
|
default:
|
|
226
194
|
break;
|
|
227
195
|
}
|
|
228
196
|
}
|
|
229
|
-
} : undefined, onBlur: this.props.pickOnly ? undefined :
|
|
197
|
+
} : undefined, onBlur: this.props.pickOnly ? undefined : (ev) => {
|
|
230
198
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
231
|
-
|
|
232
|
-
switch (
|
|
199
|
+
const inputValue = ev.target.value.trim();
|
|
200
|
+
switch (this.props.pickerType) {
|
|
233
201
|
case index_1.CalendarType.YEAR:
|
|
234
|
-
|
|
235
|
-
|
|
202
|
+
let minYear = ((_a = this.props.min) !== null && _a !== void 0 ? _a : calendar_1.startDate).getFullYear();
|
|
203
|
+
let maxYear = ((_b = this.props.min) !== null && _b !== void 0 ? _b : calendar_1.endDate).getFullYear();
|
|
236
204
|
if (!isNaN(parseInt(inputValue)) && parseInt(inputValue) <= maxYear && parseInt(inputValue) >= minYear) {
|
|
237
|
-
|
|
238
|
-
if (
|
|
239
|
-
|
|
205
|
+
this.setState(Object.assign(Object.assign({}, this.state), { isOpen: false, value: inputValue }));
|
|
206
|
+
if (this.props.onChange)
|
|
207
|
+
this.props.onChange(inputValue);
|
|
240
208
|
}
|
|
241
209
|
else {
|
|
242
|
-
|
|
243
|
-
if (
|
|
244
|
-
|
|
210
|
+
this.setState(Object.assign(Object.assign({}, this.state), { isOpen: false, value: undefined }));
|
|
211
|
+
if (this.props.onChange)
|
|
212
|
+
this.props.onChange(undefined);
|
|
245
213
|
}
|
|
246
214
|
break;
|
|
247
215
|
case index_1.CalendarType.MONTH:
|
|
248
216
|
if (inputValue.match(/[0-9]{1,2}(\/|-)[0-9]{4}/g)) {
|
|
249
|
-
|
|
250
|
-
if ((0, calendar_1.inRangeTime)(
|
|
251
|
-
|
|
252
|
-
if (
|
|
253
|
-
|
|
217
|
+
let dateValue = stringToDate(`1/${inputValue}`, 'dd/MM/yyyy', '/');
|
|
218
|
+
if ((0, calendar_1.inRangeTime)(dateValue, (_d = (_c = this.props.min) !== null && _c !== void 0 ? _c : calendar_1.startDate) !== null && _d !== void 0 ? _d : calendar_1.startDate, (_f = (_e = this.props.min) !== null && _e !== void 0 ? _e : calendar_1.endDate) !== null && _f !== void 0 ? _f : calendar_1.endDate)) {
|
|
219
|
+
this.setState(Object.assign(Object.assign({}, this.state), { isOpen: false, value: dateToString(dateValue) }));
|
|
220
|
+
if (this.props.onChange)
|
|
221
|
+
this.props.onChange(dateToString(dateValue));
|
|
254
222
|
}
|
|
255
223
|
else {
|
|
256
|
-
|
|
257
|
-
if (
|
|
258
|
-
|
|
224
|
+
this.setState(Object.assign(Object.assign({}, this.state), { isOpen: false, value: undefined }));
|
|
225
|
+
if (this.props.onChange)
|
|
226
|
+
this.props.onChange(undefined);
|
|
259
227
|
}
|
|
260
228
|
}
|
|
261
229
|
else {
|
|
262
|
-
|
|
263
|
-
if (
|
|
264
|
-
|
|
230
|
+
this.setState(Object.assign(Object.assign({}, this.state), { isOpen: false, value: undefined }));
|
|
231
|
+
if (this.props.onChange)
|
|
232
|
+
this.props.onChange(undefined);
|
|
265
233
|
}
|
|
266
234
|
break;
|
|
267
235
|
case index_1.CalendarType.DATETIME:
|
|
268
|
-
|
|
236
|
+
let dateTimeValue = undefined;
|
|
269
237
|
if (inputValue.match(/[0-9]{1,2}(\/|-)[0-9]{1,2}(\/|-)[0-9]{4}/g)) {
|
|
270
|
-
dateTimeValue = stringToDate(inputValue, (_g =
|
|
271
|
-
if ((0, calendar_1.inRangeTime)(dateTimeValue, (_h =
|
|
238
|
+
dateTimeValue = stringToDate(inputValue, (_g = this.props.formatDate) !== null && _g !== void 0 ? _g : 'dd/mm/yyyy hh:mm', '/');
|
|
239
|
+
if ((0, calendar_1.inRangeTime)(dateTimeValue, (_h = this.props.min) !== null && _h !== void 0 ? _h : calendar_1.startDate, (_j = this.props.min) !== null && _j !== void 0 ? _j : calendar_1.endDate)) {
|
|
272
240
|
}
|
|
273
|
-
else if ((0, date_fns_1.differenceInCalendarDays)((_k =
|
|
274
|
-
dateTimeValue = (_l =
|
|
241
|
+
else if ((0, date_fns_1.differenceInCalendarDays)((_k = this.props.min) !== null && _k !== void 0 ? _k : calendar_1.startDate, dateTimeValue) > -1) {
|
|
242
|
+
dateTimeValue = (_l = this.props.min) !== null && _l !== void 0 ? _l : calendar_1.startDate;
|
|
275
243
|
}
|
|
276
|
-
else if ((0, date_fns_1.differenceInCalendarDays)(dateTimeValue, (_m =
|
|
277
|
-
dateTimeValue = (_o =
|
|
244
|
+
else if ((0, date_fns_1.differenceInCalendarDays)(dateTimeValue, (_m = this.props.min) !== null && _m !== void 0 ? _m : calendar_1.endDate) > -1) {
|
|
245
|
+
dateTimeValue = (_o = this.props.min) !== null && _o !== void 0 ? _o : calendar_1.startDate;
|
|
278
246
|
}
|
|
279
247
|
else {
|
|
280
248
|
dateTimeValue = undefined;
|
|
281
249
|
}
|
|
282
250
|
}
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
if (
|
|
286
|
-
|
|
251
|
+
const stateDateTimeValue = dateTimeValue ? dateToString(dateTimeValue, (_p = this.props.formatDate) !== null && _p !== void 0 ? _p : 'dd/mm/yyyy hh:mm') : dateTimeValue;
|
|
252
|
+
this.setState(Object.assign(Object.assign({}, this.state), { isOpen: false, value: stateDateTimeValue }));
|
|
253
|
+
if (this.props.onChange)
|
|
254
|
+
this.props.onChange(stateDateTimeValue);
|
|
287
255
|
break;
|
|
288
256
|
default:
|
|
289
|
-
|
|
257
|
+
let dateValue = undefined;
|
|
290
258
|
if (inputValue.match(/[0-9]{1,2}(\/|-)[0-9]{1,2}(\/|-)[0-9]{4}/g)) {
|
|
291
259
|
dateValue = stringToDate(inputValue, 'dd/MM/yyyy', '/');
|
|
292
|
-
if ((0, calendar_1.inRangeTime)(dateValue, (_q =
|
|
260
|
+
if ((0, calendar_1.inRangeTime)(dateValue, (_q = this.props.min) !== null && _q !== void 0 ? _q : calendar_1.startDate, (_r = this.props.min) !== null && _r !== void 0 ? _r : calendar_1.endDate)) {
|
|
293
261
|
}
|
|
294
|
-
else if ((0, date_fns_1.differenceInCalendarDays)((_s =
|
|
295
|
-
dateValue = (_t =
|
|
262
|
+
else if ((0, date_fns_1.differenceInCalendarDays)((_s = this.props.min) !== null && _s !== void 0 ? _s : calendar_1.startDate, dateValue) > -1) {
|
|
263
|
+
dateValue = (_t = this.props.min) !== null && _t !== void 0 ? _t : calendar_1.startDate;
|
|
296
264
|
}
|
|
297
|
-
else if ((0, date_fns_1.differenceInCalendarDays)(dateValue, (_u =
|
|
298
|
-
dateValue = (_v =
|
|
265
|
+
else if ((0, date_fns_1.differenceInCalendarDays)(dateValue, (_u = this.props.min) !== null && _u !== void 0 ? _u : calendar_1.endDate) > -1) {
|
|
266
|
+
dateValue = (_v = this.props.max) !== null && _v !== void 0 ? _v : calendar_1.endDate;
|
|
299
267
|
}
|
|
300
268
|
else {
|
|
301
269
|
dateValue = undefined;
|
|
302
270
|
}
|
|
303
271
|
}
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
if (
|
|
307
|
-
|
|
272
|
+
const stateDateValue = dateValue ? dateToString(dateValue) : dateValue;
|
|
273
|
+
this.setState(Object.assign(Object.assign({}, this.state), { isOpen: false, value: stateDateValue }));
|
|
274
|
+
if (this.props.onChange)
|
|
275
|
+
this.props.onChange(stateDateValue);
|
|
308
276
|
break;
|
|
309
277
|
}
|
|
310
278
|
} })),
|
|
311
|
-
react_1.default.createElement(index_1.Winicon, { src:
|
|
279
|
+
react_1.default.createElement(index_1.Winicon, { src: `outline/user interface/${this.props.pickerType === index_1.CalendarType.DATETIME ? "opening-times" : "calendar-date-2"}`, size: '1.6rem', onClick: this.onOpenCalendar }),
|
|
312
280
|
this.state.isOpen &&
|
|
313
|
-
react_dom_1.default.createPortal(react_1.default.createElement("div", { className:
|
|
281
|
+
react_dom_1.default.createPortal(react_1.default.createElement("div", { className: `popup-overlay hidden-overlay`, onClick: (ev) => {
|
|
314
282
|
if (ev.target.classList.contains('popup-overlay'))
|
|
315
|
-
|
|
283
|
+
this.setState(Object.assign(Object.assign({}, this.state), { isOpen: false }));
|
|
316
284
|
} },
|
|
317
|
-
react_1.default.createElement(index_1.Calendar, { min: this.props.min, max: this.props.max, value: this.getNewValue(), className: 'date-picker-popup-container', style: (_f = this.state.style) !== null && _f !== void 0 ? _f : { top: this.state.offset.y + this.state.offset.height + 2 + 'px', left: this.state.offset.x + 'px', border: 'none', boxShadow: '-20px 20px 40px -4px rgba(145, 158, 171, 0.24), 0px 0px 2px 0px rgba(145, 158, 171, 0.24)' }, onSelect:
|
|
285
|
+
react_1.default.createElement(index_1.Calendar, { min: this.props.min, max: this.props.max, value: this.getNewValue(), className: 'date-picker-popup-container', style: (_f = this.state.style) !== null && _f !== void 0 ? _f : { top: this.state.offset.y + this.state.offset.height + 2 + 'px', left: this.state.offset.x + 'px', border: 'none', boxShadow: '-20px 20px 40px -4px rgba(145, 158, 171, 0.24), 0px 0px 2px 0px rgba(145, 158, 171, 0.24)' }, onSelect: (dateValue) => {
|
|
318
286
|
var _a;
|
|
319
|
-
switch (
|
|
287
|
+
switch (this.props.pickerType) {
|
|
320
288
|
case index_1.CalendarType.YEAR:
|
|
321
|
-
|
|
322
|
-
if (
|
|
323
|
-
|
|
289
|
+
this.setState(Object.assign(Object.assign({}, this.state), { value: dateValue.getFullYear().toString(), isOpen: false }));
|
|
290
|
+
if (this.props.onChange)
|
|
291
|
+
this.props.onChange(dateValue.getFullYear().toString());
|
|
324
292
|
break;
|
|
325
293
|
case index_1.CalendarType.MONTH:
|
|
326
294
|
var newValue = dateToString(dateValue);
|
|
327
|
-
|
|
328
|
-
if (
|
|
329
|
-
|
|
295
|
+
this.setState(Object.assign(Object.assign({}, this.state), { value: newValue.split('/').slice(1).join('/'), isOpen: false }));
|
|
296
|
+
if (this.props.onChange)
|
|
297
|
+
this.props.onChange(newValue.split('/').slice(1).join('/'));
|
|
330
298
|
break;
|
|
331
299
|
case index_1.CalendarType.DATETIME:
|
|
332
|
-
var newValue = dateToString(dateValue, (_a =
|
|
333
|
-
|
|
300
|
+
var newValue = dateToString(dateValue, (_a = this.props.formatDate) !== null && _a !== void 0 ? _a : 'dd/mm/yyyy hh:mm');
|
|
301
|
+
this.setState(Object.assign(Object.assign({}, this.state), { value: newValue }));
|
|
334
302
|
break;
|
|
335
303
|
default:
|
|
336
304
|
var newValue = dateToString(dateValue);
|
|
337
|
-
|
|
338
|
-
if (
|
|
339
|
-
|
|
305
|
+
this.setState(Object.assign(Object.assign({}, this.state), { value: newValue, isOpen: false }));
|
|
306
|
+
if (this.props.onChange)
|
|
307
|
+
this.props.onChange(newValue);
|
|
340
308
|
break;
|
|
341
309
|
}
|
|
342
310
|
}, footer: (this.props.pickerType === index_1.CalendarType.DATETIME || !this.props.hideButtonToday) && react_1.default.createElement("div", { className: 'row picker-popup-footer' },
|
|
343
311
|
this.props.pickerType === undefined || this.props.pickerType === index_1.CalendarType.DATE || this.props.pickerType === index_1.CalendarType.DATETIME ?
|
|
344
|
-
react_1.default.createElement("button", { type: 'button', className: 'row button-text-3', style: { color: 'var(--infor-main-color)', width: 'fit-content' }, onClick:
|
|
312
|
+
react_1.default.createElement("button", { type: 'button', className: 'row button-text-3', style: { color: 'var(--infor-main-color)', width: 'fit-content' }, onClick: () => {
|
|
345
313
|
var _a;
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
if (
|
|
349
|
-
|
|
314
|
+
let format = (_a = this.props.formatDate) !== null && _a !== void 0 ? _a : (this.props.pickerType === index_1.CalendarType.DATETIME ? 'dd/mm/yyyy hh:mm' : 'dd/mm/yyyy');
|
|
315
|
+
this.setState(Object.assign(Object.assign({}, this.state), { isOpen: false, value: dateToString(calendar_1.today, format) }));
|
|
316
|
+
if (this.props.onChange)
|
|
317
|
+
this.props.onChange(dateToString(calendar_1.today, format));
|
|
350
318
|
} }, this.props.t('today')) : null,
|
|
351
319
|
this.props.pickerType === index_1.CalendarType.DATETIME ? react_1.default.createElement(react_1.default.Fragment, null,
|
|
352
320
|
react_1.default.createElement("div", { style: { flex: 1 } }),
|
|
353
|
-
react_1.default.createElement("button", { type: 'button', className: 'row', style: { padding: '0.6rem 1.2rem', backgroundColor: "var(--primary-main-color)", borderRadius: "0.8rem" }, onClick:
|
|
354
|
-
|
|
355
|
-
if (
|
|
356
|
-
|
|
321
|
+
react_1.default.createElement("button", { type: 'button', className: 'row', style: { padding: '0.6rem 1.2rem', backgroundColor: "var(--primary-main-color)", borderRadius: "0.8rem" }, onClick: () => {
|
|
322
|
+
this.setState(Object.assign(Object.assign({}, this.state), { isOpen: false }));
|
|
323
|
+
if (this.props.onChange)
|
|
324
|
+
this.props.onChange(this.state.value);
|
|
357
325
|
} },
|
|
358
326
|
react_1.default.createElement(index_1.Text, { className: 'button-text-3', style: { color: "var(--neutral-text-stable-color)" } }, t("apply")))) : null) })), document.body));
|
|
359
|
-
}
|
|
360
|
-
|
|
361
|
-
}(react_1.default.Component));
|
|
327
|
+
}
|
|
328
|
+
}
|
|
362
329
|
exports.DatePicker = (0, react_i18next_1.withTranslation)()(TDatePicker);
|