@atlaskit/smart-card 23.1.2 → 23.1.4
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 +12 -0
- package/dist/cjs/extractors/common/actions/extractPreviewAction.js +0 -2
- package/dist/cjs/state/hooks-external/useSmartLinkActions.js +2 -12
- package/dist/cjs/version.json +1 -1
- package/dist/cjs/view/BlockCard/actions/PreviewAction.js +1 -5
- package/dist/cjs/view/BlockCard/index.js +0 -10
- package/dist/cjs/view/EmbedModal/index.js +2 -4
- package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js +1 -1
- package/dist/cjs/view/InlineCard/Icon.js +1 -1
- package/dist/es2019/extractors/common/actions/extractPreviewAction.js +0 -2
- package/dist/es2019/state/hooks-external/useSmartLinkActions.js +2 -11
- package/dist/es2019/version.json +1 -1
- package/dist/es2019/view/BlockCard/actions/PreviewAction.js +0 -4
- package/dist/es2019/view/BlockCard/index.js +0 -9
- package/dist/es2019/view/EmbedModal/index.js +2 -3
- package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js +3 -3
- package/dist/es2019/view/InlineCard/Icon.js +3 -3
- package/dist/esm/extractors/common/actions/extractPreviewAction.js +0 -2
- package/dist/esm/state/hooks-external/useSmartLinkActions.js +2 -11
- package/dist/esm/version.json +1 -1
- package/dist/esm/view/BlockCard/actions/PreviewAction.js +1 -5
- package/dist/esm/view/BlockCard/index.js +0 -9
- package/dist/esm/view/EmbedModal/index.js +2 -3
- package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js +1 -1
- package/dist/esm/view/InlineCard/Icon.js +1 -1
- package/dist/types/extractors/block/types.d.ts +0 -2
- package/dist/types/extractors/common/actions/extractPreviewAction.d.ts +1 -1
- package/dist/types/view/BlockCard/actions/PreviewAction.d.ts +0 -2
- package/dist/types/view/Card/index.d.ts +1 -1
- package/dist/types/view/EmbedModal/index.d.ts +1 -3
- package/dist/types/view/EmbedModal/types.d.ts +1 -4
- package/dist/types-ts4.0/extractors/block/types.d.ts +0 -2
- package/dist/types-ts4.0/extractors/common/actions/extractPreviewAction.d.ts +1 -1
- package/dist/types-ts4.0/view/BlockCard/actions/PreviewAction.d.ts +0 -2
- package/dist/types-ts4.0/view/Card/index.d.ts +1 -1
- package/dist/types-ts4.0/view/EmbedModal/index.d.ts +1 -3
- package/dist/types-ts4.0/view/EmbedModal/types.d.ts +1 -4
- package/package.json +3 -3
- package/dist/cjs/view/EmbedModal/components/size-experiment/index.js +0 -36
- package/dist/cjs/view/EmbedModal/components/size-experiment/types.js +0 -5
- package/dist/cjs/view/common/Modal.js +0 -158
- package/dist/cjs/view/common/ModalHeader.js +0 -114
- package/dist/es2019/view/EmbedModal/components/size-experiment/index.js +0 -24
- package/dist/es2019/view/EmbedModal/components/size-experiment/types.js +0 -1
- package/dist/es2019/view/common/Modal.js +0 -115
- package/dist/es2019/view/common/ModalHeader.js +0 -88
- package/dist/esm/view/EmbedModal/components/size-experiment/index.js +0 -23
- package/dist/esm/view/EmbedModal/components/size-experiment/types.js +0 -1
- package/dist/esm/view/common/Modal.js +0 -148
- package/dist/esm/view/common/ModalHeader.js +0 -89
- package/dist/types/view/EmbedModal/components/size-experiment/index.d.ts +0 -7
- package/dist/types/view/EmbedModal/components/size-experiment/types.d.ts +0 -4
- package/dist/types/view/common/Modal.d.ts +0 -26
- package/dist/types/view/common/ModalHeader.d.ts +0 -19
- package/dist/types-ts4.0/view/EmbedModal/components/size-experiment/index.d.ts +0 -7
- package/dist/types-ts4.0/view/EmbedModal/components/size-experiment/types.d.ts +0 -4
- package/dist/types-ts4.0/view/common/Modal.d.ts +0 -26
- package/dist/types-ts4.0/view/common/ModalHeader.d.ts +0 -19
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { EmbedModalProps } from './types';
|
|
3
|
-
declare const _default: React.FC<EmbedModalProps & import("./components/analytics/types").WithAnalytics
|
|
4
|
-
children?: React.ReactNode;
|
|
5
|
-
} & import("./components/size-experiment/types").WithSizeExperimentProps>;
|
|
3
|
+
declare const _default: React.FC<EmbedModalProps & import("./components/analytics/types").WithAnalytics>;
|
|
6
4
|
export default _default;
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { ErrorInfo } from 'react';
|
|
2
2
|
import { IconProps } from '../common/Icon';
|
|
3
|
-
import { WithSizeExperimentProps } from './components/size-experiment/types';
|
|
4
|
-
import { ModalProps } from '../common/Modal';
|
|
5
3
|
import { WithAnalytics } from './components/analytics/types';
|
|
6
4
|
export declare enum EmbedModalSize {
|
|
7
5
|
Large = "large",
|
|
@@ -12,7 +10,6 @@ export declare type EmbedModalContext = {
|
|
|
12
10
|
size: EmbedModalSize;
|
|
13
11
|
};
|
|
14
12
|
export declare type EmbedModalProps = {
|
|
15
|
-
closeLabel?: string;
|
|
16
13
|
download?: string;
|
|
17
14
|
icon?: IconProps;
|
|
18
15
|
iframeName: string;
|
|
@@ -31,4 +28,4 @@ export declare type EmbedModalProps = {
|
|
|
31
28
|
title?: string;
|
|
32
29
|
url?: string;
|
|
33
30
|
};
|
|
34
|
-
export declare type EmbedModalWithExperimentProps = EmbedModalProps &
|
|
31
|
+
export declare type EmbedModalWithExperimentProps = EmbedModalProps & WithAnalytics;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/smart-card",
|
|
3
|
-
"version": "23.1.
|
|
3
|
+
"version": "23.1.4",
|
|
4
4
|
"description": "Smart card component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@atlaskit/icon-object": "^6.2.0",
|
|
42
42
|
"@atlaskit/icon-priority": "^6.3.0",
|
|
43
43
|
"@atlaskit/in-product-testing": "^0.1.0",
|
|
44
|
-
"@atlaskit/linking-common": "^1.
|
|
44
|
+
"@atlaskit/linking-common": "^1.11.0",
|
|
45
45
|
"@atlaskit/logo": "^13.10.0",
|
|
46
46
|
"@atlaskit/lozenge": "^11.3.0",
|
|
47
47
|
"@atlaskit/media-common": "^2.17.0",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"uuid": "^3.1.0"
|
|
67
67
|
},
|
|
68
68
|
"peerDependencies": {
|
|
69
|
-
"@atlaskit/link-provider": "^1.3.
|
|
69
|
+
"@atlaskit/link-provider": "^1.3.4",
|
|
70
70
|
"react": "^16.8.0",
|
|
71
71
|
"react-dom": "^16.8.0",
|
|
72
72
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
|
|
10
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
|
-
var _react = _interopRequireDefault(require("react"));
|
|
13
|
-
|
|
14
|
-
var _Modal = _interopRequireDefault(require("../../../common/Modal"));
|
|
15
|
-
|
|
16
|
-
var _types = require("../../types");
|
|
17
|
-
|
|
18
|
-
var withSizeExperiment = function withSizeExperiment(Component) {
|
|
19
|
-
return function (props) {
|
|
20
|
-
var _props$featureFlags = props.featureFlags,
|
|
21
|
-
featureFlags = _props$featureFlags === void 0 ? {} : _props$featureFlags;
|
|
22
|
-
var size = featureFlags.embedModalSize; // Experiment
|
|
23
|
-
|
|
24
|
-
if (size === _types.EmbedModalSize.Large || size === _types.EmbedModalSize.Small) {
|
|
25
|
-
return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
|
|
26
|
-
size: size
|
|
27
|
-
}));
|
|
28
|
-
} // Control
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
return /*#__PURE__*/_react.default.createElement(_Modal.default, props);
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
var _default = withSizeExperiment;
|
|
36
|
-
exports.default = _default;
|
|
@@ -1,158 +0,0 @@
|
|
|
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.default = void 0;
|
|
11
|
-
|
|
12
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
-
|
|
14
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
15
|
-
|
|
16
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
17
|
-
|
|
18
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
19
|
-
|
|
20
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
21
|
-
|
|
22
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
23
|
-
|
|
24
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
25
|
-
|
|
26
|
-
var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
|
|
27
|
-
|
|
28
|
-
var _ModalHeader = require("./ModalHeader");
|
|
29
|
-
|
|
30
|
-
var _utils = require("../../utils");
|
|
31
|
-
|
|
32
|
-
var _analytics = _interopRequireDefault(require("../EmbedModal/components/analytics"));
|
|
33
|
-
|
|
34
|
-
var _types = require("../EmbedModal/types");
|
|
35
|
-
|
|
36
|
-
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); }
|
|
37
|
-
|
|
38
|
-
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; }
|
|
39
|
-
|
|
40
|
-
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); }; }
|
|
41
|
-
|
|
42
|
-
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; } }
|
|
43
|
-
|
|
44
|
-
var iframeStyles = {
|
|
45
|
-
width: "100%",
|
|
46
|
-
height: 'calc(100vh - 248px)'
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
var ModalWithErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
50
|
-
(0, _inherits2.default)(ModalWithErrorBoundary, _React$Component);
|
|
51
|
-
|
|
52
|
-
var _super = _createSuper(ModalWithErrorBoundary);
|
|
53
|
-
|
|
54
|
-
function ModalWithErrorBoundary() {
|
|
55
|
-
(0, _classCallCheck2.default)(this, ModalWithErrorBoundary);
|
|
56
|
-
return _super.apply(this, arguments);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
(0, _createClass2.default)(ModalWithErrorBoundary, [{
|
|
60
|
-
key: "componentDidCatch",
|
|
61
|
-
value: function componentDidCatch(error, errorInfo) {
|
|
62
|
-
if (this.props.onOpenFailed) {
|
|
63
|
-
this.props.onOpenFailed(error, errorInfo);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}, {
|
|
67
|
-
key: "render",
|
|
68
|
-
value: function render() {
|
|
69
|
-
return /*#__PURE__*/_react.default.createElement(Modal, this.props);
|
|
70
|
-
}
|
|
71
|
-
}]);
|
|
72
|
-
return ModalWithErrorBoundary;
|
|
73
|
-
}(_react.default.Component);
|
|
74
|
-
|
|
75
|
-
var Modal = function Modal(_ref) {
|
|
76
|
-
var onClose = _ref.onClose,
|
|
77
|
-
onOpen = _ref.onOpen,
|
|
78
|
-
src = _ref.src,
|
|
79
|
-
_ref$testId = _ref.testId,
|
|
80
|
-
testId = _ref$testId === void 0 ? 'smart-links-preview-modal' : _ref$testId,
|
|
81
|
-
showModal = _ref.showModal,
|
|
82
|
-
providerName = _ref.providerName,
|
|
83
|
-
metadata = _ref.metadata,
|
|
84
|
-
icon = _ref.icon,
|
|
85
|
-
_ref$closeLabel = _ref.closeLabel,
|
|
86
|
-
closeLabel = _ref$closeLabel === void 0 ? 'Close Preview' : _ref$closeLabel,
|
|
87
|
-
iframeName = _ref.iframeName,
|
|
88
|
-
title = _ref.title,
|
|
89
|
-
url = _ref.url,
|
|
90
|
-
download = _ref.download,
|
|
91
|
-
byline = _ref.byline,
|
|
92
|
-
_ref$isTrusted = _ref.isTrusted,
|
|
93
|
-
isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
|
|
94
|
-
onViewActionClick = _ref.onViewActionClick,
|
|
95
|
-
onDownloadActionClick = _ref.onDownloadActionClick;
|
|
96
|
-
|
|
97
|
-
var _useState = (0, _react.useState)(showModal),
|
|
98
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
99
|
-
isOpen = _useState2[0],
|
|
100
|
-
setIsOpen = _useState2[1];
|
|
101
|
-
|
|
102
|
-
var openAt = (0, _react.useRef)();
|
|
103
|
-
var handleOnOpenComplete = (0, _react.useCallback)(function () {
|
|
104
|
-
openAt.current = Date.now();
|
|
105
|
-
|
|
106
|
-
if (onOpen) {
|
|
107
|
-
onOpen({
|
|
108
|
-
size: _types.EmbedModalSize.Small
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
}, [onOpen]);
|
|
112
|
-
var handleOnCloseComplete = (0, _react.useCallback)(function () {
|
|
113
|
-
if (onClose) {
|
|
114
|
-
var duration = openAt.current ? Date.now() - openAt.current : undefined;
|
|
115
|
-
onClose({
|
|
116
|
-
duration: duration,
|
|
117
|
-
size: _types.EmbedModalSize.Small
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
}, [onClose]);
|
|
121
|
-
var sandbox = (0, _utils.getIframeSandboxAttribute)(isTrusted);
|
|
122
|
-
return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
|
|
123
|
-
height: "100%",
|
|
124
|
-
width: "large",
|
|
125
|
-
testId: testId,
|
|
126
|
-
onOpenComplete: handleOnOpenComplete,
|
|
127
|
-
onClose: function onClose() {
|
|
128
|
-
setIsOpen(false);
|
|
129
|
-
},
|
|
130
|
-
onCloseComplete: handleOnCloseComplete
|
|
131
|
-
}, /*#__PURE__*/_react.default.createElement(_ModalHeader.Header, {
|
|
132
|
-
providerName: providerName,
|
|
133
|
-
icon: icon,
|
|
134
|
-
metadata: metadata,
|
|
135
|
-
url: url,
|
|
136
|
-
title: title,
|
|
137
|
-
label: closeLabel,
|
|
138
|
-
download: download,
|
|
139
|
-
byline: byline,
|
|
140
|
-
onViewActionClick: onViewActionClick,
|
|
141
|
-
onDownloadActionClick: onDownloadActionClick
|
|
142
|
-
}), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, src ? /*#__PURE__*/_react.default.createElement("iframe", {
|
|
143
|
-
style: iframeStyles,
|
|
144
|
-
name: iframeName,
|
|
145
|
-
frameBorder: 0,
|
|
146
|
-
src: src,
|
|
147
|
-
sandbox: sandbox
|
|
148
|
-
}) : /*#__PURE__*/_react.default.createElement("iframe", {
|
|
149
|
-
style: iframeStyles,
|
|
150
|
-
name: iframeName,
|
|
151
|
-
frameBorder: 0,
|
|
152
|
-
sandbox: sandbox
|
|
153
|
-
}))));
|
|
154
|
-
};
|
|
155
|
-
|
|
156
|
-
var _default = (0, _analytics.default)(ModalWithErrorBoundary);
|
|
157
|
-
|
|
158
|
-
exports.default = _default;
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.Header = void 0;
|
|
9
|
-
|
|
10
|
-
var _react = require("@emotion/react");
|
|
11
|
-
|
|
12
|
-
var _react2 = require("react");
|
|
13
|
-
|
|
14
|
-
var _modalDialog = require("@atlaskit/modal-dialog");
|
|
15
|
-
|
|
16
|
-
var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
|
|
17
|
-
|
|
18
|
-
var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
|
|
19
|
-
|
|
20
|
-
var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
|
|
21
|
-
|
|
22
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
23
|
-
|
|
24
|
-
var _tokens = require("@atlaskit/tokens");
|
|
25
|
-
|
|
26
|
-
var _reactIntlNext = require("react-intl-next");
|
|
27
|
-
|
|
28
|
-
var _utils = require("./utils");
|
|
29
|
-
|
|
30
|
-
var _Icon = require("./Icon");
|
|
31
|
-
|
|
32
|
-
var _MetadataList = require("./MetadataList");
|
|
33
|
-
|
|
34
|
-
var _Byline = require("./Byline");
|
|
35
|
-
|
|
36
|
-
var _messages = require("../../messages");
|
|
37
|
-
|
|
38
|
-
/** @jsx jsx */
|
|
39
|
-
var Header = function Header(_ref) {
|
|
40
|
-
var title = _ref.title,
|
|
41
|
-
label = _ref.label,
|
|
42
|
-
_ref$metadata = _ref.metadata,
|
|
43
|
-
metadata = _ref$metadata === void 0 ? {
|
|
44
|
-
items: []
|
|
45
|
-
} : _ref$metadata,
|
|
46
|
-
icon = _ref.icon,
|
|
47
|
-
providerName = _ref.providerName,
|
|
48
|
-
url = _ref.url,
|
|
49
|
-
download = _ref.download,
|
|
50
|
-
byline = _ref.byline,
|
|
51
|
-
onViewActionClick = _ref.onViewActionClick,
|
|
52
|
-
onDownloadActionClick = _ref.onDownloadActionClick;
|
|
53
|
-
|
|
54
|
-
var _useModal = (0, _modalDialog.useModal)(),
|
|
55
|
-
onClose = _useModal.onClose;
|
|
56
|
-
|
|
57
|
-
return (0, _react.jsx)("div", {
|
|
58
|
-
style: {
|
|
59
|
-
paddingLeft: (0, _utils.gs)(3),
|
|
60
|
-
paddingRight: (0, _utils.gs)(3),
|
|
61
|
-
paddingBottom: (0, _utils.gs)(2),
|
|
62
|
-
paddingTop: (0, _utils.gs)(2)
|
|
63
|
-
}
|
|
64
|
-
}, (0, _react.jsx)("div", {
|
|
65
|
-
style: {
|
|
66
|
-
display: 'flex',
|
|
67
|
-
justifyContent: 'space-between',
|
|
68
|
-
alignItems: 'baseline',
|
|
69
|
-
borderBottom: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N30A))
|
|
70
|
-
}
|
|
71
|
-
}, (0, _react.jsx)("div", {
|
|
72
|
-
css: {
|
|
73
|
-
flex: 1
|
|
74
|
-
}
|
|
75
|
-
}, (0, _react.jsx)("div", {
|
|
76
|
-
css: {
|
|
77
|
-
display: 'flex'
|
|
78
|
-
}
|
|
79
|
-
}, icon && (0, _react.jsx)(_Icon.Icon, icon), (0, _react.jsx)("div", {
|
|
80
|
-
css: {
|
|
81
|
-
paddingLeft: (0, _utils.gs)(2),
|
|
82
|
-
paddingBottom: (0, _utils.gs)(2)
|
|
83
|
-
}
|
|
84
|
-
}, (0, _react.jsx)("h3", null, title), (0, _react.jsx)("div", {
|
|
85
|
-
css: {
|
|
86
|
-
color: (0, _tokens.token)('color.text.subtlest', _colors.N100)
|
|
87
|
-
}
|
|
88
|
-
}, metadata.items.length && (0, _react.jsx)(_MetadataList.MetadataList, {
|
|
89
|
-
items: metadata.items
|
|
90
|
-
}) || (0, _react.jsx)(_Byline.Byline, null, byline))))), (0, _react.jsx)("div", null, download && (0, _react.jsx)(_customThemeButton.default, {
|
|
91
|
-
appearance: "primary",
|
|
92
|
-
href: download,
|
|
93
|
-
onClick: onDownloadActionClick
|
|
94
|
-
}, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.download)), url && (0, _react.jsx)(_customThemeButton.default, {
|
|
95
|
-
href: url,
|
|
96
|
-
target: "_blank",
|
|
97
|
-
appearance: "link",
|
|
98
|
-
testId: "preview-view-action",
|
|
99
|
-
iconAfter: (0, _react.jsx)(_shortcut.default, {
|
|
100
|
-
size: "small",
|
|
101
|
-
label: ""
|
|
102
|
-
}),
|
|
103
|
-
onClick: onViewActionClick
|
|
104
|
-
}, providerName ? (0, _react.jsx)(_react2.Fragment, null, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal)), (0, _react.jsx)(_customThemeButton.default, {
|
|
105
|
-
appearance: "subtle",
|
|
106
|
-
iconBefore: (0, _react.jsx)(_close.default, {
|
|
107
|
-
label: label
|
|
108
|
-
}),
|
|
109
|
-
onClick: onClose,
|
|
110
|
-
testId: "preview-close-button"
|
|
111
|
-
}))));
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
exports.Header = Header;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import Modal from '../../../common/Modal';
|
|
4
|
-
import { EmbedModalSize } from '../../types';
|
|
5
|
-
|
|
6
|
-
const withSizeExperiment = Component => props => {
|
|
7
|
-
const {
|
|
8
|
-
featureFlags = {}
|
|
9
|
-
} = props;
|
|
10
|
-
const {
|
|
11
|
-
embedModalSize: size
|
|
12
|
-
} = featureFlags; // Experiment
|
|
13
|
-
|
|
14
|
-
if (size === EmbedModalSize.Large || size === EmbedModalSize.Small) {
|
|
15
|
-
return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
|
|
16
|
-
size: size
|
|
17
|
-
}));
|
|
18
|
-
} // Control
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
return /*#__PURE__*/React.createElement(Modal, props);
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export default withSizeExperiment;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
/* TODO: (from codemod)
|
|
2
|
-
We have converted this file as best we could but you might still need
|
|
3
|
-
to manually complete migrating this usage of ModalDialog.
|
|
4
|
-
|
|
5
|
-
This file uses one or more of the following ModalDialog props: 'components', 'header',
|
|
6
|
-
'footer', 'body'. These props have been removed as part of moving to
|
|
7
|
-
a compositional API.
|
|
8
|
-
|
|
9
|
-
The render props that used to be exposed by the custom component APIs are
|
|
10
|
-
now accessible using the 'useModal' hook instead: 'testId', 'titleId', and 'onClose'.
|
|
11
|
-
|
|
12
|
-
We are also no longer exposing 'appearance' as render prop, so this needs to be
|
|
13
|
-
manually passed to your custom components.
|
|
14
|
-
|
|
15
|
-
For a complete guide on customization using the new compositional API, refer to the docs at
|
|
16
|
-
https://atlassian.design/components/modal-dialog/examples#customizing-modal-dialog. */
|
|
17
|
-
import React, { useCallback, useRef, useState } from 'react';
|
|
18
|
-
import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
|
|
19
|
-
import { Header } from './ModalHeader';
|
|
20
|
-
import { getIframeSandboxAttribute } from '../../utils';
|
|
21
|
-
import withAnalytics from '../EmbedModal/components/analytics';
|
|
22
|
-
import { EmbedModalSize } from '../EmbedModal/types';
|
|
23
|
-
const iframeStyles = {
|
|
24
|
-
width: `100%`,
|
|
25
|
-
height: 'calc(100vh - 248px)'
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
class ModalWithErrorBoundary extends React.Component {
|
|
29
|
-
componentDidCatch(error, errorInfo) {
|
|
30
|
-
if (this.props.onOpenFailed) {
|
|
31
|
-
this.props.onOpenFailed(error, errorInfo);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
render() {
|
|
36
|
-
return /*#__PURE__*/React.createElement(Modal, this.props);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const Modal = ({
|
|
42
|
-
onClose,
|
|
43
|
-
onOpen,
|
|
44
|
-
src,
|
|
45
|
-
testId = 'smart-links-preview-modal',
|
|
46
|
-
showModal,
|
|
47
|
-
providerName,
|
|
48
|
-
metadata,
|
|
49
|
-
icon,
|
|
50
|
-
closeLabel = 'Close Preview',
|
|
51
|
-
iframeName,
|
|
52
|
-
title,
|
|
53
|
-
url,
|
|
54
|
-
download,
|
|
55
|
-
byline,
|
|
56
|
-
isTrusted = false,
|
|
57
|
-
onViewActionClick,
|
|
58
|
-
onDownloadActionClick
|
|
59
|
-
}) => {
|
|
60
|
-
let [isOpen, setIsOpen] = useState(showModal);
|
|
61
|
-
const openAt = useRef();
|
|
62
|
-
const handleOnOpenComplete = useCallback(() => {
|
|
63
|
-
openAt.current = Date.now();
|
|
64
|
-
|
|
65
|
-
if (onOpen) {
|
|
66
|
-
onOpen({
|
|
67
|
-
size: EmbedModalSize.Small
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
}, [onOpen]);
|
|
71
|
-
const handleOnCloseComplete = useCallback(() => {
|
|
72
|
-
if (onClose) {
|
|
73
|
-
const duration = openAt.current ? Date.now() - openAt.current : undefined;
|
|
74
|
-
onClose({
|
|
75
|
-
duration,
|
|
76
|
-
size: EmbedModalSize.Small
|
|
77
|
-
});
|
|
78
|
-
}
|
|
79
|
-
}, [onClose]);
|
|
80
|
-
const sandbox = getIframeSandboxAttribute(isTrusted);
|
|
81
|
-
return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
|
|
82
|
-
height: "100%",
|
|
83
|
-
width: "large",
|
|
84
|
-
testId: testId,
|
|
85
|
-
onOpenComplete: handleOnOpenComplete,
|
|
86
|
-
onClose: () => {
|
|
87
|
-
setIsOpen(false);
|
|
88
|
-
},
|
|
89
|
-
onCloseComplete: handleOnCloseComplete
|
|
90
|
-
}, /*#__PURE__*/React.createElement(Header, {
|
|
91
|
-
providerName: providerName,
|
|
92
|
-
icon: icon,
|
|
93
|
-
metadata: metadata,
|
|
94
|
-
url: url,
|
|
95
|
-
title: title,
|
|
96
|
-
label: closeLabel,
|
|
97
|
-
download: download,
|
|
98
|
-
byline: byline,
|
|
99
|
-
onViewActionClick: onViewActionClick,
|
|
100
|
-
onDownloadActionClick: onDownloadActionClick
|
|
101
|
-
}), /*#__PURE__*/React.createElement(ModalBody, null, src ? /*#__PURE__*/React.createElement("iframe", {
|
|
102
|
-
style: iframeStyles,
|
|
103
|
-
name: iframeName,
|
|
104
|
-
frameBorder: 0,
|
|
105
|
-
src: src,
|
|
106
|
-
sandbox: sandbox
|
|
107
|
-
}) : /*#__PURE__*/React.createElement("iframe", {
|
|
108
|
-
style: iframeStyles,
|
|
109
|
-
name: iframeName,
|
|
110
|
-
frameBorder: 0,
|
|
111
|
-
sandbox: sandbox
|
|
112
|
-
}))));
|
|
113
|
-
};
|
|
114
|
-
|
|
115
|
-
export default withAnalytics(ModalWithErrorBoundary);
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { jsx } from '@emotion/react';
|
|
3
|
-
import { Fragment as F } from 'react';
|
|
4
|
-
import { useModal } from '@atlaskit/modal-dialog';
|
|
5
|
-
import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
|
|
6
|
-
import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
|
|
7
|
-
import Button from '@atlaskit/button/custom-theme-button';
|
|
8
|
-
import { N100, N30A } from '@atlaskit/theme/colors';
|
|
9
|
-
import { token } from '@atlaskit/tokens';
|
|
10
|
-
import { FormattedMessage } from 'react-intl-next';
|
|
11
|
-
import { gs } from './utils';
|
|
12
|
-
import { Icon } from './Icon';
|
|
13
|
-
import { MetadataList } from './MetadataList';
|
|
14
|
-
import { Byline } from './Byline';
|
|
15
|
-
import { messages } from '../../messages';
|
|
16
|
-
export const Header = ({
|
|
17
|
-
title,
|
|
18
|
-
label,
|
|
19
|
-
metadata = {
|
|
20
|
-
items: []
|
|
21
|
-
},
|
|
22
|
-
icon,
|
|
23
|
-
providerName,
|
|
24
|
-
url,
|
|
25
|
-
download,
|
|
26
|
-
byline,
|
|
27
|
-
onViewActionClick,
|
|
28
|
-
onDownloadActionClick
|
|
29
|
-
}) => {
|
|
30
|
-
const {
|
|
31
|
-
onClose
|
|
32
|
-
} = useModal();
|
|
33
|
-
return jsx("div", {
|
|
34
|
-
style: {
|
|
35
|
-
paddingLeft: gs(3),
|
|
36
|
-
paddingRight: gs(3),
|
|
37
|
-
paddingBottom: gs(2),
|
|
38
|
-
paddingTop: gs(2)
|
|
39
|
-
}
|
|
40
|
-
}, jsx("div", {
|
|
41
|
-
style: {
|
|
42
|
-
display: 'flex',
|
|
43
|
-
justifyContent: 'space-between',
|
|
44
|
-
alignItems: 'baseline',
|
|
45
|
-
borderBottom: `1px solid ${token('color.border', N30A)}`
|
|
46
|
-
}
|
|
47
|
-
}, jsx("div", {
|
|
48
|
-
css: {
|
|
49
|
-
flex: 1
|
|
50
|
-
}
|
|
51
|
-
}, jsx("div", {
|
|
52
|
-
css: {
|
|
53
|
-
display: 'flex'
|
|
54
|
-
}
|
|
55
|
-
}, icon && jsx(Icon, icon), jsx("div", {
|
|
56
|
-
css: {
|
|
57
|
-
paddingLeft: gs(2),
|
|
58
|
-
paddingBottom: gs(2)
|
|
59
|
-
}
|
|
60
|
-
}, jsx("h3", null, title), jsx("div", {
|
|
61
|
-
css: {
|
|
62
|
-
color: token('color.text.subtlest', N100)
|
|
63
|
-
}
|
|
64
|
-
}, metadata.items.length && jsx(MetadataList, {
|
|
65
|
-
items: metadata.items
|
|
66
|
-
}) || jsx(Byline, null, byline))))), jsx("div", null, download && jsx(Button, {
|
|
67
|
-
appearance: "primary",
|
|
68
|
-
href: download,
|
|
69
|
-
onClick: onDownloadActionClick
|
|
70
|
-
}, jsx(FormattedMessage, messages.download)), url && jsx(Button, {
|
|
71
|
-
href: url,
|
|
72
|
-
target: "_blank",
|
|
73
|
-
appearance: "link",
|
|
74
|
-
testId: "preview-view-action",
|
|
75
|
-
iconAfter: jsx(ShortcutIcon, {
|
|
76
|
-
size: "small",
|
|
77
|
-
label: ""
|
|
78
|
-
}),
|
|
79
|
-
onClick: onViewActionClick
|
|
80
|
-
}, providerName ? jsx(F, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal)), jsx(Button, {
|
|
81
|
-
appearance: "subtle",
|
|
82
|
-
iconBefore: jsx(EditorCloseIcon, {
|
|
83
|
-
label: label
|
|
84
|
-
}),
|
|
85
|
-
onClick: onClose,
|
|
86
|
-
testId: "preview-close-button"
|
|
87
|
-
}))));
|
|
88
|
-
};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import Modal from '../../../common/Modal';
|
|
4
|
-
import { EmbedModalSize } from '../../types';
|
|
5
|
-
|
|
6
|
-
var withSizeExperiment = function withSizeExperiment(Component) {
|
|
7
|
-
return function (props) {
|
|
8
|
-
var _props$featureFlags = props.featureFlags,
|
|
9
|
-
featureFlags = _props$featureFlags === void 0 ? {} : _props$featureFlags;
|
|
10
|
-
var size = featureFlags.embedModalSize; // Experiment
|
|
11
|
-
|
|
12
|
-
if (size === EmbedModalSize.Large || size === EmbedModalSize.Small) {
|
|
13
|
-
return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
|
|
14
|
-
size: size
|
|
15
|
-
}));
|
|
16
|
-
} // Control
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
return /*#__PURE__*/React.createElement(Modal, props);
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export default withSizeExperiment;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|