@atlaskit/link-picker 1.1.3 → 1.2.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 +18 -0
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/ui/error-boundary-fallback/generic-error-svg/index.js +67 -0
- package/dist/cjs/ui/error-boundary-fallback/generic-error-svg/styled.js +20 -0
- package/dist/cjs/ui/error-boundary-fallback/index.js +50 -0
- package/dist/cjs/ui/index.js +38 -0
- package/dist/cjs/ui/{announcer.js → link-picker/announcer.js} +0 -0
- package/dist/cjs/{browser.js → ui/link-picker/browser.js} +0 -0
- package/dist/cjs/ui/{link-picker.js → link-picker/index.js} +22 -27
- package/dist/cjs/ui/{link-search-list → link-picker/link-search-list}/index.js +0 -0
- package/dist/cjs/ui/{link-search-list → link-picker/link-search-list}/styled.js +0 -0
- package/dist/cjs/ui/{link-search-no-results → link-picker/link-search-no-results}/index.js +0 -0
- package/dist/cjs/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.js +0 -0
- package/dist/cjs/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.js +0 -0
- package/dist/cjs/ui/{list-item → link-picker/list-item}/index.js +1 -1
- package/dist/cjs/ui/{list-item → link-picker/list-item}/styled.js +0 -0
- package/dist/cjs/{messages.js → ui/link-picker/messages.js} +5 -0
- package/dist/cjs/ui/link-picker/styled.js +31 -0
- package/dist/cjs/ui/{text-input → link-picker/text-input}/index.js +1 -1
- package/dist/cjs/ui/{text-input → link-picker/text-input}/styled.js +0 -0
- package/dist/cjs/{transformTimeStamp.js → ui/link-picker/transformTimeStamp.js} +0 -0
- package/dist/cjs/{url.js → ui/link-picker/url.js} +0 -0
- package/dist/cjs/{utils.js → ui/link-picker/utils.js} +0 -0
- package/dist/cjs/{types.js → ui/types.js} +0 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/index.js +1 -1
- package/dist/es2019/ui/error-boundary-fallback/generic-error-svg/index.js +56 -0
- package/dist/es2019/ui/error-boundary-fallback/generic-error-svg/styled.js +8 -0
- package/dist/es2019/ui/error-boundary-fallback/index.js +31 -0
- package/dist/es2019/ui/index.js +17 -0
- package/dist/es2019/ui/{announcer.js → link-picker/announcer.js} +0 -0
- package/dist/es2019/{browser.js → ui/link-picker/browser.js} +0 -0
- package/dist/es2019/ui/{link-picker.js → link-picker/index.js} +24 -29
- package/dist/es2019/ui/{link-search-list → link-picker/link-search-list}/index.js +0 -0
- package/dist/es2019/ui/{link-search-list → link-picker/link-search-list}/styled.js +0 -0
- package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/index.js +0 -0
- package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.js +0 -0
- package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.js +0 -0
- package/dist/es2019/ui/{list-item → link-picker/list-item}/index.js +1 -1
- package/dist/es2019/ui/{list-item → link-picker/list-item}/styled.js +0 -0
- package/dist/es2019/{messages.js → ui/link-picker/messages.js} +5 -0
- package/dist/es2019/ui/{styled.js → link-picker/styled.js} +4 -6
- package/dist/es2019/ui/{text-input → link-picker/text-input}/index.js +1 -1
- package/dist/es2019/ui/{text-input → link-picker/text-input}/styled.js +0 -0
- package/dist/es2019/{transformTimeStamp.js → ui/link-picker/transformTimeStamp.js} +0 -0
- package/dist/es2019/{url.js → ui/link-picker/url.js} +0 -0
- package/dist/es2019/{utils.js → ui/link-picker/utils.js} +0 -0
- package/dist/es2019/{types.js → ui/types.js} +0 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ui/error-boundary-fallback/generic-error-svg/index.js +56 -0
- package/dist/esm/ui/error-boundary-fallback/generic-error-svg/styled.js +8 -0
- package/dist/esm/ui/error-boundary-fallback/index.js +33 -0
- package/dist/esm/ui/index.js +19 -0
- package/dist/esm/ui/{announcer.js → link-picker/announcer.js} +0 -0
- package/dist/esm/{browser.js → ui/link-picker/browser.js} +0 -0
- package/dist/esm/ui/{link-picker.js → link-picker/index.js} +23 -29
- package/dist/esm/ui/{link-search-list → link-picker/link-search-list}/index.js +0 -0
- package/dist/esm/ui/{link-search-list → link-picker/link-search-list}/styled.js +0 -0
- package/dist/esm/ui/{link-search-no-results → link-picker/link-search-no-results}/index.js +0 -0
- package/dist/esm/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.js +0 -0
- package/dist/esm/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.js +0 -0
- package/dist/esm/ui/{list-item → link-picker/list-item}/index.js +1 -1
- package/dist/esm/ui/{list-item → link-picker/list-item}/styled.js +0 -0
- package/dist/esm/{messages.js → ui/link-picker/messages.js} +5 -0
- package/dist/esm/ui/link-picker/styled.js +16 -0
- package/dist/esm/ui/{text-input → link-picker/text-input}/index.js +1 -1
- package/dist/esm/ui/{text-input → link-picker/text-input}/styled.js +0 -0
- package/dist/esm/{transformTimeStamp.js → ui/link-picker/transformTimeStamp.js} +0 -0
- package/dist/esm/{url.js → ui/link-picker/url.js} +0 -0
- package/dist/esm/{utils.js → ui/link-picker/utils.js} +0 -0
- package/dist/esm/{types.js → ui/types.js} +0 -0
- package/dist/esm/version.json +1 -1
- package/dist/types/index.d.ts +2 -2
- package/dist/types/ui/error-boundary-fallback/generic-error-svg/index.d.ts +4 -0
- package/dist/types/ui/error-boundary-fallback/generic-error-svg/styled.d.ts +1 -0
- package/dist/types/ui/error-boundary-fallback/index.d.ts +3 -0
- package/dist/types/ui/index.d.ts +3 -0
- package/dist/types/ui/{announcer.d.ts → link-picker/announcer.d.ts} +0 -0
- package/dist/types/{browser.d.ts → ui/link-picker/browser.d.ts} +0 -0
- package/dist/types/ui/{link-picker.d.ts → link-picker/index.d.ts} +4 -4
- package/dist/types/ui/{link-search-list → link-picker/link-search-list}/index.d.ts +0 -0
- package/dist/types/ui/{link-search-list → link-picker/link-search-list}/styled.d.ts +0 -0
- package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/index.d.ts +0 -0
- package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/index.d.ts +0 -0
- package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/no-results-svg/styled.d.ts +0 -0
- package/dist/types/ui/{list-item → link-picker/list-item}/index.d.ts +0 -0
- package/dist/types/ui/{list-item → link-picker/list-item}/styled.d.ts +0 -0
- package/dist/types/{messages.d.ts → ui/link-picker/messages.d.ts} +5 -0
- package/dist/types/ui/{styled.d.ts → link-picker/styled.d.ts} +1 -2
- package/dist/types/ui/{text-input → link-picker/text-input}/index.d.ts +0 -0
- package/dist/types/ui/{text-input → link-picker/text-input}/styled.d.ts +0 -0
- package/dist/types/{transformTimeStamp.d.ts → ui/link-picker/transformTimeStamp.d.ts} +1 -1
- package/dist/types/{url.d.ts → ui/link-picker/url.d.ts} +0 -0
- package/dist/types/{utils.d.ts → ui/link-picker/utils.d.ts} +0 -0
- package/dist/types/{types.d.ts → ui/types.d.ts} +0 -0
- package/package.json +3 -2
- package/report.api.md +56 -21
- package/dist/cjs/ui/styled.js +0 -32
- package/dist/esm/ui/styled.js +0 -16
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
|
|
3
3
|
/** @jsx jsx */
|
|
4
|
-
import
|
|
4
|
+
import { PureComponent } from 'react';
|
|
5
5
|
import { jsx } from '@emotion/react';
|
|
6
6
|
import { injectIntl } from 'react-intl-next';
|
|
7
|
-
import { messages } from '
|
|
7
|
+
import { messages } from './messages';
|
|
8
8
|
import PanelTextInput from './text-input';
|
|
9
9
|
import LinkSearchList from './link-search-list';
|
|
10
|
-
import { normalizeUrl, isSafeUrl } from '
|
|
11
|
-
import {
|
|
12
|
-
import { browser } from '
|
|
13
|
-
import { transformTimeStamp } from '
|
|
14
|
-
import Announcer from '
|
|
10
|
+
import { normalizeUrl, isSafeUrl } from './url';
|
|
11
|
+
import { rootContainerStyles, searchIconStyles, listTitleStyles } from './styled';
|
|
12
|
+
import { browser } from './browser';
|
|
13
|
+
import { transformTimeStamp } from './transformTimeStamp';
|
|
14
|
+
import Announcer from './/announcer';
|
|
15
15
|
import Button, { ButtonGroup } from '@atlaskit/button';
|
|
16
16
|
import { FormFooter } from '@atlaskit/form';
|
|
17
17
|
import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
|
|
@@ -23,8 +23,6 @@ class LinkPicker extends PureComponent {
|
|
|
23
23
|
constructor(props) {
|
|
24
24
|
super(props);
|
|
25
25
|
|
|
26
|
-
_defineProperty(this, "wrapperRef", /*#__PURE__*/React.createRef());
|
|
27
|
-
|
|
28
26
|
_defineProperty(this, "queryVersion", 0);
|
|
29
27
|
|
|
30
28
|
_defineProperty(this, "updateInput", async input => {
|
|
@@ -183,25 +181,24 @@ class LinkPicker extends PureComponent {
|
|
|
183
181
|
selectedIndex,
|
|
184
182
|
items
|
|
185
183
|
} = this.state;
|
|
184
|
+
const {
|
|
185
|
+
intl
|
|
186
|
+
} = this.props;
|
|
186
187
|
const selectedItem = items[selectedIndex];
|
|
187
188
|
|
|
188
189
|
if (this.isUrlPopulatedWithSelectedItem()) {
|
|
189
|
-
this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
|
|
190
|
-
}
|
|
191
|
-
const normalized = normalizeUrl(url);
|
|
190
|
+
return this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
|
|
191
|
+
}
|
|
192
192
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
intl
|
|
198
|
-
} = this.props;
|
|
199
|
-
const linkInvalid = intl.formatMessage(messages.linkInvalid);
|
|
200
|
-
this.setState({
|
|
201
|
-
invalidUrl: linkInvalid
|
|
202
|
-
});
|
|
203
|
-
}
|
|
193
|
+
const normalized = normalizeUrl(url);
|
|
194
|
+
|
|
195
|
+
if (normalized) {
|
|
196
|
+
return this.handleInsert(normalized, null, 'manual');
|
|
204
197
|
}
|
|
198
|
+
|
|
199
|
+
return this.setState({
|
|
200
|
+
invalidUrl: intl.formatMessage(messages.linkInvalid)
|
|
201
|
+
});
|
|
205
202
|
});
|
|
206
203
|
|
|
207
204
|
_defineProperty(this, "handleKeyDown", event => {
|
|
@@ -265,6 +262,7 @@ class LinkPicker extends PureComponent {
|
|
|
265
262
|
selectedIndex: -1,
|
|
266
263
|
activeIndex: -1,
|
|
267
264
|
isLoading: false,
|
|
265
|
+
isEditing: !!props.url,
|
|
268
266
|
url: normalizeUrl(props.url) || '',
|
|
269
267
|
displayText: props.displayText || '',
|
|
270
268
|
items: [],
|
|
@@ -358,6 +356,7 @@ class LinkPicker extends PureComponent {
|
|
|
358
356
|
const {
|
|
359
357
|
items,
|
|
360
358
|
isLoading,
|
|
359
|
+
isEditing,
|
|
361
360
|
activeIndex,
|
|
362
361
|
selectedIndex,
|
|
363
362
|
url,
|
|
@@ -390,11 +389,7 @@ class LinkPicker extends PureComponent {
|
|
|
390
389
|
const noResults = activePlugin && !isLoading && !items.length && !isSafeUrl(url);
|
|
391
390
|
return jsx("div", {
|
|
392
391
|
"data-testid": "link-picker",
|
|
393
|
-
|
|
394
|
-
css: recentListStyles
|
|
395
|
-
}, jsx("div", {
|
|
396
|
-
css: containerStyles,
|
|
397
|
-
ref: this.wrapperRef
|
|
392
|
+
css: rootContainerStyles
|
|
398
393
|
}, screenReaderText && jsx(Announcer, {
|
|
399
394
|
ariaLive: "assertive",
|
|
400
395
|
text: screenReaderText,
|
|
@@ -474,7 +469,7 @@ class LinkPicker extends PureComponent {
|
|
|
474
469
|
appearance: "primary",
|
|
475
470
|
onClick: this.handleSubmit,
|
|
476
471
|
testId: "link-picker-insert-button"
|
|
477
|
-
}, formatMessage(messages.insertButton)))))
|
|
472
|
+
}, formatMessage(isEditing ? messages.saveButton : messages.insertButton)))));
|
|
478
473
|
}
|
|
479
474
|
|
|
480
475
|
}
|
|
File without changes
|
|
File without changes
|
package/dist/es2019/ui/{link-search-no-results → link-picker/link-search-no-results}/index.js
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { Fragment } from 'react';
|
|
3
3
|
import { jsx } from '@emotion/react';
|
|
4
4
|
import { injectIntl } from 'react-intl-next';
|
|
5
|
-
import { transformTimeStamp } from '
|
|
5
|
+
import { transformTimeStamp } from '../transformTimeStamp';
|
|
6
6
|
import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
|
|
7
7
|
|
|
8
8
|
const LinkSearchListItem = ({
|
|
File without changes
|
|
@@ -99,5 +99,10 @@ export const messages = defineMessages({
|
|
|
99
99
|
id: 'fabric.linkPicker.search.noResults.description',
|
|
100
100
|
defaultMessage: 'Try again with a different term.',
|
|
101
101
|
description: 'Describes possible action when a search returns no results'
|
|
102
|
+
},
|
|
103
|
+
saveButton: {
|
|
104
|
+
id: 'fabric.linkPicker.button.save',
|
|
105
|
+
defaultMessage: 'Save',
|
|
106
|
+
description: 'Button to save edited link'
|
|
102
107
|
}
|
|
103
108
|
});
|
|
@@ -6,15 +6,13 @@ import { N500 } from '@atlaskit/theme/colors'; // AFP-2532 TODO: Fix automatic s
|
|
|
6
6
|
import { typography } from '@atlaskit/theme';
|
|
7
7
|
import { gridSize } from '@atlaskit/theme/constants';
|
|
8
8
|
const LINK_PICKER_WIDTH_IN_PX = 342;
|
|
9
|
-
|
|
9
|
+
const LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
|
|
10
|
+
export const rootContainerStyles = css`
|
|
10
11
|
width: ${LINK_PICKER_WIDTH_IN_PX}px;
|
|
11
|
-
`;
|
|
12
|
-
export const containerStyles = css`
|
|
13
12
|
padding: ${gridSize() * 2}px;
|
|
14
|
-
width: 100%;
|
|
15
|
-
overflow: hidden;
|
|
16
|
-
line-height: initial;
|
|
17
13
|
box-sizing: border-box;
|
|
14
|
+
line-height: initial;
|
|
15
|
+
min-height: ${LINK_PICKER_MIN_HEIGHT_IN_PX}px;
|
|
18
16
|
`;
|
|
19
17
|
export const searchIconStyles = css`
|
|
20
18
|
margin-left: ${gridSize() / 2}px;
|
|
@@ -7,7 +7,7 @@ import { ErrorMessage, Field } from '@atlaskit/form';
|
|
|
7
7
|
import Tooltip from '@atlaskit/tooltip';
|
|
8
8
|
import Textfield from '@atlaskit/textfield';
|
|
9
9
|
import Selectclear from '@atlaskit/icon/glyph/select-clear';
|
|
10
|
-
import { isRedoEvent, isUndoEvent } from '
|
|
10
|
+
import { isRedoEvent, isUndoEvent } from '../utils';
|
|
11
11
|
import { clearTextButtonStyles, fieldStyles } from './styled';
|
|
12
12
|
|
|
13
13
|
const PanelTextInput = props => {
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { ComposedLinkPicker as LinkPicker } from './ui';
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
|
|
3
|
+
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
|
|
4
|
+
|
|
5
|
+
/** @jsx jsx */
|
|
6
|
+
import { jsx } from '@emotion/react';
|
|
7
|
+
import { genericErrorStyles } from './styled';
|
|
8
|
+
|
|
9
|
+
var GenericErrorSVG = function GenericErrorSVG(props) {
|
|
10
|
+
var id = 'link-picker-ui-generic-error-svg';
|
|
11
|
+
return jsx("svg", _extends({
|
|
12
|
+
height: "90",
|
|
13
|
+
viewBox: "0 0 164 212",
|
|
14
|
+
fill: "none",
|
|
15
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
16
|
+
css: genericErrorStyles
|
|
17
|
+
}, props), jsx("path", {
|
|
18
|
+
d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
|
|
19
|
+
fill: "url(#".concat(id, ")")
|
|
20
|
+
}), jsx("path", {
|
|
21
|
+
opacity: ".6",
|
|
22
|
+
d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
|
|
23
|
+
fill: "#C1C7D0"
|
|
24
|
+
}), jsx("path", {
|
|
25
|
+
opacity: ".6",
|
|
26
|
+
d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
|
|
27
|
+
fill: "#B3BAC5"
|
|
28
|
+
}), jsx("defs", null, jsx("linearGradient", {
|
|
29
|
+
id: id,
|
|
30
|
+
x1: "26.169",
|
|
31
|
+
y1: "228.621",
|
|
32
|
+
x2: "138.408",
|
|
33
|
+
y2: "116.382",
|
|
34
|
+
gradientUnits: "userSpaceOnUse"
|
|
35
|
+
}, jsx("stop", {
|
|
36
|
+
stopColor: "#C1C7D0"
|
|
37
|
+
}), jsx("stop", {
|
|
38
|
+
offset: ".297",
|
|
39
|
+
stopColor: "#C6CBD4",
|
|
40
|
+
stopOpacity: ".881"
|
|
41
|
+
}), jsx("stop", {
|
|
42
|
+
offset: ".63",
|
|
43
|
+
stopColor: "#D3D7DE",
|
|
44
|
+
stopOpacity: ".748"
|
|
45
|
+
}), jsx("stop", {
|
|
46
|
+
offset: ".98",
|
|
47
|
+
stopColor: "#E9EBEF",
|
|
48
|
+
stopOpacity: ".608"
|
|
49
|
+
}), jsx("stop", {
|
|
50
|
+
offset: "1",
|
|
51
|
+
stopColor: "#EBECF0",
|
|
52
|
+
stopOpacity: ".6"
|
|
53
|
+
}))));
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export default GenericErrorSVG;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
+
|
|
3
|
+
var _templateObject;
|
|
4
|
+
|
|
5
|
+
import { gridSize as getGridSize } from '@atlaskit/theme/constants';
|
|
6
|
+
import { css } from '@emotion/react';
|
|
7
|
+
var HEIGHT = 90;
|
|
8
|
+
export var genericErrorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: ", "px;\n margin: 0 auto ", "px;\n display: block;\n"])), HEIGHT, getGridSize() * 3);
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { jsx } from '@emotion/react';
|
|
3
|
+
import EmptyState from '@atlaskit/empty-state';
|
|
4
|
+
import { defineMessages, useIntl } from 'react-intl-next';
|
|
5
|
+
import GenericErrorSVG from './generic-error-svg';
|
|
6
|
+
import { rootContainerStyles } from '../link-picker/styled';
|
|
7
|
+
var messages = defineMessages({
|
|
8
|
+
heading: {
|
|
9
|
+
defaultMessage: 'Something went wrong!',
|
|
10
|
+
description: 'Heading displayed when an unhandled error occurs.',
|
|
11
|
+
id: 'fabric.linkPicker.unhandledError.heading'
|
|
12
|
+
},
|
|
13
|
+
description: {
|
|
14
|
+
defaultMessage: 'Try reloading the page.',
|
|
15
|
+
description: 'Body message shown underneath the heading when an unhandled error occurs.',
|
|
16
|
+
id: 'fabric.linkPicker.unhandledError.description'
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
export var ErrorBoundaryFallback = function ErrorBoundaryFallback() {
|
|
20
|
+
var intl = useIntl();
|
|
21
|
+
var header = intl.formatMessage(messages.heading);
|
|
22
|
+
var description = intl.formatMessage(messages.description);
|
|
23
|
+
return jsx("div", {
|
|
24
|
+
css: rootContainerStyles,
|
|
25
|
+
"data-testid": "link-picker-root-error-boundary-ui"
|
|
26
|
+
}, jsx(EmptyState, {
|
|
27
|
+
header: header,
|
|
28
|
+
renderImage: function renderImage() {
|
|
29
|
+
return jsx(GenericErrorSVG, null);
|
|
30
|
+
},
|
|
31
|
+
description: description
|
|
32
|
+
}));
|
|
33
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React, { memo } from 'react';
|
|
2
|
+
import { AnalyticsErrorBoundary } from '@atlaskit/analytics-next';
|
|
3
|
+
import { name as packageName, version as packageVersion } from '../version.json';
|
|
4
|
+
import { ErrorBoundaryFallback } from './error-boundary-fallback';
|
|
5
|
+
import { LinkPickerWithIntl } from './link-picker';
|
|
6
|
+
var COMPONENT_NAME = 'LinkPicker';
|
|
7
|
+
var ANALYTICS_CHANNEL = 'media';
|
|
8
|
+
var PACKAGE_DATA = {
|
|
9
|
+
packageName: packageName,
|
|
10
|
+
packageVersion: packageVersion,
|
|
11
|
+
componentName: COMPONENT_NAME
|
|
12
|
+
};
|
|
13
|
+
export var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
|
|
14
|
+
return /*#__PURE__*/React.createElement(AnalyticsErrorBoundary, {
|
|
15
|
+
channel: ANALYTICS_CHANNEL,
|
|
16
|
+
data: PACKAGE_DATA,
|
|
17
|
+
ErrorComponent: ErrorBoundaryFallback
|
|
18
|
+
}, /*#__PURE__*/React.createElement(LinkPickerWithIntl, props));
|
|
19
|
+
});
|
|
File without changes
|
|
File without changes
|
|
@@ -18,17 +18,17 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
|
|
|
18
18
|
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; } }
|
|
19
19
|
|
|
20
20
|
/** @jsx jsx */
|
|
21
|
-
import
|
|
21
|
+
import { PureComponent } from 'react';
|
|
22
22
|
import { jsx } from '@emotion/react';
|
|
23
23
|
import { injectIntl } from 'react-intl-next';
|
|
24
|
-
import { messages } from '
|
|
24
|
+
import { messages } from './messages';
|
|
25
25
|
import PanelTextInput from './text-input';
|
|
26
26
|
import LinkSearchList from './link-search-list';
|
|
27
|
-
import { normalizeUrl, isSafeUrl } from '
|
|
28
|
-
import {
|
|
29
|
-
import { browser } from '
|
|
30
|
-
import { transformTimeStamp } from '
|
|
31
|
-
import Announcer from '
|
|
27
|
+
import { normalizeUrl, isSafeUrl } from './url';
|
|
28
|
+
import { rootContainerStyles, searchIconStyles, listTitleStyles } from './styled';
|
|
29
|
+
import { browser } from './browser';
|
|
30
|
+
import { transformTimeStamp } from './transformTimeStamp';
|
|
31
|
+
import Announcer from './/announcer';
|
|
32
32
|
import Button, { ButtonGroup } from '@atlaskit/button';
|
|
33
33
|
import { FormFooter } from '@atlaskit/form';
|
|
34
34
|
import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
|
|
@@ -48,8 +48,6 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
|
|
|
48
48
|
|
|
49
49
|
_this = _super.call(this, props);
|
|
50
50
|
|
|
51
|
-
_defineProperty(_assertThisInitialized(_this), "wrapperRef", /*#__PURE__*/React.createRef());
|
|
52
|
-
|
|
53
51
|
_defineProperty(_assertThisInitialized(_this), "queryVersion", 0);
|
|
54
52
|
|
|
55
53
|
_defineProperty(_assertThisInitialized(_this), "updateInput", /*#__PURE__*/function () {
|
|
@@ -218,24 +216,22 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
|
|
|
218
216
|
url = _this$state5.url,
|
|
219
217
|
selectedIndex = _this$state5.selectedIndex,
|
|
220
218
|
items = _this$state5.items;
|
|
219
|
+
var intl = _this.props.intl;
|
|
221
220
|
var selectedItem = items[selectedIndex];
|
|
222
221
|
|
|
223
222
|
if (_this.isUrlPopulatedWithSelectedItem()) {
|
|
224
|
-
_this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
var intl = _this.props.intl;
|
|
232
|
-
var linkInvalid = intl.formatMessage(messages.linkInvalid);
|
|
233
|
-
|
|
234
|
-
_this.setState({
|
|
235
|
-
invalidUrl: linkInvalid
|
|
236
|
-
});
|
|
237
|
-
}
|
|
223
|
+
return _this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
var normalized = normalizeUrl(url);
|
|
227
|
+
|
|
228
|
+
if (normalized) {
|
|
229
|
+
return _this.handleInsert(normalized, null, 'manual');
|
|
238
230
|
}
|
|
231
|
+
|
|
232
|
+
return _this.setState({
|
|
233
|
+
invalidUrl: intl.formatMessage(messages.linkInvalid)
|
|
234
|
+
});
|
|
239
235
|
});
|
|
240
236
|
|
|
241
237
|
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
|
|
@@ -294,6 +290,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
|
|
|
294
290
|
selectedIndex: -1,
|
|
295
291
|
activeIndex: -1,
|
|
296
292
|
isLoading: false,
|
|
293
|
+
isEditing: !!props.url,
|
|
297
294
|
url: normalizeUrl(props.url) || '',
|
|
298
295
|
displayText: props.displayText || '',
|
|
299
296
|
items: [],
|
|
@@ -451,6 +448,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
|
|
|
451
448
|
var _this$state7 = this.state,
|
|
452
449
|
items = _this$state7.items,
|
|
453
450
|
isLoading = _this$state7.isLoading,
|
|
451
|
+
isEditing = _this$state7.isEditing,
|
|
454
452
|
activeIndex = _this$state7.activeIndex,
|
|
455
453
|
selectedIndex = _this$state7.selectedIndex,
|
|
456
454
|
url = _this$state7.url,
|
|
@@ -478,11 +476,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
|
|
|
478
476
|
var noResults = activePlugin && !isLoading && !items.length && !isSafeUrl(url);
|
|
479
477
|
return jsx("div", {
|
|
480
478
|
"data-testid": "link-picker",
|
|
481
|
-
|
|
482
|
-
css: recentListStyles
|
|
483
|
-
}, jsx("div", {
|
|
484
|
-
css: containerStyles,
|
|
485
|
-
ref: this.wrapperRef
|
|
479
|
+
css: rootContainerStyles
|
|
486
480
|
}, screenReaderText && jsx(Announcer, {
|
|
487
481
|
ariaLive: "assertive",
|
|
488
482
|
text: screenReaderText,
|
|
@@ -562,7 +556,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
|
|
|
562
556
|
appearance: "primary",
|
|
563
557
|
onClick: this.handleSubmit,
|
|
564
558
|
testId: "link-picker-insert-button"
|
|
565
|
-
}, formatMessage(messages.insertButton)))))
|
|
559
|
+
}, formatMessage(isEditing ? messages.saveButton : messages.insertButton)))));
|
|
566
560
|
}
|
|
567
561
|
}]);
|
|
568
562
|
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { Fragment } from 'react';
|
|
3
3
|
import { jsx } from '@emotion/react';
|
|
4
4
|
import { injectIntl } from 'react-intl-next';
|
|
5
|
-
import { transformTimeStamp } from '
|
|
5
|
+
import { transformTimeStamp } from '../transformTimeStamp';
|
|
6
6
|
import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
|
|
7
7
|
|
|
8
8
|
var LinkSearchListItem = function LinkSearchListItem(_ref) {
|
|
File without changes
|
|
@@ -99,5 +99,10 @@ export var messages = defineMessages({
|
|
|
99
99
|
id: 'fabric.linkPicker.search.noResults.description',
|
|
100
100
|
defaultMessage: 'Try again with a different term.',
|
|
101
101
|
description: 'Describes possible action when a search returns no results'
|
|
102
|
+
},
|
|
103
|
+
saveButton: {
|
|
104
|
+
id: 'fabric.linkPicker.button.save',
|
|
105
|
+
defaultMessage: 'Save',
|
|
106
|
+
description: 'Button to save edited link'
|
|
102
107
|
}
|
|
103
108
|
});
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
+
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
4
|
+
|
|
5
|
+
import { token } from '@atlaskit/tokens';
|
|
6
|
+
import { css } from '@emotion/react';
|
|
7
|
+
import { N500 } from '@atlaskit/theme/colors'; // AFP-2532 TODO: Fix automatic suppressions below
|
|
8
|
+
// eslint-disable-next-line @atlassian/tangerine/import/entry-points
|
|
9
|
+
|
|
10
|
+
import { typography } from '@atlaskit/theme';
|
|
11
|
+
import { gridSize } from '@atlaskit/theme/constants';
|
|
12
|
+
var LINK_PICKER_WIDTH_IN_PX = 342;
|
|
13
|
+
var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
|
|
14
|
+
export var rootContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: ", "px;\n padding: ", "px;\n box-sizing: border-box;\n line-height: initial;\n min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, gridSize() * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
|
|
15
|
+
export var searchIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-left: ", "px;\n color: ", ";\n cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
|
|
16
|
+
export var listTitleStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", "\n text-transform: uppercase;\n margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);
|
|
@@ -9,7 +9,7 @@ import { ErrorMessage, Field } from '@atlaskit/form';
|
|
|
9
9
|
import Tooltip from '@atlaskit/tooltip';
|
|
10
10
|
import Textfield from '@atlaskit/textfield';
|
|
11
11
|
import Selectclear from '@atlaskit/icon/glyph/select-clear';
|
|
12
|
-
import { isRedoEvent, isUndoEvent } from '
|
|
12
|
+
import { isRedoEvent, isUndoEvent } from '../utils';
|
|
13
13
|
import { clearTextButtonStyles, fieldStyles } from './styled';
|
|
14
14
|
|
|
15
15
|
var PanelTextInput = function PanelTextInput(props) {
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/dist/esm/version.json
CHANGED
package/dist/types/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
+
export { ComposedLinkPicker as LinkPicker } from './ui';
|
|
1
2
|
export type { LinkPickerProps } from './ui/link-picker';
|
|
2
|
-
export {
|
|
3
|
-
export type { LinkInputType, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, } from './types';
|
|
3
|
+
export type { LinkInputType, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, } from './ui/types';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const genericErrorStyles: import("@emotion/react").SerializedStyles;
|
|
File without changes
|
|
File without changes
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
import React from 'react';
|
|
1
|
+
/// <reference types="react" />
|
|
3
2
|
import { WrappedComponentProps } from 'react-intl-next';
|
|
4
3
|
import { LinkSearchListItemData, LinkInputType, LinkPickerPlugin } from '../types';
|
|
5
4
|
export declare const RECENT_SEARCH_LIST_SIZE = 5;
|
|
@@ -42,10 +41,11 @@ export interface State {
|
|
|
42
41
|
activeIndex: number;
|
|
43
42
|
url: string;
|
|
44
43
|
isLoading: boolean;
|
|
44
|
+
isEditing: boolean;
|
|
45
45
|
displayText: string;
|
|
46
46
|
invalidUrl: string | null;
|
|
47
47
|
}
|
|
48
|
-
export declare const LinkPickerWithIntl:
|
|
49
|
-
WrappedComponent:
|
|
48
|
+
export declare const LinkPickerWithIntl: import("react").FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
|
|
49
|
+
WrappedComponent: import("react").ComponentType<WrappedComponentProps<"intl"> & LinkPickerProps>;
|
|
50
50
|
};
|
|
51
51
|
export {};
|
|
File without changes
|
|
File without changes
|
package/dist/types/ui/{link-search-no-results → link-picker/link-search-no-results}/index.d.ts
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export declare const
|
|
2
|
-
export declare const containerStyles: import("@emotion/react").SerializedStyles;
|
|
1
|
+
export declare const rootContainerStyles: import("@emotion/react").SerializedStyles;
|
|
3
2
|
export declare const searchIconStyles: import("@emotion/react").SerializedStyles;
|
|
4
3
|
export declare const listTitleStyles: import("@emotion/react").SerializedStyles;
|
|
File without changes
|
|
File without changes
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { IntlShape } from 'react-intl-next';
|
|
2
|
-
import { ListItemTimeStamp } from '
|
|
2
|
+
import { ListItemTimeStamp } from '../types';
|
|
3
3
|
export declare const transformTimeStamp: (intl: IntlShape, lastViewedDate?: Date | undefined, lastUpdatedDate?: Date | undefined) => ListItemTimeStamp | undefined;
|
|
File without changes
|
|
File without changes
|