@synerise/ds-date-range-picker 0.21.7 → 0.21.9
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 +21 -0
- package/dist/RelativeRangePicker/Elements/CustomRangeForm/CustomRangeForm.js +0 -1
- package/dist/RelativeRangePicker/Elements/TimestampRange/TimestampDuration/TimestampDuration.types.d.ts +0 -1
- package/dist/RelativeRangePicker/Elements/TimestampRange/TimestampRange.js +18 -63
- package/dist/RelativeRangePicker/Elements/TimestampRange/TimestampRange.types.d.ts +0 -1
- package/dist/RelativeRangePicker/RelativeRangePicker.js +27 -14
- package/dist/RelativeRangePicker/RelativeRangePicker.types.d.ts +1 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,27 @@
|
|
|
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.21.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.21.8...@synerise/ds-date-range-picker@0.21.9) (2023-05-25)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-date-range-picker
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.21.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.21.7...@synerise/ds-date-range-picker@0.21.8) (2023-05-23)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **date-range-picker:** fixes custom range values persistance ([0252358](https://github.com/Synerise/synerise-design/commit/025235894be3633e975144765f9c97ab91a55d9d))
|
|
20
|
+
* **date-range-picker:** fixes mode button resetting values ([3499e88](https://github.com/Synerise/synerise-design/commit/3499e8882787b21d5b3aa4839fae6c167fc5a024))
|
|
21
|
+
* **date-range-picker:** revert to not rendering closed addon ([5414e4f](https://github.com/Synerise/synerise-design/commit/5414e4f877f08ef50d3622ef059e250845cd9491))
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
6
27
|
## [0.21.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.21.6...@synerise/ds-date-range-picker@0.21.7) (2023-05-20)
|
|
7
28
|
|
|
8
29
|
**Note:** Version bump only for package @synerise/ds-date-range-picker
|
|
@@ -50,7 +50,6 @@ var CustomRangeForm = function CustomRangeForm(_ref) {
|
|
|
50
50
|
return /*#__PURE__*/React.createElement(S.RangeFormColumn, null, /*#__PURE__*/React.createElement(TimestampRange, {
|
|
51
51
|
handleModeChange: handleModeChange,
|
|
52
52
|
currentRange: currentRange,
|
|
53
|
-
currentGroup: currentGroup,
|
|
54
53
|
handleChange: handleChange,
|
|
55
54
|
onTimestampChange: handleTimestampChange,
|
|
56
55
|
timestamp: timestamp,
|
|
@@ -2,7 +2,6 @@ import { RelativeDateRange } from '../../../../date.types';
|
|
|
2
2
|
import { Texts } from '../../../../DateRangePicker.types';
|
|
3
3
|
export declare type Props = {
|
|
4
4
|
currentRange: RelativeDateRange;
|
|
5
|
-
currentGroup: string | null;
|
|
6
5
|
handleDurationValueChange: (value?: string | number) => void;
|
|
7
6
|
onDurationModifierChange: (modifier: string) => void;
|
|
8
7
|
durationModifier: string;
|
|
@@ -9,19 +9,13 @@ import * as React from 'react';
|
|
|
9
9
|
import { DatePicker } from '@synerise/ds-date-picker';
|
|
10
10
|
import * as S from '../../RelativeRangePicker.styles';
|
|
11
11
|
import TimestampDuration from './TimestampDuration/TimestampDuration';
|
|
12
|
-
import
|
|
13
|
-
import START_OF from '../../../dateUtils/startOf';
|
|
14
|
-
import END_OF from '../../../dateUtils/endOf';
|
|
15
|
-
import DIFFERENCE from '../../../dateUtils/difference';
|
|
16
|
-
import { DURATION_MODIFIERS } from '../../../constants';
|
|
17
|
-
import { fnsIsAfter } from '../../../fns';
|
|
12
|
+
import { CUSTOM_RANGE_KEY, DURATION_MODIFIERS } from '../../../constants';
|
|
18
13
|
import { DEFAULT_RANGE } from '../../../utils';
|
|
19
14
|
|
|
20
15
|
var TimestampRange = function TimestampRange(_ref) {
|
|
21
16
|
var _currentRange$duratio, _currentRange$duratio2;
|
|
22
17
|
|
|
23
18
|
var currentRange = _ref.currentRange,
|
|
24
|
-
currentGroup = _ref.currentGroup,
|
|
25
19
|
handleChange = _ref.handleChange,
|
|
26
20
|
texts = _ref.texts,
|
|
27
21
|
onTimestampChange = _ref.onTimestampChange,
|
|
@@ -36,12 +30,13 @@ var TimestampRange = function TimestampRange(_ref) {
|
|
|
36
30
|
duration: {
|
|
37
31
|
type: 'DAYS',
|
|
38
32
|
value: 30
|
|
39
|
-
}
|
|
33
|
+
},
|
|
34
|
+
translationKey: CUSTOM_RANGE_KEY
|
|
40
35
|
});
|
|
41
36
|
} : _ref$getValueOnReset,
|
|
42
37
|
timestamp = _ref.timestamp;
|
|
43
38
|
|
|
44
|
-
var _React$useState = React.useState(DURATION_MODIFIERS.LAST),
|
|
39
|
+
var _React$useState = React.useState(currentRange != null && currentRange.future ? DURATION_MODIFIERS.NEXT : DURATION_MODIFIERS.LAST),
|
|
45
40
|
durationModifier = _React$useState[0],
|
|
46
41
|
setDurationModifier = _React$useState[1];
|
|
47
42
|
|
|
@@ -63,59 +58,20 @@ var TimestampRange = function TimestampRange(_ref) {
|
|
|
63
58
|
|
|
64
59
|
var handleRangeChange = function handleRangeChange(date, duration) {
|
|
65
60
|
if (date) {
|
|
66
|
-
var
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
value: timestamp
|
|
81
|
-
},
|
|
82
|
-
key: undefined
|
|
83
|
-
};
|
|
84
|
-
} else if (durationModifier === DURATION_MODIFIERS.NEXT) {
|
|
85
|
-
rangeStart = END_OF[duration.type](ADD[duration.type](date, -Number(future)));
|
|
86
|
-
newOffset = DIFFERENCE[duration.type](NOW, rangeStart);
|
|
87
|
-
offsetToTimestamp = _objectSpread({
|
|
88
|
-
future: true
|
|
89
|
-
}, currentRange, {
|
|
90
|
-
duration: {
|
|
91
|
-
type: duration.type,
|
|
92
|
-
value: duration.value
|
|
93
|
-
},
|
|
94
|
-
offset: {
|
|
95
|
-
type: duration.type,
|
|
96
|
-
value: newOffset - duration.value
|
|
97
|
-
},
|
|
98
|
-
key: undefined
|
|
99
|
-
});
|
|
100
|
-
} else if (durationModifier === DURATION_MODIFIERS.LAST) {
|
|
101
|
-
rangeStart = START_OF[duration.type](ADD[duration.type](date, -Number(future)));
|
|
102
|
-
newOffset = DIFFERENCE[duration.type](NOW, rangeStart);
|
|
103
|
-
offsetToTimestamp = _objectSpread({
|
|
104
|
-
future: false
|
|
105
|
-
}, currentRange, {
|
|
106
|
-
duration: {
|
|
107
|
-
type: duration.type,
|
|
108
|
-
value: duration.value
|
|
109
|
-
},
|
|
110
|
-
offset: {
|
|
111
|
-
type: duration.type,
|
|
112
|
-
value: newOffset
|
|
113
|
-
},
|
|
114
|
-
key: undefined
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
offsetToTimestamp && handleChange(offsetToTimestamp); // FIXME
|
|
61
|
+
var offsetToTimestamp = {
|
|
62
|
+
future: durationModifier === DURATION_MODIFIERS.NEXT,
|
|
63
|
+
duration: {
|
|
64
|
+
type: duration.type,
|
|
65
|
+
value: duration.value
|
|
66
|
+
},
|
|
67
|
+
offset: {
|
|
68
|
+
type: 'SINCE',
|
|
69
|
+
value: timestamp
|
|
70
|
+
},
|
|
71
|
+
key: undefined,
|
|
72
|
+
translationKey: CUSTOM_RANGE_KEY
|
|
73
|
+
};
|
|
74
|
+
handleChange(offsetToTimestamp); // FIXME
|
|
119
75
|
}
|
|
120
76
|
};
|
|
121
77
|
|
|
@@ -165,7 +121,6 @@ var TimestampRange = function TimestampRange(_ref) {
|
|
|
165
121
|
|
|
166
122
|
return /*#__PURE__*/React.createElement(S.RangeFormColumn, null, renderDatePicker(), /*#__PURE__*/React.createElement(TimestampDuration, {
|
|
167
123
|
currentRange: currentRange,
|
|
168
|
-
currentGroup: currentGroup,
|
|
169
124
|
value: durationValue,
|
|
170
125
|
handleDurationValueChange: function handleDurationValueChange(val) {
|
|
171
126
|
val && setDurationValue(Number(val));
|
|
@@ -2,7 +2,6 @@ import { RelativeDateRange } from '../../../date.types';
|
|
|
2
2
|
import { RelativeMode, Texts } from '../../../DateRangePicker.types';
|
|
3
3
|
export declare type TimestampRangeProps = {
|
|
4
4
|
currentRange: RelativeDateRange;
|
|
5
|
-
currentGroup: string | null;
|
|
6
5
|
handleChange: (value: RelativeDateRange) => void;
|
|
7
6
|
handleModeChange: (mode: RelativeMode | null) => void;
|
|
8
7
|
onTimestampChange?: (timestamp: Date | undefined) => void;
|
|
@@ -32,11 +32,18 @@ var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
32
32
|
// eslint-disable-next-line
|
|
33
33
|
|
|
34
34
|
_defineProperty(_assertThisInitialized(_this), "onModeChange", function (mode) {
|
|
35
|
-
_this.
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
35
|
+
var currentGroup = _this.state.currentGroup;
|
|
36
|
+
|
|
37
|
+
if (mode !== currentGroup) {
|
|
38
|
+
_this.setState({
|
|
39
|
+
currentGroup: mode,
|
|
40
|
+
lastCustomRange: undefined,
|
|
41
|
+
sinceTimestamp: new Date()
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
var onChange = _this.props.onChange;
|
|
45
|
+
onChange(DEFAULT_RANGE);
|
|
46
|
+
}
|
|
40
47
|
});
|
|
41
48
|
|
|
42
49
|
_defineProperty(_assertThisInitialized(_this), "onTimestampChange", function (timestamp) {
|
|
@@ -57,15 +64,13 @@ var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
57
64
|
_defineProperty(_assertThisInitialized(_this), "handleCustomClick", function () {
|
|
58
65
|
var onChange = _this.props.onChange;
|
|
59
66
|
var _this$state = _this.state,
|
|
60
|
-
|
|
61
|
-
|
|
67
|
+
lastCustomRange = _this$state.lastCustomRange,
|
|
68
|
+
currentGroup = _this$state.currentGroup;
|
|
62
69
|
|
|
63
|
-
if (
|
|
64
|
-
onChange(_objectSpread({},
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
translationKey: CUSTOM_RANGE_KEY
|
|
68
|
-
})); // FIXME: make currentGroup rely on value rather than state
|
|
70
|
+
if (lastCustomRange && lastCustomRange.translationKey === CUSTOM_RANGE_KEY) {
|
|
71
|
+
onChange(_objectSpread({}, lastCustomRange, {
|
|
72
|
+
key: undefined
|
|
73
|
+
}));
|
|
69
74
|
} else {
|
|
70
75
|
var sourceRange = getDefaultCustomRange(currentGroup);
|
|
71
76
|
onChange(_objectSpread({}, sourceRange, {
|
|
@@ -86,7 +91,15 @@ var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
86
91
|
}); // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
87
92
|
|
|
88
93
|
|
|
89
|
-
|
|
94
|
+
var resultRange = normalizeRange(changes);
|
|
95
|
+
|
|
96
|
+
if ((resultRange == null ? void 0 : resultRange.translationKey) === CUSTOM_RANGE_KEY) {
|
|
97
|
+
_this.setState({
|
|
98
|
+
lastCustomRange: resultRange
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
onChange(resultRange);
|
|
90
103
|
});
|
|
91
104
|
|
|
92
105
|
_defineProperty(_assertThisInitialized(_this), "renderRanges", function (ranges) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-date-range-picker",
|
|
3
|
-
"version": "0.21.
|
|
3
|
+
"version": "0.21.9",
|
|
4
4
|
"description": "Date-Range-Picker UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
"types": "dist/index.d.ts",
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@date-fns/upgrade": "^1.0.3",
|
|
36
|
-
"@synerise/ds-button": "^0.17.
|
|
37
|
-
"@synerise/ds-date-picker": "^0.
|
|
36
|
+
"@synerise/ds-button": "^0.17.16",
|
|
37
|
+
"@synerise/ds-date-picker": "^0.10.0",
|
|
38
38
|
"@synerise/ds-icon": "^0.56.0",
|
|
39
|
-
"@synerise/ds-manageable-list": "^0.25.
|
|
40
|
-
"@synerise/ds-time-picker": "^0.7.
|
|
41
|
-
"@synerise/ds-tooltip": "^0.13.
|
|
39
|
+
"@synerise/ds-manageable-list": "^0.25.5",
|
|
40
|
+
"@synerise/ds-time-picker": "^0.7.9",
|
|
41
|
+
"@synerise/ds-tooltip": "^0.13.4",
|
|
42
42
|
"@synerise/ds-utils": "^0.19.0",
|
|
43
43
|
"date-fns": "^2.16.1",
|
|
44
44
|
"dayjs": "^1.8.35",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@types/ramda": "^0.27.14"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "6de508bd1e3f2c816ffdf413d7eadb762fb20890"
|
|
58
58
|
}
|