@zohodesk/dot 1.0.0-temp-183 → 1.0.0-temp-184
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/coverage/ExternalLink/ExternalLink.js.html +1 -1
- package/coverage/ExternalLink/ExternalLink.module.css.html +1 -1
- package/coverage/ExternalLink/index.html +1 -1
- package/coverage/ExternalLink/props/defaultProps.js.html +1 -1
- package/coverage/ExternalLink/props/index.html +1 -1
- package/coverage/ExternalLink/props/propTypes.js.html +1 -1
- package/coverage/IconButton/IconButton.js.html +1 -1
- package/coverage/IconButton/IconButton.module.css.html +1 -1
- package/coverage/IconButton/index.html +1 -1
- package/coverage/IconButton/props/defaultProps.js.html +1 -1
- package/coverage/IconButton/props/index.html +1 -1
- package/coverage/IconButton/props/propTypes.js.html +1 -1
- package/coverage/Image/Image.js.html +1 -1
- package/coverage/Image/Image.module.css.html +1 -1
- package/coverage/Image/index.html +1 -1
- package/coverage/Image/props/defaultProps.js.html +1 -1
- package/coverage/Image/props/index.html +1 -1
- package/coverage/Image/props/propTypes.js.html +1 -1
- package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.js.html +1 -1
- package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.module.css.html +1 -1
- package/coverage/avatar/AvatarWithTeam/index.html +1 -1
- package/coverage/avatar/AvatarWithTeam/props/defaultProps.js.html +1 -1
- package/coverage/avatar/AvatarWithTeam/props/index.html +1 -1
- package/coverage/avatar/AvatarWithTeam/props/propTypes.js.html +1 -1
- package/coverage/coverage-final.json +16 -16
- package/coverage/coverage-summary.json +16 -16
- package/coverage/index.html +1 -1
- package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +3 -4
- package/es/list/DepartmentDropDown/DepartmentDropDown.js +3 -9
- package/es/list/DepartmentDropDown/props/defaultProps.js +1 -2
- package/es/list/DepartmentDropDown/props/propTypes.js +1 -2
- package/es/list/Thread/Thread.js +1 -2
- package/es/list/status/StatusDropdown/StatusDropdown.js +101 -142
- package/es/list/status/StatusListItem/StatusListItem.module.css +5 -35
- package/es/v1/list/Thread/Thread.js +1 -2
- package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +3 -5
- package/lib/list/DepartmentDropDown/DepartmentDropDown.js +3 -8
- package/lib/list/DepartmentDropDown/props/defaultProps.js +1 -2
- package/lib/list/DepartmentDropDown/props/propTypes.js +1 -1
- package/lib/list/Thread/Thread.js +1 -2
- package/lib/list/status/StatusDropdown/StatusDropdown.js +162 -207
- package/lib/list/status/StatusListItem/StatusListItem.module.css +5 -35
- package/lib/v1/list/Thread/Thread.js +1 -2
- package/package.json +4 -4
- package/result.json +1 -1
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
1
|
import React, { Component } from 'react';
|
|
4
2
|
import { defaultProps } from './props/defaultProps';
|
|
5
3
|
import { propTypes } from './props/propTypes';
|
|
@@ -50,19 +48,15 @@ class DepartmentDropDown extends Component {
|
|
|
50
48
|
onSearch,
|
|
51
49
|
needSearchFetching,
|
|
52
50
|
searchStr,
|
|
53
|
-
i18nKeys
|
|
54
|
-
customProps
|
|
51
|
+
i18nKeys
|
|
55
52
|
} = this.props;
|
|
56
|
-
const {
|
|
57
|
-
toggleDropDownProps = {}
|
|
58
|
-
} = customProps;
|
|
59
53
|
let {
|
|
60
54
|
title = 'Move Department',
|
|
61
55
|
searchEmptyText = 'No results found',
|
|
62
56
|
searchErrorText = 'No results',
|
|
63
57
|
placeholder = 'Search Department'
|
|
64
58
|
} = i18nKeys;
|
|
65
|
-
return /*#__PURE__*/React.createElement(ToggleDropDown,
|
|
59
|
+
return /*#__PURE__*/React.createElement(ToggleDropDown, {
|
|
66
60
|
title: title,
|
|
67
61
|
options: departmentList,
|
|
68
62
|
value: /*#__PURE__*/React.createElement(DepartmentText, {
|
|
@@ -91,7 +85,7 @@ class DepartmentDropDown extends Component {
|
|
|
91
85
|
isNextOptions: isNextOptions,
|
|
92
86
|
onSearch: onSearch,
|
|
93
87
|
needSearchFetching: needSearchFetching
|
|
94
|
-
}
|
|
88
|
+
});
|
|
95
89
|
}
|
|
96
90
|
|
|
97
91
|
}
|
package/es/list/Thread/Thread.js
CHANGED
|
@@ -11,13 +11,12 @@ export default class Thread extends Component {
|
|
|
11
11
|
|
|
12
12
|
render() {
|
|
13
13
|
let {
|
|
14
|
-
count
|
|
14
|
+
count,
|
|
15
15
|
className,
|
|
16
16
|
iconTitle,
|
|
17
17
|
dataId,
|
|
18
18
|
align
|
|
19
19
|
} = this.props;
|
|
20
|
-
let count = threadCount === '0' ? '1' : threadCount;
|
|
21
20
|
return /*#__PURE__*/React.createElement(Button, {
|
|
22
21
|
customClass: `${style.container} ${style[`align_${align}`]} ${className}`,
|
|
23
22
|
title: iconTitle,
|
|
@@ -7,9 +7,9 @@ import { Box, Container } from '@zohodesk/components/lib/Layout';
|
|
|
7
7
|
import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
|
|
8
8
|
import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
|
|
9
9
|
import Loader from '@zohodesk/svg/lib/Loader/Loader';
|
|
10
|
-
import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
|
|
11
|
-
import
|
|
12
|
-
|
|
10
|
+
import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch'; // import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
|
|
11
|
+
// import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
|
|
12
|
+
|
|
13
13
|
import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
|
|
14
14
|
import StatusListItem from '../StatusListItem/StatusListItem';
|
|
15
15
|
import commonStyle from '@zohodesk/components/lib/common/common.module.css';
|
|
@@ -23,20 +23,20 @@ export class StatusDropdown extends React.Component {
|
|
|
23
23
|
super(props);
|
|
24
24
|
this.state = {
|
|
25
25
|
searchString: '',
|
|
26
|
-
selectedIndex: 0,
|
|
26
|
+
// selectedIndex: 0,
|
|
27
27
|
options: props.options
|
|
28
28
|
};
|
|
29
|
-
this.handleChange = this.handleChange.bind(this);
|
|
30
|
-
|
|
29
|
+
this.handleChange = this.handleChange.bind(this); // this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
30
|
+
|
|
31
31
|
this.onSelect = this.onSelect.bind(this);
|
|
32
32
|
this.handleTogglePopup = this.handleTogglePopup.bind(this);
|
|
33
33
|
this.onSearchClear = this.onSearchClear.bind(this);
|
|
34
34
|
this.searchList = this.searchList.bind(this);
|
|
35
|
-
this.scrollContentRef = this.scrollContentRef.bind(this);
|
|
36
|
-
|
|
35
|
+
this.scrollContentRef = this.scrollContentRef.bind(this); // this.handleMouseEnter = this.handleMouseEnter.bind(this);
|
|
36
|
+
|
|
37
37
|
this.searchInputRef = this.searchInputRef.bind(this);
|
|
38
|
-
this.itemRef = this.itemRef.bind(this);
|
|
39
|
-
|
|
38
|
+
this.itemRef = this.itemRef.bind(this); // this.inputRef = this.inputRef.bind(this);
|
|
39
|
+
|
|
40
40
|
this.handleScroll = this.handleScroll.bind(this);
|
|
41
41
|
this.emptySearchSVG = this.emptySearchSVG.bind(this);
|
|
42
42
|
this.getAriaId = getUniqueId(this);
|
|
@@ -46,11 +46,10 @@ export class StatusDropdown extends React.Component {
|
|
|
46
46
|
return /*#__PURE__*/React.createElement(EmptySearch, {
|
|
47
47
|
size: "small"
|
|
48
48
|
});
|
|
49
|
-
}
|
|
49
|
+
} // inputRef(el) {
|
|
50
|
+
// this.hiddenInput = el;
|
|
51
|
+
// }
|
|
50
52
|
|
|
51
|
-
inputRef(el) {
|
|
52
|
-
this.hiddenInput = el;
|
|
53
|
-
}
|
|
54
53
|
|
|
55
54
|
itemRef(ele, index, id) {
|
|
56
55
|
this[`suggestion_${id}`] = ele;
|
|
@@ -104,107 +103,68 @@ export class StatusDropdown extends React.Component {
|
|
|
104
103
|
}
|
|
105
104
|
|
|
106
105
|
componentDidUpdate(prevProps) {
|
|
107
|
-
let {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
let mergeOptions = options;
|
|
124
|
-
let option = mergeOptions[selectedIndex];
|
|
125
|
-
let id = option && option[idName] || {};
|
|
126
|
-
let selSuggestion = this[`suggestion_${id}`];
|
|
127
|
-
|
|
128
|
-
if (isPopupOpen) {
|
|
129
|
-
this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
|
|
130
|
-
}
|
|
131
|
-
|
|
106
|
+
// let { isPopupOpen, isSearch, idName } = this.props;
|
|
107
|
+
// let { selectedIndex, options } = this.state;
|
|
108
|
+
// if (prevProps.isPopupOpen != isPopupOpen) {
|
|
109
|
+
// setTimeout(() => {
|
|
110
|
+
// isPopupOpen && isSearch
|
|
111
|
+
// ? this.searchInput && this.searchInput.focus()
|
|
112
|
+
// : this.hiddenInput && this.hiddenInput.focus();
|
|
113
|
+
// }, 10);
|
|
114
|
+
// }
|
|
115
|
+
// let mergeOptions = options;
|
|
116
|
+
// let option = mergeOptions[selectedIndex];
|
|
117
|
+
// let id = (option && option[idName]) || {};
|
|
118
|
+
// let selSuggestion = this[`suggestion_${id}`];
|
|
119
|
+
// if (isPopupOpen) {
|
|
120
|
+
// this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
|
|
121
|
+
// }
|
|
132
122
|
if (!prevProps.isPopupOpen && this.props.isPopupOpen) {
|
|
133
123
|
this.onSearchClear();
|
|
134
124
|
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
break;
|
|
179
|
-
|
|
180
|
-
case 38:
|
|
181
|
-
if (selectedIndex === 0) {
|
|
182
|
-
this.setState({
|
|
183
|
-
selectedIndex: totalIndex - 1
|
|
184
|
-
});
|
|
185
|
-
} else {
|
|
186
|
-
this.setState({
|
|
187
|
-
selectedIndex: selectedIndex - 1
|
|
188
|
-
});
|
|
189
|
-
}
|
|
125
|
+
} // handleKeyDown(e) {
|
|
126
|
+
// let { keyCode } = e;
|
|
127
|
+
// let { selectedIndex, options } = this.state;
|
|
128
|
+
// let totalIndex = options.length;
|
|
129
|
+
// let { togglePopup, onClick, boxPosition, isPopupReady, isNextOptions, getNextOptions, onTogglePopup, isPopupOpen } =
|
|
130
|
+
// this.props;
|
|
131
|
+
// if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
|
|
132
|
+
// e.preventDefault(); //prevent body scroll
|
|
133
|
+
// }
|
|
134
|
+
// if (isPopupReady) {
|
|
135
|
+
// switch (keyCode) {
|
|
136
|
+
// case 40:
|
|
137
|
+
// if (selectedIndex === totalIndex - 1) {
|
|
138
|
+
// this.setState({ selectedIndex: 0 });
|
|
139
|
+
// } else {
|
|
140
|
+
// if (selectedIndex === totalIndex - 3) {
|
|
141
|
+
// isNextOptions && getNextOptions && getNextOptions();
|
|
142
|
+
// }
|
|
143
|
+
// this.setState({ selectedIndex: selectedIndex + 1 });
|
|
144
|
+
// }
|
|
145
|
+
// break;
|
|
146
|
+
// case 38:
|
|
147
|
+
// if (selectedIndex === 0) {
|
|
148
|
+
// this.setState({ selectedIndex: totalIndex - 1 });
|
|
149
|
+
// } else {
|
|
150
|
+
// this.setState({ selectedIndex: selectedIndex - 1 });
|
|
151
|
+
// }
|
|
152
|
+
// break;
|
|
153
|
+
// case 13:
|
|
154
|
+
// onClick && onClick(options[selectedIndex].name, e);
|
|
155
|
+
// onTogglePopup && onTogglePopup(isPopupOpen);
|
|
156
|
+
// togglePopup(e, boxPosition);
|
|
157
|
+
// break;
|
|
158
|
+
// default:
|
|
159
|
+
// break;
|
|
160
|
+
// }
|
|
161
|
+
// } else {
|
|
162
|
+
// if (keyCode === 13 || keyCode === 40) {
|
|
163
|
+
// togglePopup(e, boxPosition);
|
|
164
|
+
// }
|
|
165
|
+
// }
|
|
166
|
+
// }
|
|
190
167
|
|
|
191
|
-
break;
|
|
192
|
-
|
|
193
|
-
case 13:
|
|
194
|
-
onClick && onClick(options[selectedIndex].name, e);
|
|
195
|
-
onTogglePopup && onTogglePopup(isPopupOpen);
|
|
196
|
-
togglePopup(e, boxPosition);
|
|
197
|
-
break;
|
|
198
|
-
|
|
199
|
-
default:
|
|
200
|
-
break;
|
|
201
|
-
}
|
|
202
|
-
} else {
|
|
203
|
-
if (keyCode === 13 || keyCode === 40) {
|
|
204
|
-
togglePopup(e, boxPosition);
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
168
|
|
|
209
169
|
searchList(value) {
|
|
210
170
|
let {
|
|
@@ -219,7 +179,7 @@ export class StatusDropdown extends React.Component {
|
|
|
219
179
|
let foptions = this.searchList(value);
|
|
220
180
|
this.setState({
|
|
221
181
|
searchString: value,
|
|
222
|
-
selectedIndex: -1,
|
|
182
|
+
// selectedIndex: -1,
|
|
223
183
|
options: foptions
|
|
224
184
|
});
|
|
225
185
|
}
|
|
@@ -230,13 +190,12 @@ export class StatusDropdown extends React.Component {
|
|
|
230
190
|
searchString: '',
|
|
231
191
|
options: foptions
|
|
232
192
|
});
|
|
233
|
-
}
|
|
193
|
+
} // handleMouseEnter(id, value, index, e) {
|
|
194
|
+
// this.setState({
|
|
195
|
+
// selectedIndex: index
|
|
196
|
+
// });
|
|
197
|
+
// }
|
|
234
198
|
|
|
235
|
-
handleMouseEnter(id, value, index, e) {
|
|
236
|
-
this.setState({
|
|
237
|
-
selectedIndex: index
|
|
238
|
-
});
|
|
239
|
-
}
|
|
240
199
|
|
|
241
200
|
handleScroll(e) {
|
|
242
201
|
const {
|
|
@@ -262,8 +221,7 @@ export class StatusDropdown extends React.Component {
|
|
|
262
221
|
|
|
263
222
|
render() {
|
|
264
223
|
let {
|
|
265
|
-
options
|
|
266
|
-
selectedIndex
|
|
224
|
+
options
|
|
267
225
|
} = this.state;
|
|
268
226
|
let {
|
|
269
227
|
value,
|
|
@@ -328,12 +286,11 @@ export class StatusDropdown extends React.Component {
|
|
|
328
286
|
tagName: "button",
|
|
329
287
|
alignBox: "row",
|
|
330
288
|
className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
|
|
331
|
-
|
|
289
|
+
onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : null,
|
|
332
290
|
eleRef: getTargetRef,
|
|
333
291
|
align: targetAlign,
|
|
334
292
|
isCover: false,
|
|
335
293
|
dataId: dataId,
|
|
336
|
-
onClick: removeClose,
|
|
337
294
|
disabled: isDisabled || isReadOnly ? true : false,
|
|
338
295
|
"aria-haspopup": isSearch ? 'listbox' : 'menu',
|
|
339
296
|
"aria-expanded": isPopupReady && isEditable ? true : false,
|
|
@@ -341,15 +298,7 @@ export class StatusDropdown extends React.Component {
|
|
|
341
298
|
"aria-labelledby": ariaLabelledby,
|
|
342
299
|
"aria-label": ariaLabel,
|
|
343
300
|
"aria-disabled": isDisabled || isReadOnly
|
|
344
|
-
},
|
|
345
|
-
className: style.hiddenInput
|
|
346
|
-
}, /*#__PURE__*/React.createElement(TextBox, {
|
|
347
|
-
type: "text",
|
|
348
|
-
inputRef: this.inputRef,
|
|
349
|
-
onKeyDown: this.handleKeyDown,
|
|
350
|
-
needAppearance: false,
|
|
351
|
-
placeHolder: placeHolderText
|
|
352
|
-
})) : null, children ? children : /*#__PURE__*/React.createElement(Box, {
|
|
301
|
+
}, children ? children : /*#__PURE__*/React.createElement(Box, {
|
|
353
302
|
className: `${style.value} toggleDropText`,
|
|
354
303
|
shrink: true,
|
|
355
304
|
tagName: "span",
|
|
@@ -383,7 +332,10 @@ export class StatusDropdown extends React.Component {
|
|
|
383
332
|
customDropBoxWrap: style.dropBoxContainer
|
|
384
333
|
},
|
|
385
334
|
needResponsive: needResponsive,
|
|
386
|
-
isResponsivePadding: true
|
|
335
|
+
isResponsivePadding: true,
|
|
336
|
+
tabindex: 0,
|
|
337
|
+
needFocusScope: true,
|
|
338
|
+
onClose: this.handleTogglePopup
|
|
387
339
|
}, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
|
|
388
340
|
className: style.search
|
|
389
341
|
}, /*#__PURE__*/React.createElement(TextBoxIcon, {
|
|
@@ -392,8 +344,13 @@ export class StatusDropdown extends React.Component {
|
|
|
392
344
|
value: searchString,
|
|
393
345
|
onClear: this.onSearchClear,
|
|
394
346
|
size: searchBoxSize,
|
|
395
|
-
inputRef: this.searchInputRef
|
|
396
|
-
|
|
347
|
+
inputRef: this.searchInputRef // onKeyDown={this.handleKeyDown}
|
|
348
|
+
,
|
|
349
|
+
customProps: {
|
|
350
|
+
TextBoxProps: {
|
|
351
|
+
'data-a11y-autofocus': true
|
|
352
|
+
}
|
|
353
|
+
},
|
|
397
354
|
a11y: {
|
|
398
355
|
ariaHaspopup: isSearch ? 'listbox' : 'menu',
|
|
399
356
|
ariaExpanded: isPopupReady,
|
|
@@ -419,8 +376,9 @@ export class StatusDropdown extends React.Component {
|
|
|
419
376
|
eleRef: this.scrollContentRef,
|
|
420
377
|
onScroll: this.handleScroll,
|
|
421
378
|
role: isSearch ? 'listbox' : 'menu',
|
|
422
|
-
"aria-labelledby": ariaTitleId
|
|
423
|
-
|
|
379
|
+
"aria-labelledby": ariaTitleId // tabindex='-1'
|
|
380
|
+
,
|
|
381
|
+
"data-scroll": "true"
|
|
424
382
|
}, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
|
|
425
383
|
key: i
|
|
426
384
|
}, /*#__PURE__*/React.createElement(StatusListItem, {
|
|
@@ -429,11 +387,11 @@ export class StatusDropdown extends React.Component {
|
|
|
429
387
|
id: item[idName],
|
|
430
388
|
active: value === item[keyName],
|
|
431
389
|
onClick: this.onSelect.bind(this, item),
|
|
432
|
-
index: i
|
|
433
|
-
|
|
390
|
+
index: i // highlight={selectedIndex === i}
|
|
391
|
+
,
|
|
434
392
|
needTick: needTick,
|
|
435
|
-
needBorder: false
|
|
436
|
-
|
|
393
|
+
needBorder: false // onMouseEnter={this.handleMouseEnter}
|
|
394
|
+
,
|
|
437
395
|
getRef: this.itemRef,
|
|
438
396
|
bulletColor: item[statusColor],
|
|
439
397
|
title: item[keyName],
|
|
@@ -441,8 +399,9 @@ export class StatusDropdown extends React.Component {
|
|
|
441
399
|
a11y: {
|
|
442
400
|
role: isSearch ? 'option' : 'menuitem',
|
|
443
401
|
ariaSelected: value === item[keyName],
|
|
444
|
-
'data-a11y-list-active':
|
|
445
|
-
}
|
|
402
|
+
'data-a11y-list-active': value === item[keyName]
|
|
403
|
+
},
|
|
404
|
+
autoHover: true
|
|
446
405
|
})))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
|
|
447
406
|
className: style.svgWrapper,
|
|
448
407
|
title: searchErrorText || 'No results',
|
|
@@ -6,58 +6,43 @@
|
|
|
6
6
|
min-height: var(--zd_size35) ;
|
|
7
7
|
cursor: pointer;
|
|
8
8
|
}
|
|
9
|
-
|
|
10
9
|
[dir=ltr] .withBorder {
|
|
11
10
|
border-left: 1px solid var(--zdt_statuslistitem_default_border);
|
|
12
11
|
}
|
|
13
|
-
|
|
14
12
|
[dir=rtl] .withBorder {
|
|
15
13
|
border-right: 1px solid var(--zdt_statuslistitem_default_border);
|
|
16
14
|
}
|
|
17
|
-
|
|
18
15
|
[dir=ltr] .small {
|
|
19
16
|
padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5) ;
|
|
20
17
|
}
|
|
21
|
-
|
|
22
18
|
[dir=rtl] .small {
|
|
23
19
|
padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3) ;
|
|
24
20
|
}
|
|
25
|
-
|
|
26
21
|
.medium {
|
|
27
22
|
padding: var(--zd_size7) var(--zd_size20) ;
|
|
28
23
|
}
|
|
29
|
-
|
|
30
24
|
.large {
|
|
31
25
|
height: var(--zd_size48) ;
|
|
32
26
|
}
|
|
33
|
-
|
|
34
27
|
[dir=ltr] .large {
|
|
35
28
|
padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
|
|
36
29
|
}
|
|
37
|
-
|
|
38
30
|
[dir=rtl] .large {
|
|
39
31
|
padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3) ;
|
|
40
32
|
}
|
|
41
|
-
|
|
42
|
-
.value,
|
|
43
|
-
.multiLineValue {
|
|
33
|
+
.value,.multiLineValue {
|
|
44
34
|
line-height: 1.5385;
|
|
45
35
|
}
|
|
46
|
-
|
|
47
36
|
.value {
|
|
48
37
|
composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
|
|
49
38
|
}
|
|
50
|
-
|
|
51
|
-
.multiLineValue {
|
|
39
|
+
.multiLineValue{
|
|
52
40
|
word-break: break-word;
|
|
53
|
-
-webkit-line-clamp: 5;
|
|
54
41
|
composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
|
|
55
42
|
}
|
|
56
|
-
|
|
57
43
|
[dir=ltr] .withBorder.active {
|
|
58
44
|
border-left-color: var(--zdt_statuslistitem_default_active_border);
|
|
59
45
|
}
|
|
60
|
-
|
|
61
46
|
[dir=rtl] .withBorder.active {
|
|
62
47
|
border-right-color: var(--zdt_statuslistitem_default_active_border);
|
|
63
48
|
}
|
|
@@ -65,56 +50,44 @@
|
|
|
65
50
|
.default.hover, .default.effect:hover {
|
|
66
51
|
background-color: var(--zdt_statuslistitem_default_effect_bg);
|
|
67
52
|
}
|
|
68
|
-
|
|
69
53
|
.primary.hover, .primary.effect:hover, .selected {
|
|
70
54
|
background-color: var(--zdt_statuslistitem_primary_efffect_bg);
|
|
71
55
|
}
|
|
72
|
-
|
|
73
56
|
.secondary.hover, .secondary.effect:hover {
|
|
74
57
|
background-color: var(--zdt_statuslistitem_secondary_effect_bg);
|
|
75
58
|
}
|
|
76
|
-
|
|
77
59
|
.list.active.default, .list.active.primary {
|
|
78
60
|
background-color: var(--zdt_statuslistitem_primary_efffect_bg);
|
|
79
61
|
}
|
|
80
|
-
|
|
81
62
|
.list.active.secondary {
|
|
82
63
|
background-color: var(--zdt_statuslistitem_secondary_effect_bg);
|
|
83
64
|
}
|
|
84
|
-
|
|
85
65
|
.secondary.hover,
|
|
86
66
|
.secondary.effect:hover,
|
|
87
67
|
.list.active.secondary {
|
|
88
68
|
color: var(--zdt_statuslistitem_secondary_effect_text);
|
|
89
69
|
}
|
|
90
|
-
|
|
91
70
|
.tickIcon {
|
|
92
71
|
color: var(--zdt_statuslistitem_tickicon);
|
|
93
72
|
position: absolute;
|
|
94
|
-
top:
|
|
73
|
+
top:50% ;
|
|
95
74
|
transform: translateY(-50%);
|
|
96
75
|
}
|
|
97
|
-
|
|
98
76
|
[dir=ltr] .tickIcon {
|
|
99
77
|
right: var(--zd_size20) ;
|
|
100
78
|
}
|
|
101
|
-
|
|
102
79
|
[dir=rtl] .tickIcon {
|
|
103
80
|
left: var(--zd_size20) ;
|
|
104
81
|
}
|
|
105
|
-
|
|
106
|
-
.tickIcon>i {
|
|
82
|
+
.tickIcon > i {
|
|
107
83
|
display: block;
|
|
108
84
|
}
|
|
109
|
-
|
|
110
85
|
[dir=ltr] .active.withTick {
|
|
111
86
|
padding-right: var(--zd_size39) ;
|
|
112
87
|
}
|
|
113
|
-
|
|
114
88
|
[dir=rtl] .active.withTick {
|
|
115
89
|
padding-left: var(--zd_size39) ;
|
|
116
90
|
}
|
|
117
|
-
|
|
118
91
|
/* Status Type */
|
|
119
92
|
.statusType {
|
|
120
93
|
width: var(--zd_size8) ;
|
|
@@ -127,15 +100,12 @@
|
|
|
127
100
|
[dir=rtl] .statusType {
|
|
128
101
|
margin-left: var(--zd_size13) ;
|
|
129
102
|
}
|
|
130
|
-
|
|
131
103
|
.black {
|
|
132
104
|
background-color: var(--zdt_statuslistitem_black_bg);
|
|
133
105
|
}
|
|
134
|
-
|
|
135
106
|
.orange {
|
|
136
107
|
background-color: var(--zdt_statuslistitem_orange_bg);
|
|
137
108
|
}
|
|
138
|
-
|
|
139
109
|
.green {
|
|
140
110
|
background-color: var(--zdt_statuslistitem_green_bg);
|
|
141
|
-
}
|
|
111
|
+
}
|
|
@@ -7,13 +7,12 @@ import style from '../../../list/Thread/Thread.module.css';
|
|
|
7
7
|
|
|
8
8
|
const Thread = props => {
|
|
9
9
|
const {
|
|
10
|
-
count
|
|
10
|
+
count,
|
|
11
11
|
className,
|
|
12
12
|
iconTitle,
|
|
13
13
|
dataId,
|
|
14
14
|
align
|
|
15
15
|
} = props;
|
|
16
|
-
const count = threadCount === '0' ? '1' : threadCount;
|
|
17
16
|
return /*#__PURE__*/React.createElement(Button, {
|
|
18
17
|
customClass: `${style.container} ${style[`align_${align}`]} ${className}`,
|
|
19
18
|
title: iconTitle,
|
|
@@ -223,9 +223,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
|
|
|
223
223
|
_customProps$TagWrapp = customProps.TagWrapperProps,
|
|
224
224
|
TagWrapperProps = _customProps$TagWrapp === void 0 ? {} : _customProps$TagWrapp,
|
|
225
225
|
_customProps$TagProps = customProps.TagProps,
|
|
226
|
-
TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps
|
|
227
|
-
_customProps$listProp = customProps.listProps,
|
|
228
|
-
listProps = _customProps$listProp === void 0 ? {} : _customProps$listProp;
|
|
226
|
+
TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
|
|
229
227
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
230
228
|
className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
|
|
231
229
|
onClick: _General.stopBubbling,
|
|
@@ -329,7 +327,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
|
|
|
329
327
|
var name = item.name,
|
|
330
328
|
isNew = item.isNew,
|
|
331
329
|
listItemProps = item.listItemProps;
|
|
332
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"],
|
|
330
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
|
|
333
331
|
key: index,
|
|
334
332
|
index: index,
|
|
335
333
|
autoHover: true,
|
|
@@ -342,7 +340,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
|
|
|
342
340
|
isDisabled: listDisabled,
|
|
343
341
|
customProps: listItemProps,
|
|
344
342
|
customClass: listItemClass
|
|
345
|
-
},
|
|
343
|
+
}, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
|
|
346
344
|
alignBox: "row",
|
|
347
345
|
align: "vertical"
|
|
348
346
|
}, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
@@ -25,8 +25,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
25
25
|
|
|
26
26
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
27
|
|
|
28
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
29
|
-
|
|
30
28
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
31
29
|
|
|
32
30
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
@@ -102,10 +100,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
|
|
|
102
100
|
onSearch = _this$props3.onSearch,
|
|
103
101
|
needSearchFetching = _this$props3.needSearchFetching,
|
|
104
102
|
searchStr = _this$props3.searchStr,
|
|
105
|
-
i18nKeys = _this$props3.i18nKeys
|
|
106
|
-
customProps = _this$props3.customProps;
|
|
107
|
-
var _customProps$toggleDr = customProps.toggleDropDownProps,
|
|
108
|
-
toggleDropDownProps = _customProps$toggleDr === void 0 ? {} : _customProps$toggleDr;
|
|
103
|
+
i18nKeys = _this$props3.i18nKeys;
|
|
109
104
|
var _i18nKeys$title = i18nKeys.title,
|
|
110
105
|
title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
|
|
111
106
|
_i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
|
|
@@ -114,7 +109,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
|
|
|
114
109
|
searchErrorText = _i18nKeys$searchError === void 0 ? 'No results' : _i18nKeys$searchError,
|
|
115
110
|
_i18nKeys$placeholder = i18nKeys.placeholder,
|
|
116
111
|
placeholder = _i18nKeys$placeholder === void 0 ? 'Search Department' : _i18nKeys$placeholder;
|
|
117
|
-
return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"],
|
|
112
|
+
return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
|
|
118
113
|
title: title,
|
|
119
114
|
options: departmentList,
|
|
120
115
|
value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
|
|
@@ -143,7 +138,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
|
|
|
143
138
|
isNextOptions: isNextOptions,
|
|
144
139
|
onSearch: onSearch,
|
|
145
140
|
needSearchFetching: needSearchFetching
|
|
146
|
-
}
|
|
141
|
+
});
|
|
147
142
|
}
|
|
148
143
|
}]);
|
|
149
144
|
|
|
@@ -31,5 +31,5 @@ var propTypes = (_propTypes = {
|
|
|
31
31
|
searchEmptyText: _propTypes2["default"].string,
|
|
32
32
|
searchErrorText: _propTypes2["default"].string,
|
|
33
33
|
placeholder: _propTypes2["default"].string
|
|
34
|
-
})),
|
|
34
|
+
})), _propTypes);
|
|
35
35
|
exports.propTypes = propTypes;
|