awing-library 2.1.90-beta → 2.1.91-beta
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/lib/ACM-AXN/CampaignSchedule/Components/ControlPanel/Filter.js +1 -1
- package/lib/ACM-AXN/Statistics/ControlPanel.js +4 -4
- package/lib/AWING/DateRangePicker/component.js +101 -132
- package/lib/AWING/DateRangePicker/configDate.d.ts +8 -0
- package/lib/AWING/DateRangePicker/configDate.js +71 -0
- package/lib/AWING/DateRangePicker/interface.d.ts +1 -0
- package/lib/translate/en/translation.json +5 -1
- package/lib/translate/vi/translation.json +5 -1
- package/package.json +1 -1
|
@@ -86,7 +86,7 @@ var Filters = function (_a) {
|
|
|
86
86
|
handleFilters('startDate', value.startDate);
|
|
87
87
|
handleFilters('endDate', value.endDate);
|
|
88
88
|
};
|
|
89
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: disabledCampaignFilter ? 6 : 4, className: classes.dateRangePicker, children: (0, jsx_runtime_1.jsx)(AWING_1.DateRangePicker, { isShowCalendarInfo:
|
|
89
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: disabledCampaignFilter ? 6 : 4, className: classes.dateRangePicker, children: (0, jsx_runtime_1.jsx)(AWING_1.DateRangePicker, { isShowCalendarInfo: true, isFutureDate: true, label: "".concat(t('Common.StartDate'), " - ").concat(t('Common.EndDate')), callback: handleChangeDateRange, initialStartDate: (0, moment_1.default)(), initialEndDate: (0, moment_1.default)(), variant: "outlined", textFieldProps: {
|
|
90
90
|
fullWidth: true,
|
|
91
91
|
className: classes.outlinedInput,
|
|
92
92
|
}, isDayBlocked: function (day) {
|
|
@@ -93,7 +93,7 @@ function ControlPanel(_a) {
|
|
|
93
93
|
var handleElementInput = function (initialFilters) {
|
|
94
94
|
var updatedElementInputs = [];
|
|
95
95
|
initialFilters.map(function (item, idx) {
|
|
96
|
-
var _a, _b, _c, _d, _e;
|
|
96
|
+
var _a, _b, _c, _d, _e, _f;
|
|
97
97
|
switch (item === null || item === void 0 ? void 0 : item.type) {
|
|
98
98
|
case Enums_1.TYPE_FILTERS.VIEW_BY: {
|
|
99
99
|
var element = __assign({ component: ((0, jsx_runtime_1.jsx)(material_1.TextField, { select: true, fullWidth: true, label: t('Common.ViewBy'), size: "small", onChange: function (e) {
|
|
@@ -124,7 +124,7 @@ function ControlPanel(_a) {
|
|
|
124
124
|
break;
|
|
125
125
|
}
|
|
126
126
|
case Enums_1.TYPE_FILTERS.DATE_RANGE_PICKER: {
|
|
127
|
-
var element = __assign({ component: ((0, jsx_runtime_1.jsx)(AWING_1.DateRangePicker, __assign({ isShowCalendarInfo: (_a = item === null || item === void 0 ? void 0 : item.isShowCalendarInfo) !== null && _a !== void 0 ? _a : true, label: "".concat(t('Common.StartDate'), " - ").concat(t('Common.EndDate')), initialStartDate: (
|
|
127
|
+
var element = __assign({ component: ((0, jsx_runtime_1.jsx)(AWING_1.DateRangePicker, __assign({ isShowCalendarInfo: (_a = item === null || item === void 0 ? void 0 : item.isShowCalendarInfo) !== null && _a !== void 0 ? _a : true, isFutureDate: (_b = item === null || item === void 0 ? void 0 : item.isFutureDate) !== null && _b !== void 0 ? _b : false, label: "".concat(t('Common.StartDate'), " - ").concat(t('Common.EndDate')), initialStartDate: (_c = item === null || item === void 0 ? void 0 : item.defaultValue) === null || _c === void 0 ? void 0 : _c.startDate, initialEndDate: (_d = item === null || item === void 0 ? void 0 : item.defaultValue) === null || _d === void 0 ? void 0 : _d.endDate, variant: "outlined", textFieldProps: {
|
|
128
128
|
fullWidth: true,
|
|
129
129
|
className: classes.outlinedInput,
|
|
130
130
|
}, callback: handleChangeDateRange }, ((item === null || item === void 0 ? void 0 : item.isDayBlocked) && {
|
|
@@ -167,7 +167,7 @@ function ControlPanel(_a) {
|
|
|
167
167
|
break;
|
|
168
168
|
}
|
|
169
169
|
case Enums_1.TYPE_FILTERS.NETWORK: {
|
|
170
|
-
var element = __assign({ component: ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", defaultChecked: (
|
|
170
|
+
var element = __assign({ component: ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", defaultChecked: (_e = queryInput === null || queryInput === void 0 ? void 0 : queryInput.isCampaignNetwork) !== null && _e !== void 0 ? _e : true }), label: t('Statistic.Network.Title'), labelPlacement: "start", onChange: function (e) {
|
|
171
171
|
handleChangeQueryInput(item === null || item === void 0 ? void 0 : item.name, e.target.checked);
|
|
172
172
|
} }, idx)), isEnhanced: (item === null || item === void 0 ? void 0 : item.isEnhanced) ? item === null || item === void 0 ? void 0 : item.isEnhanced : false, name: 'isCampaignNetwork' }, item);
|
|
173
173
|
updatedElementInputs.push(element);
|
|
@@ -181,7 +181,7 @@ function ControlPanel(_a) {
|
|
|
181
181
|
break;
|
|
182
182
|
}
|
|
183
183
|
case Enums_1.TYPE_FILTERS.INCLUDE_RESERVED: {
|
|
184
|
-
var element = __assign({ component: ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", defaultChecked: (
|
|
184
|
+
var element = __assign({ component: ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", defaultChecked: (_f = queryInput === null || queryInput === void 0 ? void 0 : queryInput.includeReserved) !== null && _f !== void 0 ? _f : true }), label: t('StatisticSchedulePlan.IncludeCampaignReserved'), labelPlacement: "start", onChange: function (e) {
|
|
185
185
|
handleChangeQueryInput(item === null || item === void 0 ? void 0 : item.name, e.target.checked);
|
|
186
186
|
} }, idx)), isEnhanced: (item === null || item === void 0 ? void 0 : item.isEnhanced) ? item === null || item === void 0 ? void 0 : item.isEnhanced : false, name: 'includeReserved' }, item);
|
|
187
187
|
updatedElementInputs.push(element);
|
|
@@ -49,62 +49,63 @@ var material_1 = require("@mui/material");
|
|
|
49
49
|
var icons_material_1 = require("@mui/icons-material");
|
|
50
50
|
var react_input_mask_1 = __importDefault(require("react-input-mask"));
|
|
51
51
|
var styles_1 = require("@mui/styles");
|
|
52
|
-
var
|
|
53
|
-
require(
|
|
54
|
-
|
|
52
|
+
var configDate_1 = __importDefault(require("./configDate"));
|
|
53
|
+
var moment = require('moment');
|
|
54
|
+
require('moment/locale/vi');
|
|
55
|
+
var omit = require('lodash/omit');
|
|
55
56
|
var useStyles = (0, styles_1.makeStyles)({
|
|
56
57
|
CustomDateRangePicker_panel: {
|
|
57
58
|
// width: 250px;
|
|
58
|
-
display:
|
|
59
|
-
boxSizing:
|
|
60
|
-
flexDirection:
|
|
61
|
-
padding:
|
|
62
|
-
marginTop:
|
|
59
|
+
display: 'flex',
|
|
60
|
+
boxSizing: 'border-box',
|
|
61
|
+
flexDirection: 'column',
|
|
62
|
+
padding: '0 8px 11px 22px',
|
|
63
|
+
marginTop: '18px',
|
|
63
64
|
},
|
|
64
65
|
CustomDateRangePicker_button: {
|
|
65
|
-
border:
|
|
66
|
-
cursor:
|
|
67
|
-
userSelect:
|
|
68
|
-
backgroundColor:
|
|
69
|
-
color:
|
|
70
|
-
borderWidth:
|
|
71
|
-
borderStyle:
|
|
72
|
-
borderColor:
|
|
73
|
-
borderImage:
|
|
74
|
-
borderRadius:
|
|
75
|
-
padding:
|
|
76
|
-
marginBottom:
|
|
77
|
-
|
|
78
|
-
outline:
|
|
79
|
-
borderColor:
|
|
66
|
+
border: '1px solid',
|
|
67
|
+
cursor: 'pointer',
|
|
68
|
+
userSelect: 'none',
|
|
69
|
+
backgroundColor: 'rgb(255, 255, 255)',
|
|
70
|
+
color: 'rgb(117, 117, 117)',
|
|
71
|
+
borderWidth: '1px',
|
|
72
|
+
borderStyle: 'solid',
|
|
73
|
+
borderColor: 'rgb(228, 231, 231)',
|
|
74
|
+
borderImage: 'initial',
|
|
75
|
+
borderRadius: '3px',
|
|
76
|
+
padding: '6px',
|
|
77
|
+
marginBottom: '13px',
|
|
78
|
+
'&:active': {
|
|
79
|
+
outline: 'none',
|
|
80
|
+
borderColor: '#ed1d25',
|
|
80
81
|
},
|
|
81
|
-
|
|
82
|
-
outline:
|
|
82
|
+
'&:focus': {
|
|
83
|
+
outline: '0',
|
|
83
84
|
},
|
|
84
85
|
},
|
|
85
86
|
CustomDateRangePicker_button__selected: {
|
|
86
|
-
color:
|
|
87
|
-
background:
|
|
87
|
+
color: 'rgb(255, 255, 255)',
|
|
88
|
+
background: '#ed1d25',
|
|
88
89
|
},
|
|
89
90
|
CustomPickerSelected: {
|
|
90
|
-
|
|
91
|
-
background:
|
|
92
|
-
border:
|
|
93
|
-
color:
|
|
91
|
+
'& .CalendarDay__selected_span': {
|
|
92
|
+
background: 'rgb(240, 74, 80) !important',
|
|
93
|
+
border: '1px double rgb(240, 74, 80) !important',
|
|
94
|
+
color: 'rgb(255, 255, 255) !important',
|
|
94
95
|
},
|
|
95
|
-
|
|
96
|
-
background:
|
|
97
|
-
border:
|
|
98
|
-
color:
|
|
96
|
+
'& .CalendarDay__selected': {
|
|
97
|
+
background: 'rgb(237, 29, 37) !important',
|
|
98
|
+
border: '1px double rgb(237, 29, 37) !important',
|
|
99
|
+
color: 'rgb(255, 255, 255)!important',
|
|
99
100
|
},
|
|
100
|
-
|
|
101
|
-
background:
|
|
102
|
-
color:
|
|
101
|
+
'& .CalendarDay__selected:hover': {
|
|
102
|
+
background: 'rgb(237, 29, 37) !important',
|
|
103
|
+
color: '#ffffff',
|
|
103
104
|
},
|
|
104
|
-
|
|
105
|
-
background:
|
|
106
|
-
border:
|
|
107
|
-
color:
|
|
105
|
+
'& .CalendarDay__hovered_span:hover,.CalendarDay__hovered_span': {
|
|
106
|
+
background: 'rgb(240, 74, 80) !important',
|
|
107
|
+
border: '1px double rgb(240, 74, 80) !important',
|
|
108
|
+
color: '#ffffff',
|
|
108
109
|
},
|
|
109
110
|
},
|
|
110
111
|
});
|
|
@@ -135,7 +136,7 @@ var defaultProps = {
|
|
|
135
136
|
isOutsideRange: function (day) { return false; },
|
|
136
137
|
isDayHighlighted: function () { return false; },
|
|
137
138
|
// internationalization
|
|
138
|
-
monthFormat:
|
|
139
|
+
monthFormat: 'MMMM YYYY',
|
|
139
140
|
label: null,
|
|
140
141
|
isShowCalendarInfo: false,
|
|
141
142
|
handleValid: function () { },
|
|
@@ -143,7 +144,7 @@ var defaultProps = {
|
|
|
143
144
|
};
|
|
144
145
|
var DateRangePickerWrapper = function (props) {
|
|
145
146
|
var classes = useStyles();
|
|
146
|
-
var value = props.value, error = props.error, helperText = props.helperText, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, _b = props.autoFocusEndDate, autoFocusEndDate = _b === void 0 ? false : _b, _c = props.initialStartDate, initialStartDate = _c === void 0 ? null : _c, _d = props.initialEndDate, initialEndDate = _d === void 0 ? null : _d, _e = props.callback, callback = _e === void 0 ? function () { } : _e, _f = props.label, label = _f === void 0 ? null : _f, _g = props.isShowCalendarInfo, isShowCalendarInfo = _g === void 0 ? false : _g, variant = props.variant, openDirection = props.openDirection, _h = props.isDayBlocked, isDayBlocked = _h === void 0 ? function (day) { return false; } : _h, _j = props.handleValid, handleValid = _j === void 0 ? function () { } : _j, _k = props.handleDateRangePopover, handleDateRangePopover = _k === void 0 ? function () { } : _k, disableHelperText = props.disableHelperText;
|
|
147
|
+
var value = props.value, error = props.error, helperText = props.helperText, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, _b = props.autoFocusEndDate, autoFocusEndDate = _b === void 0 ? false : _b, _c = props.initialStartDate, initialStartDate = _c === void 0 ? null : _c, _d = props.initialEndDate, initialEndDate = _d === void 0 ? null : _d, _e = props.callback, callback = _e === void 0 ? function () { } : _e, _f = props.label, label = _f === void 0 ? null : _f, _g = props.isShowCalendarInfo, isShowCalendarInfo = _g === void 0 ? false : _g, variant = props.variant, openDirection = props.openDirection, _h = props.isDayBlocked, isDayBlocked = _h === void 0 ? function (day) { return false; } : _h, _j = props.handleValid, handleValid = _j === void 0 ? function () { } : _j, _k = props.handleDateRangePopover, handleDateRangePopover = _k === void 0 ? function () { } : _k, disableHelperText = props.disableHelperText, _l = props.isFutureDate, isFutureDate = _l === void 0 ? false : _l;
|
|
147
148
|
var initialFocusedInput = null;
|
|
148
149
|
if (autoFocus) {
|
|
149
150
|
initialFocusedInput = constants_1.START_DATE;
|
|
@@ -151,20 +152,20 @@ var DateRangePickerWrapper = function (props) {
|
|
|
151
152
|
else if (autoFocusEndDate) {
|
|
152
153
|
initialFocusedInput = constants_1.END_DATE;
|
|
153
154
|
}
|
|
154
|
-
var
|
|
155
|
-
var
|
|
156
|
-
var
|
|
157
|
-
var
|
|
158
|
-
var
|
|
159
|
-
var
|
|
160
|
-
var momentLanguage = (0, react_1.useMemo)(function () { var _a, _b; return ((_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.language) === null || _a === void 0 ? void 0 : _a.split(
|
|
155
|
+
var _m = (0, react_1.useState)(initialFocusedInput), focusedInput = _m[0], setFocusedInput = _m[1];
|
|
156
|
+
var _o = (0, react_1.useState)(initialStartDate), startDate = _o[0], setStartDate = _o[1];
|
|
157
|
+
var _p = (0, react_1.useState)(initialEndDate), endDate = _p[0], setEndDate = _p[1];
|
|
158
|
+
var _q = (0, react_1.useState)(true), isValid = _q[0], setIsValid = _q[1];
|
|
159
|
+
var _r = (0, react_1.useState)("".concat(moment(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate).format('DD/MM/YYYY'), " - ").concat(moment(value ? value === null || value === void 0 ? void 0 : value.endDate : endDate).format('DD/MM/YYYY'))), inputValue = _r[0], setInputValue = _r[1];
|
|
160
|
+
var _s = (0, react_i18next_1.useTranslation)(), i18n = _s.i18n, t = _s.t;
|
|
161
|
+
var momentLanguage = (0, react_1.useMemo)(function () { var _a, _b; return ((_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.language) === null || _a === void 0 ? void 0 : _a.split('-')) === null || _b === void 0 ? void 0 : _b[0]) || 'en'; }, [i18n.language]);
|
|
161
162
|
(0, react_1.useEffect)(function () {
|
|
162
163
|
if (value !== undefined) {
|
|
163
|
-
var inputUpdate = "".concat(moment(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate).format(
|
|
164
|
+
var inputUpdate = "".concat(moment(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate).format('DD/MM/YYYY'), " - ").concat(moment(value ? value === null || value === void 0 ? void 0 : value.endDate : endDate).format('DD/MM/YYYY'));
|
|
164
165
|
if (inputUpdate != inputValue) {
|
|
165
166
|
setInputValue(inputUpdate);
|
|
166
|
-
var momentStartDate = moment(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate,
|
|
167
|
-
var momentEndDate = moment(value ? value === null || value === void 0 ? void 0 : value.endDate : endDate,
|
|
167
|
+
var momentStartDate = moment(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate, 'DD/MM/YYYY', true);
|
|
168
|
+
var momentEndDate = moment(value ? value === null || value === void 0 ? void 0 : value.endDate : endDate, 'DD/MM/YYYY', true);
|
|
168
169
|
if (momentStartDate.isValid() &&
|
|
169
170
|
momentEndDate.isValid() &&
|
|
170
171
|
momentEndDate.diff(momentStartDate) >= 0) {
|
|
@@ -176,7 +177,7 @@ var DateRangePickerWrapper = function (props) {
|
|
|
176
177
|
}
|
|
177
178
|
}, [value]);
|
|
178
179
|
(0, react_1.useEffect)(function () {
|
|
179
|
-
if (momentLanguage !==
|
|
180
|
+
if (momentLanguage !== 'en') {
|
|
180
181
|
try {
|
|
181
182
|
Promise.resolve("".concat("moment/locale/".concat(momentLanguage))).then(function (s) { return __importStar(require(s)); }).then(function () {
|
|
182
183
|
moment.locale(momentLanguage);
|
|
@@ -186,7 +187,7 @@ var DateRangePickerWrapper = function (props) {
|
|
|
186
187
|
});
|
|
187
188
|
}
|
|
188
189
|
catch (error) {
|
|
189
|
-
moment.locale(
|
|
190
|
+
moment.locale('en');
|
|
190
191
|
}
|
|
191
192
|
}
|
|
192
193
|
else {
|
|
@@ -216,8 +217,8 @@ var DateRangePickerWrapper = function (props) {
|
|
|
216
217
|
startDate: startDate,
|
|
217
218
|
endDate: endDate,
|
|
218
219
|
});
|
|
219
|
-
var momentStartDate = moment(startDate,
|
|
220
|
-
var momentEndDate = moment(endDate,
|
|
220
|
+
var momentStartDate = moment(startDate, 'DD/MM/YYYY', true);
|
|
221
|
+
var momentEndDate = moment(endDate, 'DD/MM/YYYY', true);
|
|
221
222
|
if (momentStartDate.isValid() &&
|
|
222
223
|
momentEndDate.isValid() &&
|
|
223
224
|
momentEndDate.diff(momentStartDate) >= 0) {
|
|
@@ -225,7 +226,7 @@ var DateRangePickerWrapper = function (props) {
|
|
|
225
226
|
}
|
|
226
227
|
else
|
|
227
228
|
setIsValid(false);
|
|
228
|
-
setInputValue("".concat(moment(startDate).format(
|
|
229
|
+
setInputValue("".concat(moment(startDate).format('DD/MM/YYYY'), " - ").concat(moment(endDate).format('DD/MM/YYYY')));
|
|
229
230
|
};
|
|
230
231
|
var onFocusChange = function (focusedInput) {
|
|
231
232
|
setFocusedInput(!focusedInput ? constants_1.START_DATE : focusedInput);
|
|
@@ -237,18 +238,18 @@ var DateRangePickerWrapper = function (props) {
|
|
|
237
238
|
var handleChangeInput = function (e) {
|
|
238
239
|
var fieldValue = e.target.value;
|
|
239
240
|
setInputValue(fieldValue);
|
|
240
|
-
var fieldValueArr = (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.split(
|
|
241
|
-
var year1900 = moment(
|
|
242
|
-
var momentStartDate = moment(fieldValueArr[0],
|
|
241
|
+
var fieldValueArr = (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.split(' - ')) || [];
|
|
242
|
+
var year1900 = moment('1900-01-01');
|
|
243
|
+
var momentStartDate = moment(fieldValueArr[0], 'DD/MM/YYYY');
|
|
243
244
|
if (momentStartDate.isValid() && momentStartDate.diff(year1900) >= 0) {
|
|
244
245
|
setStartDate(momentStartDate);
|
|
245
246
|
}
|
|
246
|
-
var momentEndDate = moment(fieldValueArr[1],
|
|
247
|
+
var momentEndDate = moment(fieldValueArr[1], 'DD/MM/YYYY');
|
|
247
248
|
if (momentEndDate.isValid() && momentEndDate.diff(year1900) >= 0) {
|
|
248
249
|
setEndDate(momentEndDate);
|
|
249
250
|
}
|
|
250
|
-
if (moment(fieldValueArr[0],
|
|
251
|
-
moment(fieldValueArr[1],
|
|
251
|
+
if (moment(fieldValueArr[0], 'DD/MM/YYYY', true).isValid() &&
|
|
252
|
+
moment(fieldValueArr[1], 'DD/MM/YYYY', true).isValid() &&
|
|
252
253
|
momentEndDate.diff(momentStartDate) >= 0) {
|
|
253
254
|
momentStartDate.set({
|
|
254
255
|
hour: 0,
|
|
@@ -269,46 +270,14 @@ var DateRangePickerWrapper = function (props) {
|
|
|
269
270
|
setIsValid(false);
|
|
270
271
|
};
|
|
271
272
|
var nextProps = __assign({}, props);
|
|
272
|
-
var
|
|
273
|
-
var presets = [
|
|
274
|
-
{
|
|
275
|
-
text: t("DatePicker.ToDay"),
|
|
276
|
-
start: today,
|
|
277
|
-
end: today,
|
|
278
|
-
},
|
|
279
|
-
{
|
|
280
|
-
text: t("DatePicker.Yesterday"),
|
|
281
|
-
start: moment().subtract(1, "days"),
|
|
282
|
-
end: moment().subtract(1, "days"),
|
|
283
|
-
},
|
|
284
|
-
{
|
|
285
|
-
text: t("DatePicker.LastSevenDay"),
|
|
286
|
-
start: moment().subtract(6, "days"),
|
|
287
|
-
end: today,
|
|
288
|
-
},
|
|
289
|
-
{
|
|
290
|
-
text: t("DatePicker.LastThirtyDay"),
|
|
291
|
-
start: moment().subtract(29, "days"),
|
|
292
|
-
end: today,
|
|
293
|
-
},
|
|
294
|
-
{
|
|
295
|
-
text: t("DatePicker.ThisMonth"),
|
|
296
|
-
start: moment().startOf("month"),
|
|
297
|
-
end: moment().endOf("month"),
|
|
298
|
-
},
|
|
299
|
-
{
|
|
300
|
-
text: t("DatePicker.LastMonth"),
|
|
301
|
-
start: moment().subtract(1, "month").startOf("month"),
|
|
302
|
-
end: moment().subtract(1, "month").endOf("month"),
|
|
303
|
-
},
|
|
304
|
-
];
|
|
273
|
+
var presets = (0, configDate_1.default)(t, isFutureDate);
|
|
305
274
|
var renderDatePresets = function () {
|
|
306
275
|
return ((0, jsx_runtime_1.jsx)("div", { className: classes.CustomDateRangePicker_panel, children: presets.map(function (_a) {
|
|
307
276
|
var text = _a.text, start = _a.start, end = _a.end;
|
|
308
277
|
var isSelected = (0, react_dates_1.isSameDay)(start, value ? value === null || value === void 0 ? void 0 : value.startDate : startDate) && (0, react_dates_1.isSameDay)(end, value ? value === null || value === void 0 ? void 0 : value.endDate : endDate);
|
|
309
278
|
return ((0, jsx_runtime_1.jsx)("button", { className: "".concat(classes.CustomDateRangePicker_button, " ").concat(isSelected
|
|
310
279
|
? classes.CustomDateRangePicker_button__selected
|
|
311
|
-
:
|
|
280
|
+
: ''), type: "button", onClick: function () {
|
|
312
281
|
return controlButtonClick({
|
|
313
282
|
startDate: start,
|
|
314
283
|
endDate: end,
|
|
@@ -317,36 +286,36 @@ var DateRangePickerWrapper = function (props) {
|
|
|
317
286
|
}) }));
|
|
318
287
|
};
|
|
319
288
|
nextProps = omit(nextProps, [
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
289
|
+
'helperText',
|
|
290
|
+
'disableHelperText',
|
|
291
|
+
'value',
|
|
292
|
+
'autoFocus',
|
|
293
|
+
'autoFocusEndDate',
|
|
294
|
+
'initialStartDate',
|
|
295
|
+
'initialEndDate',
|
|
296
|
+
'presets',
|
|
297
|
+
'callback',
|
|
298
|
+
'label',
|
|
299
|
+
'error',
|
|
300
|
+
'isShowCalendarInfo',
|
|
301
|
+
'isValid',
|
|
302
|
+
'variant',
|
|
303
|
+
'textFieldProps',
|
|
304
|
+
'startDatePlaceholderText',
|
|
305
|
+
'endDatePlaceholderText',
|
|
306
|
+
'openDirection',
|
|
307
|
+
'startDateId',
|
|
308
|
+
'endDateId',
|
|
309
|
+
'anchorDirection',
|
|
310
|
+
'verticalSpacing',
|
|
311
|
+
'className',
|
|
312
|
+
'isDayBlocked',
|
|
313
|
+
'handleValid',
|
|
314
|
+
'handleDateRangePopover',
|
|
346
315
|
]);
|
|
347
|
-
var
|
|
316
|
+
var _t = react_1.default.useState(null), anchorElPopover = _t[0], setAnchorElPopover = _t[1];
|
|
348
317
|
var openPopper = Boolean(anchorElPopover);
|
|
349
|
-
var id = openPopper ?
|
|
318
|
+
var id = openPopper ? 'datePicker-popper' : undefined;
|
|
350
319
|
var popperRef = react_1.default.useRef();
|
|
351
320
|
var inputRef = react_1.default.useRef();
|
|
352
321
|
var handleClickInput = function (event) {
|
|
@@ -367,11 +336,11 @@ var DateRangePickerWrapper = function (props) {
|
|
|
367
336
|
var _a;
|
|
368
337
|
return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ "aria-describedby": id, variant: variant, label: label, error: !isValid || error, helperText: !disableHelperText
|
|
369
338
|
? error
|
|
370
|
-
? helperText || t(
|
|
339
|
+
? helperText || t('Common.InvalidData')
|
|
371
340
|
: !isValid
|
|
372
|
-
? t(
|
|
373
|
-
:
|
|
374
|
-
:
|
|
341
|
+
? t('DatePicker.InvalidDateRange')
|
|
342
|
+
: ''
|
|
343
|
+
: '' }, omit(props.textFieldProps, ['readOnly']), { inputProps: {
|
|
375
344
|
readOnly: (_a = props.textFieldProps) === null || _a === void 0 ? void 0 : _a.readOnly,
|
|
376
345
|
}, disabled: props.disabled, onClick: function (e) {
|
|
377
346
|
var _a;
|
|
@@ -380,7 +349,7 @@ var DateRangePickerWrapper = function (props) {
|
|
|
380
349
|
}, inputRef: inputRef, InputProps: {
|
|
381
350
|
endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(icons_material_1.CalendarTodaySharp, {}) }) })),
|
|
382
351
|
} })));
|
|
383
|
-
} }), (0, jsx_runtime_1.jsx)(material_1.Popper, { id: id, open: openPopper, anchorEl: anchorElPopover, onClose: handleClosePopover, style: { zIndex: 30000 }, placement: openDirection ===
|
|
352
|
+
} }), (0, jsx_runtime_1.jsx)(material_1.Popper, { id: id, open: openPopper, anchorEl: anchorElPopover, onClose: handleClosePopover, style: { zIndex: 30000 }, placement: openDirection === 'up' ? 'top-start' : 'bottom-start', popperRef: popperRef, children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: handleClosePopover, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { elevation: 8, className: classes.CustomPickerSelected, children: (0, jsx_runtime_1.jsx)(react_dates_1.DayPickerRangeController, __assign({}, nextProps, { calendarInfoPosition: "before", renderCalendarInfo: isShowCalendarInfo ? renderDatePresets : null, onDatesChange: onDatesChange, onFocusChange: onFocusChange, focusedInput: focusedInput, startDate: value ? value === null || value === void 0 ? void 0 : value.startDate : startDate, endDate: value ? value === null || value === void 0 ? void 0 : value.endDate : endDate, hideKeyboardShortcutsPanel: true, numberOfMonths: 2, daySize: 32, transitionDuration: 0, isDayBlocked: function (day) {
|
|
384
353
|
if (value ? value === null || value === void 0 ? void 0 : value.startDate : startDate) {
|
|
385
354
|
if (isDayBlocked(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate))
|
|
386
355
|
setIsValid(false);
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { TFunction } from 'i18next';
|
|
2
|
+
import moment from 'moment';
|
|
3
|
+
declare const configInitialDate: (t: TFunction<'translation', undefined>, isFutureDate: boolean) => {
|
|
4
|
+
text: string;
|
|
5
|
+
start: moment.Moment;
|
|
6
|
+
end: moment.Moment;
|
|
7
|
+
}[];
|
|
8
|
+
export default configInitialDate;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var moment_1 = __importDefault(require("moment"));
|
|
7
|
+
var configInitialDate = function (t, isFutureDate) {
|
|
8
|
+
var today = (0, moment_1.default)();
|
|
9
|
+
var initDatePast = [
|
|
10
|
+
{
|
|
11
|
+
text: t('DatePicker.ToDay'),
|
|
12
|
+
start: today,
|
|
13
|
+
end: today,
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
text: t('DatePicker.Yesterday'),
|
|
17
|
+
start: (0, moment_1.default)().subtract(1, 'days'),
|
|
18
|
+
end: (0, moment_1.default)().subtract(1, 'days'),
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
text: t('DatePicker.LastSevenDay'),
|
|
22
|
+
start: (0, moment_1.default)().subtract(6, 'days'),
|
|
23
|
+
end: today,
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
text: t('DatePicker.LastThirtyDay'),
|
|
27
|
+
start: (0, moment_1.default)().subtract(29, 'days'),
|
|
28
|
+
end: today,
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
text: t('DatePicker.ThisMonth'),
|
|
32
|
+
start: (0, moment_1.default)().startOf('month'),
|
|
33
|
+
end: (0, moment_1.default)().endOf('month'),
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
text: t('DatePicker.LastMonth'),
|
|
37
|
+
start: (0, moment_1.default)().subtract(1, 'month').startOf('month'),
|
|
38
|
+
end: (0, moment_1.default)().subtract(1, 'month').endOf('month'),
|
|
39
|
+
},
|
|
40
|
+
];
|
|
41
|
+
var initDateFuture = [
|
|
42
|
+
{
|
|
43
|
+
text: t('DatePicker.ToDay'),
|
|
44
|
+
start: today,
|
|
45
|
+
end: today,
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
text: t('DatePicker.Tomorrow'),
|
|
49
|
+
start: (0, moment_1.default)(),
|
|
50
|
+
end: (0, moment_1.default)().add(1, 'days'),
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
text: t('DatePicker.NextSevenDay'),
|
|
54
|
+
start: today,
|
|
55
|
+
end: (0, moment_1.default)().add(6, 'days'),
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
text: t('DatePicker.NextThirtyDay'),
|
|
59
|
+
start: today,
|
|
60
|
+
end: (0, moment_1.default)().add(29, 'days'),
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
text: t('DatePicker.NextMonth'),
|
|
64
|
+
start: (0, moment_1.default)().add(1, 'month').startOf('month'),
|
|
65
|
+
end: (0, moment_1.default)().add(1, 'month').endOf('month'),
|
|
66
|
+
},
|
|
67
|
+
];
|
|
68
|
+
var initDate = isFutureDate ? initDateFuture : initDatePast;
|
|
69
|
+
return initDate;
|
|
70
|
+
};
|
|
71
|
+
exports.default = configInitialDate;
|
|
@@ -167,7 +167,11 @@
|
|
|
167
167
|
"LastSevenDay": "Last 7 days",
|
|
168
168
|
"LastThirtyDay": "Last 30 days",
|
|
169
169
|
"ThisMonth": "This month",
|
|
170
|
-
"LastMonth": "Last month"
|
|
170
|
+
"LastMonth": "Last month",
|
|
171
|
+
"Tomorrow": "Tomorrow",
|
|
172
|
+
"NextSevenDay": "Next 7 days",
|
|
173
|
+
"NextThirtyDay": "Next 30 days",
|
|
174
|
+
"NextMonth": "Next month"
|
|
171
175
|
},
|
|
172
176
|
"Notifications": {
|
|
173
177
|
"SelectAll": "Mark all as read",
|
|
@@ -172,7 +172,11 @@
|
|
|
172
172
|
"LastSevenDay": "7 ngày qua",
|
|
173
173
|
"LastThirtyDay": "30 ngày qua",
|
|
174
174
|
"ThisMonth": "Tháng này",
|
|
175
|
-
"LastMonth": "Tháng trước"
|
|
175
|
+
"LastMonth": "Tháng trước",
|
|
176
|
+
"Tomorrow": "Ngày mai",
|
|
177
|
+
"NextSevenDay": "7 Ngày tới",
|
|
178
|
+
"NextThirtyDay": "30 Ngày tới",
|
|
179
|
+
"NextMonth": "Tháng tới"
|
|
176
180
|
},
|
|
177
181
|
"Notifications": {
|
|
178
182
|
"SelectAll": "Đánh dấu tất cả là đã đọc",
|