@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
132 lines • 4.68 kB
JavaScript
/**
* @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';
const 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)"} !important`
}
});
export const LayoutButton = ({
onLayoutChange,
layout = DATASOURCE_DEFAULT_LAYOUT,
intl: {
formatMessage
},
mountPoint,
boundariesElement,
scrollableElement,
targetElement,
testId = 'datasource-table-layout-button'
}) => {
const handleClick = useCallback(() => {
onLayoutChange && onLayoutChange(getNextBreakoutMode(layout));
}, [layout, onLayoutChange]);
const title = useMemo(() => {
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
})
}));
};
const 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
};
};
const LayoutButtonWrapper = ({
editorView,
mountPoint,
scrollableElement,
boundariesElement,
intl,
api
}) => {
var _node$attrs;
const {
node,
pos
} = getDatasource(editorView);
const {
layout = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || undefined,
datasourceTableRef
} = useSharedPluginStateWithSelector(api, ['card'], selector);
const isDatasource = isDatasourceNode(node);
if (!isDatasource) {
return null;
}
const onLayoutChange = layout => {
var _getDatasource$node;
if (pos === undefined) {
return;
}
const {
state,
dispatch
} = editorView;
// If the button does not re-render due to no card state change, node reference will be stale
const datasourceNode = (_getDatasource$node = getDatasource(editorView).node) !== null && _getDatasource$node !== void 0 ? _getDatasource$node : node;
const tr = state.tr.setNodeMarkup(pos, undefined, {
...(datasourceNode === null || datasourceNode === void 0 ? void 0 : datasourceNode.attrs),
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
});
};
const _default_1 = injectIntl(LayoutButtonWrapper);
export default _default_1;