@atlaskit/editor-plugin-media/dist/esm/ui/ImageBorder/index.js

Media plugin for @atlaskit/editor-core

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/** @jsx jsx */
import { useRef, useState } from 'react';
import { jsx } from '@emotion/react';
import { BorderIcon } from '@atlaskit/editor-common/icons';
import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
import { Popup } from '@atlaskit/editor-common/ui';
import { borderColorPalette, borderPaletteTooltipMessages, ColorPalette } from '@atlaskit/editor-common/ui-color';
import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
import Tooltip from '@atlaskit/tooltip';
import { messages } from './messages';
import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
var ImageBorder = function ImageBorder(_ref) {
  var formatMessage = _ref.intl.formatMessage,
    toggleBorder = _ref.toggleBorder,
    borderMark = _ref.borderMark,
    setBorder = _ref.setBorder;
  var popupTarget = useRef(null);
  var enabled = !!borderMark;
  var color = borderMark === null || borderMark === void 0 ? void 0 : borderMark.color;
  var size = borderMark === null || borderMark === void 0 ? void 0 : borderMark.size;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isColorSubmenuOpen = _useState4[0],
    setIsColorSubmenuOpen = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    isSizeSubmenuOpen = _useState6[0],
    setIsSizeSubmenuOpen = _useState6[1];
  var handleSubMenuRef = function handleSubMenuRef(ref) {
    if (!ref) {
      return;
    }
    var rect = ref.getBoundingClientRect();
    if (rect.left + rect.width > window.innerWidth) {
      ref.style.left = "-".concat(rect.width, "px");
    }
  };
  var borderSizeOptions = [{
    name: formatMessage(messages.borderSizeSubtle),
    value: 1
  }, {
    name: formatMessage(messages.borderSizeMedium),
    value: 2
  }, {
    name: formatMessage(messages.borderSizeBold),
    value: 3
  }];
  var items = [{
    content: formatMessage(messages.borderColor),
    value: {
      name: 'color'
    },
    elemAfter: jsx("div", {
      className: DropdownMenuSharedCssClassName.SUBMENU
    }, jsx("div", {
      css: contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color))
    }), isColorSubmenuOpen && jsx("div", {
      css: contextualSubMenu(0),
      ref: handleSubMenuRef
    }, jsx(ColorPalette, {
      onClick: function onClick(color) {
        setBorder({
          color: color
        });
        setIsOpen(!isOpen);
      },
      selectedColor: color !== null && color !== void 0 ? color : null,
      paletteOptions: {
        palette: borderColorPalette,
        paletteColorTooltipMessages: borderPaletteTooltipMessages,
        hexToPaletteColor: hexToEditorBorderPaletteColor
      }
    })))
  }, {
    content: formatMessage(messages.borderSize),
    value: {
      name: 'size'
    },
    elemAfter: jsx("div", {
      className: DropdownMenuSharedCssClassName.SUBMENU
    }, jsx("div", {
      css: contextualMenuArrow
    }), isSizeSubmenuOpen && jsx("div", {
      css: contextualSubMenu(1),
      ref: handleSubMenuRef
    }, borderSizeOptions.map(function (_ref2, idx) {
      var name = _ref2.name,
        value = _ref2.value;
      return jsx(Tooltip, {
        key: idx,
        content: name
      }, jsx("span", {
        css: buttonWrapperStyle
      }, jsx("button", {
        css: buttonStyle(value === size),
        "aria-label": name,
        role: "radio",
        "aria-checked": value === size,
        onClick: function onClick() {
          setBorder({
            size: value
          });
          setIsOpen(false);
        },
        onMouseDown: function onMouseDown(e) {
          e.preventDefault();
        }
      }, jsx("div", {
        css: line(value, value === size),
        role: "presentation"
      }))));
    })))
  }];

  /**
   * We want to change direction of our dropdowns a bit early,
   * not exactly when it hits the boundary.
   */
  var fitTolerance = 10;
  var fitWidth = menuItemDimensions.width;
  var fitHeight = items.length * (menuItemDimensions.height + itemSpacing);
  return jsx("div", null, jsx("div", {
    css: toolbarButtonWrapper({
      enabled: enabled,
      isOpen: isOpen
    })
  }, jsx(ToolbarButton, {
    className: "image-border-toolbar-btn",
    selected: enabled,
    onClick: toggleBorder,
    spacing: "compact",
    "aria-label": enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder),
    iconBefore: jsx(BorderIcon, {
      label: ""
    }),
    title: enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder)
  }), jsx("div", {
    ref: popupTarget
  }, jsx(ToolbarButton, {
    className: "image-border-toolbar-dropdown",
    selected: enabled || isOpen,
    "aria-label": formatMessage(messages.borderOptions),
    title: formatMessage(messages.borderOptions),
    spacing: "compact",
    iconBefore: jsx(ExpandIcon, {
      label: ""
    }),
    onClick: function onClick() {
      setIsOpen(!isOpen);
    }
  }))), jsx(Popup, {
    target: popupTarget.current ? popupTarget.current : undefined,
    fitWidth: fitWidth + fitTolerance,
    fitHeight: fitHeight + fitTolerance,
    forcePlacement: true,
    stick: true
  }, jsx("div", {
    onMouseLeave: function onMouseLeave() {
      setIsColorSubmenuOpen(false);
      setIsSizeSubmenuOpen(false);
    }
  }, jsx(DropdownMenu
  //This needs be removed when the a11y is completely handled
  //Disabling key navigation now as it works only partially
  //Same with packages/editor/editor-plugin-table/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx
  , {
    arrowKeyNavigationProviderOptions: {
      type: ArrowKeyNavigationType.MENU,
      disableArrowKeyNavigation: true
    },
    items: [{
      items: items
    }],
    isOpen: isOpen,
    onOpenChange: function onOpenChange() {
      setIsOpen(false);
      setIsColorSubmenuOpen(false);
      setIsSizeSubmenuOpen(false);
    },
    onItemActivated: function onItemActivated(_ref3) {
      var item = _ref3.item;
      if (item.value.name === 'color') {
        setIsColorSubmenuOpen(!isColorSubmenuOpen);
      }
      if (item.value.name === 'size') {
        setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
      }
    },
    onMouseEnter: function onMouseEnter(_ref4) {
      var item = _ref4.item;
      if (item.value.name === 'color') {
        setIsColorSubmenuOpen(true);
      }
      if (item.value.name === 'size') {
        setIsSizeSubmenuOpen(true);
      }
    },
    onMouseLeave: function onMouseLeave(_ref5) {
      var item = _ref5.item;
      if (item.value.name === 'color') {
        setIsColorSubmenuOpen(false);
      }
      if (item.value.name === 'size') {
        setIsSizeSubmenuOpen(false);
      }
    },
    fitWidth: fitWidth + fitTolerance,
    fitHeight: fitHeight + fitTolerance
  }))));
};
export default ImageBorder;