@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
318 lines (317 loc) • 13.4 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["extensionKey"];
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useCallback, useMemo, useRef, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { FormattedMessage } from 'react-intl-next';
import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import { useSmartLinkContext } from '@atlaskit/link-provider';
import { ButtonItem } from '@atlaskit/menu';
import { Flex } from '@atlaskit/primitives/compiled';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { focusEditorView, isDatasourceConfigEditable } from '../../pm-plugins/utils';
import { editDatasource } from '../editDatasourceAction';
import { useFetchDatasourceDataInfo } from '../useFetchDatasourceDataInfo';
import { useFetchDatasourceInfo } from '../useFetchDatasourceInfo';
import EditToolbarButtonPresentation from './EditToolbarButtonPresentation';
var dropdownExpandContainer = css({
margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
});
var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext(props) {
var _response$datasourceI;
var cardContext = props.cardContext,
currentAppearance = props.currentAppearance,
editorAnalyticsApi = props.editorAnalyticsApi,
editorView = props.editorView,
intl = props.intl,
onLinkEditClick = props.onLinkEditClick,
url = props.url,
areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
var _useFetchDatasourceIn = useFetchDatasourceInfo({
isRegularCardNode: true,
url: url,
cardContext: cardContext
}),
extensionKey = _useFetchDatasourceIn.extensionKey,
response = _objectWithoutProperties(_useFetchDatasourceIn, _excluded);
var datasourceId = (_response$datasourceI = response.datasourceId) !== null && _response$datasourceI !== void 0 ? _response$datasourceI : props.datasourceId;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var containerRef = useRef();
var toggleOpen = function toggleOpen() {
return setIsOpen(function (open) {
return !open;
});
};
var onClose = function onClose() {
return setIsOpen(false);
};
var onEditLink = useCallback(function () {
if (editorView) {
onLinkEditClick(editorView.state, editorView.dispatch);
focusEditorView(editorView);
}
}, [editorView, onLinkEditClick]);
var editVariant = useMemo(function () {
var hasUrl = url !== null && url !== undefined;
if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
if (hasUrl) {
return 'edit-link';
}
return 'none';
}
if (hasUrl) {
var _cardContext$store, _urlState$error;
var urlState = cardContext === null || cardContext === void 0 || (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
if ((urlState === null || urlState === void 0 || (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
return 'edit-link';
}
return 'edit-dropdown';
} else {
return 'edit-datasource';
}
}, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
var onEditDatasource = useCallback(function () {
if (editorView && datasourceId) {
editDatasource(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
focusEditorView(editorView);
}
}, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
switch (editVariant) {
case 'edit-link':
{
return jsx(Flex, {
gap: "space.050"
}, jsx(Button, {
testId: "edit-link",
onClick: onEditLink,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}, jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, linkToolbarMessages.editLink)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, {
areAnyNewToolbarFlagsEnabled: false
}));
}
case 'edit-datasource':
{
return jsx(Flex, {
gap: "space.050"
}, jsx(Button, {
testId: "edit-datasource",
tooltipContent: intl.formatMessage(linkToolbarMessages.editDatasourceStandaloneTooltip),
onClick: onEditDatasource,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}, jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, linkToolbarMessages.editDatasourceStandalone)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, {
areAnyNewToolbarFlagsEnabled: false
}));
}
case 'edit-dropdown':
{
var trigger = jsx(Flex, {
gap: "space.050"
}, jsx(Button, {
testId: "edit-dropdown-trigger",
iconAfter: jsx("span", {
css: dropdownExpandContainer
}, jsx(ChevronDownIcon, {
label: intl.formatMessage(messages.editDropdownTriggerTitle),
size: "small"
})),
onClick: toggleOpen,
selected: isOpen,
disabled: false,
ariaHasPopup: true,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}, jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, messages.editDropdownTriggerTitle)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, {
areAnyNewToolbarFlagsEnabled: false
}));
return jsx(Flex, {
ref: containerRef
}, jsx(UiDropdown, {
mountTo: containerRef.current,
isOpen: isOpen,
handleClickOutside: onClose,
handleEscapeKeydown: onClose,
trigger: trigger,
scrollableElement: containerRef.current
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
arrowKeyNavigationProviderOptions: {
type: ArrowKeyNavigationType.MENU
}
}, jsx(ButtonItem, {
key: "edit.link",
onClick: onEditLink,
testId: "edit-dropdown-edit-link-item"
}, jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, messages.editDropdownEditLinkTitle)), jsx(ButtonItem, {
key: "edit.datasource",
onClick: onEditDatasource,
testId: "edit-dropdown-edit-datasource-item"
}, jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, messages.editDropdownEditDatasourceTitle))));
}
case 'none':
default:
return null;
}
};
var EditToolbarButtonWithUrl = function EditToolbarButtonWithUrl(props) {
var cardContext = props.cardContext,
currentAppearance = props.currentAppearance,
datasourceIdFromAdf = props.datasourceId,
editorAnalyticsApi = props.editorAnalyticsApi,
editorView = props.editorView,
intl = props.intl,
onLinkEditClick = props.onLinkEditClick,
url = props.url,
areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
var _useFetchDatasourceIn2 = useFetchDatasourceInfo({
isRegularCardNode: true,
url: url,
cardContext: cardContext
}),
extensionKey = _useFetchDatasourceIn2.extensionKey,
datasourceIdFromUrl = _useFetchDatasourceIn2.datasourceId;
var datasourceId = datasourceIdFromUrl !== null && datasourceIdFromUrl !== void 0 ? datasourceIdFromUrl : datasourceIdFromAdf;
var editVariant = useMemo(function () {
var _cardContext$store2, _urlState$error2;
if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
return 'edit-link';
}
var urlState = cardContext === null || cardContext === void 0 || (_cardContext$store2 = cardContext.store) === null || _cardContext$store2 === void 0 ? void 0 : _cardContext$store2.getState()[url];
if ((urlState === null || urlState === void 0 || (_urlState$error2 = urlState.error) === null || _urlState$error2 === void 0 ? void 0 : _urlState$error2.kind) === 'fatal') {
return 'edit-link';
}
return 'edit-dropdown';
}, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
return jsx(EditToolbarButtonPresentation, {
datasourceId: datasourceId,
currentAppearance: currentAppearance,
editorAnalyticsApi: editorAnalyticsApi,
editVariant: editVariant,
editorView: editorView,
extensionKey: extensionKey,
onLinkEditClick: onLinkEditClick,
intl: intl,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
});
};
var EditToolbarButtonWithDatasourceId = function EditToolbarButtonWithDatasourceId(props) {
var currentAppearance = props.currentAppearance,
editorAnalyticsApi = props.editorAnalyticsApi,
editorView = props.editorView,
intl = props.intl,
onLinkEditClick = props.onLinkEditClick,
datasourceId = props.datasourceId,
node = props.node,
areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
var fetchData = useMemo(function () {
try {
var _attrs$datasource$vie;
var attrs = node.attrs;
var parameters = attrs.datasource.parameters;
var visibleColumnKeys = (_attrs$datasource$vie = attrs.datasource.views[0]) === null || _attrs$datasource$vie === void 0 || (_attrs$datasource$vie = _attrs$datasource$vie.properties) === null || _attrs$datasource$vie === void 0 ? void 0 : _attrs$datasource$vie.columns.map(function (c) {
return c.key;
});
return {
parameters: parameters,
visibleColumnKeys: visibleColumnKeys
};
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
}, [node.attrs]);
var _useFetchDatasourceDa = useFetchDatasourceDataInfo({
datasourceId: datasourceId,
parameters: fetchData === null || fetchData === void 0 ? void 0 : fetchData.parameters,
visibleColumnKeys: fetchData === null || fetchData === void 0 ? void 0 : fetchData.visibleColumnKeys
}),
extensionKey = _useFetchDatasourceDa.extensionKey;
var editVariant = useMemo(function () {
if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
return 'none';
}
return 'edit-datasource';
}, [datasourceId]);
return jsx(EditToolbarButtonPresentation, {
datasourceId: datasourceId,
currentAppearance: currentAppearance,
editorAnalyticsApi: editorAnalyticsApi,
editVariant: editVariant,
editorView: editorView,
extensionKey: extensionKey,
onLinkEditClick: onLinkEditClick,
intl: intl,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
});
};
export var EditToolbarButton = function EditToolbarButton(props) {
var currentAppearance = props.currentAppearance,
datasourceId = props.datasourceId,
editorAnalyticsApi = props.editorAnalyticsApi,
editorView = props.editorView,
intl = props.intl,
onLinkEditClick = props.onLinkEditClick,
url = props.url,
areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
var cardContext = useSmartLinkContext();
if (props.url) {
return jsx(EditToolbarButtonWithUrl, {
datasourceId: datasourceId,
url: props.url,
intl: intl,
editorAnalyticsApi: editorAnalyticsApi,
editorView: editorView,
cardContext: cardContext,
onLinkEditClick: onLinkEditClick,
currentAppearance: currentAppearance,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
});
}
if (props.datasourceId && props.node) {
return jsx(EditToolbarButtonWithDatasourceId, {
datasourceId: props.datasourceId,
node: props.node,
intl: intl,
editorAnalyticsApi: editorAnalyticsApi,
editorView: editorView,
onLinkEditClick: onLinkEditClick,
currentAppearance: currentAppearance,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
});
}
return jsx(EditToolbarButtonWithCardContext, {
datasourceId: datasourceId,
url: url,
intl: intl,
editorAnalyticsApi: editorAnalyticsApi,
editorView: editorView,
cardContext: cardContext,
onLinkEditClick: onLinkEditClick,
currentAppearance: currentAppearance,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
});
};