@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
129 lines • 6.19 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useCallback, useMemo } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl-next';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { Popup } from '@atlaskit/editor-common/ui';
import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
import { DATASOURCE_DEFAULT_LAYOUT } from '@atlaskit/linking-common';
import { setCardLayout } from '../../pm-plugins/actions';
import { isDatasourceNode } from '../../pm-plugins/utils';
import { getDatasource, isDatasourceTableLayout } from './utils';
var toolbarButtonWrapperStyles = css({
background: "var(--ds-background-neutral, #0515240F)",
color: "var(--ds-icon, #292A2E)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
':hover': {
background: "var(--ds-background-neutral-hovered, #0B120E24)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
color: "var(--ds-icon, #292A2E)".concat(" !important")
}
});
export var LayoutButton = function LayoutButton(_ref) {
var onLayoutChange = _ref.onLayoutChange,
_ref$layout = _ref.layout,
layout = _ref$layout === void 0 ? DATASOURCE_DEFAULT_LAYOUT : _ref$layout,
formatMessage = _ref.intl.formatMessage,
mountPoint = _ref.mountPoint,
boundariesElement = _ref.boundariesElement,
scrollableElement = _ref.scrollableElement,
targetElement = _ref.targetElement,
_ref$testId = _ref.testId,
testId = _ref$testId === void 0 ? 'datasource-table-layout-button' : _ref$testId;
var handleClick = useCallback(function () {
onLayoutChange && onLayoutChange(getNextBreakoutMode(layout));
}, [layout, onLayoutChange]);
var title = useMemo(function () {
return formatMessage(getTitle(layout));
}, [formatMessage, layout]);
if (!targetElement) {
return null;
}
return jsx(Popup, {
mountTo: mountPoint,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement,
target: targetElement,
alignY: "start",
alignX: "end",
forcePlacement: true,
stick: true,
ariaLabel: title
}, jsx(ToolbarButton, {
testId: testId,
css: toolbarButtonWrapperStyles,
title: title,
onClick: handleClick,
iconBefore: layout === 'full-width' ? jsx(ShrinkHorizontalIcon, {
label: title
}) : jsx(GrowHorizontalIcon, {
label: title
})
}));
};
var selector = function selector(states) {
var _states$cardState, _states$cardState2;
return {
layout: (_states$cardState = states.cardState) === null || _states$cardState === void 0 ? void 0 : _states$cardState.layout,
datasourceTableRef: (_states$cardState2 = states.cardState) === null || _states$cardState2 === void 0 ? void 0 : _states$cardState2.datasourceTableRef
};
};
var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
var _node$attrs;
var editorView = _ref2.editorView,
mountPoint = _ref2.mountPoint,
scrollableElement = _ref2.scrollableElement,
boundariesElement = _ref2.boundariesElement,
intl = _ref2.intl,
api = _ref2.api;
var _getDatasource = getDatasource(editorView),
node = _getDatasource.node,
pos = _getDatasource.pos;
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['card'], selector),
_useSharedPluginState2 = _useSharedPluginState.layout,
layout = _useSharedPluginState2 === void 0 ? (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || undefined : _useSharedPluginState2,
datasourceTableRef = _useSharedPluginState.datasourceTableRef;
var isDatasource = isDatasourceNode(node);
if (!isDatasource) {
return null;
}
var onLayoutChange = function onLayoutChange(layout) {
var _getDatasource$node;
if (pos === undefined) {
return;
}
var state = editorView.state,
dispatch = editorView.dispatch;
// If the button does not re-render due to no card state change, node reference will be stale
var datasourceNode = (_getDatasource$node = getDatasource(editorView).node) !== null && _getDatasource$node !== void 0 ? _getDatasource$node : node;
var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, datasourceNode === null || datasourceNode === void 0 ? void 0 : datasourceNode.attrs), {}, {
layout: layout
}));
tr.setMeta('scrollIntoView', false);
dispatch(setCardLayout(layout)(tr));
};
return jsx(LayoutButton, {
mountPoint: mountPoint,
scrollableElement: scrollableElement,
boundariesElement: boundariesElement
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
targetElement: datasourceTableRef,
layout: isDatasourceTableLayout(layout) ? layout : undefined,
onLayoutChange: onLayoutChange,
intl: intl
});
};
var _default_1 = injectIntl(LayoutButtonWrapper);
export default _default_1;