@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256
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/README.md +20 -3
- package/assets/Appearance/dark/mode/Component_DarkMode.module.css +4 -4
- package/assets/Appearance/dark/themes/blue/blue_componentsCTA_DarkModifyCategory.module.css +14 -0
- package/assets/Appearance/dark/themes/green/green_componentsCTA_DarkModifyCategory.module.css +14 -0
- package/assets/Appearance/dark/themes/orange/orange_componentsCTA_DarkModifyCategory.module.css +14 -0
- package/assets/Appearance/dark/themes/red/red_componentsCTA_DarkModifyCategory.module.css +14 -0
- package/assets/Appearance/dark/themes/yellow/yellow_componentsCTA_DarkModifyCategory.module.css +14 -0
- package/assets/Appearance/light/mode/Component_LightMode.module.css +6 -6
- package/assets/Appearance/light/themes/blue/blue_componentsCTA_LightModifyCategory.module.css +14 -0
- package/assets/Appearance/light/themes/green/green_componentsCTA_LightModifyCategory.module.css +14 -0
- package/assets/Appearance/light/themes/orange/orange_componentsCTA_LightModifyCategory.module.css +14 -0
- package/assets/Appearance/light/themes/red/red_componentsCTA_LightModifyCategory.module.css +14 -0
- package/assets/Appearance/light/themes/yellow/yellow_componentsCTA_LightModifyCategory.module.css +14 -0
- package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +3 -3
- package/assets/Appearance/pureDark/themes/blue/blue_componentsCTA_PureDarkModifyCategory.module.css +14 -0
- package/assets/Appearance/pureDark/themes/green/green_componentsCTA_PureDarkModifyCategory.module.css +14 -0
- package/assets/Appearance/pureDark/themes/orange/orange_componentsCTA_PureDarkModifyCategory.module.css +14 -0
- package/assets/Appearance/pureDark/themes/red/red_componentsCTA_PureDarkModifyCategory.module.css +14 -0
- package/assets/Appearance/pureDark/themes/yellow/yellow_componentsCTA_PureDarkModifyCategory.module.css +14 -0
- package/cbt.config.js +12 -3
- package/es/Avatar/Avatar.js +1 -2
- package/es/Button/css/cssJSLogic.js +4 -5
- package/es/DateTime/DateTime.js +3 -6
- package/es/DateTime/DateWidget.js +34 -11
- package/es/DateTime/YearView.js +5 -6
- package/es/DateTime/common.js +2 -9
- package/es/DateTime/dateFormatUtils/dateFormat.js +55 -76
- package/es/DateTime/dateFormatUtils/index.js +7 -12
- package/es/DateTime/dateFormatUtils/timeChange.js +3 -4
- package/es/DateTime/dateFormatUtils/yearChange.js +3 -4
- package/es/DropBox/DropBoxElement/css/cssJSLogic.js +5 -6
- package/es/Layout/utils.js +1 -2
- package/es/ListItem/ListContainer.js +4 -5
- package/es/Modal/Portal/Portal.js +4 -5
- package/es/MultiSelect/AdvancedGroupMultiSelect.js +91 -103
- package/es/MultiSelect/AdvancedMultiSelect.js +74 -80
- package/es/MultiSelect/MultiSelect.js +4 -13
- package/es/MultiSelect/Suggestions.js +14 -17
- package/es/Popup/Popup.js +1 -4
- package/es/Provider/IdProvider.js +4 -5
- package/es/Provider/LibraryContext.js +15 -12
- package/es/Provider/NumberGenerator/NumberGenerator.js +15 -17
- package/es/Provider/ZindexProvider.js +4 -5
- package/es/Responsive/CustomResponsive.js +8 -11
- package/es/Responsive/ResizeComponent.js +1 -3
- package/es/Responsive/Responsive.js +9 -12
- package/es/Responsive/sizeObservers.js +1 -5
- package/es/ResponsiveDropBox/ResponsiveDropBox.js +10 -14
- package/es/Select/GroupSelect.js +98 -103
- package/es/Select/Select.js +110 -116
- package/es/Select/SelectWithAvatar.js +91 -95
- package/es/Select/SelectWithIcon.js +104 -109
- package/es/Select/__tests__/Select.spec.js +6 -9
- package/es/Tab/Tab.js +90 -40
- package/es/Tab/Tab.module.css +25 -0
- package/es/Tab/TabContent.js +16 -19
- package/es/Tab/TabContentWrapper.js +19 -22
- package/es/Tab/TabWrapper.js +15 -16
- package/es/Tab/Tabs.js +105 -81
- package/es/Tab/Tabs.module.css +48 -3
- package/es/Tab/__tests__/Tab.spec.js +112 -0
- package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +316 -0
- package/es/Tab/props/defaultProps.js +3 -2
- package/es/Tab/props/propTypes.js +12 -3
- package/es/Tab/utils/tabConfigs.js +5 -0
- package/es/Typography/css/cssJSLogic.js +4 -5
- package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -2
- package/es/utils/Common.js +10 -31
- package/es/utils/datetime/common.js +12 -9
- package/es/utils/dropDownUtils.js +7 -11
- package/es/utils/getInitial.js +1 -3
- package/es/v1/Button/css/cssJSLogic.js +4 -8
- package/es/v1/Label/css/cssJSLogic.js +4 -5
- package/es/v1/Switch/css/cssJSLogic.js +4 -5
- package/es/v1/helpers/colorHelpers/colorHelper.js +28 -39
- package/lib/DateTime/DateWidget.js +33 -6
- package/lib/Provider/LibraryContext.js +5 -1
- package/lib/Tab/Tab.js +62 -9
- package/lib/Tab/Tab.module.css +25 -0
- package/lib/Tab/Tabs.js +34 -3
- package/lib/Tab/Tabs.module.css +48 -3
- package/lib/Tab/__tests__/Tab.spec.js +115 -0
- package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +316 -0
- package/lib/Tab/props/defaultProps.js +3 -2
- package/lib/Tab/props/propTypes.js +14 -3
- package/lib/Tab/utils/tabConfigs.js +7 -1
- package/lib/utils/datetime/common.js +10 -2
- package/package.json +12 -11
package/es/DateTime/YearView.js
CHANGED
|
@@ -194,12 +194,11 @@ export default class YearView extends React.PureComponent {
|
|
|
194
194
|
onSelectYear && onSelectYear(year);
|
|
195
195
|
}
|
|
196
196
|
|
|
197
|
-
renderListItem(
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
} = _ref;
|
|
197
|
+
renderListItem({
|
|
198
|
+
index,
|
|
199
|
+
style: virtualizerStyle,
|
|
200
|
+
ref
|
|
201
|
+
}) {
|
|
203
202
|
const {
|
|
204
203
|
years
|
|
205
204
|
} = this;
|
package/es/DateTime/common.js
CHANGED
|
@@ -1,16 +1,9 @@
|
|
|
1
|
-
export function bind() {
|
|
2
|
-
for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
3
|
-
handlers[_key] = arguments[_key];
|
|
4
|
-
}
|
|
5
|
-
|
|
1
|
+
export function bind(...handlers) {
|
|
6
2
|
handlers.forEach(handler => {
|
|
7
3
|
this[handler] = this[handler].bind(this);
|
|
8
4
|
});
|
|
9
5
|
}
|
|
10
|
-
export function formatValue() {
|
|
11
|
-
let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
12
|
-
let valueField = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
|
|
13
|
-
let textField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'name';
|
|
6
|
+
export function formatValue(values = [], valueField = 'id', textField = 'name') {
|
|
14
7
|
return values && values.map(value => {
|
|
15
8
|
let formattedValue = value;
|
|
16
9
|
|
|
@@ -12,9 +12,7 @@ import { formatDate } from "../../utils/datetime/common";
|
|
|
12
12
|
import { defaultFormat, supportedPatterns, // patternChangeStr,
|
|
13
13
|
patternSplitStr, INCONSTANT, flags } from "../constants";
|
|
14
14
|
|
|
15
|
-
function getDateFormatString() {
|
|
16
|
-
let dateFormatArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
17
|
-
let datePatternArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
15
|
+
function getDateFormatString(dateFormatArr = [], datePatternArr = []) {
|
|
18
16
|
return dateFormatArr.reduce((res, dateStr, index) => {
|
|
19
17
|
const patternStr = datePatternArr[index] || '';
|
|
20
18
|
res += dateStr + patternStr;
|
|
@@ -22,14 +20,8 @@ function getDateFormatString() {
|
|
|
22
20
|
}, '');
|
|
23
21
|
}
|
|
24
22
|
|
|
25
|
-
function getIsValidPattern() {
|
|
26
|
-
|
|
27
|
-
let datePatternArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
28
|
-
|
|
29
|
-
const isValueInArray = function () {
|
|
30
|
-
let possibleFormat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
31
|
-
return possibleFormat.some(str => dateFormatArr.indexOf(str) >= 0);
|
|
32
|
-
};
|
|
23
|
+
function getIsValidPattern(dateFormatArr = [], datePatternArr = []) {
|
|
24
|
+
const isValueInArray = (possibleFormat = []) => possibleFormat.some(str => dateFormatArr.indexOf(str) >= 0);
|
|
33
25
|
|
|
34
26
|
const haveDay = isValueInArray(flags.day);
|
|
35
27
|
const haveMonth = isValueInArray(flags.month);
|
|
@@ -38,14 +30,12 @@ function getIsValidPattern() {
|
|
|
38
30
|
return haveDay && haveMonth && (haveYear || !haveYear) && isValidPattern;
|
|
39
31
|
}
|
|
40
32
|
|
|
41
|
-
export function getDateFormatDetails(
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
isDateTime
|
|
48
|
-
} = arguments.length > 1 ? arguments[1] : undefined;
|
|
33
|
+
export function getDateFormatDetails(dateFormat = '', {
|
|
34
|
+
isHideCurrentYear,
|
|
35
|
+
value,
|
|
36
|
+
timeZone,
|
|
37
|
+
isDateTime
|
|
38
|
+
}) {
|
|
49
39
|
let dayInfo = {};
|
|
50
40
|
let monthInfo = {};
|
|
51
41
|
let yearInfo = {};
|
|
@@ -126,11 +116,10 @@ export function getDateFormatDetails() {
|
|
|
126
116
|
};
|
|
127
117
|
}
|
|
128
118
|
|
|
129
|
-
function getDisplayFormatValue(dateVal, formatVal
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
} = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
119
|
+
function getDisplayFormatValue(dateVal, formatVal, {
|
|
120
|
+
i18nShortMonths = [],
|
|
121
|
+
i18nMonths = []
|
|
122
|
+
} = {}) {
|
|
134
123
|
const {
|
|
135
124
|
length,
|
|
136
125
|
type
|
|
@@ -151,11 +140,10 @@ function getDisplayFormatValue(dateVal, formatVal) {
|
|
|
151
140
|
return addZero(dateVal, length);
|
|
152
141
|
}
|
|
153
142
|
|
|
154
|
-
function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
} = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
|
|
143
|
+
function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder, {
|
|
144
|
+
i18nShortMonths,
|
|
145
|
+
i18nMonths
|
|
146
|
+
} = {}) {
|
|
159
147
|
const dateString = dateFormatArr.reduce((res, formatVal, index) => {
|
|
160
148
|
const {
|
|
161
149
|
type: dateFormatVal = ''
|
|
@@ -172,15 +160,11 @@ function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder) {
|
|
|
172
160
|
return dateString;
|
|
173
161
|
}
|
|
174
162
|
|
|
175
|
-
export function getDateTimeString(
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
i18nShortMonths,
|
|
181
|
-
i18nMonths,
|
|
182
|
-
is24Hour
|
|
183
|
-
} = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
163
|
+
export function getDateTimeString(values = {}, dateFormatDetails = {}, isDateTime, {
|
|
164
|
+
i18nShortMonths,
|
|
165
|
+
i18nMonths,
|
|
166
|
+
is24Hour
|
|
167
|
+
} = {}) {
|
|
184
168
|
const {
|
|
185
169
|
day,
|
|
186
170
|
month,
|
|
@@ -220,10 +204,9 @@ export function getDateText(value, isDateTime, timeZone) {
|
|
|
220
204
|
|
|
221
205
|
return value ? isDateTime ? timeZone ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : new Date(value) : timeZone ? datetime.toDate(value) : new Date(value) : new Date();
|
|
222
206
|
}
|
|
223
|
-
export function getDateDetails(value, localValues, isDateTime, timeZone,
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
} = _ref;
|
|
207
|
+
export function getDateDetails(value, localValues, isDateTime, timeZone, {
|
|
208
|
+
is24Hour
|
|
209
|
+
}) {
|
|
227
210
|
const {
|
|
228
211
|
day,
|
|
229
212
|
month,
|
|
@@ -273,10 +256,9 @@ export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
|
|
|
273
256
|
|
|
274
257
|
return localValues;
|
|
275
258
|
}
|
|
276
|
-
export function getIsValidDate(values, isDateTime,
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
} = _ref2;
|
|
259
|
+
export function getIsValidDate(values, isDateTime, {
|
|
260
|
+
is24Hour
|
|
261
|
+
}) {
|
|
280
262
|
const {
|
|
281
263
|
day,
|
|
282
264
|
month,
|
|
@@ -437,22 +419,20 @@ export function getSelectedDate(values, props) {
|
|
|
437
419
|
};
|
|
438
420
|
}
|
|
439
421
|
|
|
440
|
-
function getDateFormatLength(type, length
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
is24Hour
|
|
455
|
-
} = arguments.length > 3 ? arguments[3] : undefined;
|
|
422
|
+
function getDateFormatLength(type, length, formatVal = '', {
|
|
423
|
+
i18nShortMonths,
|
|
424
|
+
i18nMonths,
|
|
425
|
+
selectedValue,
|
|
426
|
+
day,
|
|
427
|
+
month,
|
|
428
|
+
year,
|
|
429
|
+
hour,
|
|
430
|
+
minute,
|
|
431
|
+
noon,
|
|
432
|
+
timeZone,
|
|
433
|
+
isDateTime,
|
|
434
|
+
is24Hour
|
|
435
|
+
}) {
|
|
456
436
|
const {
|
|
457
437
|
month: selectedMonth
|
|
458
438
|
} = getDateDetails(selectedValue, {
|
|
@@ -479,20 +459,19 @@ function getDateFormatLength(type, length) {
|
|
|
479
459
|
return length;
|
|
480
460
|
}
|
|
481
461
|
|
|
482
|
-
export function getDateFormatSelection(dateFormatDetails, isDateTime
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
} = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
462
|
+
export function getDateFormatSelection(dateFormatDetails, isDateTime, {
|
|
463
|
+
i18nShortMonths,
|
|
464
|
+
i18nMonths,
|
|
465
|
+
selectedValue,
|
|
466
|
+
day,
|
|
467
|
+
month,
|
|
468
|
+
year,
|
|
469
|
+
hour,
|
|
470
|
+
minute,
|
|
471
|
+
noon,
|
|
472
|
+
timeZone,
|
|
473
|
+
is24Hour
|
|
474
|
+
} = {}) {
|
|
496
475
|
const {
|
|
497
476
|
dateFormatArr = [],
|
|
498
477
|
patternArr = []
|
|
@@ -9,9 +9,7 @@ import { getDateText } from "./dateFormat";
|
|
|
9
9
|
export function convertYearToTwoDigit(year) {
|
|
10
10
|
return parseInt(year.toString().slice(-2));
|
|
11
11
|
}
|
|
12
|
-
export function addZero() {
|
|
13
|
-
let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
14
|
-
let length = arguments.length > 1 ? arguments[1] : undefined;
|
|
12
|
+
export function addZero(value = '', length) {
|
|
15
13
|
let newValue = value.toString();
|
|
16
14
|
|
|
17
15
|
for (let i = 0; i < length; i++) {
|
|
@@ -98,9 +96,7 @@ export function getYearDetails(yearLength) {
|
|
|
98
96
|
currentYear: year
|
|
99
97
|
};
|
|
100
98
|
}
|
|
101
|
-
export function convertTwoDigitToYear() {
|
|
102
|
-
let digitValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
103
|
-
let selectedYear = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
99
|
+
export function convertTwoDigitToYear(digitValue = '', selectedYear = '') {
|
|
104
100
|
const dateObj = new Date();
|
|
105
101
|
let year = dateObj.getFullYear();
|
|
106
102
|
const digitValueStr = addZero(digitValue.toString(), 2);
|
|
@@ -224,12 +220,11 @@ export function getIsEmptyYear(value, yearLength) {
|
|
|
224
220
|
} = getYearDetails(yearLength);
|
|
225
221
|
return getIsEmptyValue(value, startPoint, endPoint);
|
|
226
222
|
}
|
|
227
|
-
export function getIsCurrentYear(
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
} = _ref;
|
|
223
|
+
export function getIsCurrentYear({
|
|
224
|
+
isDateTime,
|
|
225
|
+
value,
|
|
226
|
+
timeZone
|
|
227
|
+
}) {
|
|
233
228
|
let isCurrentYear = false;
|
|
234
229
|
|
|
235
230
|
if (value && value !== INVALID_DATE) {
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
/** * Methods ** */
|
|
2
2
|
import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getHourDetails, getMinuteDetails, getNoonDetails, getIsNoonValueTyped, getIsEmptyHour } from "./index";
|
|
3
3
|
import { getKeyValue, getIsEmptyValue } from "../../utils/Common";
|
|
4
|
-
export function getChangedHour(values, event, focusOrders, keyActions
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
} = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
|
|
4
|
+
export function getChangedHour(values, event, focusOrders, keyActions, {
|
|
5
|
+
is24Hour = false
|
|
6
|
+
} = {}) {
|
|
8
7
|
const {
|
|
9
8
|
keyCode,
|
|
10
9
|
which
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
/** * Methods ** */
|
|
2
2
|
import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getDayEnd, convertYearToTwoDigit, getYearDetails, convertTwoDigitToYear, getIsEmptyYear } from "./index";
|
|
3
3
|
import { getKeyValue } from "../../utils/Common";
|
|
4
|
-
export function getChangedYear(values, event, focusOrders, keyActions,
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
} = _ref;
|
|
4
|
+
export function getChangedYear(values, event, focusOrders, keyActions, {
|
|
5
|
+
yearInfo
|
|
6
|
+
}) {
|
|
8
7
|
const {
|
|
9
8
|
keyCode,
|
|
10
9
|
which
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { useContext } from 'react';
|
|
2
2
|
import LibraryContext from "../../../Provider/LibraryContextInit";
|
|
3
3
|
import { compileClassNames } from '@zohodesk/utils';
|
|
4
|
-
export default function cssJSLogic(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
} = _ref;
|
|
4
|
+
export default function cssJSLogic({
|
|
5
|
+
props,
|
|
6
|
+
style,
|
|
7
|
+
customState
|
|
8
|
+
}) {
|
|
10
9
|
const DropBoxElementContext = useContext(LibraryContext);
|
|
11
10
|
const {
|
|
12
11
|
boxPosition,
|
package/es/Layout/utils.js
CHANGED
|
@@ -15,8 +15,7 @@ export function createProps(propTypes, props, classNames) {
|
|
|
15
15
|
export function isInteger(value) {
|
|
16
16
|
return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
|
|
17
17
|
}
|
|
18
|
-
export function setProps(childProps, props) {
|
|
19
|
-
let values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
18
|
+
export function setProps(childProps, props, values = {}) {
|
|
20
19
|
Object.keys(values).forEach(value => {
|
|
21
20
|
if (props[value]) {
|
|
22
21
|
if (value === 'dataId') {
|
|
@@ -36,11 +36,10 @@ const ListContainer = props => {
|
|
|
36
36
|
eleRef,
|
|
37
37
|
align
|
|
38
38
|
} = props;
|
|
39
|
-
const responsiveFunc = useCallback(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
} = _ref;
|
|
39
|
+
const responsiveFunc = useCallback(({
|
|
40
|
+
mediaQueryOR,
|
|
41
|
+
isTouchDevice
|
|
42
|
+
}) => {
|
|
44
43
|
return {
|
|
45
44
|
mobileToTab: mediaQueryOR([{
|
|
46
45
|
maxWidth: 700
|
|
@@ -3,11 +3,10 @@ import BasePortal from '@zohodesk/dotkit/es/react/components/Portal/Portal';
|
|
|
3
3
|
import { getLibraryConfig } from "../../Provider/Config";
|
|
4
4
|
import { defaultProps } from "./props/defaultProps";
|
|
5
5
|
import { propTypes } from "./props/propTypes";
|
|
6
|
-
export default function Portal(
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
} = _ref;
|
|
6
|
+
export default function Portal({
|
|
7
|
+
children,
|
|
8
|
+
portalId
|
|
9
|
+
}) {
|
|
11
10
|
const getPortalContainer = useCallback(() => {
|
|
12
11
|
const getConfigPortalContainer = getLibraryConfig('getPortalContainer');
|
|
13
12
|
|
|
@@ -272,9 +272,7 @@ class AdvancedGroupMultiSelect extends React.Component {
|
|
|
272
272
|
}) : this.togglePopup(e);
|
|
273
273
|
}
|
|
274
274
|
|
|
275
|
-
handleClickSelectedOption() {
|
|
276
|
-
let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
277
|
-
let e = arguments.length > 1 ? arguments[1] : undefined;
|
|
275
|
+
handleClickSelectedOption(id = '', e) {
|
|
278
276
|
let {
|
|
279
277
|
selectedOptionIds
|
|
280
278
|
} = this.state;
|
|
@@ -546,11 +544,7 @@ class AdvancedGroupMultiSelect extends React.Component {
|
|
|
546
544
|
});
|
|
547
545
|
}
|
|
548
546
|
|
|
549
|
-
handleFetchOptions() {
|
|
550
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
551
|
-
args[_key] = arguments[_key];
|
|
552
|
-
}
|
|
553
|
-
|
|
547
|
+
handleFetchOptions(...args) {
|
|
554
548
|
let [APICall, searchStr] = args;
|
|
555
549
|
let {
|
|
556
550
|
isFetchingOptions
|
|
@@ -663,9 +657,7 @@ class AdvancedGroupMultiSelect extends React.Component {
|
|
|
663
657
|
this.handleChange([]);
|
|
664
658
|
}
|
|
665
659
|
|
|
666
|
-
handleChange() {
|
|
667
|
-
let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
668
|
-
let e = arguments.length > 1 ? arguments[1] : undefined;
|
|
660
|
+
handleChange(selectedOptions = [], e) {
|
|
669
661
|
let {
|
|
670
662
|
onChange,
|
|
671
663
|
needToCloseOnSelect,
|
|
@@ -837,10 +829,9 @@ class AdvancedGroupMultiSelect extends React.Component {
|
|
|
837
829
|
}
|
|
838
830
|
}
|
|
839
831
|
|
|
840
|
-
responsiveFunc(
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
} = _ref;
|
|
832
|
+
responsiveFunc({
|
|
833
|
+
mediaQueryOR
|
|
834
|
+
}) {
|
|
844
835
|
return {
|
|
845
836
|
tabletMode: mediaQueryOR([{
|
|
846
837
|
maxWidth: 700
|
|
@@ -1011,97 +1002,94 @@ class AdvancedGroupMultiSelect extends React.Component {
|
|
|
1011
1002
|
}))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
|
|
1012
1003
|
query: this.responsiveFunc,
|
|
1013
1004
|
responsiveId: "Helmet"
|
|
1014
|
-
},
|
|
1005
|
+
}, ({
|
|
1006
|
+
tabletMode
|
|
1007
|
+
}) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
|
|
1008
|
+
animationStyle: animationStyle,
|
|
1009
|
+
boxPosition: position || `${defaultDropBoxPosition}Center`,
|
|
1010
|
+
getRef: getContainerRef,
|
|
1011
|
+
isActive: isPopupReady,
|
|
1012
|
+
isAnimate: true,
|
|
1013
|
+
isArrow: false,
|
|
1014
|
+
onClick: removeClose,
|
|
1015
|
+
needResponsive: needResponsive,
|
|
1016
|
+
isPadding: isPadding,
|
|
1017
|
+
isBoxPaddingNeed: !needSelectAll,
|
|
1018
|
+
isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
|
|
1019
|
+
positionsOffset: positionsOffset,
|
|
1020
|
+
targetOffset: targetOffset,
|
|
1021
|
+
isRestrictScroll: isRestrictScroll,
|
|
1022
|
+
htmlId: setAriaId,
|
|
1023
|
+
a11y: {
|
|
1024
|
+
role: 'listbox',
|
|
1025
|
+
ariaMultiselectable: true
|
|
1026
|
+
},
|
|
1027
|
+
alignBox: "row",
|
|
1028
|
+
dataId: `${dataId}_dropbox`
|
|
1029
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
1030
|
+
flexible: true
|
|
1031
|
+
}, /*#__PURE__*/React.createElement(Card, {
|
|
1032
|
+
customClass: `${style.box} ${style[`${palette}Box`]}`,
|
|
1033
|
+
onScroll: this.handleScroll
|
|
1034
|
+
}, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
|
|
1035
|
+
onSelect: this.handleSelectAll,
|
|
1036
|
+
selectAllText: selectAllText,
|
|
1037
|
+
suggestions: suggestionOptionIds,
|
|
1038
|
+
dataId: dataId
|
|
1039
|
+
})) : null, isDataLoaded ? /*#__PURE__*/React.createElement(CardContent, {
|
|
1040
|
+
shrink: true,
|
|
1041
|
+
customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
|
|
1042
|
+
eleRef: this.suggestionContainerRef
|
|
1043
|
+
}, /*#__PURE__*/React.createElement(React.Fragment, {
|
|
1044
|
+
key: 'SuggestonsParent'
|
|
1045
|
+
}, suggestionGroups.length ? suggestionGroups.map(group => {
|
|
1015
1046
|
let {
|
|
1016
|
-
|
|
1017
|
-
} =
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1047
|
+
options: suggestions = []
|
|
1048
|
+
} = group;
|
|
1049
|
+
let groupId = group.id;
|
|
1050
|
+
let groupName = group.name;
|
|
1051
|
+
let hoverId = suggestionOptionIds[hoverIndex];
|
|
1052
|
+
return /*#__PURE__*/React.createElement(React.Fragment, {
|
|
1053
|
+
key: groupId
|
|
1054
|
+
}, groupName && /*#__PURE__*/React.createElement("div", {
|
|
1055
|
+
className: style.groupTitle
|
|
1056
|
+
}, /*#__PURE__*/React.createElement(DropDownHeading, {
|
|
1057
|
+
text: groupName,
|
|
1058
|
+
a11y: {
|
|
1059
|
+
role: 'heading'
|
|
1060
|
+
}
|
|
1061
|
+
})), /*#__PURE__*/React.createElement(Suggestions, _extends({}, SuggestionsProps, {
|
|
1062
|
+
suggestions: suggestions,
|
|
1063
|
+
selectedOptions: selectedOptionIds,
|
|
1064
|
+
getRef: this.suggestionItemRef,
|
|
1065
|
+
hoverId: hoverId,
|
|
1066
|
+
onClick: this.handleSelectOption,
|
|
1067
|
+
onMouseEnter: this.handleMouseEnter,
|
|
1068
|
+
needTick: true,
|
|
1069
|
+
listItemSize: listItemSize,
|
|
1034
1070
|
a11y: {
|
|
1035
|
-
role: '
|
|
1036
|
-
ariaMultiselectable: true
|
|
1071
|
+
role: 'option'
|
|
1037
1072
|
},
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
options: suggestions = []
|
|
1059
|
-
} = group;
|
|
1060
|
-
let groupId = group.id;
|
|
1061
|
-
let groupName = group.name;
|
|
1062
|
-
let hoverId = suggestionOptionIds[hoverIndex];
|
|
1063
|
-
return /*#__PURE__*/React.createElement(React.Fragment, {
|
|
1064
|
-
key: groupId
|
|
1065
|
-
}, groupName && /*#__PURE__*/React.createElement("div", {
|
|
1066
|
-
className: style.groupTitle
|
|
1067
|
-
}, /*#__PURE__*/React.createElement(DropDownHeading, {
|
|
1068
|
-
text: groupName,
|
|
1069
|
-
a11y: {
|
|
1070
|
-
role: 'heading'
|
|
1071
|
-
}
|
|
1072
|
-
})), /*#__PURE__*/React.createElement(Suggestions, _extends({}, SuggestionsProps, {
|
|
1073
|
-
suggestions: suggestions,
|
|
1074
|
-
selectedOptions: selectedOptionIds,
|
|
1075
|
-
getRef: this.suggestionItemRef,
|
|
1076
|
-
hoverId: hoverId,
|
|
1077
|
-
onClick: this.handleSelectOption,
|
|
1078
|
-
onMouseEnter: this.handleMouseEnter,
|
|
1079
|
-
needTick: true,
|
|
1080
|
-
listItemSize: listItemSize,
|
|
1081
|
-
a11y: {
|
|
1082
|
-
role: 'option'
|
|
1083
|
-
},
|
|
1084
|
-
limit: limit,
|
|
1085
|
-
limitReachedMessage: limitReachedMessage,
|
|
1086
|
-
dataId: `${dataId}_Options`
|
|
1087
|
-
})));
|
|
1088
|
-
}) : /*#__PURE__*/React.createElement(EmptyState, {
|
|
1089
|
-
options: revampedGroups,
|
|
1090
|
-
searchString: searchStr,
|
|
1091
|
-
suggestions: suggestionGroups,
|
|
1092
|
-
renderCustomEmptyState: renderCustomEmptyState,
|
|
1093
|
-
dataId: dataId,
|
|
1094
|
-
isLoading: isFetchingOptions,
|
|
1095
|
-
i18nKeys: i18nKeys,
|
|
1096
|
-
htmlId: ariaErrorId
|
|
1097
|
-
}), isNextOptions && /*#__PURE__*/React.createElement("div", {
|
|
1098
|
-
className: style.loader
|
|
1099
|
-
}, /*#__PURE__*/React.createElement(Loader, null)))) : /*#__PURE__*/React.createElement("div", {
|
|
1100
|
-
className: style.loader
|
|
1101
|
-
}, /*#__PURE__*/React.createElement(Loader, null)), getFooter ? isDataLoaded ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : /*#__PURE__*/React.createElement("div", {
|
|
1102
|
-
className: style.loader
|
|
1103
|
-
}, /*#__PURE__*/React.createElement(Loader, null)) : null)));
|
|
1104
|
-
}) : null);
|
|
1073
|
+
limit: limit,
|
|
1074
|
+
limitReachedMessage: limitReachedMessage,
|
|
1075
|
+
dataId: `${dataId}_Options`
|
|
1076
|
+
})));
|
|
1077
|
+
}) : /*#__PURE__*/React.createElement(EmptyState, {
|
|
1078
|
+
options: revampedGroups,
|
|
1079
|
+
searchString: searchStr,
|
|
1080
|
+
suggestions: suggestionGroups,
|
|
1081
|
+
renderCustomEmptyState: renderCustomEmptyState,
|
|
1082
|
+
dataId: dataId,
|
|
1083
|
+
isLoading: isFetchingOptions,
|
|
1084
|
+
i18nKeys: i18nKeys,
|
|
1085
|
+
htmlId: ariaErrorId
|
|
1086
|
+
}), isNextOptions && /*#__PURE__*/React.createElement("div", {
|
|
1087
|
+
className: style.loader
|
|
1088
|
+
}, /*#__PURE__*/React.createElement(Loader, null)))) : /*#__PURE__*/React.createElement("div", {
|
|
1089
|
+
className: style.loader
|
|
1090
|
+
}, /*#__PURE__*/React.createElement(Loader, null)), getFooter ? isDataLoaded ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : /*#__PURE__*/React.createElement("div", {
|
|
1091
|
+
className: style.loader
|
|
1092
|
+
}, /*#__PURE__*/React.createElement(Loader, null)) : null)))) : null);
|
|
1105
1093
|
}
|
|
1106
1094
|
|
|
1107
1095
|
}
|