wini-web-components 0.7.1 → 0.7.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/calendar/calendar.d.ts +1 -1
- package/dist/component/calendar/calendar.js +27 -20
- package/dist/component/component-status.d.ts +1 -1
- package/dist/component/component-status.js +11 -4
- package/dist/component/date-picker/date-picker.js +17 -17
- package/dist/component/dialog/dialog.js +2 -2
- package/dist/component/progress-bar/progress-bar.js +2 -2
- package/dist/index.js +3 -1
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ 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
|
|
7
|
+
export declare enum CalendarType {
|
|
8
8
|
DATE = 0,
|
|
9
9
|
MONTH = 1,
|
|
10
10
|
YEAR = 2,
|
|
@@ -29,7 +29,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
29
29
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
30
30
|
};
|
|
31
31
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
32
|
-
exports.Calendar = exports.inRangeTime = exports.endDate = exports.startDate = exports.today = void 0;
|
|
32
|
+
exports.Calendar = exports.CalendarType = exports.inRangeTime = exports.endDate = exports.startDate = exports.today = void 0;
|
|
33
33
|
var react_1 = __importDefault(require("react"));
|
|
34
34
|
require("./calendar.css");
|
|
35
35
|
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
|
|
@@ -40,6 +40,13 @@ exports.startDate = new Date(exports.today.getFullYear() - 100, exports.today.ge
|
|
|
40
40
|
exports.endDate = new Date(exports.today.getFullYear() + 100, exports.today.getMonth(), exports.today.getDate());
|
|
41
41
|
var inRangeTime = function (date, startDate, endDate) { return ((0, date_fns_1.differenceInCalendarDays)(date, startDate) > -1 && (0, date_fns_1.differenceInCalendarDays)(endDate, date) > -1); };
|
|
42
42
|
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 || (exports.CalendarType = {}));
|
|
43
50
|
var Calendar = /** @class */ (function (_super) {
|
|
44
51
|
__extends(Calendar, _super);
|
|
45
52
|
function Calendar() {
|
|
@@ -51,7 +58,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
51
58
|
selectDate: (_b = _this.props.value) !== null && _b !== void 0 ? _b : exports.today,
|
|
52
59
|
selectMonth: ((_c = _this.props.value) !== null && _c !== void 0 ? _c : exports.today).getMonth(),
|
|
53
60
|
selectYear: ((_d = _this.props.value) !== null && _d !== void 0 ? _d : exports.today).getFullYear(),
|
|
54
|
-
type:
|
|
61
|
+
type: CalendarType.DATE,
|
|
55
62
|
selectHours: (_f = (_e = _this.props.value) === null || _e === void 0 ? void 0 : _e.getHours()) !== null && _f !== void 0 ? _f : 0,
|
|
56
63
|
selectMinutes: (_h = (_g = _this.props.value) === null || _g === void 0 ? void 0 : _g.getMinutes()) !== null && _h !== void 0 ? _h : 0,
|
|
57
64
|
selectSeconds: (_k = (_j = _this.props.value) === null || _j === void 0 ? void 0 : _j.getSeconds()) !== null && _k !== void 0 ? _k : 0,
|
|
@@ -188,13 +195,13 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
188
195
|
selected = true;
|
|
189
196
|
}
|
|
190
197
|
return react_1.default.createElement("button", __assign({ type: "button", key: timeValue.toString(), className: "month-picker-circle body-3 row ".concat(selected ? 'selected' : ''), style: style }, additionProps, { onClick: function () {
|
|
191
|
-
if (_this.props.type ===
|
|
198
|
+
if (_this.props.type === CalendarType.MONTH) {
|
|
192
199
|
_this.setState(__assign(__assign({}, _this.state), { value: timeValue }));
|
|
193
200
|
if (_this.props.onSelect)
|
|
194
201
|
_this.props.onSelect(timeValue);
|
|
195
202
|
}
|
|
196
203
|
else {
|
|
197
|
-
_this.setState(__assign(__assign({}, _this.state), { selectMonth: i, type:
|
|
204
|
+
_this.setState(__assign(__assign({}, _this.state), { selectMonth: i, type: CalendarType.DATE }));
|
|
198
205
|
}
|
|
199
206
|
} }), monthTitle);
|
|
200
207
|
}));
|
|
@@ -218,23 +225,23 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
218
225
|
selected = true;
|
|
219
226
|
}
|
|
220
227
|
return react_1.default.createElement("button", __assign({ type: "button", key: yearNumber.toString(), className: "year-picker-circle body-3 row ".concat(selected ? 'selected' : ''), style: style }, additionProps, { onClick: function () {
|
|
221
|
-
if (_this.props.type ===
|
|
228
|
+
if (_this.props.type === CalendarType.YEAR) {
|
|
222
229
|
_this.setState(__assign(__assign({}, _this.state), { value: new Date(yearNumber) }));
|
|
223
230
|
if (_this.props.onSelect)
|
|
224
231
|
_this.props.onSelect(new Date(yearNumber));
|
|
225
232
|
}
|
|
226
233
|
else {
|
|
227
|
-
_this.setState(__assign(__assign({}, _this.state), { type:
|
|
234
|
+
_this.setState(__assign(__assign({}, _this.state), { type: CalendarType.MONTH, selectYear: yearNumber }));
|
|
228
235
|
}
|
|
229
236
|
} }), yearNumber);
|
|
230
237
|
}));
|
|
231
238
|
};
|
|
232
239
|
Calendar.prototype.getTitle = function () {
|
|
233
240
|
switch (this.state.type) {
|
|
234
|
-
case
|
|
241
|
+
case CalendarType.YEAR:
|
|
235
242
|
var firstYearInTable = this.state.selectYear - ((this.state.selectYear - exports.startDate.getFullYear()) % 12);
|
|
236
243
|
return "".concat(firstYearInTable, "-").concat(firstYearInTable + 11);
|
|
237
|
-
case
|
|
244
|
+
case CalendarType.MONTH:
|
|
238
245
|
return this.state.selectYear;
|
|
239
246
|
default:
|
|
240
247
|
switch (this.state.selectMonth) {
|
|
@@ -295,7 +302,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
295
302
|
react_1.default.createElement("div", { className: 'picker-date-header row' },
|
|
296
303
|
react_1.default.createElement("button", { type: 'button', onClick: function () {
|
|
297
304
|
switch (_this.state.type) {
|
|
298
|
-
case
|
|
305
|
+
case CalendarType.YEAR:
|
|
299
306
|
if (_this.state.selectYear - 20 < exports.startDate.getFullYear()) {
|
|
300
307
|
_this.setState(__assign(__assign({}, _this.state), { selectYear: exports.startDate.getFullYear() }));
|
|
301
308
|
}
|
|
@@ -303,7 +310,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
303
310
|
_this.setState(__assign(__assign({}, _this.state), { selectYear: _this.state.selectYear - 20 }));
|
|
304
311
|
}
|
|
305
312
|
break;
|
|
306
|
-
case
|
|
313
|
+
case CalendarType.MONTH:
|
|
307
314
|
if (_this.state.selectYear - 10 < exports.startDate.getFullYear()) {
|
|
308
315
|
_this.setState(__assign(__assign({}, _this.state), { selectYear: exports.startDate.getFullYear() }));
|
|
309
316
|
}
|
|
@@ -319,7 +326,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
319
326
|
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faAngleDoubleLeft })),
|
|
320
327
|
react_1.default.createElement("button", { type: 'button', onClick: function () {
|
|
321
328
|
switch (_this.state.type) {
|
|
322
|
-
case
|
|
329
|
+
case CalendarType.YEAR:
|
|
323
330
|
if (_this.state.selectYear - 10 < exports.startDate.getFullYear()) {
|
|
324
331
|
_this.setState(__assign(__assign({}, _this.state), { selectYear: exports.startDate.getFullYear() }));
|
|
325
332
|
}
|
|
@@ -327,7 +334,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
327
334
|
_this.setState(__assign(__assign({}, _this.state), { selectYear: _this.state.selectYear - 10 }));
|
|
328
335
|
}
|
|
329
336
|
break;
|
|
330
|
-
case
|
|
337
|
+
case CalendarType.MONTH:
|
|
331
338
|
if (_this.state.selectYear - 1 >= exports.startDate.getFullYear()) {
|
|
332
339
|
_this.setState(__assign(__assign({}, _this.state), { selectYear: _this.state.selectYear - 1 }));
|
|
333
340
|
}
|
|
@@ -340,12 +347,12 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
340
347
|
} },
|
|
341
348
|
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faAngleLeft })),
|
|
342
349
|
react_1.default.createElement("span", { className: "heading-7", onClick: function () {
|
|
343
|
-
if (_this.state.type !==
|
|
344
|
-
_this.setState(__assign(__assign({}, _this.state), { type: _this.state.type ===
|
|
350
|
+
if (_this.state.type !== CalendarType.YEAR)
|
|
351
|
+
_this.setState(__assign(__assign({}, _this.state), { type: _this.state.type === CalendarType.DATE ? CalendarType.MONTH : CalendarType.YEAR }));
|
|
345
352
|
} }, this.getTitle()),
|
|
346
353
|
react_1.default.createElement("button", { type: 'button', onClick: function () {
|
|
347
354
|
switch (_this.state.type) {
|
|
348
|
-
case
|
|
355
|
+
case CalendarType.YEAR:
|
|
349
356
|
if (_this.state.selectYear + 10 > exports.endDate.getFullYear()) {
|
|
350
357
|
_this.setState(__assign(__assign({}, _this.state), { selectYear: exports.endDate.getFullYear() }));
|
|
351
358
|
}
|
|
@@ -353,7 +360,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
353
360
|
_this.setState(__assign(__assign({}, _this.state), { selectYear: _this.state.selectYear + 10 }));
|
|
354
361
|
}
|
|
355
362
|
break;
|
|
356
|
-
case
|
|
363
|
+
case CalendarType.MONTH:
|
|
357
364
|
if (_this.state.selectYear + 1 <= exports.endDate.getFullYear()) {
|
|
358
365
|
_this.setState(__assign(__assign({}, _this.state), { selectYear: _this.state.selectYear + 1 }));
|
|
359
366
|
}
|
|
@@ -367,7 +374,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
367
374
|
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faAngleRight })),
|
|
368
375
|
react_1.default.createElement("button", { type: 'button', onClick: function () {
|
|
369
376
|
switch (_this.state.type) {
|
|
370
|
-
case
|
|
377
|
+
case CalendarType.YEAR:
|
|
371
378
|
if (_this.state.selectYear + 20 > exports.endDate.getFullYear()) {
|
|
372
379
|
_this.setState(__assign(__assign({}, _this.state), { selectYear: exports.endDate.getFullYear() }));
|
|
373
380
|
}
|
|
@@ -375,7 +382,7 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
375
382
|
_this.setState(__assign(__assign({}, _this.state), { selectYear: _this.state.selectYear + 20 }));
|
|
376
383
|
}
|
|
377
384
|
break;
|
|
378
|
-
case
|
|
385
|
+
case CalendarType.MONTH:
|
|
379
386
|
if (_this.state.selectYear + 10 < exports.endDate.getFullYear()) {
|
|
380
387
|
_this.setState(__assign(__assign({}, _this.state), { selectYear: exports.endDate.getFullYear() }));
|
|
381
388
|
}
|
|
@@ -389,8 +396,8 @@ var Calendar = /** @class */ (function (_super) {
|
|
|
389
396
|
}
|
|
390
397
|
} },
|
|
391
398
|
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faAngleDoubleRight }))),
|
|
392
|
-
react_1.default.createElement("div", { className: 'picker-date-body row' }, this.state.type ===
|
|
393
|
-
this.props.type ===
|
|
399
|
+
react_1.default.createElement("div", { className: 'picker-date-body row' }, this.state.type === CalendarType.YEAR ? this.showYearInRange() : this.state.type === CalendarType.MONTH ? this.showMonthInYear() : this.showDateInMonth())),
|
|
400
|
+
this.props.type === CalendarType.DATETIME ? react_1.default.createElement("div", { className: "picker-time-container col" },
|
|
394
401
|
react_1.default.createElement("div", { className: "heading-7" },
|
|
395
402
|
this.state.selectHours < 10 ? "0".concat(this.state.selectHours) : this.state.selectHours,
|
|
396
403
|
":",
|
|
@@ -3,15 +3,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.getStatusIcon = void 0;
|
|
6
|
+
exports.getStatusIcon = exports.ComponentStatus = void 0;
|
|
7
7
|
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var ComponentStatus;
|
|
9
|
+
(function (ComponentStatus) {
|
|
10
|
+
ComponentStatus[ComponentStatus["INFOR"] = 1] = "INFOR";
|
|
11
|
+
ComponentStatus[ComponentStatus["ERROR"] = 2] = "ERROR";
|
|
12
|
+
ComponentStatus[ComponentStatus["WARNING"] = 3] = "WARNING";
|
|
13
|
+
ComponentStatus[ComponentStatus["SUCCSESS"] = 4] = "SUCCSESS";
|
|
14
|
+
})(ComponentStatus = exports.ComponentStatus || (exports.ComponentStatus = {}));
|
|
8
15
|
var getStatusIcon = function (status) {
|
|
9
16
|
switch (status) {
|
|
10
|
-
case
|
|
17
|
+
case ComponentStatus.ERROR:
|
|
11
18
|
return errorSvg;
|
|
12
|
-
case
|
|
19
|
+
case ComponentStatus.WARNING:
|
|
13
20
|
return warningSvg;
|
|
14
|
-
case
|
|
21
|
+
case ComponentStatus.SUCCSESS:
|
|
15
22
|
return successSvg;
|
|
16
23
|
default:
|
|
17
24
|
return inforSvg;
|
|
@@ -139,12 +139,12 @@ var DatePicker = /** @class */ (function (_super) {
|
|
|
139
139
|
var params = (_b = value !== null && value !== void 0 ? value : (_a = _this.state) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
|
|
140
140
|
if ((_c = params.trim()) === null || _c === void 0 ? void 0 : _c.length) {
|
|
141
141
|
switch (_this.props.pickerType) {
|
|
142
|
-
case
|
|
142
|
+
case index_1.CalendarType.YEAR:
|
|
143
143
|
return new Date(parseInt(params), 1, 1);
|
|
144
|
-
case
|
|
144
|
+
case index_1.CalendarType.MONTH:
|
|
145
145
|
var splitParams = params.includes('/') ? params.split('/') : params.split('-');
|
|
146
146
|
return new Date(parseInt((_d = splitParams[1]) !== null && _d !== void 0 ? _d : "".concat(calendar_1.today.getFullYear())), parseInt((_e = splitParams[0]) !== null && _e !== void 0 ? _e : "".concat(calendar_1.today.getMonth())), 1);
|
|
147
|
-
case
|
|
147
|
+
case index_1.CalendarType.DATETIME:
|
|
148
148
|
return stringToDate(params, (_f = _this.props.formatDate) !== null && _f !== void 0 ? _f : 'dd/mm/yyyy hh:mm');
|
|
149
149
|
default:
|
|
150
150
|
return stringToDate(params);
|
|
@@ -202,13 +202,13 @@ var DatePicker = /** @class */ (function (_super) {
|
|
|
202
202
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
203
203
|
var maxLength = 10;
|
|
204
204
|
switch (this.props.pickerType) {
|
|
205
|
-
case
|
|
205
|
+
case index_1.CalendarType.YEAR:
|
|
206
206
|
maxLength = 4;
|
|
207
207
|
break;
|
|
208
|
-
case
|
|
208
|
+
case index_1.CalendarType.MONTH:
|
|
209
209
|
maxLength = 7;
|
|
210
210
|
break;
|
|
211
|
-
case
|
|
211
|
+
case index_1.CalendarType.DATETIME:
|
|
212
212
|
maxLength = 19;
|
|
213
213
|
break;
|
|
214
214
|
default:
|
|
@@ -220,7 +220,7 @@ var DatePicker = /** @class */ (function (_super) {
|
|
|
220
220
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
221
221
|
var inputValue = ev.target.value.trim();
|
|
222
222
|
switch (_this.props.pickerType) {
|
|
223
|
-
case
|
|
223
|
+
case index_1.CalendarType.YEAR:
|
|
224
224
|
var minYear = ((_a = _this.props.min) !== null && _a !== void 0 ? _a : calendar_1.startDate).getFullYear();
|
|
225
225
|
var maxYear = ((_b = _this.props.min) !== null && _b !== void 0 ? _b : calendar_1.endDate).getFullYear();
|
|
226
226
|
if (!isNaN(parseInt(inputValue)) && parseInt(inputValue) <= maxYear && parseInt(inputValue) >= minYear) {
|
|
@@ -234,7 +234,7 @@ var DatePicker = /** @class */ (function (_super) {
|
|
|
234
234
|
_this.props.onChange(undefined);
|
|
235
235
|
}
|
|
236
236
|
break;
|
|
237
|
-
case
|
|
237
|
+
case index_1.CalendarType.MONTH:
|
|
238
238
|
if (inputValue.match(/[0-9]{1,2}(\/|-)[0-9]{4}/g)) {
|
|
239
239
|
var dateValue_1 = stringToDate("1/".concat(inputValue), 'dd/MM/yyyy', '/');
|
|
240
240
|
if ((0, calendar_1.inRangeTime)(dateValue_1, (_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)) {
|
|
@@ -254,7 +254,7 @@ var DatePicker = /** @class */ (function (_super) {
|
|
|
254
254
|
_this.props.onChange(undefined);
|
|
255
255
|
}
|
|
256
256
|
break;
|
|
257
|
-
case
|
|
257
|
+
case index_1.CalendarType.DATETIME:
|
|
258
258
|
var dateTimeValue = undefined;
|
|
259
259
|
if (inputValue.match(/[0-9]{1,2}(\/|-)[0-9]{1,2}(\/|-)[0-9]{4}/g)) {
|
|
260
260
|
dateTimeValue = stringToDate(inputValue, (_g = _this.props.formatDate) !== null && _g !== void 0 ? _g : 'dd/mm/yyyy hh:mm', '/');
|
|
@@ -310,21 +310,21 @@ var DatePicker = /** @class */ (function (_super) {
|
|
|
310
310
|
if (ev.target.classList.contains('popup-overlay'))
|
|
311
311
|
_this.setState(__assign(__assign({}, _this.state), { isOpen: false }));
|
|
312
312
|
} },
|
|
313
|
-
react_1.default.createElement(index_1.Calendar, { value: this.getNewValue(), type: (_f = this.props.pickerType) !== null && _f !== void 0 ? _f :
|
|
313
|
+
react_1.default.createElement(index_1.Calendar, { value: this.getNewValue(), type: (_f = this.props.pickerType) !== null && _f !== void 0 ? _f : index_1.CalendarType.DATE, className: 'date-picker-popup-container', style: (_g = this.state.style) !== null && _g !== void 0 ? _g : { 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: function (dateValue) {
|
|
314
314
|
var _a;
|
|
315
315
|
switch (_this.props.pickerType) {
|
|
316
|
-
case
|
|
316
|
+
case index_1.CalendarType.YEAR:
|
|
317
317
|
_this.setState(__assign(__assign({}, _this.state), { value: dateValue.getFullYear().toString(), isOpen: false }));
|
|
318
318
|
if (_this.props.onChange)
|
|
319
319
|
_this.props.onChange(dateValue.getFullYear().toString());
|
|
320
320
|
break;
|
|
321
|
-
case
|
|
321
|
+
case index_1.CalendarType.MONTH:
|
|
322
322
|
var newValue = dateToString(dateValue);
|
|
323
323
|
_this.setState(__assign(__assign({}, _this.state), { value: newValue.split('/').slice(1).join('/'), isOpen: false }));
|
|
324
324
|
if (_this.props.onChange)
|
|
325
325
|
_this.props.onChange(newValue.split('/').slice(1).join('/'));
|
|
326
326
|
break;
|
|
327
|
-
case
|
|
327
|
+
case index_1.CalendarType.DATETIME:
|
|
328
328
|
var newValue = dateToString(dateValue, (_a = _this.props.formatDate) !== null && _a !== void 0 ? _a : 'dd/mm/yyyy hh:mm');
|
|
329
329
|
_this.setState(__assign(__assign({}, _this.state), { value: newValue }));
|
|
330
330
|
break;
|
|
@@ -335,16 +335,16 @@ var DatePicker = /** @class */ (function (_super) {
|
|
|
335
335
|
_this.props.onChange(newValue);
|
|
336
336
|
break;
|
|
337
337
|
}
|
|
338
|
-
}, footer: (this.props.pickerType ===
|
|
339
|
-
this.props.pickerType === undefined || this.props.pickerType ===
|
|
338
|
+
}, footer: (this.props.pickerType === index_1.CalendarType.DATETIME || !this.props.hideButtonToday) && react_1.default.createElement("div", { className: 'row picker-popup-footer' },
|
|
339
|
+
this.props.pickerType === undefined || this.props.pickerType === index_1.CalendarType.DATE || this.props.pickerType === index_1.CalendarType.DATETIME ?
|
|
340
340
|
react_1.default.createElement("button", { type: 'button', className: 'row button-text-3', style: { color: 'var(--infor-color)', width: 'fit-content' }, onClick: function () {
|
|
341
341
|
var _a;
|
|
342
|
-
var format = (_a = _this.props.formatDate) !== null && _a !== void 0 ? _a : (_this.props.pickerType ===
|
|
342
|
+
var 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');
|
|
343
343
|
_this.setState(__assign(__assign({}, _this.state), { isOpen: false, value: dateToString(calendar_1.today, format) }));
|
|
344
344
|
if (_this.props.onChange)
|
|
345
345
|
_this.props.onChange(dateToString(calendar_1.today, format));
|
|
346
346
|
} }, "Today") : null,
|
|
347
|
-
this.props.pickerType ===
|
|
347
|
+
this.props.pickerType === index_1.CalendarType.DATETIME ? react_1.default.createElement(react_1.default.Fragment, null,
|
|
348
348
|
react_1.default.createElement("div", { style: { flex: 1 } }),
|
|
349
349
|
react_1.default.createElement("button", { type: 'button', className: 'row button-primary', style: { padding: '0.6rem 0.8rem' }, onClick: function () {
|
|
350
350
|
_this.setState(__assign(__assign({}, _this.state), { isOpen: false }));
|
|
@@ -44,7 +44,7 @@ var showDialog = function (_a) {
|
|
|
44
44
|
var ref = _a.ref, title = _a.title, status = _a.status, content = _a.content, onSubmit = _a.onSubmit, submitTitle = _a.submitTitle, alignment = _a.alignment;
|
|
45
45
|
ref.current.showDialogNoti({
|
|
46
46
|
title: title !== null && title !== void 0 ? title : '',
|
|
47
|
-
status: status !== null && status !== void 0 ? status :
|
|
47
|
+
status: status !== null && status !== void 0 ? status : index_1.ComponentStatus.INFOR,
|
|
48
48
|
content: content !== null && content !== void 0 ? content : '',
|
|
49
49
|
onSubmit: onSubmit !== null && onSubmit !== void 0 ? onSubmit : (function () { }),
|
|
50
50
|
submitTitle: submitTitle,
|
|
@@ -59,7 +59,7 @@ var Dialog = /** @class */ (function (_super) {
|
|
|
59
59
|
_this.state = {
|
|
60
60
|
open: false,
|
|
61
61
|
title: '',
|
|
62
|
-
status:
|
|
62
|
+
status: index_1.ComponentStatus.INFOR,
|
|
63
63
|
content: '',
|
|
64
64
|
onSubmit: function () { }
|
|
65
65
|
};
|
|
@@ -22,7 +22,7 @@ var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
|
|
|
22
22
|
var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
23
23
|
var index_1 = require("../../index");
|
|
24
24
|
function ProgressBar(_a) {
|
|
25
|
-
var _b = _a.status, status = _b === void 0 ?
|
|
25
|
+
var _b = _a.status, status = _b === void 0 ? index_1.ComponentStatus.INFOR : _b, _c = _a.percent, percent = _c === void 0 ? 100 : _c, titleText = _a.titleText, title = _a.title, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, _e = _a.progressBarOnly, progressBarOnly = _e === void 0 ? false : _e, _f = _a.fullColor, fullColor = _f === void 0 ? 'var(--background)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--infor-color)' : _g, style = _a.style, progressBarStyle = _a.progressBarStyle;
|
|
26
26
|
var _h = (0, react_1.useState)(true), openDetails = _h[0], setOpenDetails = _h[1];
|
|
27
27
|
return react_2.default.createElement("div", { className: "progress-bar-container col", style: style ? __assign({ padding: progressBarOnly ? '0' : '1.6rem 2.4rem' }, style) : { padding: progressBarOnly ? '0' : '1.6rem 2.4rem' } },
|
|
28
28
|
(hideTitle || progressBarOnly) ? null : (title !== null && title !== void 0 ? title : react_2.default.createElement("div", { className: "progress-bar-title row" },
|
|
@@ -31,7 +31,7 @@ function ProgressBar(_a) {
|
|
|
31
31
|
react_2.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: openDetails ? free_solid_svg_icons_1.faChevronDown : free_solid_svg_icons_1.faChevronUp })))),
|
|
32
32
|
openDetails ? react_2.default.createElement("div", { className: 'progress-bar-tile row' },
|
|
33
33
|
react_2.default.createElement("div", { className: "progress-bar-value", style: __assign({ '--percent-color': percentColor, '--full-color': fullColor, '--percent': "".concat(percent, "%") }, (progressBarStyle !== null && progressBarStyle !== void 0 ? progressBarStyle : {})) }),
|
|
34
|
-
progressBarOnly || status ===
|
|
34
|
+
progressBarOnly || status === index_1.ComponentStatus.INFOR ? null : react_2.default.createElement("div", { className: 'status-icon' }, (0, index_1.getStatusIcon)(status)),
|
|
35
35
|
progressBarOnly ? null : react_2.default.createElement("div", { className: 'text-value' },
|
|
36
36
|
percent,
|
|
37
37
|
"/100")) : null);
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ToastContainer = exports.CustomSlider = exports.ProgressCircle = exports.Rating = exports.InfiniteScroll = exports.ToastMessage = exports.ImportFile = exports.TextArea = exports.RadioButton = exports.TextField = exports.CellAlignItems = exports.TbRow = exports.TbBody = exports.TbHeader = exports.TbCell = exports.Table = exports.Pagination = exports.Text = exports.ProgressBar = exports.SelectMultiple = exports.DatePicker = exports.DialogAlignment = exports.showDialog = exports.Dialog = exports.closePopup = exports.showPopup = exports.Popup = exports.Switch = exports.Select1 = exports.Checkbox = exports.getStatusIcon = exports.Calendar = void 0;
|
|
3
|
+
exports.ToastContainer = exports.CustomSlider = exports.ProgressCircle = exports.Rating = exports.InfiniteScroll = exports.ToastMessage = exports.ImportFile = exports.TextArea = exports.RadioButton = exports.TextField = exports.CellAlignItems = exports.TbRow = exports.TbBody = exports.TbHeader = exports.TbCell = exports.Table = exports.Pagination = exports.Text = exports.ProgressBar = exports.SelectMultiple = exports.DatePicker = exports.DialogAlignment = exports.showDialog = exports.Dialog = exports.closePopup = exports.showPopup = exports.Popup = exports.Switch = exports.Select1 = exports.Checkbox = exports.getStatusIcon = exports.ComponentStatus = exports.CalendarType = exports.Calendar = void 0;
|
|
4
4
|
require("./skin/color.css");
|
|
5
5
|
require("./skin/layout.css");
|
|
6
6
|
require("./skin/typography.css");
|
|
@@ -25,6 +25,7 @@ Object.defineProperty(exports, "SelectMultiple", { enumerable: true, get: functi
|
|
|
25
25
|
var progress_bar_1 = require("./component/progress-bar/progress-bar");
|
|
26
26
|
Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return progress_bar_1.ProgressBar; } });
|
|
27
27
|
var component_status_1 = require("./component/component-status");
|
|
28
|
+
Object.defineProperty(exports, "ComponentStatus", { enumerable: true, get: function () { return component_status_1.ComponentStatus; } });
|
|
28
29
|
Object.defineProperty(exports, "getStatusIcon", { enumerable: true, get: function () { return component_status_1.getStatusIcon; } });
|
|
29
30
|
var text_1 = require("./component/text/text");
|
|
30
31
|
Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return text_1.Text; } });
|
|
@@ -49,6 +50,7 @@ var toast_noti_1 = require("./component/toast-noti/toast-noti");
|
|
|
49
50
|
Object.defineProperty(exports, "ToastMessage", { enumerable: true, get: function () { return toast_noti_1.ToastMessage; } });
|
|
50
51
|
var calendar_1 = require("./component/calendar/calendar");
|
|
51
52
|
Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return calendar_1.Calendar; } });
|
|
53
|
+
Object.defineProperty(exports, "CalendarType", { enumerable: true, get: function () { return calendar_1.CalendarType; } });
|
|
52
54
|
var infinite_scroll_1 = require("./component/infinite-scroll/infinite-scroll");
|
|
53
55
|
Object.defineProperty(exports, "InfiniteScroll", { enumerable: true, get: function () { return infinite_scroll_1.InfiniteScroll; } });
|
|
54
56
|
var rating_1 = require("./component/rating/rating");
|