@gechiui/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("@gechiui/element");

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

var _lodash = require("lodash");

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

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

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */
const DEFAULT_ALIGNMENT_CONTROLS = [{
  icon: _icons.alignLeft,
  title: (0, _i18n.__)('左对齐文字'),
  align: 'left'
}, {
  icon: _icons.alignCenter,
  title: (0, _i18n.__)('居中文字'),
  align: 'center'
}, {
  icon: _icons.alignRight,
  title: (0, _i18n.__)('右对齐文字'),
  align: 'right'
}];
const POPOVER_PROPS = {
  position: 'bottom right',
  isAlternate: true
};

function AlignmentUI(_ref) {
  let {
    value,
    onChange,
    alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
    label = (0, _i18n.__)('对齐'),
    describedBy = (0, _i18n.__)('修改文字对齐'),
    isCollapsed = true,
    isToolbar
  } = _ref;

  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.ToolbarDropdownMenu;
  const extraProps = isToolbar ? {
    isCollapsed
  } : {};
  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