@atlaskit/smart-card 20.0.4 → 20.1.0
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 +41 -0
- package/dist/cjs/state/actions/constants.js +4 -2
- package/dist/cjs/state/actions/index.js +51 -19
- package/dist/cjs/state/analytics/useSmartLinkAnalytics.js +26 -6
- package/dist/cjs/version.json +1 -1
- package/dist/cjs/view/BlockCard/index.js +29 -0
- package/dist/cjs/view/CardWithUrl/component.js +7 -2
- package/dist/cjs/view/CardWithUrl/loader.js +7 -9
- package/dist/cjs/view/EmbedCard/index.js +29 -0
- package/dist/cjs/view/FlexibleCard/components/blocks/element-group/index.js +2 -2
- package/dist/cjs/view/FlexibleCard/index.js +34 -7
- package/dist/cjs/view/HoverCard/components/HoverCardComponent.js +143 -0
- package/dist/cjs/view/HoverCard/components/{hover-card-content.js → HoverCardContent.js} +29 -25
- package/dist/cjs/view/HoverCard/index.js +25 -126
- package/dist/cjs/view/HoverCard/styled.js +11 -1
- package/dist/cjs/view/HoverCard/utils.js +3 -3
- package/dist/cjs/view/InlineCard/index.js +29 -0
- package/dist/es2019/state/actions/constants.js +2 -1
- package/dist/es2019/state/actions/index.js +46 -18
- package/dist/es2019/state/analytics/useSmartLinkAnalytics.js +24 -7
- package/dist/es2019/version.json +1 -1
- package/dist/es2019/view/BlockCard/index.js +29 -0
- package/dist/es2019/view/CardWithUrl/component.js +7 -2
- package/dist/es2019/view/CardWithUrl/loader.js +8 -10
- package/dist/es2019/view/EmbedCard/index.js +29 -0
- package/dist/es2019/view/FlexibleCard/components/blocks/element-group/index.js +4 -0
- package/dist/es2019/view/FlexibleCard/index.js +32 -7
- package/dist/es2019/view/HoverCard/components/HoverCardComponent.js +102 -0
- package/dist/es2019/view/HoverCard/components/{hover-card-content.js → HoverCardContent.js} +18 -21
- package/dist/es2019/view/HoverCard/index.js +26 -97
- package/dist/es2019/view/HoverCard/styled.js +8 -0
- package/dist/es2019/view/HoverCard/utils.js +1 -1
- package/dist/es2019/view/InlineCard/index.js +29 -0
- package/dist/esm/state/actions/constants.js +2 -1
- package/dist/esm/state/actions/index.js +51 -20
- package/dist/esm/state/analytics/useSmartLinkAnalytics.js +27 -7
- package/dist/esm/version.json +1 -1
- package/dist/esm/view/BlockCard/index.js +29 -0
- package/dist/esm/view/CardWithUrl/component.js +7 -2
- package/dist/esm/view/CardWithUrl/loader.js +8 -10
- package/dist/esm/view/EmbedCard/index.js +29 -0
- package/dist/esm/view/FlexibleCard/components/blocks/element-group/index.js +2 -2
- package/dist/esm/view/FlexibleCard/index.js +33 -7
- package/dist/esm/view/HoverCard/components/HoverCardComponent.js +114 -0
- package/dist/esm/view/HoverCard/components/{hover-card-content.js → HoverCardContent.js} +20 -22
- package/dist/esm/view/HoverCard/index.js +24 -109
- package/dist/esm/view/HoverCard/styled.js +8 -0
- package/dist/esm/view/HoverCard/utils.js +1 -1
- package/dist/esm/view/InlineCard/index.js +29 -0
- package/dist/types/state/actions/constants.d.ts +1 -0
- package/dist/types/state/actions/index.d.ts +1 -0
- package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts +9 -0
- package/dist/types/state/hooks/useSmartLink.d.ts +3 -0
- package/dist/types/view/BlockCard/types.d.ts +2 -0
- package/dist/types/view/Card/index.d.ts +1 -1
- package/dist/types/view/Card/types.d.ts +2 -1
- package/dist/types/view/CardWithUrl/component.d.ts +1 -1
- package/dist/types/view/CardWithUrl/types.d.ts +2 -1
- package/dist/types/view/EmbedCard/components/styled.d.ts +16 -16
- package/dist/types/view/EmbedCard/types.d.ts +2 -0
- package/dist/types/view/FlexibleCard/types.d.ts +9 -4
- package/dist/types/view/HoverCard/components/HoverCardComponent.d.ts +4 -0
- package/dist/types/view/HoverCard/components/HoverCardContent.d.ts +9 -0
- package/dist/types/view/HoverCard/index.d.ts +2 -4
- package/dist/types/view/HoverCard/styled.d.ts +2 -0
- package/dist/types/view/HoverCard/types.d.ts +8 -0
- package/dist/types/view/HoverCard/utils.d.ts +1 -1
- package/dist/types/view/InlineCard/Frame/styled.d.ts +1 -1
- package/dist/types/view/InlineCard/Icon.d.ts +3 -3
- package/dist/types/view/InlineCard/IconAndTitleLayout/styled.d.ts +9 -9
- package/dist/types/view/InlineCard/ResolvingView/styled.d.ts +13 -5
- package/dist/types/view/InlineCard/styled.d.ts +8 -4
- package/dist/types/view/InlineCard/types.d.ts +2 -1
- package/dist/types/view/types.d.ts +6 -0
- package/package.json +4 -4
- package/dist/types/view/HoverCard/components/hover-card-content.d.ts +0 -4
|
@@ -0,0 +1,143 @@
|
|
|
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.hoverCardClassName = exports.HoverCardComponent = void 0;
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _popup = _interopRequireDefault(require("@atlaskit/popup"));
|
|
17
|
+
|
|
18
|
+
var _core = require("@emotion/core");
|
|
19
|
+
|
|
20
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
22
|
+
var _useSmartLinkActions = require("../../../state/hooks-external/useSmartLinkActions");
|
|
23
|
+
|
|
24
|
+
var _renderers = require("../../../state/renderers");
|
|
25
|
+
|
|
26
|
+
var _store = require("../../../state/store");
|
|
27
|
+
|
|
28
|
+
var _HoverCardContent = _interopRequireDefault(require("../components/HoverCardContent"));
|
|
29
|
+
|
|
30
|
+
var _styled = require("../styled");
|
|
31
|
+
|
|
32
|
+
var _utils = require("../utils");
|
|
33
|
+
|
|
34
|
+
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); }
|
|
35
|
+
|
|
36
|
+
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; }
|
|
37
|
+
|
|
38
|
+
/** @jsx jsx */
|
|
39
|
+
var hoverCardClassName = 'smart-links-hover-preview';
|
|
40
|
+
exports.hoverCardClassName = hoverCardClassName;
|
|
41
|
+
|
|
42
|
+
var HoverCardComponent = function HoverCardComponent(_ref) {
|
|
43
|
+
var children = _ref.children,
|
|
44
|
+
url = _ref.url,
|
|
45
|
+
analyticsHandler = _ref.analyticsHandler,
|
|
46
|
+
analytics = _ref.analytics;
|
|
47
|
+
var delay = 300;
|
|
48
|
+
|
|
49
|
+
var _React$useState = _react.default.useState(false),
|
|
50
|
+
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
51
|
+
isOpen = _React$useState2[0],
|
|
52
|
+
setIsOpen = _React$useState2[1];
|
|
53
|
+
|
|
54
|
+
var fadeOutTimeoutId = (0, _react.useRef)();
|
|
55
|
+
var fadeInTimeoutId = (0, _react.useRef)();
|
|
56
|
+
var cardOpenTime = (0, _react.useRef)();
|
|
57
|
+
var renderers = (0, _renderers.useSmartLinkRenderers)();
|
|
58
|
+
var linkState = (0, _store.useSmartCardState)(url);
|
|
59
|
+
var hoverDisplay = 'card';
|
|
60
|
+
var invokeMethod = 'mouse_hover';
|
|
61
|
+
var hideCard = (0, _react.useCallback)(function () {
|
|
62
|
+
//Check its previously open to avoid firing events when moving between the child and hover card components
|
|
63
|
+
if (isOpen === true && cardOpenTime.current) {
|
|
64
|
+
var hoverTime = Date.now() - cardOpenTime.current;
|
|
65
|
+
analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
setIsOpen(false);
|
|
69
|
+
}, [analytics.ui, isOpen]);
|
|
70
|
+
var initHideCard = (0, _react.useCallback)(function () {
|
|
71
|
+
if (fadeInTimeoutId.current) {
|
|
72
|
+
clearTimeout(fadeInTimeoutId.current);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
fadeOutTimeoutId.current = setTimeout(function () {
|
|
76
|
+
return hideCard();
|
|
77
|
+
}, delay);
|
|
78
|
+
}, [hideCard]);
|
|
79
|
+
var initShowCard = (0, _react.useCallback)(function () {
|
|
80
|
+
if (fadeOutTimeoutId.current) {
|
|
81
|
+
clearTimeout(fadeOutTimeoutId.current);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
fadeInTimeoutId.current = setTimeout(function () {
|
|
85
|
+
//Check if its previously closed to avoid firing events when moving between the child and hover card components
|
|
86
|
+
if (isOpen === false) {
|
|
87
|
+
cardOpenTime.current = Date.now();
|
|
88
|
+
analytics.ui.hoverCardViewedEvent(hoverDisplay, invokeMethod);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
setIsOpen(true);
|
|
92
|
+
}, delay);
|
|
93
|
+
}, [delay, isOpen, analytics.ui]);
|
|
94
|
+
var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
|
|
95
|
+
url: url,
|
|
96
|
+
appearance: _utils.SMART_CARD_ANALYTICS_DISPLAY,
|
|
97
|
+
analyticsHandler: analyticsHandler
|
|
98
|
+
});
|
|
99
|
+
var onActionClick = (0, _react.useCallback)(function (actionId) {
|
|
100
|
+
if (actionId === 'preview-content') {
|
|
101
|
+
hideCard();
|
|
102
|
+
}
|
|
103
|
+
}, [hideCard]); // Stop hover preview content to propagate event to parent.
|
|
104
|
+
|
|
105
|
+
var onClick = (0, _react.useCallback)(function (e) {
|
|
106
|
+
return e.stopPropagation();
|
|
107
|
+
}, []);
|
|
108
|
+
return (0, _core.jsx)(_popup.default, {
|
|
109
|
+
testId: "hover-card",
|
|
110
|
+
isOpen: isOpen,
|
|
111
|
+
onClose: hideCard,
|
|
112
|
+
placement: "bottom-start",
|
|
113
|
+
content: function content(_ref2) {
|
|
114
|
+
var update = _ref2.update;
|
|
115
|
+
return (0, _core.jsx)("div", {
|
|
116
|
+
onMouseEnter: initShowCard,
|
|
117
|
+
onMouseLeave: initHideCard,
|
|
118
|
+
onClick: onClick,
|
|
119
|
+
css: _styled.HoverCardContainer // class name for trello to exclude click events
|
|
120
|
+
,
|
|
121
|
+
className: hoverCardClassName
|
|
122
|
+
}, (0, _core.jsx)(_HoverCardContent.default, {
|
|
123
|
+
analytics: analytics,
|
|
124
|
+
cardActions: linkActions,
|
|
125
|
+
cardState: linkState,
|
|
126
|
+
onActionClick: onActionClick,
|
|
127
|
+
onResolve: update,
|
|
128
|
+
renderers: renderers,
|
|
129
|
+
url: url
|
|
130
|
+
}));
|
|
131
|
+
},
|
|
132
|
+
trigger: function trigger(triggerProps) {
|
|
133
|
+
return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
|
|
134
|
+
onMouseEnter: initShowCard,
|
|
135
|
+
onMouseLeave: initHideCard
|
|
136
|
+
}), children);
|
|
137
|
+
},
|
|
138
|
+
zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
|
|
139
|
+
|
|
140
|
+
});
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
exports.HoverCardComponent = HoverCardComponent;
|
|
@@ -7,44 +7,38 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.default = void 0;
|
|
10
|
+
exports.toFooterActions = exports.getOpenAction = exports.default = void 0;
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _extractors = require("@atlaskit/linking-common/extractors");
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
18
|
+
var _constants = require("../../../constants");
|
|
17
19
|
|
|
18
20
|
var _extractPreview = _interopRequireDefault(require("../../../extractors/flexible/extract-preview"));
|
|
19
21
|
|
|
20
|
-
var
|
|
22
|
+
var _extractMetadata2 = require("../../../extractors/hover/extractMetadata");
|
|
21
23
|
|
|
22
|
-
var
|
|
24
|
+
var _actions = require("../../../state/actions");
|
|
23
25
|
|
|
24
|
-
var
|
|
26
|
+
var _helpers = require("../../../state/helpers");
|
|
25
27
|
|
|
26
|
-
var
|
|
28
|
+
var _utils = require("../../../utils");
|
|
27
29
|
|
|
28
|
-
var
|
|
30
|
+
var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
|
|
29
31
|
|
|
30
|
-
var
|
|
32
|
+
var _blocks = require("../../FlexibleCard/components/blocks");
|
|
31
33
|
|
|
32
34
|
var _styled = require("../styled");
|
|
33
35
|
|
|
34
|
-
var
|
|
36
|
+
var _utils2 = require("../utils");
|
|
35
37
|
|
|
36
38
|
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
39
|
|
|
38
40
|
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
41
|
|
|
40
|
-
var flexibleUiOptions = {
|
|
41
|
-
hideElevation: true,
|
|
42
|
-
size: _constants.SmartLinkSize.Medium,
|
|
43
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
44
|
-
theme: _constants.SmartLinkTheme.Black,
|
|
45
|
-
hidePadding: true
|
|
46
|
-
};
|
|
47
|
-
|
|
48
42
|
var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
|
|
49
43
|
return {
|
|
50
44
|
name: _constants.ActionName.CustomAction,
|
|
@@ -65,6 +59,8 @@ var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
|
|
|
65
59
|
};
|
|
66
60
|
};
|
|
67
61
|
|
|
62
|
+
exports.getOpenAction = getOpenAction;
|
|
63
|
+
|
|
68
64
|
var toFooterActions = function toFooterActions(cardActions, onActionClick) {
|
|
69
65
|
return cardActions.map(function (action) {
|
|
70
66
|
return {
|
|
@@ -82,10 +78,14 @@ var toFooterActions = function toFooterActions(cardActions, onActionClick) {
|
|
|
82
78
|
});
|
|
83
79
|
};
|
|
84
80
|
|
|
81
|
+
exports.toFooterActions = toFooterActions;
|
|
82
|
+
|
|
85
83
|
var HoverCardContent = function HoverCardContent(_ref) {
|
|
86
84
|
var _cardState$details;
|
|
87
85
|
|
|
88
|
-
var
|
|
86
|
+
var _ref$id = _ref.id,
|
|
87
|
+
id = _ref$id === void 0 ? '' : _ref$id,
|
|
88
|
+
analytics = _ref.analytics,
|
|
89
89
|
_ref$cardActions = _ref.cardActions,
|
|
90
90
|
cardActions = _ref$cardActions === void 0 ? [] : _ref$cardActions,
|
|
91
91
|
cardState = _ref.cardState,
|
|
@@ -93,17 +93,21 @@ var HoverCardContent = function HoverCardContent(_ref) {
|
|
|
93
93
|
onResolve = _ref.onResolve,
|
|
94
94
|
renderers = _ref.renderers,
|
|
95
95
|
url = _ref.url;
|
|
96
|
+
var actions = (0, _actions.useSmartCardActions)(id, url, analytics);
|
|
97
|
+
(0, _react.useEffect)(function () {
|
|
98
|
+
actions.loadMetadata();
|
|
99
|
+
}, [actions]);
|
|
96
100
|
(0, _react.useEffect)(function () {
|
|
97
101
|
// Since hover preview only render on resolved status,
|
|
98
102
|
// there is no need to check for statuses.
|
|
99
|
-
analytics.ui.renderSuccessEvent(
|
|
103
|
+
analytics.ui.renderSuccessEvent(_utils2.SMART_CARD_ANALYTICS_DISPLAY, cardState.status);
|
|
100
104
|
}, [analytics.ui, cardState.status]);
|
|
101
105
|
var extensionKey = (0, _react.useMemo)(function () {
|
|
102
106
|
return (0, _helpers.getExtensionKey)(cardState.details);
|
|
103
107
|
}, [cardState.details]);
|
|
104
108
|
var onClick = (0, _react.useCallback)(function (event) {
|
|
105
|
-
var isModifierKeyPressed = (0,
|
|
106
|
-
analytics.ui.cardClickedEvent(undefined,
|
|
109
|
+
var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
|
|
110
|
+
analytics.ui.cardClickedEvent(undefined, _utils2.SMART_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
|
|
107
111
|
}, [cardState.status, analytics.ui]);
|
|
108
112
|
var titleActions = (0, _react.useMemo)(function () {
|
|
109
113
|
return [getOpenAction(url, analytics, onActionClick)];
|
|
@@ -114,7 +118,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
|
|
|
114
118
|
var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
|
|
115
119
|
var types = data ? (0, _extractors.extractType)(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
|
|
116
120
|
|
|
117
|
-
var _extractMetadata = (0, _extractMetadata2.extractMetadata)((0,
|
|
121
|
+
var _extractMetadata = (0, _extractMetadata2.extractMetadata)((0, _utils2.getSimulatedMetadata)(extensionKey, types)),
|
|
118
122
|
primary = _extractMetadata.primary,
|
|
119
123
|
secondary = _extractMetadata.secondary,
|
|
120
124
|
subtitle = _extractMetadata.subtitle;
|
|
@@ -126,7 +130,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
|
|
|
126
130
|
onClick: onClick,
|
|
127
131
|
onResolve: onResolve,
|
|
128
132
|
renderers: renderers,
|
|
129
|
-
ui: flexibleUiOptions,
|
|
133
|
+
ui: _styled.flexibleUiOptions,
|
|
130
134
|
url: url
|
|
131
135
|
}, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, {
|
|
132
136
|
actions: titleActions,
|
|
@@ -2,153 +2,52 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
|
-
exports.
|
|
8
|
+
exports.HoverCard = void 0;
|
|
11
9
|
|
|
12
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
11
|
|
|
14
|
-
var
|
|
12
|
+
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
15
13
|
|
|
16
14
|
var _core = require("@emotion/core");
|
|
17
15
|
|
|
18
|
-
var _react =
|
|
19
|
-
|
|
20
|
-
var _popup = _interopRequireDefault(require("@atlaskit/popup"));
|
|
21
|
-
|
|
22
|
-
var _useSmartLinkActions = require("../../state/hooks-external/useSmartLinkActions");
|
|
23
|
-
|
|
24
|
-
var _styled = require("./styled");
|
|
16
|
+
var _react = require("react");
|
|
25
17
|
|
|
26
|
-
var
|
|
27
|
-
|
|
28
|
-
var _analytics = require("../../utils/analytics");
|
|
29
|
-
|
|
30
|
-
var _store = require("../../state/store");
|
|
18
|
+
var _reactErrorBoundary = require("react-error-boundary");
|
|
31
19
|
|
|
32
|
-
var
|
|
20
|
+
var _analytics = require("../../state/analytics");
|
|
33
21
|
|
|
34
|
-
var
|
|
22
|
+
var _analytics2 = require("../../utils/analytics");
|
|
35
23
|
|
|
36
|
-
var
|
|
24
|
+
var _HoverCardComponent = require("./components/HoverCardComponent");
|
|
37
25
|
|
|
38
26
|
var _utils = require("./utils");
|
|
39
27
|
|
|
40
|
-
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); }
|
|
41
|
-
|
|
42
|
-
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; }
|
|
43
|
-
|
|
44
28
|
/** @jsx jsx */
|
|
45
|
-
var
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
id = _ref.id,
|
|
51
|
-
url = _ref.url,
|
|
52
|
-
createAnalyticsEvent = _ref.createAnalyticsEvent;
|
|
29
|
+
var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
|
|
30
|
+
var url = props.url,
|
|
31
|
+
id = props.id,
|
|
32
|
+
children = props.children,
|
|
33
|
+
createAnalyticsEvent = props.createAnalyticsEvent;
|
|
53
34
|
var analyticsHandler = (0, _react.useCallback)(function (analyticsPayload) {
|
|
54
|
-
(0,
|
|
35
|
+
(0, _analytics2.fireSmartLinkEvent)(analyticsPayload, createAnalyticsEvent);
|
|
55
36
|
}, [createAnalyticsEvent]);
|
|
56
|
-
var
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
var linkState = (0, _store.useSmartCardState)(url);
|
|
68
|
-
var analytics = (0, _analytics2.useSmartLinkAnalytics)(url, analyticsHandler, id);
|
|
69
|
-
var hideCard = (0, _react.useCallback)(function () {
|
|
70
|
-
//Check its previously open to avoid firing events when moving between the child and hover card components
|
|
71
|
-
if (isOpen === true && cardOpenTime.current) {
|
|
72
|
-
var hoverTime = Date.now() - cardOpenTime.current;
|
|
73
|
-
analytics.ui.hoverCardDismissedEvent('card', hoverTime, 'mouse_hover');
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
setIsOpen(false);
|
|
77
|
-
}, [analytics.ui, isOpen]);
|
|
78
|
-
var initHideCard = (0, _react.useCallback)(function () {
|
|
79
|
-
if (fadeInTimeoutId.current) {
|
|
80
|
-
clearTimeout(fadeInTimeoutId.current);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
fadeOutTimeoutId.current = setTimeout(function () {
|
|
84
|
-
return hideCard();
|
|
85
|
-
}, delay);
|
|
86
|
-
}, [hideCard]);
|
|
87
|
-
var initShowCard = (0, _react.useCallback)(function () {
|
|
88
|
-
if (fadeOutTimeoutId.current) {
|
|
89
|
-
clearTimeout(fadeOutTimeoutId.current);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
fadeInTimeoutId.current = setTimeout(function () {
|
|
93
|
-
//Check if its previously closed to avoid firing events when moving between the child and hover card components
|
|
94
|
-
if (isOpen === false) {
|
|
95
|
-
cardOpenTime.current = Date.now();
|
|
96
|
-
analytics.ui.hoverCardViewedEvent('card', 'mouse_hover');
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
setIsOpen(true);
|
|
100
|
-
}, delay);
|
|
101
|
-
}, [delay, isOpen, analytics.ui]);
|
|
102
|
-
var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
|
|
103
|
-
url: url,
|
|
104
|
-
appearance: _utils.HOVER_CARD_ANALYTICS_DISPLAY,
|
|
105
|
-
analyticsHandler: analyticsHandler
|
|
106
|
-
});
|
|
107
|
-
var onActionClick = (0, _react.useCallback)(function (actionId) {
|
|
108
|
-
if (actionId === 'preview-content') {
|
|
109
|
-
hideCard();
|
|
110
|
-
}
|
|
111
|
-
}, [hideCard]); // Stop hover preview content to propagate event to parent.
|
|
112
|
-
|
|
113
|
-
var onClick = (0, _react.useCallback)(function (e) {
|
|
114
|
-
return e.stopPropagation();
|
|
115
|
-
}, []);
|
|
116
|
-
return (0, _core.jsx)(_popup.default, {
|
|
117
|
-
testId: "hover-card",
|
|
118
|
-
isOpen: isOpen,
|
|
119
|
-
onClose: hideCard,
|
|
120
|
-
placement: "bottom-start",
|
|
121
|
-
content: function content(_ref2) {
|
|
122
|
-
var update = _ref2.update;
|
|
123
|
-
return (0, _core.jsx)("div", {
|
|
124
|
-
onMouseEnter: initShowCard,
|
|
125
|
-
onMouseLeave: initHideCard,
|
|
126
|
-
className: hoverCardClassName,
|
|
127
|
-
css: _styled.HoverCardContainer,
|
|
128
|
-
onClick: onClick
|
|
129
|
-
}, (0, _core.jsx)(_hoverCardContent.default, {
|
|
130
|
-
analytics: analytics,
|
|
131
|
-
cardActions: linkActions,
|
|
132
|
-
cardState: linkState,
|
|
133
|
-
onActionClick: onActionClick,
|
|
134
|
-
onResolve: update,
|
|
135
|
-
renderers: renderers,
|
|
136
|
-
url: url
|
|
137
|
-
}));
|
|
138
|
-
},
|
|
139
|
-
trigger: function trigger(triggerProps) {
|
|
140
|
-
return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
|
|
141
|
-
onMouseEnter: initShowCard,
|
|
142
|
-
onMouseLeave: initHideCard
|
|
143
|
-
}), children);
|
|
144
|
-
},
|
|
145
|
-
zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
|
|
146
|
-
|
|
147
|
-
});
|
|
37
|
+
var analytics = (0, _analytics.useSmartLinkAnalytics)(url, analyticsHandler, id);
|
|
38
|
+
var onError = (0, _react.useCallback)(function (error, info) {
|
|
39
|
+
analytics.ui.renderFailedEvent(_utils.SMART_CARD_ANALYTICS_DISPLAY, id, error, info);
|
|
40
|
+
}, [analytics.ui, id]);
|
|
41
|
+
return (0, _core.jsx)(_reactErrorBoundary.ErrorBoundary, {
|
|
42
|
+
fallback: children,
|
|
43
|
+
onError: onError
|
|
44
|
+
}, (0, _core.jsx)(_HoverCardComponent.HoverCardComponent, (0, _extends2.default)({}, props, {
|
|
45
|
+
analyticsHandler: analyticsHandler,
|
|
46
|
+
analytics: analytics
|
|
47
|
+
}), children));
|
|
148
48
|
};
|
|
149
49
|
|
|
150
|
-
exports.HoverCardComponent = HoverCardComponent;
|
|
151
50
|
var HoverCard = (0, _analyticsNext.withAnalyticsContext)({
|
|
152
51
|
source: 'smartLinkPreviewHoverCard'
|
|
153
|
-
})((0, _analyticsNext.withAnalyticsEvents)()(
|
|
52
|
+
})((0, _analyticsNext.withAnalyticsEvents)()(HoverCardWithErrorBoundary));
|
|
154
53
|
exports.HoverCard = HoverCard;
|
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.HoverCardContainer = void 0;
|
|
8
|
+
exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.flexibleUiOptions = exports.HoverCardContainer = void 0;
|
|
9
9
|
|
|
10
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
11
|
|
|
@@ -13,8 +13,18 @@ var _core = require("@emotion/core");
|
|
|
13
13
|
|
|
14
14
|
var _index = require("../../index");
|
|
15
15
|
|
|
16
|
+
var _constants = require("../../constants");
|
|
17
|
+
|
|
16
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
17
19
|
|
|
20
|
+
var flexibleUiOptions = {
|
|
21
|
+
hideElevation: true,
|
|
22
|
+
size: _constants.SmartLinkSize.Medium,
|
|
23
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
24
|
+
theme: _constants.SmartLinkTheme.Black,
|
|
25
|
+
hidePadding: true
|
|
26
|
+
};
|
|
27
|
+
exports.flexibleUiOptions = flexibleUiOptions;
|
|
18
28
|
var blockGap = '0.5rem';
|
|
19
29
|
var elementGap = '0.5rem';
|
|
20
30
|
var separatorCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n [data-separator] + [data-separator]:before {\n margin-right: ", ";\n }\n"])), elementGap);
|
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.getSimulatedMetadata = exports.
|
|
6
|
+
exports.getSimulatedMetadata = exports.SMART_CARD_ANALYTICS_DISPLAY = void 0;
|
|
7
7
|
|
|
8
8
|
var _constants = require("../../constants");
|
|
9
9
|
|
|
10
|
-
var
|
|
11
|
-
exports.
|
|
10
|
+
var SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
|
|
11
|
+
exports.SMART_CARD_ANALYTICS_DISPLAY = SMART_CARD_ANALYTICS_DISPLAY;
|
|
12
12
|
|
|
13
13
|
var getSimulatedMetadata = function getSimulatedMetadata() {
|
|
14
14
|
var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
@@ -72,6 +72,7 @@ var InlineCard = function InlineCard(_ref) {
|
|
|
72
72
|
isSelected = _ref.isSelected,
|
|
73
73
|
renderers = _ref.renderers,
|
|
74
74
|
onResolve = _ref.onResolve,
|
|
75
|
+
onError = _ref.onError,
|
|
75
76
|
testId = _ref.testId,
|
|
76
77
|
inlinePreloaderStyle = _ref.inlinePreloaderStyle,
|
|
77
78
|
showHoverPreview = _ref.showHoverPreview;
|
|
@@ -111,6 +112,13 @@ var InlineCard = function InlineCard(_ref) {
|
|
|
111
112
|
}));
|
|
112
113
|
|
|
113
114
|
case 'unauthorized':
|
|
115
|
+
if (onError) {
|
|
116
|
+
onError({
|
|
117
|
+
url: url,
|
|
118
|
+
status: status
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
|
|
114
122
|
var provider = (0, _extractors.extractProvider)(cardDetails);
|
|
115
123
|
return /*#__PURE__*/_react.default.createElement(_UnauthorisedView.InlineCardUnauthorizedView, {
|
|
116
124
|
icon: provider && provider.icon,
|
|
@@ -122,6 +130,13 @@ var InlineCard = function InlineCard(_ref) {
|
|
|
122
130
|
});
|
|
123
131
|
|
|
124
132
|
case 'forbidden':
|
|
133
|
+
if (onError) {
|
|
134
|
+
onError({
|
|
135
|
+
url: url,
|
|
136
|
+
status: status
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
|
|
125
140
|
var providerForbidden = (0, _extractors.extractProvider)(cardDetails);
|
|
126
141
|
var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getUnauthorizedJsonLd)().meta;
|
|
127
142
|
var requestAccessContext = (0, _context.extractRequestAccessContext)({
|
|
@@ -141,6 +156,13 @@ var InlineCard = function InlineCard(_ref) {
|
|
|
141
156
|
});
|
|
142
157
|
|
|
143
158
|
case 'not_found':
|
|
159
|
+
if (onError) {
|
|
160
|
+
onError({
|
|
161
|
+
url: url,
|
|
162
|
+
status: status
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
|
|
144
166
|
var providerNotFound = (0, _extractors.extractProvider)(cardDetails);
|
|
145
167
|
return /*#__PURE__*/_react.default.createElement(_ErroredView.InlineCardErroredView, {
|
|
146
168
|
url: url,
|
|
@@ -153,6 +175,13 @@ var InlineCard = function InlineCard(_ref) {
|
|
|
153
175
|
|
|
154
176
|
case 'fallback':
|
|
155
177
|
case 'errored':
|
|
178
|
+
if (onError) {
|
|
179
|
+
onError({
|
|
180
|
+
url: url,
|
|
181
|
+
status: status
|
|
182
|
+
});
|
|
183
|
+
}
|
|
184
|
+
|
|
156
185
|
return /*#__PURE__*/_react.default.createElement(_LinkView.CardLinkView, {
|
|
157
186
|
link: url,
|
|
158
187
|
isSelected: isSelected,
|
|
@@ -2,4 +2,5 @@ export const ANALYTICS_RESOLVING = 'resolving';
|
|
|
2
2
|
export const ANALYTICS_ERROR = 'errored';
|
|
3
3
|
export const ANALYTICS_FALLBACK = 'fallback';
|
|
4
4
|
export const ERROR_MESSAGE_OAUTH = 'Provider.authFlow is not set to OAuth2.';
|
|
5
|
-
export const ERROR_MESSAGE_FATAL = 'Fatal error resolving URL';
|
|
5
|
+
export const ERROR_MESSAGE_FATAL = 'Fatal error resolving URL';
|
|
6
|
+
export const ERROR_MESSAGE_METADATA = 'Error resolving metadata.';
|