@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
134 lines (133 loc) • 6.65 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.LayoutButton = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntlNext = require("react-intl-next");
var _hooks = require("@atlaskit/editor-common/hooks");
var _ui = require("@atlaskit/editor-common/ui");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _utils = require("@atlaskit/editor-common/utils");
var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
var _shrinkHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/shrink-horizontal"));
var _linkingCommon = require("@atlaskit/linking-common");
var _actions = require("../../pm-plugins/actions");
var _utils2 = require("../../pm-plugins/utils");
var _utils3 = require("./utils");
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; } /**
* @jsxRuntime classic
* @jsx jsx
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
var toolbarButtonWrapperStyles = (0, _react2.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")
}
});
var LayoutButton = exports.LayoutButton = function LayoutButton(_ref) {
var onLayoutChange = _ref.onLayoutChange,
_ref$layout = _ref.layout,
layout = _ref$layout === void 0 ? _linkingCommon.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 = (0, _react.useCallback)(function () {
onLayoutChange && onLayoutChange((0, _utils.getNextBreakoutMode)(layout));
}, [layout, onLayoutChange]);
var title = (0, _react.useMemo)(function () {
return formatMessage((0, _utils.getTitle)(layout));
}, [formatMessage, layout]);
if (!targetElement) {
return null;
}
return (0, _react2.jsx)(_ui.Popup, {
mountTo: mountPoint,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement,
target: targetElement,
alignY: "start",
alignX: "end",
forcePlacement: true,
stick: true,
ariaLabel: title
}, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
testId: testId,
css: toolbarButtonWrapperStyles,
title: title,
onClick: handleClick,
iconBefore: layout === 'full-width' ? (0, _react2.jsx)(_shrinkHorizontal.default, {
label: title
}) : (0, _react2.jsx)(_growHorizontal.default, {
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 = (0, _utils3.getDatasource)(editorView),
node = _getDatasource.node,
pos = _getDatasource.pos;
var _useSharedPluginState = (0, _hooks.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 = (0, _utils2.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 = (0, _utils3.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((0, _actions.setCardLayout)(layout)(tr));
};
return (0, _react2.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: (0, _utils3.isDatasourceTableLayout)(layout) ? layout : undefined,
onLayoutChange: onLayoutChange,
intl: intl
});
};
var _default_1 = (0, _reactIntlNext.injectIntl)(LayoutButtonWrapper);
var _default = exports.default = _default_1;