@atlaskit/renderer
Version:
Renderer component
222 lines (219 loc) • 10.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _mediaInline = require("@atlaskit/editor-common/media-inline");
var _providerFactory = require("@atlaskit/editor-common/provider-factory");
var _mediaCard = require("@atlaskit/media-card");
var _mediaClientReact = require("@atlaskit/media-client-react");
var _mediaUi = require("@atlaskit/media-ui");
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _MediaCard = require("../../ui/MediaCard");
var _analyticsNext = require("@atlaskit/analytics-next");
var _ErrorBoundary = require("../../ui/Renderer/ErrorBoundary");
var _enums = require("../../analytics/enums");
var _analytics = require("@atlaskit/editor-common/analytics");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var RenderMediaInline = function RenderMediaInline(_ref) {
var _rendererAppearance = _ref.rendererAppearance,
clipboardAttrs = _ref.clipboardAttrs,
collectionName = _ref.collection,
eventHandlers = _ref.eventHandlers,
identifier = _ref.identifier,
fallbackMediaNameFetcher = _ref.fallbackMediaNameFetcher;
var _useState = (0, _react.useState)(),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
contextIdentifier = _useState2[0],
setContextIdentifier = _useState2[1];
var _useState3 = (0, _react.useState)(),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
fileState = _useState4[0],
setFileState = _useState4[1];
var mediaClient = (0, _react.useContext)(_mediaClientReact.MediaClientContext);
var contextIdentifierProvider = (0, _providerFactory.useProvider)('contextIdentifierProvider');
(0, _react.useEffect)(function () {
if (contextIdentifierProvider) {
contextIdentifierProvider.then(function (resolvedContextID) {
if (contextIdentifier !== resolvedContextID) {
setContextIdentifier(resolvedContextID);
}
});
}
}, [contextIdentifier, contextIdentifierProvider]);
var updateFileState = (0, _react.useCallback)( /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(id) {
var options, _fileState, _t;
return _regenerator.default.wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
options = {
collectionName: collectionName
};
_context.prev = 1;
if (!mediaClient) {
_context.next = 3;
break;
}
_context.next = 2;
return mediaClient.file.getCurrentState(id, options);
case 2:
_fileState = _context.sent;
setFileState(_fileState);
case 3:
_context.next = 5;
break;
case 4:
_context.prev = 4;
_t = _context["catch"](1);
case 5:
case "end":
return _context.stop();
}
}, _callee, null, [[1, 4]]);
}));
return function (_x) {
return _ref2.apply(this, arguments);
};
}(), [collectionName, mediaClient]);
(0, _react.useEffect)(function () {
var id = identifier.id;
var nodeIsInCache = id && _MediaCard.mediaIdentifierMap.has(id);
if (!nodeIsInCache) {
_MediaCard.mediaIdentifierMap.set(identifier.id, _objectSpread(_objectSpread({}, identifier), {}, {
collectionName: collectionName
}));
}
return function () {
_MediaCard.mediaIdentifierMap.delete(id);
};
}, [identifier, collectionName]);
(0, _react.useEffect)(function () {
var id = clipboardAttrs.id;
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
id && updateFileState(id);
}, [contextIdentifier, clipboardAttrs, updateFileState]);
/*
* Only show the loading view if the media client is not ready
* prevents calling the media API before the provider is ready
*/
if (!mediaClient) {
return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
message: "",
isSelected: false
});
}
var handleMediaInlineClick = function handleMediaInlineClick(result) {
var _eventHandlers$media;
if (eventHandlers !== null && eventHandlers !== void 0 && (_eventHandlers$media = eventHandlers.media) !== null && _eventHandlers$media !== void 0 && _eventHandlers$media.onClick) {
var _eventHandlers$media2;
eventHandlers === null || eventHandlers === void 0 || (_eventHandlers$media2 = eventHandlers.media) === null || _eventHandlers$media2 === void 0 || _eventHandlers$media2.onClick(result);
}
};
var shouldOpenMediaViewer = true;
var shouldDisplayToolTip = true;
var id = clipboardAttrs.id,
collection = clipboardAttrs.collection;
return (
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/design-system/prefer-primitives
_react.default.createElement("span", (0, _extends2.default)({}, (0, _MediaCard.getClipboardAttrs)({
id: id,
collection: collection,
contextIdentifierProvider: contextIdentifier,
fileState: fileState
}), {
"data-node-type": "mediaInline"
}), /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
identifier: identifier,
onClick: handleMediaInlineClick,
shouldOpenMediaViewer: shouldOpenMediaViewer,
shouldDisplayToolTip: shouldDisplayToolTip,
mediaClientConfig: mediaClient.mediaClientConfig,
mediaViewerItems: Array.from(_MediaCard.mediaIdentifierMap.values()),
fallbackMediaNameFetcher: fallbackMediaNameFetcher
}))
);
};
var MediaInline = function MediaInline(props) {
var collection = props.collection,
id = props.id,
intl = props.intl,
rendererAppearance = props.rendererAppearance,
featureFlags = props.featureFlags,
fileType = props.type,
alt = props.alt,
width = props.width,
height = props.height,
marks = props.marks,
ssr = props.ssr,
fallbackMediaNameFetcher = props.fallbackMediaNameFetcher;
var clipboardAttrs = {
id: id,
collection: collection
};
var identifier = {
id: id,
mediaItemType: 'file',
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
collectionName: collection
};
var mediaClient = (0, _react.useContext)(_mediaClientReact.MediaClientContext);
var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
if (fileType === 'image') {
var _borderMark$attrs$col, _borderMark$attrs$siz;
var hasLinkMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
return mark.type.name === 'link';
});
var borderMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
return (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border';
});
var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
var borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
component: _enums.ACTION_SUBJECT.RENDERER,
componentId: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE_IMAGE,
createAnalyticsEvent: createAnalyticsEvent
}, /*#__PURE__*/_react.default.createElement(_mediaInline.MediaInlineImageCard, {
mediaClient: ssr !== null && ssr !== void 0 && ssr.config ? (0, _mediaClientReact.getMediaClient)(ssr.config) : mediaClient,
identifier: identifier,
alt: alt,
width: width,
height: height,
ssr: ssr
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
border: {
borderSize: borderSize,
borderColor: borderColor
},
serializeDataAttrs: true,
shouldOpenMediaViewer: !hasLinkMark
}));
}
return /*#__PURE__*/_react.default.createElement(RenderMediaInline, {
identifier: identifier,
clipboardAttrs: clipboardAttrs,
eventHandlers: props.eventHandlers,
rendererAppearance: rendererAppearance,
intl: intl,
collection: collection,
featureFlags: featureFlags,
fallbackMediaNameFetcher: fallbackMediaNameFetcher
});
};
// eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = (0, _reactIntl.injectIntl)(MediaInline);
var _default = exports.default = _default_1;