@gechiui/block-editor/build/components/justify-content-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 _components = require("@gechiui/components");

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

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

/**
 * GeChiUI dependencies
 */
const icons = {
  left: _icons.justifyLeft,
  center: _icons.justifyCenter,
  right: _icons.justifyRight,
  'space-between': _icons.justifySpaceBetween
};

function JustifyContentUI(_ref) {
  let {
    allowedControls = ['left', 'center', 'right', 'space-between'],
    isCollapsed = true,
    onChange,
    value,
    popoverProps,
    isToolbar
  } = _ref;

  // If the control is already selected we want a click
  // again on the control to deselect the item, so we
  // call onChange( undefined )
  const handleClick = next => {
    if (next === value) {
      onChange(undefined);
    } else {
      onChange(next);
    }
  };

  const icon = value ? icons[value] : icons.left;
  const allControls = [{
    name: 'left',
    icon: _icons.justifyLeft,
    title: (0, _i18n.__)('左对齐项'),
    isActive: 'left' === value,
    onClick: () => handleClick('left')
  }, {
    name: 'center',
    icon: _icons.justifyCenter,
    title: (0, _i18n.__)('居中对齐项'),
    isActive: 'center' === value,
    onClick: () => handleClick('center')
  }, {
    name: 'right',
    icon: _icons.justifyRight,
    title: (0, _i18n.__)('右对齐项'),
    isActive: 'right' === value,
    onClick: () => handleClick('right')
  }, {
    name: 'space-between',
    icon: _icons.justifySpaceBetween,
    title: (0, _i18n.__)('项目间距'),
    isActive: 'space-between' === value,
    onClick: () => handleClick('space-between')
  }];
  const UIComponent = isToolbar ? _components.ToolbarGroup : _components.ToolbarDropdownMenu;
  const extraProps = isToolbar ? {
    isCollapsed
  } : {};
  return (0, _element.createElement)(UIComponent, (0, _extends2.default)({
    icon: icon,
    popoverProps: popoverProps,
    label: (0, _i18n.__)('更改项目对齐'),
    controls: allControls.filter(elem => allowedControls.includes(elem.name))
  }, extraProps));
}

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