@gechiui/block-editor/build/components/block-vertical-alignment-control/ui.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@gechiui/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _i18n = require("@gechiui/i18n");

var _components = require("@gechiui/components");

var _icons = require("./icons");

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const BLOCK_ALIGNMENTS_CONTROLS = {
  top: {
    icon: _icons.alignTop,
    title: (0, _i18n._x)('Align top', 'Block vertical alignment setting')
  },
  center: {
    icon: _icons.alignCenter,
    title: (0, _i18n._x)('Align middle', 'Block vertical alignment setting')
  },
  bottom: {
    icon: _icons.alignBottom,
    title: (0, _i18n._x)('Align bottom', 'Block vertical alignment setting')
  }
};
const DEFAULT_CONTROLS = ['top', 'center', 'bottom'];
const DEFAULT_CONTROL = 'top';
const POPOVER_PROPS = {
  isAlternate: true
};

function BlockVerticalAlignmentUI(_ref) {
  let {
    value,
    onChange,
    controls = DEFAULT_CONTROLS,
    isCollapsed = true,
    isToolbar
  } = _ref;

  function applyOrUnset(align) {
    return () => onChange(value === align ? undefined : align);
  }

  const activeAlignment = BLOCK_ALIGNMENTS_CONTROLS[value];
  const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[DEFAULT_CONTROL];
  const UIComponent = isToolbar ? _components.ToolbarGroup : _components.ToolbarDropdownMenu;
  const extraProps = isToolbar ? {
    isCollapsed
  } : {};
  return (0, _element.createElement)(UIComponent, (0, _extends2.default)({
    popoverProps: POPOVER_PROPS,
    icon: activeAlignment ? activeAlignment.icon : defaultAlignmentControl.icon,
    label: (0, _i18n._x)('Change vertical alignment', 'Block vertical alignment setting label'),
    controls: controls.map(control => {
      return { ...BLOCK_ALIGNMENTS_CONTROLS[control],
        isActive: value === control,
        role: isCollapsed ? 'menuitemradio' : undefined,
        onClick: applyOrUnset(control)
      };
    })
  }, extraProps));
}
/**
 * @see https://github.com/GeChiUI/gutenberg/blob/HEAD/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md
 */


var _default = BlockVerticalAlignmentUI;
exports.default = _default;
//# sourceMappingURL=ui.js.map