@synerise/ds-date-range-picker 0.26.12 → 0.26.13
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/dist/DateRangePicker.d.ts +1 -2
- package/dist/DateRangePicker.js +43 -15
- package/dist/DateRangePicker.styles.d.ts +5 -0
- package/dist/DateRangePicker.styles.js +33 -8
- package/dist/DateRangePicker.types.d.ts +1 -0
- package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.js +1 -2
- package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.styles.d.ts +388 -0
- package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.styles.js +10 -5
- package/dist/RawDateRangePicker.d.ts +1 -0
- package/dist/RawDateRangePicker.js +70 -56
- package/dist/style/index.css +1 -1
- package/package.json +2 -2
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.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.26.12...@synerise/ds-date-range-picker@0.26.13) (2024-03-04)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **date-range-picker:** popup jumping fix - transparency workaround ([fccbeb6](https://github.com/Synerise/synerise-design/commit/fccbeb6db40b013956a1ac8a311df1a4be8ebdf2))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [0.26.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.26.11...@synerise/ds-date-range-picker@0.26.12) (2024-02-23)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import './style/index.less';
|
|
3
2
|
import RawDateRangePicker from './RawDateRangePicker';
|
|
4
3
|
import { DateRangePickerProps } from './DateRangePicker.types';
|
|
5
|
-
declare const DateRangePicker:
|
|
4
|
+
declare const DateRangePicker: (props: DateRangePickerProps) => JSX.Element;
|
|
6
5
|
export default DateRangePicker;
|
|
7
6
|
export { RawDateRangePicker };
|
package/dist/DateRangePicker.js
CHANGED
|
@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
6
6
|
|
|
7
7
|
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; }
|
|
8
8
|
|
|
9
|
-
import
|
|
9
|
+
import React, { useCallback, useState, useRef, useMemo, useEffect } from 'react';
|
|
10
10
|
import { isEqual } from 'lodash';
|
|
11
11
|
import "./style/index.css";
|
|
12
12
|
import { useIntl } from 'react-intl';
|
|
@@ -41,33 +41,58 @@ var DateRangePicker = function DateRangePicker(props) {
|
|
|
41
41
|
var intl = useIntl();
|
|
42
42
|
var selectedRange = value || defaultValue;
|
|
43
43
|
|
|
44
|
-
var
|
|
45
|
-
popupVisible =
|
|
46
|
-
setPopupVisible =
|
|
44
|
+
var _useState = useState(false),
|
|
45
|
+
popupVisible = _useState[0],
|
|
46
|
+
setPopupVisible = _useState[1];
|
|
47
47
|
|
|
48
|
-
var
|
|
49
|
-
selectedDate =
|
|
50
|
-
setSelectedDate =
|
|
48
|
+
var _useState2 = useState(selectedRange),
|
|
49
|
+
selectedDate = _useState2[0],
|
|
50
|
+
setSelectedDate = _useState2[1];
|
|
51
51
|
|
|
52
|
-
var
|
|
53
|
-
inputActive =
|
|
54
|
-
setInputActive =
|
|
52
|
+
var _useState3 = useState(),
|
|
53
|
+
inputActive = _useState3[0],
|
|
54
|
+
setInputActive = _useState3[1];
|
|
55
55
|
|
|
56
|
-
var
|
|
56
|
+
var _useState4 = useState(true),
|
|
57
|
+
isTopAligned = _useState4[0],
|
|
58
|
+
setIsTopAligned = _useState4[1];
|
|
59
|
+
|
|
60
|
+
var wrapperRef = useRef(null);
|
|
61
|
+
var allTexts = useMemo(function () {
|
|
57
62
|
return getDefaultTexts(intl, disableDefaultTexts, texts);
|
|
58
63
|
}, [texts, disableDefaultTexts, intl]);
|
|
59
|
-
|
|
64
|
+
useEffect(function () {
|
|
60
65
|
if (popupVisible !== undefined) {
|
|
61
66
|
setPopupVisible(undefined);
|
|
62
67
|
}
|
|
63
68
|
}, [popupVisible]);
|
|
64
|
-
|
|
69
|
+
useEffect(function () {
|
|
65
70
|
if (!isEqual(selectedRange, selectedDate)) {
|
|
66
71
|
setSelectedDate(selectedRange);
|
|
67
72
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
68
73
|
|
|
69
74
|
}, [selectedRange]);
|
|
70
|
-
var
|
|
75
|
+
var checkContentAlignement = useCallback(function () {
|
|
76
|
+
if (wrapperRef.current) {
|
|
77
|
+
var popoverDomElement = wrapperRef.current.querySelector('.ds-date-range-popover');
|
|
78
|
+
|
|
79
|
+
if (popoverDomElement) {
|
|
80
|
+
var _placementClassName$s;
|
|
81
|
+
|
|
82
|
+
var classNames = Array.from(popoverDomElement.classList);
|
|
83
|
+
var placementClassName = classNames.find(function (className) {
|
|
84
|
+
return className.startsWith('ant-popover-placement-');
|
|
85
|
+
});
|
|
86
|
+
var placement = placementClassName && ((_placementClassName$s = placementClassName.split('-').pop()) == null ? void 0 : _placementClassName$s.toLocaleLowerCase());
|
|
87
|
+
var topAligned = (placement == null ? void 0 : placement.indexOf('bottom')) === -1;
|
|
88
|
+
setIsTopAligned(topAligned);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}, []);
|
|
92
|
+
useEffect(function () {
|
|
93
|
+
checkContentAlignement();
|
|
94
|
+
}, [checkContentAlignement]);
|
|
95
|
+
var onApplyCallback = useCallback(function (range) {
|
|
71
96
|
var finalDateRange = range === undefined && defaultValue !== undefined ? defaultValue : range;
|
|
72
97
|
onApply && onApply(finalDateRange);
|
|
73
98
|
setSelectedDate(finalDateRange);
|
|
@@ -97,6 +122,7 @@ var DateRangePicker = function DateRangePicker(props) {
|
|
|
97
122
|
}));
|
|
98
123
|
if (readOnly) return /*#__PURE__*/React.createElement(React.Fragment, null, triggerElement);
|
|
99
124
|
return /*#__PURE__*/React.createElement(S.PickerWrapper, {
|
|
125
|
+
ref: wrapperRef,
|
|
100
126
|
arrowColor: arrowColor
|
|
101
127
|
}, /*#__PURE__*/React.createElement(S.PopoverWrapper, _extends({
|
|
102
128
|
content: /*#__PURE__*/React.createElement(RawDateRangePicker, _extends({}, props, {
|
|
@@ -104,7 +130,8 @@ var DateRangePicker = function DateRangePicker(props) {
|
|
|
104
130
|
onApply: onApplyCallback,
|
|
105
131
|
value: selectedDate,
|
|
106
132
|
texts: allTexts,
|
|
107
|
-
forceAdjacentMonths: forceAdjacentMonths
|
|
133
|
+
forceAdjacentMonths: forceAdjacentMonths,
|
|
134
|
+
alignContentToTop: isTopAligned
|
|
108
135
|
})),
|
|
109
136
|
getPopupContainer: getPopupContainer !== undefined ? function (node) {
|
|
110
137
|
return getPopupContainer(node);
|
|
@@ -118,6 +145,7 @@ var DateRangePicker = function DateRangePicker(props) {
|
|
|
118
145
|
},
|
|
119
146
|
overlayClassName: "ds-date-range-popover",
|
|
120
147
|
onVisibleChange: function onVisibleChange(visibility) {
|
|
148
|
+
visibility && checkContentAlignement();
|
|
121
149
|
setInputActive(visibility);
|
|
122
150
|
_onVisibleChange && _onVisibleChange(visibility);
|
|
123
151
|
}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { AdditionalMapper } from './DateRangePicker.types';
|
|
3
|
+
export declare const PopupWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
4
|
+
hasFilter?: boolean | undefined;
|
|
5
|
+
hasRelativePicker?: boolean | undefined;
|
|
6
|
+
alignContentToTop?: boolean | undefined;
|
|
7
|
+
}, never>;
|
|
3
8
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
9
|
export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
10
|
export declare const PopoverWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/lib/popover").PopoverProps & import("react").RefAttributes<unknown>>, any, {}, never>;
|
|
@@ -1,31 +1,56 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
import { Popover } from 'antd';
|
|
3
|
+
|
|
4
|
+
var getHeight = function getHeight(hasFilter, hasRelativePicker) {
|
|
5
|
+
var baseHeight = 509;
|
|
6
|
+
|
|
7
|
+
if (hasFilter) {
|
|
8
|
+
baseHeight += 127;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
if (hasRelativePicker) {
|
|
12
|
+
baseHeight += 170;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
return baseHeight;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export var PopupWrapper = styled.div.withConfig({
|
|
19
|
+
displayName: "DateRangePickerstyles__PopupWrapper",
|
|
20
|
+
componentId: "zmtbjf-0"
|
|
21
|
+
})(["height:", "px;display:flex;flex-direction:row;align-items:", ";"], function (props) {
|
|
22
|
+
return getHeight(props.hasFilter, props.hasRelativePicker);
|
|
23
|
+
}, function (props) {
|
|
24
|
+
return props.alignContentToTop ? 'flex-end' : 'flex-start';
|
|
25
|
+
});
|
|
3
26
|
export var Container = styled.div.withConfig({
|
|
4
27
|
displayName: "DateRangePickerstyles__Container",
|
|
5
|
-
componentId: "zmtbjf-
|
|
6
|
-
})(["width:636px;background-color:", ";user-select:none;
|
|
28
|
+
componentId: "zmtbjf-1"
|
|
29
|
+
})(["width:636px;background-color:", ";user-select:none;box-shadow:0 16px 32px 0 ", ";"], function (props) {
|
|
7
30
|
return props.theme.palette.white;
|
|
31
|
+
}, function (props) {
|
|
32
|
+
return props.theme.palette['grey-900'] + "1a";
|
|
8
33
|
});
|
|
9
34
|
export var Separator = styled.div.withConfig({
|
|
10
35
|
displayName: "DateRangePickerstyles__Separator",
|
|
11
|
-
componentId: "zmtbjf-
|
|
36
|
+
componentId: "zmtbjf-2"
|
|
12
37
|
})(["margin:0;border-top:1px solid ", ";"], function (props) {
|
|
13
38
|
return props.theme.palette['grey-200'];
|
|
14
39
|
});
|
|
15
40
|
export var PopoverWrapper = styled(Popover).withConfig({
|
|
16
41
|
displayName: "DateRangePickerstyles__PopoverWrapper",
|
|
17
|
-
componentId: "zmtbjf-
|
|
42
|
+
componentId: "zmtbjf-3"
|
|
18
43
|
})([""]);
|
|
19
44
|
export var Addon = styled.div.withConfig({
|
|
20
45
|
displayName: "DateRangePickerstyles__Addon",
|
|
21
|
-
componentId: "zmtbjf-
|
|
46
|
+
componentId: "zmtbjf-4"
|
|
22
47
|
})(["", ""], function (props) {
|
|
23
48
|
return !props.last && "border-bottom: 1px solid " + props.theme.palette['grey-200'] + ";";
|
|
24
49
|
});
|
|
25
50
|
export var PickerWrapper = styled.div.withConfig({
|
|
26
51
|
displayName: "DateRangePickerstyles__PickerWrapper",
|
|
27
|
-
componentId: "zmtbjf-
|
|
28
|
-
})(["
|
|
52
|
+
componentId: "zmtbjf-5"
|
|
53
|
+
})([".ant-popover.ds-date-range-popover > .ant-popover-content{margin:-5px 0;}.ant-dropdown.ds-date-range-popover > .ant-popover-arrow.ant-popover-arrow.ant-popover-arrow.ant-popover-arrow{display:none !important;}.ant-dropdown.ds-date-range-popover > .ant-popover-content > .ant-popover-inner{background:transparent;}.ant-dropdown.ds-date-range-popover > .ant-popover-content > .ant-popover-inner > .ant-popover-inner-content{padding:0;}.ant-dropdown.ds-date-range-popover .ds-date-range-picker{box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);padding:16px;}.ant-popover.ds-date-range-popover.ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}"], function (props) {
|
|
29
54
|
var _props$theme$palette$, _props$arrowColor, _props$arrowColor2;
|
|
30
55
|
|
|
31
56
|
return props.arrowColor ? (_props$theme$palette$ = props.theme.palette[((_props$arrowColor = props.arrowColor) == null ? void 0 : _props$arrowColor.bottomLeft) + "-050"]) != null ? _props$theme$palette$ : (_props$arrowColor2 = props.arrowColor) == null ? void 0 : _props$arrowColor2.bottomLeft : props.theme.palette.white;
|
|
@@ -60,7 +85,7 @@ export var PickerWrapper = styled.div.withConfig({
|
|
|
60
85
|
});
|
|
61
86
|
export var OverlayContainer = styled.div.withConfig({
|
|
62
87
|
displayName: "DateRangePickerstyles__OverlayContainer",
|
|
63
|
-
componentId: "zmtbjf-
|
|
88
|
+
componentId: "zmtbjf-6"
|
|
64
89
|
})(["display:", ";"], function (props) {
|
|
65
90
|
return props.visible ? 'flex' : 'none';
|
|
66
91
|
});
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import ContentItem from '@synerise/ds-manageable-list/dist/Item/ContentItem/ContentItem';
|
|
3
2
|
import Badge from '@synerise/ds-badge';
|
|
4
3
|
import Icon, { CloseS, FilterM } from '@synerise/ds-icon';
|
|
5
4
|
import Tooltip from '@synerise/ds-tooltip';
|
|
@@ -20,7 +19,7 @@ var RangeFilterStatus = function RangeFilterStatus(_ref) {
|
|
|
20
19
|
disabled: disabled,
|
|
21
20
|
onClick: _onClick,
|
|
22
21
|
block: true
|
|
23
|
-
}) : /*#__PURE__*/React.createElement(ContentItem, {
|
|
22
|
+
}) : /*#__PURE__*/React.createElement(S.ContentItem, {
|
|
24
23
|
onClick: function onClick(event) {
|
|
25
24
|
event.stopPropagation();
|
|
26
25
|
|
|
@@ -1,3 +1,391 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import Button from '@synerise/ds-button';
|
|
3
|
+
export declare const ContentItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
|
|
4
|
+
style?: import("react").CSSProperties | undefined;
|
|
5
|
+
title?: string | undefined;
|
|
6
|
+
slot?: string | undefined;
|
|
7
|
+
defaultChecked?: boolean | undefined;
|
|
8
|
+
defaultValue?: string | number | string[] | undefined;
|
|
9
|
+
suppressContentEditableWarning?: boolean | undefined;
|
|
10
|
+
suppressHydrationWarning?: boolean | undefined;
|
|
11
|
+
accessKey?: string | undefined;
|
|
12
|
+
className?: string | undefined;
|
|
13
|
+
contentEditable?: boolean | "inherit" | "true" | "false" | undefined;
|
|
14
|
+
contextMenu?: string | undefined;
|
|
15
|
+
dir?: string | undefined;
|
|
16
|
+
draggable?: boolean | undefined;
|
|
17
|
+
hidden?: boolean | undefined;
|
|
18
|
+
id?: string | undefined;
|
|
19
|
+
lang?: string | undefined;
|
|
20
|
+
placeholder?: string | undefined;
|
|
21
|
+
spellCheck?: boolean | "true" | "false" | undefined;
|
|
22
|
+
tabIndex?: number | undefined;
|
|
23
|
+
translate?: "no" | "yes" | undefined;
|
|
24
|
+
radioGroup?: string | undefined;
|
|
25
|
+
role?: string | undefined;
|
|
26
|
+
about?: string | undefined;
|
|
27
|
+
datatype?: string | undefined;
|
|
28
|
+
inlist?: any;
|
|
29
|
+
prefix?: string | undefined;
|
|
30
|
+
property?: string | undefined;
|
|
31
|
+
resource?: string | undefined;
|
|
32
|
+
typeof?: string | undefined;
|
|
33
|
+
vocab?: string | undefined;
|
|
34
|
+
autoCapitalize?: string | undefined;
|
|
35
|
+
autoCorrect?: string | undefined;
|
|
36
|
+
autoSave?: string | undefined;
|
|
37
|
+
color?: string | undefined;
|
|
38
|
+
itemProp?: string | undefined;
|
|
39
|
+
itemScope?: boolean | undefined;
|
|
40
|
+
itemType?: string | undefined;
|
|
41
|
+
itemID?: string | undefined;
|
|
42
|
+
itemRef?: string | undefined;
|
|
43
|
+
results?: number | undefined;
|
|
44
|
+
security?: string | undefined;
|
|
45
|
+
unselectable?: "off" | "on" | undefined;
|
|
46
|
+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
47
|
+
is?: string | undefined;
|
|
48
|
+
'aria-activedescendant'?: string | undefined;
|
|
49
|
+
'aria-atomic'?: boolean | "true" | "false" | undefined;
|
|
50
|
+
'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
|
|
51
|
+
'aria-busy'?: boolean | "true" | "false" | undefined;
|
|
52
|
+
'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
|
|
53
|
+
'aria-colcount'?: number | undefined;
|
|
54
|
+
'aria-colindex'?: number | undefined;
|
|
55
|
+
'aria-colspan'?: number | undefined;
|
|
56
|
+
'aria-controls'?: string | undefined;
|
|
57
|
+
'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
|
|
58
|
+
'aria-describedby'?: string | undefined;
|
|
59
|
+
'aria-details'?: string | undefined;
|
|
60
|
+
'aria-disabled'?: boolean | "true" | "false" | undefined;
|
|
61
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
|
|
62
|
+
'aria-errormessage'?: string | undefined;
|
|
63
|
+
'aria-expanded'?: boolean | "true" | "false" | undefined;
|
|
64
|
+
'aria-flowto'?: string | undefined;
|
|
65
|
+
'aria-grabbed'?: boolean | "true" | "false" | undefined;
|
|
66
|
+
'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
|
|
67
|
+
'aria-hidden'?: boolean | "true" | "false" | undefined;
|
|
68
|
+
'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
69
|
+
'aria-keyshortcuts'?: string | undefined;
|
|
70
|
+
'aria-label'?: string | undefined;
|
|
71
|
+
'aria-labelledby'?: string | undefined;
|
|
72
|
+
'aria-level'?: number | undefined;
|
|
73
|
+
'aria-live'?: "off" | "assertive" | "polite" | undefined;
|
|
74
|
+
'aria-modal'?: boolean | "true" | "false" | undefined;
|
|
75
|
+
'aria-multiline'?: boolean | "true" | "false" | undefined;
|
|
76
|
+
'aria-multiselectable'?: boolean | "true" | "false" | undefined;
|
|
77
|
+
'aria-orientation'?: "horizontal" | "vertical" | undefined;
|
|
78
|
+
'aria-owns'?: string | undefined;
|
|
79
|
+
'aria-placeholder'?: string | undefined;
|
|
80
|
+
'aria-posinset'?: number | undefined;
|
|
81
|
+
'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
|
|
82
|
+
'aria-readonly'?: boolean | "true" | "false" | undefined;
|
|
83
|
+
'aria-relevant'?: "text" | "additions" | "additions text" | "all" | "removals" | undefined;
|
|
84
|
+
'aria-required'?: boolean | "true" | "false" | undefined;
|
|
85
|
+
'aria-roledescription'?: string | undefined;
|
|
86
|
+
'aria-rowcount'?: number | undefined;
|
|
87
|
+
'aria-rowindex'?: number | undefined;
|
|
88
|
+
'aria-rowspan'?: number | undefined;
|
|
89
|
+
'aria-selected'?: boolean | "true" | "false" | undefined;
|
|
90
|
+
'aria-setsize'?: number | undefined;
|
|
91
|
+
'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
92
|
+
'aria-valuemax'?: number | undefined;
|
|
93
|
+
'aria-valuemin'?: number | undefined;
|
|
94
|
+
'aria-valuenow'?: number | undefined;
|
|
95
|
+
'aria-valuetext'?: string | undefined;
|
|
96
|
+
children?: import("react").ReactNode;
|
|
97
|
+
dangerouslySetInnerHTML?: {
|
|
98
|
+
__html: string;
|
|
99
|
+
} | undefined;
|
|
100
|
+
onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
101
|
+
onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
102
|
+
onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
103
|
+
onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
104
|
+
onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
105
|
+
onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
106
|
+
onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
107
|
+
onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
108
|
+
onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
109
|
+
onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
110
|
+
onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
111
|
+
onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
112
|
+
onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
113
|
+
onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
114
|
+
onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
115
|
+
onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
116
|
+
onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
117
|
+
onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
118
|
+
onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
119
|
+
onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
120
|
+
onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
121
|
+
onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
122
|
+
onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
123
|
+
onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
124
|
+
onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
125
|
+
onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
126
|
+
onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
127
|
+
onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
128
|
+
onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
129
|
+
onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
130
|
+
onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
131
|
+
onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
132
|
+
onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
133
|
+
onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
134
|
+
onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
135
|
+
onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
136
|
+
onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
137
|
+
onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
138
|
+
onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
139
|
+
onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
140
|
+
onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
141
|
+
onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
142
|
+
onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
143
|
+
onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
144
|
+
onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
145
|
+
onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
146
|
+
onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
147
|
+
onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
148
|
+
onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
149
|
+
onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
150
|
+
onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
151
|
+
onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
152
|
+
onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
153
|
+
onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
154
|
+
onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
155
|
+
onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
156
|
+
onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
157
|
+
onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
158
|
+
onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
159
|
+
onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
160
|
+
onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
161
|
+
onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
162
|
+
onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
163
|
+
onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
164
|
+
onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
165
|
+
onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
166
|
+
onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
167
|
+
onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
168
|
+
onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
169
|
+
onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
170
|
+
onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
171
|
+
onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
172
|
+
onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
173
|
+
onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
174
|
+
onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
175
|
+
onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
176
|
+
onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
177
|
+
onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
178
|
+
onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
179
|
+
onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
180
|
+
onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
181
|
+
onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
182
|
+
onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
183
|
+
onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
184
|
+
onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
185
|
+
onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
186
|
+
onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
187
|
+
onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
188
|
+
onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
189
|
+
onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
190
|
+
onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
191
|
+
onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
192
|
+
onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
193
|
+
onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
194
|
+
onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
195
|
+
onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
196
|
+
onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
197
|
+
onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
198
|
+
onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
199
|
+
onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
200
|
+
onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
201
|
+
onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
202
|
+
onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
203
|
+
onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
204
|
+
onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
205
|
+
onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
206
|
+
onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
207
|
+
onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
208
|
+
onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
209
|
+
onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
210
|
+
onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
211
|
+
onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
212
|
+
onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
213
|
+
onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
214
|
+
onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
215
|
+
onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
216
|
+
onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
217
|
+
onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
218
|
+
onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
219
|
+
onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
220
|
+
onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
221
|
+
onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
222
|
+
onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
223
|
+
onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
224
|
+
onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
225
|
+
onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
226
|
+
onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
227
|
+
onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
228
|
+
onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
229
|
+
onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
230
|
+
onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
231
|
+
onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
232
|
+
onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
233
|
+
onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
234
|
+
onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
235
|
+
onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
236
|
+
onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
237
|
+
onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
238
|
+
onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
239
|
+
onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
240
|
+
onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
241
|
+
onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
242
|
+
onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
243
|
+
onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
244
|
+
onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
245
|
+
onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
246
|
+
onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
247
|
+
onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
248
|
+
onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
249
|
+
onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
250
|
+
onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
|
|
251
|
+
onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
|
|
252
|
+
onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
253
|
+
onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
254
|
+
onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
255
|
+
onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
256
|
+
onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
257
|
+
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
258
|
+
onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
259
|
+
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
260
|
+
greyBackground?: boolean | undefined;
|
|
261
|
+
item: {
|
|
262
|
+
id: import("react").ReactText;
|
|
263
|
+
canUpdate?: boolean | undefined;
|
|
264
|
+
canDelete?: boolean | undefined;
|
|
265
|
+
canDuplicate?: boolean | undefined;
|
|
266
|
+
name: string;
|
|
267
|
+
nameWrapperClassNames?: string[] | undefined;
|
|
268
|
+
description?: string | undefined;
|
|
269
|
+
tag?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
|
270
|
+
icon?: import("react").ReactNode;
|
|
271
|
+
content?: import("react").ReactNode;
|
|
272
|
+
changeOrderDisabled?: boolean | undefined;
|
|
273
|
+
user?: {
|
|
274
|
+
avatar_url?: string | undefined;
|
|
275
|
+
firstname?: string | undefined;
|
|
276
|
+
lastname?: string | undefined;
|
|
277
|
+
email?: string | undefined;
|
|
278
|
+
} | undefined;
|
|
279
|
+
created?: string | undefined;
|
|
280
|
+
dropdown?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
|
281
|
+
disableExpanding?: boolean | undefined;
|
|
282
|
+
expanded?: boolean | undefined;
|
|
283
|
+
headerSuffix?: import("react").ReactNode;
|
|
284
|
+
hideHeaderSuffixOnHover?: boolean | undefined;
|
|
285
|
+
additionalSuffix?: import("react").ReactNode;
|
|
286
|
+
};
|
|
287
|
+
onUpdate?: ((updateParams: {
|
|
288
|
+
id: import("react").ReactText;
|
|
289
|
+
name: string;
|
|
290
|
+
}) => void) | undefined;
|
|
291
|
+
onRemove?: ((removeParams: {
|
|
292
|
+
id: import("react").ReactText;
|
|
293
|
+
}) => void) | undefined;
|
|
294
|
+
onDuplicate?: ((duplicateParams: {
|
|
295
|
+
id: import("react").ReactText;
|
|
296
|
+
}) => void) | undefined;
|
|
297
|
+
dashed?: boolean | undefined;
|
|
298
|
+
changeOrderDisabled?: boolean | undefined;
|
|
299
|
+
texts?: {
|
|
300
|
+
[k: string]: import("react").ReactNode;
|
|
301
|
+
} | undefined;
|
|
302
|
+
hideExpander?: boolean | undefined;
|
|
303
|
+
expanded?: boolean | undefined;
|
|
304
|
+
onExpand?: ((id: import("react").ReactText, isExpanded: boolean) => void) | undefined;
|
|
305
|
+
headerSuffix?: import("react").ReactNode;
|
|
306
|
+
headerPrefix?: import("react").ReactNode;
|
|
307
|
+
contentWithoutPadding?: boolean | undefined;
|
|
308
|
+
onMoveTop?: ((item: {
|
|
309
|
+
id: import("react").ReactText;
|
|
310
|
+
canUpdate?: boolean | undefined;
|
|
311
|
+
canDelete?: boolean | undefined;
|
|
312
|
+
canDuplicate?: boolean | undefined;
|
|
313
|
+
name: string;
|
|
314
|
+
nameWrapperClassNames?: string[] | undefined;
|
|
315
|
+
description?: string | undefined;
|
|
316
|
+
tag?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
|
317
|
+
icon?: import("react").ReactNode;
|
|
318
|
+
content?: import("react").ReactNode;
|
|
319
|
+
changeOrderDisabled?: boolean | undefined;
|
|
320
|
+
user?: {
|
|
321
|
+
avatar_url?: string | undefined;
|
|
322
|
+
firstname?: string | undefined;
|
|
323
|
+
lastname?: string | undefined;
|
|
324
|
+
email?: string | undefined;
|
|
325
|
+
} | undefined;
|
|
326
|
+
created?: string | undefined;
|
|
327
|
+
dropdown?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
|
328
|
+
disableExpanding?: boolean | undefined;
|
|
329
|
+
expanded?: boolean | undefined;
|
|
330
|
+
headerSuffix?: import("react").ReactNode;
|
|
331
|
+
hideHeaderSuffixOnHover?: boolean | undefined;
|
|
332
|
+
additionalSuffix?: import("react").ReactNode;
|
|
333
|
+
}) => void) | undefined;
|
|
334
|
+
onMoveBottom?: ((item: {
|
|
335
|
+
id: import("react").ReactText;
|
|
336
|
+
canUpdate?: boolean | undefined;
|
|
337
|
+
canDelete?: boolean | undefined;
|
|
338
|
+
canDuplicate?: boolean | undefined;
|
|
339
|
+
name: string;
|
|
340
|
+
nameWrapperClassNames?: string[] | undefined;
|
|
341
|
+
description?: string | undefined;
|
|
342
|
+
tag?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
|
343
|
+
icon?: import("react").ReactNode;
|
|
344
|
+
content?: import("react").ReactNode;
|
|
345
|
+
changeOrderDisabled?: boolean | undefined;
|
|
346
|
+
user?: {
|
|
347
|
+
avatar_url?: string | undefined;
|
|
348
|
+
firstname?: string | undefined;
|
|
349
|
+
lastname?: string | undefined;
|
|
350
|
+
email?: string | undefined;
|
|
351
|
+
} | undefined;
|
|
352
|
+
created?: string | undefined;
|
|
353
|
+
dropdown?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
|
354
|
+
disableExpanding?: boolean | undefined;
|
|
355
|
+
expanded?: boolean | undefined;
|
|
356
|
+
headerSuffix?: import("react").ReactNode;
|
|
357
|
+
hideHeaderSuffixOnHover?: boolean | undefined;
|
|
358
|
+
additionalSuffix?: import("react").ReactNode;
|
|
359
|
+
}) => void) | undefined;
|
|
360
|
+
isFirst?: boolean | undefined;
|
|
361
|
+
isLast?: boolean | undefined;
|
|
362
|
+
} & {
|
|
363
|
+
theme?: any;
|
|
364
|
+
}> & {
|
|
365
|
+
AdditionalSuffix: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
366
|
+
ContentWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
367
|
+
withoutPadding: boolean;
|
|
368
|
+
}, never>;
|
|
369
|
+
DraggerWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
370
|
+
disabled: boolean;
|
|
371
|
+
}, never>;
|
|
372
|
+
DropdownTrigger: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
|
|
373
|
+
DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
374
|
+
FilterDropdownTrigger: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
|
|
375
|
+
IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
376
|
+
ItemContainer: import("styled-components").StyledComponent<"div", any, {
|
|
377
|
+
opened: boolean;
|
|
378
|
+
greyBackground: boolean | undefined;
|
|
379
|
+
dashed?: boolean | undefined;
|
|
380
|
+
}, never>;
|
|
381
|
+
ItemHeader: import("styled-components").StyledComponent<"div", any, {
|
|
382
|
+
hasPrefix: boolean;
|
|
383
|
+
}, never>;
|
|
384
|
+
ItemHeaderPrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
385
|
+
ItemHeaderSuffix: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
386
|
+
MoveItemButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
387
|
+
ToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
388
|
+
}, any, {}, never>;
|
|
1
389
|
export declare const BadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
390
|
export declare const Title: import("styled-components").StyledComponent<"h3", any, {}, never>;
|
|
3
391
|
export declare const SuffixText: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
@@ -1,26 +1,31 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
import Button from '@synerise/ds-button';
|
|
3
|
+
import DSContentItem from '@synerise/ds-manageable-list/dist/Item/ContentItem/ContentItem';
|
|
4
|
+
export var ContentItem = styled(DSContentItem).withConfig({
|
|
5
|
+
displayName: "RangeFilterStatusstyles__ContentItem",
|
|
6
|
+
componentId: "sc-1ei851t-0"
|
|
7
|
+
})(["margin-bottom:0;"]);
|
|
3
8
|
export var BadgeWrapper = styled.div.withConfig({
|
|
4
9
|
displayName: "RangeFilterStatusstyles__BadgeWrapper",
|
|
5
|
-
componentId: "sc-1ei851t-
|
|
10
|
+
componentId: "sc-1ei851t-1"
|
|
6
11
|
})(["margin-right:16px;margin-bottom:-2px;"]);
|
|
7
12
|
export var Title = styled.h3.withConfig({
|
|
8
13
|
displayName: "RangeFilterStatusstyles__Title",
|
|
9
|
-
componentId: "sc-1ei851t-
|
|
14
|
+
componentId: "sc-1ei851t-2"
|
|
10
15
|
})(["font-size:16px;line-height:1.39;color:", ";margin-bottom:1em;"], function (props) {
|
|
11
16
|
return props.theme.palette['grey-800'];
|
|
12
17
|
});
|
|
13
18
|
export var SuffixText = styled.span.withConfig({
|
|
14
19
|
displayName: "RangeFilterStatusstyles__SuffixText",
|
|
15
|
-
componentId: "sc-1ei851t-
|
|
20
|
+
componentId: "sc-1ei851t-3"
|
|
16
21
|
})(["color:", ";font-weight:500;margin-right:16px;"], function (props) {
|
|
17
22
|
return props.theme.palette['blue-600'];
|
|
18
23
|
});
|
|
19
24
|
export var CreatorButton = styled(Button.Creator).withConfig({
|
|
20
25
|
displayName: "RangeFilterStatusstyles__CreatorButton",
|
|
21
|
-
componentId: "sc-1ei851t-
|
|
26
|
+
componentId: "sc-1ei851t-4"
|
|
22
27
|
})(["&&&{justify-content:flex-start;}"]);
|
|
23
28
|
export var Container = styled.div.withConfig({
|
|
24
29
|
displayName: "RangeFilterStatusstyles__Container",
|
|
25
|
-
componentId: "sc-1ei851t-
|
|
30
|
+
componentId: "sc-1ei851t-5"
|
|
26
31
|
})(["padding:16px 24px 24px;"]);
|
|
@@ -5,6 +5,7 @@ import { FilterDefinition, FilterValue } from './RangeFilter/RangeFilter.types';
|
|
|
5
5
|
export declare function defaultValueTransformer(value: DateRange): DateRange;
|
|
6
6
|
type RawDateRangePickerProps = Omit<DateRangePickerProps, 'texts'> & {
|
|
7
7
|
texts: Texts;
|
|
8
|
+
alignContentToTop?: boolean;
|
|
8
9
|
};
|
|
9
10
|
export declare class RawDateRangePicker extends PureComponent<RawDateRangePickerProps, State> {
|
|
10
11
|
static defaultProps: {
|
|
@@ -16,7 +16,7 @@ import { injectIntl } from 'react-intl';
|
|
|
16
16
|
import fnsIsValid from 'date-fns/isValid';
|
|
17
17
|
import fnsStartOfSecond from 'date-fns/startOfSecond';
|
|
18
18
|
import { legacyParse } from '@date-fns/upgrade/v2';
|
|
19
|
-
import { Container, Separator, Addon } from './DateRangePicker.styles';
|
|
19
|
+
import { Container, Separator, Addon, PopupWrapper } from './DateRangePicker.styles';
|
|
20
20
|
import RangePicker from './RangePicker/RangePicker';
|
|
21
21
|
import { RELATIVE, ABSOLUTE, MODES, RELATIVE_PRESETS, ABSOLUTE_PRESETS } from './constants';
|
|
22
22
|
import * as CONST from './constants';
|
|
@@ -303,6 +303,8 @@ export var RawDateRangePicker = /*#__PURE__*/function (_PureComponent) {
|
|
|
303
303
|
|
|
304
304
|
_proto.render = function render() {
|
|
305
305
|
var _this$props5 = this.props,
|
|
306
|
+
showRelativePicker = _this$props5.showRelativePicker,
|
|
307
|
+
showFilter = _this$props5.showFilter,
|
|
306
308
|
showTime = _this$props5.showTime,
|
|
307
309
|
format = _this$props5.format,
|
|
308
310
|
valueFormatOptions = _this$props5.valueFormatOptions,
|
|
@@ -321,7 +323,8 @@ export var RawDateRangePicker = /*#__PURE__*/function (_PureComponent) {
|
|
|
321
323
|
filterValueSelectionModes = _this$props5.filterValueSelectionModes,
|
|
322
324
|
filterRangeDisplayMode = _this$props5.filterRangeDisplayMode,
|
|
323
325
|
_this$props5$showNowB = _this$props5.showNowButton,
|
|
324
|
-
showNowButton = _this$props5$showNowB === void 0 ? true : _this$props5$showNowB
|
|
326
|
+
showNowButton = _this$props5$showNowB === void 0 ? true : _this$props5$showNowB,
|
|
327
|
+
alignContentToTop = _this$props5.alignContentToTop;
|
|
325
328
|
var _this$state3 = this.state,
|
|
326
329
|
value = _this$state3.value,
|
|
327
330
|
mode = _this$state3.mode;
|
|
@@ -339,21 +342,6 @@ export var RawDateRangePicker = /*#__PURE__*/function (_PureComponent) {
|
|
|
339
342
|
key = value.key;
|
|
340
343
|
var addons = this.getAddons();
|
|
341
344
|
var allTexts = this.allTexts();
|
|
342
|
-
if (mode === MODES.FILTER) return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(RangeFilter, {
|
|
343
|
-
texts: allTexts,
|
|
344
|
-
value: value.filter,
|
|
345
|
-
onCancel: this.handleFilterCancel,
|
|
346
|
-
onApply: this.handleFilterApply,
|
|
347
|
-
savedFilters: savedFilters,
|
|
348
|
-
allowedFilterTypes: allowedFilterTypes,
|
|
349
|
-
onFilterSave: onFilterSave,
|
|
350
|
-
valueSelectionModes: filterValueSelectionModes,
|
|
351
|
-
rangeDisplayMode: filterRangeDisplayMode
|
|
352
|
-
}));
|
|
353
|
-
var validator = validate ? validate(value) : {
|
|
354
|
-
valid: true
|
|
355
|
-
};
|
|
356
|
-
var isValidAbsolute = !Object.keys(value).includes('key') && Boolean(from && to);
|
|
357
345
|
|
|
358
346
|
function isRelative(dateRange) {
|
|
359
347
|
var isLegacyCustom = Object.keys(value).includes('key') && key === undefined;
|
|
@@ -362,45 +350,71 @@ export var RawDateRangePicker = /*#__PURE__*/function (_PureComponent) {
|
|
|
362
350
|
}).includes(dateRange.key) || dateRange.key === CONST.CUSTOM_RANGE_KEY) || isLegacyCustom;
|
|
363
351
|
}
|
|
364
352
|
|
|
365
|
-
var
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
353
|
+
var content;
|
|
354
|
+
|
|
355
|
+
if (mode === MODES.FILTER) {
|
|
356
|
+
content = /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(RangeFilter, {
|
|
357
|
+
texts: allTexts,
|
|
358
|
+
value: value.filter,
|
|
359
|
+
onCancel: this.handleFilterCancel,
|
|
360
|
+
onApply: this.handleFilterApply,
|
|
361
|
+
savedFilters: savedFilters,
|
|
362
|
+
allowedFilterTypes: allowedFilterTypes,
|
|
363
|
+
onFilterSave: onFilterSave,
|
|
364
|
+
valueSelectionModes: filterValueSelectionModes,
|
|
365
|
+
rangeDisplayMode: filterRangeDisplayMode
|
|
366
|
+
}));
|
|
367
|
+
} else {
|
|
368
|
+
var validator = validate ? validate(value) : {
|
|
369
|
+
valid: true
|
|
370
|
+
};
|
|
371
|
+
var isValidAbsolute = !Object.keys(value).includes('key') && Boolean(from && to);
|
|
372
|
+
var isValidRelative = isRelative(value) && Boolean(value.offset && value.duration);
|
|
373
|
+
var isValidSince = value.type === 'SINCE' && Boolean(value.offset && value.duration); // TODO apply ranges and find mapped lifetime here, this applies only for defaultValueTransformer
|
|
374
|
+
|
|
375
|
+
var isValid = (isValidAbsolute || isValidRelative || isValidSince || key === CONST.ALL_TIME) && validator.valid;
|
|
376
|
+
var canSwitchToTimePicker = isValid && !isLifetime(value) && (!disableAbsoluteTimepickerInRelative || value.type === 'ABSOLUTE');
|
|
377
|
+
content = /*#__PURE__*/React.createElement(Container, {
|
|
378
|
+
className: containerClass
|
|
379
|
+
}, /*#__PURE__*/React.createElement(RangePicker, {
|
|
380
|
+
showNowButton: showNowButton,
|
|
381
|
+
value: normalizeRange(value),
|
|
382
|
+
onChange: this.handleRangeChange,
|
|
383
|
+
mode: mode,
|
|
384
|
+
disabledDate: disabledDate,
|
|
385
|
+
onSwitchMode: this.handleSwitchMode,
|
|
386
|
+
dateOnly: !showTime,
|
|
387
|
+
canSwitchMode: canSwitchToTimePicker,
|
|
388
|
+
texts: allTexts,
|
|
389
|
+
forceAdjacentMonths: forceAdjacentMonths,
|
|
390
|
+
intl: intl
|
|
391
|
+
}), addons.length > 0 && /*#__PURE__*/React.createElement(Separator, null), addons.map(function (addon, index) {
|
|
392
|
+
return /*#__PURE__*/React.createElement(Addon, {
|
|
393
|
+
last: addons.length === index + 1,
|
|
394
|
+
className: "addon-wrapper",
|
|
395
|
+
key: addon.key
|
|
396
|
+
}, addon.content);
|
|
397
|
+
}), /*#__PURE__*/React.createElement(Footer, _extends({
|
|
398
|
+
canApply: isValid || isLifetime(value),
|
|
399
|
+
onApply: this.handleApply,
|
|
400
|
+
dateOnly: !showTime,
|
|
401
|
+
mode: mode,
|
|
402
|
+
canSwitchMode: isValid,
|
|
403
|
+
message: !validator.valid ? validator.message : null,
|
|
404
|
+
onSwitchMode: this.handleSwitchMode,
|
|
405
|
+
texts: allTexts,
|
|
406
|
+
value: value,
|
|
407
|
+
showTime: showTime,
|
|
408
|
+
format: format,
|
|
409
|
+
valueFormatOptions: valueFormatOptions
|
|
410
|
+
}, footerProps)));
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
return /*#__PURE__*/React.createElement(PopupWrapper, {
|
|
414
|
+
alignContentToTop: alignContentToTop,
|
|
415
|
+
hasFilter: showFilter,
|
|
416
|
+
hasRelativePicker: showRelativePicker
|
|
417
|
+
}, content);
|
|
404
418
|
};
|
|
405
419
|
|
|
406
420
|
return RawDateRangePicker;
|
package/dist/style/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ant-popover.
|
|
1
|
+
.ant-image-preview,.ant-modal{pointer-events:none}.ant-image-preview.zoom-appear,.ant-image-preview.zoom-enter,.ant-modal.zoom-appear,.ant-modal.zoom-enter{transform:none;opacity:0;animation-duration:.3s;user-select:none}.ant-image-preview-mask,.ant-modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:991000;height:100%;background-color:rgba(0,0,0,.2);filter:alpha(opacity=50)}.ant-image-preview-mask-hidden,.ant-modal-mask-hidden{display:none}.ant-image-preview-wrap,.ant-modal-wrap{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;outline:0;-webkit-overflow-scrolling:touch}.ant-popover{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:absolute;top:0;left:0;z-index:991030;font-weight:400;white-space:normal;text-align:left;cursor:auto;user-select:text}.ant-popover::after{position:absolute;background:rgba(255,255,255,.01);content:''}.ant-popover-hidden{display:none}.ant-popover-placement-top,.ant-popover-placement-topLeft,.ant-popover-placement-topRight{padding-bottom:10px}.ant-popover-placement-right,.ant-popover-placement-rightBottom,.ant-popover-placement-rightTop{padding-left:10px}.ant-popover-placement-bottom,.ant-popover-placement-bottomLeft,.ant-popover-placement-bottomRight{padding-top:10px}.ant-popover-placement-left,.ant-popover-placement-leftBottom,.ant-popover-placement-leftTop{padding-right:10px}.ant-popover-inner{background-color:#fff;background-clip:padding-box;border-radius:3px;box-shadow:0 2px 6px rgba(171,178,183,.12);box-shadow:0 0 8px rgba(171,178,183,.12)\9}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.ant-popover-inner{box-shadow:0 2px 6px rgba(171,178,183,.12)}}.ant-popover-title{min-width:177px;min-height:32px;margin:0;padding:5px 16px 4px;color:#384350;font-weight:500;border-bottom:1px solid #e9edee}.ant-popover-inner-content{padding:12px 16px;color:#6a7580}.ant-popover-message{position:relative;padding:4px 0 12px;color:#6a7580;font-size:13px}.ant-popover-message>.anticon{position:absolute;top:6.47px;color:#fab700;font-size:13px}.ant-popover-message-title{padding-left:21px}.ant-popover-buttons{margin-bottom:4px;text-align:right}.ant-popover-buttons button{margin-left:8px}.ant-popover-arrow{position:absolute;display:block;width:8.49px;height:8.49px;background:0 0;border-style:solid;border-width:4.24px;transform:rotate(45deg)}.ant-popover-placement-top>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-topLeft>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-topRight>.ant-popover-content>.ant-popover-arrow{bottom:6.2px;border-top-color:transparent;border-right-color:#fff;border-bottom-color:#fff;border-left-color:transparent;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.ant-popover-placement-top>.ant-popover-content>.ant-popover-arrow{left:50%;transform:translateX(-50%) rotate(45deg)}.ant-popover-placement-topLeft>.ant-popover-content>.ant-popover-arrow{left:16px}.ant-popover-placement-topRight>.ant-popover-content>.ant-popover-arrow{right:16px}.ant-popover-placement-right>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-rightBottom>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-rightTop>.ant-popover-content>.ant-popover-arrow{left:6px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#fff;border-left-color:#fff;box-shadow:-3px 3px 7px rgba(0,0,0,.07)}.ant-popover-placement-right>.ant-popover-content>.ant-popover-arrow{top:50%;transform:translateY(-50%) rotate(45deg)}.ant-popover-placement-rightTop>.ant-popover-content>.ant-popover-arrow{top:12px}.ant-popover-placement-rightBottom>.ant-popover-content>.ant-popover-arrow{bottom:12px}.ant-popover-placement-bottom>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-bottomLeft>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-bottomRight>.ant-popover-content>.ant-popover-arrow{top:6px;border-top-color:#fff;border-right-color:transparent;border-bottom-color:transparent;border-left-color:#fff;box-shadow:-2px -2px 5px rgba(0,0,0,.06)}.ant-popover-placement-bottom>.ant-popover-content>.ant-popover-arrow{left:50%;transform:translateX(-50%) rotate(45deg)}.ant-popover-placement-bottomLeft>.ant-popover-content>.ant-popover-arrow{left:16px}.ant-popover-placement-bottomRight>.ant-popover-content>.ant-popover-arrow{right:16px}.ant-popover-placement-left>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-leftBottom>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-leftTop>.ant-popover-content>.ant-popover-arrow{right:6px;border-top-color:#fff;border-right-color:#fff;border-bottom-color:transparent;border-left-color:transparent;box-shadow:3px -3px 7px rgba(0,0,0,.07)}.ant-popover-placement-left>.ant-popover-content>.ant-popover-arrow{top:50%;transform:translateY(-50%) rotate(45deg)}.ant-popover-placement-leftTop>.ant-popover-content>.ant-popover-arrow{top:12px}.ant-popover-placement-leftBottom>.ant-popover-content>.ant-popover-arrow{bottom:12px}.ant-popover-rtl{direction:rtl;text-align:right}.ant-popover-rtl .ant-popover-message-title{padding-right:21px;padding-left:16px}.ant-popover-rtl .ant-popover-buttons{text-align:left}.ant-popover-rtl .ant-popover-buttons button{margin-right:8px;margin-left:0}.ant-popover.ds-date-range-popover>.ant-popover-content>.ant-popover-inner{background:0 0;box-shadow:none}.ant-popover.ds-date-range-popover>.ant-popover-content>.ant-popover-inner>.ant-popover-inner-content{padding:0}.ant-popover.ds-date-range-popover>.ant-popover-arrow.ant-popover-arrow.ant-popover-arrow.ant-popover-arrow{display:none!important;visibility:hidden;pointer-events:none}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-date-range-picker",
|
|
3
|
-
"version": "0.26.
|
|
3
|
+
"version": "0.26.13",
|
|
4
4
|
"description": "Date-Range-Picker UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"@testing-library/user-event": "^10.3.1",
|
|
75
75
|
"@types/ramda": "^0.28.23"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "d249737414ed45f95fa21a77e30f47f0eb14d534"
|
|
78
78
|
}
|