@synerise/ds-date-range-picker 0.26.5 → 0.26.6
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/CHANGELOG.md +11 -0
- package/README.md +94 -0
- package/dist/DateRangePicker.types.d.ts +4 -4
- package/dist/RangeFilter/Filters/DailyFilter/DailyFilter.js +1 -5
- package/dist/RangeFilter/Filters/MonthlyFilter/MonthlyFilter.js +3 -16
- package/dist/RangeFilter/Filters/new/Daily/Daily.d.ts +1 -1
- package/dist/RangeFilter/Filters/new/Daily/Daily.js +8 -6
- package/dist/RangeFilter/Filters/new/Daily/Daily.types.d.ts +2 -0
- package/dist/RangeFilter/Filters/new/Monthly/Monthly.d.ts +1 -1
- package/dist/RangeFilter/Filters/new/Monthly/Monthly.js +15 -23
- package/dist/RangeFilter/Filters/new/Monthly/Monthly.types.d.ts +2 -0
- package/dist/RangeFilter/Filters/new/Weekly/Weekly.d.ts +1 -1
- package/dist/RangeFilter/Filters/new/Weekly/Weekly.js +44 -52
- package/dist/RangeFilter/Filters/new/Weekly/Weekly.types.d.ts +2 -0
- package/dist/RangeFilter/RangeFilter.js +7 -18
- package/dist/RangeFilter/RangeFilter.types.d.ts +2 -2
- package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.js +5 -12
- package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.types.d.ts +3 -2
- package/dist/RangeFilter/Shared/SaveFilterForm/SaveFilterForm.js +4 -11
- package/dist/RangeFilter/Shared/SaveFilterForm/SaveFilterForm.types.d.ts +2 -0
- package/dist/RangeFilter/Shared/TimeWindow/Day/Day.js +1 -1
- package/dist/RangeFilter/Shared/TimeWindow/Day/Day.types.d.ts +1 -1
- package/dist/RangeFilter/Shared/TimeWindow/Grid/Grid.js +3 -9
- package/dist/RangeFilter/Shared/TimeWindow/Grid/Grid.types.d.ts +3 -4
- package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.js +4 -4
- package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types.d.ts +3 -2
- package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.js +4 -8
- package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types.d.ts +1 -1
- package/dist/RangeFilter/Shared/TimeWindow/RangeSummary/RangeSummary.js +3 -7
- package/dist/RangeFilter/Shared/TimeWindow/RangeSummary/RangeSummary.types.d.ts +2 -0
- package/dist/RangeFilter/Shared/TimeWindow/TimeWindow.js +4 -12
- package/dist/RangeFilter/Shared/TimeWindow/TimeWindow.types.d.ts +3 -8
- package/dist/RawDateRangePicker.d.ts +10 -6
- package/dist/RawDateRangePicker.js +58 -56
- package/dist/RelativeRangePicker/Elements/CustomRangeForm/CustomRangeForm.types.d.ts +1 -1
- package/dist/utils.js +86 -57
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.26.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.26.5...@synerise/ds-date-range-picker@0.26.6) (2024-01-31)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **date-range-picker:** added texts over translations ([7131f8c](https://github.com/Synerise/synerise-design/commit/7131f8c5c923527544fb54b5bb9eb15585bec442))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [0.26.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.26.4...@synerise/ds-date-range-picker@0.26.5) (2024-01-24)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @synerise/ds-date-range-picker
|
package/README.md
CHANGED
|
@@ -64,6 +64,8 @@ const value = {
|
|
|
64
64
|
| onVisibleChange | Callback executed when popover with dateRangePicker changes its visibility | (visible: boolean) => void | - |
|
|
65
65
|
| filterValueSelectionModes | Allowed modes to display in filter | DateLimitMode[] | ["Range", "Hour"] |
|
|
66
66
|
| getPopupContainer | Function used to set the container of the date range picker. | Function(triggerNode) | `() => document.body` |
|
|
67
|
+
| texts | custom translations | Texts | undefined |
|
|
68
|
+
| disableDefaultTexts | disable DS translations fallback | boolean | false
|
|
67
69
|
|
|
68
70
|
### DateRange
|
|
69
71
|
|
|
@@ -77,6 +79,98 @@ const value = {
|
|
|
77
79
|
|
|
78
80
|
`RelativeUnit = 'SECONDS' | 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS' | 'YEARS'`
|
|
79
81
|
|
|
82
|
+
### Texts
|
|
83
|
+
|
|
84
|
+
- `texts` prop is now optional
|
|
85
|
+
- all keys in `texts` is now also optional
|
|
86
|
+
- if `texts` is `undefined` or if a key in `texts` is `undefined` default DS translations will appear in the component
|
|
87
|
+
- `disableDefaultTexts` disables the above fallback, i.e. if any key is missing in `texts` then an empty string is used as a translation (this prop is provided for testing custom translation completeness)
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
| translation key | Type | Default |
|
|
91
|
+
| ------------------------ | ----------------- | -------- |
|
|
92
|
+
| endDatePlaceholder | string | -------- |
|
|
93
|
+
| startDatePlaceholder | string | -------- |
|
|
94
|
+
| selectDate | string | -------- |
|
|
95
|
+
| selectTime | string | -------- |
|
|
96
|
+
| filterName | string | -------- |
|
|
97
|
+
| custom | ReactNode | -------- |
|
|
98
|
+
| today | ReactNode | -------- |
|
|
99
|
+
| yesterday | ReactNode | -------- |
|
|
100
|
+
| apply | ReactNode | -------- |
|
|
101
|
+
| clear | ReactNode | -------- |
|
|
102
|
+
| now | ReactNode | -------- |
|
|
103
|
+
| emptyDateError | ReactNode | -------- |
|
|
104
|
+
| last7Days | ReactNode | -------- |
|
|
105
|
+
| thisWeek | ReactNode | -------- |
|
|
106
|
+
| lastWeek | ReactNode | -------- |
|
|
107
|
+
| thisMonth | ReactNode | -------- |
|
|
108
|
+
| lastMonth | ReactNode | -------- |
|
|
109
|
+
| last3Months | ReactNode | -------- |
|
|
110
|
+
| last6Months | ReactNode | -------- |
|
|
111
|
+
| lastYear | ReactNode | -------- |
|
|
112
|
+
| allTime | ReactNode | -------- |
|
|
113
|
+
| tomorrow | ReactNode | -------- |
|
|
114
|
+
| next7Days | ReactNode | -------- |
|
|
115
|
+
| nextWeek | ReactNode | -------- |
|
|
116
|
+
| nextMonth | ReactNode | -------- |
|
|
117
|
+
| next3Months | ReactNode | -------- |
|
|
118
|
+
| next6Months | ReactNode | -------- |
|
|
119
|
+
| nextYear | ReactNode | -------- |
|
|
120
|
+
| more | ReactNode | -------- |
|
|
121
|
+
| relativeDateRange | ReactNode | -------- |
|
|
122
|
+
| last | ReactNode | -------- |
|
|
123
|
+
| before | ReactNode | -------- |
|
|
124
|
+
| after | ReactNode | -------- |
|
|
125
|
+
| since | ReactNode | -------- |
|
|
126
|
+
| next | ReactNode | -------- |
|
|
127
|
+
| seconds | ReactNode | -------- |
|
|
128
|
+
| minutes | ReactNode | -------- |
|
|
129
|
+
| hours | ReactNode | -------- |
|
|
130
|
+
| days | ReactNode | -------- |
|
|
131
|
+
| weeks | ReactNode | -------- |
|
|
132
|
+
| months | ReactNode | -------- |
|
|
133
|
+
| years | ReactNode | -------- |
|
|
134
|
+
| timestampLast | ReactNode | -------- |
|
|
135
|
+
| timestampNext | ReactNode | -------- |
|
|
136
|
+
| timestampTill | ReactNode | -------- |
|
|
137
|
+
| filter | ReactNode | -------- |
|
|
138
|
+
| startDate | ReactNode | -------- |
|
|
139
|
+
| endDate | ReactNode | -------- |
|
|
140
|
+
| remove | ReactNode | -------- |
|
|
141
|
+
| savedFiltersTrigger | ReactNode | -------- |
|
|
142
|
+
| clearRange | ReactNode | -------- |
|
|
143
|
+
| copyRange | ReactNode | -------- |
|
|
144
|
+
| pasteRange | ReactNode | -------- |
|
|
145
|
+
| range | ReactNode | -------- |
|
|
146
|
+
| hour | ReactNode | -------- |
|
|
147
|
+
| filterEnabled | ReactNode | -------- |
|
|
148
|
+
| selectDateFilter | ReactNode | -------- |
|
|
149
|
+
| datesFilter | ReactNode | -------- |
|
|
150
|
+
| cancel | ReactNode | -------- |
|
|
151
|
+
| everyDay | ReactNode | -------- |
|
|
152
|
+
| nthDayOfMonth | ReactNode | -------- |
|
|
153
|
+
| daysOf | ReactNode | -------- |
|
|
154
|
+
| countedFrom | ReactNode | -------- |
|
|
155
|
+
| addRule | ReactNode | -------- |
|
|
156
|
+
| addTime | ReactNode | -------- |
|
|
157
|
+
| change | ReactNode | -------- |
|
|
158
|
+
| weekly | ReactNode | -------- |
|
|
159
|
+
| monthly | ReactNode | -------- |
|
|
160
|
+
| daily | ReactNode | -------- |
|
|
161
|
+
| saveFilter | ReactNode | -------- |
|
|
162
|
+
| selected | ReactNode | -------- |
|
|
163
|
+
| selectDaysDescription | ReactNode | -------- |
|
|
164
|
+
| selectAll | ReactNode | -------- |
|
|
165
|
+
| unselectAll | ReactNode | -------- |
|
|
166
|
+
| inverseSelection | ReactNode | -------- |
|
|
167
|
+
| setTimeFor | ReactNode | -------- |
|
|
168
|
+
| week | ReactNode | -------- |
|
|
169
|
+
| month | ReactNode | -------- |
|
|
170
|
+
| beginning | ReactNode | -------- |
|
|
171
|
+
| ending | ReactNode | -------- |
|
|
172
|
+
| maximumRanges | ReactNode | -------- |
|
|
173
|
+
|
|
80
174
|
### Undocumented props
|
|
81
175
|
|
|
82
176
|
- min in `MonthlyFilter` - controls minimal amount of entires in monthly filter, disable with `undefined`, default is `1`
|
|
@@ -53,7 +53,7 @@ export interface DateRangePickerProps extends WrappedComponentProps {
|
|
|
53
53
|
showTime?: boolean;
|
|
54
54
|
showCustomRange?: boolean;
|
|
55
55
|
showNowButton?: boolean;
|
|
56
|
-
texts
|
|
56
|
+
texts?: Partial<Texts>;
|
|
57
57
|
validate?: (value: DateRange) => {
|
|
58
58
|
valid: boolean;
|
|
59
59
|
message?: string;
|
|
@@ -90,10 +90,10 @@ export type Texts = {
|
|
|
90
90
|
} & {
|
|
91
91
|
[k in TranslationsPlaceholders]: string;
|
|
92
92
|
};
|
|
93
|
-
export type TranslationsPlaceholders = 'endDatePlaceholder' | 'startDatePlaceholder' | 'selectDate' | 'selectTime';
|
|
94
|
-
export type Translations = 'custom' | 'today' | 'yesterday' | 'apply' | 'clear' | 'now' | 'emptyDateError' | 'last7Days' | 'thisWeek' | 'lastWeek' | 'thisMonth' | 'lastMonth' | 'last3Months' | 'last6Months' | 'lastYear' | 'allTime' | 'tomorrow' | 'next7Days' | 'nextWeek' | 'nextMonth' | 'next3Months' | 'next6Months' | 'nextYear' | 'more' | 'relativeDateRange' | 'last' | 'before' | 'after' | 'since' | 'next' | 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'years' | 'timestampLast' | 'timestampNext' | 'timestampTill' | 'filter' | 'startDate' | 'endDate' | 'remove' | 'savedFiltersTrigger' | 'clearRange' | 'copyRange' | 'pasteRange' | 'range' | 'hour';
|
|
93
|
+
export type TranslationsPlaceholders = 'endDatePlaceholder' | 'startDatePlaceholder' | 'selectDate' | 'selectTime' | 'everyDay' | 'filterName';
|
|
94
|
+
export type Translations = 'custom' | 'today' | 'yesterday' | 'apply' | 'clear' | 'now' | 'emptyDateError' | 'last7Days' | 'thisWeek' | 'lastWeek' | 'thisMonth' | 'lastMonth' | 'last3Months' | 'last6Months' | 'lastYear' | 'allTime' | 'tomorrow' | 'next7Days' | 'nextWeek' | 'nextMonth' | 'next3Months' | 'next6Months' | 'nextYear' | 'more' | 'relativeDateRange' | 'last' | 'before' | 'after' | 'since' | 'next' | 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'years' | 'timestampLast' | 'timestampNext' | 'timestampTill' | 'filter' | 'startDate' | 'endDate' | 'remove' | 'savedFiltersTrigger' | 'clearRange' | 'copyRange' | 'pasteRange' | 'range' | 'hour' | 'filterEnabled' | 'selectDateFilter' | 'datesFilter' | 'cancel' | 'nthDayOfMonth' | 'daysOf' | 'countedFrom' | 'addRule' | 'addTime' | 'change' | 'weekly' | 'monthly' | 'daily' | 'saveFilter' | 'selected' | 'selectDaysDescription' | 'selectAll' | 'unselectAll' | 'inverseSelection' | 'setTimeFor' | 'week' | 'month' | 'beginning' | 'ending' | 'maximumRanges';
|
|
95
95
|
export type WithTranslations = {
|
|
96
|
-
texts
|
|
96
|
+
texts: Texts;
|
|
97
97
|
};
|
|
98
98
|
export type AddonType = {
|
|
99
99
|
content: ReactNode;
|
|
@@ -11,7 +11,6 @@ var DailyFilter = function DailyFilter(props) {
|
|
|
11
11
|
};
|
|
12
12
|
|
|
13
13
|
var value = props.value,
|
|
14
|
-
intl = props.intl,
|
|
15
14
|
onRangeCopy = props.onRangeCopy,
|
|
16
15
|
onRangePaste = props.onRangePaste,
|
|
17
16
|
onRangeClear = props.onRangeClear,
|
|
@@ -32,10 +31,7 @@ var DailyFilter = function DailyFilter(props) {
|
|
|
32
31
|
numberOfDays: 0,
|
|
33
32
|
customDays: {
|
|
34
33
|
0: {
|
|
35
|
-
label:
|
|
36
|
-
id: 'DS.DATE-RANGE-PICKER.EVERY_DAY',
|
|
37
|
-
defaultMessage: 'Every day'
|
|
38
|
-
})
|
|
34
|
+
label: texts.everyDay
|
|
39
35
|
}
|
|
40
36
|
} // @ts-expect-error: Type 'string' is not assignable to type 'Days'.ts(2322)
|
|
41
37
|
,
|
|
@@ -326,7 +326,6 @@ var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
326
326
|
onRangePaste = _this$props4.onRangePaste,
|
|
327
327
|
onRangeClear = _this$props4.onRangeClear,
|
|
328
328
|
rangeClipboard = _this$props4.rangeClipboard,
|
|
329
|
-
intl = _this$props4.intl,
|
|
330
329
|
texts = _this$props4.texts,
|
|
331
330
|
valueSelectionModes = _this$props4.valueSelectionModes,
|
|
332
331
|
timePickerProps = _this$props4.timePickerProps,
|
|
@@ -372,13 +371,7 @@ var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
372
371
|
return event.stopPropagation();
|
|
373
372
|
},
|
|
374
373
|
className: visible[item.id] ? 'dropdown-header-visible' : 'dropdown-header'
|
|
375
|
-
}, /*#__PURE__*/React.createElement(S.DropdownLabel, null, /*#__PURE__*/React.createElement(
|
|
376
|
-
id: "DS.DATE-RANGE-PICKER.DAYS-OF",
|
|
377
|
-
defaultMessage: "Days of"
|
|
378
|
-
}), SPACE_UNICODE), _this2.renderDaysOfField(item, key), /*#__PURE__*/React.createElement(S.DropdownLabel, null, SPACE_UNICODE, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
379
|
-
id: "DS.DATE-RANGE-PICKER.COUNTED-FROM",
|
|
380
|
-
defaultMessage: "counted from"
|
|
381
|
-
}), SPACE_UNICODE), _this2.renderCountedFromField(item, key)),
|
|
374
|
+
}, /*#__PURE__*/React.createElement(S.DropdownLabel, null, texts.daysOf, SPACE_UNICODE), _this2.renderDaysOfField(item, key), /*#__PURE__*/React.createElement(S.DropdownLabel, null, SPACE_UNICODE, texts.countedFrom, SPACE_UNICODE), _this2.renderCountedFromField(item, key)),
|
|
382
375
|
nameWrapperClassNames: ['full-width'],
|
|
383
376
|
content: visible[item.id] ? /*#__PURE__*/React.createElement(S.ContentWrapper, null, /*#__PURE__*/React.createElement(TimeWindow, _extends({
|
|
384
377
|
disabled: disabled,
|
|
@@ -411,17 +404,11 @@ var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
411
404
|
}))) : /*#__PURE__*/React.createElement("div", null)
|
|
412
405
|
},
|
|
413
406
|
texts: {
|
|
414
|
-
itemActionDeleteTooltip:
|
|
415
|
-
id: 'DS.DATE-RANGE-PICKER.REMOVE',
|
|
416
|
-
defaultMessage: 'Remove'
|
|
417
|
-
})
|
|
407
|
+
itemActionDeleteTooltip: texts.remove
|
|
418
408
|
}
|
|
419
409
|
});
|
|
420
410
|
}), /*#__PURE__*/React.createElement(S.AddContainer, null, !disabled && value.length < Number(maxEntries) && /*#__PURE__*/React.createElement(Button.Creator, {
|
|
421
|
-
label:
|
|
422
|
-
id: 'DS.DATE-RANGE-PICKER.ADD-RULE',
|
|
423
|
-
defaultMessage: 'Add rule'
|
|
424
|
-
}),
|
|
411
|
+
label: texts == null ? void 0 : texts.addRule,
|
|
425
412
|
onClick: this.handleAddRow,
|
|
426
413
|
block: true
|
|
427
414
|
})));
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { DailyProps } from './Daily.types';
|
|
2
|
-
declare const Daily: ({ maxEntries, disabled, value, onChange, valueSelectionMode, timeFormat, timePickerProps, errorTexts, }: DailyProps) => JSX.Element;
|
|
2
|
+
declare const Daily: ({ maxEntries, disabled, value, onChange, valueSelectionMode, timeFormat, timePickerProps, texts, errorTexts, }: DailyProps) => JSX.Element;
|
|
3
3
|
export default Daily;
|
|
@@ -5,12 +5,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
5
5
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
6
|
|
|
7
7
|
import React, { useMemo, useCallback } from 'react';
|
|
8
|
-
import dayjs from 'dayjs';
|
|
9
8
|
import { useIntl } from 'react-intl';
|
|
9
|
+
import dayjs from 'dayjs';
|
|
10
10
|
import { DEFAULT_RANGE_END, DEFAULT_RANGE_START, DEFAULT_TIME_FORMAT, DEFAULT_MAX_ENTRIES, NOOP, EMPTY_OBJECT, RENDER_EMPTY_NODE_FN } from '../constants';
|
|
11
11
|
import * as S from '../../../RangeFilter.styles';
|
|
12
12
|
import RangeFormContainer from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer';
|
|
13
13
|
import { AddButton } from '../../../Shared';
|
|
14
|
+
import { getDefaultTexts } from '../../../../utils';
|
|
14
15
|
|
|
15
16
|
var Daily = function Daily(_ref) {
|
|
16
17
|
var _ref$maxEntries = _ref.maxEntries,
|
|
@@ -24,9 +25,13 @@ var Daily = function Daily(_ref) {
|
|
|
24
25
|
valueSelectionMode = _ref$valueSelectionMo === void 0 ? ['Hour', 'Range'] : _ref$valueSelectionMo,
|
|
25
26
|
timeFormat = _ref.timeFormat,
|
|
26
27
|
timePickerProps = _ref.timePickerProps,
|
|
28
|
+
texts = _ref.texts,
|
|
27
29
|
_ref$errorTexts = _ref.errorTexts,
|
|
28
30
|
errorTexts = _ref$errorTexts === void 0 ? [] : _ref$errorTexts;
|
|
29
31
|
var intl = useIntl();
|
|
32
|
+
var allTexts = React.useMemo(function () {
|
|
33
|
+
return getDefaultTexts(intl, false, texts);
|
|
34
|
+
}, [texts, intl]);
|
|
30
35
|
var defaultDayValue = useMemo(function () {
|
|
31
36
|
return {
|
|
32
37
|
start: DEFAULT_RANGE_START,
|
|
@@ -85,7 +90,7 @@ var Daily = function Daily(_ref) {
|
|
|
85
90
|
handleDayTimeChange(dateValueArray, index);
|
|
86
91
|
},
|
|
87
92
|
dayKeys: [0],
|
|
88
|
-
texts:
|
|
93
|
+
texts: allTexts,
|
|
89
94
|
activeDays: [0],
|
|
90
95
|
getDayValue: function getDayValue() {
|
|
91
96
|
return _getDayValue(index);
|
|
@@ -104,10 +109,7 @@ var Daily = function Daily(_ref) {
|
|
|
104
109
|
hideHeader: true
|
|
105
110
|
});
|
|
106
111
|
}), value.length < maxEntries && !disabled && /*#__PURE__*/React.createElement(AddButton, {
|
|
107
|
-
label:
|
|
108
|
-
id: 'DS.DATE-RANGE-PICKER.ADD-TIME',
|
|
109
|
-
defaultMessage: 'Add range'
|
|
110
|
-
}),
|
|
112
|
+
label: allTexts.addTime,
|
|
111
113
|
onClick: handleRangeAdd
|
|
112
114
|
}));
|
|
113
115
|
};
|
|
@@ -3,11 +3,13 @@ import { DateLimitMode } from '../../../Shared/TimeWindow/RangeFormContainer/Ran
|
|
|
3
3
|
import { DayOptions } from '../../../Shared/TimeWindow/TimeWindow.types';
|
|
4
4
|
import { WithDisabledProp } from '../../../RangeFilter.types';
|
|
5
5
|
import { FilterErrorType } from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types';
|
|
6
|
+
import { Texts } from '../../../../DateRangePicker.types';
|
|
6
7
|
export type DailySchedule = DayOptions & {
|
|
7
8
|
mode: DateLimitMode;
|
|
8
9
|
};
|
|
9
10
|
export type DailyProps = {
|
|
10
11
|
value: DailySchedule[];
|
|
11
12
|
errorTexts?: FilterErrorType[];
|
|
13
|
+
texts?: Partial<Texts>;
|
|
12
14
|
onChange: (value: DailyProps['value']) => void;
|
|
13
15
|
} & FilterBaseProps & WithDisabledProp;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { MonthlyProps } from './Monthly.types';
|
|
2
|
-
declare const Monthly: ({ maxEntries, valueSelectionMode, onChange, timeFormat, valueFormatOptions, value, timePickerProps, disabled, periodType, countedFrom, errorTexts, }: MonthlyProps) => JSX.Element;
|
|
2
|
+
declare const Monthly: ({ maxEntries, valueSelectionMode, onChange, timeFormat, valueFormatOptions, value, timePickerProps, disabled, texts, periodType, countedFrom, errorTexts, }: MonthlyProps) => JSX.Element;
|
|
3
3
|
export default Monthly;
|
|
@@ -21,6 +21,7 @@ import { canAddAnotherRange, haveActiveDaysCommonRange, range } from './utils';
|
|
|
21
21
|
import { DEFAULT_RANGE_START, DEFAULT_RANGE_END, DEFAULT_TIME_FORMAT, EMPTY_OBJECT, DEFAULT_MAX_ENTRIES, RENDER_EMPTY_NODE_FN, NOOP } from '../constants';
|
|
22
22
|
import { MONTH_DAYS, DAYS_OF_PERIOD_ENUM, COUNTED_FROM_ENUM, MONTHLY_SCHEDULER_INTL_KEYS_NTH_WEEK, MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_LONG, MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_SHORT } from '../../../constants';
|
|
23
23
|
import { US_NOTATION_WEEK_DAYS_INDEXES } from '../../../Shared/TimeWindow/constants/timeWindow.constants';
|
|
24
|
+
import { getDefaultTexts } from '../../../../utils';
|
|
24
25
|
|
|
25
26
|
var Monthly = function Monthly(_ref) {
|
|
26
27
|
var _ref$maxEntries = _ref.maxEntries,
|
|
@@ -34,11 +35,16 @@ var Monthly = function Monthly(_ref) {
|
|
|
34
35
|
value = _ref.value,
|
|
35
36
|
timePickerProps = _ref.timePickerProps,
|
|
36
37
|
disabled = _ref.disabled,
|
|
38
|
+
texts = _ref.texts,
|
|
37
39
|
_ref$periodType = _ref.periodType,
|
|
38
40
|
periodType = _ref$periodType === void 0 ? DAYS_OF_PERIOD_ENUM.DAY_OF_MONTH : _ref$periodType,
|
|
39
41
|
_ref$countedFrom = _ref.countedFrom,
|
|
40
42
|
countedFrom = _ref$countedFrom === void 0 ? COUNTED_FROM_ENUM.BEGINNING : _ref$countedFrom,
|
|
41
43
|
errorTexts = _ref.errorTexts;
|
|
44
|
+
var intl = useIntl();
|
|
45
|
+
var allTexts = React.useMemo(function () {
|
|
46
|
+
return getDefaultTexts(intl, false, texts);
|
|
47
|
+
}, [texts, intl]);
|
|
42
48
|
var defaultDayValue = React.useMemo(function () {
|
|
43
49
|
return {
|
|
44
50
|
start: DEFAULT_RANGE_START,
|
|
@@ -64,8 +70,6 @@ var Monthly = function Monthly(_ref) {
|
|
|
64
70
|
controlKeyPressed = _useShiftAndControlKe[0],
|
|
65
71
|
shiftKeyPressed = _useShiftAndControlKe[1];
|
|
66
72
|
|
|
67
|
-
var intl = useIntl();
|
|
68
|
-
|
|
69
73
|
var _useDataFormat = useDataFormat(),
|
|
70
74
|
isSundayFirstWeekDay = _useDataFormat.isSundayFirstWeekDay;
|
|
71
75
|
|
|
@@ -272,9 +276,9 @@ var Monthly = function Monthly(_ref) {
|
|
|
272
276
|
intl: intl,
|
|
273
277
|
onToggle: handleToggleDay,
|
|
274
278
|
onClear: removeDaySelection,
|
|
275
|
-
texts:
|
|
279
|
+
texts: allTexts
|
|
276
280
|
});
|
|
277
|
-
}, [activeDays,
|
|
281
|
+
}, [activeDays, getDayLabel, isDayRestricted, disabled, intl, handleToggleDay, removeDaySelection, allTexts]);
|
|
278
282
|
var handleRangeAdd = React.useCallback(function () {
|
|
279
283
|
var _objectSpread2;
|
|
280
284
|
|
|
@@ -296,12 +300,9 @@ var Monthly = function Monthly(_ref) {
|
|
|
296
300
|
var renderGridTitle = React.useCallback(function (count) {
|
|
297
301
|
return /*#__PURE__*/React.createElement(SelectionCount, {
|
|
298
302
|
selectedDayCount: count,
|
|
299
|
-
label:
|
|
300
|
-
id: 'DS.DATE-RANGE-PICKER.SELECTED',
|
|
301
|
-
defaultMessage: 'Selected'
|
|
302
|
-
})
|
|
303
|
+
label: allTexts.selected
|
|
303
304
|
});
|
|
304
|
-
}, [
|
|
305
|
+
}, [allTexts.selected]);
|
|
305
306
|
var canAddRange = canAddAnotherRange(value, activeDays, maxEntries);
|
|
306
307
|
var isAnyDaySelected = activeDays.length > 0;
|
|
307
308
|
var shouldRenderAddButton = isAnyDaySelected && filteredSchedule.length < maxEntries && canAddRange && !disabled;
|
|
@@ -324,7 +325,7 @@ var Monthly = function Monthly(_ref) {
|
|
|
324
325
|
intl: intl,
|
|
325
326
|
numberOfDays: 7,
|
|
326
327
|
numberOfDaysPerRow: 7,
|
|
327
|
-
texts:
|
|
328
|
+
texts: allTexts,
|
|
328
329
|
title: renderGridTitle(activeDays.length)
|
|
329
330
|
}, getGridSettings())), isAnyDaySelected && filteredSchedule.map(function (guid, index) {
|
|
330
331
|
return /*#__PURE__*/React.createElement(RangeFormContainer, {
|
|
@@ -335,7 +336,7 @@ var Monthly = function Monthly(_ref) {
|
|
|
335
336
|
onDayTimeChange: function onDayTimeChange(dayValue, dayKey) {
|
|
336
337
|
handleDayTimeChange(dayValue, dayKey, guid);
|
|
337
338
|
},
|
|
338
|
-
texts:
|
|
339
|
+
texts: allTexts,
|
|
339
340
|
onMultipleDayTimeChange: function onMultipleDayTimeChange(dates) {
|
|
340
341
|
return handleDayTimeChange(dates, activeDays, guid);
|
|
341
342
|
},
|
|
@@ -362,21 +363,12 @@ var Monthly = function Monthly(_ref) {
|
|
|
362
363
|
monthlyFilterPeriod: periodType
|
|
363
364
|
});
|
|
364
365
|
}), isAnyDaySelected && !canAddRange && /*#__PURE__*/React.createElement(SelectionHint, {
|
|
365
|
-
message:
|
|
366
|
-
id: 'DS.DATE-RANGE-PICKER.MAXIMUM-RANGES-MESSAGE',
|
|
367
|
-
defaultMessage: 'The maximum amount of ranges have been selected.'
|
|
368
|
-
})
|
|
366
|
+
message: allTexts.maximumRanges
|
|
369
367
|
}), shouldRenderAddButton && /*#__PURE__*/React.createElement(AddButton, {
|
|
370
|
-
label:
|
|
371
|
-
id: 'DS.DATE-RANGE-PICKER.ADD-TIME',
|
|
372
|
-
defaultMessage: 'Add range'
|
|
373
|
-
}),
|
|
368
|
+
label: allTexts.addTime,
|
|
374
369
|
onClick: handleRangeAdd
|
|
375
370
|
}), !isAnyDaySelected && !disabled && /*#__PURE__*/React.createElement(SelectionHint, {
|
|
376
|
-
message:
|
|
377
|
-
id: 'DS.DATE-RANGE-PICKER.SELECT-DAYS-DESCRIPTION',
|
|
378
|
-
defaultMessage: 'Select range.'
|
|
379
|
-
})
|
|
371
|
+
message: allTexts.selectDaysDescription
|
|
380
372
|
}));
|
|
381
373
|
};
|
|
382
374
|
|
|
@@ -4,6 +4,7 @@ import { DateLimitMode } from '../../../Shared/TimeWindow/RangeFormContainer/Ran
|
|
|
4
4
|
import { FilterBaseProps } from '../Filters.types';
|
|
5
5
|
import { WithDisabledProp } from '../../../RangeFilter.types';
|
|
6
6
|
import { FilterErrorType } from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types';
|
|
7
|
+
import { Texts } from '../../../../DateRangePicker.types';
|
|
7
8
|
export type MonthlyScheduleDayValue = DayOptions & {
|
|
8
9
|
mode: DateLimitMode;
|
|
9
10
|
};
|
|
@@ -19,4 +20,5 @@ export type MonthlyProps = {
|
|
|
19
20
|
periodType: DAYS_OF_PERIOD_ENUM;
|
|
20
21
|
countedFrom: COUNTED_FROM_ENUM;
|
|
21
22
|
onChange: (value: MonthlyProps['value']) => void;
|
|
23
|
+
texts?: Partial<Texts>;
|
|
22
24
|
} & FilterBaseProps & WithDisabledProp;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { WeeklyProps } from './Weekly.types';
|
|
2
|
-
declare const Weekly: ({ maxEntries, valueSelectionMode, onChange, timeFormat, valueFormatOptions, value, timePickerProps, disabled, errorTexts, }: WeeklyProps) => JSX.Element;
|
|
2
|
+
declare const Weekly: ({ maxEntries, valueSelectionMode, onChange, timeFormat, valueFormatOptions, value, texts, timePickerProps, disabled, errorTexts, }: WeeklyProps) => JSX.Element;
|
|
3
3
|
export default Weekly;
|