wini-web-components 2.5.9 → 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,42 +1,22 @@
|
|
|
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
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
4
|
};
|
|
20
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
6
|
exports.Button = void 0;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
function Button() {
|
|
28
|
-
return _super !== null && _super.apply(this, arguments) || this;
|
|
29
|
-
}
|
|
30
|
-
Button.prototype.render = function () {
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const text_1 = require("../text/text");
|
|
9
|
+
const button_module_css_1 = __importDefault(require("./button.module.css"));
|
|
10
|
+
class Button extends react_1.default.Component {
|
|
11
|
+
render() {
|
|
31
12
|
var _a, _b, _c;
|
|
32
|
-
return this.props.linkTo ? react_1.default.createElement("a", { id: this.props.id, href: this.props.disabled ? undefined : this.props.linkTo, target: this.props.target, className:
|
|
13
|
+
return this.props.linkTo ? react_1.default.createElement("a", { id: this.props.id, href: this.props.disabled ? undefined : this.props.linkTo, target: this.props.target, className: `${button_module_css_1.default['button-container']} row ${(_a = this.props.className) !== null && _a !== void 0 ? _a : "button-text-3"}`, style: this.props.style },
|
|
33
14
|
this.props.prefix,
|
|
34
15
|
react_1.default.createElement(text_1.Text, { maxLine: 1, className: button_module_css_1.default['button-label'] }, this.props.label),
|
|
35
|
-
this.props.suffix) : react_1.default.createElement("button", { id: this.props.id, type: (_b = this.props.type) !== null && _b !== void 0 ? _b : "button", disabled: this.props.disabled, className:
|
|
16
|
+
this.props.suffix) : react_1.default.createElement("button", { id: this.props.id, type: (_b = this.props.type) !== null && _b !== void 0 ? _b : "button", disabled: this.props.disabled, className: `${button_module_css_1.default['button-container']} row ${(_c = this.props.className) !== null && _c !== void 0 ? _c : "button-text-3"}`, style: this.props.style, onClick: this.props.onClick },
|
|
36
17
|
this.props.prefix,
|
|
37
18
|
react_1.default.createElement(text_1.Text, { maxLine: 1, className: button_module_css_1.default['button-label'] }, this.props.label),
|
|
38
19
|
this.props.suffix);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
}(react_1.default.Component));
|
|
20
|
+
}
|
|
21
|
+
}
|
|
42
22
|
exports.Button = Button;
|
|
@@ -1,44 +1,18 @@
|
|
|
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.Calendar = exports.CalendarType = exports.inRangeTime = exports.endDate = exports.startDate = exports.today = void 0;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const calendar_module_css_1 = __importDefault(require("./calendar.module.css"));
|
|
9
|
+
const date_fns_1 = require("date-fns");
|
|
10
|
+
const react_i18next_1 = require("react-i18next");
|
|
11
|
+
const winicon_1 = require("../wini-icon/winicon");
|
|
38
12
|
exports.today = new Date();
|
|
39
13
|
exports.startDate = new Date(exports.today.getFullYear() - 100, exports.today.getMonth(), exports.today.getDate());
|
|
40
14
|
exports.endDate = new Date(exports.today.getFullYear() + 100, exports.today.getMonth(), exports.today.getDate());
|
|
41
|
-
|
|
15
|
+
const inRangeTime = (date, startDate, endDate) => ((0, date_fns_1.differenceInCalendarDays)(date, startDate) > -1 && (0, date_fns_1.differenceInCalendarDays)(endDate, date) > -1);
|
|
42
16
|
exports.inRangeTime = inRangeTime;
|
|
43
17
|
var CalendarType;
|
|
44
18
|
(function (CalendarType) {
|
|
@@ -53,8 +27,8 @@ var CalendarTab;
|
|
|
53
27
|
CalendarTab[CalendarTab["MONTH"] = 1] = "MONTH";
|
|
54
28
|
CalendarTab[CalendarTab["YEAR"] = 2] = "YEAR";
|
|
55
29
|
})(CalendarTab || (CalendarTab = {}));
|
|
56
|
-
|
|
57
|
-
|
|
30
|
+
const stateValue = (minDate, maxDate, value, range) => {
|
|
31
|
+
let defaultValue;
|
|
58
32
|
if (value) {
|
|
59
33
|
if (range) {
|
|
60
34
|
if (value instanceof Date)
|
|
@@ -80,8 +54,8 @@ var stateValue = function (minDate, maxDate, value, range) {
|
|
|
80
54
|
else {
|
|
81
55
|
defaultValue = range ? { sTime: exports.today, eTime: exports.today } : exports.today;
|
|
82
56
|
}
|
|
83
|
-
|
|
84
|
-
|
|
57
|
+
const defaultMonth = defaultValue instanceof Date ? defaultValue.getMonth() : defaultValue.sTime.getMonth();
|
|
58
|
+
const defaultYear = defaultValue instanceof Date ? defaultValue.getFullYear() : defaultValue.sTime.getFullYear();
|
|
85
59
|
return {
|
|
86
60
|
value: value ? defaultValue : undefined,
|
|
87
61
|
selectMonth: defaultMonth,
|
|
@@ -89,199 +63,194 @@ var stateValue = function (minDate, maxDate, value, range) {
|
|
|
89
63
|
tab: CalendarTab.DATE,
|
|
90
64
|
};
|
|
91
65
|
};
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
_this.getTitle = _this.getTitle.bind(_this);
|
|
103
|
-
return _this;
|
|
66
|
+
class TCalendar extends react_1.default.Component {
|
|
67
|
+
constructor(props) {
|
|
68
|
+
super(props);
|
|
69
|
+
this.minDate = !this.props.min || this.props.min.getTime() < exports.startDate.getTime() ? exports.startDate : this.props.min;
|
|
70
|
+
this.maxDate = !this.props.max || this.props.max.getTime() > exports.endDate.getTime() ? exports.endDate : this.props.max;
|
|
71
|
+
this.state = stateValue(this.minDate, this.maxDate, this.props.value, this.props.range);
|
|
72
|
+
this.showDateInMonth = this.showDateInMonth.bind(this);
|
|
73
|
+
this.showMonthInYear = this.showMonthInYear.bind(this);
|
|
74
|
+
this.showYearInRange = this.showYearInRange.bind(this);
|
|
75
|
+
this.getTitle = this.getTitle.bind(this);
|
|
104
76
|
}
|
|
105
|
-
|
|
77
|
+
componentDidUpdate(prevProps, prevState, snapshot) {
|
|
106
78
|
if (prevProps.value !== this.props.value) {
|
|
107
79
|
this.setState(stateValue(this.minDate, this.maxDate, this.props.value, this.props.range));
|
|
108
80
|
}
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
var firstDayOfMonth = new Date(this.state.selectYear, this.state.selectMonth, 1);
|
|
81
|
+
}
|
|
82
|
+
showDateInMonth() {
|
|
83
|
+
let firstDayOfMonth = new Date(this.state.selectYear, this.state.selectMonth, 1);
|
|
113
84
|
return react_1.default.createElement(react_1.default.Fragment, null,
|
|
114
|
-
Array.from({ length: 7 }).map(
|
|
85
|
+
Array.from({ length: 7 }).map((_, i) => {
|
|
115
86
|
switch (i) {
|
|
116
87
|
case 0:
|
|
117
|
-
var weekdayTitle =
|
|
88
|
+
var weekdayTitle = this.props.t("su");
|
|
118
89
|
break;
|
|
119
90
|
case 1:
|
|
120
|
-
weekdayTitle =
|
|
91
|
+
weekdayTitle = this.props.t("mo");
|
|
121
92
|
break;
|
|
122
93
|
case 2:
|
|
123
|
-
weekdayTitle =
|
|
94
|
+
weekdayTitle = this.props.t("tu");
|
|
124
95
|
break;
|
|
125
96
|
case 3:
|
|
126
|
-
weekdayTitle =
|
|
97
|
+
weekdayTitle = this.props.t("we");
|
|
127
98
|
break;
|
|
128
99
|
case 4:
|
|
129
|
-
weekdayTitle =
|
|
100
|
+
weekdayTitle = this.props.t("th");
|
|
130
101
|
break;
|
|
131
102
|
case 5:
|
|
132
|
-
weekdayTitle =
|
|
103
|
+
weekdayTitle = this.props.t("fr");
|
|
133
104
|
break;
|
|
134
105
|
case 6:
|
|
135
|
-
weekdayTitle =
|
|
106
|
+
weekdayTitle = this.props.t("sa");
|
|
136
107
|
break;
|
|
137
108
|
default:
|
|
138
109
|
weekdayTitle = '';
|
|
139
110
|
break;
|
|
140
111
|
}
|
|
141
|
-
return react_1.default.createElement("div", { key: 'dtwk-' + i, className:
|
|
112
|
+
return react_1.default.createElement("div", { key: 'dtwk-' + i, className: `${calendar_module_css_1.default['date-picker-circle']} date-picker-circle` },
|
|
142
113
|
react_1.default.createElement("span", { className: "label-4 row" }, weekdayTitle));
|
|
143
114
|
}),
|
|
144
|
-
Array.from({ length: 42 }).map(
|
|
115
|
+
Array.from({ length: 42 }).map((_, i) => {
|
|
145
116
|
var _a, _b, _c;
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
if (dateNumber + 1 === exports.today.getDate() &&
|
|
151
|
-
className +=
|
|
117
|
+
let dateNumber = (i % 7) + (Math.floor(i / 7) * 7) - firstDayOfMonth.getDay();
|
|
118
|
+
const timeValue = new Date(this.state.selectYear, this.state.selectMonth, dateNumber + 1);
|
|
119
|
+
let className = `${calendar_module_css_1.default['date-picker-circle']} date-picker-circle`;
|
|
120
|
+
let typoClassName = "body-3";
|
|
121
|
+
if (dateNumber + 1 === exports.today.getDate() && this.state.selectMonth === exports.today.getMonth() && this.state.selectYear === exports.today.getFullYear()) {
|
|
122
|
+
className += ` ${calendar_module_css_1.default['today']}`;
|
|
152
123
|
}
|
|
153
|
-
|
|
154
|
-
if (!(0, exports.inRangeTime)(timeValue,
|
|
155
|
-
className +=
|
|
124
|
+
let style;
|
|
125
|
+
if (!(0, exports.inRangeTime)(timeValue, this.minDate, this.maxDate)) {
|
|
126
|
+
className += ` ${calendar_module_css_1.default['invalid']}`;
|
|
156
127
|
}
|
|
157
|
-
else if (
|
|
158
|
-
if (
|
|
159
|
-
className +=
|
|
128
|
+
else if (this.state.value instanceof Date) {
|
|
129
|
+
if (this.state.value.getTime() === timeValue.getTime())
|
|
130
|
+
className += ` ${calendar_module_css_1.default['selected']}`;
|
|
160
131
|
}
|
|
161
|
-
else if (((_a =
|
|
162
|
-
className +=
|
|
132
|
+
else if ((((_a = this.state.value) === null || _a === void 0 ? void 0 : _a.sTime.getDate()) === timeValue.getDate() && (Math.abs((0, date_fns_1.differenceInCalendarDays)(timeValue, this.state.value.sTime))) < 1) || (((_b = this.state.value) === null || _b === void 0 ? void 0 : _b.eTime.getDate()) === timeValue.getDate() && (Math.abs((0, date_fns_1.differenceInCalendarDays)(timeValue, this.state.value.eTime))) < 1)) {
|
|
133
|
+
className += ` ${calendar_module_css_1.default['selected']} ${calendar_module_css_1.default[`${((_c = this.state.value) === null || _c === void 0 ? void 0 : _c.sTime.getDate()) === timeValue.getDate() && (Math.abs((0, date_fns_1.differenceInCalendarDays)(timeValue, this.state.value.sTime))) < 1 ? "start" : "end"}-range`]}`;
|
|
163
134
|
}
|
|
164
|
-
else if (
|
|
165
|
-
className +=
|
|
135
|
+
else if (this.state.value && (0, exports.inRangeTime)(timeValue, this.state.value.sTime, this.state.value.eTime)) {
|
|
136
|
+
className += ` ${calendar_module_css_1.default['in-range']}`;
|
|
166
137
|
}
|
|
167
|
-
if (timeValue.getMonth() !==
|
|
138
|
+
if (timeValue.getMonth() !== this.state.selectMonth) {
|
|
168
139
|
typoClassName = "placeholder-2";
|
|
169
140
|
}
|
|
170
141
|
return react_1.default.createElement("div", { key: timeValue.toString(), className: className, style: style },
|
|
171
|
-
react_1.default.createElement("button", { type: "button", className:
|
|
172
|
-
|
|
173
|
-
if (
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
if (
|
|
177
|
-
|
|
142
|
+
react_1.default.createElement("button", { type: "button", className: `${typoClassName} row`, onClick: () => {
|
|
143
|
+
const currentValue = this.state.value;
|
|
144
|
+
if (this.props.range) {
|
|
145
|
+
const newValue = (!currentValue || timeValue.getTime() < currentValue.sTime.getTime()) ? { sTime: timeValue, eTime: timeValue } : { sTime: currentValue.sTime, eTime: timeValue };
|
|
146
|
+
this.setState(Object.assign(Object.assign({}, this.state), { value: newValue }));
|
|
147
|
+
if (this.props.onSelect)
|
|
148
|
+
this.props.onSelect(newValue);
|
|
178
149
|
}
|
|
179
150
|
else {
|
|
180
|
-
|
|
181
|
-
if (
|
|
182
|
-
|
|
151
|
+
this.setState(Object.assign(Object.assign({}, this.state), { value: timeValue }));
|
|
152
|
+
if (this.props.onSelect)
|
|
153
|
+
this.props.onSelect(timeValue);
|
|
183
154
|
}
|
|
184
155
|
} }, timeValue.getDate()));
|
|
185
156
|
}));
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
return react_1.default.createElement(react_1.default.Fragment, null, Array.from({ length: 12 }).map(function (_, i) {
|
|
157
|
+
}
|
|
158
|
+
showMonthInYear() {
|
|
159
|
+
return react_1.default.createElement(react_1.default.Fragment, null, Array.from({ length: 12 }).map((_, i) => {
|
|
190
160
|
switch (i) {
|
|
191
161
|
case 0:
|
|
192
|
-
var monthTitle =
|
|
162
|
+
var monthTitle = this.props.i18n.language === "en" ? "Jan" : this.props.t('january');
|
|
193
163
|
break;
|
|
194
164
|
case 1:
|
|
195
|
-
monthTitle =
|
|
165
|
+
monthTitle = this.props.i18n.language === "en" ? "Feb" : this.props.t('february');
|
|
196
166
|
break;
|
|
197
167
|
case 2:
|
|
198
|
-
monthTitle =
|
|
168
|
+
monthTitle = this.props.i18n.language === "en" ? "Mar" : this.props.t('march');
|
|
199
169
|
break;
|
|
200
170
|
case 3:
|
|
201
|
-
monthTitle =
|
|
171
|
+
monthTitle = this.props.i18n.language === "en" ? "Apr" : this.props.t('april');
|
|
202
172
|
break;
|
|
203
173
|
case 4:
|
|
204
|
-
monthTitle =
|
|
174
|
+
monthTitle = this.props.i18n.language === "en" ? "May" : this.props.t('may');
|
|
205
175
|
break;
|
|
206
176
|
case 5:
|
|
207
|
-
monthTitle =
|
|
177
|
+
monthTitle = this.props.i18n.language === "en" ? "Jun" : this.props.t('june');
|
|
208
178
|
break;
|
|
209
179
|
case 6:
|
|
210
|
-
monthTitle =
|
|
180
|
+
monthTitle = this.props.i18n.language === "en" ? "Jul" : this.props.t('july');
|
|
211
181
|
break;
|
|
212
182
|
case 7:
|
|
213
|
-
monthTitle =
|
|
183
|
+
monthTitle = this.props.i18n.language === "en" ? "Aug" : this.props.t('august');
|
|
214
184
|
break;
|
|
215
185
|
case 8:
|
|
216
|
-
monthTitle =
|
|
186
|
+
monthTitle = this.props.i18n.language === "en" ? "Sep" : this.props.t('september');
|
|
217
187
|
break;
|
|
218
188
|
case 9:
|
|
219
|
-
monthTitle =
|
|
189
|
+
monthTitle = this.props.i18n.language === "en" ? "Oct" : this.props.t('october');
|
|
220
190
|
break;
|
|
221
191
|
case 10:
|
|
222
|
-
monthTitle =
|
|
192
|
+
monthTitle = this.props.i18n.language === "en" ? "Nov" : this.props.t('november');
|
|
223
193
|
break;
|
|
224
194
|
case 11:
|
|
225
|
-
monthTitle =
|
|
195
|
+
monthTitle = this.props.i18n.language === "en" ? "Dec" : this.props.t('december');
|
|
226
196
|
break;
|
|
227
197
|
default:
|
|
228
198
|
monthTitle = '';
|
|
229
199
|
break;
|
|
230
200
|
}
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
if (
|
|
234
|
-
className +=
|
|
201
|
+
const timeValue = new Date(this.state.selectYear, i);
|
|
202
|
+
let className = `${calendar_module_css_1.default['month-picker-circle']} month-picker-circle`;
|
|
203
|
+
if (this.state.selectYear === exports.today.getFullYear() && exports.today.getMonth() === i) {
|
|
204
|
+
className += ` ${calendar_module_css_1.default['today']}`;
|
|
235
205
|
}
|
|
236
|
-
if (!(0, exports.inRangeTime)(timeValue,
|
|
237
|
-
className +=
|
|
206
|
+
if (!(0, exports.inRangeTime)(timeValue, this.minDate, this.maxDate)) {
|
|
207
|
+
className += ` ${calendar_module_css_1.default['invalid']}`;
|
|
238
208
|
}
|
|
239
|
-
else if (
|
|
240
|
-
if (
|
|
241
|
-
className +=
|
|
209
|
+
else if (this.state.value instanceof Date) {
|
|
210
|
+
if (this.state.selectYear === this.state.value.getFullYear() && i === this.state.value.getMonth())
|
|
211
|
+
className += ` ${calendar_module_css_1.default['selected']}`;
|
|
242
212
|
}
|
|
243
|
-
else if (
|
|
244
|
-
className +=
|
|
213
|
+
else if (this.state.value && ((i === this.state.value.sTime.getMonth() && this.state.value.sTime.getFullYear() === this.state.selectYear) || (i === this.state.value.eTime.getMonth() && this.state.value.eTime.getFullYear() === this.state.selectYear))) {
|
|
214
|
+
className += ` ${calendar_module_css_1.default['selected']} ${calendar_module_css_1.default[`${i === this.state.value.sTime.getMonth() && this.state.value.sTime.getFullYear() === this.state.selectYear ? "start" : "end"}-range`]}`;
|
|
245
215
|
}
|
|
246
|
-
else if (
|
|
247
|
-
className +=
|
|
216
|
+
else if (this.state.value && (0, exports.inRangeTime)(timeValue, this.state.value.sTime, this.state.value.eTime)) {
|
|
217
|
+
className += ` ${calendar_module_css_1.default['in-range']}`;
|
|
248
218
|
}
|
|
249
219
|
return react_1.default.createElement("div", { key: timeValue.toString(), className: className },
|
|
250
|
-
react_1.default.createElement("button", { type: "button", className: "body-3 row", onClick:
|
|
220
|
+
react_1.default.createElement("button", { type: "button", className: "body-3 row", onClick: () => { this.setState(Object.assign(Object.assign({}, this.state), { selectMonth: i, tab: CalendarTab.DATE })); } }, monthTitle));
|
|
251
221
|
}));
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
return Array.from({ length: 12 }).map(function (_, i) {
|
|
222
|
+
}
|
|
223
|
+
showYearInRange() {
|
|
224
|
+
return Array.from({ length: 12 }).map((_, i) => {
|
|
256
225
|
var _a, _b, _c;
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
226
|
+
let firstYearInTable = this.state.selectYear - ((this.state.selectYear - exports.startDate.getFullYear()) % 12);
|
|
227
|
+
let yearNumber = i + firstYearInTable;
|
|
228
|
+
let className = `${calendar_module_css_1.default['year-picker-circle']} year-picker-circle`;
|
|
260
229
|
if (yearNumber === exports.today.getFullYear()) {
|
|
261
|
-
className +=
|
|
230
|
+
className += ` ${calendar_module_css_1.default['today']}`;
|
|
262
231
|
}
|
|
263
|
-
if (yearNumber <
|
|
264
|
-
className +=
|
|
232
|
+
if (yearNumber < this.minDate.getFullYear() || yearNumber > this.maxDate.getFullYear()) {
|
|
233
|
+
className += ` ${calendar_module_css_1.default['invalid']}`;
|
|
265
234
|
}
|
|
266
|
-
else if (
|
|
267
|
-
if (yearNumber ===
|
|
268
|
-
className +=
|
|
235
|
+
else if (this.state.value instanceof Date) {
|
|
236
|
+
if (yearNumber === this.state.value.getFullYear())
|
|
237
|
+
className += ` ${calendar_module_css_1.default['selected']}`;
|
|
269
238
|
}
|
|
270
|
-
else if (yearNumber === ((_a =
|
|
271
|
-
className +=
|
|
239
|
+
else if (yearNumber === ((_a = this.state.value) === null || _a === void 0 ? void 0 : _a.sTime.getFullYear()) || yearNumber === ((_b = this.state.value) === null || _b === void 0 ? void 0 : _b.eTime.getFullYear())) {
|
|
240
|
+
className += ` ${calendar_module_css_1.default['selected']} ${calendar_module_css_1.default[`${yearNumber === ((_c = this.state.value) === null || _c === void 0 ? void 0 : _c.sTime.getFullYear()) ? "start" : "end"}-range`]}`;
|
|
272
241
|
}
|
|
273
|
-
else if (
|
|
274
|
-
className +=
|
|
242
|
+
else if (this.state.value && yearNumber > this.state.value.sTime.getFullYear() && yearNumber < this.state.value.eTime.getFullYear()) {
|
|
243
|
+
className += ` ${calendar_module_css_1.default['in-range']}`;
|
|
275
244
|
}
|
|
276
245
|
return react_1.default.createElement("div", { key: yearNumber.toString(), className: className },
|
|
277
|
-
react_1.default.createElement("button", { type: "button", className: "body-3 row", onClick:
|
|
246
|
+
react_1.default.createElement("button", { type: "button", className: "body-3 row", onClick: () => { this.setState(Object.assign(Object.assign({}, this.state), { tab: CalendarTab.MONTH, selectYear: yearNumber })); } }, yearNumber));
|
|
278
247
|
});
|
|
279
|
-
}
|
|
280
|
-
|
|
248
|
+
}
|
|
249
|
+
getTitle() {
|
|
281
250
|
switch (this.state.tab) {
|
|
282
251
|
case CalendarTab.YEAR:
|
|
283
|
-
|
|
284
|
-
return
|
|
252
|
+
let firstYearInTable = this.state.selectYear - ((this.state.selectYear - exports.startDate.getFullYear()) % 12);
|
|
253
|
+
return `${firstYearInTable}-${firstYearInTable + 11}`;
|
|
285
254
|
case CalendarTab.MONTH:
|
|
286
255
|
return this.state.selectYear;
|
|
287
256
|
default:
|
|
@@ -326,72 +295,70 @@ var TCalendar = /** @class */ (function (_super) {
|
|
|
326
295
|
monthName = '';
|
|
327
296
|
break;
|
|
328
297
|
}
|
|
329
|
-
return
|
|
298
|
+
return `${monthName}${this.props.i18n.language === 'en' ? ' ' : '/'}${this.state.selectYear}`;
|
|
330
299
|
}
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
var _this = this;
|
|
300
|
+
}
|
|
301
|
+
render() {
|
|
334
302
|
var _a;
|
|
335
|
-
return react_1.default.createElement("div", { className:
|
|
303
|
+
return react_1.default.createElement("div", { className: `${calendar_module_css_1.default['calendar-container']} col ${(_a = this.props.className) !== null && _a !== void 0 ? _a : ""}`, style: this.props.style },
|
|
336
304
|
this.props.header,
|
|
337
|
-
react_1.default.createElement("div", { className:
|
|
338
|
-
react_1.default.createElement("button", { type: 'button', onClick:
|
|
339
|
-
switch (
|
|
305
|
+
react_1.default.createElement("div", { className: `${calendar_module_css_1.default['picker-date-header']} row` },
|
|
306
|
+
react_1.default.createElement("button", { type: 'button', onClick: () => {
|
|
307
|
+
switch (this.state.tab) {
|
|
340
308
|
case CalendarTab.YEAR:
|
|
341
|
-
if (
|
|
342
|
-
|
|
309
|
+
if (this.state.selectYear - 10 < exports.startDate.getFullYear()) {
|
|
310
|
+
this.setState(Object.assign(Object.assign({}, this.state), { selectYear: exports.startDate.getFullYear() }));
|
|
343
311
|
}
|
|
344
312
|
else {
|
|
345
|
-
|
|
313
|
+
this.setState(Object.assign(Object.assign({}, this.state), { selectYear: this.state.selectYear - 10 }));
|
|
346
314
|
}
|
|
347
315
|
break;
|
|
348
316
|
case CalendarTab.MONTH:
|
|
349
|
-
|
|
317
|
+
const newTime = new Date(this.state.selectYear, this.state.selectMonth - 1);
|
|
350
318
|
if (newTime.getTime() >= exports.startDate.getTime()) {
|
|
351
|
-
|
|
319
|
+
this.setState(Object.assign(Object.assign({}, this.state), { selectYear: this.state.selectYear - 1 }));
|
|
352
320
|
}
|
|
353
321
|
break;
|
|
354
322
|
default:
|
|
355
|
-
|
|
323
|
+
const newDataVl = new Date(this.state.selectYear, this.state.selectMonth - 1);
|
|
356
324
|
if (newDataVl.getTime() >= exports.startDate.getTime()) {
|
|
357
|
-
|
|
325
|
+
this.setState(Object.assign(Object.assign({}, this.state), { selectMonth: newDataVl.getMonth(), selectYear: newDataVl.getFullYear() }));
|
|
358
326
|
}
|
|
359
327
|
break;
|
|
360
328
|
}
|
|
361
329
|
} },
|
|
362
330
|
react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/left-arrow", size: '1.4rem' })),
|
|
363
|
-
react_1.default.createElement("span", { className: "heading-7", onClick:
|
|
364
|
-
if (
|
|
365
|
-
|
|
331
|
+
react_1.default.createElement("span", { className: "heading-7", onClick: () => {
|
|
332
|
+
if (this.state.tab !== CalendarTab.YEAR)
|
|
333
|
+
this.setState(Object.assign(Object.assign({}, this.state), { tab: this.state.tab === CalendarTab.DATE ? CalendarTab.MONTH : CalendarTab.YEAR }));
|
|
366
334
|
} }, this.getTitle()),
|
|
367
|
-
react_1.default.createElement("button", { type: 'button', onClick:
|
|
368
|
-
switch (
|
|
335
|
+
react_1.default.createElement("button", { type: 'button', onClick: () => {
|
|
336
|
+
switch (this.state.tab) {
|
|
369
337
|
case CalendarTab.YEAR:
|
|
370
|
-
if (
|
|
371
|
-
|
|
338
|
+
if (this.state.selectYear + 10 > exports.endDate.getFullYear()) {
|
|
339
|
+
this.setState(Object.assign(Object.assign({}, this.state), { selectYear: exports.endDate.getFullYear() }));
|
|
372
340
|
}
|
|
373
341
|
else {
|
|
374
|
-
|
|
342
|
+
this.setState(Object.assign(Object.assign({}, this.state), { selectYear: this.state.selectYear + 10 }));
|
|
375
343
|
}
|
|
376
344
|
break;
|
|
377
345
|
case CalendarTab.MONTH:
|
|
378
|
-
|
|
346
|
+
const newTime = new Date(this.state.selectYear, this.state.selectMonth + 1);
|
|
379
347
|
if (newTime.getTime() <= exports.endDate.getTime()) {
|
|
380
|
-
|
|
348
|
+
this.setState(Object.assign(Object.assign({}, this.state), { selectYear: this.state.selectYear + 1 }));
|
|
381
349
|
}
|
|
382
350
|
break;
|
|
383
351
|
default:
|
|
384
|
-
|
|
352
|
+
const newDataVl = new Date(this.state.selectYear, this.state.selectMonth + 1);
|
|
385
353
|
if (newDataVl.getTime() <= exports.endDate.getTime()) {
|
|
386
|
-
|
|
354
|
+
this.setState(Object.assign(Object.assign({}, this.state), { selectMonth: newDataVl.getMonth(), selectYear: newDataVl.getFullYear() }));
|
|
387
355
|
}
|
|
388
356
|
break;
|
|
389
357
|
}
|
|
390
358
|
} },
|
|
391
359
|
react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/right-arrow", size: '1.4rem' }))),
|
|
392
|
-
react_1.default.createElement("div", { className:
|
|
360
|
+
react_1.default.createElement("div", { className: `${calendar_module_css_1.default['picker-date-body']} row` }, this.state.tab === CalendarTab.YEAR ? this.showYearInRange() : this.state.tab === CalendarTab.MONTH ? this.showMonthInYear() : this.showDateInMonth()),
|
|
393
361
|
this.props.footer);
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
}(react_1.default.Component));
|
|
362
|
+
}
|
|
363
|
+
}
|
|
397
364
|
exports.Calendar = (0, react_i18next_1.withTranslation)()(TCalendar);
|