@atlaskit/link-datasource 1.13.2 → 1.14.1
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 +16 -0
- package/dist/cjs/analytics/constants.js +1 -1
- package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js +16 -8
- package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/async-popup-select/loadingMessage.js +21 -0
- package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.js +10 -0
- package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/async-popup-select/noOptionsMessage.js +24 -0
- package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/custom-select-message/index.js +30 -0
- package/dist/es2019/analytics/constants.js +1 -1
- package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js +15 -7
- package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/loadingMessage.js +14 -0
- package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.js +10 -0
- package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/noOptionsMessage.js +17 -0
- package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/custom-select-message/index.js +24 -0
- package/dist/esm/analytics/constants.js +1 -1
- package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js +17 -9
- package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/loadingMessage.js +14 -0
- package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.js +10 -0
- package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/noOptionsMessage.js +17 -0
- package/dist/esm/ui/jira-issues-modal/basic-filters/ui/custom-select-message/index.js +23 -0
- package/dist/types/ui/jira-issues-modal/basic-filters/ui/async-popup-select/loadingMessage.d.ts +3 -0
- package/dist/types/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.d.ts +10 -0
- package/dist/types/ui/jira-issues-modal/basic-filters/ui/async-popup-select/noOptionsMessage.d.ts +3 -0
- package/dist/types/ui/jira-issues-modal/basic-filters/ui/custom-select-message/index.d.ts +8 -0
- package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/async-popup-select/loadingMessage.d.ts +3 -0
- package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.d.ts +10 -0
- package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/async-popup-select/noOptionsMessage.d.ts +3 -0
- package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/custom-select-message/index.d.ts +8 -0
- package/package.json +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/link-datasource
|
|
2
2
|
|
|
3
|
+
## 1.14.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#42835](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42835) [`685b3b60d34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/685b3b60d34) - Add empty state UI for basic filter dropdown.
|
|
8
|
+
|
|
9
|
+
## 1.14.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#42756](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42756) [`89ed621ec92`](https://bitbucket.org/atlassian/atlassian-frontend/commits/89ed621ec92) - Add loading message UI for basic filter dropdown
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 1.13.2
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -12,15 +12,17 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
|
|
|
12
12
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
13
13
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
14
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
-
var _debounce = _interopRequireDefault(require("lodash/debounce"));
|
|
16
15
|
var _reactIntlNext = require("react-intl-next");
|
|
16
|
+
var _useDebounce = require("use-debounce");
|
|
17
17
|
var _select = require("@atlaskit/select");
|
|
18
18
|
var _useFilterOptions2 = require("../../hooks/useFilterOptions");
|
|
19
19
|
var _control = _interopRequireDefault(require("./control"));
|
|
20
20
|
var _dropdownIndicator = _interopRequireDefault(require("./dropdownIndicator"));
|
|
21
21
|
var _footer = _interopRequireDefault(require("./footer"));
|
|
22
22
|
var _formatOptionLabel = _interopRequireDefault(require("./formatOptionLabel"));
|
|
23
|
+
var _loadingMessage = _interopRequireDefault(require("./loadingMessage"));
|
|
23
24
|
var _messages = require("./messages");
|
|
25
|
+
var _noOptionsMessage = _interopRequireDefault(require("./noOptionsMessage"));
|
|
24
26
|
var _trigger = _interopRequireDefault(require("./trigger"));
|
|
25
27
|
var _excluded = ["isOpen"];
|
|
26
28
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -57,9 +59,13 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
|
|
|
57
59
|
fetchFilterOptions = _useFilterOptions.fetchFilterOptions,
|
|
58
60
|
totalCount = _useFilterOptions.totalCount,
|
|
59
61
|
status = _useFilterOptions.status;
|
|
60
|
-
var
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function (searchString) {
|
|
63
|
+
fetchFilterOptions({
|
|
64
|
+
searchString: searchString
|
|
65
|
+
});
|
|
66
|
+
}, SEARCH_DEBOUNCE_MS),
|
|
67
|
+
_useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
|
|
68
|
+
handleDebouncedFetchFilterOptions = _useDebouncedCallback2[0];
|
|
63
69
|
var handleInputChange = (0, _react.useCallback)( /*#__PURE__*/function () {
|
|
64
70
|
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(newSearchTerm, actionMeta) {
|
|
65
71
|
return _regenerator.default.wrap(function _callee$(_context) {
|
|
@@ -67,9 +73,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
|
|
|
67
73
|
case 0:
|
|
68
74
|
if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
|
|
69
75
|
setSearchTerm(newSearchTerm);
|
|
70
|
-
handleDebouncedFetchFilterOptions(
|
|
71
|
-
searchString: newSearchTerm
|
|
72
|
-
});
|
|
76
|
+
handleDebouncedFetchFilterOptions(newSearchTerm);
|
|
73
77
|
}
|
|
74
78
|
case 1:
|
|
75
79
|
case "end":
|
|
@@ -129,15 +133,19 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
|
|
|
129
133
|
closeMenuOnSelect: false,
|
|
130
134
|
hideSelectedOptions: false,
|
|
131
135
|
isLoading: isLoading,
|
|
136
|
+
loadingMessage: _loadingMessage.default,
|
|
137
|
+
noOptionsMessage: _noOptionsMessage.default,
|
|
132
138
|
placeholder: formatMessage(_messages.asyncPopupSelectMessages.selectPlaceholder),
|
|
133
139
|
components: {
|
|
134
140
|
/* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
|
|
135
141
|
Option: _select.CheckboxOption,
|
|
136
142
|
Control: _control.default,
|
|
143
|
+
DropdownIndicator: _dropdownIndicator.default,
|
|
137
144
|
LoadingIndicator: undefined,
|
|
138
145
|
// disables the three ... indicator in the searchbox when picker is loading
|
|
139
|
-
|
|
146
|
+
IndicatorSeparator: undefined // disables the | separator between search input and icon
|
|
140
147
|
},
|
|
148
|
+
|
|
141
149
|
options: options,
|
|
142
150
|
value: selectedOptions,
|
|
143
151
|
filterOption: noFilterOptions,
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
|
|
10
|
+
var _customSelectMessage = _interopRequireDefault(require("../custom-select-message"));
|
|
11
|
+
var _messages = require("./messages");
|
|
12
|
+
var CustomDropdownLoadingMessage = function CustomDropdownLoadingMessage() {
|
|
13
|
+
return /*#__PURE__*/_react.default.createElement(_customSelectMessage.default, {
|
|
14
|
+
icon: /*#__PURE__*/_react.default.createElement(_spinner.default, {
|
|
15
|
+
size: "large"
|
|
16
|
+
}),
|
|
17
|
+
message: _messages.asyncPopupSelectMessages.loadingMessage,
|
|
18
|
+
testId: "jlol-basic-filter-popup-select--loading-message"
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
var _default = exports.default = CustomDropdownLoadingMessage;
|
|
@@ -34,5 +34,15 @@ var asyncPopupSelectMessages = exports.asyncPopupSelectMessages = {
|
|
|
34
34
|
id: 'linkDataSource.basic-filter.assignee.label',
|
|
35
35
|
description: 'Label to be displayed for assignee filter dropdown button.',
|
|
36
36
|
defaultMessage: 'Assignee'
|
|
37
|
+
},
|
|
38
|
+
loadingMessage: {
|
|
39
|
+
id: 'linkDataSource.basic-filter.loading-message',
|
|
40
|
+
defaultMessage: 'Loading...',
|
|
41
|
+
description: 'The text for when options are being loaded in dropdown'
|
|
42
|
+
},
|
|
43
|
+
noOptionsMessage: {
|
|
44
|
+
id: 'linkDataSource.basic-filter.no-options-message',
|
|
45
|
+
defaultMessage: 'No matches found',
|
|
46
|
+
description: 'The text for when no matches are found in dropdown'
|
|
37
47
|
}
|
|
38
48
|
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
|
|
10
|
+
var _colors = require("@atlaskit/theme/colors");
|
|
11
|
+
var _customSelectMessage = _interopRequireDefault(require("../custom-select-message"));
|
|
12
|
+
var _messages = require("./messages");
|
|
13
|
+
var CustomNoOptionsMessage = function CustomNoOptionsMessage() {
|
|
14
|
+
return /*#__PURE__*/_react.default.createElement(_customSelectMessage.default, {
|
|
15
|
+
icon: /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
|
|
16
|
+
primaryColor: "var(--ds-icon, ".concat(_colors.N500, ")"),
|
|
17
|
+
size: "xlarge",
|
|
18
|
+
label: ""
|
|
19
|
+
}),
|
|
20
|
+
message: _messages.asyncPopupSelectMessages.noOptionsMessage,
|
|
21
|
+
testId: "jlol-basic-filter-popup-select--no-options-message"
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
var _default = exports.default = CustomNoOptionsMessage;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _reactIntlNext = require("react-intl-next");
|
|
10
|
+
var _heading = _interopRequireDefault(require("@atlaskit/heading"));
|
|
11
|
+
var _primitives = require("@atlaskit/primitives");
|
|
12
|
+
var boxStyles = (0, _primitives.xcss)({
|
|
13
|
+
height: "var(--ds-space-800, 64px)",
|
|
14
|
+
marginBottom: "var(--ds-space-200, 16px)"
|
|
15
|
+
});
|
|
16
|
+
var CustomSelectMessage = function CustomSelectMessage(_ref) {
|
|
17
|
+
var icon = _ref.icon,
|
|
18
|
+
message = _ref.message,
|
|
19
|
+
testId = _ref.testId;
|
|
20
|
+
return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
|
|
21
|
+
testId: testId
|
|
22
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
|
|
23
|
+
xcss: boxStyles,
|
|
24
|
+
alignItems: "center",
|
|
25
|
+
justifyContent: "center"
|
|
26
|
+
}, icon), /*#__PURE__*/_react.default.createElement(_heading.default, {
|
|
27
|
+
level: "h400"
|
|
28
|
+
}, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, message)));
|
|
29
|
+
};
|
|
30
|
+
var _default = exports.default = CustomSelectMessage;
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import React, { useCallback, useEffect,
|
|
3
|
-
import debounce from 'lodash/debounce';
|
|
2
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
4
3
|
import { useIntl } from 'react-intl-next';
|
|
4
|
+
import { useDebouncedCallback } from 'use-debounce';
|
|
5
5
|
import { CheckboxOption, PopupSelect } from '@atlaskit/select';
|
|
6
6
|
import { useFilterOptions } from '../../hooks/useFilterOptions';
|
|
7
7
|
import CustomControl from './control';
|
|
8
8
|
import CustomDropdownIndicator from './dropdownIndicator';
|
|
9
9
|
import PopupFooter from './footer';
|
|
10
10
|
import formatOptionLabel from './formatOptionLabel';
|
|
11
|
+
import CustomDropdownLoadingMessage from './loadingMessage';
|
|
11
12
|
import { asyncPopupSelectMessages } from './messages';
|
|
13
|
+
import CustomNoOptionsMessage from './noOptionsMessage';
|
|
12
14
|
import PopupTrigger from './trigger';
|
|
13
15
|
// Needed to disable filtering from react-select
|
|
14
16
|
const noFilterOptions = () => true;
|
|
@@ -35,13 +37,15 @@ const AsyncPopupSelect = ({
|
|
|
35
37
|
filterType,
|
|
36
38
|
cloudId
|
|
37
39
|
});
|
|
38
|
-
const handleDebouncedFetchFilterOptions =
|
|
40
|
+
const [handleDebouncedFetchFilterOptions] = useDebouncedCallback(searchString => {
|
|
41
|
+
fetchFilterOptions({
|
|
42
|
+
searchString
|
|
43
|
+
});
|
|
44
|
+
}, SEARCH_DEBOUNCE_MS);
|
|
39
45
|
const handleInputChange = useCallback(async (newSearchTerm, actionMeta) => {
|
|
40
46
|
if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
|
|
41
47
|
setSearchTerm(newSearchTerm);
|
|
42
|
-
handleDebouncedFetchFilterOptions(
|
|
43
|
-
searchString: newSearchTerm
|
|
44
|
-
});
|
|
48
|
+
handleDebouncedFetchFilterOptions(newSearchTerm);
|
|
45
49
|
}
|
|
46
50
|
}, [handleDebouncedFetchFilterOptions, searchTerm]);
|
|
47
51
|
const handleOptionSelection = newValue => {
|
|
@@ -81,15 +85,19 @@ const AsyncPopupSelect = ({
|
|
|
81
85
|
closeMenuOnSelect: false,
|
|
82
86
|
hideSelectedOptions: false,
|
|
83
87
|
isLoading: isLoading,
|
|
88
|
+
loadingMessage: CustomDropdownLoadingMessage,
|
|
89
|
+
noOptionsMessage: CustomNoOptionsMessage,
|
|
84
90
|
placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder),
|
|
85
91
|
components: {
|
|
86
92
|
/* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
|
|
87
93
|
Option: CheckboxOption,
|
|
88
94
|
Control: CustomControl,
|
|
95
|
+
DropdownIndicator: CustomDropdownIndicator,
|
|
89
96
|
LoadingIndicator: undefined,
|
|
90
97
|
// disables the three ... indicator in the searchbox when picker is loading
|
|
91
|
-
|
|
98
|
+
IndicatorSeparator: undefined // disables the | separator between search input and icon
|
|
92
99
|
},
|
|
100
|
+
|
|
93
101
|
options: options,
|
|
94
102
|
value: selectedOptions,
|
|
95
103
|
filterOption: noFilterOptions,
|
package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/loadingMessage.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Spinner from '@atlaskit/spinner';
|
|
3
|
+
import CustomSelectMessage from '../custom-select-message';
|
|
4
|
+
import { asyncPopupSelectMessages } from './messages';
|
|
5
|
+
const CustomDropdownLoadingMessage = () => {
|
|
6
|
+
return /*#__PURE__*/React.createElement(CustomSelectMessage, {
|
|
7
|
+
icon: /*#__PURE__*/React.createElement(Spinner, {
|
|
8
|
+
size: "large"
|
|
9
|
+
}),
|
|
10
|
+
message: asyncPopupSelectMessages.loadingMessage,
|
|
11
|
+
testId: "jlol-basic-filter-popup-select--loading-message"
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
export default CustomDropdownLoadingMessage;
|
|
@@ -28,5 +28,15 @@ export const asyncPopupSelectMessages = {
|
|
|
28
28
|
id: 'linkDataSource.basic-filter.assignee.label',
|
|
29
29
|
description: 'Label to be displayed for assignee filter dropdown button.',
|
|
30
30
|
defaultMessage: 'Assignee'
|
|
31
|
+
},
|
|
32
|
+
loadingMessage: {
|
|
33
|
+
id: 'linkDataSource.basic-filter.loading-message',
|
|
34
|
+
defaultMessage: 'Loading...',
|
|
35
|
+
description: 'The text for when options are being loaded in dropdown'
|
|
36
|
+
},
|
|
37
|
+
noOptionsMessage: {
|
|
38
|
+
id: 'linkDataSource.basic-filter.no-options-message',
|
|
39
|
+
defaultMessage: 'No matches found',
|
|
40
|
+
description: 'The text for when no matches are found in dropdown'
|
|
31
41
|
}
|
|
32
42
|
};
|
package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/noOptionsMessage.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
|
|
3
|
+
import { N500 } from '@atlaskit/theme/colors';
|
|
4
|
+
import CustomSelectMessage from '../custom-select-message';
|
|
5
|
+
import { asyncPopupSelectMessages } from './messages';
|
|
6
|
+
const CustomNoOptionsMessage = () => {
|
|
7
|
+
return /*#__PURE__*/React.createElement(CustomSelectMessage, {
|
|
8
|
+
icon: /*#__PURE__*/React.createElement(QuestionCircleIcon, {
|
|
9
|
+
primaryColor: `var(--ds-icon, ${N500})`,
|
|
10
|
+
size: "xlarge",
|
|
11
|
+
label: ""
|
|
12
|
+
}),
|
|
13
|
+
message: asyncPopupSelectMessages.noOptionsMessage,
|
|
14
|
+
testId: "jlol-basic-filter-popup-select--no-options-message"
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
export default CustomNoOptionsMessage;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FormattedMessage } from 'react-intl-next';
|
|
3
|
+
import Heading from '@atlaskit/heading';
|
|
4
|
+
import { Flex, Stack, xcss } from '@atlaskit/primitives';
|
|
5
|
+
const boxStyles = xcss({
|
|
6
|
+
height: "var(--ds-space-800, 64px)",
|
|
7
|
+
marginBottom: "var(--ds-space-200, 16px)"
|
|
8
|
+
});
|
|
9
|
+
const CustomSelectMessage = ({
|
|
10
|
+
icon,
|
|
11
|
+
message,
|
|
12
|
+
testId
|
|
13
|
+
}) => {
|
|
14
|
+
return /*#__PURE__*/React.createElement(Stack, {
|
|
15
|
+
testId: testId
|
|
16
|
+
}, /*#__PURE__*/React.createElement(Flex, {
|
|
17
|
+
xcss: boxStyles,
|
|
18
|
+
alignItems: "center",
|
|
19
|
+
justifyContent: "center"
|
|
20
|
+
}, icon), /*#__PURE__*/React.createElement(Heading, {
|
|
21
|
+
level: "h400"
|
|
22
|
+
}, /*#__PURE__*/React.createElement(FormattedMessage, message)));
|
|
23
|
+
};
|
|
24
|
+
export default CustomSelectMessage;
|
|
@@ -4,16 +4,18 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
5
|
var _excluded = ["isOpen"];
|
|
6
6
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
7
|
-
import React, { useCallback, useEffect,
|
|
8
|
-
import debounce from 'lodash/debounce';
|
|
7
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
9
8
|
import { useIntl } from 'react-intl-next';
|
|
9
|
+
import { useDebouncedCallback } from 'use-debounce';
|
|
10
10
|
import { CheckboxOption, PopupSelect } from '@atlaskit/select';
|
|
11
11
|
import { useFilterOptions } from '../../hooks/useFilterOptions';
|
|
12
12
|
import CustomControl from './control';
|
|
13
13
|
import CustomDropdownIndicator from './dropdownIndicator';
|
|
14
14
|
import PopupFooter from './footer';
|
|
15
15
|
import formatOptionLabel from './formatOptionLabel';
|
|
16
|
+
import CustomDropdownLoadingMessage from './loadingMessage';
|
|
16
17
|
import { asyncPopupSelectMessages } from './messages';
|
|
18
|
+
import CustomNoOptionsMessage from './noOptionsMessage';
|
|
17
19
|
import PopupTrigger from './trigger';
|
|
18
20
|
// Needed to disable filtering from react-select
|
|
19
21
|
var noFilterOptions = function noFilterOptions() {
|
|
@@ -47,9 +49,13 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
|
|
|
47
49
|
fetchFilterOptions = _useFilterOptions.fetchFilterOptions,
|
|
48
50
|
totalCount = _useFilterOptions.totalCount,
|
|
49
51
|
status = _useFilterOptions.status;
|
|
50
|
-
var
|
|
51
|
-
|
|
52
|
-
|
|
52
|
+
var _useDebouncedCallback = useDebouncedCallback(function (searchString) {
|
|
53
|
+
fetchFilterOptions({
|
|
54
|
+
searchString: searchString
|
|
55
|
+
});
|
|
56
|
+
}, SEARCH_DEBOUNCE_MS),
|
|
57
|
+
_useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
|
|
58
|
+
handleDebouncedFetchFilterOptions = _useDebouncedCallback2[0];
|
|
53
59
|
var handleInputChange = useCallback( /*#__PURE__*/function () {
|
|
54
60
|
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(newSearchTerm, actionMeta) {
|
|
55
61
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
@@ -57,9 +63,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
|
|
|
57
63
|
case 0:
|
|
58
64
|
if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
|
|
59
65
|
setSearchTerm(newSearchTerm);
|
|
60
|
-
handleDebouncedFetchFilterOptions(
|
|
61
|
-
searchString: newSearchTerm
|
|
62
|
-
});
|
|
66
|
+
handleDebouncedFetchFilterOptions(newSearchTerm);
|
|
63
67
|
}
|
|
64
68
|
case 1:
|
|
65
69
|
case "end":
|
|
@@ -119,15 +123,19 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
|
|
|
119
123
|
closeMenuOnSelect: false,
|
|
120
124
|
hideSelectedOptions: false,
|
|
121
125
|
isLoading: isLoading,
|
|
126
|
+
loadingMessage: CustomDropdownLoadingMessage,
|
|
127
|
+
noOptionsMessage: CustomNoOptionsMessage,
|
|
122
128
|
placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder),
|
|
123
129
|
components: {
|
|
124
130
|
/* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
|
|
125
131
|
Option: CheckboxOption,
|
|
126
132
|
Control: CustomControl,
|
|
133
|
+
DropdownIndicator: CustomDropdownIndicator,
|
|
127
134
|
LoadingIndicator: undefined,
|
|
128
135
|
// disables the three ... indicator in the searchbox when picker is loading
|
|
129
|
-
|
|
136
|
+
IndicatorSeparator: undefined // disables the | separator between search input and icon
|
|
130
137
|
},
|
|
138
|
+
|
|
131
139
|
options: options,
|
|
132
140
|
value: selectedOptions,
|
|
133
141
|
filterOption: noFilterOptions,
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Spinner from '@atlaskit/spinner';
|
|
3
|
+
import CustomSelectMessage from '../custom-select-message';
|
|
4
|
+
import { asyncPopupSelectMessages } from './messages';
|
|
5
|
+
var CustomDropdownLoadingMessage = function CustomDropdownLoadingMessage() {
|
|
6
|
+
return /*#__PURE__*/React.createElement(CustomSelectMessage, {
|
|
7
|
+
icon: /*#__PURE__*/React.createElement(Spinner, {
|
|
8
|
+
size: "large"
|
|
9
|
+
}),
|
|
10
|
+
message: asyncPopupSelectMessages.loadingMessage,
|
|
11
|
+
testId: "jlol-basic-filter-popup-select--loading-message"
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
export default CustomDropdownLoadingMessage;
|
|
@@ -28,5 +28,15 @@ export var asyncPopupSelectMessages = {
|
|
|
28
28
|
id: 'linkDataSource.basic-filter.assignee.label',
|
|
29
29
|
description: 'Label to be displayed for assignee filter dropdown button.',
|
|
30
30
|
defaultMessage: 'Assignee'
|
|
31
|
+
},
|
|
32
|
+
loadingMessage: {
|
|
33
|
+
id: 'linkDataSource.basic-filter.loading-message',
|
|
34
|
+
defaultMessage: 'Loading...',
|
|
35
|
+
description: 'The text for when options are being loaded in dropdown'
|
|
36
|
+
},
|
|
37
|
+
noOptionsMessage: {
|
|
38
|
+
id: 'linkDataSource.basic-filter.no-options-message',
|
|
39
|
+
defaultMessage: 'No matches found',
|
|
40
|
+
description: 'The text for when no matches are found in dropdown'
|
|
31
41
|
}
|
|
32
42
|
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
|
|
3
|
+
import { N500 } from '@atlaskit/theme/colors';
|
|
4
|
+
import CustomSelectMessage from '../custom-select-message';
|
|
5
|
+
import { asyncPopupSelectMessages } from './messages';
|
|
6
|
+
var CustomNoOptionsMessage = function CustomNoOptionsMessage() {
|
|
7
|
+
return /*#__PURE__*/React.createElement(CustomSelectMessage, {
|
|
8
|
+
icon: /*#__PURE__*/React.createElement(QuestionCircleIcon, {
|
|
9
|
+
primaryColor: "var(--ds-icon, ".concat(N500, ")"),
|
|
10
|
+
size: "xlarge",
|
|
11
|
+
label: ""
|
|
12
|
+
}),
|
|
13
|
+
message: asyncPopupSelectMessages.noOptionsMessage,
|
|
14
|
+
testId: "jlol-basic-filter-popup-select--no-options-message"
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
export default CustomNoOptionsMessage;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FormattedMessage } from 'react-intl-next';
|
|
3
|
+
import Heading from '@atlaskit/heading';
|
|
4
|
+
import { Flex, Stack, xcss } from '@atlaskit/primitives';
|
|
5
|
+
var boxStyles = xcss({
|
|
6
|
+
height: "var(--ds-space-800, 64px)",
|
|
7
|
+
marginBottom: "var(--ds-space-200, 16px)"
|
|
8
|
+
});
|
|
9
|
+
var CustomSelectMessage = function CustomSelectMessage(_ref) {
|
|
10
|
+
var icon = _ref.icon,
|
|
11
|
+
message = _ref.message,
|
|
12
|
+
testId = _ref.testId;
|
|
13
|
+
return /*#__PURE__*/React.createElement(Stack, {
|
|
14
|
+
testId: testId
|
|
15
|
+
}, /*#__PURE__*/React.createElement(Flex, {
|
|
16
|
+
xcss: boxStyles,
|
|
17
|
+
alignItems: "center",
|
|
18
|
+
justifyContent: "center"
|
|
19
|
+
}, icon), /*#__PURE__*/React.createElement(Heading, {
|
|
20
|
+
level: "h400"
|
|
21
|
+
}, /*#__PURE__*/React.createElement(FormattedMessage, message)));
|
|
22
|
+
};
|
|
23
|
+
export default CustomSelectMessage;
|
|
@@ -29,4 +29,14 @@ export declare const asyncPopupSelectMessages: {
|
|
|
29
29
|
description: string;
|
|
30
30
|
defaultMessage: string;
|
|
31
31
|
};
|
|
32
|
+
loadingMessage: {
|
|
33
|
+
id: string;
|
|
34
|
+
defaultMessage: string;
|
|
35
|
+
description: string;
|
|
36
|
+
};
|
|
37
|
+
noOptionsMessage: {
|
|
38
|
+
id: string;
|
|
39
|
+
defaultMessage: string;
|
|
40
|
+
description: string;
|
|
41
|
+
};
|
|
32
42
|
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface CustomSelectMessageProps {
|
|
3
|
+
icon: React.ReactNode;
|
|
4
|
+
message: object;
|
|
5
|
+
testId: string;
|
|
6
|
+
}
|
|
7
|
+
declare const CustomSelectMessage: ({ icon, message, testId, }: CustomSelectMessageProps) => JSX.Element;
|
|
8
|
+
export default CustomSelectMessage;
|
package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.d.ts
CHANGED
|
@@ -29,4 +29,14 @@ export declare const asyncPopupSelectMessages: {
|
|
|
29
29
|
description: string;
|
|
30
30
|
defaultMessage: string;
|
|
31
31
|
};
|
|
32
|
+
loadingMessage: {
|
|
33
|
+
id: string;
|
|
34
|
+
defaultMessage: string;
|
|
35
|
+
description: string;
|
|
36
|
+
};
|
|
37
|
+
noOptionsMessage: {
|
|
38
|
+
id: string;
|
|
39
|
+
defaultMessage: string;
|
|
40
|
+
description: string;
|
|
41
|
+
};
|
|
32
42
|
};
|
package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/custom-select-message/index.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface CustomSelectMessageProps {
|
|
3
|
+
icon: React.ReactNode;
|
|
4
|
+
message: object;
|
|
5
|
+
testId: string;
|
|
6
|
+
}
|
|
7
|
+
declare const CustomSelectMessage: ({ icon, message, testId, }: CustomSelectMessageProps) => JSX.Element;
|
|
8
|
+
export default CustomSelectMessage;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/link-datasource",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.1",
|
|
4
4
|
"description": "UI Components to support linking platform dataset feature",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"@atlaskit/button": "^16.13.0",
|
|
37
37
|
"@atlaskit/editor-prosemirror": "1.1.0",
|
|
38
38
|
"@atlaskit/empty-state": "^7.5.0",
|
|
39
|
-
"@atlaskit/form": "^
|
|
39
|
+
"@atlaskit/form": "^9.0.0",
|
|
40
40
|
"@atlaskit/heading": "^1.4.0",
|
|
41
41
|
"@atlaskit/icon": "^21.12.0",
|
|
42
42
|
"@atlaskit/icon-object": "^6.3.0",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@atlaskit/pragmatic-drag-and-drop-react-indicator": "^0.17.0",
|
|
57
57
|
"@atlaskit/primitives": "^1.9.0",
|
|
58
58
|
"@atlaskit/select": "^16.7.0",
|
|
59
|
-
"@atlaskit/smart-card": "^26.
|
|
59
|
+
"@atlaskit/smart-card": "^26.42.0",
|
|
60
60
|
"@atlaskit/spinner": "^15.6.0",
|
|
61
61
|
"@atlaskit/tag": "^11.6.0",
|
|
62
62
|
"@atlaskit/textfield": "5.6.8",
|
|
@@ -72,6 +72,7 @@
|
|
|
72
72
|
"lodash": "^4.17.21",
|
|
73
73
|
"react-dom": "^16.8.0",
|
|
74
74
|
"tiny-invariant": "^1.2.0",
|
|
75
|
+
"use-debounce": "^3.4.0",
|
|
75
76
|
"uuid": "^3.1.0"
|
|
76
77
|
},
|
|
77
78
|
"peerDependencies": {
|