@wordpress/block-library/build/navigation/edit/overlay-menu-preview.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = OverlayMenuPreview;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _overlayMenuIcon = _interopRequireDefault(require("./overlay-menu-icon"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function OverlayMenuPreview({
  setAttributes,
  hasIcon,
  icon
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      label: (0, _i18n.__)('Show icon button'),
      isShownByDefault: true,
      hasValue: () => !hasIcon,
      onDeselect: () => setAttributes({
        hasIcon: true
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
        __nextHasNoMarginBottom: true,
        label: (0, _i18n.__)('Show icon button'),
        help: (0, _i18n.__)('Configure the visual appearance of the button that toggles the overlay menu.'),
        onChange: value => setAttributes({
          hasIcon: value
        }),
        checked: hasIcon
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      label: (0, _i18n.__)('Icon'),
      isShownByDefault: true,
      hasValue: () => icon !== 'handle',
      onDeselect: () => setAttributes({
        icon: 'handle'
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        className: "wp-block-navigation__overlay-menu-icon-toggle-group",
        label: (0, _i18n.__)('Icon'),
        value: icon,
        onChange: value => setAttributes({
          icon: value
        }),
        isBlock: true,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
          value: "handle",
          "aria-label": (0, _i18n.__)('handle'),
          label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_overlayMenuIcon.default, {
            icon: "handle"
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
          value: "menu",
          "aria-label": (0, _i18n.__)('menu'),
          label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_overlayMenuIcon.default, {
            icon: "menu"
          })
        })]
      })
    })]
  });
}
//# sourceMappingURL=overlay-menu-preview.js.map