@wordpress/block-editor/build/components/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("@wordpress/element");

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

var _lodash = require("lodash");

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

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

var _icons = require("@wordpress/icons");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
const DEFAULT_ALIGNMENT_CONTROLS = [{
  icon: _icons.alignLeft,
  title: (0, _i18n.__)('Align text left'),
  align: 'left'
}, {
  icon: _icons.alignCenter,
  title: (0, _i18n.__)('Align text center'),
  align: 'center'
}, {
  icon: _icons.alignRight,
  title: (0, _i18n.__)('Align text right'),
  align: 'right'
}];
const POPOVER_PROPS = {
  position: 'bottom right',
  isAlternate: true
};

function AlignmentUI({
  value,
  onChange,
  alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
  label = (0, _i18n.__)('Align'),
  describedBy = (0, _i18n.__)('Change text alignment'),
  isCollapsed = true,
  isToolbar,
  isToolbarButton = true
}) {
  function applyOrUnset(align) {
    return () => onChange(value === align ? undefined : align);
  }

  const activeAlignment = (0, _lodash.find)(alignmentControls, control => control.align === value);

  function setIcon() {
    if (activeAlignment) return activeAlignment.icon;
    return (0, _i18n.isRTL)() ? _icons.alignRight : _icons.alignLeft;
  }

  const UIComponent = isToolbar ? _components.ToolbarGroup : _components.DropdownMenu;
  const extraProps = isToolbar ? {
    isCollapsed
  } : {
    isToolbarButton
  };
  return (0, _element.createElement)(UIComponent, (0, _extends2.default)({
    icon: setIcon(),
    label: label,
    toggleProps: {
      describedBy
    },
    popoverProps: POPOVER_PROPS,
    controls: alignmentControls.map(control => {
      const {
        align
      } = control;
      const isActive = value === align;
      return { ...control,
        isActive,
        role: isCollapsed ? 'menuitemradio' : undefined,
        onClick: applyOrUnset(align)
      };
    })
  }, extraProps));
}

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