@atlaskit/editor-plugin-table/dist/esm/ui/TableMenu/cell/items/VerticalAlignDropdownItem.js

Table plugin for the @atlaskit/editor

import React, { useCallback, useMemo } from 'react';
import { useIntl } from 'react-intl';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
import { setCellVerticalAlignmentWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
import { getPluginState } from '../../../../pm-plugins/plugin-factory';
import { useTableMenuContext } from '../../shared/TableMenuContext';
import { getSelectedCellValign } from './verticalAlignUtils';
export var VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref) {
  var _useTableMenuContext;
  var api = _ref.api,
    Icon = _ref.icon,
    label = _ref.label,
    value = _ref.value;
  var _ref2 = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
    editorView = _ref2.editorView;
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var selectedValign = useMemo(function () {
    return getSelectedCellValign(editorView);
  }, [editorView]);
  var handleClick = useCallback(function () {
    if (!editorView || !api) {
      return;
    }
    var _getPluginState = getPluginState(editorView.state),
      targetCellPosition = _getPluginState.targetCellPosition;
    api.core.actions.execute(function (_ref3) {
      var _api$analytics;
      var tr = _ref3.tr;
      setCellVerticalAlignmentWithAnalytics((_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, value, targetCellPosition)({
        tr: tr
      });
      closeActiveTableMenu(api)({
        tr: tr
      });
      return tr;
    });
    api.core.actions.focus();
  }, [api, editorView, value]);
  if (!editorView) {
    return null;
  }
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
    elemBefore: /*#__PURE__*/React.createElement(Icon, {
      color: "currentColor",
      label: "",
      size: "small"
    }),
    isSelected: selectedValign === value,
    onClick: handleClick,
    role: "menuitemradio"
  }, formatMessage(label));
};