@atlaskit/editor-plugin-selection-toolbar
Version:
@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core
58 lines (57 loc) • 2.03 kB
JavaScript
import React from 'react';
import { useIntl } from 'react-intl';
import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
import { PinIcon, PinnedIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
const shouldShowPinMenuItem = editMode => {
return editMode !== 'view';
};
const usePluginState = _api => {
const {
editorViewMode,
editorToolbarDockingPreference,
isOffline
} = useEditorToolbar();
return {
editorViewMode,
editorToolbarDockingPreference,
isOffline
};
};
/**
* The menu-item version of pin only appears in selection toolbar - the primary toolbar will have its own component
*/
export const PinMenuItem = ({
api,
disablePin
}) => {
const intl = useIntl();
const {
editorViewMode,
editorToolbarDockingPreference,
isOffline: isDisabled
} = usePluginState(api);
const isToolbarDocked = editorToolbarDockingPreference === 'top';
if (disablePin || !shouldShowPinMenuItem(editorViewMode)) {
return null;
}
const onClick = () => {
var _api$userPreferences;
if (!api || isDisabled) {
return;
}
api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.actions.updateUserPreference('toolbarDockingPosition', isToolbarDocked ? 'none' : 'top'));
};
const message = intl.formatMessage(isToolbarDocked ? selectionToolbarMessages.toolbarPositionPinedAtTop : selectionToolbarMessages.toolbarPositionUnpinnedConcise);
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
onClick: onClick,
isDisabled: isDisabled,
elemBefore: isToolbarDocked ? /*#__PURE__*/React.createElement(PinnedIcon, {
size: "small",
label: ""
}) : /*#__PURE__*/React.createElement(PinIcon, {
size: "small",
label: ""
})
}, message);
};