@synerise/ds-date-range-picker 0.31.2 → 0.31.4
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 +19 -0
- package/README.md +2 -0
- package/dist/AddonCollapse/AddonCollapse.js +4 -8
- package/dist/DateRangePicker.js +35 -50
- package/dist/DateRangePicker.styles.js +0 -13
- package/dist/DateRangePicker.types.d.ts +13 -3
- package/dist/DateRangePicker.types.js +5 -1
- package/dist/Footer/Footer.js +16 -31
- package/dist/Footer/Footer.styles.js +0 -1
- package/dist/RangeFilter/Filters/DailyFilter/DailyFilter.js +9 -11
- package/dist/RangeFilter/Filters/MonthlyFilter/MonthlyFilter.js +36 -83
- package/dist/RangeFilter/Filters/WeeklyFilter/WeeklyFilter.js +11 -12
- package/dist/RangeFilter/Filters/new/Daily/Daily.js +15 -24
- package/dist/RangeFilter/Filters/new/Monthly/Monthly.js +27 -60
- package/dist/RangeFilter/Filters/new/Monthly/utils.js +0 -7
- package/dist/RangeFilter/Filters/new/Weekly/Weekly.js +23 -49
- package/dist/RangeFilter/Filters/new/Weekly/utils.js +0 -7
- package/dist/RangeFilter/Filters/new/constants.js +2 -2
- package/dist/RangeFilter/Filters/new/hooks/useShiftAndControlKeys.js +4 -10
- package/dist/RangeFilter/RangeFilter.js +19 -55
- package/dist/RangeFilter/Shared/AddButton/AddButton.js +1 -7
- package/dist/RangeFilter/Shared/FilterDropdown/FilterDropdown.js +4 -6
- package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.js +5 -8
- package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.styles.d.ts +3 -2
- package/dist/RangeFilter/Shared/SaveFilterForm/SaveFilterForm.js +5 -10
- package/dist/RangeFilter/Shared/SelectionCount/SelectionCount.js +1 -3
- package/dist/RangeFilter/Shared/SelectionHint/SelectionHint.js +1 -3
- package/dist/RangeFilter/Shared/TimeWindow/Day/Day.js +15 -22
- package/dist/RangeFilter/Shared/TimeWindow/Grid/Grid.js +13 -17
- package/dist/RangeFilter/Shared/TimeWindow/Header/Header.js +2 -4
- package/dist/RangeFilter/Shared/TimeWindow/RangeActions/RangeActions.js +3 -5
- package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.js +29 -53
- package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.utils.js +0 -1
- package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.js +35 -48
- package/dist/RangeFilter/Shared/TimeWindow/RangeSummary/RangeSummary.js +4 -7
- package/dist/RangeFilter/Shared/TimeWindow/TimeWindow.js +50 -136
- package/dist/RangeFilter/Shared/TimeWindow/utils.js +0 -3
- package/dist/RangeFilter/constants.js +0 -4
- package/dist/RangeFilter/utils.js +27 -50
- package/dist/RangePicker/RangePicker.js +53 -123
- package/dist/RangePicker/utils.js +0 -22
- package/dist/RangePickerInput/RangePickerInput.js +25 -40
- package/dist/RangePickerInput/RangePickerInput.styles.js +2 -21
- package/dist/RawDateRangePicker.js +57 -114
- package/dist/RelativeRangePicker/Elements/CustomRangeForm/CustomRangeForm.js +11 -17
- package/dist/RelativeRangePicker/Elements/CustomRangeForm/DurationField/DurationField.js +5 -7
- package/dist/RelativeRangePicker/Elements/CustomRangeForm/OffsetField/OffsetField.js +5 -7
- package/dist/RelativeRangePicker/Elements/ModeDropdown/ModeDropdown.js +5 -9
- package/dist/RelativeRangePicker/Elements/RangeButtons/RangeButtons.js +3 -5
- package/dist/RelativeRangePicker/Elements/RangeDropdown/RangeDropdown.js +12 -18
- package/dist/RelativeRangePicker/Elements/TimestampRange/TimestampDuration/TimestampDuration.js +6 -8
- package/dist/RelativeRangePicker/Elements/TimestampRange/TimestampRange.js +29 -45
- package/dist/RelativeRangePicker/RelativeRangePicker.js +28 -69
- package/dist/RelativeRangePicker/RelativeRangePicker.styles.js +4 -8
- package/dist/RelativeRangePicker/utils/findMatchingPreset.utils.js +2 -9
- package/dist/RelativeRangePicker/utils/getCurrentGroupFromProps.utils.js +0 -2
- package/dist/RelativeRangePicker/utils/updatePresetKey.utils.js +0 -7
- package/dist/constants.js +0 -1
- package/dist/dateUtils/Date.js +0 -2
- package/dist/dateUtils/format.js +0 -4
- package/dist/dateUtils/getDateFromString.js +0 -1
- package/dist/dateUtils/getRelativePresetForRange.js +0 -4
- package/dist/dateUtils/relativeToAbsolute.js +2 -6
- package/dist/utils.js +2 -25
- package/package.json +19 -19
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import * as S from './SelectionCount.styles';
|
|
3
|
-
|
|
4
3
|
var SelectionCount = function SelectionCount(_ref) {
|
|
5
4
|
var label = _ref.label,
|
|
6
|
-
|
|
5
|
+
selectedDayCount = _ref.selectedDayCount;
|
|
7
6
|
return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement("span", null, label, ":"), /*#__PURE__*/React.createElement(S.Count, null, selectedDayCount));
|
|
8
7
|
};
|
|
9
|
-
|
|
10
8
|
export default React.memo(SelectionCount);
|
|
@@ -2,14 +2,12 @@ import React from 'react';
|
|
|
2
2
|
import { withTheme } from 'styled-components';
|
|
3
3
|
import Icon, { InfoM } from '@synerise/ds-icon';
|
|
4
4
|
import * as S from '../TimeWindow/TimeWindow.styles';
|
|
5
|
-
|
|
6
5
|
var SelectionHint = function SelectionHint(_ref) {
|
|
7
6
|
var message = _ref.message,
|
|
8
|
-
|
|
7
|
+
theme = _ref.theme;
|
|
9
8
|
return /*#__PURE__*/React.createElement(S.SelectionHint, null, /*#__PURE__*/React.createElement(Icon, {
|
|
10
9
|
component: /*#__PURE__*/React.createElement(InfoM, null),
|
|
11
10
|
color: theme.palette['grey-600']
|
|
12
11
|
}), " ", message);
|
|
13
12
|
};
|
|
14
|
-
|
|
15
13
|
export default withTheme(SelectionHint);
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
var _excluded = ["active", "label", "onToggle", "onClear", "readOnly", "restricted", "dayKey", "texts", "intl"];
|
|
2
|
-
|
|
3
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
-
|
|
5
3
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
import React from 'react';
|
|
5
|
+
// @ts-ignore
|
|
6
|
+
import dayjs from 'dayjs';
|
|
7
|
+
// @ts-ignore
|
|
11
8
|
import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
|
|
12
9
|
import Button from '@synerise/ds-button';
|
|
13
10
|
import Icon, { CheckS, Close3S } from '@synerise/ds-icon';
|
|
@@ -15,23 +12,20 @@ import { theme } from '@synerise/ds-core';
|
|
|
15
12
|
import Tooltip from '@synerise/ds-tooltip';
|
|
16
13
|
import * as S from './Day.styles';
|
|
17
14
|
dayjs.extend(customParseFormatPlugin);
|
|
18
|
-
|
|
19
15
|
var Day = function Day(_ref) {
|
|
20
16
|
var active = _ref.active,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
17
|
+
label = _ref.label,
|
|
18
|
+
onToggle = _ref.onToggle,
|
|
19
|
+
onClear = _ref.onClear,
|
|
20
|
+
readOnly = _ref.readOnly,
|
|
21
|
+
restricted = _ref.restricted,
|
|
22
|
+
dayKey = _ref.dayKey,
|
|
23
|
+
texts = _ref.texts,
|
|
24
|
+
intl = _ref.intl,
|
|
25
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
31
26
|
var _React$useState = React.useState(false),
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
27
|
+
hovered = _React$useState[0],
|
|
28
|
+
setHovered = _React$useState[1];
|
|
35
29
|
var type = React.useMemo(function () {
|
|
36
30
|
return active ? 'primary' : 'secondary';
|
|
37
31
|
}, [active]);
|
|
@@ -79,5 +73,4 @@ var Day = function Day(_ref) {
|
|
|
79
73
|
active: hovered
|
|
80
74
|
}, icon)));
|
|
81
75
|
};
|
|
82
|
-
|
|
83
76
|
export default React.memo(Day);
|
|
@@ -4,22 +4,21 @@ import { Header } from '../Header/Header';
|
|
|
4
4
|
import * as S from '../TimeWindow.styles';
|
|
5
5
|
import { reverseRange } from '../utils';
|
|
6
6
|
import { HeaderWrapper } from '../TimeWindow.styles';
|
|
7
|
-
|
|
8
7
|
var Grid = function Grid(_ref) {
|
|
9
8
|
var keys = _ref.keys,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
9
|
+
numberOfDays = _ref.numberOfDays,
|
|
10
|
+
numberOfDaysPerRow = _ref.numberOfDaysPerRow,
|
|
11
|
+
rowLabelFormatter = _ref.rowLabelFormatter,
|
|
12
|
+
title = _ref.title,
|
|
13
|
+
texts = _ref.texts,
|
|
14
|
+
showSelectAll = _ref.showSelectAll,
|
|
15
|
+
showUnselectAll = _ref.showUnselectAll,
|
|
16
|
+
inverted = _ref.inverted,
|
|
17
|
+
labelInverted = _ref.labelInverted,
|
|
18
|
+
reverseGroup = _ref.reverseGroup,
|
|
19
|
+
onSelectAll = _ref.onSelectAll,
|
|
20
|
+
onUnselectAll = _ref.onUnselectAll,
|
|
21
|
+
renderDay = _ref.renderDay;
|
|
23
22
|
var numberOfColumns = numberOfDaysPerRow || numberOfDays;
|
|
24
23
|
var rangeMethod = labelInverted ? rangeRight : range;
|
|
25
24
|
var actions = [];
|
|
@@ -39,7 +38,6 @@ var Grid = function Grid(_ref) {
|
|
|
39
38
|
}, inverted ? reverseRange(keys, reverseGroup).map(renderDay) : keys.map(renderDay));
|
|
40
39
|
}, [numberOfColumns, inverted, keys, reverseGroup, renderDay]);
|
|
41
40
|
var numberOfRows = Math.ceil(numberOfDays / numberOfColumns);
|
|
42
|
-
|
|
43
41
|
if (rowLabelFormatter) {
|
|
44
42
|
grid = /*#__PURE__*/React.createElement(S.Wrapper, null, /*#__PURE__*/React.createElement(S.Labels, null, rangeMethod(numberOfRows).map(function (rowIndex) {
|
|
45
43
|
return /*#__PURE__*/React.createElement("span", {
|
|
@@ -47,7 +45,6 @@ var Grid = function Grid(_ref) {
|
|
|
47
45
|
}, rowLabelFormatter(rowIndex));
|
|
48
46
|
})), grid);
|
|
49
47
|
}
|
|
50
|
-
|
|
51
48
|
return /*#__PURE__*/React.createElement(S.GridContainer, {
|
|
52
49
|
className: "time-window-grid"
|
|
53
50
|
}, /*#__PURE__*/React.createElement(HeaderWrapper, null, /*#__PURE__*/React.createElement(Header, {
|
|
@@ -55,5 +52,4 @@ var Grid = function Grid(_ref) {
|
|
|
55
52
|
actions: actions
|
|
56
53
|
})), grid);
|
|
57
54
|
};
|
|
58
|
-
|
|
59
55
|
export default Grid;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import * as S from './Header.styles';
|
|
3
|
-
|
|
4
3
|
var HeaderBase = function HeaderBase(_ref) {
|
|
5
4
|
var title = _ref.title,
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
actions = _ref.actions,
|
|
6
|
+
suffix = _ref.suffix;
|
|
8
7
|
return /*#__PURE__*/React.createElement(S.Container, {
|
|
9
8
|
"data-attr": "time-window-header"
|
|
10
9
|
}, /*#__PURE__*/React.createElement(S.Title, {
|
|
@@ -23,5 +22,4 @@ var HeaderBase = function HeaderBase(_ref) {
|
|
|
23
22
|
);
|
|
24
23
|
})), suffix);
|
|
25
24
|
};
|
|
26
|
-
|
|
27
25
|
export var Header = React.memo(HeaderBase);
|
|
@@ -4,12 +4,11 @@ import Icon, { ArrowDownCircleM, CloseM, DuplicateM, OptionHorizontalM } from '@
|
|
|
4
4
|
import Dropdown from '@synerise/ds-dropdown';
|
|
5
5
|
import { theme } from '@synerise/ds-core';
|
|
6
6
|
import * as S from './RangeActions.styles';
|
|
7
|
-
|
|
8
7
|
var RangeActions = function RangeActions(_ref) {
|
|
9
8
|
var texts = _ref.texts,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
onRangeClear = _ref.onRangeClear,
|
|
10
|
+
onRangeCopy = _ref.onRangeCopy,
|
|
11
|
+
onRangePaste = _ref.onRangePaste;
|
|
13
12
|
var overlay = React.useMemo(function () {
|
|
14
13
|
return /*#__PURE__*/React.createElement(S.ActionsMenu, null, /*#__PURE__*/React.createElement(S.ActionItem, {
|
|
15
14
|
onClick: function onClick() {
|
|
@@ -55,5 +54,4 @@ var RangeActions = function RangeActions(_ref) {
|
|
|
55
54
|
}
|
|
56
55
|
}, trigger);
|
|
57
56
|
};
|
|
58
|
-
|
|
59
57
|
export default RangeActions;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
2
|
import React, { useState, useEffect } from 'react';
|
|
4
3
|
import { useIntl } from 'react-intl';
|
|
5
4
|
import dayjs from 'dayjs';
|
|
@@ -12,52 +11,45 @@ import { theme } from '@synerise/ds-core';
|
|
|
12
11
|
import * as S from './RangeForm.styles';
|
|
13
12
|
import { getDisabledTimeOptions } from '../../../../../RangePicker/utils';
|
|
14
13
|
import { FORM_MODES, RANGE_DISPLAY_MODES, RANGE_FORM_INTL_KEYS, SLIDER_MIN, SLIDER_MAX, SLIDER_STEP } from './RangeForm.constants';
|
|
15
|
-
import { numberToDate, dateToNumber } from './RangeForm.utils';
|
|
14
|
+
import { numberToDate, dateToNumber } from './RangeForm.utils';
|
|
16
15
|
|
|
16
|
+
// @deprecated, moved to ./RangeForm.constants
|
|
17
17
|
export { FORM_MODES, RANGE_FORM_INTL_KEYS };
|
|
18
|
-
|
|
19
18
|
var RangeForm = function RangeForm(_ref) {
|
|
20
19
|
var onModeChange = _ref.onModeChange,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
20
|
+
disabled = _ref.disabled,
|
|
21
|
+
startDate = _ref.startDate,
|
|
22
|
+
endDate = _ref.endDate,
|
|
23
|
+
onStartChange = _ref.onStartChange,
|
|
24
|
+
onEndChange = _ref.onEndChange,
|
|
25
|
+
onExactHourSelect = _ref.onExactHourSelect,
|
|
26
|
+
onRangeDelete = _ref.onRangeDelete,
|
|
27
|
+
_ref$valueSelectionMo = _ref.valueSelectionModes,
|
|
28
|
+
valueSelectionModes = _ref$valueSelectionMo === void 0 ? [FORM_MODES.RANGE, FORM_MODES.HOUR] : _ref$valueSelectionMo,
|
|
29
|
+
_ref$mode = _ref.mode,
|
|
30
|
+
mode = _ref$mode === void 0 ? valueSelectionModes[0] : _ref$mode,
|
|
31
|
+
_ref$rangeDisplayMode = _ref.rangeDisplayMode,
|
|
32
|
+
rangeDisplayMode = _ref$rangeDisplayMode === void 0 ? RANGE_DISPLAY_MODES.TIMEPICKER : _ref$rangeDisplayMode,
|
|
33
|
+
isInvertedRange = _ref.isInvertedRange,
|
|
34
|
+
timePickerProps = _ref.timePickerProps,
|
|
35
|
+
texts = _ref.texts,
|
|
36
|
+
valueFormatOptions = _ref.valueFormatOptions,
|
|
37
|
+
errorTexts = _ref.errorTexts;
|
|
40
38
|
var _useDataFormat = useDataFormat(),
|
|
41
|
-
|
|
42
|
-
|
|
39
|
+
is12HoursClock = _useDataFormat.is12HoursClock;
|
|
43
40
|
var intl = useIntl();
|
|
44
|
-
|
|
45
41
|
var _useState = useState(startDate),
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
42
|
+
start = _useState[0],
|
|
43
|
+
setStart = _useState[1];
|
|
49
44
|
var _useState2 = useState(endDate),
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
45
|
+
end = _useState2[0],
|
|
46
|
+
setEnd = _useState2[1];
|
|
53
47
|
var _useState3 = useState(startDate ? dateToNumber(startDate) : SLIDER_MIN),
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
48
|
+
sliderStart = _useState3[0],
|
|
49
|
+
setSliderStart = _useState3[1];
|
|
57
50
|
var _useState4 = useState(endDate ? dateToNumber(endDate) : SLIDER_MAX),
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
51
|
+
sliderEnd = _useState4[0],
|
|
52
|
+
setSliderEnd = _useState4[1];
|
|
61
53
|
useEffect(function () {
|
|
62
54
|
if (rangeDisplayMode !== RANGE_DISPLAY_MODES.SLIDER) {
|
|
63
55
|
setStart(startDate);
|
|
@@ -67,14 +59,11 @@ var RangeForm = function RangeForm(_ref) {
|
|
|
67
59
|
setSliderEnd(endDate ? dateToNumber(endDate) : SLIDER_MAX);
|
|
68
60
|
}
|
|
69
61
|
}, [rangeDisplayMode, startDate, endDate]);
|
|
70
|
-
|
|
71
62
|
var getPopupContainer = function getPopupContainer(node) {
|
|
72
63
|
return node.parentElement != null ? node.parentElement : document.body;
|
|
73
64
|
};
|
|
74
|
-
|
|
75
65
|
var errorForFirstItem = (errorTexts == null ? void 0 : errorTexts.length) && errorTexts[0];
|
|
76
66
|
var errorForSecondItem = (errorTexts == null ? void 0 : errorTexts.length) && errorTexts[1];
|
|
77
|
-
|
|
78
67
|
var singleHourPicker = function singleHourPicker() {
|
|
79
68
|
return /*#__PURE__*/React.createElement(TimePicker, _extends({
|
|
80
69
|
errorText: errorForFirstItem,
|
|
@@ -93,15 +82,12 @@ var RangeForm = function RangeForm(_ref) {
|
|
|
93
82
|
valueFormatOptions: valueFormatOptions
|
|
94
83
|
}, timePickerProps));
|
|
95
84
|
};
|
|
96
|
-
|
|
97
85
|
var timeFormatByClockMode = is12HoursClock ? 'hh:mm A' : 'HH:mm';
|
|
98
|
-
|
|
99
86
|
var tipFormatter = function tipFormatter(value) {
|
|
100
87
|
if (value === undefined) return null;
|
|
101
88
|
var valueAsDate = numberToDate(value, SLIDER_MAX);
|
|
102
89
|
return dayjs(valueAsDate).format(timeFormatByClockMode);
|
|
103
90
|
};
|
|
104
|
-
|
|
105
91
|
var renderRangeSlider = function renderRangeSlider() {
|
|
106
92
|
var handleSliderChange = function handleSliderChange(range) {
|
|
107
93
|
if (range[0] !== sliderStart) {
|
|
@@ -110,13 +96,11 @@ var RangeForm = function RangeForm(_ref) {
|
|
|
110
96
|
setSliderEnd(range[1]);
|
|
111
97
|
}
|
|
112
98
|
};
|
|
113
|
-
|
|
114
99
|
var handleSliderAfterChange = function handleSliderAfterChange(range) {
|
|
115
100
|
var currentStartDateAsNumber = startDate ? dateToNumber(startDate) : SLIDER_MIN;
|
|
116
101
|
var currentEndDateAsNumber = endDate ? dateToNumber(endDate) : SLIDER_MAX;
|
|
117
102
|
var newStartDate = numberToDate(range[0], SLIDER_MAX, true);
|
|
118
103
|
var newEndDate = numberToDate(range[1], SLIDER_MAX);
|
|
119
|
-
|
|
120
104
|
if (range[0] !== currentStartDateAsNumber) {
|
|
121
105
|
setSliderStart(range[0]);
|
|
122
106
|
onStartChange(newStartDate);
|
|
@@ -125,7 +109,6 @@ var RangeForm = function RangeForm(_ref) {
|
|
|
125
109
|
onEndChange(newEndDate);
|
|
126
110
|
}
|
|
127
111
|
};
|
|
128
|
-
|
|
129
112
|
return /*#__PURE__*/React.createElement(Slider, {
|
|
130
113
|
range: true,
|
|
131
114
|
min: SLIDER_MIN,
|
|
@@ -143,7 +126,6 @@ var RangeForm = function RangeForm(_ref) {
|
|
|
143
126
|
tipFormatter: tipFormatter
|
|
144
127
|
});
|
|
145
128
|
};
|
|
146
|
-
|
|
147
129
|
var renderRangePicker = function renderRangePicker() {
|
|
148
130
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimePicker, _extends({
|
|
149
131
|
errorText: errorForFirstItem,
|
|
@@ -180,20 +162,16 @@ var RangeForm = function RangeForm(_ref) {
|
|
|
180
162
|
use12HourClock: is12HoursClock
|
|
181
163
|
}, timePickerProps)));
|
|
182
164
|
};
|
|
183
|
-
|
|
184
165
|
var renderRangeUI = function renderRangeUI() {
|
|
185
166
|
if (rangeDisplayMode === RANGE_DISPLAY_MODES.SLIDER) {
|
|
186
167
|
return renderRangeSlider();
|
|
187
168
|
}
|
|
188
|
-
|
|
189
169
|
return renderRangePicker();
|
|
190
170
|
};
|
|
191
|
-
|
|
192
171
|
var getModeLabel = function getModeLabel(modeName) {
|
|
193
172
|
if (texts[modeName.toLocaleLowerCase()]) return texts[modeName.toLocaleLowerCase()];
|
|
194
173
|
return intl.formatMessage(RANGE_FORM_INTL_KEYS[modeName]);
|
|
195
174
|
};
|
|
196
|
-
|
|
197
175
|
var limitModeSelect = function limitModeSelect() {
|
|
198
176
|
return valueSelectionModes.length > 1 ? /*#__PURE__*/React.createElement(Select, {
|
|
199
177
|
value: mode,
|
|
@@ -209,7 +187,6 @@ var RangeForm = function RangeForm(_ref) {
|
|
|
209
187
|
}, getModeLabel(modeName));
|
|
210
188
|
})) : null;
|
|
211
189
|
};
|
|
212
|
-
|
|
213
190
|
return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.Row, {
|
|
214
191
|
justifyContent: "flex-start",
|
|
215
192
|
mode: rangeDisplayMode
|
|
@@ -220,5 +197,4 @@ var RangeForm = function RangeForm(_ref) {
|
|
|
220
197
|
color: theme.palette['red-600']
|
|
221
198
|
}))));
|
|
222
199
|
};
|
|
223
|
-
|
|
224
200
|
export default RangeForm;
|
|
@@ -5,7 +5,6 @@ export var numberToDate = function numberToDate(number, max, isRangeStart) {
|
|
|
5
5
|
if (number === max) {
|
|
6
6
|
return dayjs().endOf('day').toDate();
|
|
7
7
|
}
|
|
8
|
-
|
|
9
8
|
var hours = Math.floor(number);
|
|
10
9
|
var minutes = 60 * (number % 1);
|
|
11
10
|
var result = dayjs().hour(hours).minute(minutes).toDate();
|
|
@@ -1,13 +1,8 @@
|
|
|
1
1
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
-
|
|
3
2
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
|
|
5
3
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
-
|
|
7
4
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
8
|
-
|
|
9
5
|
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
10
|
-
|
|
11
6
|
import React from 'react';
|
|
12
7
|
import RangeForm from './RangeForm/RangeForm';
|
|
13
8
|
import { RANGE_DISPLAY_MODES } from './RangeForm/RangeForm.constants';
|
|
@@ -17,48 +12,44 @@ import RangeSummary from '../RangeSummary/RangeSummary';
|
|
|
17
12
|
import RangeActions from '../RangeActions/RangeActions';
|
|
18
13
|
import { DEFAULT_LIMIT_MODE } from '../TimeWindow';
|
|
19
14
|
import * as S from './RangeFormContainer.styles';
|
|
20
|
-
|
|
21
15
|
var RangeFormContainer = function RangeFormContainer(_ref) {
|
|
22
16
|
var errorTexts = _ref.errorTexts,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
17
|
+
activeDays = _ref.activeDays,
|
|
18
|
+
disabled = _ref.disabled,
|
|
19
|
+
days = _ref.days,
|
|
20
|
+
dayKeys = _ref.dayKeys,
|
|
21
|
+
getDayValue = _ref.getDayValue,
|
|
22
|
+
getDayLabel = _ref.getDayLabel,
|
|
23
|
+
onDayTimeChange = _ref.onDayTimeChange,
|
|
24
|
+
onMultipleDayTimeChange = _ref.onMultipleDayTimeChange,
|
|
25
|
+
hideHeader = _ref.hideHeader,
|
|
26
|
+
_ref$headerOptions = _ref.headerOptions,
|
|
27
|
+
headerOptions = _ref$headerOptions === void 0 ? {} : _ref$headerOptions,
|
|
28
|
+
monthlyFilter = _ref.monthlyFilter,
|
|
29
|
+
monthlyFilterPeriod = _ref.monthlyFilterPeriod,
|
|
30
|
+
onRangeClear = _ref.onRangeClear,
|
|
31
|
+
onRangePaste = _ref.onRangePaste,
|
|
32
|
+
onRangeCopy = _ref.onRangeCopy,
|
|
33
|
+
onRangeDelete = _ref.onRangeDelete,
|
|
34
|
+
texts = _ref.texts,
|
|
35
|
+
onChange = _ref.onChange,
|
|
36
|
+
_ref$valueSelectionMo = _ref.valueSelectionModes,
|
|
37
|
+
valueSelectionModes = _ref$valueSelectionMo === void 0 ? ['Range', 'Hour'] : _ref$valueSelectionMo,
|
|
38
|
+
rangeDisplayMode = _ref.rangeDisplayMode,
|
|
39
|
+
onModeChange = _ref.onModeChange,
|
|
40
|
+
timePickerProps = _ref.timePickerProps,
|
|
41
|
+
renderSuffix = _ref.renderSuffix,
|
|
42
|
+
timeFormat = _ref.timeFormat,
|
|
43
|
+
valueFormatOptions = _ref.valueFormatOptions;
|
|
50
44
|
var dayValue = getDayValue(activeDays[0]);
|
|
51
|
-
|
|
52
45
|
var _React$useState = React.useState((dayValue == null ? void 0 : dayValue.mode) || valueSelectionModes[0] || DEFAULT_LIMIT_MODE),
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
46
|
+
mode = _React$useState[0],
|
|
47
|
+
setMode = _React$useState[1];
|
|
56
48
|
var handleModeChange = React.useCallback(function (selectedMode) {
|
|
57
49
|
if (onModeChange) {
|
|
58
50
|
onModeChange(selectedMode);
|
|
59
51
|
return;
|
|
60
52
|
}
|
|
61
|
-
|
|
62
53
|
var updatedDays = {};
|
|
63
54
|
activeDays.forEach(function (i) {
|
|
64
55
|
updatedDays[i] = _objectSpread({}, days[i], {}, getDefaultFilterForLimitMode(selectedMode), {
|
|
@@ -73,9 +64,8 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
|
|
|
73
64
|
var onStartChange = React.useCallback(function (start) {
|
|
74
65
|
var dayVal = getDayValue(activeDays[0]);
|
|
75
66
|
var inverted = dayVal.inverted,
|
|
76
|
-
|
|
67
|
+
end = dayVal.stop;
|
|
77
68
|
var value = [start, end ? getDateFromDayValue(end, timeFormat) : undefined, Boolean(inverted)];
|
|
78
|
-
|
|
79
69
|
if (activeDays.length > 1) {
|
|
80
70
|
onMultipleDayTimeChange(value);
|
|
81
71
|
} else {
|
|
@@ -85,9 +75,8 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
|
|
|
85
75
|
var onEndChange = React.useCallback(function (end) {
|
|
86
76
|
var dayVal = getDayValue(activeDays[0]);
|
|
87
77
|
var start = dayVal.start,
|
|
88
|
-
|
|
78
|
+
inverted = dayVal.inverted;
|
|
89
79
|
var value = [start ? getDateFromDayValue(start, timeFormat) : undefined, end, Boolean(inverted)];
|
|
90
|
-
|
|
91
80
|
if (activeDays.length > 1) {
|
|
92
81
|
onMultipleDayTimeChange(value);
|
|
93
82
|
} else {
|
|
@@ -97,10 +86,9 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
|
|
|
97
86
|
var toggleInverted = React.useCallback(function () {
|
|
98
87
|
var dayVal = getDayValue(activeDays[0]);
|
|
99
88
|
var start = dayVal.start,
|
|
100
|
-
|
|
101
|
-
|
|
89
|
+
inverted = dayVal.inverted,
|
|
90
|
+
end = dayVal.stop;
|
|
102
91
|
var value = [start ? getDateFromDayValue(start, timeFormat) : undefined, end ? getDateFromDayValue(end, timeFormat) : undefined, Boolean(!inverted)];
|
|
103
|
-
|
|
104
92
|
if (activeDays.length > 1) {
|
|
105
93
|
onMultipleDayTimeChange(value);
|
|
106
94
|
} else {
|
|
@@ -144,7 +132,7 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
|
|
|
144
132
|
}, [texts.inverseSelection, toggleInverted]);
|
|
145
133
|
var suffix = React.useMemo(function () {
|
|
146
134
|
var _headerOptions$includ = headerOptions.includeActions,
|
|
147
|
-
|
|
135
|
+
includeActions = _headerOptions$includ === void 0 ? true : _headerOptions$includ;
|
|
148
136
|
return renderSuffix ? renderSuffix() : /*#__PURE__*/React.createElement(React.Fragment, null, rangeDisplayMode === RANGE_DISPLAY_MODES.SLIDER && invertedToggleLink, includeActions && /*#__PURE__*/React.createElement(RangeActions, {
|
|
149
137
|
onRangeClear: onRangeClear,
|
|
150
138
|
onRangeCopy: onRangeCopy,
|
|
@@ -154,7 +142,7 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
|
|
|
154
142
|
}, [onRangePaste, onRangeClear, onRangeCopy, texts, renderSuffix, rangeDisplayMode, invertedToggleLink, headerOptions]);
|
|
155
143
|
if (hideHeader) return rangeForm;
|
|
156
144
|
var _headerOptions$includ2 = headerOptions.includeSummary,
|
|
157
|
-
|
|
145
|
+
includeSummary = _headerOptions$includ2 === void 0 ? true : _headerOptions$includ2;
|
|
158
146
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
|
|
159
147
|
title: includeSummary && /*#__PURE__*/React.createElement(RangeSummary, {
|
|
160
148
|
dayKeys: dayKeys,
|
|
@@ -166,5 +154,4 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
|
|
|
166
154
|
suffix: suffix
|
|
167
155
|
}), rangeForm);
|
|
168
156
|
};
|
|
169
|
-
|
|
170
157
|
export default RangeFormContainer;
|
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import * as S from './RangeSummary.styles';
|
|
3
3
|
import { SPACE_UNICODE } from '../../../constants';
|
|
4
|
-
|
|
5
4
|
var RangeSummary = function RangeSummary(_ref) {
|
|
6
5
|
var dayKeys = _ref.dayKeys,
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
getDayLabel = _ref.getDayLabel,
|
|
7
|
+
monthlyFilterPeriod = _ref.monthlyFilterPeriod,
|
|
8
|
+
monthlyFilter = _ref.monthlyFilter,
|
|
9
|
+
texts = _ref.texts;
|
|
11
10
|
var daysToDisplay = React.useMemo(function () {
|
|
12
11
|
if (monthlyFilter && dayKeys.length > 1) {
|
|
13
12
|
return /*#__PURE__*/React.createElement(S.DayShortname, null, "Days");
|
|
14
13
|
}
|
|
15
|
-
|
|
16
14
|
return dayKeys.map(function (k, index) {
|
|
17
15
|
return /*#__PURE__*/React.createElement(S.DayShortname, {
|
|
18
16
|
key: k
|
|
@@ -21,5 +19,4 @@ var RangeSummary = function RangeSummary(_ref) {
|
|
|
21
19
|
}, [dayKeys, getDayLabel, monthlyFilter, monthlyFilterPeriod]);
|
|
22
20
|
return /*#__PURE__*/React.createElement(S.TitleWrapper, null, texts.setTimeFor, SPACE_UNICODE, daysToDisplay);
|
|
23
21
|
};
|
|
24
|
-
|
|
25
22
|
export default RangeSummary;
|