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