@atlaskit/link-picker 0.0.2 → 0.8.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 +152 -0
- package/README.md +27 -5
- package/dist/cjs/browser.js +39 -0
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/messages.js +102 -0
- package/dist/cjs/styles.js +90 -0
- package/dist/cjs/transformTimeStamp.js +55 -0
- package/dist/cjs/types.js +5 -0
- package/dist/cjs/ui/LinkSearchList.js +112 -0
- package/dist/cjs/ui/LinkSearchListItem.js +101 -0
- package/dist/cjs/ui/PanelTextInput.js +119 -0
- package/dist/cjs/ui/announcer.js +64 -0
- package/dist/cjs/ui/link-picker.js +582 -0
- package/dist/cjs/url.js +104 -0
- package/dist/cjs/utils.js +40 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/browser.js +34 -0
- package/dist/es2019/index.js +1 -1
- package/dist/es2019/messages.js +93 -0
- package/dist/es2019/styles.js +93 -0
- package/dist/es2019/transformTimeStamp.js +41 -0
- package/dist/es2019/types.js +1 -0
- package/dist/es2019/ui/LinkSearchList.js +65 -0
- package/dist/es2019/ui/LinkSearchListItem.js +88 -0
- package/dist/es2019/ui/PanelTextInput.js +93 -0
- package/dist/es2019/ui/announcer.js +38 -0
- package/dist/es2019/ui/link-picker.js +481 -0
- package/dist/es2019/url.js +88 -0
- package/dist/es2019/utils.js +24 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/browser.js +34 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/messages.js +93 -0
- package/dist/esm/styles.js +46 -0
- package/dist/esm/transformTimeStamp.js +41 -0
- package/dist/esm/types.js +1 -0
- package/dist/esm/ui/LinkSearchList.js +87 -0
- package/dist/esm/ui/LinkSearchListItem.js +88 -0
- package/dist/esm/ui/PanelTextInput.js +93 -0
- package/dist/esm/ui/announcer.js +51 -0
- package/dist/esm/ui/link-picker.js +560 -0
- package/dist/esm/url.js +90 -0
- package/dist/esm/utils.js +24 -0
- package/dist/esm/version.json +1 -1
- package/dist/types/browser.d.ts +15 -0
- package/dist/types/index.d.ts +3 -1
- package/dist/types/messages.d.ts +92 -0
- package/dist/types/styles.d.ts +18 -0
- package/dist/types/transformTimeStamp.d.ts +3 -0
- package/dist/types/types.d.ts +37 -0
- package/dist/types/ui/LinkSearchList.d.ts +20 -0
- package/dist/types/ui/LinkSearchListItem.d.ts +17 -0
- package/dist/types/ui/PanelTextInput.d.ts +17 -0
- package/dist/types/ui/announcer.d.ts +22 -0
- package/dist/types/ui/link-picker.d.ts +51 -0
- package/dist/types/url.d.ts +5 -0
- package/dist/types/utils.d.ts +4 -0
- package/example-helpers/flight-deck/_manifest.json +9 -0
- package/example-helpers/flight-deck/mockFDResponse.json +133 -0
- package/example-helpers/mock-data.ts +316 -0
- package/example-helpers/providers.ts +39 -0
- package/package.json +35 -6
- package/dist/cjs/link-picker.js +0 -12
- package/dist/es2019/link-picker.js +0 -3
- package/dist/esm/link-picker.js +0 -3
- package/dist/types/link-picker.d.ts +0 -1
|
@@ -0,0 +1,582 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.RECENT_SEARCH_LIST_SIZE = exports.LinkPickerWithIntl = void 0;
|
|
11
|
+
|
|
12
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
13
|
+
|
|
14
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
15
|
+
|
|
16
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
17
|
+
|
|
18
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
19
|
+
|
|
20
|
+
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
21
|
+
|
|
22
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
23
|
+
|
|
24
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
25
|
+
|
|
26
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
27
|
+
|
|
28
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
29
|
+
|
|
30
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
31
|
+
|
|
32
|
+
var _core = require("@emotion/core");
|
|
33
|
+
|
|
34
|
+
var _reactIntlNext = require("react-intl-next");
|
|
35
|
+
|
|
36
|
+
var _messages = require("../messages");
|
|
37
|
+
|
|
38
|
+
var _PanelTextInput = _interopRequireDefault(require("./PanelTextInput"));
|
|
39
|
+
|
|
40
|
+
var _LinkSearchList = _interopRequireDefault(require("./LinkSearchList"));
|
|
41
|
+
|
|
42
|
+
var _url = require("../url");
|
|
43
|
+
|
|
44
|
+
var _styles = require("../styles");
|
|
45
|
+
|
|
46
|
+
var _browser = require("../browser");
|
|
47
|
+
|
|
48
|
+
var _transformTimeStamp = require("../transformTimeStamp");
|
|
49
|
+
|
|
50
|
+
var _announcer = _interopRequireDefault(require("./announcer"));
|
|
51
|
+
|
|
52
|
+
var _button = _interopRequireWildcard(require("@atlaskit/button"));
|
|
53
|
+
|
|
54
|
+
var _form = require("@atlaskit/form");
|
|
55
|
+
|
|
56
|
+
var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
|
|
57
|
+
|
|
58
|
+
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
|
|
59
|
+
|
|
60
|
+
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); }
|
|
61
|
+
|
|
62
|
+
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; }
|
|
63
|
+
|
|
64
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
65
|
+
|
|
66
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
67
|
+
|
|
68
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
69
|
+
|
|
70
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
71
|
+
|
|
72
|
+
var RECENT_SEARCH_LIST_SIZE = 5;
|
|
73
|
+
exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
|
|
74
|
+
|
|
75
|
+
var LinkPicker = /*#__PURE__*/function (_PureComponent) {
|
|
76
|
+
(0, _inherits2.default)(LinkPicker, _PureComponent);
|
|
77
|
+
|
|
78
|
+
var _super = _createSuper(LinkPicker);
|
|
79
|
+
|
|
80
|
+
function LinkPicker(props) {
|
|
81
|
+
var _this;
|
|
82
|
+
|
|
83
|
+
(0, _classCallCheck2.default)(this, LinkPicker);
|
|
84
|
+
_this = _super.call(this, props);
|
|
85
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperRef", /*#__PURE__*/_react.default.createRef());
|
|
86
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "queryVersion", 0);
|
|
87
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateInput", /*#__PURE__*/function () {
|
|
88
|
+
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(input) {
|
|
89
|
+
return _regenerator.default.wrap(function _callee$(_context) {
|
|
90
|
+
while (1) {
|
|
91
|
+
switch (_context.prev = _context.next) {
|
|
92
|
+
case 0:
|
|
93
|
+
if (!(input.length && (0, _url.isSafeUrl)(input))) {
|
|
94
|
+
_context.next = 2;
|
|
95
|
+
break;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
return _context.abrupt("return", _this.setState({
|
|
99
|
+
url: input,
|
|
100
|
+
selectedIndex: -1,
|
|
101
|
+
items: [],
|
|
102
|
+
isLoading: false,
|
|
103
|
+
invalidUrl: null
|
|
104
|
+
}));
|
|
105
|
+
|
|
106
|
+
case 2:
|
|
107
|
+
return _context.abrupt("return", _this.setState({
|
|
108
|
+
url: input,
|
|
109
|
+
// Unset selection on any input change
|
|
110
|
+
selectedIndex: -1,
|
|
111
|
+
invalidUrl: null
|
|
112
|
+
}, function () {
|
|
113
|
+
_this.updateResults();
|
|
114
|
+
}));
|
|
115
|
+
|
|
116
|
+
case 3:
|
|
117
|
+
case "end":
|
|
118
|
+
return _context.stop();
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}, _callee);
|
|
122
|
+
}));
|
|
123
|
+
|
|
124
|
+
return function (_x) {
|
|
125
|
+
return _ref.apply(this, arguments);
|
|
126
|
+
};
|
|
127
|
+
}());
|
|
128
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createClearHandler", function (field) {
|
|
129
|
+
return function () {
|
|
130
|
+
switch (field) {
|
|
131
|
+
case 'url':
|
|
132
|
+
{
|
|
133
|
+
_this.updateInput('');
|
|
134
|
+
|
|
135
|
+
break;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
case 'displayText':
|
|
139
|
+
{
|
|
140
|
+
_this.setState((0, _defineProperty2.default)({}, field, ''));
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
});
|
|
145
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getScreenReaderText", function () {
|
|
146
|
+
var intl = _this.props.intl;
|
|
147
|
+
var _this$state = _this.state,
|
|
148
|
+
items = _this$state.items,
|
|
149
|
+
selectedIndex = _this$state.selectedIndex;
|
|
150
|
+
|
|
151
|
+
if (items.length && selectedIndex > -1) {
|
|
152
|
+
var _items$selectedIndex = items[selectedIndex],
|
|
153
|
+
name = _items$selectedIndex.name,
|
|
154
|
+
container = _items$selectedIndex.container,
|
|
155
|
+
lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
|
|
156
|
+
lastViewedDate = _items$selectedIndex.lastViewedDate;
|
|
157
|
+
var date = (0, _transformTimeStamp.transformTimeStamp)(intl, lastViewedDate, lastUpdatedDate);
|
|
158
|
+
return "".concat(name, ", ").concat(container, ", ").concat(date === null || date === void 0 ? void 0 : date.pageAction, " ").concat(date === null || date === void 0 ? void 0 : date.dateString, " ").concat((date === null || date === void 0 ? void 0 : date.timeSince) || '');
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isUrlPopulatedWithSelectedItem", function () {
|
|
162
|
+
/**
|
|
163
|
+
* When we use ArrowKey to navigate through result items,
|
|
164
|
+
* the URL field will be populated with the content of
|
|
165
|
+
* selected item.
|
|
166
|
+
* This function will check if the URL field is populated
|
|
167
|
+
* with selected item.
|
|
168
|
+
* It can be useful to detect whether we want to insert a
|
|
169
|
+
* smartlink or a hyperlink with customized title
|
|
170
|
+
*/
|
|
171
|
+
var _this$state2 = _this.state,
|
|
172
|
+
items = _this$state2.items,
|
|
173
|
+
selectedIndex = _this$state2.selectedIndex,
|
|
174
|
+
url = _this$state2.url;
|
|
175
|
+
var selectedItem = items[selectedIndex];
|
|
176
|
+
|
|
177
|
+
if (selectedItem && selectedItem.url === url) {
|
|
178
|
+
return true;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
return false;
|
|
182
|
+
});
|
|
183
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelected", function (objectId) {
|
|
184
|
+
var items = _this.state.items;
|
|
185
|
+
var selectedItem = items.find(function (item) {
|
|
186
|
+
return item.objectId === objectId;
|
|
187
|
+
});
|
|
188
|
+
|
|
189
|
+
if (selectedItem) {
|
|
190
|
+
var url = selectedItem.url,
|
|
191
|
+
name = selectedItem.name;
|
|
192
|
+
|
|
193
|
+
_this.handleInsert(url, name, 'typeAhead');
|
|
194
|
+
}
|
|
195
|
+
});
|
|
196
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleInsert", function (url, title, inputType) {
|
|
197
|
+
var onSubmit = _this.props.onSubmit;
|
|
198
|
+
var _this$state3 = _this.state,
|
|
199
|
+
rawUrl = _this$state3.url,
|
|
200
|
+
displayText = _this$state3.displayText;
|
|
201
|
+
|
|
202
|
+
if (onSubmit) {
|
|
203
|
+
onSubmit(_objectSpread({
|
|
204
|
+
url: url,
|
|
205
|
+
displayText: displayText || null,
|
|
206
|
+
title: title || null,
|
|
207
|
+
meta: {
|
|
208
|
+
inputMethod: inputType
|
|
209
|
+
}
|
|
210
|
+
}, inputType === 'manual' ? {
|
|
211
|
+
rawUrl: rawUrl
|
|
212
|
+
} : {}));
|
|
213
|
+
}
|
|
214
|
+
});
|
|
215
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseEnterResultItem", function (objectId) {
|
|
216
|
+
var items = _this.state.items;
|
|
217
|
+
var index = findIndex(items, function (item) {
|
|
218
|
+
return item.objectId === objectId;
|
|
219
|
+
});
|
|
220
|
+
|
|
221
|
+
_this.setState({
|
|
222
|
+
activeIndex: index
|
|
223
|
+
});
|
|
224
|
+
});
|
|
225
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseLeaveResultItem", function (objectId) {
|
|
226
|
+
var _this$state4 = _this.state,
|
|
227
|
+
items = _this$state4.items,
|
|
228
|
+
activeIndex = _this$state4.activeIndex;
|
|
229
|
+
var index = findIndex(items, function (item) {
|
|
230
|
+
return item.objectId === objectId;
|
|
231
|
+
}); // This is to avoid updating index that was set by other mouseenter event
|
|
232
|
+
|
|
233
|
+
if (activeIndex === index) {
|
|
234
|
+
_this.setState({
|
|
235
|
+
activeIndex: -1
|
|
236
|
+
});
|
|
237
|
+
}
|
|
238
|
+
});
|
|
239
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSubmit", function () {
|
|
240
|
+
var _this$state5 = _this.state,
|
|
241
|
+
url = _this$state5.url,
|
|
242
|
+
selectedIndex = _this$state5.selectedIndex,
|
|
243
|
+
items = _this$state5.items;
|
|
244
|
+
var selectedItem = items[selectedIndex];
|
|
245
|
+
|
|
246
|
+
if (_this.isUrlPopulatedWithSelectedItem()) {
|
|
247
|
+
_this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
|
|
248
|
+
} else if (url.length > 0) {
|
|
249
|
+
var normalized = (0, _url.normalizeUrl)(url);
|
|
250
|
+
|
|
251
|
+
if (normalized) {
|
|
252
|
+
_this.handleInsert(normalized, null, 'manual');
|
|
253
|
+
} else {
|
|
254
|
+
var intl = _this.props.intl;
|
|
255
|
+
var linkInvalid = intl.formatMessage(_messages.messages.linkInvalid);
|
|
256
|
+
|
|
257
|
+
_this.setState({
|
|
258
|
+
invalidUrl: linkInvalid
|
|
259
|
+
});
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
});
|
|
263
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
|
|
264
|
+
var _this$state6 = _this.state,
|
|
265
|
+
items = _this$state6.items,
|
|
266
|
+
activeIndex = _this$state6.activeIndex;
|
|
267
|
+
var keyCode = event.keyCode;
|
|
268
|
+
var KEY_CODE_ARROW_DOWN = 40;
|
|
269
|
+
var KEY_CODE_ARROW_UP = 38;
|
|
270
|
+
|
|
271
|
+
if (!items || !items.length) {
|
|
272
|
+
return;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
var updatedIndex = activeIndex;
|
|
276
|
+
|
|
277
|
+
switch (keyCode) {
|
|
278
|
+
case KEY_CODE_ARROW_DOWN:
|
|
279
|
+
// down
|
|
280
|
+
event.preventDefault();
|
|
281
|
+
updatedIndex = (activeIndex + 1) % items.length;
|
|
282
|
+
break;
|
|
283
|
+
|
|
284
|
+
case KEY_CODE_ARROW_UP:
|
|
285
|
+
// up
|
|
286
|
+
event.preventDefault();
|
|
287
|
+
updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
|
|
288
|
+
break;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && items[updatedIndex]) {
|
|
292
|
+
_this.setState({
|
|
293
|
+
activeIndex: updatedIndex,
|
|
294
|
+
selectedIndex: updatedIndex,
|
|
295
|
+
url: items[updatedIndex].url,
|
|
296
|
+
invalidUrl: null
|
|
297
|
+
});
|
|
298
|
+
}
|
|
299
|
+
});
|
|
300
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCancel", function () {
|
|
301
|
+
var onCancel = _this.props.onCancel;
|
|
302
|
+
|
|
303
|
+
if (onCancel) {
|
|
304
|
+
onCancel();
|
|
305
|
+
}
|
|
306
|
+
});
|
|
307
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateTextInput", function (displayText) {
|
|
308
|
+
_this.setState({
|
|
309
|
+
displayText: displayText
|
|
310
|
+
});
|
|
311
|
+
});
|
|
312
|
+
_this.state = {
|
|
313
|
+
selectedIndex: -1,
|
|
314
|
+
activeIndex: -1,
|
|
315
|
+
isLoading: false,
|
|
316
|
+
url: (0, _url.normalizeUrl)(props.url) || '',
|
|
317
|
+
displayText: props.displayText || '',
|
|
318
|
+
items: [],
|
|
319
|
+
invalidUrl: null
|
|
320
|
+
};
|
|
321
|
+
/* Cache functions */
|
|
322
|
+
|
|
323
|
+
_this.handleClearUrl = _this.createClearHandler('url');
|
|
324
|
+
_this.handleClearDisplayText = _this.createClearHandler('displayText');
|
|
325
|
+
return _this;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
(0, _createClass2.default)(LinkPicker, [{
|
|
329
|
+
key: "componentDidMount",
|
|
330
|
+
value: function componentDidMount() {
|
|
331
|
+
this.loadInitialLinkSearchResult();
|
|
332
|
+
}
|
|
333
|
+
}, {
|
|
334
|
+
key: "loadInitialLinkSearchResult",
|
|
335
|
+
value: function loadInitialLinkSearchResult() {
|
|
336
|
+
var url = this.state.url;
|
|
337
|
+
|
|
338
|
+
if (!url) {
|
|
339
|
+
this.updateResults();
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
}, {
|
|
343
|
+
key: "getActivePlugin",
|
|
344
|
+
value: function getActivePlugin() {
|
|
345
|
+
if (!this.props.plugins || this.props.plugins.length === 0) {
|
|
346
|
+
return null;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
return this.props.plugins[0];
|
|
350
|
+
}
|
|
351
|
+
/**
|
|
352
|
+
* Interface between link picker and plugins to update results
|
|
353
|
+
*/
|
|
354
|
+
|
|
355
|
+
}, {
|
|
356
|
+
key: "updateResults",
|
|
357
|
+
value: function () {
|
|
358
|
+
var _updateResults = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
|
|
359
|
+
var queryVersion, activePlugin, updates, _yield$updates$next, done, value;
|
|
360
|
+
|
|
361
|
+
return _regenerator.default.wrap(function _callee2$(_context2) {
|
|
362
|
+
while (1) {
|
|
363
|
+
switch (_context2.prev = _context2.next) {
|
|
364
|
+
case 0:
|
|
365
|
+
queryVersion = ++this.queryVersion;
|
|
366
|
+
activePlugin = this.getActivePlugin();
|
|
367
|
+
|
|
368
|
+
if (activePlugin) {
|
|
369
|
+
_context2.next = 4;
|
|
370
|
+
break;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
return _context2.abrupt("return");
|
|
374
|
+
|
|
375
|
+
case 4:
|
|
376
|
+
updates = activePlugin.resolve({
|
|
377
|
+
query: this.state.url
|
|
378
|
+
});
|
|
379
|
+
this.setState({
|
|
380
|
+
isLoading: true,
|
|
381
|
+
items: []
|
|
382
|
+
});
|
|
383
|
+
_context2.prev = 6;
|
|
384
|
+
|
|
385
|
+
case 7:
|
|
386
|
+
if (!(queryVersion === this.queryVersion)) {
|
|
387
|
+
_context2.next = 20;
|
|
388
|
+
break;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
_context2.next = 10;
|
|
392
|
+
return updates.next();
|
|
393
|
+
|
|
394
|
+
case 10:
|
|
395
|
+
_yield$updates$next = _context2.sent;
|
|
396
|
+
done = _yield$updates$next.done;
|
|
397
|
+
value = _yield$updates$next.value;
|
|
398
|
+
|
|
399
|
+
if (!(queryVersion !== this.queryVersion)) {
|
|
400
|
+
_context2.next = 15;
|
|
401
|
+
break;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
return _context2.abrupt("return");
|
|
405
|
+
|
|
406
|
+
case 15:
|
|
407
|
+
this.setState({
|
|
408
|
+
items: limit(value),
|
|
409
|
+
isLoading: !done
|
|
410
|
+
});
|
|
411
|
+
|
|
412
|
+
if (!done) {
|
|
413
|
+
_context2.next = 18;
|
|
414
|
+
break;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
return _context2.abrupt("return");
|
|
418
|
+
|
|
419
|
+
case 18:
|
|
420
|
+
_context2.next = 7;
|
|
421
|
+
break;
|
|
422
|
+
|
|
423
|
+
case 20:
|
|
424
|
+
_context2.next = 25;
|
|
425
|
+
break;
|
|
426
|
+
|
|
427
|
+
case 22:
|
|
428
|
+
_context2.prev = 22;
|
|
429
|
+
_context2.t0 = _context2["catch"](6);
|
|
430
|
+
this.setState({
|
|
431
|
+
isLoading: false
|
|
432
|
+
});
|
|
433
|
+
|
|
434
|
+
case 25:
|
|
435
|
+
case "end":
|
|
436
|
+
return _context2.stop();
|
|
437
|
+
}
|
|
438
|
+
}
|
|
439
|
+
}, _callee2, this, [[6, 22]]);
|
|
440
|
+
}));
|
|
441
|
+
|
|
442
|
+
function updateResults() {
|
|
443
|
+
return _updateResults.apply(this, arguments);
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
return updateResults;
|
|
447
|
+
}()
|
|
448
|
+
}, {
|
|
449
|
+
key: "render",
|
|
450
|
+
value: function render() {
|
|
451
|
+
var _this$state7 = this.state,
|
|
452
|
+
items = _this$state7.items,
|
|
453
|
+
isLoading = _this$state7.isLoading,
|
|
454
|
+
activeIndex = _this$state7.activeIndex,
|
|
455
|
+
selectedIndex = _this$state7.selectedIndex,
|
|
456
|
+
url = _this$state7.url,
|
|
457
|
+
displayText = _this$state7.displayText;
|
|
458
|
+
var formatMessage = this.props.intl.formatMessage;
|
|
459
|
+
var activePlugin = this.getActivePlugin();
|
|
460
|
+
var linkPlaceHolder = formatMessage(activePlugin ? _messages.messages.placeholder : _messages.messages.linkPlaceholder);
|
|
461
|
+
var linkLabel = formatMessage(_messages.messages.linkLabel);
|
|
462
|
+
var linkTextLabel = formatMessage(_messages.messages.linkTextLabel);
|
|
463
|
+
var linkTextPlaceHolder = formatMessage(_messages.messages.linkTextPlaceholder);
|
|
464
|
+
var screenReaderDescriptionId = 'search-recent-links-field-description';
|
|
465
|
+
var linkSearchListId = 'link-picker-search-list';
|
|
466
|
+
var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
|
|
467
|
+
// as the Aria design pattern for combobox does not work in this case
|
|
468
|
+
// for details: https://a11y-internal.atlassian.net/browse/AK-740
|
|
469
|
+
|
|
470
|
+
var screenReaderText = _browser.browser.safari && this.getScreenReaderText();
|
|
471
|
+
var searchIcon = activePlugin && (0, _core.jsx)(_styles.SearchIconWrapper, {
|
|
472
|
+
"data-testid": "link-picker-search-icon"
|
|
473
|
+
}, (0, _core.jsx)(_search.default, {
|
|
474
|
+
size: "medium",
|
|
475
|
+
label: ''
|
|
476
|
+
}));
|
|
477
|
+
return (0, _core.jsx)("div", {
|
|
478
|
+
"data-testid": "link-picker",
|
|
479
|
+
className: "recent-list",
|
|
480
|
+
css: _styles.recentListStyles
|
|
481
|
+
}, (0, _core.jsx)(_styles.Container, {
|
|
482
|
+
innerRef: this.wrapperRef
|
|
483
|
+
}, screenReaderText && (0, _core.jsx)(_announcer.default, {
|
|
484
|
+
ariaLive: "assertive",
|
|
485
|
+
text: screenReaderText,
|
|
486
|
+
ariaRelevant: "additions",
|
|
487
|
+
delay: 250
|
|
488
|
+
}), (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)("span", {
|
|
489
|
+
"aria-hidden": "true",
|
|
490
|
+
id: screenReaderDescriptionId
|
|
491
|
+
}, formatMessage(_messages.messages.searchLinkAriaDescription))), (0, _core.jsx)(_PanelTextInput.default, {
|
|
492
|
+
name: "link",
|
|
493
|
+
testId: "link-url",
|
|
494
|
+
role: "combobox",
|
|
495
|
+
label: linkLabel,
|
|
496
|
+
placeholder: linkPlaceHolder,
|
|
497
|
+
value: url,
|
|
498
|
+
autoFocus: true,
|
|
499
|
+
autoComplete: "off",
|
|
500
|
+
elemBeforeInput: searchIcon,
|
|
501
|
+
onSubmit: this.handleSubmit,
|
|
502
|
+
onChange: this.updateInput,
|
|
503
|
+
onKeyDown: this.handleKeyDown,
|
|
504
|
+
onClear: this.handleClearUrl,
|
|
505
|
+
error: this.state.invalidUrl,
|
|
506
|
+
clearLabel: formatMessage(_messages.messages.clearLink),
|
|
507
|
+
"aria-controls": linkSearchListId,
|
|
508
|
+
"aria-autocomplete": "list",
|
|
509
|
+
"aria-activedescendant": ariaActiveDescendant,
|
|
510
|
+
"aria-describedby": screenReaderDescriptionId,
|
|
511
|
+
"aria-expanded": true
|
|
512
|
+
}), (0, _core.jsx)(_PanelTextInput.default, {
|
|
513
|
+
name: "link-text",
|
|
514
|
+
testId: "link-text",
|
|
515
|
+
autoComplete: "off",
|
|
516
|
+
label: linkTextLabel,
|
|
517
|
+
placeholder: linkTextPlaceHolder,
|
|
518
|
+
"aria-label": formatMessage(_messages.messages.linkAriaLabel),
|
|
519
|
+
value: displayText,
|
|
520
|
+
onSubmit: this.handleSubmit,
|
|
521
|
+
onKeyDown: this.handleKeyDown,
|
|
522
|
+
onChange: this.updateTextInput,
|
|
523
|
+
onClear: this.handleClearDisplayText,
|
|
524
|
+
clearLabel: formatMessage(_messages.messages.clearText)
|
|
525
|
+
}), !!items.length && (0, _core.jsx)("div", {
|
|
526
|
+
css: _styles.ListTitleStyles,
|
|
527
|
+
id: "link-picker-list-title",
|
|
528
|
+
"data-testid": "link-picker-list-title"
|
|
529
|
+
}, formatMessage(this.state.url ? _messages.messages.titleResults : _messages.messages.titleRecentlyViewed)), (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)("span", {
|
|
530
|
+
"aria-live": "polite",
|
|
531
|
+
"aria-atomic": "true",
|
|
532
|
+
id: "fabric.smartcard.linkpicker.suggested.results"
|
|
533
|
+
}, url && formatMessage(_messages.messages.searchLinkResults, {
|
|
534
|
+
count: items.length
|
|
535
|
+
}))), (0, _core.jsx)(_LinkSearchList.default, {
|
|
536
|
+
ariaLabelledBy: "link-picker-list-title",
|
|
537
|
+
ariaControls: "fabric.smartcard.linkpicker.suggested.results",
|
|
538
|
+
id: linkSearchListId,
|
|
539
|
+
role: "listbox",
|
|
540
|
+
items: items,
|
|
541
|
+
isLoading: isLoading,
|
|
542
|
+
selectedIndex: selectedIndex,
|
|
543
|
+
activeIndex: activeIndex,
|
|
544
|
+
onSelect: this.handleSelected,
|
|
545
|
+
onMouseEnter: this.handleMouseEnterResultItem,
|
|
546
|
+
onMouseLeave: this.handleMouseLeaveResultItem
|
|
547
|
+
}), (0, _core.jsx)(_form.FormFooter, {
|
|
548
|
+
align: "end"
|
|
549
|
+
}, (0, _core.jsx)(_button.ButtonGroup, null, (0, _core.jsx)(_button.default, {
|
|
550
|
+
appearance: "default",
|
|
551
|
+
onClick: this.handleCancel,
|
|
552
|
+
testId: "link-picker-cancel-button"
|
|
553
|
+
}, formatMessage(_messages.messages.cancelButton)), (0, _core.jsx)(_button.default, {
|
|
554
|
+
type: "submit",
|
|
555
|
+
appearance: "primary",
|
|
556
|
+
onClick: this.handleSubmit,
|
|
557
|
+
testId: "link-picker-insert-button"
|
|
558
|
+
}, formatMessage(_messages.messages.insertButton))))));
|
|
559
|
+
}
|
|
560
|
+
}]);
|
|
561
|
+
return LinkPicker;
|
|
562
|
+
}(_react.PureComponent);
|
|
563
|
+
|
|
564
|
+
function findIndex(array, predicate) {
|
|
565
|
+
var index = -1;
|
|
566
|
+
array.some(function (item, i) {
|
|
567
|
+
if (predicate(item)) {
|
|
568
|
+
index = i;
|
|
569
|
+
return true;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
return false;
|
|
573
|
+
});
|
|
574
|
+
return index;
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
function limit(items) {
|
|
578
|
+
return items.slice(0, RECENT_SEARCH_LIST_SIZE);
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
var LinkPickerWithIntl = (0, _reactIntlNext.injectIntl)(LinkPicker);
|
|
582
|
+
exports.LinkPickerWithIntl = LinkPickerWithIntl;
|
package/dist/cjs/url.js
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.isSafeUrl = void 0;
|
|
9
|
+
exports.normalizeUrl = normalizeUrl;
|
|
10
|
+
|
|
11
|
+
var _linkifyIt = _interopRequireDefault(require("linkify-it"));
|
|
12
|
+
|
|
13
|
+
var linkify = (0, _linkifyIt.default)();
|
|
14
|
+
linkify.add('sourcetree:', 'http:');
|
|
15
|
+
var tlds = 'biz|com|edu|gov|net|org|pro|web|xxx|aero|asia|coop|info|museum|name|shop|рф'.split('|');
|
|
16
|
+
var tlds2Char = 'a[cdefgilmnoqrtuwxz]|b[abdefghijmnorstvwyz]|c[acdfghiklmnoruvwxyz]|d[ejkmoz]|e[cegrstu]|f[ijkmor]|g[abdefghilmnpqrstuwy]|h[kmnrtu]|i[delmnoqrst]|j[emop]|k[eghimnprwyz]|l[abcikrstuvy]|m[acdeghklmnopqrtuvwxyz]|n[acefgilopruz]|om|p[aefghkmnrtw]|qa|r[eosuw]|s[abcdegijklmnrtuvxyz]|t[cdfghjklmnortvwz]|u[agksyz]|v[aceginu]|w[fs]|y[et]|z[amw]';
|
|
17
|
+
tlds.push(tlds2Char);
|
|
18
|
+
linkify.tlds(tlds, false);
|
|
19
|
+
var whitelistedURLPatterns = [/^https?:\/\/[^\s]*$/im, /^ftps?:\/\//im, /^\//im, /^mailto:/im, /^skype:/im, /^callto:[^\s]*$/im, /^facetime:[^\s]*$/im, /^git:/im, /^irc6?:/im, /^news:/im, /^nntp:/im, /^feed:/im, /^cvs:/im, /^svn:/im, /^mvn:/im, /^ssh:/im, /^scp:\/\//im, /^sftp:\/\//im, /^itms:/im, /^notes:/im, /^hipchat:\/\//im, /^sourcetree:/im, /^urn:/im, /^tel:/im, /^xmpp:/im, /^telnet:/im, /^vnc:/im, /^rdp:/im, /^whatsapp:/im, /^slack:/im, /^sips?:/im, /^magnet:/im, /^foo:/im, /^#/im];
|
|
20
|
+
|
|
21
|
+
var normaliseLinkHref = function normaliseLinkHref(url) {
|
|
22
|
+
var match = getLinkMatch(url);
|
|
23
|
+
return match && match.url || null;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
var getLinkMatch = function getLinkMatch(str) {
|
|
27
|
+
if (!str) {
|
|
28
|
+
return null;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
var match = linkifyMatch(str);
|
|
32
|
+
|
|
33
|
+
if (!match.length) {
|
|
34
|
+
match = linkify.match(str);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
return match && match.length > 0 && match[0].index === 0 && match[0].lastIndex === str.trim().length ? match[0] : null;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
var LINK_REGEXP = /(https?|ftp):\/\/[^\s]+/;
|
|
41
|
+
|
|
42
|
+
var linkifyMatch = function linkifyMatch(text) {
|
|
43
|
+
var matches = [];
|
|
44
|
+
|
|
45
|
+
if (!LINK_REGEXP.test(text)) {
|
|
46
|
+
return matches;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
var startpos = 0;
|
|
50
|
+
var substr;
|
|
51
|
+
|
|
52
|
+
while (substr = text.substr(startpos)) {
|
|
53
|
+
var link = (substr.match(LINK_REGEXP) || [''])[0];
|
|
54
|
+
|
|
55
|
+
if (link) {
|
|
56
|
+
var index = substr.search(LINK_REGEXP);
|
|
57
|
+
var start = index >= 0 ? index + startpos : index;
|
|
58
|
+
var end = start + link.length;
|
|
59
|
+
matches.push({
|
|
60
|
+
index: start,
|
|
61
|
+
lastIndex: end,
|
|
62
|
+
raw: link,
|
|
63
|
+
url: link,
|
|
64
|
+
text: link,
|
|
65
|
+
schema: ''
|
|
66
|
+
});
|
|
67
|
+
startpos += end;
|
|
68
|
+
} else {
|
|
69
|
+
break;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
return matches;
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
var isSafeUrl = function isSafeUrl(url) {
|
|
77
|
+
var urlTrimmed = url.trim();
|
|
78
|
+
|
|
79
|
+
if (urlTrimmed.length === 0) {
|
|
80
|
+
return true;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return whitelistedURLPatterns.some(function (p) {
|
|
84
|
+
return p.test(urlTrimmed);
|
|
85
|
+
});
|
|
86
|
+
};
|
|
87
|
+
/**
|
|
88
|
+
* Adds protocol to url if needed.
|
|
89
|
+
*/
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
exports.isSafeUrl = isSafeUrl;
|
|
93
|
+
|
|
94
|
+
function normalizeUrl(url) {
|
|
95
|
+
if (!url) {
|
|
96
|
+
return '';
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
if (isSafeUrl(url)) {
|
|
100
|
+
return url.trim();
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
return normaliseLinkHref(url);
|
|
104
|
+
}
|