@atlaskit/smart-card 21.1.1 → 21.1.2
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 +6 -0
- package/dist/cjs/messages.js +15 -0
- package/dist/cjs/version.json +1 -1
- package/dist/cjs/view/EmbedModal/components/embed-content/index.js +42 -0
- package/dist/cjs/view/EmbedModal/components/embed-content/types.js +5 -0
- package/dist/cjs/view/EmbedModal/components/error-boundary/index.js +38 -0
- package/dist/cjs/view/EmbedModal/components/link-info/index.js +127 -0
- package/dist/cjs/view/EmbedModal/components/link-info/link-info-button/index.js +40 -0
- package/dist/cjs/view/EmbedModal/components/link-info/link-info-button/types.js +5 -0
- package/dist/cjs/view/EmbedModal/components/link-info/styled.js +32 -0
- package/dist/cjs/view/EmbedModal/components/link-info/types.js +5 -0
- package/dist/cjs/view/EmbedModal/constants.js +10 -0
- package/dist/cjs/view/EmbedModal/index.js +93 -0
- package/dist/cjs/view/EmbedModal/types.js +5 -0
- package/dist/es2019/messages.js +15 -0
- package/dist/es2019/version.json +1 -1
- package/dist/es2019/view/EmbedModal/components/embed-content/index.js +31 -0
- package/dist/es2019/view/EmbedModal/components/embed-content/types.js +1 -0
- package/dist/es2019/view/EmbedModal/components/error-boundary/index.js +21 -0
- package/dist/es2019/view/EmbedModal/components/link-info/index.js +98 -0
- package/dist/es2019/view/EmbedModal/components/link-info/link-info-button/index.js +29 -0
- package/dist/es2019/view/EmbedModal/components/link-info/link-info-button/types.js +1 -0
- package/dist/es2019/view/EmbedModal/components/link-info/styled.js +58 -0
- package/dist/es2019/view/EmbedModal/components/link-info/types.js +1 -0
- package/dist/es2019/view/EmbedModal/constants.js +2 -0
- package/dist/es2019/view/EmbedModal/index.js +57 -0
- package/dist/es2019/view/EmbedModal/types.js +1 -0
- package/dist/esm/messages.js +15 -0
- package/dist/esm/version.json +1 -1
- package/dist/esm/view/EmbedModal/components/embed-content/index.js +30 -0
- package/dist/esm/view/EmbedModal/components/embed-content/types.js +1 -0
- package/dist/esm/view/EmbedModal/components/error-boundary/index.js +23 -0
- package/dist/esm/view/EmbedModal/components/link-info/index.js +98 -0
- package/dist/esm/view/EmbedModal/components/link-info/link-info-button/index.js +28 -0
- package/dist/esm/view/EmbedModal/components/link-info/link-info-button/types.js +1 -0
- package/dist/esm/view/EmbedModal/components/link-info/styled.js +14 -0
- package/dist/esm/view/EmbedModal/components/link-info/types.js +1 -0
- package/dist/esm/view/EmbedModal/constants.js +2 -0
- package/dist/esm/view/EmbedModal/index.js +70 -0
- package/dist/esm/view/EmbedModal/types.js +1 -0
- package/dist/types/messages.d.ts +1 -1
- package/dist/types/view/EmbedModal/components/embed-content/index.d.ts +5 -0
- package/dist/types/view/EmbedModal/components/embed-content/types.d.ts +6 -0
- package/dist/types/view/EmbedModal/components/error-boundary/index.d.ts +4 -0
- package/dist/types/view/EmbedModal/components/link-info/index.d.ts +4 -0
- package/dist/types/view/EmbedModal/components/link-info/link-info-button/index.d.ts +4 -0
- package/dist/types/view/EmbedModal/components/link-info/link-info-button/types.d.ts +9 -0
- package/dist/types/view/EmbedModal/components/link-info/styled.d.ts +5 -0
- package/dist/types/view/EmbedModal/components/link-info/types.d.ts +13 -0
- package/dist/types/view/EmbedModal/constants.d.ts +2 -0
- package/dist/types/view/EmbedModal/index.d.ts +4 -0
- package/dist/types/view/EmbedModal/types.d.ts +20 -0
- package/package.json +1 -1
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Tooltip from '@atlaskit/tooltip';
|
|
3
|
+
import Button from '@atlaskit/button/custom-theme-button';
|
|
4
|
+
|
|
5
|
+
const LinkInfoButton = ({
|
|
6
|
+
content,
|
|
7
|
+
href,
|
|
8
|
+
icon,
|
|
9
|
+
onClick,
|
|
10
|
+
target,
|
|
11
|
+
testId
|
|
12
|
+
}) => {
|
|
13
|
+
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
14
|
+
content: content,
|
|
15
|
+
hideTooltipOnClick: true,
|
|
16
|
+
position: "top",
|
|
17
|
+
tag: "span",
|
|
18
|
+
testId: `${testId}-tooltip`
|
|
19
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
20
|
+
appearance: "subtle",
|
|
21
|
+
href: href,
|
|
22
|
+
iconBefore: icon,
|
|
23
|
+
onClick: onClick,
|
|
24
|
+
target: target,
|
|
25
|
+
testId: `${testId}-button`
|
|
26
|
+
}));
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export default LinkInfoButton;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { css } from '@emotion/core';
|
|
2
|
+
import { gs } from '../../../common/utils';
|
|
3
|
+
import { token } from '@atlaskit/tokens';
|
|
4
|
+
import { N100 } from '@atlaskit/theme/colors';
|
|
5
|
+
export const containerStyles = css`
|
|
6
|
+
align-items: center;
|
|
7
|
+
display: flex;
|
|
8
|
+
gap: ${gs(2)};
|
|
9
|
+
justify-content: space-between;
|
|
10
|
+
padding: ${gs(2)} ${gs(3)};
|
|
11
|
+
`;
|
|
12
|
+
const iconSize = '32px';
|
|
13
|
+
export const iconCss = css`
|
|
14
|
+
img,
|
|
15
|
+
span,
|
|
16
|
+
svg {
|
|
17
|
+
height: ${iconSize};
|
|
18
|
+
min-height: ${iconSize};
|
|
19
|
+
max-height: ${iconSize};
|
|
20
|
+
width: ${iconSize};
|
|
21
|
+
min-width: ${iconSize};
|
|
22
|
+
max-width: ${iconSize};
|
|
23
|
+
}
|
|
24
|
+
`;
|
|
25
|
+
export const titleCss = css`
|
|
26
|
+
flex: 1 1 auto;
|
|
27
|
+
|
|
28
|
+
h3 {
|
|
29
|
+
flex: 1 1 auto;
|
|
30
|
+
|
|
31
|
+
// EDM-42336: UX is not finalised yet.
|
|
32
|
+
font-size: 20px;
|
|
33
|
+
font-weight: 400;
|
|
34
|
+
line-height: 24px;
|
|
35
|
+
|
|
36
|
+
display: -webkit-box;
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
text-overflow: ellipsis;
|
|
39
|
+
word-break: break-word;
|
|
40
|
+
-webkit-line-clamp: 1;
|
|
41
|
+
-webkit-box-orient: vertical;
|
|
42
|
+
// Fallback options
|
|
43
|
+
@supports not (-webkit-line-clamp: 1) {
|
|
44
|
+
max-height: 24px;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
`;
|
|
48
|
+
export const subtitleCss = css`
|
|
49
|
+
color: ${token('color.text.subtlest', N100)};
|
|
50
|
+
|
|
51
|
+
// EDM-42336: UX is not finalised yet.
|
|
52
|
+
font-size: 12px;
|
|
53
|
+
font-weight: 400;
|
|
54
|
+
line-height: 16px;
|
|
55
|
+
`;
|
|
56
|
+
export const actionCss = css`
|
|
57
|
+
flex: 0 0 auto;
|
|
58
|
+
`;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React, { useCallback, useState } from 'react';
|
|
2
|
+
import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
|
|
3
|
+
import LinkInfo from './components/link-info';
|
|
4
|
+
import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from './constants';
|
|
5
|
+
import EmbedContent from './components/embed-content';
|
|
6
|
+
import withErrorBoundary from './components/error-boundary';
|
|
7
|
+
|
|
8
|
+
const EmbedModal = ({
|
|
9
|
+
download: downloadUrl,
|
|
10
|
+
icon,
|
|
11
|
+
iframeName,
|
|
12
|
+
isTrusted = false,
|
|
13
|
+
onClose,
|
|
14
|
+
onDownloadActionClick,
|
|
15
|
+
onOpen,
|
|
16
|
+
onViewActionClick,
|
|
17
|
+
providerName,
|
|
18
|
+
showModal,
|
|
19
|
+
src,
|
|
20
|
+
testId = 'smart-links-preview-modal',
|
|
21
|
+
title,
|
|
22
|
+
url
|
|
23
|
+
}) => {
|
|
24
|
+
const [isOpen, setIsOpen] = useState(showModal);
|
|
25
|
+
const [size, setSize] = useState(MIN_MODAL_SIZE);
|
|
26
|
+
const handleOnClose = useCallback(() => setIsOpen(false), []);
|
|
27
|
+
const handleOnSizeClick = useCallback(() => {
|
|
28
|
+
const newSize = size === MIN_MODAL_SIZE ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
|
|
29
|
+
setSize(newSize);
|
|
30
|
+
}, [size]);
|
|
31
|
+
return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
|
|
32
|
+
height: "100%",
|
|
33
|
+
onClose: handleOnClose,
|
|
34
|
+
onCloseComplete: onClose,
|
|
35
|
+
onOpenComplete: onOpen,
|
|
36
|
+
testId: testId,
|
|
37
|
+
width: size
|
|
38
|
+
}, /*#__PURE__*/React.createElement(LinkInfo, {
|
|
39
|
+
downloadUrl: downloadUrl,
|
|
40
|
+
icon: icon,
|
|
41
|
+
providerName: providerName,
|
|
42
|
+
onViewButtonClick: onViewActionClick,
|
|
43
|
+
onDownloadButtonClick: onDownloadActionClick,
|
|
44
|
+
onResizeButtonClick: handleOnSizeClick,
|
|
45
|
+
size: size,
|
|
46
|
+
title: title,
|
|
47
|
+
testId: testId,
|
|
48
|
+
url: url
|
|
49
|
+
}), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
|
|
50
|
+
isTrusted: isTrusted,
|
|
51
|
+
name: iframeName,
|
|
52
|
+
src: src,
|
|
53
|
+
testId: testId
|
|
54
|
+
}))));
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export default withErrorBoundary(EmbedModal);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/esm/messages.js
CHANGED
|
@@ -165,6 +165,21 @@ export var messages = defineMessages({
|
|
|
165
165
|
defaultMessage: 'Preview',
|
|
166
166
|
description: 'Click to view a richer view of your content, without needing to navigate to it.'
|
|
167
167
|
},
|
|
168
|
+
preview_close: {
|
|
169
|
+
id: 'fabric.linking.preview_close',
|
|
170
|
+
defaultMessage: 'Close preview',
|
|
171
|
+
description: 'Click to close embed preview modal.'
|
|
172
|
+
},
|
|
173
|
+
preview_max_size: {
|
|
174
|
+
id: 'fabric.linking.preview_max_size',
|
|
175
|
+
defaultMessage: 'View full screen',
|
|
176
|
+
description: 'Click to increase embed preview modal size to a maximum viewing size.'
|
|
177
|
+
},
|
|
178
|
+
preview_min_size: {
|
|
179
|
+
id: 'fabric.linking.preview_min_size',
|
|
180
|
+
defaultMessage: 'Close full screen',
|
|
181
|
+
description: 'Click to decrease embed preview modal size to a minimum viewing size.'
|
|
182
|
+
},
|
|
168
183
|
priority_blocker: {
|
|
169
184
|
id: 'fabric.linking.priority_blocker',
|
|
170
185
|
defaultMessage: 'Blocker',
|
package/dist/esm/version.json
CHANGED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
3
|
+
|
|
4
|
+
var _templateObject;
|
|
5
|
+
|
|
6
|
+
/** @jsx jsx */
|
|
7
|
+
import { css, jsx } from '@emotion/core';
|
|
8
|
+
import { getIframeSandboxAttribute } from '../../../../utils';
|
|
9
|
+
var iframeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: calc(100vh - 214px);\n"])));
|
|
10
|
+
|
|
11
|
+
var EmbedContent = function EmbedContent(_ref) {
|
|
12
|
+
var isTrusted = _ref.isTrusted,
|
|
13
|
+
name = _ref.name,
|
|
14
|
+
src = _ref.src,
|
|
15
|
+
testId = _ref.testId;
|
|
16
|
+
var sandbox = getIframeSandboxAttribute(isTrusted);
|
|
17
|
+
var props = {
|
|
18
|
+
css: iframeCss,
|
|
19
|
+
frameBorder: 0,
|
|
20
|
+
name: name,
|
|
21
|
+
sandbox: sandbox,
|
|
22
|
+
src: src,
|
|
23
|
+
'data-testid': "".concat(testId, "-embed")
|
|
24
|
+
};
|
|
25
|
+
return src ? jsx("iframe", _extends({
|
|
26
|
+
src: src
|
|
27
|
+
}, props)) : jsx("iframe", props);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export default EmbedContent;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { ErrorBoundary } from 'react-error-boundary';
|
|
3
|
+
|
|
4
|
+
var FallbackComponent = function FallbackComponent() {
|
|
5
|
+
return /*#__PURE__*/React.createElement("span", null);
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
var withErrorBoundary = function withErrorBoundary(Component) {
|
|
9
|
+
return function (props) {
|
|
10
|
+
var onOpenFailed = props.onOpenFailed;
|
|
11
|
+
var onError = useCallback(function (error, errorInfo) {
|
|
12
|
+
if (onOpenFailed) {
|
|
13
|
+
onOpenFailed(error, errorInfo);
|
|
14
|
+
}
|
|
15
|
+
}, [onOpenFailed]);
|
|
16
|
+
return /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
17
|
+
FallbackComponent: FallbackComponent,
|
|
18
|
+
onError: onError
|
|
19
|
+
}, /*#__PURE__*/React.createElement(Component, props));
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export default withErrorBoundary;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { jsx } from '@emotion/core';
|
|
3
|
+
import React, { useMemo } from 'react';
|
|
4
|
+
import { FormattedMessage } from 'react-intl-next';
|
|
5
|
+
import { useModal } from '@atlaskit/modal-dialog';
|
|
6
|
+
import CrossIcon from '@atlaskit/icon/glyph/cross';
|
|
7
|
+
import DownloadIcon from '@atlaskit/icon/glyph/download';
|
|
8
|
+
import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
|
|
9
|
+
import VidFullScreenOnIcon from '@atlaskit/icon/glyph/vid-full-screen-on';
|
|
10
|
+
import VidFullScreenOffIcon from '@atlaskit/icon/glyph/vid-full-screen-off';
|
|
11
|
+
import { Icon } from '../../../common/Icon';
|
|
12
|
+
import { messages } from '../../../../messages';
|
|
13
|
+
import { MAX_MODAL_SIZE } from '../../constants';
|
|
14
|
+
import LinkInfoButton from './link-info-button';
|
|
15
|
+
import { actionCss, containerStyles, iconCss, titleCss } from './styled';
|
|
16
|
+
|
|
17
|
+
var LinkInfo = function LinkInfo(_ref) {
|
|
18
|
+
var downloadUrl = _ref.downloadUrl,
|
|
19
|
+
icon = _ref.icon,
|
|
20
|
+
providerName = _ref.providerName,
|
|
21
|
+
onDownloadButtonClick = _ref.onDownloadButtonClick,
|
|
22
|
+
onResizeButtonClick = _ref.onResizeButtonClick,
|
|
23
|
+
onViewButtonClick = _ref.onViewButtonClick,
|
|
24
|
+
size = _ref.size,
|
|
25
|
+
testId = _ref.testId,
|
|
26
|
+
title = _ref.title,
|
|
27
|
+
url = _ref.url;
|
|
28
|
+
|
|
29
|
+
var _useModal = useModal(),
|
|
30
|
+
onClose = _useModal.onClose;
|
|
31
|
+
|
|
32
|
+
var downloadButton = useMemo(function () {
|
|
33
|
+
if (downloadUrl) {
|
|
34
|
+
return jsx(LinkInfoButton, {
|
|
35
|
+
content: jsx(FormattedMessage, messages.download),
|
|
36
|
+
href: downloadUrl,
|
|
37
|
+
icon: jsx(DownloadIcon, {
|
|
38
|
+
label: messages.download.defaultMessage
|
|
39
|
+
}),
|
|
40
|
+
onClick: onDownloadButtonClick,
|
|
41
|
+
testId: "".concat(testId, "-download")
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
}, [downloadUrl, onDownloadButtonClick, testId]);
|
|
45
|
+
var urlButton = useMemo(function () {
|
|
46
|
+
if (url) {
|
|
47
|
+
var content = providerName ? jsx(React.Fragment, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal);
|
|
48
|
+
return jsx(LinkInfoButton, {
|
|
49
|
+
content: content,
|
|
50
|
+
href: url,
|
|
51
|
+
icon: jsx(ShortcutIcon, {
|
|
52
|
+
label: messages.viewOriginal.defaultMessage
|
|
53
|
+
}),
|
|
54
|
+
onClick: onViewButtonClick,
|
|
55
|
+
target: "_blank",
|
|
56
|
+
testId: "".concat(testId, "-url")
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
}, [onViewButtonClick, providerName, testId, url]);
|
|
60
|
+
var sizeButton = useMemo(function () {
|
|
61
|
+
var isFullScreen = size === MAX_MODAL_SIZE;
|
|
62
|
+
var message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
|
|
63
|
+
var icon = isFullScreen ? jsx(VidFullScreenOffIcon, {
|
|
64
|
+
label: message.defaultMessage
|
|
65
|
+
}) : jsx(VidFullScreenOnIcon, {
|
|
66
|
+
label: message.defaultMessage
|
|
67
|
+
});
|
|
68
|
+
return jsx(LinkInfoButton, {
|
|
69
|
+
content: jsx(FormattedMessage, message),
|
|
70
|
+
icon: icon,
|
|
71
|
+
onClick: onResizeButtonClick,
|
|
72
|
+
testId: "".concat(testId, "-resize")
|
|
73
|
+
});
|
|
74
|
+
}, [onResizeButtonClick, size, testId]);
|
|
75
|
+
return jsx("div", {
|
|
76
|
+
css: containerStyles
|
|
77
|
+
}, icon && jsx("div", {
|
|
78
|
+
css: iconCss,
|
|
79
|
+
"data-testid": "".concat(testId, "-icon")
|
|
80
|
+
}, jsx(Icon, icon)), jsx("div", {
|
|
81
|
+
css: titleCss
|
|
82
|
+
}, jsx("h3", {
|
|
83
|
+
"data-testid": "".concat(testId, "-title")
|
|
84
|
+
}, title), jsx("span", {
|
|
85
|
+
tabIndex: 0
|
|
86
|
+
})), jsx("div", {
|
|
87
|
+
css: actionCss
|
|
88
|
+
}, downloadButton, urlButton, sizeButton, jsx(LinkInfoButton, {
|
|
89
|
+
content: jsx(FormattedMessage, messages.preview_close),
|
|
90
|
+
icon: jsx(CrossIcon, {
|
|
91
|
+
label: messages.preview_close.defaultMessage
|
|
92
|
+
}),
|
|
93
|
+
onClick: onClose,
|
|
94
|
+
testId: "".concat(testId, "-close")
|
|
95
|
+
})));
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
export default LinkInfo;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Tooltip from '@atlaskit/tooltip';
|
|
3
|
+
import Button from '@atlaskit/button/custom-theme-button';
|
|
4
|
+
|
|
5
|
+
var LinkInfoButton = function LinkInfoButton(_ref) {
|
|
6
|
+
var content = _ref.content,
|
|
7
|
+
href = _ref.href,
|
|
8
|
+
icon = _ref.icon,
|
|
9
|
+
onClick = _ref.onClick,
|
|
10
|
+
target = _ref.target,
|
|
11
|
+
testId = _ref.testId;
|
|
12
|
+
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
13
|
+
content: content,
|
|
14
|
+
hideTooltipOnClick: true,
|
|
15
|
+
position: "top",
|
|
16
|
+
tag: "span",
|
|
17
|
+
testId: "".concat(testId, "-tooltip")
|
|
18
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
19
|
+
appearance: "subtle",
|
|
20
|
+
href: href,
|
|
21
|
+
iconBefore: icon,
|
|
22
|
+
onClick: onClick,
|
|
23
|
+
target: target,
|
|
24
|
+
testId: "".concat(testId, "-button")
|
|
25
|
+
}));
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export default LinkInfoButton;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
+
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
4
|
+
|
|
5
|
+
import { css } from '@emotion/core';
|
|
6
|
+
import { gs } from '../../../common/utils';
|
|
7
|
+
import { token } from '@atlaskit/tokens';
|
|
8
|
+
import { N100 } from '@atlaskit/theme/colors';
|
|
9
|
+
export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n gap: ", ";\n justify-content: space-between;\n padding: ", " ", ";\n"])), gs(2), gs(2), gs(3));
|
|
10
|
+
var iconSize = '32px';
|
|
11
|
+
export var iconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n img,\n span,\n svg {\n height: ", ";\n min-height: ", ";\n max-height: ", ";\n width: ", ";\n min-width: ", ";\n max-width: ", ";\n }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
|
|
12
|
+
export var titleCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n\n h3 {\n flex: 1 1 auto;\n\n // EDM-42336: UX is not finalised yet.\n font-size: 20px;\n font-weight: 400;\n line-height: 24px;\n\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-word;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n // Fallback options\n @supports not (-webkit-line-clamp: 1) {\n max-height: 24px;\n }\n }\n"])));
|
|
13
|
+
export var subtitleCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n color: ", ";\n\n // EDM-42336: UX is not finalised yet.\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n"])), token('color.text.subtlest', N100));
|
|
14
|
+
export var actionCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n flex: 0 0 auto;\n"])));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
+
import React, { useCallback, useState } from 'react';
|
|
3
|
+
import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
|
|
4
|
+
import LinkInfo from './components/link-info';
|
|
5
|
+
import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from './constants';
|
|
6
|
+
import EmbedContent from './components/embed-content';
|
|
7
|
+
import withErrorBoundary from './components/error-boundary';
|
|
8
|
+
|
|
9
|
+
var EmbedModal = function EmbedModal(_ref) {
|
|
10
|
+
var downloadUrl = _ref.download,
|
|
11
|
+
icon = _ref.icon,
|
|
12
|
+
iframeName = _ref.iframeName,
|
|
13
|
+
_ref$isTrusted = _ref.isTrusted,
|
|
14
|
+
isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
|
|
15
|
+
onClose = _ref.onClose,
|
|
16
|
+
onDownloadActionClick = _ref.onDownloadActionClick,
|
|
17
|
+
onOpen = _ref.onOpen,
|
|
18
|
+
onViewActionClick = _ref.onViewActionClick,
|
|
19
|
+
providerName = _ref.providerName,
|
|
20
|
+
showModal = _ref.showModal,
|
|
21
|
+
src = _ref.src,
|
|
22
|
+
_ref$testId = _ref.testId,
|
|
23
|
+
testId = _ref$testId === void 0 ? 'smart-links-preview-modal' : _ref$testId,
|
|
24
|
+
title = _ref.title,
|
|
25
|
+
url = _ref.url;
|
|
26
|
+
|
|
27
|
+
var _useState = useState(showModal),
|
|
28
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
29
|
+
isOpen = _useState2[0],
|
|
30
|
+
setIsOpen = _useState2[1];
|
|
31
|
+
|
|
32
|
+
var _useState3 = useState(MIN_MODAL_SIZE),
|
|
33
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
34
|
+
size = _useState4[0],
|
|
35
|
+
setSize = _useState4[1];
|
|
36
|
+
|
|
37
|
+
var handleOnClose = useCallback(function () {
|
|
38
|
+
return setIsOpen(false);
|
|
39
|
+
}, []);
|
|
40
|
+
var handleOnSizeClick = useCallback(function () {
|
|
41
|
+
var newSize = size === MIN_MODAL_SIZE ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
|
|
42
|
+
setSize(newSize);
|
|
43
|
+
}, [size]);
|
|
44
|
+
return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
|
|
45
|
+
height: "100%",
|
|
46
|
+
onClose: handleOnClose,
|
|
47
|
+
onCloseComplete: onClose,
|
|
48
|
+
onOpenComplete: onOpen,
|
|
49
|
+
testId: testId,
|
|
50
|
+
width: size
|
|
51
|
+
}, /*#__PURE__*/React.createElement(LinkInfo, {
|
|
52
|
+
downloadUrl: downloadUrl,
|
|
53
|
+
icon: icon,
|
|
54
|
+
providerName: providerName,
|
|
55
|
+
onViewButtonClick: onViewActionClick,
|
|
56
|
+
onDownloadButtonClick: onDownloadActionClick,
|
|
57
|
+
onResizeButtonClick: handleOnSizeClick,
|
|
58
|
+
size: size,
|
|
59
|
+
title: title,
|
|
60
|
+
testId: testId,
|
|
61
|
+
url: url
|
|
62
|
+
}), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
|
|
63
|
+
isTrusted: isTrusted,
|
|
64
|
+
name: iframeName,
|
|
65
|
+
src: src,
|
|
66
|
+
testId: testId
|
|
67
|
+
}))));
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
export default withErrorBoundary(EmbedModal);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/types/messages.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { MessageDescriptor } from 'react-intl-next';
|
|
2
2
|
export declare type RequestAccessMessageKey = 'click_to_join' | 'click_to_join_description' | 'forbidden_description' | 'request_access' | 'request_access_description' | 'request_access_pending' | 'request_access_pending_description' | 'request_denied_description';
|
|
3
|
-
export declare type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'could_not_load_link' | 'download' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'loading' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'preview' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
|
|
3
|
+
export declare type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'could_not_load_link' | 'download' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'loading' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'preview' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
|
|
4
4
|
declare type Messages = {
|
|
5
5
|
[K in MessageKey]: MessageDescriptor;
|
|
6
6
|
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const containerStyles: import("@emotion/utils").SerializedStyles;
|
|
2
|
+
export declare const iconCss: import("@emotion/utils").SerializedStyles;
|
|
3
|
+
export declare const titleCss: import("@emotion/utils").SerializedStyles;
|
|
4
|
+
export declare const subtitleCss: import("@emotion/utils").SerializedStyles;
|
|
5
|
+
export declare const actionCss: import("@emotion/utils").SerializedStyles;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { IconProps } from '../../../common/Icon';
|
|
2
|
+
export declare type LinkInfoProps = {
|
|
3
|
+
downloadUrl?: string;
|
|
4
|
+
icon?: IconProps;
|
|
5
|
+
providerName?: string;
|
|
6
|
+
onDownloadButtonClick?: () => void;
|
|
7
|
+
onResizeButtonClick?: () => void;
|
|
8
|
+
onViewButtonClick?: () => void;
|
|
9
|
+
size?: string;
|
|
10
|
+
testId?: string;
|
|
11
|
+
title?: string;
|
|
12
|
+
url?: string;
|
|
13
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ErrorInfo } from 'react';
|
|
2
|
+
import { IconProps } from '../common/Icon';
|
|
3
|
+
export declare type EmbedModalProps = {
|
|
4
|
+
closeLabel?: string;
|
|
5
|
+
download?: string;
|
|
6
|
+
icon?: IconProps;
|
|
7
|
+
iframeName: string;
|
|
8
|
+
isTrusted?: boolean;
|
|
9
|
+
onClose: () => any;
|
|
10
|
+
onDownloadActionClick?: () => void;
|
|
11
|
+
onOpen?: () => void;
|
|
12
|
+
onOpenFailed?: (error: Error, errorInfo: ErrorInfo) => void;
|
|
13
|
+
onViewActionClick?: () => void;
|
|
14
|
+
providerName?: string;
|
|
15
|
+
showModal?: boolean;
|
|
16
|
+
src?: string;
|
|
17
|
+
testId?: string;
|
|
18
|
+
title?: string;
|
|
19
|
+
url?: string;
|
|
20
|
+
};
|