@zohodesk/components 1.0.0-temp-199.4 → 1.0.0-temp-210.5
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/.cli/propValidation_report.html +1 -1
- package/README.md +16 -1
- package/es/DateTime/CalendarView.js +8 -5
- package/es/DateTime/DateTime.js +18 -4
- package/es/DateTime/DateTime.module.css +5 -5
- package/es/DateTime/DateWidget.js +5 -1
- package/es/DateTime/DaysRow.js +3 -2
- package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +7 -7
- package/es/DateTime/props/defaultProps.js +9 -3
- package/es/DateTime/props/propTypes.js +11 -4
- package/es/ListItem/ListItem.js +2 -2
- package/es/ListItem/ListItem.module.css +18 -85
- package/es/ListItem/ListItemWithAvatar.js +3 -3
- package/es/ListItem/ListItemWithIcon.js +2 -2
- package/es/MultiSelect/AdvancedGroupMultiSelect.js +2 -7
- package/es/MultiSelect/AdvancedMultiSelect.js +1 -2
- package/es/MultiSelect/MultiSelect.js +2 -7
- package/es/MultiSelect/Suggestions.js +4 -8
- package/es/MultiSelect/props/defaultProps.js +4 -6
- package/es/MultiSelect/props/propTypes.js +3 -6
- package/es/Popup/Popup.js +32 -13
- package/es/Popup/intersectionObserver.js +23 -19
- package/es/Select/GroupSelect.js +2 -7
- package/es/Select/SelectWithAvatar.js +2 -7
- package/es/Select/SelectWithIcon.js +2 -4
- package/es/Select/props/defaultProps.js +2 -4
- package/es/Select/props/propTypes.js +2 -4
- package/es/v1/DateTime/CalendarView.js +9 -6
- package/es/v1/DateTime/DateTime.js +18 -4
- package/es/v1/DateTime/DateWidget.js +5 -1
- package/es/v1/DateTime/DaysRow.js +3 -2
- package/es/v1/DateTime/props/defaultProps.js +9 -3
- package/es/v1/DateTime/props/propTypes.js +11 -4
- package/es/v1/MultiSelect/AdvancedMultiSelect.js +1 -2
- package/es/v1/MultiSelect/MultiSelect.js +2 -7
- package/es/v1/MultiSelect/Suggestions.js +4 -8
- package/es/v1/MultiSelect/props/defaultProps.js +2 -4
- package/es/v1/MultiSelect/props/propTypes.js +2 -6
- package/es/v1/Select/GroupSelect.js +2 -7
- package/es/v1/Select/SelectWithAvatar.js +2 -7
- package/es/v1/Select/props/defaultProps.js +2 -4
- package/es/v1/Select/props/propTypes.js +2 -6
- package/lib/DateTime/CalendarView.js +8 -5
- package/lib/DateTime/DateTime.js +27 -4
- package/lib/DateTime/DateTime.module.css +5 -5
- package/lib/DateTime/DateWidget.js +5 -1
- package/lib/DateTime/DaysRow.js +3 -2
- package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +7 -7
- package/lib/DateTime/props/defaultProps.js +9 -3
- package/lib/DateTime/props/propTypes.js +11 -4
- package/lib/ListItem/ListItem.js +2 -2
- package/lib/ListItem/ListItem.module.css +18 -85
- package/lib/ListItem/ListItemWithAvatar.js +3 -3
- package/lib/ListItem/ListItemWithIcon.js +2 -2
- package/lib/MultiSelect/AdvancedGroupMultiSelect.js +3 -7
- package/lib/MultiSelect/AdvancedMultiSelect.js +1 -3
- package/lib/MultiSelect/MultiSelect.js +3 -6
- package/lib/MultiSelect/Suggestions.js +4 -8
- package/lib/MultiSelect/props/defaultProps.js +4 -6
- package/lib/MultiSelect/props/propTypes.js +6 -8
- package/lib/Popup/Popup.js +32 -14
- package/lib/Popup/intersectionObserver.js +25 -21
- package/lib/Select/GroupSelect.js +3 -8
- package/lib/Select/SelectWithAvatar.js +3 -8
- package/lib/Select/SelectWithIcon.js +3 -5
- package/lib/Select/props/defaultProps.js +2 -4
- package/lib/Select/props/propTypes.js +2 -4
- package/lib/v1/DateTime/CalendarView.js +9 -6
- package/lib/v1/DateTime/DateTime.js +27 -4
- package/lib/v1/DateTime/DateWidget.js +5 -1
- package/lib/v1/DateTime/DaysRow.js +3 -2
- package/lib/v1/DateTime/props/defaultProps.js +9 -3
- package/lib/v1/DateTime/props/propTypes.js +11 -4
- package/lib/v1/MultiSelect/AdvancedMultiSelect.js +1 -3
- package/lib/v1/MultiSelect/MultiSelect.js +3 -8
- package/lib/v1/MultiSelect/Suggestions.js +4 -8
- package/lib/v1/MultiSelect/props/defaultProps.js +2 -4
- package/lib/v1/MultiSelect/props/propTypes.js +2 -6
- package/lib/v1/Select/GroupSelect.js +3 -8
- package/lib/v1/Select/SelectWithAvatar.js +3 -8
- package/lib/v1/Select/props/defaultProps.js +2 -4
- package/lib/v1/Select/props/propTypes.js +2 -6
- package/package.json +4 -4
- package/result.json +1 -1
|
@@ -1015,12 +1015,8 @@ export class MultiSelectComponent extends React.Component {
|
|
|
1015
1015
|
boxSize,
|
|
1016
1016
|
isLoading,
|
|
1017
1017
|
selectAllText,
|
|
1018
|
-
needSelectAll
|
|
1019
|
-
customProps
|
|
1018
|
+
needSelectAll
|
|
1020
1019
|
} = this.props;
|
|
1021
|
-
const {
|
|
1022
|
-
suggestionsProps = {}
|
|
1023
|
-
} = customProps;
|
|
1024
1020
|
const {
|
|
1025
1021
|
selectedOptions,
|
|
1026
1022
|
searchStr,
|
|
@@ -1110,8 +1106,7 @@ export class MultiSelectComponent extends React.Component {
|
|
|
1110
1106
|
selectedOptions: selectedOptionIds,
|
|
1111
1107
|
a11y: {
|
|
1112
1108
|
role: 'option'
|
|
1113
|
-
}
|
|
1114
|
-
...suggestionsProps
|
|
1109
|
+
}
|
|
1115
1110
|
}) : /*#__PURE__*/React.createElement(EmptyState, {
|
|
1116
1111
|
isLoading: isFetchingOptions,
|
|
1117
1112
|
options: options,
|
|
@@ -27,8 +27,7 @@ export default class Suggestions extends React.PureComponent {
|
|
|
27
27
|
avatarPalette,
|
|
28
28
|
palette,
|
|
29
29
|
htmlId,
|
|
30
|
-
a11y
|
|
31
|
-
needMultiLineText
|
|
30
|
+
a11y
|
|
32
31
|
} = this.props;
|
|
33
32
|
const {
|
|
34
33
|
ariaParentRole,
|
|
@@ -93,8 +92,7 @@ export default class Suggestions extends React.PureComponent {
|
|
|
93
92
|
size: listItemSize,
|
|
94
93
|
avatarPalette: avatarPalette,
|
|
95
94
|
palette: palette,
|
|
96
|
-
a11y: list_a11y
|
|
97
|
-
needMultiLineText: needMultiLineText
|
|
95
|
+
a11y: list_a11y
|
|
98
96
|
});
|
|
99
97
|
} else if (optionType === 'icon') {
|
|
100
98
|
return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
|
|
@@ -114,8 +112,7 @@ export default class Suggestions extends React.PureComponent {
|
|
|
114
112
|
iconSize: iconSize,
|
|
115
113
|
size: listItemSize,
|
|
116
114
|
palette: palette,
|
|
117
|
-
a11y: list_a11y
|
|
118
|
-
needMultiLineText: needMultiLineText
|
|
115
|
+
a11y: list_a11y
|
|
119
116
|
});
|
|
120
117
|
}
|
|
121
118
|
|
|
@@ -134,8 +131,7 @@ export default class Suggestions extends React.PureComponent {
|
|
|
134
131
|
active: isActive,
|
|
135
132
|
size: listItemSize,
|
|
136
133
|
palette: palette,
|
|
137
|
-
a11y: list_a11y
|
|
138
|
-
needMultiLineText: needMultiLineText
|
|
134
|
+
a11y: list_a11y
|
|
139
135
|
});
|
|
140
136
|
})));
|
|
141
137
|
}
|
|
@@ -37,8 +37,7 @@ export const AdvancedGroupMultiSelect_defaultProps = {
|
|
|
37
37
|
needEffect: true,
|
|
38
38
|
palette: 'default',
|
|
39
39
|
isLoading: false,
|
|
40
|
-
dataSelectorId: 'advancedGroupMultiSelect'
|
|
41
|
-
customProps: {}
|
|
40
|
+
dataSelectorId: 'advancedGroupMultiSelect'
|
|
42
41
|
};
|
|
43
42
|
export const AdvancedMultiSelect_defaultProps = {
|
|
44
43
|
animationStyle: 'bounce',
|
|
@@ -155,14 +154,13 @@ export const MultiSelectWithAvatar_defaultProps = {
|
|
|
155
154
|
isLoading: false,
|
|
156
155
|
dataSelectorId: 'multiSelectWithAvatar',
|
|
157
156
|
keepSelectedOptions: false,
|
|
158
|
-
|
|
159
|
-
|
|
157
|
+
customProps: {},
|
|
158
|
+
needResponsive: true
|
|
160
159
|
};
|
|
161
160
|
export const SelectedOptions_defaultProps = {
|
|
162
161
|
size: 'medium',
|
|
163
162
|
dataId: 'selectedOptions'
|
|
164
163
|
};
|
|
165
164
|
export const Suggestions_defaultProps = {
|
|
166
|
-
a11y: {}
|
|
167
|
-
needMultiLineText: false
|
|
165
|
+
a11y: {}
|
|
168
166
|
};
|
|
@@ -110,8 +110,7 @@ export const MultiSelect_propTypes = {
|
|
|
110
110
|
setAriaId: PropTypes.string,
|
|
111
111
|
ariaErrorId: PropTypes.string,
|
|
112
112
|
customProps: PropTypes.shape({
|
|
113
|
-
TextBoxIconProps: PropTypes.object
|
|
114
|
-
suggestionsProps: PropTypes.object
|
|
113
|
+
TextBoxIconProps: PropTypes.object
|
|
115
114
|
})
|
|
116
115
|
};
|
|
117
116
|
export const MultiSelectHeader_propTypes = {
|
|
@@ -177,8 +176,7 @@ export const Suggestions_propTypes = {
|
|
|
177
176
|
logo: PropTypes.string,
|
|
178
177
|
optionType: PropTypes.string,
|
|
179
178
|
listItemProps: PropTypes.object
|
|
180
|
-
}))
|
|
181
|
-
needMultiLineText: PropTypes.bool
|
|
179
|
+
}))
|
|
182
180
|
};
|
|
183
181
|
export const AdvancedGroupMultiSelect_propTypes = {
|
|
184
182
|
animationStyle: PropTypes.string,
|
|
@@ -248,8 +246,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
|
|
|
248
246
|
needToCloseOnSelect: PropTypes.func,
|
|
249
247
|
searchStr: PropTypes.string,
|
|
250
248
|
children: PropTypes.node,
|
|
251
|
-
dataSelectorId: PropTypes.string
|
|
252
|
-
customProps: PropTypes.string
|
|
249
|
+
dataSelectorId: PropTypes.string
|
|
253
250
|
};
|
|
254
251
|
export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
|
|
255
252
|
selectedOptionDetails: PropTypes.string,
|
package/es/Popup/Popup.js
CHANGED
|
@@ -95,6 +95,8 @@ const Popup = function (Component) {
|
|
|
95
95
|
this.preventKeyboardScroll = this.preventKeyboardScroll.bind(this);
|
|
96
96
|
this.addScrollBlockListeners = this.addScrollBlockListeners.bind(this);
|
|
97
97
|
this.removeScrollBlockListeners = this.removeScrollBlockListeners.bind(this);
|
|
98
|
+
this.handlScrollBlockAdd = this.handlScrollBlockAdd.bind(this);
|
|
99
|
+
this.handleScrollBlockRemove = this.handleScrollBlockRemove.bind(this);
|
|
98
100
|
this.handleIntersectionObserver = this.handleIntersectionObserver.bind(this);
|
|
99
101
|
this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
|
|
100
102
|
|
|
@@ -152,9 +154,7 @@ const Popup = function (Component) {
|
|
|
152
154
|
dropElement
|
|
153
155
|
} = this;
|
|
154
156
|
const {
|
|
155
|
-
needResizeHandling: propResizeHandling
|
|
156
|
-
isAbsolutePositioningNeeded,
|
|
157
|
-
isOutsideScrollBlocked
|
|
157
|
+
needResizeHandling: propResizeHandling
|
|
158
158
|
} = this.props;
|
|
159
159
|
|
|
160
160
|
if (oldStateOpen !== isPopupReady) {
|
|
@@ -165,14 +165,10 @@ const Popup = function (Component) {
|
|
|
165
165
|
this.popupObserver.disconnect();
|
|
166
166
|
}
|
|
167
167
|
|
|
168
|
-
if (
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
} else {
|
|
173
|
-
removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
|
|
174
|
-
this.removeScrollBlockListeners();
|
|
175
|
-
}
|
|
168
|
+
if (isPopupReady) {
|
|
169
|
+
this.handlScrollBlockAdd();
|
|
170
|
+
} else {
|
|
171
|
+
this.handleScrollBlockRemove();
|
|
176
172
|
}
|
|
177
173
|
}
|
|
178
174
|
}
|
|
@@ -189,8 +185,7 @@ const Popup = function (Component) {
|
|
|
189
185
|
|
|
190
186
|
return res;
|
|
191
187
|
}, popups);
|
|
192
|
-
|
|
193
|
-
this.removeScrollBlockListeners();
|
|
188
|
+
this.handleScrollBlockRemove();
|
|
194
189
|
let noPopups = true;
|
|
195
190
|
|
|
196
191
|
for (const i in popups) {
|
|
@@ -215,6 +210,30 @@ const Popup = function (Component) {
|
|
|
215
210
|
}
|
|
216
211
|
}
|
|
217
212
|
|
|
213
|
+
handlScrollBlockAdd() {
|
|
214
|
+
const {
|
|
215
|
+
isAbsolutePositioningNeeded,
|
|
216
|
+
isOutsideScrollBlocked
|
|
217
|
+
} = this.props;
|
|
218
|
+
|
|
219
|
+
if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
|
|
220
|
+
addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
|
|
221
|
+
this.addScrollBlockListeners();
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
handleScrollBlockRemove() {
|
|
226
|
+
const {
|
|
227
|
+
isAbsolutePositioningNeeded,
|
|
228
|
+
isOutsideScrollBlocked
|
|
229
|
+
} = this.props;
|
|
230
|
+
|
|
231
|
+
if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
|
|
232
|
+
removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
|
|
233
|
+
this.removeScrollBlockListeners();
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
218
237
|
addScrollBlockListeners() {
|
|
219
238
|
document.addEventListener('wheel', this.handleBlockScroll, {
|
|
220
239
|
capture: true,
|
|
@@ -11,29 +11,33 @@ function handleObserverCallbacks(entries) {
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
export function addIntersectionObserver(element, callback, options) {
|
|
14
|
-
if (
|
|
15
|
-
intersectionObserver
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
if (!!element && typeof callback == 'function') {
|
|
15
|
+
if (intersectionObserver === null && observerCallbacks === null) {
|
|
16
|
+
intersectionObserver = new IntersectionObserver(entries => {
|
|
17
|
+
handleObserverCallbacks(entries);
|
|
18
|
+
}, options);
|
|
19
|
+
observerCallbacks = new Map();
|
|
20
|
+
}
|
|
20
21
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
intersectionObserver.observe(element);
|
|
23
|
+
let oldCallbacks = observerCallbacks.get(element) || [];
|
|
24
|
+
observerCallbacks.set(element, [...oldCallbacks, callback]);
|
|
25
|
+
}
|
|
24
26
|
}
|
|
25
27
|
export function removeIntersectionObserver(element, callback) {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
+
if (!!element && typeof callback == 'function') {
|
|
29
|
+
let oldCallbacks = observerCallbacks ? observerCallbacks.get(element) || [] : [];
|
|
30
|
+
oldCallbacks = oldCallbacks.filter(handler => handler !== callback);
|
|
28
31
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
if (intersectionObserver && oldCallbacks.length === 0) {
|
|
33
|
+
observerCallbacks.delete(element);
|
|
34
|
+
intersectionObserver.unobserve(element);
|
|
35
|
+
}
|
|
33
36
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
37
|
+
if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
|
|
38
|
+
intersectionObserver.disconnect();
|
|
39
|
+
intersectionObserver = null;
|
|
40
|
+
observerCallbacks = null;
|
|
41
|
+
}
|
|
38
42
|
}
|
|
39
43
|
}
|
package/es/Select/GroupSelect.js
CHANGED
|
@@ -588,12 +588,8 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
588
588
|
htmlId,
|
|
589
589
|
iconOnHover,
|
|
590
590
|
isLoading,
|
|
591
|
-
dataSelectorId
|
|
592
|
-
customProps
|
|
591
|
+
dataSelectorId
|
|
593
592
|
} = this.props;
|
|
594
|
-
const {
|
|
595
|
-
suggestionsProps = {}
|
|
596
|
-
} = customProps;
|
|
597
593
|
i18nKeys = Object.assign({}, i18nKeys, {
|
|
598
594
|
emptyText: i18nKeys.emptyText || emptyMessage,
|
|
599
595
|
searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
|
|
@@ -786,8 +782,7 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
786
782
|
ariaParentRole: 'listbox',
|
|
787
783
|
role: 'option'
|
|
788
784
|
},
|
|
789
|
-
dataId: `${dataId}_Options
|
|
790
|
-
...suggestionsProps
|
|
785
|
+
dataId: `${dataId}_Options`
|
|
791
786
|
}));
|
|
792
787
|
}) : /*#__PURE__*/React.createElement(EmptyState, {
|
|
793
788
|
options: revampedGroups,
|
|
@@ -163,12 +163,8 @@ class SelectWithAvatarComponent extends SelectComponent {
|
|
|
163
163
|
needEffect,
|
|
164
164
|
isLoading,
|
|
165
165
|
dataSelectorId,
|
|
166
|
-
getTargetRef
|
|
167
|
-
customProps
|
|
166
|
+
getTargetRef
|
|
168
167
|
} = this.props;
|
|
169
|
-
const {
|
|
170
|
-
suggestionsProps = {}
|
|
171
|
-
} = customProps;
|
|
172
168
|
i18nKeys = Object.assign({}, i18nKeys, {
|
|
173
169
|
emptyText: i18nKeys.emptyText || emptyMessage,
|
|
174
170
|
searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
|
|
@@ -325,8 +321,7 @@ class SelectWithAvatarComponent extends SelectComponent {
|
|
|
325
321
|
a11y: {
|
|
326
322
|
ariaParentRole: 'listbox',
|
|
327
323
|
role: 'option'
|
|
328
|
-
}
|
|
329
|
-
...suggestionsProps
|
|
324
|
+
}
|
|
330
325
|
}) : /*#__PURE__*/React.createElement(EmptyState, {
|
|
331
326
|
isLoading: isFetchingOptions,
|
|
332
327
|
options: options,
|
|
@@ -367,8 +367,7 @@ class SelectWithIcon extends Component {
|
|
|
367
367
|
let {
|
|
368
368
|
TextBoxProps = {},
|
|
369
369
|
DropdownSearchTextBoxProps = {},
|
|
370
|
-
TextBoxIconProps = {}
|
|
371
|
-
listItemProps = {}
|
|
370
|
+
TextBoxIconProps = {}
|
|
372
371
|
} = customProps;
|
|
373
372
|
return /*#__PURE__*/React.createElement("div", {
|
|
374
373
|
className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
|
|
@@ -531,8 +530,7 @@ class SelectWithIcon extends Component {
|
|
|
531
530
|
role: 'option',
|
|
532
531
|
ariaSelected: selectedId === options[idKey],
|
|
533
532
|
ariaLabel: options[valueKey]
|
|
534
|
-
}
|
|
535
|
-
...listItemProps
|
|
533
|
+
}
|
|
536
534
|
});
|
|
537
535
|
})) : /*#__PURE__*/React.createElement(EmptyState, {
|
|
538
536
|
isLoading: isFetchingOptions,
|
|
@@ -69,8 +69,7 @@ export const GroupSelect_defaultProps = {
|
|
|
69
69
|
isRestrictScroll: false,
|
|
70
70
|
i18nKeys: {},
|
|
71
71
|
iconOnHover: false,
|
|
72
|
-
isLoading: false
|
|
73
|
-
customProps: {}
|
|
72
|
+
isLoading: false
|
|
74
73
|
};
|
|
75
74
|
export const SelectWithAvatar_defaultProps = {
|
|
76
75
|
animationStyle: 'bounce',
|
|
@@ -96,8 +95,7 @@ export const SelectWithAvatar_defaultProps = {
|
|
|
96
95
|
isRestrictScroll: false,
|
|
97
96
|
i18nKeys: {},
|
|
98
97
|
needEffect: true,
|
|
99
|
-
isLoading: false
|
|
100
|
-
customProps: {}
|
|
98
|
+
isLoading: false
|
|
101
99
|
};
|
|
102
100
|
export const SelectWithIcon_defaultProps = {
|
|
103
101
|
isReadOnly: false,
|
|
@@ -174,8 +174,7 @@ export const GroupSelect_propTypes = {
|
|
|
174
174
|
}),
|
|
175
175
|
isLoading: PropTypes.bool,
|
|
176
176
|
dataSelectorId: PropTypes.string,
|
|
177
|
-
isDefaultSelectValue: PropTypes.bool
|
|
178
|
-
customProps: PropTypes.string
|
|
177
|
+
isDefaultSelectValue: PropTypes.bool
|
|
179
178
|
};
|
|
180
179
|
export const SelectWithAvatar_propTypes = { ...Select_propTypes,
|
|
181
180
|
textBoxClass: PropTypes.string,
|
|
@@ -236,8 +235,7 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
|
|
|
236
235
|
htmlId: PropTypes.string,
|
|
237
236
|
needEffect: PropTypes.bool,
|
|
238
237
|
isLoading: PropTypes.bool,
|
|
239
|
-
dataSelectorId: PropTypes.string
|
|
240
|
-
customProps: PropTypes.string
|
|
238
|
+
dataSelectorId: PropTypes.string
|
|
241
239
|
};
|
|
242
240
|
export const SelectWithIcon_propTypes = {
|
|
243
241
|
animationStyle: PropTypes.oneOf(['default', 'bounce']),
|
|
@@ -34,10 +34,12 @@ export default class CalendarView extends React.PureComponent {
|
|
|
34
34
|
todayDate,
|
|
35
35
|
todayYear,
|
|
36
36
|
startDate,
|
|
37
|
-
endDate
|
|
37
|
+
endDate,
|
|
38
|
+
weekStartDay,
|
|
39
|
+
holidays
|
|
38
40
|
} = this.props;
|
|
39
41
|
const userSeeDate = new Date(year, month, 1);
|
|
40
|
-
const userSeeDay = userSeeDate.getDay() + 1;
|
|
42
|
+
const userSeeDay = (userSeeDate.getDay() - weekStartDay + dayNames.length) % dayNames.length + 1;
|
|
41
43
|
const userSeeYear = userSeeDate.getFullYear();
|
|
42
44
|
const userSeeMonth = userSeeDate.getMonth();
|
|
43
45
|
const monthEnd = getMonthEnd(month, year);
|
|
@@ -65,10 +67,10 @@ export default class CalendarView extends React.PureComponent {
|
|
|
65
67
|
let output = null;
|
|
66
68
|
|
|
67
69
|
for (let i = 1; i <= 7; i++) {
|
|
68
|
-
let tdclass = `${style.datesStr} ${style.grid}`;
|
|
70
|
+
let tdclass = `${style.datesStr} ${style.grid}`; // if (i === 1) {
|
|
69
71
|
|
|
70
|
-
if (i
|
|
71
|
-
tdclass += ` ${style.
|
|
72
|
+
if (holidays.includes(i - 1)) {
|
|
73
|
+
tdclass += ` ${style.holiday}`;
|
|
72
74
|
}
|
|
73
75
|
|
|
74
76
|
if (incremleti >= userSeeDay && incremday <= monthEnd) {
|
|
@@ -177,7 +179,8 @@ export default class CalendarView extends React.PureComponent {
|
|
|
177
179
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DaysRow, {
|
|
178
180
|
dayNames: dayNames,
|
|
179
181
|
dayNamesShort: dayNamesShort,
|
|
180
|
-
ariaLabel: dayNamesShort
|
|
182
|
+
ariaLabel: dayNamesShort,
|
|
183
|
+
holidays: holidays
|
|
181
184
|
}), /*#__PURE__*/React.createElement("div", {
|
|
182
185
|
"data-id": `${dataId}_dateContainer`,
|
|
183
186
|
"data-test-id": `${dataId}_dateContainer`,
|
|
@@ -652,7 +652,9 @@ export default class DateTime extends React.PureComponent {
|
|
|
652
652
|
dropBoxPortalId,
|
|
653
653
|
startDate,
|
|
654
654
|
endDate,
|
|
655
|
-
customProps = {}
|
|
655
|
+
customProps = {},
|
|
656
|
+
holidays,
|
|
657
|
+
weekStartDay
|
|
656
658
|
} = this.props;
|
|
657
659
|
const {
|
|
658
660
|
TimeProps = {}
|
|
@@ -671,6 +673,16 @@ export default class DateTime extends React.PureComponent {
|
|
|
671
673
|
dayNamesShort = dayNamesShortDefault
|
|
672
674
|
} = i18nKeys;
|
|
673
675
|
const showmonthtxt = title(date, year, month, monthNames);
|
|
676
|
+
let customDayNames = dayNames,
|
|
677
|
+
customDayNamesShort = dayNamesShort,
|
|
678
|
+
customizedHolidays = holidays;
|
|
679
|
+
|
|
680
|
+
if (weekStartDay !== 0) {
|
|
681
|
+
customDayNames = [...dayNames.slice(weekStartDay), ...dayNames.slice(0, weekStartDay)];
|
|
682
|
+
customDayNamesShort = [...dayNamesShort.slice(weekStartDay), ...dayNamesShort.slice(0, weekStartDay)];
|
|
683
|
+
customizedHolidays = holidays.map(dayIndex => customDayNames.indexOf(dayNames[dayIndex]));
|
|
684
|
+
}
|
|
685
|
+
|
|
674
686
|
const childEle = /*#__PURE__*/React.createElement("div", {
|
|
675
687
|
className: `${style.container} ${innerClass}`,
|
|
676
688
|
"data-id": `${dataId}_Calendar`,
|
|
@@ -692,13 +704,15 @@ export default class DateTime extends React.PureComponent {
|
|
|
692
704
|
year: year,
|
|
693
705
|
month: month,
|
|
694
706
|
onSelect: this.dateSelect,
|
|
695
|
-
dayNames:
|
|
696
|
-
dayNamesShort:
|
|
707
|
+
dayNames: customDayNames,
|
|
708
|
+
dayNamesShort: customDayNamesShort,
|
|
697
709
|
todayDate: todayDate,
|
|
698
710
|
todayMonth: todayMonth,
|
|
699
711
|
todayYear: todayYear,
|
|
700
712
|
startDate: startDate,
|
|
701
|
-
endDate: endDate
|
|
713
|
+
endDate: endDate,
|
|
714
|
+
weekStartDay: weekStartDay,
|
|
715
|
+
holidays: customizedHolidays
|
|
702
716
|
}), isDateTimeField ? /*#__PURE__*/React.createElement(Time, {
|
|
703
717
|
timeText: timeText,
|
|
704
718
|
dataId: dataId,
|
|
@@ -1006,6 +1006,8 @@ class DateWidgetComponent extends React.Component {
|
|
|
1006
1006
|
onError,
|
|
1007
1007
|
startDate,
|
|
1008
1008
|
endDate,
|
|
1009
|
+
weekStartDay,
|
|
1010
|
+
holidays,
|
|
1009
1011
|
customProps = {}
|
|
1010
1012
|
} = this.props;
|
|
1011
1013
|
const {
|
|
@@ -1105,7 +1107,9 @@ class DateWidgetComponent extends React.Component {
|
|
|
1105
1107
|
onError: onError,
|
|
1106
1108
|
startDate: startDate,
|
|
1107
1109
|
endDate: endDate,
|
|
1108
|
-
customProps: DateTimeProps
|
|
1110
|
+
customProps: DateTimeProps,
|
|
1111
|
+
weekStartDay: weekStartDay,
|
|
1112
|
+
holidays: holidays
|
|
1109
1113
|
}));
|
|
1110
1114
|
}
|
|
1111
1115
|
|
|
@@ -13,7 +13,8 @@ export default class DaysRow extends PureComponent {
|
|
|
13
13
|
render() {
|
|
14
14
|
const {
|
|
15
15
|
dayNames,
|
|
16
|
-
dayNamesShort
|
|
16
|
+
dayNamesShort,
|
|
17
|
+
holidays
|
|
17
18
|
} = this.props;
|
|
18
19
|
return /*#__PURE__*/React.createElement(Container, {
|
|
19
20
|
alignBox: "row",
|
|
@@ -21,7 +22,7 @@ export default class DaysRow extends PureComponent {
|
|
|
21
22
|
className: style.days
|
|
22
23
|
}, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
|
|
23
24
|
key: dayName,
|
|
24
|
-
className: `${style.daysStr} ${style.grid} ${index
|
|
25
|
+
className: `${style.daysStr} ${style.grid} ${holidays.includes(index) ? style.holiday : ''}`,
|
|
25
26
|
"data-title": dayName,
|
|
26
27
|
"aria-label": dayName
|
|
27
28
|
}, dayNamesShort[index])));
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export const CalendarView_defaultProps = {
|
|
2
2
|
dataId: 'dateContainer',
|
|
3
|
-
needBorder: true
|
|
3
|
+
needBorder: true,
|
|
4
|
+
weekStartDay: 0,
|
|
5
|
+
holidays: [0]
|
|
4
6
|
};
|
|
5
7
|
export const Span_defaultProps = {
|
|
6
8
|
dataId: 'calendar-view'
|
|
@@ -20,7 +22,9 @@ export const DateTime_defaultProps = {
|
|
|
20
22
|
i18nKeys: {},
|
|
21
23
|
is24Hour: false,
|
|
22
24
|
isDefaultPosition: false,
|
|
23
|
-
customDateFormat: null
|
|
25
|
+
customDateFormat: null,
|
|
26
|
+
weekStartDay: 0,
|
|
27
|
+
holidays: [0]
|
|
24
28
|
};
|
|
25
29
|
export const DateWidget_defaultProps = {
|
|
26
30
|
borderColor: 'default',
|
|
@@ -43,7 +47,9 @@ export const DateWidget_defaultProps = {
|
|
|
43
47
|
needErrorOnBlur: false,
|
|
44
48
|
isEditable: false,
|
|
45
49
|
iconOnHover: false,
|
|
46
|
-
is24Hour: false
|
|
50
|
+
is24Hour: false,
|
|
51
|
+
weekStartDay: 0,
|
|
52
|
+
holidays: [0]
|
|
47
53
|
};
|
|
48
54
|
export const YearView_defaultProps = {
|
|
49
55
|
dataId: 'dateContainer',
|
|
@@ -13,7 +13,9 @@ export const CalendarView_propTypes = {
|
|
|
13
13
|
todayDate: PropTypes.string,
|
|
14
14
|
todayYear: PropTypes.string,
|
|
15
15
|
startDate: PropTypes.string,
|
|
16
|
-
endDate: PropTypes.string
|
|
16
|
+
endDate: PropTypes.string,
|
|
17
|
+
weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
|
|
18
|
+
holidays: PropTypes.arrayOf(PropTypes.number)
|
|
17
19
|
};
|
|
18
20
|
export const Span_propTypes = {
|
|
19
21
|
dataId: PropTypes.string,
|
|
@@ -79,7 +81,9 @@ export const DateTime_propTypes = {
|
|
|
79
81
|
dropBoxPortalId: PropTypes.string,
|
|
80
82
|
startDate: PropTypes.string,
|
|
81
83
|
endDate: PropTypes.string,
|
|
82
|
-
customProps: PropTypes.object
|
|
84
|
+
customProps: PropTypes.object,
|
|
85
|
+
weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
|
|
86
|
+
holidays: PropTypes.arrayOf(PropTypes.number)
|
|
83
87
|
};
|
|
84
88
|
export const DateWidget_propTypes = {
|
|
85
89
|
borderColor: PropTypes.oneOf(['transparent', 'default']),
|
|
@@ -150,7 +154,9 @@ export const DateWidget_propTypes = {
|
|
|
150
154
|
startDate: PropTypes.string,
|
|
151
155
|
endDate: PropTypes.string,
|
|
152
156
|
getPopupProps: PropTypes.func,
|
|
153
|
-
customProps: PropTypes.object
|
|
157
|
+
customProps: PropTypes.object,
|
|
158
|
+
weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
|
|
159
|
+
holidays: PropTypes.arrayOf(PropTypes.number)
|
|
154
160
|
};
|
|
155
161
|
export const YearView_propTypes = {
|
|
156
162
|
onSelectMonth: PropTypes.func,
|
|
@@ -177,7 +183,8 @@ export const DateTimePopupHeader_propTypes = {
|
|
|
177
183
|
};
|
|
178
184
|
export const DaysRow_propTypes = {
|
|
179
185
|
dayNames: PropTypes.array,
|
|
180
|
-
dayNamesShort: PropTypes.object
|
|
186
|
+
dayNamesShort: PropTypes.object,
|
|
187
|
+
holidays: PropTypes.arrayOf(PropTypes.number)
|
|
181
188
|
};
|
|
182
189
|
export const Time_propTypes = {
|
|
183
190
|
timeText: PropTypes.string,
|
|
@@ -549,8 +549,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
|
|
|
549
549
|
role: 'option'
|
|
550
550
|
},
|
|
551
551
|
dataId: `${dataIdMultiSelectComp}_Options`,
|
|
552
|
-
...SuggestionsProps
|
|
553
|
-
needMultiLineText: true
|
|
552
|
+
...SuggestionsProps
|
|
554
553
|
}) : /*#__PURE__*/React.createElement(EmptyState, {
|
|
555
554
|
isLoading: isFetchingOptions,
|
|
556
555
|
options: options,
|
|
@@ -1008,12 +1008,8 @@ export class MultiSelectComponent extends React.Component {
|
|
|
1008
1008
|
boxSize,
|
|
1009
1009
|
isLoading,
|
|
1010
1010
|
selectAllText,
|
|
1011
|
-
needSelectAll
|
|
1012
|
-
customProps
|
|
1011
|
+
needSelectAll
|
|
1013
1012
|
} = this.props;
|
|
1014
|
-
const {
|
|
1015
|
-
suggestionsProps = {}
|
|
1016
|
-
} = customProps;
|
|
1017
1013
|
const {
|
|
1018
1014
|
selectedOptions,
|
|
1019
1015
|
searchStr,
|
|
@@ -1103,8 +1099,7 @@ export class MultiSelectComponent extends React.Component {
|
|
|
1103
1099
|
selectedOptions: selectedOptionIds,
|
|
1104
1100
|
a11y: {
|
|
1105
1101
|
role: 'option'
|
|
1106
|
-
}
|
|
1107
|
-
...suggestionsProps
|
|
1102
|
+
}
|
|
1108
1103
|
}) : /*#__PURE__*/React.createElement(EmptyState, {
|
|
1109
1104
|
isLoading: isFetchingOptions,
|
|
1110
1105
|
options: options,
|
|
@@ -27,8 +27,7 @@ export default class Suggestions extends React.PureComponent {
|
|
|
27
27
|
avatarPalette,
|
|
28
28
|
palette,
|
|
29
29
|
htmlId,
|
|
30
|
-
a11y
|
|
31
|
-
needMultiLineText
|
|
30
|
+
a11y
|
|
32
31
|
} = this.props;
|
|
33
32
|
const {
|
|
34
33
|
ariaParentRole,
|
|
@@ -93,8 +92,7 @@ export default class Suggestions extends React.PureComponent {
|
|
|
93
92
|
size: listItemSize,
|
|
94
93
|
avatarPalette: avatarPalette,
|
|
95
94
|
palette: palette,
|
|
96
|
-
a11y: list_a11y
|
|
97
|
-
needMultiLineText: needMultiLineText
|
|
95
|
+
a11y: list_a11y
|
|
98
96
|
});
|
|
99
97
|
} else if (optionType === 'icon') {
|
|
100
98
|
return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
|
|
@@ -114,8 +112,7 @@ export default class Suggestions extends React.PureComponent {
|
|
|
114
112
|
iconSize: iconSize,
|
|
115
113
|
size: listItemSize,
|
|
116
114
|
palette: palette,
|
|
117
|
-
a11y: list_a11y
|
|
118
|
-
needMultiLineText: needMultiLineText
|
|
115
|
+
a11y: list_a11y
|
|
119
116
|
});
|
|
120
117
|
}
|
|
121
118
|
|
|
@@ -134,8 +131,7 @@ export default class Suggestions extends React.PureComponent {
|
|
|
134
131
|
active: isActive,
|
|
135
132
|
size: listItemSize,
|
|
136
133
|
palette: palette,
|
|
137
|
-
a11y: list_a11y
|
|
138
|
-
needMultiLineText: needMultiLineText
|
|
134
|
+
a11y: list_a11y
|
|
139
135
|
});
|
|
140
136
|
})));
|
|
141
137
|
}
|
|
@@ -117,8 +117,7 @@ export const MultiSelect_defaultProps = {
|
|
|
117
117
|
keepSelectedOptions: false,
|
|
118
118
|
selectedOptionsCount: 0,
|
|
119
119
|
cardHeaderName: '',
|
|
120
|
-
needResponsive: true
|
|
121
|
-
customProps: {}
|
|
120
|
+
needResponsive: true
|
|
122
121
|
};
|
|
123
122
|
export const MultiSelectHeader_defaultProps = {
|
|
124
123
|
dataId: 'MultiSelectHeader'
|
|
@@ -162,6 +161,5 @@ export const SelectedOptions_defaultProps = {
|
|
|
162
161
|
dataId: 'selectedOptions'
|
|
163
162
|
};
|
|
164
163
|
export const Suggestions_defaultProps = {
|
|
165
|
-
a11y: {}
|
|
166
|
-
needMultiLineText: false
|
|
164
|
+
a11y: {}
|
|
167
165
|
};
|